Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toggle component #3031

Merged
merged 3 commits into from
Dec 20, 2024
Merged

Toggle component #3031

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3785756
intial draft toggle
ribeiroguilherme Dec 17, 2024
3970ca5
using bento css. added different stories and mixins.
ribeiroguilherme Dec 18, 2024
0663f48
removed user-select css
ribeiroguilherme Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 158 additions & 0 deletions packages/lib/src/components/internal/Toggle/Toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
@use 'styles/mixins';
@import 'styles/variable-generator';

.adyen-checkout-toggle {
$component-root: &;
$label-padding: token(toggle-label-padding);

color: inherit;
cursor: pointer;
display: flex;
width: auto;

@include mixins.box-sizing-setter(true);

&--disabled {
cursor: not-allowed;
display: flex;
}

&--readonly {
pointer-events: none;
}

&--label-first {
align-items: flex-start;
flex-direction: row-reverse;
justify-content: flex-end;
}

&__input {
cursor: inherit;
opacity: 0;
position: absolute;
}

&__track {
align-items: center;
background-color: token(toggle-track-background-color);
border: token(toggle-track-border);
border-radius: token(toggle-track-border-radius);
display: flex;
height: token(toggle-track-height);
min-width: token(toggle-track-width);
padding: token(toggle-track-padding);
position: relative;

#{$component-root}__input:focus-visible + & {
@include mixins.b-focus-ring;
m1aw marked this conversation as resolved.
Show resolved Hide resolved
}

#{$component-root}__input:hover:enabled + & {
background-color: token(toggle-track-hover-background-color);
border-color: token(toggle-track-hover-border-color);
}

#{$component-root}__input:active:enabled + & {
background-color: token(toggle-track-active-background-color);
border-color: token(toggle-track-active-border-color);
}

#{$component-root}__input:disabled + & {
background-color: token(toggle-track-disabled-background-color);
border-color: token(toggle-track-disabled-border-color);
cursor: not-allowed;

path {
fill: #8d95a3
}
}

#{$component-root}--readonly #{$component-root}__input + & {
background-color: token(toggle-track-readonly-background-color);
border-color: token(toggle-track-readonly-border-color);
}

#{$component-root}__input:checked + & {
background-color: token(toggle-track-toggled-background-color);
border: token(toggle-track-toggled-border);
padding: token(toggle-track-toggled-padding);
}

#{$component-root}__input:checked:hover:enabled + & {
background-color: token(toggle-track-toggled-hover-background-color);
}

#{$component-root}__input:checked:active:enabled + & {
background-color: token(toggle-track-toggled-active-background-color);
}

#{$component-root}__input:checked:disabled + & {
background-color: token(toggle-track-toggled-disabled-background-color);
}

#{$component-root}--readonly #{$component-root}__input:checked + & {
background-color: token(toggle-track-toggled-readonly-background-color);
}
}

&__handle {
align-content: center;
background-color: token(toggle-handle-background-color);
border-radius: token(toggle-handle-border-radius);
color: token(toggle-handle-toggled-color);
display: inline-flex;
height: token(toggle-handle-height);
justify-content: center;
transition: token(toggle-handle-transition);
width: token(toggle-handle-width);

#{$component-root}__input:disabled + * & {
background-color: token(toggle-handle-disabled-background-color);
cursor: not-allowed;
}

#{$component-root}__input:checked + * & {
background-color: token(toggle-handle-toggled-background-color);
height: token(toggle-handle-toggled-height);
transform: translateX(100%);
width: token(toggle-handle-toggled-width);
}

#{$component-root}__input:checked:disabled + * & {
background-color: token(toggle-handle-toggled-disabled-background-color);
color: token(toggle-handle-toggled-disabled-color);
cursor: not-allowed;
}

#{$component-root}--readonly #{$component-root}__input:checked + * & {
background-color: token(toggle-handle-toggled-readonly-background-color);
}
}

&__label-container {
display: flex;
flex-direction: column;
padding-left: $label-padding;

@include mixins.adyen-checkout-text-body;

#{$component-root}--label-first > & {
padding-left: 0;
padding-right: $label-padding;
}
}

