diff options
Diffstat (limited to 'src/components/molecules/forms/flipping-label')
5 files changed, 211 insertions, 0 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 new file mode 100644 index 0000000..88ef3ec --- /dev/null +++ b/src/components/molecules/forms/flipping-label/flipping-label.module.scss @@ -0,0 +1,63 @@ +@use "../../../../styles/abstracts/functions" as fun; + +.label { + display: block; + width: var(--btn-size, #{fun.convert-px(60)}); + height: var(--btn-size, #{fun.convert-px(60)}); +} + +.front, +.back { + display: flex; + place-content: center; + width: 100%; + height: 100%; + position: absolute; + top: 0; + right: 0; + backface-visibility: hidden; + transition: all 0.6s ease-in 0s; +} + +.front { + z-index: 20; +} + +.back { + z-index: 10; +} + +.wrapper { + --icon-size: 60%; + + display: flex; + place-content: center; + place-items: center; + width: 100%; + height: 100%; + position: relative; + transition: all 0.5s ease-in-out 0s; + transform-style: preserve-3d; + + &--active { + transform: rotateY(180deg); + + .front { + transform: scale(0.2); + } + + .back { + transform: scale(1) rotateY(180deg); + } + } + + &--inactive { + .front { + transform: scale(1); + } + + .back { + transform: scale(0.2) rotateY(180deg); + } + } +} diff --git a/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx new file mode 100644 index 0000000..3ad3529 --- /dev/null +++ b/src/components/molecules/forms/flipping-label/flipping-label.stories.tsx @@ -0,0 +1,96 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import { MagnifyingGlass } 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, setActive] = useState<boolean>(isActive); + + return ( + <div onClick={() => setActive(!active)}> + <FlippingLabel isActive={active} {...args} /> + </div> + ); +}; + +export const Active = Template.bind({}); +Active.args = { + children: <MagnifyingGlass />, + isActive: true, +}; + +export const Inactive = Template.bind({}); +Inactive.args = { + children: <MagnifyingGlass />, + isActive: false, +}; diff --git a/src/components/molecules/forms/flipping-label/flipping-label.test.tsx b/src/components/molecules/forms/flipping-label/flipping-label.test.tsx new file mode 100644 index 0000000..7813855 --- /dev/null +++ b/src/components/molecules/forms/flipping-label/flipping-label.test.tsx @@ -0,0 +1,14 @@ +import { render, screen } from '../../../../../tests/utils'; +import { FlippingLabel } from './flipping-label'; + +describe('FlippingLabel', () => { + it('renders a label', () => { + const ariaLabel = 'vero quo inventore'; + render( + <FlippingLabel aria-label={ariaLabel} isActive={false}> + <>Test</> + </FlippingLabel> + ); + expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/forms/flipping-label/flipping-label.tsx b/src/components/molecules/forms/flipping-label/flipping-label.tsx new file mode 100644 index 0000000..3e23915 --- /dev/null +++ b/src/components/molecules/forms/flipping-label/flipping-label.tsx @@ -0,0 +1,37 @@ +import { FC } from 'react'; +import { Close, Label, type LabelProps } from '../../../atoms'; +import styles from './flipping-label.module.scss'; + +export type FlippingLabelProps = Pick< + LabelProps, + 'aria-label' | 'className' | 'htmlFor' +> & { + /** + * The front icon. + */ + children: JSX.Element; + /** + * Which side of the label should be displayed? True for the close icon. + */ + isActive: boolean; +}; + +export const FlippingLabel: FC<FlippingLabelProps> = ({ + children, + className = '', + isActive, + ...props +}) => { + const wrapperModifier = isActive ? 'wrapper--active' : 'wrapper--inactive'; + + return ( + <Label {...props} className={`${styles.label} ${className}`}> + <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}> + <span className={styles.front}>{children}</span> + <span className={styles.back}> + <Close aria-hidden={true} /> + </span> + </span> + </Label> + ); +}; diff --git a/src/components/molecules/forms/flipping-label/index.ts b/src/components/molecules/forms/flipping-label/index.ts new file mode 100644 index 0000000..7b50c75 --- /dev/null +++ b/src/components/molecules/forms/flipping-label/index.ts @@ -0,0 +1 @@ +export * from './flipping-label'; |