agroptima-design-system 0.1.3 → 0.2.1

package/.github/workflows/design-system-deploy-production.yaml

@@ -15,7 +15,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install dependencies and build
         run: |

package/.github/workflows/publish-package-to-npmjs.yml

@@ -0,0 +1,21 @@
+name: Publish Package to npmjs
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/run-linters.yml

@@ -12,16 +12,16 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-    - name: Setup Node
-      uses: actions/setup-node@v3
-      with:
-        node-version: 18.x
-        cache: 'npm'
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'npm'
 
-    - name: Install dependencies
-      run: npm install
+      - name: Install dependencies
+        run: npm install
 
-    - name: Lint
-      run: npm run lint
+      - name: Lint
+        run: npm run lint

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.1.3",
+  "version": "0.2.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -8,7 +8,8 @@
     "build-storybook": "storybook build",
     "lint": "eslint",
     "lint:fix": "eslint src --fix",
-    "publish-chromatic": "npx chromatic --exit-zero-on-changes"
+    "publish-chromatic": "npx chromatic --exit-zero-on-changes",
+    "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "@storybook/addon-designs": "^7.0.5",
@@ -49,7 +50,9 @@
   "keywords": [
     "design-system"
   ],
-  "author": "Isagri",
+  "author": {
+    "name": "Isagri"
+  },
   "license": "MPL-2.0",
   "bugs": {
     "url": "https://github.com/agroptima/design-system/issues"

package/src/atoms/Button.scss

@@ -6,20 +6,20 @@
   &.primary,
   &.primary-outlined,
   &.primary-ghost {
-    --color-bg: #{color_alias.$primary-color-1000};
-    --color-bg-hover: #{color_alias.$primary-color-700};
+    --color-bg: #{color_alias.$primary-color-600};
+    --color-bg-hover: #{color_alias.$primary-color-1000};
     --color-bg-hover-outlined: #{color_alias.$primary-color-50};
     --color-fg: #{color_alias.$neutral-white};
-    --color-fg-reversed: #{color_alias.$primary-color-1000};
+    --color-fg-reversed: #{color_alias.$primary-color-600};
   }
   &.error,
   &.error-outlined,
   &.error-ghost {
-    --color-bg: #{color_alias.$error-color-1000};
-    --color-bg-hover: #{color_alias.$error-color-700};
+    --color-bg: #{color_alias.$error-color-600};
+    --color-bg-hover: #{color_alias.$error-color-900};
     --color-bg-hover-outlined: #{color_alias.$error-color-50};
     --color-fg: #{color_alias.$neutral-white};
-    --color-fg-reversed: #{color_alias.$error-color-1000};
+    --color-fg-reversed: #{color_alias.$error-color-600};
   }
   &.success,
   &.success-outlined,
@@ -27,7 +27,7 @@
     --color-bg: #{color_alias.$success-color-1000};
     --color-bg-hover: #{color_alias.$success-color-700};
     --color-bg-hover-outlined: #{color_alias.$success-color-50};
-    --color-fg: #{color_alias.$neutral-white};
+    --color-fg: #{color_alias.$neutral-color-900};
     --color-fg-reversed: #{color_alias.$success-color-1000};
   }
   &.warning,
@@ -36,17 +36,17 @@
     --color-bg: #{color_alias.$warning-color-1000};
     --color-bg-hover: #{color_alias.$warning-color-700};
     --color-bg-hover-outlined: #{color_alias.$warning-color-50};
-    --color-fg: #{color_alias.$neutral-white};
+    --color-fg: #{color_alias.$neutral-color-900};
     --color-fg-reversed: #{color_alias.$warning-color-1000};
   }
   &.info,
   &.info-outlined,
   &.info-ghost {
-    --color-bg: #{color_alias.$info-color-1000};
-    --color-bg-hover: #{color_alias.$info-color-700};
+    --color-bg: #{color_alias.$info-color-600};
+    --color-bg-hover: #{color_alias.$info-color-900};
     --color-bg-hover-outlined: #{color_alias.$info-color-50};
     --color-fg: #{color_alias.$neutral-white};
-    --color-fg-reversed: #{color_alias.$info-color-1000};
+    --color-fg-reversed: #{color_alias.$info-color-600};
   }
   &.neutral,
   &.neutral-outlined,