&__label {
vertical-align: baseline;

@include mixins.adyen-checkout-text-body;
}

&__description {
color: token(toggle-description-color);
padding-top: token(toggle-description-padding);

@include mixins.adyen-checkout-text-body;
}
}
32 changes: 32 additions & 0 deletions packages/lib/src/components/internal/Toggle/Toggle.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { h } from 'preact';
import { render, screen } from '@testing-library/preact';
import userEvent from '@testing-library/user-event';
import Toggle from './Toggle';

test('should emit correct values', async () => {
const user = userEvent.setup();
const onChangeMock = jest.fn();

render(<Toggle checked={false} onChange={onChangeMock} />);

await user.click(screen.getByRole('switch'));
expect(onChangeMock.mock.calls[0][0]).toBe(true);

await user.click(screen.getByRole('switch'));
expect(onChangeMock.mock.calls[1][0]).toBe(false);
});

test('should render as readonly', () => {
render(<Toggle checked={false} readonly />);
expect(screen.getByRole('switch').getAttribute('aria-readonly')).toBe('true');
});

test('should render as disabled', () => {
render(<Toggle checked={false} disabled />);
expect(screen.getByRole('switch')).toBeDisabled();
});

test('should render description', () => {
render(<Toggle checked={false} label="Save details" description="Save all details" />);
expect(screen.getByText('Save all details')).toBeTruthy();
});
78 changes: 78 additions & 0 deletions packages/lib/src/components/internal/Toggle/Toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { h } from 'preact';
import { useCallback, useMemo } from 'preact/hooks';
import cx from 'classnames';
import uuid from '../../../utils/uuid';
import './Toggle.scss';

interface ToggleProps {
label?: string;
ribeiroguilherme marked this conversation as resolved.
Show resolved Hide resolved
labelPosition?: 'before' | 'after';
ariaLabel?: string;
description?: string;
checked: boolean;
disabled?: boolean;
readonly?: boolean;
onChange?(checked: boolean): void;
}

const Toggle = ({ label, labelPosition = 'after', ariaLabel, description, checked, disabled = false, readonly = false, onChange }: ToggleProps) => {
const descriptionId = useMemo(() => (description ? `toggle-description-${uuid()}` : null), [description]);
const computedAriaLabel = useMemo(() => ariaLabel ?? label, [ariaLabel, label]);

const conditionalClasses = cx({
'adyen-checkout-toggle--label-first': labelPosition === 'before',
'adyen-checkout-toggle--disabled': disabled,
'adyen-checkout-toggle--readonly': readonly
});

const onInputChange = useCallback(
(event: Event) => {
onChange((event.target as HTMLInputElement).checked);
},
[onChange]
);

return (
<label className={`adyen-checkout-toggle ${conditionalClasses}`}>
<input
disabled={disabled}
checked={checked}
onChange={onInputChange}
aria-label={computedAriaLabel}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need aria-label here. The value from the label already comes from the wrapping label.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I followed the Bento implementation, and they do support having it without a label - that is why we have this property and that the 'label' property is not mandatory.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the use case of having a toggle without any label?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be honest I am not sure - The bento definition for Toggle says that 'toggle only' is one of the possible ways of using it, although I don't see any use-case (at least for us) right now.

I added that anyway since I wanted to make the component comply with the Bento one.
But if you think that we don't need this, then I can remove this feature

aria-readonly={readonly}
aria-describedby={descriptionId}
role="switch"
type="checkbox"
className="adyen-checkout-toggle__input"
/>

<span aria-hidden={true} className="adyen-checkout-toggle__track">
<span className="adyen-checkout-toggle__handle">
{checked && (
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">
ribeiroguilherme marked this conversation as resolved.
Show resolved Hide resolved
<path
fill="#00112C"
d="M12.0608 6.00011L11.0001 4.93945L7.00011 8.93945L5.00011 6.93945L3.93945 8.00011L7.00011 11.0608L12.0608 6.00011Z"
></path>
</svg>
)}
</span>
</span>

{label && (
<span className="adyen-checkout-toggle__label-container">
<span className="adyen-checkout-toggle__label-text" data-testid="inner-label">
{label}
</span>
{description && (
<span data-testid="description" className="adyen-checkout-toggle__description" id={descriptionId}>
{description}
</span>
)}
</span>
)}
</label>
);
};

