agroptima-design-system 0.30.0 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/stories/Alert.stories.ts

@@ -4,6 +4,14 @@ import { Alert } from '../atoms/Alert'
 const meta = {
   title: 'Design System/Atoms/Alert',
   component: Alert,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "<h2>Usage guidelines</h2><ul><li>Make Alerts actionable and including a close button</li><li>Be aware of color and semantic meaning</li><li>Include only one action per Alert</li><li>Place Alerts at the top</li><li>Don't place Alerts over navigation</li><li>Persist errors to maintain visibility</li></ul>",
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     id: {

package/src/stories/Badge.stories.ts

@@ -4,6 +4,14 @@ import { Badge } from '../atoms/Badge'
 const meta = {
   title: 'Design System/Atoms/Badge',
   component: Badge,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>Use Badge component when content is mapped to multiple categories and the user needs a way to differentiate between them such as labeling or read-only situations.</p>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     variant: {

package/src/stories/Button.stories.ts

@@ -4,6 +4,14 @@ import { Button } from '../atoms/Button'
 const meta = {
   title: 'Design System/Atoms/Button',
   component: Button,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><ul><li>Button can be used as an action trigger or as a navigational component</li><li>Use icons at the page first level actions such as Create, Edit, Delete or mass actions</li><li>Display a popover when featuring subsequent options</li><li>Be aware of color and semantic meaning</li><li>Write labels as verbs</li></ul>',
+      },
+    },
+  },
   tags: ['autodocs'],
   args: {
     label: 'Button',

package/src/stories/Card.stories.js

@@ -12,6 +12,15 @@ const figmaPrimaryDesign = {
 const meta = {
   title: 'Design System/Atoms/Card',
   component: Card,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>A Card component can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.</p>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
   tags: ['autodocs'],
   argTypes: {
     visible: {
@@ -46,7 +55,6 @@ const meta = {
       control: 'text',
     },
   },
-  parameters: figmaPrimaryDesign,
 }
 
 export default meta

package/src/stories/CardMenu.stories.js

@@ -10,6 +10,15 @@ const figmaPrimaryDesign = {
 const meta = {
   title: 'Design System/Atoms/CardMenu',
   component: CardMenuOption,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>CardMenu is used to hide less frequently used or advanced options until users specifically need them. This keeps the interface clean and focused on essential elements. Consider using short and precise labels for menu items as well as a suitable ordering and grouping.</p>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
   tags: ['autodocs'],
   argTypes: {
     id: {
@@ -37,7 +46,6 @@ const meta = {
       description: 'Is the component marked as error?',
     },
   },
-  parameters: figmaPrimaryDesign,
 }
 
 export default meta

package/src/stories/CardsTable.stories.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Badge } from '../atoms/Badge'
 import { IconButton } from '../atoms/Button'
-import { Button } from '../atoms/Button'
 import {
   CardsTable,
   CardsTableBody,
@@ -24,13 +23,21 @@ const meta = {
   title: 'Design System/Atoms/CardsTable',
   component: CardsTable,
   tags: ['autodocs'],
-  parameters: figmaPrimaryDesign,
-  argTypes: {
-    variant: {
-      description: 'Select variant used',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>CardsTable component features are ideal for organizing and displaying data in a UI.</p><ul><li>Left align textual data</li><li>Right align numerical data</li><li>When having several numerical data columns, the Price one should be just before the Actions column</li></ul>',
+      },
     },
-    withTitle: {
-      description: 'Add style to first column',
+    figmaPrimaryDesign,
+    argTypes: {
+      variant: {
+        description: 'Select variant used',
+      },
+      withTitle: {
+        description: 'Add style to first column',
+      },
     },
   },
 }
@@ -56,8 +63,8 @@ export const Primary = {
           </CardsTableHeader>
           <CardsTableHeader>Company address</CardsTableHeader>
           <CardsTableHeader>Customer service email</CardsTableHeader>
-          <CardsTableHeader>Price</CardsTableHeader>
           <CardsTableHeader>State</CardsTableHeader>
+          <CardsTableHeader>Price</CardsTableHeader>
           <CardsTableHeader actions>Actions</CardsTableHeader>
         </CardsTableRow>
       </CardsTableHead>
@@ -82,7 +89,6 @@ export const Primary = {
             Tokyo, 104-0061 Japan
           </CardsTableCell>
           <CardsTableCell>konami@fakemail.com</CardsTableCell>
-          <CardsTableCell>Not available</CardsTableCell>
           <CardsTableCell floatingLeftMobile>
             <Badge
               accessibilityLabel="Game is bought"
@@ -90,6 +96,7 @@ export const Primary = {
               variant="success-outlined"
             />
           </CardsTableCell>
+          <CardsTableCell>Not available</CardsTableCell>
           <CardsTableCell actions>
             <IconButton
               icon="Edit"
@@ -128,7 +135,6 @@ export const Primary = {
             CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
           </CardsTableCell>
           <CardsTableCell>cdprojekt@fakemail.com</CardsTableCell>
-          <CardsTableCell align="right">19,99 €</CardsTableCell>
           <CardsTableCell floatingLeftMobile>
             <Badge
               accessibilityLabel="Game is booked"
@@ -136,6 +142,7 @@ export const Primary = {
               variant="info-outlined"
             />
           </CardsTableCell>
+          <CardsTableCell align="right">19,99 €</CardsTableCell>
           <CardsTableCell actions>
             <IconButton
               icon="Edit"
@@ -165,7 +172,6 @@ export const Primary = {
             135-0034, Japan
           </CardsTableCell>
           <CardsTableCell>namco@fakemail.com</CardsTableCell>
-          <CardsTableCell align="right">79,99 €</CardsTableCell>
           <CardsTableCell floatingLeftMobile>
             <Badge
               accessibilityLabel="Game is discontinued"
@@ -173,6 +179,7 @@ export const Primary = {
               variant="warning-outlined"
             />
           </CardsTableCell>
+          <CardsTableCell align="right">79,99 €</CardsTableCell>
           <CardsTableCell actions>
             <IconButton
               icon="Edit"
@@ -196,7 +203,6 @@ export const Primary = {
             Tokyo, 104-0061 Japan
           </CardsTableCell>
           <CardsTableCell>konami@fakemail.com</CardsTableCell>
-          <CardsTableCell align="right">6,99 €</CardsTableCell>
           <CardsTableCell floatingLeftMobile>
             <Badge
               accessibilityLabel="Game is bought"
@@ -204,6 +210,7 @@ export const Primary = {
               variant="success-outlined"
             />
           </CardsTableCell>
+          <CardsTableCell align="right">6,99 €</CardsTableCell>
           <CardsTableCell actions>
             <Popover
               position="center"
@@ -256,9 +263,6 @@ export const Primary = {
             Tokyo, 104-0061 Japan
           </CardsTableCell>
           <CardsTableCell>konami@fakemail.com</CardsTableCell>
-          <CardsTableCell align="right" floatingRightMobile>
-            6,99 €
-          </CardsTableCell>
           <CardsTableCell floatingLeftMobile>
             <Badge
               accessibilityLabel="Game is wishlisted"
@@ -266,6 +270,9 @@ export const Primary = {
               variant="neutral-outlined"
             />
           </CardsTableCell>
+          <CardsTableCell align="right" floatingRightMobile>
+            6,99 €
+          </CardsTableCell>
           <CardsTableCell actions>
             <IconButton
               icon="Edit"
@@ -337,9 +344,9 @@ export const MultipleBadges = {
           </CardsTableHeader>
           <CardsTableHeader>Company address</CardsTableHeader>
           <CardsTableHeader>Customer service email</CardsTableHeader>
-          <CardsTableHeader>Price</CardsTableHeader>
           <CardsTableHeader>State</CardsTableHeader>
           <CardsTableHeader>Genre</CardsTableHeader>
+          <CardsTableHeader>Price</CardsTableHeader>
           <CardsTableHeader actions>Actions</CardsTableHeader>
         </CardsTableRow>
       </CardsTableHead>
@@ -364,9 +371,6 @@ export const MultipleBadges = {
             Tokyo, 104-0061 Japan
           </CardsTableCell>
           <CardsTableCell>konami@fakemail.com</CardsTableCell>
-          <CardsTableCell align="right" floatingRightMobile noWrap>
-            6,99 €
-          </CardsTableCell>
           <CardsTableCell floatingLeftMobile>
             <Badge
               accessibilityLabel="Game is bought"
@@ -381,6 +385,9 @@ export const MultipleBadges = {
               variant="neutral-outlined"
             />
           </CardsTableCell>
+          <CardsTableCell align="right" floatingRightMobile noWrap>
+            6,99 €
+          </CardsTableCell>
           <CardsTableCell actions>
             <IconButton
               icon="Edit"

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.30.1
+
+* Add components documentation
+
 ## 0.30.0
 
 * Add Switch component

package/src/stories/CheckableTag.stories.js

@@ -28,7 +28,15 @@ const meta = {
       description: 'Callback triggered when clicking on an option',
     },
   },
-  parameters: figmaPrimaryDesign,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>CheckableTags allow users to categorize content. This component is used as a quick access to the most used filter.</p><ul><li>Allow bulk actions</li><li>Avoid disabling a large group of tags</li></ul>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
 }
 
 export default meta

package/src/stories/Checkbox.stories.ts

@@ -4,6 +4,14 @@ import { Checkbox } from '../atoms/Checkbox'
 const meta = {
   title: 'Design System/Atoms/Checkbox',
   component: Checkbox,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "<h2>Usage guidelines</h2><p>Checkboxes are used for multiple choices, not for mutually exclusive choices.</p><ul><li>When a checkbox represents multiple values that are not identical, the checkbox should appear in the indeterminate state</li><li>It's used on forms, filtering and batch actions and on terms and conditions agreement</li></ul>",
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     accessibilityLabel: {

package/src/stories/Collapsible.stories.js

@@ -32,7 +32,15 @@ const meta = {
       description: 'Is the component disabled?',
     },
   },
-  parameters: figmaPrimaryDesign,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>The Collapsible component delivers large amounts of content in a small space through progressive disclosure. The header title gives the user a high level overview of the content allowing the user to decide which sections to read.</p><ul><li>Always display the collapse and expand button</li><li>To shorten pages and reduce scrolling when content is not crucial to read in full</li></ul>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
 }
 
 export default meta
@@ -57,7 +65,7 @@ export const Primary = {
           id="email_input"
           label="Email"
           name="email"
-          placeholder="Email..."
+          placeholder="janedoe@mail.com"
           type="email"
           variant="primary"
         />
@@ -111,7 +119,7 @@ export const PrimaryOpened = {
             id="email_input"
             label="Email"
             name="email"
-            placeholder="Email..."
+            placeholder="janedoe@mail.com"
             type="email"
             variant="primary"
           />
@@ -177,7 +185,7 @@ export const PrimaryDisabled = {
           id="email_input"
           label="Email"
           name="email"
-          placeholder="Email..."
+          placeholder="janedoe@mail.com"
           type="email"
           variant="primary"
         />

package/src/stories/DatePicker.stories.ts

@@ -4,6 +4,14 @@ import { DateRangePicker } from '../atoms/DatePicker/DateRangePicker'
 const meta = {
   title: 'Design System/Atoms/DateRangePicker',
   component: DateRangePicker,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>DateRangePicker component allows users to select past, present, or future dates in a visual way in range or single format.</p>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     footer: {

package/src/stories/Divider.stories.ts

@@ -4,6 +4,14 @@ import { Divider } from '../atoms/Divider'
 const meta = {
   title: 'Design System/Atoms/Divider',
   component: Divider,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>A Divider component separates different content.</p><ul><li>Place a divider below a header</li></ul>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     title: {
@@ -28,7 +36,7 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   args: {
-    title: '19/01/2025 - Delivery Note',
+    title: '19/01/2025 - My gaming diary',
     variant: 'primary',
   },
   parameters: figmaPrimaryDesign,
@@ -36,7 +44,7 @@ export const Primary: Story = {
 
 export const WithIcon: Story = {
   args: {
-    title: '19/01/2025 - Delivery Note',
+    title: '19/01/2025 - My gaming diary',
     icon: 'DeliveryNote',
     variant: 'primary',
   },

package/src/stories/Drawer.stories.js

@@ -29,7 +29,15 @@ const meta = {
       description: 'Array of button to be shown on the footer',
     },
   },
-  parameters: figmaPrimaryDesign,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.</p>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
 }
 
 export default meta

package/src/stories/EmptyState.stories.js

@@ -20,7 +20,15 @@ const meta = {
       description: 'Variant used.',
     },
   },
-  parameters: figmaPrimaryDesign,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>EmptyState component is used for informing about no data and user actions such as no results when searching. A default icon is set for the empty state.</p>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
 }
 
 export default meta

package/src/stories/FloatingButton.stories.ts

@@ -4,6 +4,14 @@ import { FloatingButton } from '../atoms/Button'
 const meta = {
   title: 'Design System/Atoms/FloatingButton',
   component: FloatingButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "<h2>Usage guidelines</h2><p>The floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. Only use a FAB if it is the most suitable way to present a screen's primary action. It's FABulous!✨</p>",
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     accessibilityLabel: {

package/src/stories/Form.stories.js

@@ -5,6 +5,14 @@ import { Input } from '../atoms/Input'
 const meta = {
   title: 'Design System/Atoms/Form',
   component: Form,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>Forms are used when we need to create an instance or collect information.</p><ul><li>Keep the label short and concise</li><li>When used, helper text that appears persistently underneath the field is replaced by an error or warning message if a state change occurs</li><li>Mark the minority of inputs in a form as required or optional</li></ul>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     fullWidth: {

package/src/stories/IconButton.stories.ts

@@ -4,6 +4,14 @@ import { IconButton } from '../atoms/Button'
 const meta = {
   title: 'Design System/Atoms/IconButton',
   component: IconButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>An icon is a graphical representation of meaning. Icons can be used to express actions, state, and even to categorize data.</p><ul><li>Graphics that are clear, intuitive, and simple enjoy a higher degree of recognition and are more easily understood</li><li>All icons in the user interface should be consistent in style (detail design, perspective, stroke weight, etc.)</li><li>Use tooltips</li></ul><p>For more information about the Button usage, check its guidelines.</p>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     accessibilityLabel: {

package/src/stories/Input.stories.ts

@@ -4,6 +4,14 @@ import { Input } from '../atoms/Input'
 const meta = {
   title: 'Design System/Atoms/Input',
   component: Input,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>Input component is used when a user needs to input unique information that cannot be predicted with a preset of options or that can be entered more quickly in a free-hand format.</p><ul><li>By default, include a label</li><li>Mark the minority of inputs in a form as required or optional</li><li>Use help text to show hints, formatting, and requirements</li><li>Optional placeholder text provides hints or examples of what to enter</li><li>Switch help text with error text</li><li>Write error text that shows a solution</li></ul>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     label: {
@@ -61,7 +69,7 @@ export const Primary: Story = {
   args: {
     label: 'Email',
     accessibilityLabel: 'Fill the form email',
-    placeholder: 'Email...',
+    placeholder: 'janedoe@mail.com',
     variant: 'primary',
     disabled: false,
     helpText: 'This text can help you',
@@ -75,7 +83,7 @@ export const Primary: Story = {
 export const Password: Story = {
   args: {
     label: 'Password',
-    placeholder: 'Password...',
+    placeholder: 'Password123',
     variant: 'primary',
     disabled: false,
     helpText: 'This text can help you',
@@ -102,7 +110,7 @@ export const WithErrors: Story = {
   args: {
     label: 'Email',
     accessibilityLabel: 'Fill the form email',
-    placeholder: 'Email...',
+    placeholder: 'janedoe@mail.com',
     variant: 'primary',
     disabled: false,
     helpText: 'This text can help you',

package/src/stories/Menu.stories.js

@@ -11,6 +11,15 @@ const figmaPrimaryDesign = {
 const meta = {
   title: 'Design System/Atoms/Menu',
   component: Menu,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>Menu component allows users to move around the site quickly and efficiently.</p><ul><li>Use concise & descriptive titles in order to ensure simplicity</li><li>Use icons in first-level items only</li></ul>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
   tags: ['autodocs'],
   argTypes: {
     icon: {
@@ -32,7 +41,6 @@ const meta = {
       description: 'Is the dropdown open?',
     },
   },
-  parameters: figmaPrimaryDesign,
 }
 
 export default meta

package/src/stories/Modal.stories.js

@@ -26,6 +26,15 @@ const figmaPrimaryDesign = {
 const meta = {
   title: 'Design System/Atoms/Modal',
   component: Modal,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "<h2>Usage guidelines</h2><p>Modal component is used when requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow. It creates a new floating layer over the current page to get user feedback or display information.</p><ul><li>Require a response from the user</li><li>Notify the user of any related information</li><li>Confirm a user decision</li></ul>",
+      },
+    },
+    figmaPrimaryDesign,
+  },
   tags: ['autodocs'],
   argTypes: {
     id: {
@@ -47,7 +56,6 @@ const meta = {
       description: 'Function to be called when the modal is closed',
     },
   },
-  parameters: figmaPrimaryDesign,
 }
 
 export default meta

package/src/stories/Multiselect.stories.ts

@@ -4,6 +4,14 @@ import { Multiselect } from '../atoms/Multiselect'
 const meta = {
   title: 'Design System/Atoms/Multiselect',
   component: Multiselect,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>When there are more than a few options to choose from, you can wrap them in a Multiselect component. By clicking on the trigger, a menu will appear, which allows you to choose an option and execute the relevant action.</p><ul><li>By default, include a label</li><li>Mark the minority of components in a form as required or optional</li><li>Use help text to show hints, formatting, and requirements</li><li>Switch help text with error text</li><li>Write error text that shows a solution</li></ul>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     label: {

package/src/stories/Pagination.stories.js

@@ -40,7 +40,15 @@ const meta = {
       description: 'PageNumber label',
     },
   },
-  parameters: figmaPrimaryDesign,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>Pagination component organizes and divides large amounts of content on separate pages and gives the user control over how much content they want to view on each page.</p>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
 }
 
 export default meta

package/src/stories/Popover.stories.js

@@ -23,7 +23,15 @@ const meta = {
       control: { type: 'select' },
     },
   },
-  parameters: figmaPrimaryDesign,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>A Popover component is a layer that appears above all other content on the page. Only one popover can appear at a time and can contain varying text and interactive elements.</p><ul><li>Use when you need to display additional details for specific elements on a page.</li></ul>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
 }
 
 export default meta

package/src/stories/PopoverMenu.stories.js

@@ -26,7 +26,15 @@ const meta = {
       description: 'Is the component active?',
     },
   },
-  parameters: figmaPrimaryDesign,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>A Popover component is a layer that appears above all other content on the page. Only one popover can appear at a time and can contain varying text and interactive elements.</p><ul><li>Use when you need to display additional details for specific elements on a page.</li></ul>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
 }
 
 export default meta

package/src/stories/QuantitySelector.stories.ts

@@ -4,6 +4,14 @@ import { QuantitySelector } from '../atoms/QuantitySelector'
 const meta = {
   title: 'Design System/Atoms/QuantitySelector',
   component: QuantitySelector,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>Quantity Selector component is similar to text inputs, but is used to specify only a numeric value. Quantity Selector incrementally increase or decrease the value with a two-segment control.</p>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     label: {

package/src/stories/RadioButton.stories.js

@@ -10,6 +10,15 @@ const figmaPrimaryDesign = {
 const meta = {
   title: 'Design System/Atoms/RadioButton',
   component: RadioButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>Radio button component allows a user to select only one value from several options. Radio options should not be too many because all the options are default visible to a user so that the user can make the selection via comparison.</p><ul><li>Always label radio groups</li><li>Radio buttons and checkboxes are not interchangeable.</li></ul>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
   tags: ['autodocs'],
   argTypes: {
     accessibilityLabel: {
@@ -31,7 +40,6 @@ const meta = {
       description: 'Value needed for the label relation',
     },
   },
-  parameters: figmaPrimaryDesign,
 }
 
 export default meta

package/src/stories/Select.stories.ts

@@ -4,6 +4,14 @@ import { Select } from '../atoms/Select'
 const meta = {
   title: 'Design System/Atoms/Select',
   component: Select,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>Use the select component inside a form where users are selecting from a list of options and submitting data.</p><ul><li>Include a label</li><li>Keep menu items concise</li><li>Mark the minority of pickers in a form as required or optional</li><li>Use help text to show context</li><li>Switch help text with error text</li><li>Write error text that shows a solution</li></ul>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     label: {

package/src/stories/Switch.stories.ts

@@ -4,6 +4,14 @@ import { Switch } from '../atoms/Switch'
 const meta = {
   title: 'Design System/Atoms/Switch',
   component: Switch,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>Switch component is a control that is used to quickly switch between two possible states. The difference between Switch component and Checkbox component is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.</p>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     accessibilityLabel: {

package/src/stories/TextArea.stories.ts

@@ -4,6 +4,14 @@ import { TextArea } from '../atoms/TextArea'
 const meta = {
   title: 'Design System/Atoms/Textarea',
   component: TextArea,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2><p>A text area component lets a user input a longer amount of text than a standard text field.</p><ul><li>Include a label</li><li>Mark the minority of text areas in a form as required or optional</li><li>Because text areas are typically taller and wider than other components, it’s important to include the background of the field in order to help a user know where to click or tap to start entering text</li><li>Use help text to show hints, formatting, and requirements</li><li>Switch help text with error text</li><li>Write error text that shows a solution</li></ul>',
+      },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     label: {

package/tests/Input.spec.tsx

@@ -62,7 +62,7 @@ describe('Input', () => {
         id="email_input"
         label="Email"
         name="email"
-        placeholder="Email..."
+        placeholder="janedoe@mail.com"
         type="email"
         variant="primary"
       />,