summaryrefslogtreecommitdiffstats
path: root/src/components/organisms/layout
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms/layout')
-rw-r--r--src/components/organisms/layout/footer.stories.tsx21
-rw-r--r--src/components/organisms/layout/footer.tsx21
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>
);
};