agroptima-design-system 0.4.0 → 0.5.0

package/package.json

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

package/src/atoms/Button.scss

@@ -146,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

@@ -4,6 +4,7 @@ import { Icon, IconType } from './Icon'
 
 export interface BaseButtonProps {
   label: string
+  accessibilityLabel?: string
   leftIcon?: IconType
   rightIcon?: IconType
   variant?: ButtonVariant
@@ -44,6 +45,7 @@ export type ButtonVariant =
 
 export function Button({
   label,
+  accessibilityLabel,
   leftIcon,
   rightIcon,
   disabled,
@@ -58,7 +60,12 @@ export function Button({
 
   if (hasHref(props)) {
     return (
-      <NextLink href={props.href || ''} className={cssClasses} {...props}>
+      <NextLink
+        href={props.href || ''}
+        className={cssClasses}
+        aria-label={accessibilityLabel || label}
+        {...props}
+      >
         {leftIcon && <Icon name={leftIcon} />}
         {label}
         {rightIcon && <Icon name={rightIcon} />}
@@ -67,7 +74,12 @@ export function Button({
   }
 
   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/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>
   )
 }

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',
     },
@@ -96,6 +100,7 @@ export const Primary: Story = {
     variant: 'primary',
     disabled: false,
     loading: false,
+    accessibilityLabel: 'Triggers a custom action',
   },
   parameters: figmaPrimaryDesign,
 }

package/src/stories/Changelog.stories.mdx

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

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,
 }