agroptima-design-system 0.3.1 → 0.4.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.1",
+  "version": "0.4.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);

package/src/atoms/Button.tsx

@@ -1,6 +1,27 @@
+import NextLink from 'next/link'
 import './Button.scss'
 import { Icon, IconType } from './Icon'
 
+export interface BaseButtonProps {
+  label: 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,14 +42,6 @@ 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,
   leftIcon,
@@ -37,11 +50,22 @@ export function Button({
   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} {...props}>
+        {leftIcon && <Icon name={leftIcon} />}
+        {label}
+        {rightIcon && <Icon name={rightIcon} />}
+      </NextLink>
+    )
+  }
+
   return (
     <button className={cssClasses} disabled={loading || disabled} {...props}>
       {leftIcon && <Icon name={leftIcon} />}

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/icons/show-off.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10.005 5.579c2.51 0 4.547 2.004 4.547 4.474a4.28 4.28 0 0 1-.327 1.637l2.655 2.613a10.58 10.58 0 0 0 3.12-4.25c-1.573-3.928-5.457-6.71-10.005-6.71-1.273 0-2.492.223-3.62.625L8.34 5.901a4.477 4.477 0 0 1 1.665-.322ZM.91 3.136l2.073 2.04.419.412A10.58 10.58 0 0 0 0 10.053c1.573 3.927 5.457 6.71 10.005 6.71 1.41 0 2.755-.268 3.983-.751l.382.375L17.035 19l1.155-1.136L2.065 2 .91 3.136Zm5.03 4.948 1.409 1.387a2.486 2.486 0 0 0-.073.582c0 1.485 1.219 2.684 2.729 2.684.2 0 .4-.027.59-.072l1.41 1.387a4.568 4.568 0 0 1-2 .474c-2.51 0-4.548-2.004-4.548-4.473 0-.707.182-1.37.482-1.969Zm3.919-.698 2.865 2.819.018-.143c0-1.486-1.219-2.685-2.728-2.685l-.155.01Z" fill="#444"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g clip-path="url(#show-off)"><path d="M10 4.5a8.956 8.956 0 0 1 8.085 5.042 8.843 8.843 0 0 1-2.21 2.86l1.293 1.292a10.818 10.818 0 0 0 2.915-4.152C18.498 5.518 14.583 2.667 10 2.667c-1.164 0-2.282.183-3.337.522l1.513 1.513c.596-.12 1.2-.202 1.824-.202Zm-.98 1.045 1.897 1.897c.522.23.944.651 1.173 1.174l1.898 1.897a4.29 4.29 0 0 0 .128-.98c.009-2.274-1.843-4.116-4.116-4.116-.34 0-.66.046-.98.128ZM.842 2.547l2.456 2.457A10.76 10.76 0 0 0-.083 9.542c1.585 4.024 5.5 6.875 10.083 6.875 1.393 0 2.732-.266 3.96-.752l3.135 3.135 1.293-1.293L2.134 1.247l-1.291 1.3Zm6.875 6.875 2.392 2.393a.458.458 0 0 1-.11.018 2.292 2.292 0 0 1-2.292-2.291c0-.046.01-.074.01-.12ZM4.6 6.306 6.205 7.91a4.217 4.217 0 0 0-.33 1.632 4.131 4.131 0 0 0 5.748 3.795l.898.898c-.807.22-1.65.348-2.521.348a8.956 8.956 0 0 1-8.085-5.041 9.077 9.077 0 0 1 2.686-3.236Z" fill="#444"/></g><defs><clipPath id="show-off"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/show.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 3C5.455 3 1.573 5.903 0 10c1.573 4.097 5.455 7 10 7 4.546 0 8.427-2.903 10-7-1.573-4.097-5.454-7-10-7Zm0 11.667c-2.51 0-4.545-2.091-4.545-4.667 0-2.576 2.036-4.667 4.545-4.667 2.51 0 4.546 2.091 4.546 4.667 0 2.576-2.037 4.667-4.546 4.667ZM10 7.2c-1.51 0-2.727 1.25-2.727 2.8 0 1.55 1.218 2.8 2.727 2.8 1.51 0 2.727-1.25 2.727-2.8 0-1.55-1.218-2.8-2.727-2.8Z" fill="#444"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g clip-path="url(#show)"><path d="M10 4.5a8.956 8.956 0 0 1 8.085 5.042A8.956 8.956 0 0 1 10 14.583a8.956 8.956 0 0 1-8.085-5.041A8.956 8.956 0 0 1 10 4.5Zm0-1.833c-4.583 0-8.498 2.85-10.083 6.875 1.585 4.024 5.5 6.875 10.083 6.875s8.497-2.851 10.083-6.875C18.498 5.518 14.583 2.667 10 2.667Zm0 4.583a2.293 2.293 0 1 1-.002 4.585A2.293 2.293 0 0 1 10 7.25Zm0-1.833a4.131 4.131 0 0 0-4.125 4.125A4.131 4.131 0 0 0 10 13.667a4.131 4.131 0 0 0 4.125-4.125A4.131 4.131 0 0 0 10 5.417Z" fill="#444"/></g><defs><clipPath id="show"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/stories/Button.stories.ts

@@ -29,6 +29,10 @@ const meta = {
       description: 'Button right icon from a list of values',
       control: { type: 'select' },
     },
+    href: {
+      description:
+        'If a link is provided, the component will be rendered as NextLink, otherwise as button',
+    },
   },
 }
 
