agroptima-design-system 0.9.3 → 0.11.0

package/.storybook/main.ts

@@ -52,6 +52,13 @@ const config: StorybookConfig = {
       imageRule['exclude'] = /\.svg$/i
     }
 
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': resolve(__dirname, '../src'),
+      }
+    }
+
     return config
   },
 }

package/package.json

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

package/src/atoms/Alert.scss

@@ -10,6 +10,7 @@
   align-items: center;
   gap: config.$space-2x;
   border-radius: config.$corner-radius-xxs;
+  pointer-events: none;
 
   &.fit-content {
     width: fit-content;

package/src/atoms/Alert.tsx

@@ -1,6 +1,7 @@
 import { IconButton, IconButtonProps } from './IconButton'
 import { Icon } from './Icon'
 import './Alert.scss'
+import { classNames } from '@/utils/classNames'
 
 export type Variant = 'info' | 'success' | 'warning' | 'error'
 
@@ -22,14 +23,15 @@ export enum IconVariant {
 export function Alert({
   id,
   variant = 'success',
-  className = '',
+  className,
   fitContent = false,
   text,
   button,
   ...props
 }: AlertProps): React.JSX.Element {
-  const fitContentClass = fitContent ? 'fit-content' : ''
-  const cssClasses = ['alert', variant, className, fitContentClass].join(' ')
+  const cssClasses = classNames('alert', variant, className, {
+    'fit-content': fitContent,
+  })
 
   return (
     <div

package/src/atoms/Badge.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import './Badge.scss'
 
 export type Variant =
@@ -18,11 +19,12 @@ export interface BadgeProps extends React.ComponentPropsWithoutRef<'div'> {
 
 export function Badge({
   variant = 'info',
+  className,
   text,
   accessibilityLabel,
   ...props
 }: BadgeProps): React.JSX.Element {
-  const cssClasses = ['badge', variant].join(' ')
+  const cssClasses = classNames('badge', variant, className)
 
   return (
     <span

package/src/atoms/Button.tsx

@@ -1,6 +1,7 @@
 import NextLink from 'next/link'
 import './Button.scss'
 import { Icon, IconType } from './Icon'
+import { classNames } from '@/utils/classNames'
 
 export interface BaseButtonProps {
   label: string
@@ -56,15 +57,15 @@ export function Button({
   if (loading) {
     leftIcon = 'Loading'
   }
-  const cssClasses = ['button', variant].join(' ')
+  const cssClasses = classNames('button', variant, props.className)
 
   if (hasHref(props)) {
     return (
       <NextLink
         href={props.href || ''}
-        className={cssClasses}
         aria-label={accessibilityLabel || label}
         {...props}
+        className={cssClasses}
       >
         {leftIcon && <Icon name={leftIcon} />}
         {label}
@@ -75,10 +76,10 @@ export function Button({
 
   return (
     <button
-      className={cssClasses}
       disabled={loading || disabled}
       aria-label={accessibilityLabel || label}
       {...props}
+      className={cssClasses}
     >
       {leftIcon && <Icon name={leftIcon} />}
       {label}

package/src/atoms/CardsTable.scss

@@ -3,18 +3,19 @@
 @use '../settings/config';
 
 .cards-table-list {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0 config.$space-3x;
+  display: flex;
+  flex-direction: column;
+  gap: config.$space-3x;
 
-  thead {
-    background: transparent;
+  tbody {
+    display: flex;
+    flex-direction: column;
+    gap: config.$space-3x;
   }
 
-  th,
-  td {
-    overflow: hidden;
-    text-overflow: ellipsis;
+  tr {
+    display: flex;
+    flex-grow: 1;
   }
 
   .container {
@@ -22,11 +23,11 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    width: 100%;
   }
 
   th {
     padding: config.$space-2x config.$space-3x;
-    white-space: nowrap;
     text-align: left;
 
     &.sortable {
@@ -44,24 +45,16 @@
     }
   }
 
-  td {
-    padding: config.$space-5x config.$space-3x;
-  }
-
   .no-wrap {
     white-space: nowrap;
   }
 
   .alignment-left {
-    text-align: left;
+    justify-content: flex-start;
   }
 
   .alignment-center {
-    text-align: center;
-  }
-
-  .alignment-right {
-    text-align: right;
+    justify-content: center;
   }
 
   &.primary {
@@ -126,6 +119,10 @@
       background: color_alias.$primary-color-50;
     }
 
+    tr > td:first-child {
+      @include typography.cards-table-list-highlight-text;
+    }
+
     tr.disabled {
       background: color_alias.$neutral-color-50;
 
@@ -133,9 +130,89 @@
         @include typography.cards-table-list-disabled-text;
       }
     }
+  }
 
-    tr > td:first-child {
-      @include typography.cards-table-list-highlight-text;
+  // Media queries
+  $small: 375px;
+  $medium: 768px;
+  $large: 1200px;
+
+  // Mobile & tablet cases
+  @media only screen and (min-width: $small) and (max-width: $large) {
+    thead {
+      display: none;
+    }
+
+    tr {
+      flex-direction: row;
+      flex-wrap: wrap;
+      position: relative;
+      gap: config.$space-1x;
+      padding: config.$space-3x;
+    }
+
+    td {
+      width: 100%;
+    }
+
+    td:first-child {
+      order: -2;
+      width: 50%;
+      margin-bottom: config.$space-2x;
+    }
+    td.actions {
+      order: -1;
+      width: 35%;
+      flex-grow: 1;
+      margin-bottom: config.$space-2x;
+
+      > div {
+        justify-content: flex-end;
+      }
+    }
+
+    .badge {
+      position: absolute;
+      inset: auto config.$space-3x config.$space-3x auto;
+    }
+  }
+  // Desktop case
+  @media only screen and (min-width: $large) {
+    thead {
+      display: flex;
+    }
+
+    tr {
+      flex-direction: row;
+    }
+
+    th,
+    td {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex: 2;
+    }
+
+    td {
+      padding: config.$space-5x config.$space-3x;
+    }
+
+    th.actions {
+      flex: 1;
+    }
+    td.actions {
+      order: 0;
+      justify-content: center;
+      flex: 1;
+    }
+
+    td:has(.badge) {
+      gap: config.$space-2x;
+    }
+
+    .alignment-right {
+      justify-content: flex-end;
     }
   }
 }

package/src/atoms/CardsTable.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import './CardsTable.scss'
 
 export type Variant = 'primary'
@@ -8,13 +9,13 @@ export interface CardsTableProps
 }
 
 export function CardsTable({
+  className,
   summary,
   variant = 'primary',
   children,
   ...props
 }: CardsTableProps): React.JSX.Element {
-  const cssClasses = ['cards-table-list', variant].join(' ')
-
+  const cssClasses = classNames('cards-table-list', variant, className)
   return (
     <table summary={summary} role="table" className={cssClasses} {...props}>
       {children}

package/src/atoms/CardsTableCell.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import './CardsTable.scss'
 import React from 'react'
 
@@ -17,13 +18,12 @@ export function CardsTableCell({
   noWrap = false,
   align = Alignment.Left,
   children,
+  className,
   ...props
 }: CardsTableCellProps): React.JSX.Element {
-  const cssClasses = [
-    'cell',
-    noWrap ? 'no-wrap' : '',
-    `alignment-${align}`,
-  ].join(' ')
+  const cssClasses = classNames('cell', `alignment-${align}`, className, {
+    'no-wrap': noWrap,
+  })
   return (
     <td role="cell" className={cssClasses} {...props}>
       {children}

package/src/atoms/CardsTableHeader.tsx

@@ -1,3 +1,5 @@
+import { classNames } from '@/utils/classNames'
+
 export interface CardsTableHeaderProps
   extends React.ComponentPropsWithoutRef<'th'> {}
 
@@ -6,7 +8,7 @@ export function CardsTableHeader({
   className,
   ...props
 }: CardsTableHeaderProps) {
-  const cssClasses = ['header', className].join(' ')
+  const cssClasses = classNames('header', className)
   return (
     <th scope="col" role="columnheader" className={cssClasses} {...props}>
       {children}

package/src/atoms/Checkbox.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import './Checkbox.scss'
 
 export type Variant = 'primary'
@@ -17,26 +18,28 @@ export function Checkbox({
   disabled,
   variant = 'primary',
   id,
+  name,
   ...props
 }: CheckboxProps) {
-  const disabledClass = disabled ? 'disabled' : ''
-  const cssClasses = ['checkbox', variant].join(' ')
+  const identifier = id || name
+  const inputCss = classNames('checkbox', variant)
+  const labelCss = classNames('checkbox-label-container', {
+    disabled: disabled,
+  })
 
   return (
     <div className={`checkbox-group ${variant}`}>
       <input
-        id={id}
+        id={identifier}
+        name={name}
         type="checkbox"
-        className={cssClasses}
+        className={inputCss}
         disabled={disabled}
         aria-label={accessibilityLabel}
         {...props}
       />
 
-      <label
-        className={`checkbox-label-container ${disabledClass}`}
-        htmlFor={id}
-      >
+      <label className={labelCss} htmlFor={identifier}>
         <span className="background-icon"></span>
         {!hideLabel && <span className="label">{label}</span>}
       </label>

package/src/atoms/EmptyState.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import { Button, ButtonProps } from './Button'
 import './EmptyState.scss'
 import { Icon, IconType } from './Icon'
@@ -12,12 +13,13 @@ export interface EmptyStateProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 export function EmptyState({
+  className,
   icon = 'EmptyState',
   text = 'No data',
   variant = 'primary',
   button,
 }: EmptyStateProps): React.JSX.Element {
-  const cssClasses = ['empty-state', variant].join(' ')
+  const cssClasses = classNames('empty-state', variant, className)
 
   return (
     <div className={cssClasses}>

package/src/atoms/Icon.tsx

@@ -1,6 +1,7 @@
 import './Icon.scss'
 
 import * as icons from '../icons'
+import { classNames } from '@/utils/classNames'
 export type IconType = keyof typeof icons
 
 export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
@@ -9,11 +10,9 @@ export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
 }
 
 export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
-  const cssClasses = [
-    'icon',
-    className,
-    name === 'Loading' ? 'rotate' : '',
-  ].join(' ')
+  const cssClasses = classNames('icon', className, {
+    rotate: name === 'Loading',
+  })
   return (
     <span role="img" title={name} className={cssClasses}>
       {icons[name](props)}

package/src/atoms/IconButton.tsx

@@ -1,6 +1,7 @@
 import NextLink from 'next/link'
 import './IconButton.scss'
 import { Icon, IconType } from './Icon'
+import { classNames } from '@/utils/classNames'
 
 export type Variant = 'primary'
 
@@ -29,15 +30,15 @@ export function IconButton({
   variant = 'primary',
   ...props
 }: IconButtonProps) {
-  const cssClasses = ['icon-button', variant].join(' ')
+  const cssClasses = classNames('icon-button', variant, props.className)
 
   if (hasHref(props)) {
     return (
       <NextLink
         href={props.href || ''}
-        className={cssClasses}
         aria-label={accessibilityLabel}
         {...props}
+        className={cssClasses}
       >
         <Icon name={icon} />
       </NextLink>
@@ -46,10 +47,10 @@ export function IconButton({
 
   return (
     <button
-      className={cssClasses}
       disabled={disabled}
       aria-label={accessibilityLabel}
       {...props}
+      className={cssClasses}
     >
       <Icon name={icon} />
     </button>

package/src/atoms/Input.tsx

@@ -1,6 +1,8 @@
-import './Input.scss'
 import React, { useState } from 'react'
 import { Icon, IconType } from './Icon'
+import { classNames } from '@/utils/classNames'
+import './Input.scss'
+import { buildHelpText } from '@/utils/buildHelpText'
 
 export type InputVariant = 'primary'
 
@@ -18,6 +20,7 @@ export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
 export function Input({
   label,
   accessibilityLabel,
+  className,
   hideLabel = false,
   icon,
   helpText,
@@ -29,10 +32,13 @@ export function Input({
   errors,
   ...props
 }: InputProps): React.JSX.Element {
+  const identifier = id || name
   const [showPassword, setShowPassword] = useState(false)
-  const iconClass = icon ? 'with-icon' : ''
-  const invalidClass = errors ? 'invalid' : ''
-  const cssClasses = ['input', iconClass, invalidClass].join(' ')
+  const cssClasses = classNames('input', className, {
+    'with-icon': icon,
+    invalid: errors?.length,
+  })
+  const helpTexts = buildHelpText(helpText, errors)
 
   function handlePasswordIcon() {
     return showPassword ? 'ShowOff' : 'Show'
@@ -51,14 +57,14 @@ export function Input({
   return (
     <div className={`input-group ${variant}`}>
       {!hideLabel && (
-        <label className="input-label" htmlFor={id}>
+        <label className="input-label" htmlFor={identifier}>
           {label}
         </label>
       )}
       <div className="input-container">
         {icon && <Icon className="left-icon" name={icon} />}
         <input
-          id={id}
+          id={identifier}
           className={cssClasses}
           disabled={disabled}
           type={handleInputType()}
@@ -74,17 +80,11 @@ export function Input({
           />
         )}
       </div>
-      {helpText && !errors && (
-        <span className="input-help-text">{helpText}</span>
-      )}
-      {errors &&
-        errors?.map((error, index) => {
-          return (
-            <span key={`error-${index}`} className="input-help-text">
-              {error}
-            </span>
-          )
-        })}
+      {helpTexts.map((helpText) => (
+        <span key={`${identifier}-${helpText}`} className="input-help-text">
+          {helpText}
+        </span>
+      ))}
     </div>
   )
 }

package/src/atoms/Modal.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@/utils/classNames'
 import { Button, ButtonProps } from './Button'
 import { Icon } from './Icon'
 import './Modal.scss'
@@ -21,13 +22,14 @@ export interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
 
 export function Modal({
   id,
+  className,
   variant = 'info',
   title,
   buttons,
   children,
   ...props
 }: ModalProps): React.JSX.Element {
-  const cssClasses = ['modal', variant].join(' ')
+  const cssClasses = classNames('modal', variant, className)
 
   return (
     <div className="modal-container">

package/src/atoms/Multiselect.tsx

@@ -1,6 +1,8 @@
 import './Multiselect.scss'
 import React, { useState } from 'react'
 import { Icon } from './Icon'
+import { classNames } from '@/utils/classNames'
+import { buildHelpText } from '@/utils/buildHelpText'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
@@ -20,6 +22,7 @@ export interface MultiselectProps
 }
 
 export function Multiselect({
+  className,
   placeholder,
   helpText,
   variant = 'primary',
@@ -34,23 +37,17 @@ export function Multiselect({
   selected,
   ...props
 }: MultiselectProps): React.JSX.Element {
+  const helpTexts = buildHelpText(helpText, errors)
   const [showOptionsList, setShowOptionsList] = useState(false)
   const [selectedOptionsIds, setSelectedOptionsIds] = useState<string[]>(
     selected?.map((option) => option.id) || [],
   )
-
-  const optionsListOpenClass = showOptionsList ? 'open' : ''
-  const filledSelectClass = selectedOptionsIds.length > 0 ? 'filled' : ''
-  const disabledClass = disabled ? 'disabled' : ''
-  const invalidClass = errors ? 'invalid' : ''
-
-  const cssClasses = [
-    'selected-option',
-    optionsListOpenClass,
-    filledSelectClass,
-    disabledClass,
-    invalidClass,
-  ].join(' ')
+  const cssClasses = classNames('selected-option', className, {
+    open: showOptionsList,
+    filled: selectedOptionsIds.length > 0,
+    disabled: disabled,
+    invalid: errors?.length,
+  })
 
   function handleOptionsList() {
     if (!disabled) setShowOptionsList(!showOptionsList)
@@ -130,19 +127,11 @@ export function Multiselect({
           </ul>
         )}
       </div>
-      {helpText && !errors && (
-        <span className={`multiselect-help-text ${invalidClass}`}>
+      {helpTexts.map((helpText) => (
+        <span key={`${name}-${helpText}`} className="multiselect-help-text">
           {helpText}
         </span>
-      )}
-      {errors &&
-        errors?.map((error, index) => {
-          return (
-            <span key={`error-${index}`} className="multiselect-help-text">
-              {error}
-            </span>
-          )
-        })}
+      ))}
       <input
         type="hidden"
         name={name}

package/src/atoms/Select.tsx

@@ -1,6 +1,8 @@
 import './Select.scss'
 import React, { useState } from 'react'
 import { Icon } from './Icon'
+import { classNames } from '@/utils/classNames'
+import { buildHelpText } from '@/utils/buildHelpText'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
@@ -23,6 +25,7 @@ export interface SelectProps extends InputPropsWithoutOnChange {
 }
 
 export function Select({
+  className,
   placeholder,
   helpText,
   variant = 'primary',
@@ -37,24 +40,19 @@ export function Select({
   onChange,
   ...props
 }: SelectProps): React.JSX.Element {
+  const helpTexts = buildHelpText(helpText, errors)
   const [showOptionsList, setShowOptionsList] = useState(false)
   const [selectedOption, setSelectedOption] = useState<Option>({
     id: selected?.id || '',
     label: selected?.label || '',
   })
 
-  const optionsListOpenClass = showOptionsList ? 'open' : ''
-  const filledSelectClass = selectedOption.id ? 'filled' : ''
-  const disabledClass = disabled ? 'disabled' : ''
-  const invalidClass = errors ? 'invalid' : ''
-
-  const cssClasses = [
-    'selected-option',
-    optionsListOpenClass,
-    filledSelectClass,
-    disabledClass,
-    invalidClass,
-  ].join(' ')
+  const cssClasses = classNames('selected-option', className, {
+    open: showOptionsList,
+    filled: selectedOption.id,
+    disabled: disabled,
+    invalid: errors?.length,
+  })
 
   function handleOptionsList() {
     if (!disabled) setShowOptionsList(!showOptionsList)
@@ -113,17 +111,11 @@ export function Select({
           </ul>
         )}
       </div>
-      {helpText && !errors && (
-        <span className="select-help-text">{helpText}</span>
-      )}
-      {errors &&
-        errors?.map((error, index) => {
-          return (
-            <span key={`error-${index}`} className="select-help-text">
-              {error}
-            </span>
-          )
-        })}
+      {helpTexts.map((helpText) => (
+        <span key={`${name}-${helpText}`} className="select-help-text">
+          {helpText}
+        </span>
+      ))}
       <input type="hidden" name={name} value={selectedOption.id} {...props} />
     </div>
   )

package/src/atoms/TextArea.tsx

@@ -0,0 +1,58 @@
+import { classNames } from '@/utils/classNames'
+import { buildHelpText } from '@/utils/buildHelpText'
+import './Input.scss'
+
+export type TextAreaVariant = 'primary'
+
+export interface TextAreaProps
+  extends React.ComponentPropsWithoutRef<'textarea'> {
+  label: string
+  accessibilityLabel?: string
+  hideLabel?: boolean
+  helpText?: string
+  variant?: TextAreaVariant
+  id?: string
+  errors?: string[]
+}
+
+export default function TextArea({
+  id,
+  label,
+  className,
+  accessibilityLabel,
+  hideLabel = false,
+  helpText,
+  variant = 'primary',
+  disabled,
+  name,
+  errors,
+  ...props
+}: TextAreaProps) {
+  const identifier = id || name
+  const cssClasses = classNames('input', className, { invalid: errors?.length })
+  const helpTexts = buildHelpText(helpText, errors)
+  return (
+    <div className={`input-group ${variant}`}>
+      {!hideLabel && (
+        <label className="input-label" htmlFor={identifier}>
+          {label}
+        </label>
+      )}
+      <div className="input-container">
+        <textarea
+          id={identifier}
+          className={cssClasses}
+          disabled={disabled}
+          name={name}
+          aria-label={accessibilityLabel || label}
+          {...props}
+        />
+      </div>
+      {helpTexts.map((helpText) => (
+        <span key={`${identifier}-${helpText}`} className="input-help-text">
+          {helpText}
+        </span>
+      ))}
+    </div>
+  )
+}

package/src/settings/typography/_content.scss

@@ -115,6 +115,14 @@
   text-decoration-line: underline;
 }
 
+@mixin body-link {
+  @include base;
+  font-weight: 400;
+  color: color_alias.$primary-color-600;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 @mixin footnote-primary {
   @include base;
   font-weight: 400;

package/src/stories/CardsTable.stories.js

@@ -6,12 +6,21 @@ import { CardsTableHeader } from '../atoms/CardsTableHeader'
 import { CardsTableRow } from '../atoms/CardsTableRow'
 import { CardsTableBody } from '../atoms/CardsTableBody'
 import { CardsTableCell } from '../atoms/CardsTableCell'
-import { Button } from '../atoms/Button'
+import { IconButton } from '../atoms/IconButton'
+import { Badge } from '../atoms/Badge'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=2331-990&mode=dev',
+  },
+}
 
 const meta = {
   title: 'Design System/Atoms/CardsTable',
   component: CardsTable,
   tags: ['autodocs'],
+  parameters: figmaPrimaryDesign,
 }
 
 export default meta
@@ -24,34 +33,101 @@ export const Primary = {
           <CardsTableHeader>Game title</CardsTableHeader>
           <CardsTableHeader>Company address</CardsTableHeader>
           <CardsTableHeader>Customer service email</CardsTableHeader>
+          <CardsTableHeader>Price</CardsTableHeader>
+          <CardsTableHeader className="actions">Actions</CardsTableHeader>
         </CardsTableRow>
       </CardsTableHead>
       <CardsTableBody>
         <CardsTableRow>
-          <CardsTableCell>Metal Gear Solid 5: The Phantom Pain</CardsTableCell>
-          <CardsTableCell noWrap>
+          <CardsTableCell>
+            <span>Metal Gear Solid 5: The Phantom Pain</span>
+            <Badge
+              accessibilityLabel="Game is bought"
+              text="Bought"
+              variant="success-outlined"
+            />
+          </CardsTableCell>
+          <CardsTableCell>
             Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku,
             Tokyo, 104-0061 Japan
           </CardsTableCell>
-          <CardsTableCell align="right">konami@fakemail.com</CardsTableCell>
+          <CardsTableCell>konami@fakemail.com</CardsTableCell>
+          <CardsTableCell align="right">6,99 €</CardsTableCell>
+          <CardsTableCell className="actions" align="center">
+            <div style={{ display: 'flex', gap: '1.75rem' }}>
+              <IconButton
+                icon="Edit"
+                accessibilityLabel="Edit game"
+                href="link.com"
+              />
+              <IconButton
+                icon="Export"
+                accessibilityLabel="Export game"
+                href="link.com"
+              />
+              <IconButton
+                icon="Delete"
+                accessibilityLabel="Delete game"
+                href="link.com"
+              />
+            </div>
+          </CardsTableCell>
         </CardsTableRow>
 
         <CardsTableRow>
           <CardsTableCell>The Witcher 3</CardsTableCell>
-          <CardsTableCell noWrap>
+          <CardsTableCell>
             CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
           </CardsTableCell>
-          <CardsTableCell align="right">cdprojekt@fakemail.com</CardsTableCell>
+          <CardsTableCell>cdprojekt@fakemail.com</CardsTableCell>
+          <CardsTableCell align="right">19,99 €</CardsTableCell>
+          <CardsTableCell className="actions" align="center">
+            <div style={{ display: 'flex', gap: '1.75rem' }}>
+              <IconButton
+                icon="Edit"
+                accessibilityLabel="Edit game"
+                href="link.com"
+              />
+              <IconButton
+                icon="Export"
+                accessibilityLabel="Export game"
+                href="link.com"
+              />
+              <IconButton
+                icon="Delete"
+                accessibilityLabel="Delete game"
+                href="link.com"
+              />
+            </div>
+          </CardsTableCell>
         </CardsTableRow>
 
         <CardsTableRow>
           <CardsTableCell>Tekken 8</CardsTableCell>
-          <CardsTableCell noWrap>
+          <CardsTableCell>
             Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo
             135-0034, Japan
           </CardsTableCell>
-          <CardsTableCell align="right">
-            namco@fakemail.com <Button label="click" />
+          <CardsTableCell>namco@fakemail.com</CardsTableCell>
+          <CardsTableCell align="right">79,99 €</CardsTableCell>
+          <CardsTableCell className="actions" align="center">
+            <div style={{ display: 'flex', gap: '1.75rem' }}>
+              <IconButton
+                icon="Edit"
+                accessibilityLabel="Edit game"
+                href="link.com"
+              />
+              <IconButton
+                icon="Export"
+                accessibilityLabel="Export game"
+                href="link.com"
+              />
+              <IconButton
+                icon="Delete"
+                accessibilityLabel="Delete game"
+                href="link.com"
+              />
+            </div>
           </CardsTableCell>
         </CardsTableRow>
       </CardsTableBody>

package/src/stories/CardsTableList.stories.ts

@@ -26,7 +26,7 @@ const meta = {
 const figmaPrimaryDesign = {
   design: {
     type: 'figma',
-    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=1272-1328&mode=dev',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=2331-990&mode=dev',
   },
 }
 

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,15 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.11.0
+- Added TextArea component to Storybook.
+- Id prop is now optional in Input, Select, Multiselect and TextArea components.
+
+## 0.10.0
+
+- Cards Table components now are responsive.
+- Added Link style to Typography.
+
 ## 0.9.3
 
 - Fix alert component width.

package/src/stories/Input.stories.ts

@@ -31,7 +31,7 @@ const meta = {
     type: {
       description: 'Input type property',
     },
-    leftIcon: {
+    icon: {
       description: 'Input left icon from a list of values',
     },
     id: {

package/src/stories/TextArea.stories.ts

@@ -0,0 +1,78 @@
+import TextArea from '../atoms/TextArea'
+import { StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Design System/Atoms/Textarea',
+  component: TextArea,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      description: 'Label for the textarea',
+    },
+    accessibilityLabel: {
+      description:
+        'Describes the textarea purpose. If empty, label content will be used',
+    },
+    placeholder: {
+      description: 'Optional textarea placeholder text',
+    },
+    variant: {
+      description: 'Textarea variant used',
+    },
+    disabled: {
+      description: 'Is the textarea in disabled state?',
+    },
+    helpText: {
+      description: 'Optional help text',
+    },
+    name: {
+      description: 'Textarea name property',
+    },
+    id: {
+      description: 'Value needed for the label relation',
+    },
+    errors: {
+      description:
+        'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=2371-2157&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    label: 'Textarea',
+    accessibilityLabel: 'Fill the textarea',
+    placeholder: 'Write here...',
+    variant: 'primary',
+    disabled: false,
+    helpText: 'This text can help you',
+    name: 'textarea',
+    id: 'textarea',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const WithErrors: Story = {
+  args: {
+    label: 'Textarea',
+    accessibilityLabel: 'Fill the form textarea',
+    placeholder: 'Write here...',
+    variant: 'primary',
+    disabled: false,
+    helpText: 'This text can help you',
+    name: 'textarea',
+    id: 'textarea',
+    errors: ['error1', 'error2'],
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/utils/buildHelpText.ts

@@ -0,0 +1,12 @@
+export function buildHelpText(
+  helpText: string | undefined,
+  errors: string[] | undefined,
+): string[] {
+  if (Boolean(errors?.length)) {
+    return errors || []
+  }
+  if (helpText) {
+    return [helpText]
+  }
+  return []
+}

package/src/utils/classNames.ts

@@ -0,0 +1,23 @@
+type classNameProp = string | { [key: string]: any } | undefined
+
+export const classNames = (...classNames: classNameProp[]): string => {
+  const resultClasses: string[] = []
+
+  classNames.forEach((className) => {
+    if (className === undefined) {
+      return
+    }
+
+    if (typeof className === 'string') {
+      return resultClasses.push(className)
+    }
+
+    Object.keys(className).forEach((key) => {
+      if (Boolean(className[key])) {
+        resultClasses.push(key)
+      }
+    })
+  })
+
+  return resultClasses.join(' ')
+}

package/tests/CardsTable.spec.tsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { CardsTable } from '@/atoms/CardsTable'
+import { CardsTableHead } from '@/atoms/CardsTableHead'
+import { CardsTableHeader } from '@/atoms/CardsTableHeader'
+import { CardsTableRow } from '@/atoms/CardsTableRow'
+import { CardsTableBody } from '@/atoms/CardsTableBody'
+import { CardsTableCell, Alignment } from '@/atoms/CardsTableCell'
+import { IconButton } from '@/atoms/IconButton'
+import { Badge } from '@/atoms/Badge'
+
+describe('CardsTable', () => {
+  it('renders', () => {
+    const { getAllByRole } = render(
+      <CardsTable>
+        <CardsTableHead>
+          <CardsTableRow>
+            <CardsTableHeader>Game title</CardsTableHeader>
+            <CardsTableHeader>Company address</CardsTableHeader>
+            <CardsTableHeader>Customer service email</CardsTableHeader>
+            <CardsTableHeader>Price</CardsTableHeader>
+            <CardsTableHeader className="actions">Actions</CardsTableHeader>
+          </CardsTableRow>
+        </CardsTableHead>
+        <CardsTableBody>
+          <CardsTableRow>
+            <CardsTableCell>
+              <span>Metal Gear Solid 5: The Phantom Pain</span>
+              <Badge
+                accessibilityLabel="Game is bought"
+                text="Bought"
+                variant="success-outlined"
+              />
+            </CardsTableCell>
+            <CardsTableCell>
+              Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku,
+              Tokyo, 104-0061 Japan
+            </CardsTableCell>
+            <CardsTableCell>konami@fakemail.com</CardsTableCell>
+            <CardsTableCell align={Alignment.Right}>6,99 €</CardsTableCell>
+            <CardsTableCell className="actions" align={Alignment.Center}>
+              <div style={{ display: 'flex', gap: '1.75rem' }}>
+                <IconButton
+                  icon="Edit"
+                  accessibilityLabel="Edit game"
+                  href="link.com"
+                />
+                <IconButton
+                  icon="Export"
+                  accessibilityLabel="Export game"
+                  href="link.com"
+                />
+                <IconButton
+                  icon="Delete"
+                  accessibilityLabel="Delete game"
+                  href="link.com"
+                />
+              </div>
+            </CardsTableCell>
+          </CardsTableRow>
+
+          <CardsTableRow>
+            <CardsTableCell>The Witcher 3</CardsTableCell>
+            <CardsTableCell>
+              CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
+            </CardsTableCell>
+            <CardsTableCell>cdprojekt@fakemail.com</CardsTableCell>
+            <CardsTableCell align={Alignment.Right}>19,99 €</CardsTableCell>
+            <CardsTableCell className="actions" align={Alignment.Center}>
+              <div style={{ display: 'flex', gap: '1.75rem' }}>
+                <IconButton
+                  icon="Edit"
+                  accessibilityLabel="Edit game"
+                  href="link.com"
+                />
+                <IconButton
+                  icon="Export"
+                  accessibilityLabel="Export game"
+                  href="link.com"
+                />
+                <IconButton
+                  icon="Delete"
+                  accessibilityLabel="Delete game"
+                  href="link.com"
+                />
+              </div>
+            </CardsTableCell>
+          </CardsTableRow>
+
+          <CardsTableRow>
+            <CardsTableCell>Tekken 8</CardsTableCell>
+            <CardsTableCell>
+              Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo
+              135-0034, Japan
+            </CardsTableCell>
+            <CardsTableCell>namco@fakemail.com</CardsTableCell>
+            <CardsTableCell align={Alignment.Right}>79,99 €</CardsTableCell>
+            <CardsTableCell className="actions" align={Alignment.Center}>
+              <div style={{ display: 'flex', gap: '1.75rem' }}>
+                <IconButton
+                  icon="Edit"
+                  accessibilityLabel="Edit game"
+                  href="link.com"
+                />
+                <IconButton
+                  icon="Export"
+                  accessibilityLabel="Export game"
+                  href="link.com"
+                />
+                <IconButton
+                  icon="Delete"
+                  accessibilityLabel="Delete game"
+                  href="link.com"
+                />
+              </div>
+            </CardsTableCell>
+          </CardsTableRow>
+        </CardsTableBody>
+      </CardsTable>,
+    )
+
+    expect(getAllByRole('table').length).toBe(1)
+    expect(getAllByRole('rowgroup').length).toBe(2)
+    expect(getAllByRole('columnheader').length).toBeGreaterThan(1)
+    expect(getAllByRole('row').length).toBeGreaterThan(1)
+    expect(getAllByRole('cell').length).toBeGreaterThan(1)
+  })
+})

package/tests/utils/classNames.spec.tsx

@@ -0,0 +1,13 @@
+import { classNames } from '@/utils/classNames'
+
+describe('classNames', () => {
+  it('returns a string of classes', () => {
+    expect(classNames('class1', 'class2')).toBe('class1 class2')
+  })
+  it('ignores undefined', () => {
+    expect(classNames('class1', undefined, 'class2')).toBe('class1 class2')
+  })
+  it('returns a string of classes with object', () => {
+    expect(classNames({ class1: true, class2: false })).toBe('class1')
+  })
+})