diff options
Diffstat (limited to 'src/components/molecules/buttons')
10 files changed, 22 insertions, 27 deletions
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx index a338b8b..5de12d4 100644 --- a/src/components/molecules/buttons/back-to-top.stories.tsx +++ b/src/components/molecules/buttons/back-to-top.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import BackToTopComponent from './back-to-top'; +import { BackToTop as BackToTopComponent } from './back-to-top'; /** * BackToTop - Storybook Meta diff --git a/src/components/molecules/buttons/back-to-top.test.tsx b/src/components/molecules/buttons/back-to-top.test.tsx index c03ccb2..b39a377 100644 --- a/src/components/molecules/buttons/back-to-top.test.tsx +++ b/src/components/molecules/buttons/back-to-top.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import BackToTop from './back-to-top'; +import { BackToTop } from './back-to-top'; describe('BackToTop', () => { it('renders a BackToTop link', () => { diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx index f422444..d28d6c1 100644 --- a/src/components/molecules/buttons/back-to-top.tsx +++ b/src/components/molecules/buttons/back-to-top.tsx @@ -1,9 +1,6 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; -import ButtonLink, { - type ButtonLinkProps, -} from '../../atoms/buttons/button-link'; -import Arrow from '../../atoms/icons/arrow'; +import { Arrow, ButtonLink, type ButtonLinkProps } from '../../atoms'; import styles from './back-to-top.module.scss'; export type BackToTopProps = Pick<ButtonLinkProps, 'target'> & { @@ -18,7 +15,7 @@ export type BackToTopProps = Pick<ButtonLinkProps, 'target'> & { * * Render a back to top link. */ -const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => { +export const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => { const intl = useIntl(); const linkName = intl.formatMessage({ defaultMessage: 'Back to top', @@ -39,5 +36,3 @@ const BackToTop: FC<BackToTopProps> = ({ className = '', target }) => { </div> ); }; - -export default BackToTop; diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx index d1b5ed4..9beda2b 100644 --- a/src/components/molecules/buttons/heading-button.stories.tsx +++ b/src/components/molecules/buttons/heading-button.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import HeadingButtonComponent from './heading-button'; +import { HeadingButton as HeadingButtonComponent } from './heading-button'; /** * HeadingButton - Storybook Meta diff --git a/src/components/molecules/buttons/heading-button.test.tsx b/src/components/molecules/buttons/heading-button.test.tsx index 5dcc4cc..d64283a 100644 --- a/src/components/molecules/buttons/heading-button.test.tsx +++ b/src/components/molecules/buttons/heading-button.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import HeadingButton from './heading-button'; +import { HeadingButton } from './heading-button'; describe('HeadingButton', () => { it('renders a button to collapse.', () => { diff --git a/src/components/molecules/buttons/heading-button.tsx b/src/components/molecules/buttons/heading-button.tsx index cefd179..93ccdbe 100644 --- a/src/components/molecules/buttons/heading-button.tsx +++ b/src/components/molecules/buttons/heading-button.tsx @@ -1,7 +1,6 @@ import { FC, SetStateAction } from 'react'; import { useIntl } from 'react-intl'; -import Heading, { type HeadingProps } from '../../atoms/headings/heading'; -import PlusMinus from '../../atoms/icons/plus-minus'; +import { Heading, type HeadingProps, PlusMinus } from '../../atoms'; import styles from './heading-button.module.scss'; export type HeadingButtonProps = Pick<HeadingProps, 'level'> & { @@ -28,7 +27,7 @@ export type HeadingButtonProps = Pick<HeadingProps, 'level'> & { * * Render a button as accordion title to toggle body. */ -const HeadingButton: FC<HeadingButtonProps> = ({ +export const HeadingButton: FC<HeadingButtonProps> = ({ className = '', expanded, level, @@ -51,9 +50,9 @@ const HeadingButton: FC<HeadingButtonProps> = ({ return ( <button - type="button" className={`${styles.wrapper} ${className}`} onClick={() => setExpanded(!expanded)} + type="button" > <Heading level={level} withMargin={false} className={styles.heading}> <span className="screen-reader-text">{titlePrefix} </span> @@ -63,5 +62,3 @@ const HeadingButton: FC<HeadingButtonProps> = ({ </button> ); }; - -export default HeadingButton; diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx index 4968b27..176888c 100644 --- a/src/components/molecules/buttons/help-button.stories.tsx +++ b/src/components/molecules/buttons/help-button.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import HelpButtonComponent from './help-button'; +import { HelpButton as HelpButtonComponent } from './help-button'; /** * HelpButton - Storybook Meta diff --git a/src/components/molecules/buttons/help-button.test.tsx b/src/components/molecules/buttons/help-button.test.tsx index 67472f1..486ed4b 100644 --- a/src/components/molecules/buttons/help-button.test.tsx +++ b/src/components/molecules/buttons/help-button.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '../../../../tests/utils'; -import HelpButton from './help-button'; +import { HelpButton } from './help-button'; describe('Help', () => { it('renders a help button', () => { diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx index 6178317..1234835 100644 --- a/src/components/molecules/buttons/help-button.tsx +++ b/src/components/molecules/buttons/help-button.tsx @@ -1,6 +1,6 @@ import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; -import Button, { type ButtonProps } from '../../atoms/buttons/button'; +import { Button, type ButtonProps } from '../../atoms'; import styles from './help-button.module.scss'; export type HelpButtonProps = Pick< @@ -8,12 +8,7 @@ export type HelpButtonProps = Pick< 'aria-pressed' | 'className' | 'onClick' >; -/** - * HelpButton component - * - * Render a button with an interrogation mark icon. - */ -const HelpButton: ForwardRefRenderFunction< +const HelpButtonWithRef: ForwardRefRenderFunction< HTMLButtonElement, HelpButtonProps > = ({ className = '', ...props }, ref) => { @@ -37,4 +32,9 @@ const HelpButton: ForwardRefRenderFunction< ); }; -export default forwardRef(HelpButton); +/** + * HelpButton component + * + * Render a button with an interrogation mark icon. + */ +export const HelpButton = forwardRef(HelpButtonWithRef); diff --git a/src/components/molecules/buttons/index.ts b/src/components/molecules/buttons/index.ts new file mode 100644 index 0000000..e0a10c1 --- /dev/null +++ b/src/components/molecules/buttons/index.ts @@ -0,0 +1,3 @@ +export * from './back-to-top'; +export * from './heading-button'; +export * from './help-button'; |