diff options
Diffstat (limited to 'src/components/molecules/forms/flipping-label')
5 files changed, 0 insertions, 188 deletions
diff --git a/src/components/molecules/forms/flipping-label/flipping-label.module.scss b/src/components/molecules/forms/flipping-label/flipping-label.module.scss deleted file mode 100644 index 169bde3..0000000 --- a/src/components/molecules/forms/flipping-label/flipping-label.module.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use "../../../../styles/abstracts/functions" as fun; - -.wrapper { - --size: var(--btn-size, #{fun.convert-px(60)}); - --flipper-speed: 0.5s; - - width: var(--size); - height: var(--size); -} - -.wrapper, -.front, -.back { - display: flex; - place-content: center; - place-items: center; -} diff --git a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx deleted file mode 100644 index 906a488..0000000 --- a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useToggle } from '../../../../utils/hooks'; -import { Button, Icon } from '../../../atoms'; -import { FlippingLabel } from './flipping-label'; - -export default { - title: 'Molecules/Forms/FlippingLabel', - component: FlippingLabel, - argTypes: { - 'aria-label': { - control: { - type: 'text', - }, - description: 'An accessible name for the label.', - table: { - category: 'Accessibility', - }, - type: { - name: 'string', - required: false, - }, - }, - children: { - control: { - type: null, - }, - description: 'An icon for the label front face.', - type: { - name: 'function', - required: true, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the label.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - htmlFor: { - control: { - type: null, - }, - description: 'Bind the label to a field by id.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - isActive: { - control: { - type: 'boolean', - }, - description: - 'Which side of the label should be displayed? True for the close icon.', - type: { - name: 'boolean', - required: true, - }, - }, - }, -} as ComponentMeta<typeof FlippingLabel>; - -const Template: ComponentStory<typeof FlippingLabel> = ({ - isActive, - ...args -}) => { - const [active, toggle] = useToggle(isActive); - - return ( - <Button kind="neutral" onClick={toggle} shape="initial" type="button"> - <FlippingLabel {...args} isActive={active} /> - </Button> - ); -}; - -export const Active = Template.bind({}); -Active.args = { - icon: <Icon shape="magnifying-glass" />, - isActive: true, - label: 'Close the search', -}; - -export const Inactive = Template.bind({}); -Inactive.args = { - icon: <Icon shape="magnifying-glass" />, - isActive: false, - label: 'Open the search', -}; diff --git a/src/components/molecules/forms/flipping-label/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label/flipping-label.test.tsx deleted file mode 100644 index d59c5f3..0000000 --- a/src/components/molecules/forms/flipping-label/flipping-label.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen as rtlScreen } from '@testing-library/react'; -import { Icon } from '../../../atoms'; -import { FlippingLabel } from './flipping-label'; - -describe('FlippingLabel', () => { - it('renders a label', () => { - const label = 'vero quo inventore'; - render( - <FlippingLabel - icon={<Icon shape="arrow" />} - isActive={false} - label={label} - /> - ); - expect(rtlScreen.getByText(label)).toBeInTheDocument(); - }); -}); diff --git a/src/components/molecules/forms/flipping-label/flipping-label.tsx b/src/components/molecules/forms/flipping-label/flipping-label.tsx deleted file mode 100644 index 586301f..0000000 --- a/src/components/molecules/forms/flipping-label/flipping-label.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import type { FC, ReactNode } from 'react'; -import { - Icon, - Label, - VisuallyHidden, - type LabelProps, - Flip, - FlipSide, -} from '../../../atoms'; -import styles from './flipping-label.module.scss'; - -export type FlippingLabelProps = Omit< - LabelProps, - 'children' | 'isHidden' | 'isRequired' -> & { - /** - * The front icon. - */ - icon: ReactNode; - /** - * Which side of the label should be displayed? True for the close icon. - */ - isActive: boolean; - /** - * An accessible name for the label. - */ - label: string; -}; - -export const FlippingLabel: FC<FlippingLabelProps> = ({ - className = '', - icon, - isActive, - label, - ...props -}) => { - const wrapperClass = `${styles.wrapper} ${className}`; - - return ( - <Label {...props} className={wrapperClass}> - <VisuallyHidden>{label}</VisuallyHidden> - <Flip - aria-hidden - // eslint-disable-next-line react/jsx-no-literals -- Shape allowed - showBack={isActive} - > - <FlipSide className={styles.front}>{icon}</FlipSide> - <FlipSide className={styles.back} isBack> - <Icon aria-hidden shape="cross" /> - </FlipSide> - </Flip> - </Label> - ); -}; diff --git a/src/components/molecules/forms/flipping-label/index.ts b/src/components/molecules/forms/flipping-label/index.ts deleted file mode 100644 index 7b50c75..0000000 --- a/src/components/molecules/forms/flipping-label/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './flipping-label'; |