diff options
Diffstat (limited to 'src/components/organisms')
| -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>    );  }; | 
