diff options
Diffstat (limited to 'src/components/molecules/forms')
4 files changed, 213 insertions, 0 deletions
diff --git a/src/components/molecules/forms/flipping-label.module.scss b/src/components/molecules/forms/flipping-label.module.scss new file mode 100644 index 0000000..e650ebe --- /dev/null +++ b/src/components/molecules/forms/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.stories.tsx b/src/components/molecules/forms/flipping-label.stories.tsx new file mode 100644 index 0000000..b8d17ec --- /dev/null +++ b/src/components/molecules/forms/flipping-label.stories.tsx @@ -0,0 +1,96 @@ +import MagnifyingGlass from '@components/atoms/icons/magnifying-glass'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useState } from 'react'; +import FlippingLabel from './flipping-label'; + +export default { + title: 'Organisms/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.test.tsx b/src/components/molecules/forms/flipping-label.test.tsx new file mode 100644 index 0000000..9a7aa22 --- /dev/null +++ b/src/components/molecules/forms/flipping-label.test.tsx @@ -0,0 +1,14 @@ +import { render, screen } from '@test-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.tsx b/src/components/molecules/forms/flipping-label.tsx new file mode 100644 index 0000000..c874369 --- /dev/null +++ b/src/components/molecules/forms/flipping-label.tsx @@ -0,0 +1,40 @@ +import Label, { LabelProps } from '@components/atoms/forms/label'; +import Close from '@components/atoms/icons/close'; +import { FC } from 'react'; +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; +}; + +const FlippingLabel: FC<FlippingLabelProps> = ({ + children, + className = '', + isActive, + ...props +}) => { + const wrapperModifier = isActive ? 'wrapper--active' : 'wrapper--inactive'; + + return ( + <Label className={`${styles.label} ${className}`} {...props}> + <span className={`${styles.wrapper} ${styles[wrapperModifier]}`}> + <span className={styles.front}>{children}</span> + <span className={styles.back}> + <Close /> + </span> + </span> + </Label> + ); +}; + +export default FlippingLabel; |