From e97325a2c174a87c29593d1b42b9a1cc1eaf11af Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 4 Oct 2023 15:06:29 +0200 Subject: refactor(components): rewrite HelpButton component --- .../molecules/buttons/help-button.module.scss | 20 --------- .../molecules/buttons/help-button.stories.tsx | 47 -------------------- .../molecules/buttons/help-button.test.tsx | 10 ----- src/components/molecules/buttons/help-button.tsx | 40 ----------------- .../buttons/help-button/help-button.module.scss | 24 +++++++++++ .../buttons/help-button/help-button.stories.tsx | 50 ++++++++++++++++++++++ .../buttons/help-button/help-button.test.tsx | 13 ++++++ .../molecules/buttons/help-button/help-button.tsx | 42 ++++++++++++++++++ .../molecules/buttons/help-button/index.ts | 1 + .../molecules/tooltip/tooltip.module.scss | 20 +++------ src/components/molecules/tooltip/tooltip.tsx | 20 ++++++--- 11 files changed, 150 insertions(+), 137 deletions(-) delete mode 100644 src/components/molecules/buttons/help-button.module.scss delete mode 100644 src/components/molecules/buttons/help-button.stories.tsx delete mode 100644 src/components/molecules/buttons/help-button.test.tsx delete mode 100644 src/components/molecules/buttons/help-button.tsx create mode 100644 src/components/molecules/buttons/help-button/help-button.module.scss create mode 100644 src/components/molecules/buttons/help-button/help-button.stories.tsx create mode 100644 src/components/molecules/buttons/help-button/help-button.test.tsx create mode 100644 src/components/molecules/buttons/help-button/help-button.tsx create mode 100644 src/components/molecules/buttons/help-button/index.ts (limited to 'src/components') diff --git a/src/components/molecules/buttons/help-button.module.scss b/src/components/molecules/buttons/help-button.module.scss deleted file mode 100644 index fb28b57..0000000 --- a/src/components/molecules/buttons/help-button.module.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use "../../../styles/abstracts/mixins" as mix; - -.btn { - padding: var(--spacing-xs); - - &:not(:disabled) { - &:focus { - text-decoration: none; - } - } - - @include mix.pointer("fine") { - padding: var(--spacing-2xs); - } -} - -.icon { - color: var(--color-primary-dark); - font-weight: 600; -} diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx deleted file mode 100644 index 176888c..0000000 --- a/src/components/molecules/buttons/help-button.stories.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { HelpButton as HelpButtonComponent } from './help-button'; - -/** - * HelpButton - Storybook Meta - */ -export default { - title: 'Molecules/Buttons', - component: HelpButtonComponent, - argTypes: { - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames to the button wrapper.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - onClick: { - control: { - type: null, - }, - description: 'A callback function to handle click on button.', - table: { - category: 'Events', - }, - type: { - name: 'function', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Help Button Stories - Level 1 - */ -export const HelpButton = Template.bind({}); diff --git a/src/components/molecules/buttons/help-button.test.tsx b/src/components/molecules/buttons/help-button.test.tsx deleted file mode 100644 index 85daf30..0000000 --- a/src/components/molecules/buttons/help-button.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { HelpButton } from './help-button'; - -describe('Help', () => { - it('renders a help button', () => { - render(); - expect(screen.getByRole('button', { name: 'Help ?' })).toBeInTheDocument(); - }); -}); diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx deleted file mode 100644 index 7a01b14..0000000 --- a/src/components/molecules/buttons/help-button.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { forwardRef, type ForwardRefRenderFunction } from 'react'; -import { useIntl } from 'react-intl'; -import { Button, type ButtonProps } from '../../atoms'; -import styles from './help-button.module.scss'; - -export type HelpButtonProps = Pick< - ButtonProps, - 'className' | 'isPressed' | 'onClick' ->; - -const HelpButtonWithRef: ForwardRefRenderFunction< - HTMLButtonElement, - HelpButtonProps -> = ({ className = '', ...props }, ref) => { - const intl = useIntl(); - const text = intl.formatMessage({ - defaultMessage: 'Help', - id: 'i+/ckF', - description: 'HelpButton: screen reader text', - }); - - return ( - - ); -}; - -/** - * HelpButton component - * - * Render a button with an interrogation mark icon. - */ -export const HelpButton = forwardRef(HelpButtonWithRef); diff --git a/src/components/molecules/buttons/help-button/help-button.module.scss b/src/components/molecules/buttons/help-button/help-button.module.scss new file mode 100644 index 0000000..2dbba69 --- /dev/null +++ b/src/components/molecules/buttons/help-button/help-button.module.scss @@ -0,0 +1,24 @@ +@use "../../../../styles/abstracts/functions" as fun; +@use "../../../../styles/abstracts/mixins" as mix; + +.btn { + padding: fun.convert-px(7); + + @include mix.pointer("fine") { + padding: fun.convert-px(4); + } + + &[aria-pressed="true"] { + background: var(--color-primary-dark); + border-color: var(--color-primary-dark); + box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow); + + .icon { + :global { + path { + fill: var(--color-fg-inverted); + } + } + } + } +} diff --git a/src/components/molecules/buttons/help-button/help-button.stories.tsx b/src/components/molecules/buttons/help-button/help-button.stories.tsx new file mode 100644 index 0000000..556dd74 --- /dev/null +++ b/src/components/molecules/buttons/help-button/help-button.stories.tsx @@ -0,0 +1,50 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { HelpButton as HelpButtonComponent } from './help-button'; + +/** + * HelpButton - Storybook Meta + */ +export default { + title: 'Molecules/Buttons', + component: HelpButtonComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the button wrapper.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + onClick: { + control: { + type: null, + }, + description: 'A callback function to handle click on button.', + table: { + category: 'Events', + }, + type: { + name: 'function', + required: false, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +/** + * Help Button Stories - Level 1 + */ +export const HelpButton = Template.bind({}); +HelpButton.args = { + label: 'Help', +}; diff --git a/src/components/molecules/buttons/help-button/help-button.test.tsx b/src/components/molecules/buttons/help-button/help-button.test.tsx new file mode 100644 index 0000000..f36fba7 --- /dev/null +++ b/src/components/molecules/buttons/help-button/help-button.test.tsx @@ -0,0 +1,13 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { HelpButton } from './help-button'; + +describe('Help', () => { + it('renders a help button', () => { + const label = 'hic'; + + render(); + + expect(rtlScreen.getByRole('button')).toHaveAccessibleName(label); + }); +}); diff --git a/src/components/molecules/buttons/help-button/help-button.tsx b/src/components/molecules/buttons/help-button/help-button.tsx new file mode 100644 index 0000000..1951b4d --- /dev/null +++ b/src/components/molecules/buttons/help-button/help-button.tsx @@ -0,0 +1,42 @@ +import { forwardRef, type ForwardRefRenderFunction } from 'react'; +import { Button, VisuallyHidden, type ButtonProps, Icon } from '../../../atoms'; +import styles from './help-button.module.scss'; + +export type HelpButtonProps = Omit< + ButtonProps, + 'aria-label' | 'children' | 'kind' | 'shape' +> & { + /** + * Define an accessible name for the button. + */ + label: string; +}; + +const HelpButtonWithRef: ForwardRefRenderFunction< + HTMLButtonElement, + HelpButtonProps +> = ({ className = '', isPressed = false, label, ...props }, ref) => { + const btnClass = `${styles.btn} ${className}`; + + return ( + + ); +}; + +/** + * HelpButton component + * + * Render a button with an interrogation mark icon. + */ +export const HelpButton = forwardRef(HelpButtonWithRef); diff --git a/src/components/molecules/buttons/help-button/index.ts b/src/components/molecules/buttons/help-button/index.ts new file mode 100644 index 0000000..952119e --- /dev/null +++ b/src/components/molecules/buttons/help-button/index.ts @@ -0,0 +1 @@ +export * from './help-button'; diff --git a/src/components/molecules/tooltip/tooltip.module.scss b/src/components/molecules/tooltip/tooltip.module.scss index 029767f..557d9c7 100644 --- a/src/components/molecules/tooltip/tooltip.module.scss +++ b/src/components/molecules/tooltip/tooltip.module.scss @@ -38,14 +38,6 @@ opacity: 1; visibility: visible; transform: scale(1); - - & ~ .btn { - background: var(--color-primary); - - * { - color: var(--color-fg-inverted); - } - } } } @@ -60,13 +52,15 @@ .icon { align-self: stretch; - display: flex; - align-items: center; margin-right: var(--spacing-xs); - padding: 0 var(--spacing-2xs); background: var(--color-primary-dark); border: fun.convert-px(1) solid var(--color-primary-dark); box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow); - color: var(--color-fg-inverted); - font-weight: 600; + + :global { + path { + fill: var(--color-fg-inverted); + margin-inline: var(--spacing-2xs); + } + } } diff --git a/src/components/molecules/tooltip/tooltip.tsx b/src/components/molecules/tooltip/tooltip.tsx index 43ceced..1f54d68 100644 --- a/src/components/molecules/tooltip/tooltip.tsx +++ b/src/components/molecules/tooltip/tooltip.tsx @@ -1,8 +1,9 @@ -import { FC, MouseEventHandler, useRef } from 'react'; -import { Heading, Modal, ModalProps } from '../../atoms'; +import { type FC, type MouseEventHandler, useRef } from 'react'; +import { useIntl } from 'react-intl'; +import { useOnClickOutside } from '../../../utils/hooks'; +import { Heading, Icon, Modal, type ModalProps } from '../../atoms'; import { HelpButton } from '../buttons'; import styles from './tooltip.module.scss'; -import { useOnClickOutside } from '../../../utils/hooks'; export type TooltipProps = Omit & { /** @@ -47,6 +48,12 @@ export const Tooltip: FC = ({ onToggle, ...props }) => { + const intl = useIntl(); + const helpLabel = intl.formatMessage({ + defaultMessage: 'Show help', + description: 'Tooltip: show help label', + id: '1Xgg7+', + }); const directionModifier = direction === 'upwards' ? 'tooltip--up' : 'tooltip--down'; const visibilityModifier = isOpen ? 'tooltip--visible' : 'tooltip--hidden'; @@ -70,9 +77,7 @@ export const Tooltip: FC = ({ className={tooltipClass} heading={ - - ? - + {heading} } @@ -82,8 +87,9 @@ export const Tooltip: FC = ({ {children} -- cgit v1.2.3