diff options
Diffstat (limited to 'src/components/molecules/buttons')
4 files changed, 18 insertions, 15 deletions
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx index f1a36e5..fe58293 100644 --- a/src/components/molecules/buttons/back-to-top.stories.tsx +++ b/src/components/molecules/buttons/back-to-top.stories.tsx @@ -6,11 +6,14 @@ export default { title: 'Molecules/Buttons', component: BackToTopComponent, argTypes: { - additionalClasses: { + className: { control: { type: 'text', }, - description: 'Add additional classes to the button wrapper.', + description: 'Set additional classnames to the button wrapper.', + table: { + category: 'Styles', + }, type: { name: 'string', required: false, diff --git a/src/components/molecules/buttons/back-to-top.tsx b/src/components/molecules/buttons/back-to-top.tsx index f25d3e9..56c5247 100644 --- a/src/components/molecules/buttons/back-to-top.tsx +++ b/src/components/molecules/buttons/back-to-top.tsx @@ -1,14 +1,14 @@ import ButtonLink from '@components/atoms/buttons/button-link'; import Arrow from '@components/atoms/icons/arrow'; -import { FC } from 'react'; +import { VFC } from 'react'; import { useIntl } from 'react-intl'; import styles from './back-to-top.module.scss'; -type BackToTopProps = { +export type BackToTopProps = { /** - * Add additional classes to the button wrapper. + * Set additional classnames to the button wrapper. */ - additionalClasses?: string; + className?: string; /** * An element id (without hashtag) to use as anchor. */ @@ -20,7 +20,7 @@ type BackToTopProps = { * * Render a back to top link. */ -const BackToTop: FC<BackToTopProps> = ({ additionalClasses, target }) => { +const BackToTop: VFC<BackToTopProps> = ({ className = '', target }) => { const intl = useIntl(); const linkName = intl.formatMessage({ defaultMessage: 'Back to top', @@ -29,7 +29,7 @@ const BackToTop: FC<BackToTopProps> = ({ additionalClasses, target }) => { }); return ( - <div className={`${styles.wrapper} ${additionalClasses}`}> + <div className={`${styles.wrapper} ${className}`}> <ButtonLink shape="square" target={`#${target}`} aria-label={linkName}> <Arrow direction="top" /> </ButtonLink> diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx index 7ed953e..cfc1b0b 100644 --- a/src/components/molecules/buttons/help-button.stories.tsx +++ b/src/components/molecules/buttons/help-button.stories.tsx @@ -6,11 +6,11 @@ export default { title: 'Molecules/Buttons', component: HelpButtonComponent, argTypes: { - classes: { + className: { control: { type: 'text', }, - description: 'Set additional classes to the button.', + description: 'Set additional classnames to the button wrapper.', table: { category: 'Options', }, diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx index d933829..aeb84ec 100644 --- a/src/components/molecules/buttons/help-button.tsx +++ b/src/components/molecules/buttons/help-button.tsx @@ -1,13 +1,13 @@ import Button, { ButtonProps } from '@components/atoms/buttons/button'; -import { FC } from 'react'; +import { VFC } from 'react'; import { useIntl } from 'react-intl'; import styles from './help-button.module.scss'; export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & { /** - * Set additional classes to the button. + * Set additional classnames to the button wrapper. */ - classes?: string; + className?: string; }; /** @@ -15,7 +15,7 @@ export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & { * * Render a button with an interrogation mark icon. */ -const HelpButton: FC<HelpButtonProps> = ({ classes = '', onClick }) => { +const HelpButton: VFC<HelpButtonProps> = ({ className = '', onClick }) => { const intl = useIntl(); const text = intl.formatMessage({ defaultMessage: 'Help', @@ -26,7 +26,7 @@ const HelpButton: FC<HelpButtonProps> = ({ classes = '', onClick }) => { return ( <Button shape="circle" - additionalClasses={`${styles.btn} ${classes}`} + className={`${styles.btn} ${className}`} onClick={onClick} > <span className="screen-reader-text">{text}</span> |