export default Toggle;
1 change: 1 addition & 0 deletions packages/lib/src/components/internal/Toggle/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './Toggle';
8 changes: 7 additions & 1 deletion packages/lib/src/styles/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,12 @@ $adyen-checkout-media-query-l-min: 1024px;
line-height: token(text-title-line-height);
}

@mixin adyen-checkout-text-body {
font-size: token(text-body-font-size);
font-weight: token(text-body-font-weight);
line-height: token(text-body-line-height);
}

@mixin adyen-checkout-text-caption {
font-size: token(text-caption-font-size);
font-weight: token(text-caption-font-weight);
Expand Down Expand Up @@ -133,4 +139,4 @@ $adyen-checkout-media-query-l-min: 1024px;
margin: -1px;
padding: 0;
position: absolute;
}
}
5 changes: 3 additions & 2 deletions packages/lib/src/styles/variable-generator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import '~@adyen/bento-design-tokens/dist/scss-map/bento/aliases';
@import '~@adyen/bento-design-tokens/dist/scss-map/bento/definitions';
@import '~@adyen/bento-design-tokens/dist/scss-map/bento/components';

@function adyen-sdk-generate-css-variables($maps...) {
$adyen-output-map: ();
Expand All @@ -18,9 +19,9 @@
$adyen-tokens-map: ();

@if $generate-css-var {
$adyen-tokens-map: adyen-sdk-generate-css-variables($color, $text, $focus-ring, $border, $spacer, $shadow);
$adyen-tokens-map: adyen-sdk-generate-css-variables($color, $text, $focus-ring, $border, $spacer, $shadow, $toggle);
} @else {
$adyen-tokens-map: map-merge($color, $text, $focus-ring, $border, $spacer, $shadow)
$adyen-tokens-map: map-merge($color, $text, $focus-ring, $border, $spacer, $shadow, $toggle)
}

@return map-get($adyen-tokens-map, '#{$token}');
Expand Down
65 changes: 65 additions & 0 deletions packages/lib/storybook/stories/internals/Toggle.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Meta, StoryObj } from '@storybook/preact';
import Toggle from '../../../src/components/internal/Toggle';
import { useState } from 'preact/hooks';

const meta: Meta = {
title: 'Internals/Toggle',
component: Toggle
};

export const Default: StoryObj = {
render: () => {
const [checked, setChecked] = useState<boolean>(false);
return <Toggle checked={checked} onChange={setChecked} label={'Save your profile'} />;
},
parameters: {
controls: { exclude: ['useSessions', 'countryCode', 'shopperLocale', 'amount', 'showPayButton'] }
}
};

export const Disabled: StoryObj = {
render: () => {
return <Toggle checked={false} disabled label={'Save your profile'} />;
},
parameters: {
controls: { exclude: ['useSessions', 'countryCode', 'shopperLocale', 'amount', 'showPayButton'] }
}
};

export const Readonly: StoryObj = {
render: () => {
return <Toggle checked={false} readonly label={'Save your profile'} />;
},
parameters: {
controls: { exclude: ['useSessions', 'countryCode', 'shopperLocale', 'amount', 'showPayButton'] }
}
};

export const ToggleOnly: StoryObj = {
render: () => {
const [checked, setChecked] = useState<boolean>(true);
return <Toggle checked={checked} onChange={setChecked} />;
},
parameters: {
controls: { exclude: ['useSessions', 'countryCode', 'shopperLocale', 'amount', 'showPayButton'] }
}
};

export const WithDescription: StoryObj = {
render: () => {
const [checked, setChecked] = useState<boolean>(true);
return (
<Toggle
checked={checked}
onChange={setChecked}
label={'Save your profile'}
description={'Save your profile for faster checkouts next time you buy our products'}
/>
);
},
parameters: {
controls: { exclude: ['useSessions', 'countryCode', 'shopperLocale', 'amount', 'showPayButton'] }
}
};

export default meta;
Loading