v6 SegmentedControl component restyle

packages/lib/src/components/internal/SegmentedControl/SegmentedControl.scss

@@ -1,37 +1,50 @@
+.adyen-checkout-checkmark {
+    --checkmark-color: var(--adyen-checkout-color-label-primary);
+
+    transform: rotate(45deg);
+    height: var(--adyen-checkout-spacer-060);
+    width: var(--adyen-checkout-spacer-030);
+    border-bottom: 1.5px solid var(--checkmark-color);
+    border-right: 1.5px solid var(--checkmark-color);
+}
+
 .adyen-checkout__segmented-control {
     display: flex;
     justify-content: space-between;
     gap: var(--adyen-checkout-spacer-020);
-    padding: var(--adyen-checkout-spacer-020) 5px;
-    background: var(--adyen-checkout-color-surface-primary);
-    border-radius: var(--adyen-checkout-border-radius-m);
-    border: var(--adyen-checkout-border-width-s) solid var(--adyen-checkout-color-outline-secondary);
+    padding: var(--adyen-checkout-spacer-030);
+    background: var(--adyen-checkout-color-background-tertiary);
+    border-radius: var(--adyen-checkout-border-radius-l);
 
     &--disabled {
         pointer-events: none;
 
         > .adyen-checkout__segmented-control-segment {
-            color: #8390a3;
+            color: var(--adyen-checkout-color-on-interactive-disabled);
         }
 
         > .adyen-checkout__segmented-control-segment--selected {
-            background: #f3f6f9;
-            border: 1.5px solid #8390a3;
+            .adyen-checkout-checkmark {
+                --checkmark-color: var(--adyen-checkout-color-on-interactive-disabled);
+            }
         }
     }
 }
 
 .adyen-checkout__segmented-control-segment {
-    font-weight: var(--adyen-checkout-text-body-stronger-font-weight);
-    color: var(--adyen-checkout-color-label-primary);
-    width: 100%;
-    height: var(--adyen-checkout-spacer-110);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--adyen-checkout-spacer-050);
     flex-grow: 1;
     cursor: pointer;
-    background: var(--adyen-checkout-color-surface-primary);
-    border-radius: 6px;
-    border: 0;
+    width: 100%;
+    height: var(--adyen-checkout-spacer-110);
+    color: var(--adyen-checkout-color-label-primary);
     text-align: center;
+    font-weight: var(--adyen-checkout-text-body-stronger-font-weight);
+    border-radius: var(--adyen-checkout-border-radius-m);
+    border: 0;
     transition: background 0.3s ease-out;
 
     &:not(&--selected):hover {
@@ -40,13 +53,13 @@
 
     &:active {
         background-color: var(--adyen-checkout-color-background-secondary);
-        border: 1.5px solid var(--adyen-checkout-color-outline-tertiary);
     }
 
     &--selected {
-        background: var(--adyen-checkout-color-background-always-dark);
-        color: var(--adyen-checkout-color-surface-primary);
-        box-shadow: 0 1px var(--adyen-checkout-spacer-010) 0 rgba(0 17 44 / 2%), 0 var(--adyen-checkout-spacer-010) var(--adyen-checkout-spacer-020) 0 rgba(0 17 44 / 4%);
-        font-weight: var(--adyen-checkout-text-body-stronger-font-weight);
+        background: var(--adyen-checkout-color-background-primary);
+        color: var(--adyen-checkout-color-label-primary);
+        box-shadow:
+            0 1px var(--adyen-checkout-spacer-010) 0 rgba(0 17 44 / 2%),
+            0 var(--adyen-checkout-spacer-010) var(--adyen-checkout-spacer-020) 0 rgba(0 17 44 / 4%);
     }
 }

packages/lib/src/components/internal/SegmentedControl/SegmentedControl.tsx

@@ -2,15 +2,15 @@ import { h } from 'preact';
 import cx from 'classnames';
 import './SegmentedControl.scss';
 
-interface SegmentedControlProps<T> {
+export interface SegmentedControlProps<T> {
     classNameModifiers?: string[];
     selectedValue: T;
     disabled?: boolean;
     options: Array<{ label: string; value: T; htmlProps?: any }>;
     onChange(value: T, event: MouseEvent): void;
 }
 
-function SegmentedControl<T>({ classNameModifiers, selectedValue, disabled = false, options, onChange }: SegmentedControlProps<T>) {
+function SegmentedControl<T>({ classNameModifiers = [], selectedValue, disabled = false, options, onChange }: SegmentedControlProps<T>) {
     if (!options || options.length === 0) {
         return null;
     }
@@ -35,6 +35,7 @@ function SegmentedControl<T>({ classNameModifiers, selectedValue, disabled = fal
                     type="button"
                     {...htmlProps}
                 >
+                    {selectedValue === value && <span className="adyen-checkout-checkmark"></span>}
                     {label}
                 </button>
             ))}

packages/lib/src/style/design-tokens.scss

@@ -83,6 +83,7 @@
     --adyen-checkout-color-background-always-dark: var(--adyen-checkout-color-grey-3200);
     --adyen-checkout-color-background-primary: var(--adyen-checkout-color-white);
     --adyen-checkout-color-background-secondary: var(--adyen-checkout-color-grey-100);
+    --adyen-checkout-color-background-tertiary: var(--adyen-checkout-color-grey-200);
 
     /* Drop-in */
     --adyen-checkout-dropin-payment-list-gap: var(--adyen-checkout-spacer-100);

packages/lib/storybook/stories/internals/SegmentedControl.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/preact';
+import SegmentedControl from '../../../src/components/internal/SegmentedControl';
+import { SegmentedControlProps } from '../../../src/components/internal/SegmentedControl/SegmentedControl';
+import { useState } from 'preact/hooks';
+
+const options = [
+    { label: 'Master Card', value: 'mc' },
+    { label: 'Visa Card', value: 'visa' },
+    { label: 'American Express', value: 'amex' }
+];
+
+const meta: Meta = {
+    title: 'Internals/SegmentedControl',
+    component: SegmentedControl,
+    argTypes: {
+        selectedValue: {
+            options: options.map(opt => opt.value),
+            control: { type: 'radio' }
+        }
+    },
+    args: {
+        options,
+        selectedValue: 'mc',
+        disabled: false
+    }
+};
+
+export const Default: StoryObj<SegmentedControlProps<string>> = {
+    render: args => {
+        const [selected, setSelected] = useState<string>(args.selectedValue);
+        return <SegmentedControl {...args} selectedValue={selected} onChange={v => setSelected(v)} />;
+    },
+    parameters: {
+        controls: { exclude: ['useSessions', 'countryCode', 'shopperLocale', 'amount', 'showPayButton'] }
+    }
+};
+
+export default meta;