From e1cc2de22fc703d94e1151beb9526d8cbe0e49c1 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 24 May 2022 16:05:03 +0200 Subject: chore(toolbar): change icons to close button when activated --- src/components/atoms/forms/label.stories.tsx | 13 +++ src/components/atoms/forms/label.tsx | 4 + .../molecules/forms/flipping-label.module.scss | 63 ++++++++++++++ .../molecules/forms/flipping-label.stories.tsx | 96 ++++++++++++++++++++++ .../molecules/forms/flipping-label.test.tsx | 14 ++++ src/components/molecules/forms/flipping-label.tsx | 40 +++++++++ .../organisms/toolbar/main-nav.module.scss | 8 ++ src/components/organisms/toolbar/search.tsx | 9 +- src/components/organisms/toolbar/settings.tsx | 9 +- .../organisms/toolbar/toolbar-items.module.scss | 18 ++-- 10 files changed, 254 insertions(+), 20 deletions(-) create mode 100644 src/components/molecules/forms/flipping-label.module.scss create mode 100644 src/components/molecules/forms/flipping-label.stories.tsx create mode 100644 src/components/molecules/forms/flipping-label.test.tsx create mode 100644 src/components/molecules/forms/flipping-label.tsx (limited to 'src/components') diff --git a/src/components/atoms/forms/label.stories.tsx b/src/components/atoms/forms/label.stories.tsx index 79f1a34..f66aa13 100644 --- a/src/components/atoms/forms/label.stories.tsx +++ b/src/components/atoms/forms/label.stories.tsx @@ -12,6 +12,19 @@ export default { size: 'small', }, argTypes: { + 'aria-label': { + control: { + type: 'text', + }, + description: 'Define an accessible name.', + table: { + category: 'Accessibility', + }, + type: { + name: 'string', + required: false, + }, + }, className: { control: { type: 'text', diff --git a/src/components/atoms/forms/label.tsx b/src/components/atoms/forms/label.tsx index ce4c70f..2ec614f 100644 --- a/src/components/atoms/forms/label.tsx +++ b/src/components/atoms/forms/label.tsx @@ -2,6 +2,10 @@ import { FC, ReactNode } from 'react'; import styles from './label.module.scss'; export type LabelProps = { + /** + * An accessible name for the label. + */ + 'aria-label'?: string; /** * The label body. */ 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; + +const Template: ComponentStory = ({ + isActive, + ...args +}) => { + const [active, setActive] = useState(isActive); + + return ( +
setActive(!active)}> + +
+ ); +}; + +export const Active = Template.bind({}); +Active.args = { + children: , + isActive: true, +}; + +export const Inactive = Template.bind({}); +Inactive.args = { + children: , + 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( + + <>Test + + ); + 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 = ({ + children, + className = '', + isActive, + ...props +}) => { + const wrapperModifier = isActive ? 'wrapper--active' : 'wrapper--inactive'; + + return ( + + ); +}; + +export default FlippingLabel; diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss index 76af935..24abc43 100644 --- a/src/components/organisms/toolbar/main-nav.module.scss +++ b/src/components/organisms/toolbar/main-nav.module.scss @@ -86,3 +86,11 @@ } } } + +.label { + display: flex; + place-content: center; + place-items: center; + width: var(--btn-size, #{fun.convert-px(60)}); + height: var(--btn-size, #{fun.convert-px(60)}); +} diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx index 5695348..dc71c49 100644 --- a/src/components/organisms/toolbar/search.tsx +++ b/src/components/organisms/toolbar/search.tsx @@ -1,6 +1,6 @@ import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; -import Label from '@components/atoms/forms/label'; import MagnifyingGlass from '@components/atoms/icons/magnifying-glass'; +import FlippingLabel from '@components/molecules/forms/flipping-label'; import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; import SearchModal, { type SearchModalProps } from '../modals/search-modal'; @@ -52,13 +52,14 @@ const Search: ForwardRefRenderFunction = ( setValue={setIsActive} className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`} /> - + = ( setValue={setIsActive} className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`} /> - +