From a3a4c50f26b8750ae1c87f1f1103b84b7d2e6315 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 14 Nov 2023 15:11:22 +0100 Subject: refactor(components): replace LinksListWidget with LinksWidget * avoid List component repeat * rewrite tests and CSS * add an id to LinksWidgetItemData (previously LinksListItems) type because the label could be duplicated --- .../widgets/links-widget/links-widget.stories.tsx | 80 ++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 src/components/organisms/widgets/links-widget/links-widget.stories.tsx (limited to 'src/components/organisms/widgets/links-widget/links-widget.stories.tsx') diff --git a/src/components/organisms/widgets/links-widget/links-widget.stories.tsx b/src/components/organisms/widgets/links-widget/links-widget.stories.tsx new file mode 100644 index 0000000..3a0b027 --- /dev/null +++ b/src/components/organisms/widgets/links-widget/links-widget.stories.tsx @@ -0,0 +1,80 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Heading } from '../../../atoms'; +import { LinksWidget, type LinksWidgetItemData } from './links-widget'; + +/** + * LinksWidget - Storybook Meta + */ +export default { + title: 'Organisms/Widgets/Links', + component: LinksWidget, + args: { + isOrdered: false, + }, + argTypes: { + items: { + description: 'The links data.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +const items = [ + { id: 'item11', label: 'Level 1: Item 1', url: '#' }, + { + id: 'item12', + label: 'Level 1: Item 2', + url: '#', + child: [ + { id: 'item21', label: 'Level 2: Item 1', url: '#' }, + { id: 'item22', label: 'Level 2: Item 2', url: '#' }, + { + id: 'item23', + label: 'Level 2: Item 3', + url: '#', + child: [ + { id: 'item31', label: 'Level 3: Item 1', url: '#' }, + { id: 'item32', label: 'Level 3: Item 2', url: '#' }, + ], + }, + { id: 'item24', label: 'Level 2: Item 4', url: '#' }, + ], + }, + { id: 'item13', label: 'Level 1: Item 3', url: '#' }, + { id: 'item14', label: 'Level 1: Item 4', url: '#' }, +] satisfies LinksWidgetItemData[]; + +/** + * Links List Widget Stories - Unordered + */ +export const Unordered = Template.bind({}); +Unordered.args = { + heading: ( + + Quo et totam + + ), + items, +}; + +/** + * Links List Widget Stories - Ordered + */ +export const Ordered = Template.bind({}); +Ordered.args = { + heading: ( + + Quo et totam + + ), + isOrdered: true, + items, +}; -- cgit v1.2.3