feat(tag/taggroup): add storybook for tag and taggroup

dataesr · May 10, 2023 · c6ce84c · c6ce84c
1 parent cdd7599
commit c6ce84c
Show file tree

Hide file tree

Showing 2 changed files with 207 additions and 0 deletions.
diff --git a/src/components/interface/Tag/Tag.stories.tsx b/src/components/interface/Tag/Tag.stories.tsx
@@ -0,0 +1,83 @@
+import { Story } from '@storybook/react/types-6-0';
+
+import Tag, { TagProps } from './Tag';
+
+export default {
+  title: 'Tag',
+  component: Tag,
+  argTypes: {},
+};
+
+const Template: Story<TagProps> = (args) => <Tag {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Votre texte',
+};
+Default.storyName = 'Tag';
+
+export const Small = Template.bind({});
+Small.args = {
+  children: 'petit',
+  small: true,
+};
+Small.storyName = 'Petit';
+
+export const Selected = Template.bind({});
+Selected.args = {
+  children: 'Tag selectionné',
+  selected: true,
+};
+Selected.storyName = 'Tag selectionné';
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  children: 'Avec icône',
+  icon: 'ri-emotion-line',
+};
+WithIcon.storyName = 'Tag avec icône';
+
+export const WithLeftIcon = Template.bind({});
+WithLeftIcon.args = {
+  children: 'Tag avec icône à gauche',
+  icon: 'ri-emotion-line',
+  iconPosition: 'left',
+};
+WithLeftIcon.storyName = 'Tag avec icône à gauche';
+
+export const WithLink = Template.bind({});
+WithLink.args = {
+  children: 'Tag avec lien',
+  href: 'https://www.example.com',
+};
+WithLink.storyName = 'Tag avec lien';
+
+export const Rel = Template.bind({});
+Rel.args = {
+  children: "Tag avec lien vers l'exterieur",
+  href: 'https://www.example.com',
+  target: '_blank',
+};
+Rel.storyName = "Tag avec lien vers l'exterieur";
+
+export const Colored = Template.bind({});
+Colored.args = {
+  children: 'Tag coloré',
+  colorFamily: 'green-bourgeon',
+};
+Colored.storyName = 'Tag coloré';
+
+export const Dismiss = Template.bind({});
+Dismiss.args = {
+  children: 'Tag supprimable',
+  closable: true,
+};
+Dismiss.storyName = 'Tag supprimable';
+
+export const ALT = Template.bind({});
+ALT.args = {
+  children: 'Accessibilité',
+  href: 'https://www.example.com',
+  title: 'Vers le site : https://www.example.com',
+};
+ALT.storyName = 'Accessibilité';
diff --git a/src/components/interface/Tag/TagGroup.stories.tsx b/src/components/interface/Tag/TagGroup.stories.tsx
@@ -0,0 +1,124 @@
+import { Story } from '@storybook/react/types-6-0';
+import TagGroup, { TagGroupProps } from './TagGroup';
+import Tag from './Tag';
+
+export default {
+  title: 'TagGroup',
+  component: TagGroup,
+  argTypes: {},
+  subcomponents: { Tag },
+};
+const Template: Story<TagGroupProps> = (args) => <TagGroup {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: [
+    <Tag small>
+      Tag
+    </Tag>,
+    <Tag selected>
+      Tag
+    </Tag>,
+    <Tag icon="fr-fi-arrow-right-line">
+      Tag
+    </Tag>,
+    <Tag icon="fr-fi-arrow-right-line" iconPosition="left">
+      Tag
+    </Tag>,
+
+  ],
+};
+Default.storyName = 'Groupes de tags';
+
+export const DifferentsSize = Template.bind({});
+DifferentsSize.args = {
+  children: [
+    <Tag
+      small
+      onClick={() => {}}
+    >
+      Petit tag
+    </Tag>,
+    <Tag
+      onClick={() => {}}
+    >
+      Tag
+    </Tag>,
+    <Tag
+      onClick={() => {}}
+    >
+      Tag
+    </Tag>,
+  ],
+};
+DifferentsSize.storyName = 'Tags de différentes tailles';
+
+export const TagsSelected = Template.bind({});
+TagsSelected.args = {
+  children: [
+    <Tag
+      selected
+      href="https://www.example.com"
+      onClick={() => {}}
+    >
+      Tag selectionné
+    </Tag>,
+    <Tag
+      href="https://www.example.com"
+      onClick={() => {}}
+    >
+      Tag
+    </Tag>,
+    <Tag
+      selected
+      href="https://www.example.com"
+      onClick={() => {}}
+    >
+      Tag selectionné
+    </Tag>,
+    <Tag
+      href="https://www.example.com"
+      onClick={() => {}}
+    >
+      Tag
+    </Tag>,
+  ],
+};
+TagsSelected.storyName = 'Groupes de tags selectionnables';
+
+export const TagsToDismiss = Template.bind({});
+TagsToDismiss.args = {
+  children: [
+    <Tag
+      selected
+      href="https://www.example.com"
+      onClick={() => {}}
+      closable
+    >
+      Tag selectionné
+    </Tag>,
+    <Tag
+      closable
+      href="https://www.example.com"
+      onClick={() => {}}
+    >
+      Tag
+    </Tag>,
+    <Tag
+      closable
+      selected
+      href="https://www.example.com"
+      onClick={() => {}}
+    >
+      Tag selectionné
+    </Tag>,
+    <Tag
+      closable
+      href="https://www.example.com"
+      onClick={() => {}}
+    >
+      Tag
+    </Tag>,
+  ],
+};
+TagsToDismiss.storyName = 'Groupes de tags à supprimer';