Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/v6' into v6
Browse files Browse the repository at this point in the history
  • Loading branch information
sponglord committed Mar 12, 2024
2 parents b0702c5 + 3074c5a commit 957da7c
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 21 deletions.
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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%);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -35,6 +35,7 @@ function SegmentedControl<T>({ classNameModifiers, selectedValue, disabled = fal
type="button"
{...htmlProps}
>
{selectedValue === value && <span className="adyen-checkout-checkmark"></span>}
{label}
</button>
))}
Expand Down
1 change: 1 addition & 0 deletions packages/lib/src/style/design-tokens.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 957da7c

Please sign in to comment.