agroptima-design-system 0.3.2 → 0.5.0

package/.storybook/main.ts

@@ -13,7 +13,6 @@ const config: StorybookConfig = {
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-onboarding'),
     getAbsolutePath('@storybook/addon-interactions'),
     '@storybook/addon-a11y',
     '@storybook/addon-designs',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -8,7 +8,7 @@
     "build-storybook": "storybook build",
     "lint": "eslint",
     "lint:fix": "eslint src --fix",
-    "publish-chromatic": "npx chromatic --exit-zero-on-changes"
+    "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "@storybook/addon-designs": "^7.0.5",
@@ -23,7 +23,6 @@
     "@storybook/addon-essentials": "^7.5.0",
     "@storybook/addon-interactions": "^7.5.0",
     "@storybook/addon-links": "^7.5.0",
-    "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/blocks": "^7.5.0",
     "@storybook/nextjs": "^7.5.0",
     "@storybook/react": "^7.5.0",

package/src/atoms/Button.scss

@@ -59,6 +59,8 @@
     --color-fg-disabled: #{color_alias.$neutral-color-50};
   }
 
+  text-decoration: none;
+
   display: inline-flex;
   height: fit-content;
   background: var(--color-bg);
@@ -144,7 +146,7 @@
     }
     &:disabled {
       background: color_alias.$neutral-color-50;
-      border: 1px solid color_alias.$neutral-color-400;
+      border: none;
       color: color_alias.$neutral-color-400;
       svg,
       svg path {

package/src/atoms/Button.tsx

@@ -1,6 +1,28 @@
+import NextLink from 'next/link'
 import './Button.scss'
 import { Icon, IconType } from './Icon'
 
+export interface BaseButtonProps {
+  label: string
+  accessibilityLabel?: string
+  leftIcon?: IconType
+  rightIcon?: IconType
+  variant?: ButtonVariant
+  loading?: boolean
+  disabled?: boolean
+}
+
+type HtmlButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
+
+type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+export type ButtonProps =
+  | (HtmlButtonProps & BaseButtonProps)
+  | (AnchorProps & BaseButtonProps)
+
+const hasHref = (props: HtmlButtonProps | AnchorProps): props is AnchorProps =>
+  'href' in props
+
 export type ButtonVariant =
   | 'primary'
   | 'primary-ghost'
@@ -21,29 +43,43 @@ export type ButtonVariant =
   | 'warning-ghost'
   | 'warning-outlined'
 
-export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
-  label: string
-  leftIcon?: IconType
-  rightIcon?: IconType
-  variant?: ButtonVariant
-  loading?: boolean
-}
-
 export function Button({
   label,
+  accessibilityLabel,
   leftIcon,
   rightIcon,
   disabled,
   variant = 'primary',
   loading = false,
   ...props
-}: ButtonProps): React.JSX.Element {
+}: ButtonProps) {
   if (loading) {
     leftIcon = 'Loading'
   }
   const cssClasses = ['button', variant].join(' ')
+
+  if (hasHref(props)) {
+    return (
+      <NextLink
+        href={props.href || ''}
+        className={cssClasses}
+        aria-label={accessibilityLabel || label}
+        {...props}
+      >
+        {leftIcon && <Icon name={leftIcon} />}
+        {label}
+        {rightIcon && <Icon name={rightIcon} />}
+      </NextLink>
+    )
+  }
+
   return (
-    <button className={cssClasses} disabled={loading || disabled} {...props}>
+    <button
+      className={cssClasses}
+      disabled={loading || disabled}
+      aria-label={accessibilityLabel || label}
+      {...props}
+    >
       {leftIcon && <Icon name={leftIcon} />}
       {label}
       {rightIcon && <Icon name={rightIcon} />}

package/src/atoms/{CardsTableList.scss → CardsTable.scss}

@@ -48,6 +48,22 @@
     padding: config.$space-5x config.$space-3x;
   }
 
+  .no-wrap {
+    white-space: nowrap;
+  }
+
+  .alignment-left {
+    text-align: left;
+  }
+
+  .alignment-center {
+    text-align: center;
+  }
+
+  .alignment-right {
+    text-align: right;
+  }
+
   &.primary {
     thead > tr {
       @include typography.cards-table-list-header;

package/src/atoms/CardsTable.tsx

@@ -0,0 +1,23 @@
+import './CardsTable.scss'
+
+export type Variant = 'primary'
+
+export interface CardsTableProps
+  extends React.ComponentPropsWithoutRef<'table'> {
+  variant?: Variant
+}
+
+export function CardsTable({
+  summary,
+  variant = 'primary',
+  children,
+  ...props
+}: CardsTableProps): React.JSX.Element {
+  const cssClasses = ['cards-table-list', variant].join(' ')
+
+  return (
+    <table summary={summary} role="table" className={cssClasses} {...props}>
+      {children}
+    </table>
+  )
+}

package/src/atoms/CardsTableBody.tsx

@@ -0,0 +1,16 @@
+import './CardsTable.scss'
+import React from 'react'
+
+export interface CardsTableBodyProps
+  extends React.ComponentPropsWithoutRef<'tbody'> {}
+
+export function CardsTableBody({
+  children,
+  ...props
+}: CardsTableBodyProps): React.JSX.Element {
+  return (
+    <tbody role="rowgroup" {...props}>
+      {children}
+    </tbody>
+  )
+}

package/src/atoms/CardsTableCell.tsx

@@ -0,0 +1,32 @@
+import './CardsTable.scss'
+import React from 'react'
+
+export enum Alignment {
+  Left = 'left',
+  Right = 'right',
+  Center = 'center',
+}
+
+export interface CardsTableCellProps
+  extends React.ComponentPropsWithoutRef<'td'> {
+  noWrap?: boolean
+  align?: Alignment
+}
+
+export function CardsTableCell({
+  noWrap = false,
+  align = Alignment.Left,
+  children,
+  ...props
+}: CardsTableCellProps): React.JSX.Element {
+  const cssClasses = [
+    'cell',
+    noWrap ? 'no-wrap' : '',
+    `alignment-${align}`,
+  ].join(' ')
+  return (
+    <td role="cell" className={cssClasses} {...props}>
+      {children}
+    </td>
+  )
+}

package/src/atoms/CardsTableHead.tsx

@@ -0,0 +1,16 @@
+import './CardsTable.scss'
+import React from 'react'
+
+export interface CardsTableHeadProps
+  extends React.ComponentPropsWithoutRef<'thead'> {}
+
+export function CardsTableHead({
+  children,
+  ...props
+}: CardsTableHeadProps): React.JSX.Element {
+  return (
+    <thead role="rowgroup" {...props}>
+      {children}
+    </thead>
+  )
+}

package/src/atoms/CardsTableHeader.tsx

@@ -0,0 +1,15 @@
+export interface CardsTableHeaderProps
+  extends React.ComponentPropsWithoutRef<'th'> {}
+
+export function CardsTableHeader({
+  children,
+  className,
+  ...props
+}: CardsTableHeaderProps) {
+  const cssClasses = ['header', className].join(' ')
+  return (
+    <th scope="col" role="columnheader" className={cssClasses} {...props}>
+      {children}
+    </th>
+  )
+}

package/src/atoms/CardsTableList.tsx

@@ -1,29 +1,34 @@
-import './CardsTableList.scss'
+import './CardsTable.scss'
 import React, { useState } from 'react'
 import { sortBy } from '../utils/sort'
-import { IconType } from './Icon'
-import { CardsTableListHeader } from './CardsTableListHeader'
-import { CardsTableListRow } from './CardsTableListRow'
+import { CardsTableHeader } from './CardsTableHeader'
+import { CardsTableCell } from './CardsTableCell'
+import { CardsTableRow } from './CardsTableRow'
+import { Icon, IconType } from './Icon'
+import { CardsTable } from './CardsTable'
+import { CardsTableHead } from './CardsTableHead'
+import { CardsTableBody } from './CardsTableBody'
 
 export type Variant = 'primary'
 
+export enum Order {
+  Ascending = 'ascending',
+  Descending = 'descending',
+  None = 'none',
+}
+
 export type Header = {
   label: string
   icon?: IconType
   columnId: string
   isSortable?: boolean
 }
+
 export type Column = {
   [key: string]: string
 }
 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
@@ -45,8 +50,6 @@ export function CardsTableList({
       : null
   })
 
-  const cssClasses = ['cards-table-list', variant].join(' ')
-
   function checkColumnOrder(columnId: string) {
     if (sortState?.columnId === columnId) {
       return sortState.order
@@ -74,25 +77,48 @@ export function CardsTableList({
         order: sortState?.order,
       })
     : rows
+
   return (
-    <table summary={summary} role="table" className={cssClasses}>
-      <thead role="rowgroup">
-        <tr role="row">
+    <CardsTable summary={summary} variant={variant}>
+      <CardsTableHead>
+        <CardsTableRow>
           {headers.map((header) => (
-            <CardsTableListHeader
+            <CardsTableHeader
               key={header.columnId}
-              header={header}
-              order={checkColumnOrder(header.columnId)}
+              aria-sort={checkColumnOrder(header.columnId)}
+              className={header.isSortable ? 'sortable' : ''}
               onClick={() => applySort(header.columnId)}
-            />
+            >
+              <div className="container">
+                <div>
+                  <span>{header.label}</span>
+                  {header.icon && <Icon name={header.icon} />}
+                </div>
+                {header.isSortable && (
+                  <Icon
+                    name="Sorter"
+                    className={checkColumnOrder(header.columnId)}
+                  />
+                )}
+              </div>
+            </CardsTableHeader>
           ))}
-        </tr>
-      </thead>
-      <tbody role="rowgroup">
-        {sortedRows.map((row: Row) => (
-          <CardsTableListRow key={row.id} {...row} />
-        ))}
-      </tbody>
-    </table>
+        </CardsTableRow>
+      </CardsTableHead>
+      <CardsTableBody>
+        {sortedRows.map((row: Row) => {
+          const cells = Object.entries(row.columns)
+          return (
+            <CardsTableRow key={row.id} isDisabled={row.isDisabled}>
+              {cells.map(([columnId, value]) => (
+                <CardsTableCell key={`${row.id}${columnId}`}>
+                  {value}
+                </CardsTableCell>
+              ))}
+            </CardsTableRow>
+          )
+        })}
+      </CardsTableBody>
+    </CardsTable>
   )
 }

package/src/atoms/CardsTableRow.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import './CardsTable.scss'
+
+export interface CardsTableRowProps
+  extends React.ComponentPropsWithoutRef<'tr'> {
+  isDisabled?: boolean
+}
+
+export function CardsTableRow({
+  isDisabled = false,
+  children,
+  ...props
+}: CardsTableRowProps): React.JSX.Element {
+  const disabledClass = isDisabled ? 'disabled' : ''
+  return (
+    <tr role="row" className={`row ${disabledClass}`} {...props}>
+      {children}
+    </tr>
+  )
+}

package/src/atoms/EmptyState.tsx

@@ -1,27 +1,21 @@
-import { Button } from './Button'
+import { Button, ButtonProps } from './Button'
 import './EmptyState.scss'
 import { Icon, IconType } from './Icon'
 
 export type Variant = 'primary'
 
-interface callToAction {
-  (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): any
-}
-
 export interface EmptyStateProps extends React.ComponentPropsWithoutRef<'div'> {
   icon?: IconType
   text?: string
   variant?: Variant
-  buttonLabel?: string
-  action?: callToAction
+  button?: ButtonProps
 }
 
 export function EmptyState({
   icon = 'EmptyState',
   text = 'No data',
   variant = 'primary',
-  buttonLabel,
-  action,
+  button,
 }: EmptyStateProps): React.JSX.Element {
   const cssClasses = ['empty-state', variant].join(' ')
 
@@ -29,7 +23,7 @@ export function EmptyState({
     <div className={cssClasses}>
       <Icon name={icon} />
       <p>{text}</p>
-      {buttonLabel && action && <Button label={buttonLabel} onClick={action} />}
+      {button?.label && <Button {...button} />}
     </div>
   )
 }

package/src/atoms/IconButton.scss

@@ -0,0 +1,50 @@
+@use '../settings/color_alias';
+@use '../settings/typography';
+@use '../settings/config';
+
+.icon-button {
+  border: none;
+  background: none;
+
+  > .icon {
+    width: config.$icon-size-5x;
+    height: config.$icon-size-5x;
+    > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.primary {
+    > .icon {
+      > svg {
+        fill: color_alias.$primary-color-600;
+        path {
+          fill: color_alias.$primary-color-600;
+        }
+      }
+    }
+
+    &:hover {
+      > .icon {
+        > svg {
+          fill: color_alias.$primary-color-1000;
+          path {
+            fill: color_alias.$primary-color-1000;
+          }
+        }
+      }
+    }
+
+    &:disabled {
+      > .icon {
+        > svg {
+          fill: color_alias.$neutral-color-400;
+          path {
+            fill: color_alias.$neutral-color-400;
+          }
+        }
+      }
+    }
+  }
+}

package/src/atoms/IconButton.tsx

@@ -0,0 +1,57 @@
+import NextLink from 'next/link'
+import './IconButton.scss'
+import { Icon, IconType } from './Icon'
+
+export type Variant = 'primary'
+
+export interface BaseIconButtonProps {
+  icon: IconType
+  variant?: Variant
+  disabled?: boolean
+  accessibilityLabel: string
+}
+
+type HtmlButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
+
+type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+export type IconButtonProps =
+  | (HtmlButtonProps & BaseIconButtonProps)
+  | (AnchorProps & BaseIconButtonProps)
+
+const hasHref = (props: HtmlButtonProps | AnchorProps): props is AnchorProps =>
+  'href' in props
+
+export function IconButton({
+  accessibilityLabel,
+  icon,
+  disabled,
+  variant = 'primary',
+  ...props
+}: IconButtonProps) {
+  const cssClasses = ['icon-button', variant].join(' ')
+
+  if (hasHref(props)) {
+    return (
+      <NextLink
+        href={props.href || ''}
+        className={cssClasses}
+        aria-label={accessibilityLabel}
+        {...props}
+      >
+        <Icon name={icon} />
+      </NextLink>
+    )
+  }
+
+  return (
+    <button
+      className={cssClasses}
+      disabled={disabled}
+      aria-label={accessibilityLabel}
+      {...props}
+    >
+      <Icon name={icon} />
+    </button>
+  )
+}

package/src/atoms/Input.tsx

@@ -6,16 +6,18 @@ export type InputVariant = 'primary'
 
 export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
   label: string
+  accessibilityLabel?: string
   hideLabel?: boolean
   icon?: IconType
   helpText?: string
   variant?: InputVariant
   id: string
-  invalid?: boolean
+  errors?: string[]
 }
 
 export function Input({
   label,
+  accessibilityLabel,
   hideLabel = false,
   icon,
   helpText,
@@ -24,12 +26,12 @@ export function Input({
   type = 'text',
   name,
   id,
-  invalid,
+  errors,
   ...props
 }: InputProps): React.JSX.Element {
   const [showPassword, setShowPassword] = useState(false)
   const iconClass = icon ? 'with-icon' : ''
-  const invalidClass = invalid ? 'invalid' : ''
+  const invalidClass = errors ? 'invalid' : ''
   const cssClasses = ['input', iconClass, invalidClass].join(' ')
 
   function handlePasswordIcon() {
@@ -61,7 +63,7 @@ export function Input({
           disabled={disabled}
           type={handleInputType()}
           name={name}
-          aria-label={label}
+          aria-label={accessibilityLabel || label}
           {...props}
         />
         {type === 'password' && (
@@ -72,7 +74,17 @@ export function Input({
           />
         )}
       </div>
-      {helpText && <span className="input-help-text">{helpText}</span>}
+      {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>
+          )
+        })}
     </div>
   )
 }