agroptima-design-system 0.36.2 → 0.36.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.36.2",
+  "version": "0.36.3-beta.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/icons/index.tsx

@@ -41,6 +41,7 @@ import Minus from './minus.svg'
 import NewView from './new-view.svg'
 import Orders from './orders.svg'
 import PDF from './pdf.svg'
+import Picture from './picture.svg'
 import Product from './product.svg'
 import Reason from './reason.svg'
 import Reports from './reports.svg'
@@ -100,6 +101,7 @@ export {
   NewView,
   Orders,
   PDF,
+  Picture,
   Product,
   Reason,
   Reports,

package/src/icons/picture.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#picture__a)"><path d="M2.222 20a2.14 2.14 0 0 1-1.57-.653A2.14 2.14 0 0 1 0 17.777V2.223c0-.61.218-1.134.653-1.57A2.14 2.14 0 0 1 2.223 0h15.555a2.14 2.14 0 0 1 1.57.653c.434.435.652.958.652 1.57v15.555a2.14 2.14 0 0 1-.653 1.57 2.14 2.14 0 0 1-1.57.652H2.223Zm0-2.222h15.556V2.222H2.222v15.556Zm1.111-2.222h13.334L12.5 10l-3.333 4.444-2.5-3.333-3.334 4.445Z"/></g><defs><clipPath id="picture__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/stories/Alert.stories.ts

@@ -8,7 +8,15 @@ const meta = {
     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>",
+          '<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>',
       },
     },
   },

package/src/stories/{AlertContainer.stories.js → AlertContainer.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Alert, AlertContainer } from '../atoms/Alert'
 
@@ -17,8 +18,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const Primary = {
+export const Primary: Story = {
   render: () => (
     <AlertContainer>
       <Alert variant="success" id="success" text="This is a success alert" />

package/src/stories/Badge.stories.ts

@@ -8,7 +8,8 @@ const meta = {
     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>',
+          '<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>',
       },
     },
   },

package/src/stories/Button.stories.ts

@@ -8,7 +8,14 @@ const meta = {
     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>',
+          '<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>',
       },
     },
   },

package/src/stories/{Card.stories.js → Card.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import { IconButton } from '../atoms/Button'
 import { Button } from '../atoms/Button'
 import { Card, CardContent, CardFooter, CardHeader } from '../atoms/Card'
@@ -17,7 +18,11 @@ const meta = {
     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><ul><li>The Card has a hover effect when being a link, being `clickable` or not having any buttons.</li></ul>',
+          '<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>' +
+          '<ul>' +
+          ' <li>The Card has a hover effect when being a link, being `clickable` or not having any buttons.</li>' +
+          '</ul>',
       },
     },
     figmaPrimaryDesign,
