From be61ffb6fe500cdbfa83b9cd131b8e72779f23c2 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 4 Oct 2023 18:17:35 +0200 Subject: refactor(components): rewrite BackToTop component * replace `link` prop with `anchor` prop * add a `label` prop to let consumer handle the accessible name --- .../buttons/back-to-top/back-to-top.stories.tsx | 58 ++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx (limited to 'src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx') diff --git a/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx new file mode 100644 index 0000000..3abb59d --- /dev/null +++ b/src/components/molecules/buttons/back-to-top/back-to-top.stories.tsx @@ -0,0 +1,58 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { BackToTop as BackToTopComponent } from './back-to-top'; + +/** + * BackToTop - Storybook Meta + */ +export default { + title: 'Molecules/Buttons', + component: BackToTopComponent, + argTypes: { + anchor: { + control: { + type: 'text', + }, + description: 'An element id with leading hashtag to use as anchor.', + type: { + name: 'string', + required: true, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the button wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + label: { + control: { + type: 'text', + }, + description: 'An accessible name for the button.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +/** + * Buttons Stories - Back to top + */ +export const BackToTop = Template.bind({}); +BackToTop.args = { + anchor: '#top', + label: 'Back to top', +}; -- cgit v1.2.3