diff options
Diffstat (limited to 'src/components/organisms/layout')
| -rw-r--r-- | src/components/organisms/layout/footer.stories.tsx | 21 | ||||
| -rw-r--r-- | src/components/organisms/layout/footer.tsx | 21 |
2 files changed, 31 insertions, 11 deletions
diff --git a/src/components/organisms/layout/footer.stories.tsx b/src/components/organisms/layout/footer.stories.tsx index 06819da..bd5a744 100644 --- a/src/components/organisms/layout/footer.stories.tsx +++ b/src/components/organisms/layout/footer.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import FooterComponent from './footer'; /** @@ -9,6 +8,19 @@ export default { title: 'Organisms/Layout', component: FooterComponent, argTypes: { + backToTopClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the back to top button.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, className: { control: { type: 'text', @@ -53,13 +65,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof FooterComponent>; const Template: ComponentStory<typeof FooterComponent> = (args) => ( diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx index 1426e96..c60afec 100644 --- a/src/components/organisms/layout/footer.tsx +++ b/src/components/organisms/layout/footer.tsx @@ -1,7 +1,9 @@ import Copyright, { type CopyrightProps, } from '@components/atoms/layout/copyright'; -import BackToTop from '@components/molecules/buttons/back-to-top'; +import BackToTop, { + type BackToTopProps, +} from '@components/molecules/buttons/back-to-top'; import Nav, { type NavItem } from '@components/molecules/nav/nav'; import { FC } from 'react'; import { useIntl } from 'react-intl'; @@ -9,6 +11,10 @@ import styles from './footer.module.scss'; export type FooterProps = { /** + * Set additional classnames to the back to top button. + */ + backToTopClassName?: BackToTopProps['className']; + /** * Set additional classnames to the footer element. */ className?: string; @@ -31,7 +37,13 @@ export type FooterProps = { * * Renders a footer with copyright and nav; */ -const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => { +const Footer: FC<FooterProps> = ({ + backToTopClassName, + className = '', + copyright, + navItems, + topId, +}) => { const intl = useIntl(); const ariaLabel = intl.formatMessage({ defaultMessage: 'Footer', @@ -54,7 +66,10 @@ const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => { className={styles.nav} /> )} - <BackToTop target={topId} className={styles['back-to-top']} /> + <BackToTop + target={topId} + className={`${styles['back-to-top']} ${backToTopClassName}`} + /> </footer> ); }; |
