agroptima-design-system 0.18.2 → 0.18.3

package/.storybook/main.ts

@@ -16,17 +16,14 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-interactions'),
     '@storybook/addon-a11y',
     '@storybook/addon-designs',
+    '@storybook/addon-mdx-gfm'
   ],
   framework: {
-    name: getAbsolutePath('@storybook/nextjs'),
+    name: '@storybook/nextjs',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
-  core: {
-    builder: '@storybook/builder-webpack5',
-  },
+  docs: {},
+  core: {},
   webpackFinal: async (config) => {
     const pathToInlineSvg = resolve(__dirname, '../src/icons')
 

package/.storybook/preview.ts

@@ -3,7 +3,6 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -26,6 +25,8 @@ const preview: Preview = {
       viewports: INITIAL_VIEWPORTS,
     },
   },
+
+  tags: ['autodocs'],
 }
 
 export default preview

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -14,22 +14,23 @@
     "publish:beta": "npm publish --tag beta"
   },
   "dependencies": {
-    "@storybook/addon-designs": "^7.0.5",
-    "@storybook/addon-viewport": "^7.6.7",
+    "@storybook/addon-designs": "^8.0.2",
+    "@storybook/addon-viewport": "^8.1.10",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.0",
-    "@storybook/addon-interactions": "^7.5.0",
-    "@storybook/addon-links": "^7.5.0",
-    "@storybook/blocks": "^7.5.0",
-    "@storybook/nextjs": "^7.5.0",
-    "@storybook/react": "^7.5.0",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/nextjs": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/test": "^8.1.10",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
@@ -42,11 +43,11 @@
     "eslint-config-next": "^14.0.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^7.6.6",
+    "storybook": "^8.1.10",
     "ts-node": "^10.9.2",
     "typescript": "^5"
   },

package/src/stories/CardsTable.stories.js

@@ -1,6 +1,13 @@
 import React from 'react'
 
-import { CardsTable, CardsTableHead, CardsTableHeader, CardsTableRow, CardsTableBody, CardsTableCell } from '../atoms/CardsTable'
+import {
+  CardsTable,
+  CardsTableHead,
+  CardsTableHeader,
+  CardsTableRow,
+  CardsTableBody,
+  CardsTableCell,
+} from '../atoms/CardsTable'
 import { IconButton } from '../atoms/Button'
 import { Badge } from '../atoms/Badge'
 

package/src/stories/Changelog.mdx