@@ -59,8 +64,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const ProductCard = {
+export const ProductCard: Story = {
   render: () => (
     <div style={{ display: 'flex' }}>
       <Card variant="primary">
@@ -119,9 +125,9 @@ export const ProductCard = {
       </Card>
     </div>
   ),
-}
+} as unknown as Story
 
-export const ProductCardsGroup = {
+export const ProductCardsGroup: Story = {
   render: () => (
     <div
       style={{
@@ -415,9 +421,9 @@ export const ProductCardsGroup = {
       </Card>
     </div>
   ),
-}
+} as unknown as Story
 
-export const Primary = {
+export const Primary: Story = {
   render: () => (
     <div style={{ display: 'flex', width: '700px', gap: '20px' }}>
       <Card variant="primary">
@@ -468,9 +474,9 @@ export const Primary = {
       </Card>
     </div>
   ),
-}
+} as unknown as Story
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <div style={{ display: 'flex' }}>
       <Card isDisabled variant="primary">
@@ -492,9 +498,9 @@ export const Disabled = {
       </Card>
     </div>
   ),
-}
+} as unknown as Story
 
-export const Active = {
+export const Active: Story = {
   render: () => (
     <div style={{ display: 'flex' }}>
       <Card isActive>
@@ -504,9 +510,9 @@ export const Active = {
       </Card>
     </div>
   ),
-}
+} as unknown as Story
 
-export const WithLink = {
+export const WithLink: Story = {
   render: () => (
     <div style={{ display: 'flex' }}>
       <Card href="some-url">
@@ -521,9 +527,9 @@ export const WithLink = {
       </Card>
     </div>
   ),
-}
+} as unknown as Story
 
-export const Clickable = {
+export const Clickable: Story = {
   render: () => (
     <div style={{ display: 'flex' }}>
       <Card onClick={() => alert('click')}>
@@ -538,4 +544,4 @@ export const Clickable = {
       </Card>
     </div>
   ),
-}
+} as unknown as Story

package/src/stories/{CardMenu.stories.js → CardMenu.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import { CardMenu, CardMenuOption } from '../atoms/CardMenu'
 
 const figmaPrimaryDesign = {
@@ -14,7 +15,8 @@ const meta = {
     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>',
+          '<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,
@@ -36,6 +38,9 @@ const meta = {
     description: {
       description: 'Component description text',
     },
+    href: {
+      description: 'Component link',
+    },
     disabled: {
       description: 'Is the component disabled?',
     },
@@ -49,21 +54,22 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const Option = {
+export const Option: Story = {
   render: () => (
     <CardMenuOption
       id="first-menu-option"
-      href="#"
+      href="http://olakas.com"
       icon="Info"
       variant="primary"
       title="It's dangerous to go alone!"
       description="Take this 🗡️ and this 🛡️ and this 💣 and this 🏹 and this 🔪 and this 🐴 and this 🔫 and this 🔪"
     />
   ),
-}
+} as unknown as Story
 
-export const DisabledOption = {
+export const DisabledOption: Story = {
   render: () => (
     <CardMenuOption
       id="first-menu-option"
@@ -75,9 +81,9 @@ export const DisabledOption = {
       disabled
     />
   ),
-}
+} as unknown as Story
 
-export const ActiveOption = {
+export const ActiveOption: Story = {
   render: () => (
     <CardMenuOption
       id="first-menu-option"
@@ -89,9 +95,9 @@ export const ActiveOption = {
       active
     />
   ),
-}
+} as unknown as Story
 
-export const ErrorOption = {
+export const ErrorOption: Story = {
   render: () => (
     <CardMenuOption
       id="first-menu-option"
@@ -103,9 +109,9 @@ export const ErrorOption = {
       error
     />
   ),
-}
+} as unknown as Story
 
-export const Menu = {
+export const Menu: Story = {
   render: () => (
     <CardMenu>
       <CardMenuOption
@@ -135,4 +141,4 @@ export const Menu = {
       />
     </CardMenu>
   ),
-}
+} as unknown as Story

package/src/stories/{CardsTable.stories.js → CardsTable.stories.tsx}

@@ -1,7 +1,9 @@
+import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Badge } from '../atoms/Badge'
 import { IconButton } from '../atoms/Button'
 import {
+  Alignment,
   CardsTable,
   CardsTableBody,
   CardsTableCell,
@@ -27,7 +29,12 @@ const meta = {
     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>',
+          '<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>',
       },
     },
     figmaPrimaryDesign,
@@ -43,8 +50,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const Primary = {
+export const Primary: Story = {
   render: (args) => (
     <CardsTable withTitle {...args}>
       <CardsTableHead>
@@ -52,7 +60,6 @@ export const Primary = {
           <CardsTableHeader>
             <Checkbox
               hideLabel
-              label="Select all table rows"
               id="checkbox-select-all"
               indeterminate
               checked
@@ -142,7 +149,7 @@ export const Primary = {
               variant="info-outlined"
             />
           </CardsTableCell>
-          <CardsTableCell align="right">19,99 €</CardsTableCell>
+          <CardsTableCell align={Alignment.Right}>19,99 €</CardsTableCell>
           <CardsTableCell actions>
             <IconButton
               icon="Edit"
@@ -179,7 +186,7 @@ export const Primary = {
               variant="warning-outlined"
             />
           </CardsTableCell>
-          <CardsTableCell align="right">79,99 €</CardsTableCell>
+          <CardsTableCell align={Alignment.Right}>79,99 €</CardsTableCell>
           <CardsTableCell actions>
             <IconButton
               icon="Edit"
@@ -210,12 +217,16 @@ export const Primary = {
               variant="success-outlined"
             />
           </CardsTableCell>
-          <CardsTableCell align="right">6,99 €</CardsTableCell>
+          <CardsTableCell align={Alignment.Right}>6,99 €</CardsTableCell>
           <CardsTableCell actions>
             <Popover
               position="center"
               renderButton={({ toggle }) => (
-                <IconButton icon="PDF" label="Open popover" onClick={toggle} />
+                <IconButton
+                  icon="PDF"
+                  accessibilityLabel="Open popover"
+                  onClick={toggle}
+                />
               )}
             >
               <PopoverMenu>
@@ -270,7 +281,7 @@ export const Primary = {
               variant="neutral-outlined"
             />
           </CardsTableCell>
-          <CardsTableCell align="right" floatingRightMobile>
+          <CardsTableCell align={Alignment.Right} floatingRightMobile>
             6,99 €
           </CardsTableCell>
           <CardsTableCell actions>
@@ -306,13 +317,13 @@ export const Primary = {
   ),
 }
 
-export const OnlyTitle = {
+export const OnlyTitle: Story = {
   render: (args) => (
     <CardsTable {...args}>
       <CardsTableBody>
         <CardsTableRow isActive onClick={() => alert('Click')}>
           <CardsTableCell titleWithActions={1}>Only title</CardsTableCell>
-          <CardsTableCell actions align="right">
+          <CardsTableCell actions align={Alignment.Right}>
             <IconButton
               icon="Edit"
               accessibilityLabel="Edit game"
@@ -325,7 +336,7 @@ export const OnlyTitle = {
   ),
 }
 
-export const MultipleBadges = {
+export const MultipleBadges: Story = {
   render: (args) => (
     <CardsTable withTitle {...args}>
       <CardsTableHead>
@@ -333,7 +344,6 @@ export const MultipleBadges = {
           <CardsTableHeader>
             <Checkbox
               hideLabel
-              label="Select all table rows"
               id="checkbox-select-all"
               indeterminate
               checked
@@ -385,7 +395,7 @@ export const MultipleBadges = {
               variant="neutral-outlined"
             />
           </CardsTableCell>
-          <CardsTableCell align="right" floatingRightMobile noWrap>
+          <CardsTableCell align={Alignment.Right} floatingRightMobile noWrap>
             6,99 €
           </CardsTableCell>
           <CardsTableCell actions>

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.36.3
+
+* Add Picture icon
+
 ## 0.36.2
 
 * Add Order icon

package/src/stories/{CheckableTag.stories.js → CheckableTag.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import { CheckableTag, CheckableTagGroup } from '../atoms/CheckableTag'
 
 const figmaPrimaryDesign = {
@@ -32,7 +33,11 @@ const meta = {
     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>',
+          '<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,
@@ -40,8 +45,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const TagGroup = {
+export const TagGroup: Story = {
   render: () => (
     <CheckableTagGroup>
       <CheckableTag
@@ -103,4 +109,4 @@ export const TagGroup = {
       />
     </CheckableTagGroup>
   ),
-}
+} as unknown as Story

package/src/stories/Checkbox.stories.tsx

@@ -9,7 +9,12 @@ const meta = {
     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>",
+          '<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>',
       },
     },
   },

package/src/stories/Collapsible.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Button } from '../atoms/Button'
-import { Collapsible } from '../atoms/Collapsible/Collapsible'
+import { Collapsible } from '../atoms/Collapsible'
 import { Divider } from '../atoms/Divider'
 import { Actions, Form as FormComponent, FormContainer } from '../atoms/Form'
 import { Input } from '../atoms/Input'
@@ -36,7 +36,12 @@ const meta = {
     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>',
+          '<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,

package/src/stories/DateRangePicker.stories.ts

@@ -8,7 +8,8 @@ const meta = {
     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. To avoid problems with Chromatic builds, always add a defaultValue.</p>',
+          '<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. To avoid problems with Chromatic builds, always add a defaultValue.</p>',
       },
     },
   },

package/src/stories/DateSinglePicker.stories.ts

@@ -8,7 +8,8 @@ const meta = {
     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. To avoid problems with Chromatic builds, always add a defaultValue.</p>',
+          '<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. To avoid problems with Chromatic builds, always add a defaultValue.</p>',
       },
     },
   },

package/src/stories/Divider.stories.tsx

@@ -9,7 +9,11 @@ const meta = {
     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>',
+          '<h2>Usage guidelines</h2>' +
+          '<p>A Divider component separates different content.</p>' +
+          '<ul>' +
+          ' <li>Place a divider below a header</li>' +
+          '</ul>',
       },
     },
   },

package/src/stories/{Drawer.stories.js → Drawer.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { CheckableTag, CheckableTagGroup } from '../atoms/CheckableTag'
 import { Collapsible } from '../atoms/Collapsible/Collapsible'
@@ -33,7 +34,8 @@ const meta = {
     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>',
+          '<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,
@@ -41,8 +43,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const Filters = {
+export const Filters: Story = {
   render: () => (
     <Drawer
       id="videogames-filters"
@@ -58,6 +61,7 @@ export const Filters = {
           onClick: () => alert('click'),
         },
       ]}
+      onClose={() => {}}
     >
       <Collapsible noHorizontalPadding open title="Genres">
         <CheckableTagGroup>
@@ -139,4 +143,4 @@ export const Filters = {
       </Collapsible>
     </Drawer>
   ),
-}
+} as unknown as Story

package/src/stories/{EmptyState.stories.js → EmptyState.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import { Button } from '../atoms/Button'
 import { EmptyState } from '../atoms/EmptyState'
 
@@ -24,7 +25,8 @@ const meta = {
     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>',
+          '<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,
@@ -32,8 +34,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const PrimaryCustom = {
+export const PrimaryCustom: Story = {
   render: () => (
     <EmptyState variant="primary">
       <p>
@@ -45,7 +48,7 @@ export const PrimaryCustom = {
   ),
 }
 
-export const PrimaryBasic = {
+export const PrimaryBasic: Story = {
   render: () => (
     <EmptyState variant="primary">
       <p>No data</p>

package/src/stories/FloatingButton.stories.ts

@@ -8,7 +8,8 @@ const meta = {
     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>",
+          '<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>",
       },
     },
   },

package/src/stories/{Form.stories.js → Form.stories.tsx}

@@ -1,5 +1,8 @@
+import type { StoryObj } from '@storybook/react'
+import type { JSX } from 'react'
 import { Button } from '../atoms/Button'
 import { Actions, Form } from '../atoms/Form'
+import type { FormProps } from '../atoms/Form/Form'
 import { Input } from '../atoms/Input'
 
 const meta = {
@@ -9,7 +12,12 @@ const meta = {
     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>',
+          '<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>',
       },
     },
   },
@@ -23,9 +31,10 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const FormWithActions = {
-  render: (args) => (
+export const FormWithActions: Story = {
+  render: (args: JSX.IntrinsicAttributes & FormProps) => (
     <Form {...args}>
       <Input label="First Name" placeholder="First Name" name="firstName" />
       <Input label="Last Name" placeholder="Last Name" name="lastName" />
@@ -49,4 +58,4 @@ export const FormWithActions = {
       </Actions>
     </Form>
   ),
-}
+} as unknown as Story

package/src/stories/HelpText.stories.ts

@@ -8,7 +8,8 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><p>HelpText component provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms.</p>',
+          '<h2>Usage guidelines</h2>' +
+          '<p>HelpText component provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms.</p>',
       },
     },
   },

package/src/stories/IconButton.stories.ts

@@ -8,7 +8,14 @@ const meta = {
     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>',
+          '<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>',
       },
     },
   },

package/src/stories/Input.stories.ts

@@ -8,7 +8,14 @@ const meta = {
     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>',
+          '<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>',
       },
     },
   },

package/src/stories/Label.stories.ts

@@ -8,7 +8,10 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><ul><li>Element represents a caption for an item in a user interface.</li></ul>',
+          '<h2>Usage guidelines</h2>' +
+          '<ul>' +
+          ' <li>Element represents a caption for an item in a user interface.</li>' +
+          '</ul>',
       },
     },
   },

package/src/stories/{Menu.stories.js → Menu.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Menu, MenuDropdown, MenuLink } from '../atoms/Menu'
 
@@ -15,7 +16,12 @@ const meta = {
     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>',
+          '<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,
@@ -44,8 +50,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const MenuWithLinks = {
+export const MenuWithLinks: Story = {
   render: () => (
     <Menu>
       <MenuLink title="Tekken 8" href="some-link" />

package/src/stories/Modal.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Button } from '../atoms/Button'
-import { Collapsible } from '../atoms/Collapsible/Collapsible'
+import { Collapsible } from '../atoms/Collapsible'
 import { Divider } from '../atoms/Divider'
 import { FormContainer } from '../atoms/Form'
 import { Input } from '../atoms/Input'

package/src/stories/Multiselect.stories.ts

@@ -8,7 +8,14 @@ const meta = {
     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>',
+          '<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>',
       },
     },
   },

package/src/stories/{Pagination.stories.js → Pagination.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import {
   Ellipsis,
@@ -27,9 +28,6 @@ const meta = {
     href: {
       description: 'Link to the page',
     },
-    variant: {
-      description: 'Component variant used',
-    },
     selected: {
       description: 'Is PageNumber the current page?',
     },
@@ -44,7 +42,8 @@ const meta = {
     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>',
+          '<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,
@@ -52,8 +51,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const BasicPagination = {
+export const BasicPagination: Story = {
   render: () => (
     <Pagination>
       <PaginationArrow
@@ -89,7 +89,7 @@ export const BasicPagination = {
   ),
 }
 
-export const MiniPagination = {
+export const MiniPagination: Story = {
   render: () => (
     <Pagination size="small">
       <PaginationArrow
@@ -146,7 +146,7 @@ export const MiniPagination = {
   ),
 }
 
-export const AdvancedPagination = {
+export const AdvancedPagination: Story = {
   render: () => (
     <Pagination>
       <PaginationArrow

package/src/stories/{Popover.stories.js → Popover.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Button } from '../atoms/Button'
 import { Popover, PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
@@ -27,7 +28,11 @@ const meta = {
     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>',
+          '<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,
@@ -35,9 +40,14 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const Menu = {
-  render: ({ position }) => (
+interface Position {
+  position?: 'left' | 'right' | 'center'
+}
+
+export const Menu: Story = {
+  render: ({ position }: Position) => (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
       <Popover
         position={position}
@@ -71,4 +81,4 @@ export const Menu = {
       </Popover>
     </div>
   ),
-}
+} as unknown as Story

package/src/stories/{PopoverMenu.stories.js → PopoverMenu.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
 
@@ -30,7 +31,11 @@ const meta = {
     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>',
+          '<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,
@@ -38,8 +43,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const Menu = {
+export const Menu: Story = {
   render: () => (
     <PopoverMenu>
       <PopoverMenuOption active href="#" variant="primary" title="Profile" />
@@ -47,4 +53,4 @@ export const Menu = {
       <PopoverMenuOption disabled href="#" variant="primary" title="Logout" />
     </PopoverMenu>
   ),
-}
+} as unknown as Story

package/src/stories/RadioGroup.stories.ts

@@ -15,7 +15,12 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><p>Radio group 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>',
+          '<h2>Usage guidelines</h2>' +
+          '<p>Radio group 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,

package/src/stories/Select.stories.ts

@@ -8,7 +8,16 @@ const meta = {
     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>',
+          '<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>',
       },
     },
   },

package/src/stories/Switch.stories.ts

@@ -8,7 +8,8 @@ const meta = {
     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>',
+          '<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>',
       },
     },
   },

package/src/stories/{TabMenu.stories.js → TabMenu.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import { TabLink, TabMenu } from '../atoms/TabMenu'
 
 const figmaPrimaryDesign = {
@@ -14,7 +15,11 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><p>The TabMenu component can be used as an extra navigational hierarchy complementing the main navbar.</p><ul><li>Use concise & descriptive titles in order to ensure simplicity</li></ul>',
+          '<h2>Usage guidelines</h2>' +
+          '<p>The TabMenu component can be used as an extra navigational hierarchy complementing the main navbar.</p>' +
+          '<ul>' +
+          ' <li>Use concise & descriptive titles in order to ensure simplicity</li>' +
+          '</ul>',
       },
     },
     figmaPrimaryDesign,
@@ -40,8 +45,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const Tabs = {
+export const Tabs: Story = {
   render: () => (
     <TabMenu>
       <TabLink title="Videogames" href="some-link" />

package/src/stories/TextArea.stories.ts

@@ -8,7 +8,15 @@ const meta = {
     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>',
+          '<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>',
       },
     },
   },

package/src/stories/{Typography.stories.js → Typography.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Typography as TypographyExamples } from '../examples/Typography'
 
@@ -15,8 +16,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const Typography = {
+export const Typography: Story = {
   render: () => (
     <div
       style={{

package/tsconfig.json

@@ -26,11 +26,12 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "src/stories/Typography.stories.mdx",
-    "src/stories/CardsTable.stories.js",
-    "src/stories/Card.stories.js",
-    "src/stories/Menu.stories.js",
-    "src/stories/EmptyState.stories.js",
-    "src/stories/CheckableTag.stories.js",
+    "src/stories/CardsTable.stories.tsx",
+    "src/stories/Modal.stories.tsx",
+    "src/stories/Card.stories.tsx",
+    "src/stories/Menu.stories.tsx",
+    "src/stories/EmptyState.stories.tsx",
+    "src/stories/CheckableTag.stories.tsx",
     "src/stories/RadioGroup.stories"
   ],
   "exclude": ["node_modules"]