agroptima-design-system 0.25.1 → 0.25.3

package/package.json

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

package/src/atoms/Icon.tsx

@@ -8,9 +8,17 @@ export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
   name: IconType
   className?: string
   title?: string
+  visible?: boolean
 }
 
-export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
+export const Icon: React.FC<IconProps> = ({
+  name,
+  className,
+  visible = true,
+  ...props
+}) => {
+  if (!visible) return null
+
   const cssClasses = classNames('icon', className, {
     rotate: name === 'Loading',
   })

package/src/atoms/Multiselect.tsx

@@ -1,14 +1,19 @@
-import './Multiselect.scss'
+import './Select.scss'
 import React, { useState } from 'react'
 import { Icon } from './Icon'
+import { IconButton } from './Button'
 import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
 
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
 
-export interface MultiselectProps
-  extends React.ComponentPropsWithoutRef<'input'> {
+type InputPropsWithoutOnChange = Omit<
+  React.ComponentPropsWithoutRef<'input'>,
+  'onChange'
+>
+
+export interface MultiselectProps extends InputPropsWithoutOnChange {
   placeholder?: string
   helpText?: string
   variant?: Variant
@@ -19,6 +24,7 @@ export interface MultiselectProps
   selectedLabel?: string
   hideLabel?: boolean
   defaultValue?: string[]
+  onChange?: (value: string[]) => void
 }
 
 export function Multiselect({
@@ -31,6 +37,7 @@ export function Multiselect({
   options,
   label,
   accessibilityLabel,
+  onChange,
   variant = 'primary',
   selectedLabel = 'items selected',
   hideLabel = false,
@@ -40,9 +47,10 @@ export function Multiselect({
   const helpTexts = buildHelpText(helpText, errors)
   const [showOptionsList, setShowOptionsList] = useState(false)
   const [selectedOptions, setSelectedOptions] = useState<string[]>(defaultValue)
+  const hasSelectedOptions = selectedOptions.length > 0
   const cssClasses = classNames('selected-option', className, {
     open: showOptionsList,
-    filled: selectedOptions.length > 0,
+    filled: hasSelectedOptions,
     disabled: disabled,
     invalid: errors?.length,
   })
@@ -53,12 +61,12 @@ export function Multiselect({
 
   function selectOption(id: string) {
     const isOptionSelected = selectedOptions.includes(id)
-    if (isOptionSelected) {
-      return setSelectedOptions(
-        selectedOptions.filter((optionId) => optionId !== id),
-      )
-    }
-    setSelectedOptions([...selectedOptions, id])
+    const options = isOptionSelected
+      ? selectedOptions.filter((optionId) => optionId !== id)
+      : [...selectedOptions, id]
+
+    setSelectedOptions(options)
+    if (onChange !== undefined) onChange(options)
   }
 
   function handleBlur(event: React.FocusEvent<HTMLDivElement>) {
@@ -68,10 +76,15 @@ export function Multiselect({
     }
   }
 
+  function handleClear(event: React.MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation()
+    setSelectedOptions([])
+  }
+
   return (
-    <div className={`multiselect-group ${variant}`}>
-      {!hideLabel && <span className="multiselect-label">{label}</span>}
-      <div className="multiselect-container" onBlur={handleBlur}>
+    <div className={`select-group ${variant}`}>
+      {!hideLabel && <span className="select-label">{label}</span>}
+      <div className="select-container" onBlur={handleBlur}>
         <div
           className={cssClasses}
           tabIndex={0}
@@ -81,14 +94,24 @@ export function Multiselect({
           role="alert"
         >
           <span>
-            {selectedOptions.length > 0
+            {hasSelectedOptions
               ? `${selectedOptions.length} ${selectedLabel}`
               : placeholder}
           </span>
-          <Icon name={showOptionsList ? 'AngleUp' : 'AngleDown'} />
+          <Icon
+            name={showOptionsList ? 'AngleUp' : 'AngleDown'}
+            visible={!hasSelectedOptions}
+          />
+          <IconButton
+            icon="Close"
+            className="clear-button"
+            accessibilityLabel="close"
+            onClick={handleClear}
+            visible={hasSelectedOptions}
+          />
         </div>
         {showOptionsList && (
-          <ul className="multiselect-options" role="listbox">
+          <ul className="select-options" role="listbox">
             {options.map((option) => (
               <Option
                 key={`${name}-${option.id}`}
@@ -101,7 +124,7 @@ export function Multiselect({
         )}
       </div>
       {helpTexts.map((helpText) => (
-        <span key={`${name}-${helpText}`} className="multiselect-help-text">
+        <span key={`${name}-${helpText}`} className="select-help-text">
           {helpText}
         </span>
       ))}

package/src/atoms/QuantitySelector.scss

@@ -33,7 +33,7 @@
           margin: 0;
         }
         input[type='number'] {
-          -moz-appearance: textfield;
+          appearance: textfield;
           text-align: center;
         }
       }

package/src/atoms/Select.scss

@@ -14,6 +14,11 @@
     }
   }
 
+  .clear-button > .icon {
+    width: config.$icon-size-3x;
+    height: config.$icon-size-3x;
+  }
+
   &.primary {
     .select-label {
       @include typography.form-label;
@@ -82,6 +87,20 @@
         &:hover {
           background-color: color_alias.$primary-color-50;
         }
+        > .icon {
+          > svg {
+            border-radius: config.$corner-radius-xxs;
+            .checkbox-active_svg__border {
+              fill: color_alias.$primary-color-600;
+            }
+            .checkbox-active_svg__background {
+              fill: color_alias.$primary-color-600;
+            }
+            .checkbox-inactive_svg__border {
+              fill: color_alias.$neutral-color-600;
+            }
+          }
+        }
       }
     }
 
@@ -106,14 +125,11 @@
     > .icon {
       width: config.$icon-size-3x;
       height: config.$icon-size-3x;
-      > svg {
-        width: 100%;
-        height: 100%;
-      }
     }
   }
 
   .select-options {
+    z-index: depth.$z-dropdown-options;
     margin: 0;
     padding: config.$space-1x 0rem;
     text-align: left;
@@ -121,9 +137,17 @@
     width: 100%;
 
     .option {
+      display: flex;
+      align-items: center;
       cursor: default;
       list-style-type: none;
       padding: config.$space-2x config.$space-3x;
+
+      > .icon {
+        width: config.$icon-size-4x;
+        height: config.$icon-size-4x;
+        margin-right: config.$space-1x;
+      }
     }
   }
 }

package/src/atoms/Select.tsx

@@ -1,6 +1,7 @@
 import './Select.scss'
 import React, { useState } from 'react'
 import { Icon } from './Icon'
+import { IconButton } from './Button'
 import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
 
@@ -47,6 +48,7 @@ export function Select({
   const defaultOption =
     options.find((option) => option.id === defaultValue) || EMPTY_OPTION
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption)
+  const isEmpty = selectedOption.id === EMPTY_OPTION.id
 
   const cssClasses = classNames('selected-option', {
     open: showOptionsList,
@@ -73,6 +75,11 @@ export function Select({
     }
   }
 
+  function handleClear(event: React.MouseEvent<HTMLButtonElement>) {
+    event.stopPropagation()
+    setSelectedOption(EMPTY_OPTION)
+  }
+
   return (
     <div className={classNames('select-group', variant, className)}>
       {!hideLabel && <span className="select-label">{label}</span>}
@@ -86,7 +93,17 @@ export function Select({
           role="alert"
         >
           <span>{selectedOption.label || placeholder}</span>
-          <Icon name={showOptionsList ? 'AngleUp' : 'AngleDown'} />
+          <Icon
+            name={showOptionsList ? 'AngleUp' : 'AngleDown'}
+            visible={isEmpty}
+          />
+          <IconButton
+            icon="Close"
+            className="clear-button"
+            accessibilityLabel="close"
+            onClick={handleClear}
+            visible={!isEmpty}
+          />
         </div>
         {showOptionsList && (
           <ul className="select-options" role="listbox">

package/src/stories/Changelog.mdx

@@ -4,6 +4,16 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.25.3
+
+* Add clear button to Select commponent
+* Add clear button to Multiselect component
+
+# 0.25.2
+
+* Add onChange prop to Multiselect component
+* Add max height to Multiselect component
+
 # 0.25.1
 
 * Replace selected prop by defaultValue in Multiselect component

package/tests/Multiselect.spec.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Multiselect } from '@/atoms/Multiselect'
+import { Placeholder } from 'storybook/internal/components'
 
 describe('Multiselect', () => {
   it('renders', async () => {
@@ -32,7 +33,7 @@ describe('Multiselect', () => {
       />,
     )
 
-    expect(getAllByRole('generic')[1]).toHaveClass('multiselect-group primary')
+    expect(getAllByRole('generic')[1]).toHaveClass('select-group primary')
     expect(getByText('Videogames')).toBeInTheDocument()
     expect(getByText(/Select your favourite videogames.../)).toBeInTheDocument()
     expect(getByText(/This text can help you/i)).toBeInTheDocument()
@@ -111,4 +112,37 @@ describe('Multiselect', () => {
     expect(getByText(/error1/i)).toBeInTheDocument()
     expect(getByText(/error2/i)).toBeInTheDocument()
   })
+  it('clears options selected', async () => {
+    const user = userEvent.setup()
+    const placeholder = 'Select your favourite videogames...'
+    const { getByText } = render(
+      <Multiselect
+        helpText="This text can help you"
+        label="Videogames"
+        name="videogames"
+        options={[
+          {
+            id: '1',
+            label: 'The Legend of Zelda: Ocarina of Time',
+          },
+          {
+            id: '2',
+            label: 'Spyro the Dragon',
+          },
+          {
+            id: '3',
+            label: 'Halo',
+          },
+        ]}
+        placeholder={placeholder}
+        defaultValue={['2', '1']}
+        selectedLabel="videogames selected"
+        variant="primary"
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: /close/i }))
+
+    expect(getByText(placeholder)).toBeInTheDocument()
+  })
 })

package/tests/Select.spec.tsx

@@ -118,4 +118,37 @@ describe('Select', () => {
     expect(getByText(/error1/i)).toBeInTheDocument()
     expect(getByText(/error2/i)).toBeInTheDocument()
   })
+  it('clears option selected', async () => {
+    const user = userEvent.setup()
+    const placeholder = 'Select your favourite gaming system...'
+    const { getByText } = render(
+      <Select
+        defaultValue="2"
+        helpText="This text can help you"
+        id="select-videogames"
+        label="Videogames"
+        name="example"
+        options={[
+          {
+            id: '1',
+            label: 'Nintendo Switch',
+          },
+          {
+            id: '2',
+            label: 'PlayStation 5',
+          },
+          {
+            id: '3',
+            label: 'Xbox Series S/X',
+          },
+        ]}
+        placeholder={placeholder}
+        variant="primary"
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: /close/i }))
+
+    expect(getByText(placeholder)).toBeInTheDocument()
+  })
 })

package/src/atoms/Multiselect.scss

@@ -1,153 +0,0 @@
-@use '../settings/color_alias';
-@use '../settings/typography/form' as typography;
-@use '../settings/config';
-@use '../settings/depth';
-
-.multiselect-group {
-  display: flex;
-  flex-direction: column;
-  gap: config.$space-2x;
-
-  &:has(.selected-option.invalid) {
-    & .multiselect-help-text {
-      @include typography.form-help-text-error;
-    }
-  }
-
-  &.primary {
-    .multiselect-label {
-      @include typography.form-label;
-    }
-
-    .selected-option {
-      border-radius: config.$corner-radius-m;
-      border: 1px solid color_alias.$neutral-color-600;
-      background: color_alias.$neutral-white;
-      @include typography.select-text;
-
-      > .icon {
-        > svg {
-          fill: color_alias.$primary-color-600;
-          path {
-            fill: color_alias.$primary-color-600;
-          }
-        }
-      }
-
-      &.filled {
-        @include typography.select-option-text;
-      }
-
-      &:focus {
-        outline: color_alias.$primary-color-600;
-        border: 1px solid color_alias.$primary-color-600;
-      }
-
-      &.invalid {
-        border: 1px solid color_alias.$error-color-1000;
-      }
-
-      &.disabled {
-        border: 1px solid color_alias.$neutral-color-400;
-        background: color_alias.$neutral-color-50;
-        color: color_alias.$neutral-color-400;
-
-        > .icon {
-          > svg {
-            fill: color_alias.$neutral-color-400;
-            path {
-              fill: color_alias.$neutral-color-400;
-            }
-          }
-        }
-      }
-    }
-
-    .multiselect-options {
-      border-radius: config.$corner-radius-xxs;
-      background: color_alias.$neutral-white;
-      box-shadow:
-        0px 9px 28px 8px rgba(0, 0, 0, 0.05),
-        0px 6px 16px 0px rgba(0, 0, 0, 0.08),
-        0px 3px 6px -4px rgba(0, 0, 0, 0.12);
-
-      .option {
-        background: color_alias.$neutral-white;
-        @include typography.select-option-text;
-
-        &:hover {
-          background-color: color_alias.$primary-color-50;
-        }
-
-        > .icon {
-          > svg {
-            border-radius: config.$corner-radius-xxs;
-            .checkbox-active_svg__border {
-              fill: color_alias.$primary-color-600;
-            }
-            .checkbox-active_svg__background {
-              fill: color_alias.$primary-color-600;
-            }
-            .checkbox-inactive_svg__border {
-              fill: color_alias.$neutral-color-600;
-            }
-          }
-        }
-      }
-    }
-
-    .multiselect-help-text {
-      @include typography.form-help-text;
-    }
-  }
-
-  .multiselect-container {
-    display: inline-block;
-    text-align: left;
-    position: relative;
-  }
-
-  .selected-option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: config.$space-2x config.$space-3x;
-    cursor: default;
-
-    > .icon {
-      width: config.$icon-size-3x;
-      height: config.$icon-size-3x;
-      > svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .multiselect-options {
-    z-index: depth.$z-dropdown-options;
-    margin: 0;
-    padding: config.$space-1x 0rem;
-    text-align: left;
-    position: absolute;
-    width: 100%;
-
-    .option {
-      display: flex;
-      align-items: center;
-      cursor: default;
-      list-style-type: none;
-      padding: config.$space-2x config.$space-3x;
-
-      > .icon {
-        width: config.$icon-size-4x;
-        height: config.$icon-size-4x;
-        margin-right: config.$space-1x;
-        > svg {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-}