From c87c615b5866b8a8f361eeb0764bfdea85740e90 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 10 Oct 2023 19:37:51 +0200 Subject: refactor(components): replace Meta component with MetaList It removes items complexity by allowing consumers to use any label/value association. Translations should also be defined by the consumer. Each item can now be configured separately (borders, layout...). --- .../molecules/meta-list/meta-list.stories.tsx | 70 ++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/components/molecules/meta-list/meta-list.stories.tsx (limited to 'src/components/molecules/meta-list/meta-list.stories.tsx') diff --git a/src/components/molecules/meta-list/meta-list.stories.tsx b/src/components/molecules/meta-list/meta-list.stories.tsx new file mode 100644 index 0000000..463ec96 --- /dev/null +++ b/src/components/molecules/meta-list/meta-list.stories.tsx @@ -0,0 +1,70 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Link } from '../../atoms'; +import { type MetaItemData, MetaList } from './meta-list'; + +/** + * MetaList - Storybook Meta + */ +export default { + title: 'Molecules/MetaList', + component: MetaList, + argTypes: { + items: { + description: 'The meta items.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +const items: MetaItemData[] = [ + { id: 'comments', label: 'Comments', value: 'No comments.' }, + { + id: 'category', + label: 'Category', + value: Cat 1, + }, + { + id: 'tags', + label: 'Tags', + value: [ + { id: 'tag1', value: Tag 1 }, + { id: 'tag2', value: Tag 2 }, + ], + }, + { + hasBorderedValues: true, + hasInlinedValues: true, + id: 'technologies', + label: 'Technologies', + value: [ + { id: 'techno1', value: 'HTML' }, + { id: 'techno2', value: 'CSS' }, + { id: 'techno3', value: 'Javascript' }, + ], + }, +]; + +/** + * MetaList Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + items, +}; + +/** + * MetaList Stories - Inlined + */ +export const Inlined = Template.bind({}); +Inlined.args = { + isInline: true, + items, +}; -- cgit v1.2.3 value='range'>range

path: root/src/components/atoms/images/logo.tsx

blob: 491539d4bcffeebaf1cc3c5bc95aa852bdf19b0b (plain)