@@ -0,0 +1,208 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Changelog" />
+
+# Changelog
+
+## 0.18.3
+* Update docs
+
+## 0.18.2
+
+* Add link to CardMenuOption component
+* Add active and error state to CardMenuOption component
+* Add active state to Card component
+* Update QuantitySelector component props
+* Add active and action state to CardsTableRow component
+
+## 0.18.0
+
+* Added Collapsible component to Storybook
+
+## 0.17.0
+
+* Added QuantitySelector component to Storybook
+
+## 0.16.2
+
+* Fixed some icons missing ViewBox
+
+## 0.16.1
+
+* Updated Oultined Button background color
+* Added new icons
+* Added fix to Alert component button
+* Fixed responsive glitch bug on CardsTable components
+
+## 0.16.0
+
+* Added new shape for FloatingButton component
+
+## 0.15.0
+
+* Added FloatingButton component to Storybook
+
+BREAKING CHANGES
+
+* All button components have been moved to a common folder
+
+## 0.14.1
+
+* Added MenuLink and MenuDropdown components to Storybook and remove MenuOption component.
+
+## 0.14.0
+
+* Added Menu component to Storybook.
+
+## 0.13.0
+
+* Added CardMenuOption component to Storybook.
+
+## 0.12.0
+
+* Card component is added to Storybook.
+
+## 0.11.1
+
+* Input and Checkbox components `id` prop now it's optional.
+* Fixed TextArea export component.
+
+## 0.11.0
+
+* Added TextArea component to Storybook.
+* Input, Checkbox and TextArea components `id` prop now is obtained from `id` or `name`.
+
+## 0.10.0
+
+* Cards Table components now are responsive.
+* Added Link style to Typography.
+
+## 0.9.3
+
+* Fix alert component width.
+
+## 0.9.2
+
+* Alert component can be rendered with fit-content width or 100% depending on the container.
+
+## 0.9.1
+
+* Modal and Alert components position fixed has been added.
+* Modal show/hide logic has been removed.
+
+## 0.9.0
+
+* Alert component is added to Storybook.
+
+## 0.8.0
+
+* Badge component is added to Storybook.
+* IconButton and Button have the default cursor on both link and button versions.
+
+## 0.7.0
+
+* Modal component is added to Storybook.
+* Typography styles are added to Storybook.
+
+## 0.6.1
+
+* Fixed error type in onChange select props.
+* Added check types to CI.
+
+## 0.6.0
+
+Checkbox component is added to Storybook.
+
+## 0.5.0
+
+* IconButton component is added to Storybook.
+* Edit and Delete icons have been added.
+* Button outlined disabled styles have been changed to make them look the same as the filled disabled styles.
+* `accessibilityLabel` specific prop has been added as optional to Button, Input, Select and Multiselect components.
+* Select and Multiselect can be closed too when losing focus.
+* Select and Multiselect accept native props.
+* Select component triggers `onChange` event prop.
+
+BREAKING CHANGES
+
+* Input, Select and Multiselect components accept an `errors` array prop. Previous `invalid` prop is deprecated.
+
+## 0.4.0
+
+* CardsTable component suitable to create custom tables is added to Storybook.
+* Cell `align` property has been added to CardsTableCell component.
+* Cell `noWrap` property has been added to CardsTableCell component.
+* Button component can be rendered as NextLink if the `href` prop is provided.
+* Empty State component now accepts Button props.
+
+## 0.3.2
+
+* Updated show and show-off icons.
+
+## 0.3.1
+
+* Fixed input height not matching other components'.
+* Updated input's icons positions due to the input height change.
+* Fixed button height to not fill the whole available space.
+
+## 0.3.0
+
+* Empty State component is added to Storybook.
+
+## 0.2.2
+
+* Select and Multiselect options dropdown have a higher z-index.
+* Select and Multiselect can hide its label with `hideLabel` prop.
+* Select and Multiselect can load preselected options with `selected` prop.
+
+## 0.2.1
+
+* Colors have been updated due to accessibility issues.
+
+## 0.2.0
+
+* Sorting has been added to the CardsTableList component.
+
+BREAKING CHANGES
+
+* `columnId` prop is required from this version.
+* rows `data` prop has been renamed to `columns`.
+
+## 0.1.3
+
+Update left padding on the cells from CardsTableList component
+
+## 0.1.2
+
+Cards Table List component is added to Storybook with the following features:
+
+* Headers with icon
+* Cells text with default and bold styles
+* Highlight style for the first cell in a row
+* Row default, hover and disabled styles
+
+Changelog has been updated with all published versions.
+
+The order of the Docs stories has been updated.
+
+## 0.1.1
+
+The "required" property has been removed from Input and Select components.
+
+The "invalid" property has been created to manage error states.
+
+Styles unification has been applied on Select component.
+
+## 0.1.0
+
+Multiselect component is added to Storybook.
+
+Eye icon has been added to Input of type password on Storybook.
+
+Welcome and Docs pages have been added.
+
+Icon gallery has been added.
+
+Select component has been added.
+
+Input component has been added.

package/src/stories/Collapsible.stories.js

@@ -37,7 +37,14 @@ export default meta
 export const Primary = {
   render: () => (
     <Collapsible title="My personal data" name="personal-data">
-      <div style={{display: 'flex', flexDirection: 'column', width: '100%', gap: '1rem'}}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          gap: '1rem',
+        }}
+      >
         <Input
           accessibilityLabel="Fill the form name"
           helpText="This text can help you"
