agroptima-design-system 0.22.0 → 0.22.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.22.0",
+  "version": "0.22.2-beta.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Alert.scss

@@ -7,8 +7,8 @@
   display: flex;
   justify-content: space-between;
   padding: config.$space-2x config.$space-3x;
-  align-items: center;
   gap: config.$space-2x;
+  align-items: flex-start;
   border-radius: config.$corner-radius-xxs;
   pointer-events: none;
 
@@ -19,7 +19,7 @@
   .information-container {
     display: flex;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
     gap: config.$space-2x;
   }
 
@@ -28,8 +28,10 @@
   }
 
   .icon {
+    margin-top: 2px;
     width: config.$icon-size-5x;
     height: config.$icon-size-5x;
+    min-width: config.$icon-size-5x;
     > svg {
       width: 100%;
       height: 100%;
@@ -38,9 +40,10 @@
 
   .icon-button {
     pointer-events: auto;
+    margin-top: 5px;
     .icon {
-      width: config.$icon-size-2x;
-      height: config.$icon-size-2x;
+      width: config.$icon-size-3x;
+      height: config.$icon-size-3x;
 
       > svg {
         fill: color_alias.$neutral-color-400;

package/src/atoms/Button/IconButton.scss

@@ -39,7 +39,32 @@
         }
       }
     }
+  }
+
+  &.secondary {
+    > .icon {
+      > svg {
+        fill: color_alias.$neutral-white;
+        path {
+          fill: color_alias.$neutral-white;
+        }
+      }
+    }
+
+    &:hover {
+      > .icon {
+        > svg {
+          fill: color_alias.$neutral-color-1000;
+          path {
+            fill: color_alias.$neutral-color-1000;
+          }
+        }
+      }
+    }
+  }
 
+  &.primary,
+  &.secondary {
     &:disabled {
       > .icon {
         > svg {

package/src/atoms/Button/IconButton.tsx

@@ -3,7 +3,7 @@ import { Icon, IconType } from '../Icon'
 import { classNames } from '../../utils/classNames'
 import { BaseButtonProps, BaseButton } from './BaseButton'
 
-export type Variant = 'primary'
+export type Variant = 'primary' | 'secondary'
 
 interface CustomProps {
   icon: IconType

package/src/atoms/Input.scss

@@ -3,22 +3,107 @@
 @use '../settings/config';
 
 .input-group {
+  @include typography.input-text;
   display: flex;
   flex-direction: column;
   gap: config.$space-2x;
 
-  .input {
-    padding-left: 12px;
+  .input-help-text {
+    @include typography.form-help-text;
   }
 
-  &:has(.input.invalid) {
-    & .input-help-text {
-      @include typography.form-help-text-error;
+  .input-label {
+    @include typography.form-label;
+  }
+
+  &.invalid .input-help-text {
+    @include typography.form-help-text-error;
+  }
+
+  .input-container {
+    position: relative;
+    gap: config.$space-2x;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    padding: config.$space-2x config.$space-3x config.$space-2x;
+    input[type='date'] {
+      min-width: -webkit-fill-available;
+    }
+    input[type='number'] {
+      text-align: right;
+    }
+    input::placeholder,
+    textarea::placeholder {
+      @include typography.input-placeholder-text;
+    }
+    input,
+    input:hover,
+    input:focus,
+    input:active,
+    input:focus-visible,
+    input:focus-within,
+    input:visited,
+    textarea,
+    textarea:hover,
+    textarea:focus,
+    textarea:active,
+    textarea:focus-visible,
+    textarea:focus-within,
+    textarea:visited {
+      @include typography.input-text;
+      width: 100%;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: 0;
+      outline: none;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+    }
+    .input-suffix {
+      color: color_alias.$neutral-color-600;
+    }
+    .icon {
+      min-width: config.$icon-size-5x;
+      width: config.$icon-size-5x;
+      height: config.$icon-size-5x;
+    }
+
+    .left-icon {
+      top: 0.9rem;
+      left: 0.7rem;
     }
   }
 
   &.primary {
+    &.invalid .input-container {
+      border: 1px solid color_alias.$error-color-1000;
+    }
     .input-container {
+      border-radius: config.$corner-radius-m;
+      border: 1px solid color_alias.$neutral-color-600;
+      background: color_alias.$neutral-white;
+
+      &:has(input:focus),
+      &:has(textarea:focus) {
+        outline: color_alias.$primary-color-600;
+        border: 1px solid color_alias.$primary-color-600;
+      }
+
+      &:has(input:disabled),
+      &:has(textarea:disabled) {
+        border: 1px solid color_alias.$neutral-color-400;
+        background: color_alias.$neutral-color-50;
+        color: color_alias.$neutral-color-400;
+
+        input::placeholder,
+        textarea::placeholder {
+          color: color_alias.$neutral-color-400;
+        }
+      }
       .icon {
         > svg {
           fill: color_alias.$neutral-color-400;
@@ -37,82 +122,5 @@
         }
       }
     }
-
-    .input {
-      border-radius: config.$corner-radius-m;
-      border: 1px solid color_alias.$neutral-color-400;
-      background: color_alias.$neutral-white;
-
-      @include typography.input-text;
-
-      &::placeholder {
-        @include typography.input-placeholder-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;
-
-        &::placeholder {
-          color: color_alias.$neutral-color-400;
-        }
-      }
-    }
-
-    .input-help-text {
-      @include typography.form-help-text;
-    }
-
-    .input-label {
-      @include typography.form-label;
-    }
-  }
-
-  .input-container {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-
-    .icon {
-      position: absolute;
-      width: config.$icon-size-3x;
-      height: config.$icon-size-3x;
-      > svg {
-        width: 100%;
-        height: 100%;
-      }
-    }
-
-    .left-icon {
-      top: 0.9rem;
-      left: 0.7rem;
-    }
-
-    .password-icon {
-      top: 0.9rem;
-      right: 0.7rem;
-    }
-  }
-
-  .input {
-    width: 100%;
-    padding: config.$space-2x config.$space-3x config.$space-2x;
-    &[type='date'] {
-      min-width: -webkit-fill-available;
-    }
-  }
-
-  .with-icon {
-    padding-left: 28px;
   }
 }

package/src/atoms/Input.tsx

@@ -14,6 +14,7 @@ export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
   helpText?: string
   variant?: InputVariant
   id?: string
+  suffix?: string
   errors?: string[]
 }
 
@@ -27,6 +28,7 @@ export function Input({
   variant = 'primary',
   disabled,
   type = 'text',
+  suffix,
   name,
   id,
   errors,
@@ -34,10 +36,6 @@ export function Input({
 }: InputProps): React.JSX.Element {
   const identifier = id || name
   const [showPassword, setShowPassword] = useState(false)
-  const cssClasses = classNames('input', {
-    'with-icon': icon,
-    invalid: errors?.length,
-  })
   const helpTexts = buildHelpText(helpText, errors)
 
   function handlePasswordIcon() {
@@ -55,7 +53,11 @@ export function Input({
   }
 
   return (
-    <div className={classNames('input-group', variant, className)}>
+    <div
+      className={classNames('input-group', variant, className, {
+        invalid: errors?.length,
+      })}
+    >
       {!hideLabel && (
         <label className="input-label" htmlFor={identifier}>
           {label}
@@ -65,13 +67,13 @@ export function Input({
         {icon && <Icon className="left-icon" name={icon} />}
         <input
           id={identifier}
-          className={cssClasses}
           disabled={disabled}
           type={handleInputType()}
           name={name}
           aria-label={accessibilityLabel || label}
           {...props}
         />
+        {suffix && <span className="input-suffix">{suffix}</span>}
         {type === 'password' && (
           <Icon
             className="password-icon"

package/src/atoms/Modal.scss

@@ -7,6 +7,7 @@
   position: fixed;
   inset: 0;
   z-index: depth.$z-modal;
+  margin: config.$space-4x;
 
   .backdrop {
     position: fixed;
@@ -37,9 +38,11 @@
     .header {
       display: flex;
       gap: config.$space-2x;
-      align-items: center;
+      align-items: flex-start;
 
       .icon {
+        margin-top: 4px;
+        min-width: config.$icon-size-5x;
         width: config.$icon-size-5x;
         height: config.$icon-size-5x;
         > svg {

package/src/atoms/QuantitySelector.scss

@@ -20,6 +20,11 @@
   &.primary {
     .quantity-selector {
       .input-container {
+        border-radius: 0;
+        border-right: 0;
+        border-left: 0;
+        background: color_alias.$neutral-white;
+        text-align: center;
         // Remove default arrows
         /* Chrome, Safari, Edge, Opera */
         input::-webkit-outer-spin-button,
@@ -27,38 +32,9 @@
           -webkit-appearance: none;
           margin: 0;
         }
-
-        /* Firefox */
         input[type='number'] {
           -moz-appearance: textfield;
-        }
-        .input {
-          border-radius: 0;
-          border-right: 0;
-          border-left: 0;
-          background: color_alias.$neutral-white;
           text-align: center;
-
-          @include form-typography.input-text;
-
-          &::placeholder {
-            @include form-typography.input-placeholder-text;
-          }
-
-          &:focus {
-            outline: color_alias.$primary-color-600;
-            border: 1px solid color_alias.$primary-color-600;
-          }
-
-          &:disabled {
-            border: 1px solid color_alias.$neutral-color-400;
-            background: color_alias.$neutral-color-50;
-            color: color_alias.$neutral-color-400;
-
-            &::placeholder {
-              color: color_alias.$neutral-color-400;
-            }
-          }
         }
       }
       .button {

package/src/atoms/QuantitySelector.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { classNames } from '../utils/classNames'
-import './QuantitySelector.scss'
 import { Input, InputProps } from './Input'
-import { Button, ButtonProps } from './Button'
+import { Button } from './Button'
+import './QuantitySelector.scss'
 
 export type Variant = 'primary'
 

package/src/atoms/Select.scss

@@ -21,7 +21,7 @@
 
     .selected-option {
       border-radius: config.$corner-radius-m;
-      border: 1px solid color_alias.$neutral-color-400;
+      border: 1px solid color_alias.$neutral-color-600;
       background: color_alias.$neutral-white;
       @include typography.select-text;
 
@@ -65,7 +65,7 @@
 
     .select-options {
       max-height: 256px;
-      overflow-y: scroll;
+      overflow-y: auto;
       overflow-anchor: none;
       z-index: depth.$z-dropdown-options;
       border-radius: config.$corner-radius-xxs;

package/src/atoms/TextArea.tsx

@@ -29,10 +29,13 @@ export function TextArea({
   ...props
 }: TextAreaProps) {
   const identifier = id || name
-  const cssClasses = classNames('input', className, { invalid: errors?.length })
   const helpTexts = buildHelpText(helpText, errors)
   return (
-    <div className={`input-group ${variant}`}>
+    <div
+      className={classNames('input-group', variant, className, {
+        invalid: errors?.length,
+      })}
+    >
       {!hideLabel && (
         <label className="input-label" htmlFor={identifier}>
           {label}
@@ -41,7 +44,6 @@ export function TextArea({
       <div className="input-container">
         <textarea
           id={identifier}
-          className={cssClasses}
           disabled={disabled}
           name={name}
           aria-label={accessibilityLabel || label}

package/src/stories/Changelog.mdx

@@ -4,13 +4,25 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.22.2
+
+* Add IconButton secondary variant
+
+## 0.22.1
+
+* Add suffix to Input component
+* Update styles for Input, TextArea and QuantitySelector components
+* Update styles for action button in Alert components
+
 ## 0.22.0
 
-* Added FloatingButton component to Storybook
+* Add a max height to Select component
+* Center on top icon in Modal and Alert componets
 
 BREAKING CHANGES
 
-* Replece selected prop by defaultValue in Select component
+* Replace selected prop by defaultValue in Select component
+* Change the way to put the classname in Input component
 
 ## 0.21.5
 * Update open state in Collapsible component
@@ -22,8 +34,8 @@ BREAKING CHANGES
 
 ## 0.21.4
 
-* Add boder top to CardMenuOption component for first element.
-* Add margin top to second element row in CardsTable component.
+* Add border top to CardMenuOption component for first element
+* Add margin top to second element row in CardsTable component
 * CardsTable needs to specify a withTitle property to add title to first column
 
 ## 0.21.3

package/src/stories/Collapsible.stories.js

@@ -96,61 +96,66 @@ export const Primary = {
 
 export const PrimaryOpened = {
   render: () => (
-    <Collapsible title="My personal data" name="personal-data" open>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          width: '100%',
-          gap: '1rem',
-        }}
-      >
-        <Input
-          accessibilityLabel="Fill the form name"
-          helpText="This text can help you"
-          id="name_input"
-          label="Name"
-          name="name"
-          placeholder="name..."
-          type="name"
-          variant="primary"
-        />
-        <Input
-          accessibilityLabel="Fill the form email"
-          helpText="This text can help you"
-          id="email_input"
-          label="Email"
-          name="email"
-          placeholder="Email..."
-          type="email"
-          variant="primary"
-        />
-        <Select
-          accessibilityLabel="Select your favourite gaming system options"
-          helpText="This text can help you"
-          id="select-videogames"
-          label="Videogames"
-          name="example"
-          onChange={() => {}}
-          options={[
-            {
-              id: '1',
-              label: 'Nintendo Switch',
-            },
-            {
-              id: '2',
-              label: 'PlayStation 5',
-            },
-            {
-              id: '3',
-              label: 'Xbox Series S/X',
-            },
-          ]}
-          placeholder="Select your favourite gaming system..."
-          variant="primary"
-        />
-      </div>
-    </Collapsible>
+    <>
+      <Collapsible title="My personal data" name="personal-data" open>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            gap: '1rem',
+          }}
+        >
+          <Input
+            accessibilityLabel="Fill the form name"
+            helpText="This text can help you"
+            id="name_input"
+            label="Name"
+            name="name"
+            placeholder="name..."
+            type="name"
+            variant="primary"
+          />
+          <Input
+            accessibilityLabel="Fill the form email"
+            helpText="This text can help you"
+            id="email_input"
+            label="Email"
+            name="email"
+            placeholder="Email..."
+            type="email"
+            variant="primary"
+          />
+          <Select
+            accessibilityLabel="Select your favourite gaming system options"
+            helpText="This text can help you"
+            id="select-videogames"
+            label="Videogames"
+            name="example"
+            onChange={() => {}}
+            options={[
+              {
+                id: '1',
+                label: 'Nintendo Switch',
+              },
+              {
+                id: '2',
+                label: 'PlayStation 5',
+              },
+              {
+                id: '3',
+                label: 'Xbox Series S/X',
+              },
+            ]}
+            placeholder="Select your favourite gaming system..."
+            variant="primary"
+          />
+        </div>
+      </Collapsible>
+      <Collapsible title="Another data" name="another-data">
+        <Input label="Another data" name="anotherData" placeholder="..." />
+      </Collapsible>
+    </>
   ),
 }
 

package/src/stories/IconButton.stories.ts

@@ -56,3 +56,13 @@ export const Primary: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const Secondary: Story = {
+  args: {
+    icon: 'Delete',
+    variant: 'secondary',
+    accessibilityLabel: 'Delete game',
+    disabled: false,
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Input.stories.ts

@@ -37,6 +37,9 @@ const meta = {
     id: {
       description: 'Value needed for the label relation',
     },
+    suffix: {
+      description: 'Input suffix',
+    },
     errors: {
       description:
         'Optional array of errors. If passed, the errors are listed and invalid style is applied.',
@@ -98,3 +101,14 @@ export const WithErrors: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const WithSuffix: Story = {
+  args: {
+    label: 'Input with suffix',
+    helpText: 'This text can help you',
+    name: 'price',
+    type: 'number',
+    suffix: '€/Bottle',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/TextArea.stories.ts

@@ -72,7 +72,7 @@ export const WithErrors: Story = {
     helpText: 'This text can help you',
     name: 'textarea',
     id: 'textarea',
-    errors: ['error1', 'error2'],
+    errors: ['Che che che', 'Another error'],
   },
   parameters: figmaPrimaryDesign,
 }