@@ -87,41 +87,67 @@
   &:not(:disabled):hover,
   &:not(:disabled):active {
     background: var(--color-bg-hover);
+
+    &.success,
+    &.warning {
+      color: color_alias.$neutral-white;
+      svg,
+      svg path {
+        fill: color_alias.$neutral-white;
+      }
+    }
   }
 
   &:disabled {
-    background: color_alias.$neutral-color-200;
-    color: var(--color-fg-disabled, var(--color-fg));
+    background: color_alias.$neutral-color-50;
+    color: color_alias.$neutral-color-400;
     svg,
     svg path {
-      fill: var(--color-fg-disabled, var(--color-fg));
+      fill: color_alias.$neutral-color-400;
     }
   }
 
   &.primary-outlined,
   &.error-outlined,
-  &.success-outlined,
-  &.warning-outlined,
   &.info-outlined,
   &.neutral-outlined {
     background: color_alias.$neutral-white;
-    color: var(--color-fg-reversed);
+    color: var(--color-bg);
     border: 1px solid var(--color-bg);
     svg,
     svg path {
-      fill: var(--color-fg-reversed);
+      fill: var(--color-bg);
+    }
+  }
+
+  &.success-outlined,
+  &.warning-outlined {
+    background: color_alias.$neutral-white;
+    color: var(--color-fg);
+    border: 1px solid var(--color-bg);
+    svg,
+    svg path {
+      fill: var(--color-fg);
     }
+  }
+
+  &.primary-outlined,
+  &.error-outlined,
+  &.success-outlined,
+  &.warning-outlined,
+  &.info-outlined,
+  &.neutral-outlined {
     &:not(:disabled):hover,
     &:not(:disabled):active {
       background: var(--color-bg-hover-outlined);
     }
     &:disabled {
       background: color_alias.$neutral-color-50;
-      border: 1px solid color_alias.$neutral-color-200;
-      color: color_alias.$neutral-color-300;
+      border: 1px solid color_alias.$neutral-color-400;
+      color: color_alias.$neutral-color-400;
       svg,
       svg path {
-        fill: color_alias.$neutral-color-300;
+        fill: color_alias.$neutral-color-400;
       }
     }
   }
@@ -144,10 +170,10 @@
       border: 1px solid var(--color-bg);
     }
     &:disabled {
-      color: color_alias.$neutral-color-300;
+      color: color_alias.$neutral-color-400;
       svg,
       svg path {
-        fill: color_alias.$neutral-color-300;
+        fill: color_alias.$neutral-color-400;
       }
     }
   }

package/src/atoms/CardsTableList.scss

@@ -29,6 +29,10 @@
     white-space: nowrap;
     text-align: left;
 
+    &.sortable {
+      cursor: pointer;
+    }
+
     .icon {
       width: config.$icon-size-3x;
       height: config.$icon-size-3x;
@@ -50,7 +54,7 @@
     }
 
     th {
-      background: color_alias.$primary-color-600;
+      background: color_alias.$primary-color-1000;
 
       .icon {
         > svg {
@@ -59,6 +63,28 @@
             fill: color_alias.$neutral-white;
           }
         }
+
+        &.ascending {
+          > svg {
+            .sorter_svg__up {
+              fill: color_alias.$primary-color-600;
+            }
+            .sorter_svg__down {
+              fill: color_alias.$neutral-white;
+            }
+          }
+        }
+
+        &.descending {
+          > svg {
+            .sorter_svg__up {
+              fill: color_alias.$neutral-white;
+            }
+            .sorter_svg__down {
+              fill: color_alias.$primary-color-600;
+            }
+          }
+        }
       }
     }
 

package/src/atoms/CardsTableList.tsx

@@ -1,12 +1,30 @@
 import './CardsTableList.scss'
-import { Icon, IconType } from './Icon'
+import React, { useState } from 'react'
+import { sortBy } from '../utils/sort'
+import { IconType } from './Icon'
+import { CardsTableListHeader } from './CardsTableListHeader'
+import { CardsTableListRow } from './CardsTableListRow'
 
 export type Variant = 'primary'