@@ -90,7 +97,14 @@ export const Primary = {
 export const PrimaryOpened = {
   render: () => (
     <Collapsible title="My personal data" name="personal-data" open>
-      <div style={{display: 'flex', flexDirection: 'column', width: '100%', gap: '1rem'}}>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          gap: '1rem',
+        }}
+      >
         <Input
           accessibilityLabel="Fill the form name"
           helpText="This text can help you"

package/src/stories/{Colors.stories.mdx → Colors.mdx}

@@ -1,14 +1,21 @@
-import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs";
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
 import styles from "../docs/colors.module.scss";
 
 <Meta title="Design System/Styles/Colors" />
+
 # Colours
+
 ## Elements
+
 <ColorPalette>
   <ColorItem title="Element 1" colors={{ "colors.$element1": styles.element1 }} />
+
   <ColorItem title="Element 2" colors={{ "colors.$element2": styles.element2 }} />
+
   <ColorItem title="Element 3" colors={{ "colors.$element3": styles.element3 }} />
+
   <ColorItem title="Element 4" colors={{ "colors.$element4": styles.element4 }} />
+
   <ColorItem
     title="Test"
     subtitle="All elements colours"

package/src/stories/{Icons.stories.mdx → Icons.mdx}

@@ -5,19 +5,18 @@ import * as Icons from '../icons'
 
 # Icons
 
-📁 You can find the source icons on this [link](https://groupeisagri.sharepoint.com/sites/Maya_Espana/Drive%20Agroptima/Forms/AllItems.aspx?id=%2Fsites%2FMaya%5FEspana%2FDrive%20Agroptima%2F06%20%2D%20DESIGN%2F01%2E%20Bodegas%2FDesign%20system%2FRecursos%2Ficons&viewid=c0618b1a%2Dc398%2D461b%2D85e6%2Df088fc5fee72).
+📁 You can find the source icons on this [link](https://groupeisagri.sharepoint.com/sites/Maya_Espana/Drive%20Agroptima/Forms/AllItems.aspx?id=%2Fsites%2FMaya%5FEspana%2FDrive%20Agroptima%2F06%20%2D%20DESIGN%2F01%2E%20Bodegas%2FDesign%20system%2FRecursos%2Ficons\&viewid=c0618b1a%2Dc398%2D461b%2D85e6%2Df088fc5fee72).
 
 ℹ️ If you need to edit the svgo default options, check this [link](https://stackoverflow.com/a/70360615).
 
-
 <IconGallery>
-{
-  Object.values(Icons).map((Icon) => {
-    return(
-      <IconItem name={Icon['name'].substring(3)}>
-        <Icon />
-      </IconItem>
-    )
-  })
-}
+  {
+    Object.values(Icons).map((Icon) => {
+      return(
+        <IconItem name={Icon['name'].substring(3)}>
+          <Icon />
+        </IconItem>
+      )
+    })
+  }
 </IconGallery>

package/src/stories/ProgrammersStartingGuide.mdx

@@ -0,0 +1,53 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Programmers start guide" />
+
+# Getting started guide for programmers
+
+## Indigo Project
+
+### Install agroptima-design-system dependency in beta mode
+
+This is suitable in order to check the Design System latest changes on Indigo Project without the need of publishing
+a new version on npm.
+
+- Download the desired Design System feature branch.
+- On the package.json, if the current version is `0.18.0` change it by `0.18.0-beta.1`.
+- On the Design System project terminal, run `npm run publish:beta`.
+- On the Indigo project terminal, run `npm i agroptima-design-system@beta`.
+- If you need to apply new changes to the Design System branch, increase the beta version like this `0.18.0-beta.2` and run the previous steps.
+
+The beta mode allows us to work comfortably between the 2 projects and applying new changes or feedback to the Design System components
+without the need of publishing it on npm.
+
+
+### Install agroptima-design-system dependency
+
+On the frontend project's package.json, you can see the `agroptima-design-system` dependency.
+
+After installing all the project dependencies, run `npm i agroptima-design-system@latest` to have the latest version
+of the design sytem package.
+
+### Import & use design system components
+
+Import the desired component:
+
+`import { Input } from 'agroptima-design-system/src/atoms/Button'`
+
+Use the desired component:
+
+```
+<Button
+    type="submit"
+    label="Login"
+    loading={isSubmitting}
+    variant="primary"
+/>
+```
+
+## Sioux Project
+
+We have been focused on creating prioritized components, learning how Storybook works and behaves, making the Design System independent
+from the Indigo project and checking the consumption of components from a single project.
+
+Once we reach the needed checkpoint, we'll continue the integration of the Design System with Sioux project.

package/src/stories/Typography.stories.js

@@ -15,12 +15,22 @@ const meta = {
 export default meta
 
 export const Typography = {
-  render: () => 
-  <div style={{fontStyle: '1rem', fontVariant: 'normal', fontWeight: 400, fontFamily:
-    'Noto Sans, sans-serif', color: '#444444FF', fontSize: '1rem', lineHeight: 'normal'}}>
-  <h1>Typography</h1>
-  <p>ℹ️ The typography defined styles can be checked on the Design tab.</p>
+  render: () => (
+    <div
+      style={{
+        fontStyle: '1rem',
+        fontVariant: 'normal',
+        fontWeight: 400,
+        fontFamily: 'Noto Sans, sans-serif',
+        color: '#444444FF',
+        fontSize: '1rem',
+        lineHeight: 'normal',
+      }}
+    >
+      <h1>Typography</h1>
+      <p>ℹ️ The typography defined styles can be checked on the Design tab.</p>
 
-  <p>On each component, you can check the typography styles live.</p>
-  </div>
+      <p>On each component, you can check the typography styles live.</p>
+    </div>
+  ),
 }

package/src/stories/{Welcome.stories.mdx → Welcome.mdx}

@@ -1,37 +1,38 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta } from "@storybook/blocks";
 
 <Meta title="Welcome" />
+
 # Welcome 👋
 
 ## Get started with our Design System
 
-The design system borns of the collaboration, teamwork and cocreation among <b>designers, programmers and product owners</b>. 
+The design system borns of the collaboration, teamwork and cocreation among <b>designers, programmers and product owners</b>.
 
 Together, we decide the components needed in our projects as well as the naming to be applied. This way, all departments
-speak the same language. 
+speak the same language.
 
 These decisions are portrayed on the Figma design system project which is considered <b>the only source of truth</b>.
 
-Storybook contains all the designed components built and ready to use for our React projects. It also works as a <b>showcase 
+Storybook contains all the designed components built and ready to use for our React projects. It also works as a <b>showcase
 of the agreed components</b> and styles designed on the Figma project, as well as a <b>live documentation for programmers</b>.
 
 ## Technologies
-- Figma
-- Storybook
-- Chromatic
-- React
-- SASS
+
+* Figma
+* Storybook
+* Chromatic
+* React
+* SASS
 
 ## Maintainers
 
 The design team is in charge of designing and developing the design system components, so they can be consumed on the needed projects.
-Laura is responsible of the design part and Vero of the development part. 
+Laura is responsible of the design part and Vero of the development part.
 
 If you have any questions, proposals, needs or issues, don't hesitate to contact them. You can ping them on slack #dev-design channel.
 
 ## How to report issues
 
-You can report an issue on the [Issues section](https://github.com/agroptima/design-system/issues) of the design system repo. 
+You can report an issue on the [Issues section](https://github.com/agroptima/design-system/issues) of the design system repo.
 
 Contact with the responsibles of the project to make them aware of the reported issue.
-

package/src/stories/Workflow.mdx

@@ -0,0 +1,55 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Component creation workflow" />
+
+# Component creation workflow
+
+## Style properties conditioned by variants
+
+The following properties are the ones which will change depending on the variant provided:
+
+* Font family
+* Border radius
+* Colours: Except Error and Success variants colours which are common for all themes
+
+## How does the Design Team work
+
+🌈  <b>The Figma design system is the only source of truth and the collaboration, teamwork and regard among
+Designers, Programmers and Product Owners</b> 🌈
+
+* All components, variants and states must be designed on the Figma file and consumed by our projects.
+
+* At the code projects <b>we must not imply any component property because of the
+  existence of a similar component variant</b>: If you find something missing on the Figma file, ask for it to the design team.
+  The designer will be glad to add it.
+
+* The animations won’t be part of the design system, preferably, they will be added through code libraries or done manually
+  by the programmers. Nevertheless, if needed, the designer will be happy to prepare a new Figma document with the components
+  animation behaviour.
+
+* When defining new aliases or variables names of the components in the code, take into account the recommended nomenclature
+  shown on this [template](https://groupeisagri-my.sharepoint.com/:x:/p/vvalls/EVaZh6_UNHdGqUuulxvTdbIBXuZKUkW1SvF6vPenbkr8AQ?e=rKb81D).
+
+* We recommend to work with the VScode editor where you can use the [Figma VS code plugin](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
+  to check the designs and copy the components styles and links.
+
+* A design task is created where Laura creates and finishes a component on the Figma design system.
+
+* When a component is ready on the Figma design system, a design team programmer can begin the task to add it to the Storybook code project.
+  When the component is ready on Storybook, it can be consumed on the needed project on a new task because of the
+  design system being on an independent repo. 
+  
+  We can use the beta mode in order to work comfortably between the Design System and the frontend
+  project, check the Programmer Start Guide for more information.
+
+* Each component story defined on Storybook will have the preview of its Figma design on the [Design tab](https://storybook.js.org/docs/sharing/design-integrations#view-designs-in-storybook).
+
+* When the component is finished on Storybook code project, the task will be deployed to Chromatic.
+  On Jira, it will move to the Design System column, so the designer reviews that everything is ok.
+
+* The accessibility tab which shows issues related with the design of the component will be reviewed by the designer.
+  The design team programmers also need to keep an eye on this when setting aria properties.
+
+* When the designer gives us the ok, it will follow the common Jira workflow, so it will move to In Consensus to review the code.
+
+* When the code is reviewed and merged, a new release version will be automatically published on [npm](https://www.npmjs.com/package/agroptima-design-system).

package/tests/a11y.spec.tsx

@@ -9,7 +9,7 @@ expect.extend(toHaveNoViolations)
 const stories = Object.values(components).map((component) => {
   return {
     title: component.default.title,
-    stories: composeStories(component),
+    stories: composeStories(component as any),
   }
 })
 

package/src/stories/Changelog.stories.mdx

@@ -1,188 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="Changelog" />
-# Changelog
-
-## 0.18.2
-- Add link to CardMenuOption component
-- Add active and error state to CardMenuOption component
-- Add active state to Card component
-- Update QuantitySelector component props
-- Add active and action state to CardsTableRow component
-
-## 0.18.0
-- Added Collapsible component to Storybook
-
-## 0.17.0
-- Added QuantitySelector component to Storybook
-
-## 0.16.2
-- Fixed some icons missing ViewBox
-
-## 0.16.1
-- Updated Oultined Button background color
-- Added new icons
-- Added fix to Alert component button
-- Fixed responsive glitch bug on CardsTable components
-
-## 0.16.0
-- Added new shape for FloatingButton component
-
-## 0.15.0
-- Added FloatingButton component to Storybook
-
-BREAKING CHANGES
-- All button components have been moved to a common folder
-
-## 0.14.1
-- Added MenuLink and MenuDropdown components to Storybook and remove MenuOption component.
-
-## 0.14.0
-- Added Menu component to Storybook.
-
-## 0.13.0
-- Added CardMenuOption component to Storybook.
-
-## 0.12.0
-- Card component is added to Storybook.
-
-## 0.11.1
-- Input and Checkbox components `id` prop now it's optional.
-- Fixed TextArea export component.
-
-## 0.11.0
-- Added TextArea component to Storybook.
-- Input, Checkbox and TextArea components `id` prop now is obtained from `id` or `name`.
-
-## 0.10.0
-
-- Cards Table components now are responsive.
-- Added Link style to Typography.
-
-## 0.9.3
-
-- Fix alert component width.
-
-## 0.9.2
-
-- Alert component can be rendered with fit-content width or 100% depending on the container.
-
-## 0.9.1
-
-- Modal and Alert components position fixed has been added.
-- Modal show/hide logic has been removed.
-
-## 0.9.0
-
-- Alert component is added to Storybook.
-
-## 0.8.0
-
-- Badge component is added to Storybook.
-- IconButton and Button have the default cursor on both link and button versions.
-
-## 0.7.0
-
-- Modal component is added to Storybook.
-- Typography styles are added to Storybook.
-
-## 0.6.1
-
-- Fixed error type in onChange select props.
-- Added check types to CI.
-
-## 0.6.0
-
-Checkbox component is added to Storybook.
-
-## 0.5.0
-
-- IconButton component is added to Storybook.
-- Edit and Delete icons have been added.
-- Button outlined disabled styles have been changed to make them look the same as the filled disabled styles.
-- `accessibilityLabel` specific prop has been added as optional to Button, Input, Select and Multiselect components.
-- Select and Multiselect can be closed too when losing focus.
-- Select and Multiselect accept native props.
-- Select component triggers `onChange` event prop.
-
-BREAKING CHANGES
-- Input, Select and Multiselect components accept an `errors` array prop. Previous `invalid` prop is deprecated.
-
-## 0.4.0
-
-- CardsTable component suitable to create custom tables is added to Storybook.
-- Cell `align` property has been added to CardsTableCell component.
-- Cell `noWrap` property has been added to CardsTableCell component.
-- Button component can be rendered as NextLink if the `href` prop is provided.
-- Empty State component now accepts Button props.
-
-## 0.3.2
-
-- Updated show and show-off icons.
-
-## 0.3.1
-
-- Fixed input height not matching other components'.
-- Updated input's icons positions due to the input height change.
-- Fixed button height to not fill the whole available space.
-
-## 0.3.0
-
-- Empty State component is added to Storybook.
-
-## 0.2.2
-
-- Select and Multiselect options dropdown have a higher z-index.
-- Select and Multiselect can hide its label with `hideLabel` prop.
-- Select and Multiselect can load preselected options with `selected` prop.
-
-## 0.2.1
-
-- Colors have been updated due to accessibility issues.
-
-## 0.2.0
-
-- Sorting has been added to the CardsTableList component.
-
-BREAKING CHANGES
-- `columnId` prop is required from this version.
-- rows `data` prop has been renamed to `columns`.
-
-## 0.1.3
-
-Update left padding on the cells from CardsTableList component
-
-## 0.1.2
-
-Cards Table List component is added to Storybook with the following features:
-
-- Headers with icon
-- Cells text with default and bold styles
-- Highlight style for the first cell in a row
-- Row default, hover and disabled styles
-
-Changelog has been updated with all published versions.
-
-The order of the Docs stories has been updated.
-
-## 0.1.1
-
-The "required" property has been removed from Input and Select components.
-
-The "invalid" property has been created to manage error states.
-
-Styles unification has been applied on Select component.
-
-## 0.1.0
-
-Multiselect component is added to Storybook.
-
-Eye icon has been added to Input of type password on Storybook.
-
-Welcome and Docs pages have been added.
-
-Icon gallery has been added.
-
-Select component has been added.
-
-Input component has been added.

package/src/stories/ProgrammersStartingGuide.stories.mdx

@@ -1,38 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="Programmers start guide" />
-# Getting started guide for programmers
-
-## Indigo Project
-
-### Install agroptima-design-system dependency
-
-On the frontend project's package.json, you can see the `agroptima-design-system` dependency.
-
-After installing all the project dependencies, run `npm i agroptima-design-system@latest` to have the latest version 
-of the design sytem package.
-
-### Import & use design system components
-
-Import the desired component:
-
-`import { Input } from 'agroptima-design-system/src/atoms/Button'`
-
-Use the desired component:
-
-```
-<Button
-    type="submit"
-    label="Login"
-    loading={isSubmitting}
-    variant="primary"
-/>
-```
-
-
-## Sioux Project
-
-We have been focused on creating prioritized components, learning how Storybook works and behaves, making the Design System independent 
-from the Indigo project and checking the consumption of components from a single project.
-
-Once we reach the needed checkpoint, we'll continue the integration of the Design System with Sioux project. 

package/src/stories/Workflow.stories.mdx

@@ -1,54 +0,0 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta title="Component creation workflow" />
-# Component creation workflow
-
-## Style properties conditioned by variants
-
-The following properties are the ones which will change depending on the variant provided:
-
-- Font family
-- Border radius
-- Colours: Except Error and Success variants colours which are common for all themes
-
-## How does the Design Team work
-
-🌈  <b>The Figma design system is the only source of truth and the collaboration, teamwork and regard among 
-Designers, Programmers and Product Owners</b> 🌈
-
-- All components, variants and states must be designed on the Figma file and consumed by our projects. 
-
-- At the code projects <b>we must not imply any component property because of the 
-existence of a similar component variant</b>: If you find something missing on the Figma file, ask for it to the design team. 
-The designer will be glad to add it.
-
-- The animations won’t be part of the design system, preferably, they will be added through code libraries or done manually 
-by the programmers. Nevertheless, if needed, the designer will be happy to prepare a new Figma document with the components 
-animation behaviour.
-
-- When defining new aliases or variables names of the components in the code, take into account the recommended nomenclature 
-shown on this [template](https://groupeisagri-my.sharepoint.com/:x:/p/vvalls/EVaZh6_UNHdGqUuulxvTdbIBXuZKUkW1SvF6vPenbkr8AQ?e=rKb81D).
-
-- We recommend to work with the VScode editor where you can use the [Figma VS code plugin](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) 
-to check the designs and copy the components styles and links.
-
-- A design task is created where Laura creates and finishes a component on the Figma design system.
-
-- When a component is ready on the Figma design system, a design team programmer can begin the task to add it to the Storybook code project. 
-When the component is ready on Storybook, it can be consumed on the needed project on a new task because of the 
-design system being on an independent repo.
-
-- Each component story defined on Storybook will have the preview of its Figma design on the [Design tab](https://storybook.js.org/docs/sharing/design-integrations#view-designs-in-storybook).
-<img width='70%' src='https://storybook.js.org/25231d61af791e6586689324e02460e3/design-addon-panel.png'/>
-
-- When the component is finished on Storybook code project, the task will be deployed to Chromatic. 
-On Jira, it will move to the Design System column, so the designer reviews that everything is ok.
-
-- The accessibility tab which shows issues related with the design of the component will be reviewed by the designer. 
-The design team programmers also need to keep an eye on this when setting aria properties.
-<img width='80%' src='https://storybook.js.org/2920682a0a74969419ca80ef277ffdca/storybook-a11y-addon-optimized.png' />
-
-- When the designer gives us the ok, it will follow the common Jira workflow, so it will move to In Consensus to review the code.
-
-
-