@@ -77,6 +81,16 @@ const figmaInfoDesign = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+export const Link: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+    loading: false,
+    href: 'link.com',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
 export const Primary: Story = {
   args: {
     variant: 'primary',

package/src/stories/CardsTable.stories.js

@@ -0,0 +1,60 @@
+import React from '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 } from '../atoms/CardsTableCell'
+import { Button } from '../atoms/Button'
+
+const meta = {
+  title: 'Design System/Atoms/CardsTable',
+  component: CardsTable,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+export const Primary = {
+  render: (args) => (
+    <CardsTable {...args}>
+      <CardsTableHead>
+        <CardsTableRow>
+          <CardsTableHeader>Game title</CardsTableHeader>
+          <CardsTableHeader>Company address</CardsTableHeader>
+          <CardsTableHeader>Customer service email</CardsTableHeader>
+        </CardsTableRow>
+      </CardsTableHead>
+      <CardsTableBody>
+        <CardsTableRow>
+          <CardsTableCell>Metal Gear Solid 5: The Phantom Pain</CardsTableCell>
+          <CardsTableCell noWrap>
+            Konami Digital Entertainment Co., Ltd. 1-11-1, Ginza, Chuo-ku,
+            Tokyo, 104-0061 Japan
+          </CardsTableCell>
+          <CardsTableCell align="right">konami@fakemail.com</CardsTableCell>
+        </CardsTableRow>
+
+        <CardsTableRow>
+          <CardsTableCell>The Witcher 3</CardsTableCell>
+          <CardsTableCell noWrap>
+            CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
+          </CardsTableCell>
+          <CardsTableCell align="right">cdprojekt@fakemail.com</CardsTableCell>
+        </CardsTableRow>
+
+        <CardsTableRow>
+          <CardsTableCell>Tekken 8</CardsTableCell>
+          <CardsTableCell noWrap>
+            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>
+        </CardsTableRow>
+      </CardsTableBody>
+    </CardsTable>
+  ),
+}

package/src/stories/Changelog.stories.mdx

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

package/src/stories/EmptyState.stories.ts

@@ -38,8 +38,10 @@ export const PrimaryCustom: Story = {
   args: {
     variant: 'primary',
     text: 'There are no videogames yet. You can import videogames to your list.',
-    buttonLabel: 'Import videogames',
-    action: (event) => console.log('click: ', event),
+    button: {
+      label: 'Import videogames',
+      onClick: () => alert('click'),
+    },
   },
   parameters: figmaPrimaryDesign,
 }

package/src/utils/sort.ts

@@ -1,4 +1,5 @@
-import { Order, Row } from '../atoms/CardsTableList'
+import { Row } from '../atoms/CardsTableList'
+import { Order } from '../atoms/CardsTableList'
 
 interface Parse {
   (x: string): string

package/tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/stories/CardsTable.stories.js"],
   "exclude": ["node_modules"]
 }

package/src/atoms/CardsTableListHeader.tsx

@@ -1,32 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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>
-  )
-}