agroptima-design-system 0.1.0 → 0.1.1

package/.nvmrc

@@ -0,0 +1 @@
+18.18

package/package.json

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

package/src/atoms/Icon.tsx

@@ -5,9 +5,14 @@ export type IconType = keyof typeof icons
 
 export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
   name: IconType
+  className?: string
 }
 
-export const Icon: React.FC<IconProps> = ({ name, ...props }) => {
-  const cssClasses = ['icon', name === 'Loading' ? 'rotate' : ''].join(' ')
+export const Icon: React.FC<IconProps> = ({ name, className, ...props }) => {
+  const cssClasses = [
+    'icon',
+    className,
+    name === 'Loading' ? 'rotate' : '',
+  ].join(' ')
   return <span className={cssClasses}>{icons[name](props)}</span>
 }

package/src/atoms/Input.scss

@@ -11,7 +11,7 @@
     padding-left: 12px;
   }
 
-  &:has(.input:invalid, .input:required) {
+  &:has(.input.invalid) {
     & .input-help-text {
       color: color_alias.$error-color-1000;
     }
@@ -45,7 +45,7 @@
         border: 1px solid color_alias.$primary-color-1000;
       }
 
-      &:invalid {
+      &.invalid {
         border: 1px solid color_alias.$error-color-1000;
       }
 
@@ -61,7 +61,7 @@
     }
 
     .input-help-text {
-      @include typography.input-help-text;
+      @include typography.form-help-text;
     }
 
     .input-label {
@@ -76,8 +76,6 @@
 
     .icon {
       position: absolute;
-      top: 0.75rem;
-      left: 0.7rem;
       width: config.$icon-size-3x;
       height: config.$icon-size-3x;
       > svg {
@@ -85,6 +83,16 @@
         height: 100%;
       }
     }
+
+    .left-icon {
+      top: 0.75rem;
+      left: 0.7rem;
+    }
+
+    .password-icon {
+      top: 0.75rem;
+      right: 0.7rem;
+    }
   }
 
   .input {

package/src/atoms/Input.tsx

@@ -1,4 +1,5 @@
 import './Input.scss'
+import React, { useState } from 'react'
 import { Icon, IconType } from './Icon'
 
 export type InputVariant = 'primary'
@@ -10,6 +11,7 @@ export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
   helpText?: string
   variant?: InputVariant
   id: string
+  invalid?: boolean
 }
 
 export function Input({
@@ -22,10 +24,28 @@ export function Input({
   type = 'text',
   name,
   id,
+  invalid,
   ...props
 }: InputProps): React.JSX.Element {
+  const [showPassword, setShowPassword] = useState(false)
   const iconClass = icon ? 'with-icon' : ''
-  const cssClasses = ['input', iconClass].join(' ')
+  const invalidClass = invalid ? 'invalid' : ''
+  const cssClasses = ['input', iconClass, invalidClass].join(' ')
+
+  function handlePasswordIcon() {
+    return showPassword ? 'ShowOff' : 'Show'
+  }
+
+  function handleInputType() {
+    if (type !== 'password') return type
+
+    return showPassword ? 'text' : 'password'
+  }
+
+  function handlePasswordVisibility() {
+    setShowPassword(!showPassword)
+  }
+
   return (
     <div className={`input-group ${variant}`}>
       {!hideLabel && (
@@ -34,16 +54,23 @@ export function Input({
         </label>
       )}
       <div className="input-container">
-        {icon && <Icon name={icon} />}
+        {icon && <Icon className="left-icon" name={icon} />}
         <input
           id={id}
           className={cssClasses}
           disabled={disabled}
-          type={type}
+          type={handleInputType()}
           name={name}
           aria-label={label}
           {...props}
         />
+        {type === 'password' && (
+          <Icon
+            className="password-icon"
+            name={handlePasswordIcon()}
+            onClick={handlePasswordVisibility}
+          />
+        )}
       </div>
       {helpText && <span className="input-help-text">{helpText}</span>}
     </div>

package/src/atoms/Select.scss

@@ -0,0 +1,124 @@
+@use '../settings/color_alias';
+@use '../settings/typography';
+@use '../settings/config';
+
+.select-group {
+  display: flex;
+  flex-direction: column;
+  gap: config.$space-2x;
+
+  &:has(.selected-option.invalid) {
+    & .select-help-text {
+      color: color_alias.$error-color-1000;
+    }
+  }
+
+  &.primary {
+    .select-label {
+      @include typography.form-label;
+    }
+
+    .selected-option {
+      border-radius: config.$corner-radius-m;
+      border: 1px solid color_alias.$neutral-color-300;
+      background: color_alias.$neutral-white;
+      @include typography.select-text;
+
+      > .icon {
+        > svg {
+          fill: color_alias.$primary-color-1000;
+          path {
+            fill: color_alias.$primary-color-1000;
+          }
+        }
+      }
+
+      &.filled {
+        @include typography.select-option-text;
+      }
+
+      &:focus {
+        outline: color_alias.$primary-color-1000;
+        border: 1px solid color_alias.$primary-color-1000;
+      }
+
+      &.invalid {
+        border: 1px solid color_alias.$error-color-1000;
+      }
+
+      &.disabled {
+        border: 1px solid color_alias.$neutral-color-200;
+        background: color_alias.$neutral-color-50;
+        color: color_alias.$neutral-color-200;
+
+        > .icon {
+          > svg {
+            fill: color_alias.$neutral-color-200;
+            path {
+              fill: color_alias.$neutral-color-200;
+            }
+          }
+        }
+      }
+    }
+
+    .select-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;
+        }
+      }
+    }
+
+    .select-help-text {
+      @include typography.form-help-text;
+    }
+  }
+
+  .select-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%;
+      }
+    }
+  }
+
+  .select-options {
+    margin: 0;
+    padding: config.$space-1x 0rem;
+    text-align: left;
+    position: absolute;
+    width: 100%;
+
+    .option {
+      cursor: default;
+      list-style-type: none;
+      padding: config.$space-2x config.$space-3x;
+    }
+  }
+}

package/src/atoms/Select.tsx

@@ -0,0 +1,97 @@
+import './Select.scss'
+import React, { useState } from 'react'
+import { Icon } from './Icon'
+
+export type Variant = 'primary'
+export type Option = { id: string; label: string }
+
+export interface SelectProps extends React.ComponentPropsWithoutRef<'select'> {
+  placeholder?: string
+  helpText?: string
+  variant?: Variant
+  options: Option[]
+  invalid?: boolean
+  label: string
+}
+
+export function Select({
+  placeholder,
+  helpText,
+  variant = 'primary',
+  disabled,
+  invalid,
+  name,
+  options,
+  label,
+}: SelectProps): React.JSX.Element {
+  const [showOptionsList, setShowOptionsList] = useState(false)
+  const [selectedOption, setSelectedOption] = useState<Option>({
+    id: '',
+    label: '',
+  })
+
+  const optionsListOpenClass = showOptionsList ? 'open' : ''
+  const filledSelectClass = selectedOption.id ? 'filled' : ''
+  const disabledClass = disabled ? 'disabled' : ''
+  const invalidClass = invalid ? 'invalid' : ''
+
+  const cssClasses = [
+    'selected-option',
+    optionsListOpenClass,
+    filledSelectClass,
+    disabledClass,
+    invalidClass,
+  ].join(' ')
+
+  function handleOptionsList() {
+    if (!disabled) setShowOptionsList(!showOptionsList)
+  }
+
+  function selectOption(option: Option) {
+    setSelectedOption(option)
+    setShowOptionsList(false)
+  }
+
+  function handleSelectIcon() {
+    return showOptionsList ? 'AngleUp' : 'AngleDown'
+  }
+
+  return (
+    <div className={`select-group ${variant}`}>
+      <span className="select-label">{label}</span>
+      <div className="select-container">
+        <div
+          className={cssClasses}
+          tabIndex={0}
+          onClick={handleOptionsList}
+          aria-label={label}
+          aria-live="assertive"
+          role="alert"
+        >
+          <span>{selectedOption.label || placeholder}</span>
+          <Icon name={handleSelectIcon()} />
+        </div>
+        {showOptionsList && (
+          <ul className="select-options" role="listbox">
+            {options.map((option) => {
+              return (
+                <li
+                  className="option"
+                  role="option"
+                  aria-selected={selectedOption.id === option.id}
+                  data-option={option}
+                  key={option.id}
+                  onClick={() => selectOption(option)}
+                >
+                  {option.label}
+                </li>
+              )
+            })}
+          </ul>
+        )}
+      </div>
+      {helpText && <span className="select-help-text">{helpText}</span>}
+      <input type="hidden" name={name} value={selectedOption.id} />
+    </div>
+  )
+}

package/src/icons/index.tsx

@@ -12,6 +12,8 @@ import Export from './export.svg'
 import Info from './info.svg'
 import Loading from './loading.svg'
 import Search from './search.svg'
+import Show from './show.svg'
+import ShowOff from './show-off.svg'
 import Warning from './warning.svg'
 
 export {
@@ -29,5 +31,7 @@ export {
   Info,
   Loading,
   Search,
+  Show,
+  ShowOff,
   Warning,
 }

package/src/icons/show-off.svg

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

package/src/icons/show.svg

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

package/src/settings/_typography.scss

@@ -5,7 +5,7 @@
 $font-base-family:
   Noto Sans,
   sans-serif;
-$text-base-size: 16px;
+$text-base-size: 1rem;
 $text-base-style: normal;
 $font-base-weight: 600;
 $line-height-base: normal;
@@ -14,6 +14,17 @@ $font-base-stretch: semi-condensed;
 $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-base-size}/#{$line-height-base}
   $font-base-family;
 
+@mixin form-help-text {
+  font-style: $text-base-style;
+  font-variant: $text-base-style;
+  font-weight: 300;
+  font-family: $font-base-family;
+  color: color_alias.$neutral-color-400;
+  // We need to apply a relation between font-size and line-height so the box envoloping the span
+  // is the most accurate in terms of top and bottom blank space.
+  font-size: 0.75rem;
+  line-height: 0.6875rem;
+}
 @mixin input-text {
   font-style: $text-base-style;
   font-variant: $text-base-style;
@@ -29,16 +40,21 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
   color: color_alias.$neutral-color-300;
   // We shouldn't define a font-size for the placeholder: https://stackoverflow.com/questions/30916387/placeholder-font-size-bigger-than-16px
 }
-@mixin input-help-text {
+@mixin select-text {
   font-style: $text-base-style;
   font-variant: $text-base-style;
-  font-weight: 300;
+  font-weight: 400;
   font-family: $font-base-family;
-  color: color_alias.$neutral-color-400;
-  // We need to apply a relation between font-size and line-height so the box envoloping the span
-  // is the most accurate in terms of top and bottom blank space. We'll check this with rem units.
-  font-size: 12px;
-  line-height: 11px;
+  font-size: 1em;
+  color: color_alias.$neutral-color-300;
+}
+@mixin select-option-text {
+  font-style: $text-base-style;
+  font-variant: $text-base-style;
+  font-weight: 400;
+  font-family: $font-base-family;
+  font-size: 1em;
+  color: color_alias.$neutral-color-1000;
 }
 @mixin form-label {
   font-style: $text-base-style;

package/src/stories/Input.stories.ts

@@ -59,3 +59,17 @@ export const Primary: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const Password: Story = {
+  args: {
+    label: 'Password:',
+    placeholder: 'Password...',
+    variant: 'primary',
+    disabled: false,
+    helpText: 'This text can help you',
+    name: 'login_password',
+    type: 'password',
+    id: 'password_input',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Select.stories.ts

@@ -0,0 +1,62 @@
+import { Select } from '../atoms/Select'
+import { StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Design System/Atoms/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      description: 'Label for the select',
+    },
+    variant: {
+      description: 'Select variant used',
+    },
+    disabled: {
+      description: 'Is the select in disabled state?',
+    },
+    required: {
+      description: 'Is the select in required state?',
+    },
+    helpText: {
+      description: 'Optional help text',
+    },
+    name: {
+      description: 'Set name property',
+    },
+    placeholder: {
+      description: 'Set select placeholder text',
+    },
+    options: {
+      description: 'Array of values to be displayed on the select list',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=188-1956&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+    required: false,
+    helpText: 'This text can help you',
+    name: 'example',
+    label: 'Videogames',
+    placeholder: 'Select your favourite gaming system...',
+    options: [
+      { id: '1', label: 'Nintendo Switch' },
+      { id: '2', label: 'PlayStation 5' },
+      { id: '3', label: 'Xbox Series S/X' },
+    ],
+  },
+  parameters: figmaPrimaryDesign,
+}