agroptima-design-system 0.3.2 → 0.5.0

package/src/atoms/Multiselect.tsx

@@ -6,13 +6,14 @@ export type Variant = 'primary'
 export type Option = { id: string; label: string }
 
 export interface MultiselectProps
-  extends React.ComponentPropsWithoutRef<'select'> {
+  extends React.ComponentPropsWithoutRef<'input'> {
   placeholder?: string
   helpText?: string
   variant?: Variant
   options: Option[]
-  invalid?: boolean
+  errors?: string[]
   label: string
+  accessibilityLabel?: string
   selectedLabel?: string
   hideLabel?: boolean
   selected?: Option[]
@@ -23,13 +24,15 @@ export function Multiselect({
   helpText,
   variant = 'primary',
   disabled,
-  invalid,
+  errors,
   name,
   options,
   label,
+  accessibilityLabel,
   selectedLabel = 'items selected',
   hideLabel = false,
   selected,
+  ...props
 }: MultiselectProps): React.JSX.Element {
   const [showOptionsList, setShowOptionsList] = useState(false)
   const [selectedOptionsIds, setSelectedOptionsIds] = useState<string[]>(
@@ -39,7 +42,7 @@ export function Multiselect({
   const optionsListOpenClass = showOptionsList ? 'open' : ''
   const filledSelectClass = selectedOptionsIds.length > 0 ? 'filled' : ''
   const disabledClass = disabled ? 'disabled' : ''
-  const invalidClass = invalid ? 'invalid' : ''
+  const invalidClass = errors ? 'invalid' : ''
 
   const cssClasses = [
     'selected-option',
@@ -74,15 +77,22 @@ export function Multiselect({
     return selectedOptionsIds.includes(optionId)
   }
 
+  function handleBlur(event: React.FocusEvent<HTMLDivElement>) {
+    const isAComponentElement = event.relatedTarget
+    if (!isAComponentElement) {
+      setShowOptionsList(false)
+    }
+  }
+
   return (
     <div className={`multiselect-group ${variant}`}>
       {!hideLabel && <span className="multiselect-label">{label}</span>}
-      <div className="multiselect-container">
+      <div className="multiselect-container" onBlur={handleBlur}>
         <div
           className={cssClasses}
           tabIndex={0}
           onClick={handleOptionsList}
-          aria-label={label}
+          aria-label={accessibilityLabel || label}
           aria-live="assertive"
           role="alert"
         >
@@ -99,6 +109,7 @@ export function Multiselect({
               return (
                 <li
                   className="option"
+                  tabIndex={0}
                   role="option"
                   aria-selected={isOptionSelected(option.id)}
                   data-option={option}
@@ -119,12 +130,25 @@ export function Multiselect({
           </ul>
         )}
       </div>
-      {helpText && (
+      {helpText && !errors && (
         <span className={`multiselect-help-text ${invalidClass}`}>
           {helpText}
         </span>
       )}
-      <input type="hidden" name={name} value={selectedOptionsIds.toString()} />
+      {errors &&
+        errors?.map((error, index) => {
+          return (
+            <span key={`error-${index}`} className="multiselect-help-text">
+              {error}
+            </span>
+          )
+        })}
+      <input
+        type="hidden"
+        name={name}
+        value={selectedOptionsIds.toString()}
+        {...props}
+      />
     </div>
   )
 }

package/src/atoms/Select.tsx

@@ -5,13 +5,14 @@ import { Icon } from './Icon'
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
 
-export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {
+export interface SelectProps extends React.ComponentPropsWithoutRef<'input'> {
   placeholder?: string
   helpText?: string
   variant?: Variant
   options: Option[]
-  invalid?: boolean
+  errors?: string[]
   label: string
+  accessibilityLabel?: string
   hideLabel?: boolean
   selected?: Option
 }
@@ -21,12 +22,14 @@ export function Select({
   helpText,
   variant = 'primary',
   disabled,
-  invalid,
+  errors,
   name,
   options,
   label,
+  accessibilityLabel,
   hideLabel = false,
   selected,
+  ...props
 }: SelectProps): React.JSX.Element {
   const [showOptionsList, setShowOptionsList] = useState(false)
   const [selectedOption, setSelectedOption] = useState<Option>({
@@ -37,7 +40,7 @@ export function Select({
   const optionsListOpenClass = showOptionsList ? 'open' : ''
   const filledSelectClass = selectedOption.id ? 'filled' : ''
   const disabledClass = disabled ? 'disabled' : ''
-  const invalidClass = invalid ? 'invalid' : ''
+  const invalidClass = errors ? 'invalid' : ''
 
   const cssClasses = [
     'selected-option',
@@ -52,23 +55,33 @@ export function Select({
   }
 
   function selectOption(option: Option) {
+    const { onChange } = props
     setSelectedOption(option)
     setShowOptionsList(false)
+
+    if (onChange !== undefined) onChange(option.id)
   }
 
   function handleSelectIcon() {
     return showOptionsList ? 'AngleUp' : 'AngleDown'
   }
 
+  function handleBlur(event: React.FocusEvent<HTMLDivElement>) {
+    const isAComponentElement = event.relatedTarget
+    if (!isAComponentElement) {
+      setShowOptionsList(false)
+    }
+  }
+
   return (
     <div className={`select-group ${variant}`}>
       {!hideLabel && <span className="select-label">{label}</span>}
-      <div className="select-container">
+      <div className="select-container" onBlur={handleBlur}>
         <div
           className={cssClasses}
           tabIndex={0}
           onClick={handleOptionsList}
-          aria-label={label}
+          aria-label={accessibilityLabel || label}
           aria-live="assertive"
           role="alert"
         >
@@ -81,6 +94,7 @@ export function Select({
               return (
                 <li
                   className="option"
+                  tabIndex={0}
                   role="option"
                   aria-selected={selectedOption.id === option.id}
                   data-option={option}
@@ -94,8 +108,18 @@ export function Select({
           </ul>
         )}
       </div>
-      {helpText && <span className="select-help-text">{helpText}</span>}
-      <input type="hidden" name={name} value={selectedOption.id} />
+      {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>
+          )
+        })}
+      <input type="hidden" name={name} value={selectedOption.id} {...props} />
     </div>
   )
 }

package/src/icons/delete.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M3.143 17.778C3.143 19 4.17 20 5.429 20h9.142c1.258 0 2.286-1 2.286-2.222V4.444H3.143v13.334ZM5.429 6.667h9.142v11.11H5.43V6.668ZM14 1.11 12.857 0H7.143L6 1.111H2v2.222h16V1.111h-4Z" fill="#444"/></svg>

package/src/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g clip-path="url(#edit__a)"><path d="M12.287 6.689 13.31 7.71 3.244 17.778H2.222v-1.022L12.287 6.689Zm4-6.689c-.278 0-.567.111-.778.322l-2.033 2.034 4.166 4.166 2.033-2.033a1.107 1.107 0 0 0 0-1.567l-2.6-2.6A1.09 1.09 0 0 0 16.287 0Zm-4 3.544L0 15.834V20h4.166L16.453 7.711l-4.166-4.167Z" fill="#444"/></g><defs><clipPath id="edit__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/index.tsx

@@ -7,7 +7,9 @@ import Check from './check.svg'
 import CheckboxActive from './checkbox-active.svg'
 import CheckboxInactive from './checkbox-inactive.svg'
 import Close from './close.svg'
+import Delete from './delete.svg'
 import Done from './done.svg'
+import Edit from './edit.svg'
 import EditColumns from './edit-columns.svg'
 import EmptyState from './empty-customize.svg'
 import Error from './error.svg'
@@ -30,7 +32,9 @@ export {
   CheckboxActive,
   CheckboxInactive,
   Close,
+  Delete,
   Done,
+  Edit,
   EditColumns,
   EmptyState,
   Error,

package/src/stories/Button.stories.ts

@@ -12,6 +12,10 @@ const meta = {
     label: {
       description: 'Button text content',
     },
+    accessibilityLabel: {
+      description:
+        'Describes the button action. If empty, label content will be used',
+    },
     variant: {
       description: 'Button variant used from a list of values',
     },
@@ -29,6 +33,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,11 +85,22 @@ 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',
     disabled: false,
     loading: false,
+    accessibilityLabel: 'Triggers a custom action',
   },
   parameters: figmaPrimaryDesign,
 }

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,27 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.5.0
+
+- IconButton component is added to Storybook.
+- Edit and Delete icons have been added.
+- Button outlined disabled styles have been changed to make them look the same as the filled disabled styles.
+- `accessibilityLabel` specific prop has been added as optional to Button, Input, Select and Multiselect components.
+- Select and Multiselect can be closed too when losing focus.
+- Select and Multiselect accept native props.
+- Select component triggers `onChange` event prop.
+
+BREAKING CHANGES
+- Input, Select and Multiselect components accept an `errors` array prop. Previous `invalid` prop is deprecated.
+
+## 0.4.0
+
+- CardsTable component suitable to create custom tables is added to Storybook.
+- Cell `align` property has been added to CardsTableCell component.
+- Cell `noWrap` property has been added to CardsTableCell component.
+- Button component can be rendered as NextLink if the `href` prop is provided.
+- Empty State component now accepts Button props.
+
 ## 0.3.2
 
 - Updated show and show-off icons.

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/stories/IconButton.stories.ts

@@ -0,0 +1,58 @@
+import { StoryObj } from '@storybook/react'
+import { IconButton } from '../atoms/IconButton'
+
+const meta = {
+  title: 'Design System/Atoms/IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  argTypes: {
+    accessibilityLabel: {
+      description: 'Accessible name & description of the element',
+    },
+    variant: {
+      description: 'IconButton variant used from a list of values',
+    },
+    disabled: {
+      description: 'Is the button in disabled state?',
+    },
+    icon: {
+      description: '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',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=1873-922&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Link: Story = {
+  args: {
+    icon: 'Edit',
+    variant: 'primary',
+    accessibilityLabel: 'Edit game',
+    href: 'link.com',
+    disabled: false,
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const Primary: Story = {
+  args: {
+    icon: 'Delete',
+    variant: 'primary',
+    accessibilityLabel: 'Delete game',
+    disabled: false,
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Input.stories.ts

@@ -9,6 +9,10 @@ const meta = {
     label: {
       description: 'Label for the input',
     },
+    accessibilityLabel: {
+      description:
+        'Describes the input purpose. If empty, label content will be used',
+    },
     placeholder: {
       description: 'Optional input placeholder text',
     },
@@ -33,6 +37,10 @@ const meta = {
     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.',
+    },
   },
 }
 
@@ -49,6 +57,7 @@ type Story = StoryObj<typeof meta>
 export const Primary: Story = {
   args: {
     label: 'Email:',
+    accessibilityLabel: 'Fill the form email',
     placeholder: 'Email...',
     variant: 'primary',
     disabled: false,
@@ -73,3 +82,19 @@ export const Password: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const WithErrors: Story = {
+  args: {
+    label: 'Email:',
+    accessibilityLabel: 'Fill the form email',
+    placeholder: 'Email...',
+    variant: 'primary',
+    disabled: false,
+    helpText: 'This text can help you',
+    name: 'email',
+    type: 'email',
+    id: 'email_input',
+    errors: ['error1', 'error2'],
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Multiselect.stories.ts

@@ -9,6 +9,10 @@ const meta = {
     label: {
       description: 'Label for the select',
     },
+    accessibilityLabel: {
+      description:
+        'Describes the select purpose. If empty, label content will be used',
+    },
     selectedLabel: {
       description: 'Label used when having selected values',
     },
@@ -18,9 +22,6 @@ const meta = {
     disabled: {
       description: 'Is the select in disabled state?',
     },
-    invalid: {
-      description: 'Is the select in disabled state?',
-    },
     helpText: {
       description: 'Optional help text',
     },
@@ -36,6 +37,10 @@ const meta = {
     selected: {
       description: 'Array of values to be displayed as selected',
     },
+    errors: {
+      description:
+        'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
+    },
   },
 }
 
@@ -53,11 +58,11 @@ export const Primary: Story = {
   args: {
     variant: 'primary',
     disabled: false,
-    invalid: false,
     hideLabel: false,
     helpText: 'This text can help you',
     name: 'example',
     label: 'Videogames',
+    accessibilityLabel: 'Select your favourite videogames options',
     selectedLabel: 'videogames selected',
     placeholder: 'Select your favourite videogames...',
     options: [
@@ -68,6 +73,7 @@ export const Primary: Story = {
       { id: '5', label: 'Super Mario Bros' },
       { id: '6', label: 'Red Dead Redemption' },
     ],
+    id: 'multiselect-videogames',
   },
   parameters: figmaPrimaryDesign,
 }
@@ -76,7 +82,6 @@ export const PrimaryWithSelectedOptions: Story = {
   args: {
     variant: 'primary',
     disabled: false,
-    invalid: false,
     hideLabel: false,
     helpText: 'This text can help you',
     name: 'example',
@@ -95,6 +100,32 @@ export const PrimaryWithSelectedOptions: Story = {
       { id: '2', label: 'Spyro the Dragon' },
       { id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
     ],
+    id: 'multiselect-videogames',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const PrimaryWithErrors: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+    hideLabel: false,
+    helpText: 'This text can help you',
+    name: 'example',
+    label: 'Videogames',
+    accessibilityLabel: 'Select your favourite videogames options',
+    selectedLabel: 'videogames selected',
+    placeholder: 'Select your favourite videogames...',
+    options: [
+      { id: '1', label: 'The Legend of Zelda: Ocarina of Time' },
+      { id: '2', label: 'Spyro the Dragon' },
+      { id: '3', label: 'Halo' },
+      { id: '4', label: 'Tetris' },
+      { id: '5', label: 'Super Mario Bros' },
+      { id: '6', label: 'Red Dead Redemption' },
+    ],
+    id: 'multiselect-videogames',
+    errors: ['error1', 'error2'],
   },
   parameters: figmaPrimaryDesign,
 }

package/src/stories/Select.stories.ts

@@ -9,6 +9,10 @@ const meta = {
     label: {
       description: 'Label for the select',
     },
+    accessibilityLabel: {
+      description:
+        'Describes the select purpose. If empty, label content will be used',
+    },
     variant: {
       description: 'Select variant used',
     },
@@ -33,6 +37,10 @@ const meta = {
     selected: {
       description: 'Value to be displayed as selected',
     },
+    errors: {
+      description:
+        'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
+    },
   },
 }
 
@@ -50,10 +58,10 @@ export const Primary: Story = {
   args: {
     variant: 'primary',
     disabled: false,
-    invalid: false,
     helpText: 'This text can help you',
     name: 'example',
     label: 'Videogames',
+    accessibilityLabel: 'Select your favourite gaming system options',
     hideLabel: false,
     placeholder: 'Select your favourite gaming system...',
     options: [
@@ -61,6 +69,8 @@ export const Primary: Story = {
       { id: '2', label: 'PlayStation 5' },
       { id: '3', label: 'Xbox Series S/X' },
     ],
+    id: 'select-videogames',
+    onChange: (optionId) => console.log('onChange optionId:', optionId),
   },
   parameters: figmaPrimaryDesign,
 }
@@ -69,7 +79,6 @@ export const PrimaryWithSelectedOptions: Story = {
   args: {
     variant: 'primary',
     disabled: false,
-    invalid: false,
     helpText: 'This text can help you',
     name: 'example',
     label: 'Videogames',
@@ -81,6 +90,29 @@ export const PrimaryWithSelectedOptions: Story = {
       { id: '3', label: 'Xbox Series S/X' },
     ],
     selected: { id: '2', label: 'PlayStation 5' },
+    id: 'select-videogames',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const PrimaryWithErrors: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+    helpText: 'This text can help you',
+    name: 'example',
+    label: 'Videogames',
+    accessibilityLabel: 'Select your favourite gaming system options',
+    hideLabel: false,
+    placeholder: 'Select your favourite gaming system...',
+    options: [
+      { id: '1', label: 'Nintendo Switch' },
+      { id: '2', label: 'PlayStation 5' },
+      { id: '3', label: 'Xbox Series S/X' },
+    ],
+    id: 'select-videogames',
+    errors: ['error1', 'error2'],
+    onChange: (optionId) => console.log('onChange optionId:', optionId),
   },
   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"]
 }