diff options
Diffstat (limited to 'src/components/atoms/links')
| -rw-r--r-- | src/components/atoms/links/link.stories.tsx | 43 | ||||
| -rw-r--r-- | src/components/atoms/links/nav-link.stories.tsx | 8 | ||||
| -rw-r--r-- | src/components/atoms/links/sharing-link.stories.tsx | 57 | ||||
| -rw-r--r-- | src/components/atoms/links/social-link.stories.tsx | 49 |
4 files changed, 136 insertions, 21 deletions
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<typeof LinkComponent>; +} as ComponentMeta<typeof Link>; -const Template: ComponentStory<typeof LinkComponent> = (args) => ( - <LinkComponent {...args} /> -); +const Template: ComponentStory<typeof Link> = (args) => <Link {...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<typeof NavLinkComponent> = (args) => ( <NavLinkComponent {...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<typeof SharingLinkComponent> = (args) => ( </IntlProvider> ); -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<typeof SocialLinkComponent>; +} as ComponentMeta<typeof SocialLink>; -const Template: ComponentStory<typeof SocialLinkComponent> = (args) => ( - <SocialLinkComponent {...args} /> +const Template: ComponentStory<typeof SocialLink> = (args) => ( + <SocialLink {...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: '#', +}; |
