From a08291b1586858fc894a27d56f55f87a88f8dbd3 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 20 Apr 2022 19:24:21 +0200 Subject: refactor(storybook): reorganize design system Add more stories for each components and change some components categories for better organization. --- src/components/atoms/links/link.stories.tsx | 43 ++++++++++++---- src/components/atoms/links/nav-link.stories.tsx | 8 ++- .../atoms/links/sharing-link.stories.tsx | 57 ++++++++++++++++++++-- src/components/atoms/links/social-link.stories.tsx | 49 ++++++++++++++++--- 4 files changed, 136 insertions(+), 21 deletions(-) (limited to 'src/components/atoms/links') diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx index 569c874..c3b3465 100644 --- a/src/components/atoms/links/link.stories.tsx +++ b/src/components/atoms/links/link.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import LinkComponent from './link'; +import Link from './link'; +/** + * Link - Storybook Meta + */ export default { - title: 'Atoms/Links', - component: LinkComponent, + title: 'Atoms/Typography/Links', + component: Link, argTypes: { children: { control: { @@ -65,15 +68,37 @@ export default { }, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - -); +const Template: ComponentStory = (args) => ; -export const Link = Template.bind({}); -Link.args = { +/** + * Links Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { children: 'A link', href: '#', external: false, }; + +/** + * Links Stories - External + */ +export const External = Template.bind({}); +External.args = { + children: 'A link', + href: '#', + external: true, +}; + +/** + * Links Stories - External With Lang + */ +export const ExternalWithLang = Template.bind({}); +ExternalWithLang.args = { + children: 'A link', + href: '#', + external: true, + lang: 'en', +}; diff --git a/src/components/atoms/links/nav-link.stories.tsx b/src/components/atoms/links/nav-link.stories.tsx index 08553be..7f7a334 100644 --- a/src/components/atoms/links/nav-link.stories.tsx +++ b/src/components/atoms/links/nav-link.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import NavLinkComponent from './nav-link'; +/** + * NavLink - Storybook Meta + */ export default { - title: 'Atoms/Links', + title: 'Atoms/Typography/Links', component: NavLinkComponent, argTypes: { href: { @@ -42,6 +45,9 @@ const Template: ComponentStory = (args) => ( ); +/** + * Links Stories - Nav Link + */ export const NavLink = Template.bind({}); NavLink.args = { href: '#', diff --git a/src/components/atoms/links/sharing-link.stories.tsx b/src/components/atoms/links/sharing-link.stories.tsx index 335fa50..c91e938 100644 --- a/src/components/atoms/links/sharing-link.stories.tsx +++ b/src/components/atoms/links/sharing-link.stories.tsx @@ -2,8 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import SharingLinkComponent from './sharing-link'; +/** + * SharingLink - Storybook Meta + */ export default { - title: 'Atoms/Links', + title: 'Atoms/Buttons/Sharing', component: SharingLinkComponent, argTypes: { medium: { @@ -43,8 +46,56 @@ const Template: ComponentStory = (args) => ( ); -export const SharingLink = Template.bind({}); -SharingLink.args = { +/** + * Sharing Link Stories - Diaspora + */ +export const Diaspora = Template.bind({}); +Diaspora.args = { medium: 'diaspora', url: '#', }; + +/** + * Sharing Link Stories - Email + */ +export const Email = Template.bind({}); +Email.args = { + medium: 'email', + url: '#', +}; + +/** + * Sharing Link Stories - Facebook + */ +export const Facebook = Template.bind({}); +Facebook.args = { + medium: 'facebook', + url: '#', +}; + +/** + * Sharing Link Stories - Journal du Hacker + */ +export const JournalDuHacker = Template.bind({}); +JournalDuHacker.args = { + medium: 'journal-du-hacker', + url: '#', +}; + +/** + * Sharing Link Stories - LinkedIn + */ +export const LinkedIn = Template.bind({}); +LinkedIn.args = { + medium: 'linkedin', + url: '#', +}; + +/** + * Sharing Link Stories - Twitter + */ +export const Twitter = Template.bind({}); +Twitter.args = { + medium: 'twitter', + url: '#', +}; diff --git a/src/components/atoms/links/social-link.stories.tsx b/src/components/atoms/links/social-link.stories.tsx index bd9a364..977ae6b 100644 --- a/src/components/atoms/links/social-link.stories.tsx +++ b/src/components/atoms/links/social-link.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import SocialLinkComponent from './social-link'; +import SocialLink from './social-link'; +/** + * SocialLink - Storybook Meta + */ export default { - title: 'Atoms/Links', - component: SocialLinkComponent, + title: 'Atoms/Buttons/Social', + component: SocialLink, argTypes: { name: { control: { @@ -27,14 +30,44 @@ export default { }, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (args) => ( + ); -export const SocialLink = Template.bind({}); -SocialLink.args = { +/** + * Social Link Stories - Github + */ +export const Github = Template.bind({}); +Github.args = { name: 'Github', url: '#', }; + +/** + * Social Link Stories - Gitlab + */ +export const Gitlab = Template.bind({}); +Gitlab.args = { + name: 'Gitlab', + url: '#', +}; + +/** + * Social Link Stories - LinkedIn + */ +export const LinkedIn = Template.bind({}); +LinkedIn.args = { + name: 'LinkedIn', + url: '#', +}; + +/** + * Social Link Stories - Twitter + */ +export const Twitter = Template.bind({}); +Twitter.args = { + name: 'Twitter', + url: '#', +}; -- cgit v1.2.3