-export type Header = { label: string; icon?: IconType }
-export type Data = {
+
+export type Header = {
+  label: string
+  icon?: IconType
+  columnId: string
+  isSortable?: boolean
+}
+export type Column = {
   [key: string]: string
 }
-export type Row = { id: string; isDisabled: boolean; data: Data }
+export type Row = { id: string; isDisabled?: boolean; columns: Column }
+
+export enum Order {
+  Ascending = 'ascending',
+  Descending = 'descending',
+  None = 'none',
+}
+
+export type SortState = { columnId: string; order: Order }
 
 export interface CardsTableListProps
   extends React.ComponentPropsWithoutRef<'table'> {
@@ -21,48 +39,59 @@ export function CardsTableList({
   summary,
   variant = 'primary',
 }: CardsTableListProps): React.JSX.Element {
+  const [sortState, setSortState] = useState<SortState | null>(() => {
+    return headers[0]?.isSortable
+      ? { columnId: headers[0].columnId, order: Order.Ascending }
+      : null
+  })
+
   const cssClasses = ['cards-table-list', variant].join(' ')
 
+  function checkColumnOrder(columnId: string) {
+    if (sortState?.columnId === columnId) {
+      return sortState.order
+    }
+    return Order.None
+  }
+
+  function applySort(columnId: string) {
+    if (!headers.find((header) => header.columnId === columnId)?.isSortable) {
+      return
+    }
+
+    setSortState({
+      columnId,
+      order:
+        checkColumnOrder(columnId) === Order.Ascending
+          ? Order.Descending
+          : Order.Ascending,
+    })
+  }
+  const sortedRows = sortState?.columnId
+    ? sortBy({
+        rows,
+        prop: sortState?.columnId,
+        order: sortState?.order,
+      })
+    : rows
   return (
     <table summary={summary} role="table" className={cssClasses}>
       <thead role="rowgroup">
         <tr role="row">
-          {headers.map((header) => {
-            const { icon } = header
-            return (
-              <th
-                scope="col"
-                role="columnheader"
-                className="header"
-                key={header.label}
-              >
-                <div className="container">
-                  <div className="title-container">
-                    <span>{header.label}</span>
-                    {icon && <Icon name={icon} />}
-                  </div>
-                </div>
-              </th>
-            )
-          })}
+          {headers.map((header) => (
+            <CardsTableListHeader
+              key={header.columnId}
+              header={header}
+              order={checkColumnOrder(header.columnId)}
+              onClick={() => applySort(header.columnId)}
+            />
+          ))}
         </tr>
       </thead>
       <tbody role="rowgroup">
-        {rows.map((row) => {
-          const { data, isDisabled } = row
-          const disabledClass = isDisabled ? 'disabled' : ''
-          return (
-            <tr role="row" className={`row ${disabledClass}`} key={row.id}>
-              {Object.getOwnPropertyNames(data).map((property) => {
-                return (
-                  <td role="cell" key={row.id + property} className="cell">
-                    {data[property]}
-                  </td>
-                )
-              })}
-            </tr>
-          )
-        })}
+        {sortedRows.map((row: Row) => (
+          <CardsTableListRow key={row.id} {...row} />
+        ))}
       </tbody>
     </table>
   )

package/src/atoms/CardsTableListHeader.tsx

@@ -0,0 +1,32 @@
+import { Icon } from './Icon'
+import { Header, Order } from './CardsTableList'
+
+export interface CardsTableListHeaderProps {
+  header: Header
+  order: Order
+  onClick: () => void
+}
+
+export function CardsTableListHeader({
+  header,
+  order,
+  onClick,
+}: CardsTableListHeaderProps) {
+  return (
+    <th
+      scope="col"
+      role="columnheader"
+      className={`header ${header.isSortable ? 'sortable' : ''}`}
+      aria-sort={order}
+      onClick={onClick}
+    >
+      <div className="container">
+        <div className="title-container">
+          <span>{header.label}</span>
+          {header.icon && <Icon name={header.icon} />}
+        </div>
+        {header.isSortable && <Icon name="Sorter" className={order} />}
+      </div>
+    </th>
+  )
+}

package/src/atoms/CardsTableListRow.tsx

@@ -0,0 +1,15 @@
+import { Row } from './CardsTableList'
+
+export function CardsTableListRow({ isDisabled, columns, id }: Row) {
+  const disabledClass = isDisabled ? 'disabled' : ''
+  const cells = Object.entries(columns)
+  return (
+    <tr role="row" className={`row ${disabledClass}`}>
+      {cells.map(([columnId, value]) => (
+        <td role="cell" key={`${id}${columnId}`} className="cell">
+          {value}
+        </td>
+      ))}
+    </tr>
+  )
+}

package/src/atoms/Input.scss

@@ -21,9 +21,18 @@
     .input-container {
       .icon {
         > svg {
-          fill: color_alias.$neutral-color-300;
+          fill: color_alias.$neutral-color-400;
           path {
-            fill: color_alias.$neutral-color-300;
+            fill: color_alias.$neutral-color-400;
+          }
+        }
+      }
+
+      .password-icon {
+        > svg {
+          fill: color_alias.$neutral-color-600;
+          path {
+            fill: color_alias.$neutral-color-600;
           }
         }
       }
@@ -31,7 +40,7 @@
 
     .input {
       border-radius: config.$corner-radius-m;
-      border: 1px solid color_alias.$neutral-color-300;
+      border: 1px solid color_alias.$neutral-color-400;
       background: color_alias.$neutral-white;
 
       @include typography.input-text;
@@ -41,8 +50,8 @@
       }
 
       &:focus {
-        outline: color_alias.$primary-color-1000;
-        border: 1px solid color_alias.$primary-color-1000;
+        outline: color_alias.$primary-color-600;
+        border: 1px solid color_alias.$primary-color-600;
       }
 
       &.invalid {
@@ -50,12 +59,12 @@
       }
 
       &:disabled {
-        border: 1px solid color_alias.$neutral-color-200;
+        border: 1px solid color_alias.$neutral-color-400;
         background: color_alias.$neutral-color-50;
-        color: color_alias.$neutral-color-200;
+        color: color_alias.$neutral-color-400;
 
         &::placeholder {
-          color: color_alias.$neutral-color-200;
+          color: color_alias.$neutral-color-400;
         }
       }
     }

package/src/atoms/Multiselect.scss

@@ -20,15 +20,15 @@
 
     .selected-option {
       border-radius: config.$corner-radius-m;
-      border: 1px solid color_alias.$neutral-color-300;
+      border: 1px solid color_alias.$neutral-color-600;
       background: color_alias.$neutral-white;
       @include typography.select-text;
 
       > .icon {
         > svg {
-          fill: color_alias.$primary-color-1000;
+          fill: color_alias.$primary-color-600;
           path {
-            fill: color_alias.$primary-color-1000;
+            fill: color_alias.$primary-color-600;
           }
         }
       }
@@ -38,8 +38,8 @@
       }
 
       &:focus {
-        outline: color_alias.$primary-color-1000;
-        border: 1px solid color_alias.$primary-color-1000;
+        outline: color_alias.$primary-color-600;
+        border: 1px solid color_alias.$primary-color-600;
       }
 
       &.invalid {
@@ -47,15 +47,15 @@
       }
 
       &.disabled {
-        border: 1px solid color_alias.$neutral-color-200;
+        border: 1px solid color_alias.$neutral-color-400;
         background: color_alias.$neutral-color-50;
-        color: color_alias.$neutral-color-200;
+        color: color_alias.$neutral-color-400;
 
         > .icon {
           > svg {
-            fill: color_alias.$neutral-color-200;
+            fill: color_alias.$neutral-color-400;
             path {
-              fill: color_alias.$neutral-color-200;
+              fill: color_alias.$neutral-color-400;
             }
           }
         }
@@ -82,10 +82,13 @@
           > svg {
             border-radius: config.$corner-radius-xxs;
             .checkbox-active_svg__border {
-              fill: color_alias.$primary-color-1000;
+              fill: color_alias.$primary-color-600;
+            }
+            .checkbox-active_svg__background {
+              fill: color_alias.$primary-color-600;
             }
             .checkbox-inactive_svg__border {
-              fill: color_alias.$neutral-color-300;
+              fill: color_alias.$neutral-color-600;
             }
           }
         }

package/src/atoms/Select.scss

@@ -20,15 +20,15 @@
 
     .selected-option {
       border-radius: config.$corner-radius-m;
-      border: 1px solid color_alias.$neutral-color-300;
+      border: 1px solid color_alias.$neutral-color-600;
       background: color_alias.$neutral-white;
       @include typography.select-text;
 
       > .icon {
         > svg {
-          fill: color_alias.$primary-color-1000;
+          fill: color_alias.$primary-color-600;
           path {
-            fill: color_alias.$primary-color-1000;
+            fill: color_alias.$primary-color-600;
           }
         }
       }
@@ -38,8 +38,8 @@
       }
 
       &:focus {
-        outline: color_alias.$primary-color-1000;
-        border: 1px solid color_alias.$primary-color-1000;
+        outline: color_alias.$primary-color-600;
+        border: 1px solid color_alias.$primary-color-600;
       }
 
       &.invalid {
@@ -47,15 +47,15 @@
       }
 
       &.disabled {
-        border: 1px solid color_alias.$neutral-color-200;
+        border: 1px solid color_alias.$neutral-color-400;
         background: color_alias.$neutral-color-50;
-        color: color_alias.$neutral-color-200;
+        color: color_alias.$neutral-color-400;
 
         > .icon {
           > svg {
-            fill: color_alias.$neutral-color-200;
+            fill: color_alias.$neutral-color-400;
             path {
-              fill: color_alias.$neutral-color-200;
+              fill: color_alias.$neutral-color-400;
             }
           }
         }

package/src/settings/_typography.scss

@@ -19,7 +19,7 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
   font-variant: $text-base-style;
   font-weight: 300;
   font-family: $font-base-family;
-  color: color_alias.$neutral-color-400;
+  color: color_alias.$neutral-color-600;
   // We need to apply a relation between font-size and line-height so the box envoloping the span
   // is the most accurate in terms of top and bottom blank space.
   font-size: 0.75rem;
@@ -37,7 +37,7 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
   font-variant: $text-base-style;
   font-weight: 400;
   font-family: $font-base-family;
-  color: color_alias.$neutral-color-300;
+  color: color_alias.$neutral-color-400;
   // We shouldn't define a font-size for the placeholder: https://stackoverflow.com/questions/30916387/placeholder-font-size-bigger-than-16px
 }
 @mixin select-text {

package/src/stories/Button.stories.ts

@@ -98,6 +98,7 @@ export const PrimaryWithLeftIcon: Story = {
 export const PrimaryOutlined: Story = {
   args: {
     variant: 'primary-outlined',
+    disabled: false,
   },
   parameters: figmaPrimaryDesign,
 }
@@ -105,6 +106,7 @@ export const PrimaryOutlined: Story = {
 export const PrimaryGhost: Story = {
   args: {
     variant: 'primary-ghost',
+    disabled: false,
   },
   parameters: figmaPrimaryDesign,
 }
@@ -112,6 +114,7 @@ export const PrimaryGhost: Story = {
 export const Neutral: Story = {
   args: {
     variant: 'neutral',
+    disabled: false,
   },
   parameters: figmaNeutralDesign,
 }
@@ -119,6 +122,7 @@ export const Neutral: Story = {
 export const Error: Story = {
   args: {
     variant: 'error',
+    disabled: false,
   },
   parameters: figmaErrorDesign,
 }
@@ -126,6 +130,7 @@ export const Error: Story = {
 export const Success: Story = {
   args: {
     variant: 'success',
+    disabled: false,
   },
   parameters: figmaSuccessDesign,
 }
@@ -133,6 +138,7 @@ export const Success: Story = {
 export const Warning: Story = {
   args: {
     variant: 'warning',
+    disabled: false,
   },
   parameters: figmaWarningDesign,
 }
@@ -140,6 +146,7 @@ export const Warning: Story = {
 export const Info: Story = {
   args: {
     variant: 'info',
+    disabled: false,
   },
   parameters: figmaInfoDesign,
 }

package/src/stories/CardsTableList.stories.ts

@@ -14,7 +14,8 @@ const meta = {
         'Summary of the table purpose and structure for assistive technologies',
     },
     headers: {
-      description: 'Array of values to be displayed on the headers',
+      description:
+        'Array of values to be displayed on the headers. columnId value must match with rows columns ids.',
     },
     rows: {
       description: 'Array of values to be displayed as the data',
@@ -32,7 +33,64 @@ const figmaPrimaryDesign = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Primary: Story = {
+export const WithSorting: Story = {
+  args: {
+    variant: 'primary',
+    summary: 'Videogames companies contact information',
+    headers: [
+      {
+        label: 'Game title',
+        icon: 'Info',
+        columnId: 'name',
+        isSortable: true,
+      },
+      {
+        label: 'Company address',
+        icon: 'Info',
+        columnId: 'address',
+        isSortable: false,
+      },
+      {
+        label: 'Customer service email',
+        columnId: 'email',
+        icon: 'Info',
+        isSortable: true,
+      },
+    ],
+    rows: [
+      {
+        id: '1',
+        columns: {
+          name: 'Metal Gear Solid 5: The Phantom Pain',
+          address:
+            'Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku, Tokyo, 104-0061 Japan',
+          email: 'konami@fakemail.com',
+        },
+      },
+      {
+        id: '2',
+        columns: {
+          name: 'The Witcher 3',
+          address: 'CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland',
+          email: 'cdprojekt@fakemail.com',
+        },
+      },
+      {
+        id: '3',
+        isDisabled: true,
+        columns: {
+          name: 'Tekken 8',
+          address:
+            'Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo 135-0034, Japan',
+          email: 'namco@fakemail.com',
+        },
+      },
+    ],
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const NoSorting: Story = {
   args: {
     variant: 'primary',
     summary: 'Videogames companies contact information',
@@ -40,18 +98,23 @@ export const Primary: Story = {
       {
         label: 'Game title',
         icon: 'Info',
+        columnId: 'name',
+      },
+      {
+        label: 'Company address',
+        icon: 'Info',
+        columnId: 'address',
       },
-      { label: 'Company address' },
       {
         label: 'Customer service email',
+        columnId: 'email',
         icon: 'Info',
       },
     ],
     rows: [
       {
         id: '1',
-        isDisabled: false,
-        data: {
+        columns: {
           name: 'Metal Gear Solid 5: The Phantom Pain',
           address:
             'Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku, Tokyo, 104-0061 Japan',
@@ -60,8 +123,7 @@ export const Primary: Story = {
       },
       {
         id: '2',
-        isDisabled: false,
-        data: {
+        columns: {
           name: 'The Witcher 3',
           address: 'CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland',
           email: 'cdprojekt@fakemail.com',
@@ -70,7 +132,7 @@ export const Primary: Story = {
       {
         id: '3',
         isDisabled: true,
-        data: {
+        columns: {
           name: 'Tekken 8',
           address:
             'Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo 135-0034, Japan',

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,18 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 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

package/src/stories/Icons.stories.mdx

@@ -5,6 +5,11 @@ import * as Icons from '../icons'
 
 # Icons
 
+📁 You can find the source icons on this [link]( https://drive.google.com/drive/folders/16L5iR5KnDP9kfeCF-mDU0C0LiJZi0cwi).
+
+ℹ️ If you need to edit the svgo default options, check this [link](https://stackoverflow.com/a/70360615).
+
+
 <IconGallery>
 {
   Object.values(Icons).map((Icon) => {

package/src/stories/ProgrammersStartingGuide.stories.mdx

@@ -3,4 +3,36 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Programmers start guide" />
 # Getting started guide for programmers
 
-WIP
+## 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/Select.stories.ts

@@ -15,8 +15,8 @@ const meta = {
     disabled: {
       description: 'Is the select in disabled state?',
     },
-    required: {
-      description: 'Is the select in required state?',
+    invalid: {
+      description: 'Is the select in disabled state?',
     },
     helpText: {
       description: 'Optional help text',
@@ -47,7 +47,7 @@ export const Primary: Story = {
   args: {
     variant: 'primary',
     disabled: false,
-    required: false,
+    invalid: false,
     helpText: 'This text can help you',
     name: 'example',
     label: 'Videogames',

package/src/stories/Welcome.stories.mdx

@@ -31,3 +31,7 @@ If you have any questions, proposals, needs or issues, don't hesitate to contact
 
 ## 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. 
+
+Contact with the responsibles of the project to make them aware of the reported issue.
+

package/src/stories/Workflow.stories.mdx

@@ -3,6 +3,14 @@ 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 

package/src/utils/sort.ts

@@ -0,0 +1,31 @@
+import { Order, Row } from '../atoms/CardsTableList'
+
+interface Parse {
+  (x: string): string
+}
+
+export interface Sort {
+  rows: Row[]
+  prop: string
+  order: string
+  parse?: Parse
+}
+
+export function sortBy({
+  rows,
+  prop,
+  order = Order.Ascending,
+  parse = (x) => x,
+}: Sort) {
+  const sortOrder = order === Order.Descending ? -1 : 1
+  return rows.sort((a: Row, b: Row) => {
+    let result = 0
+    if (parse(a.columns[prop]) < parse(b.columns[prop])) {
+      result = -1
+    }
+    if (parse(a.columns[prop]) > parse(b.columns[prop])) {
+      result = 1
+    }
+    return result * sortOrder
+  })
+}