agroptima-design-system 0.27.0-beta.2 → 0.27.0

package/package.json

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

package/src/atoms/CheckableTag/CheckableTag.tsx

@@ -34,7 +34,7 @@ export function CheckableTag({
     <span
       className={cssClasses}
       role="checkbox"
-      aria-checked={false}
+      aria-checked={isChecked}
       tabIndex={0}
       aria-label={props['aria-label']}
       onClick={() => onSelect(label)}

package/src/atoms/Checkbox.scss

@@ -3,66 +3,43 @@
 @use '../settings/config';
 
 .checkbox-group {
-  .checkbox-label-container {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: config.$space-1x;
-
-    .background-icon {
-      width: config.$icon-size-4x;
-      height: config.$icon-size-4x;
-    }
+  @include typography.checkbox-label;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: config.$space-1x;
+
+  .checkbox {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: config.$icon-size-4x;
+    height: config.$icon-size-4x;
+    min-width: config.$icon-size-4x;
+  }
 
-    .label {
-      @include typography.checkbox-label;
-    }
+  &.disabled {
+    @include typography.checkbox-disabled-label;
   }
 
   &.primary {
-    input[type='checkbox'] {
-      display: none;
-    }
-
-    input[type='checkbox'] + .checkbox-label-container .background-icon {
+    .checkbox {
       background: url('../icons/checkbox-primary-inactive.svg') left top
         no-repeat;
     }
-
-    input[type='checkbox']:checked
-      + .checkbox-label-container
-      .background-icon {
+    .checkbox:checked {
       background: url('../icons/checkbox-primary-active.svg') left top no-repeat;
     }
-
-    // Disabled
-    input[type='checkbox']
-      + .checkbox-label-container.disabled
-      .background-icon {
+    .checkbox:disabled {
       background: url('../icons/checkbox-disabled-inactive.svg') left top
         no-repeat;
     }
-
-    input[type='checkbox']:checked
-      + .checkbox-label-container.disabled
-      .background-icon {
+    .checkbox:checked:disabled {
       background: url('../icons/checkbox-disabled-active.svg') left top
         no-repeat;
     }
-
-    .checkbox-label-container {
-      &.disabled {
-        .label {
-          @include typography.checkbox-disabled-label;
-        }
-      }
-    }
-
-    // Hover
     &:hover {
-      input[type='checkbox']:not(:checked)
-        + .checkbox-label-container:not(.disabled)
-        .background-icon {
+      .checkbox:not(:checked):not(.disabled) {
         background: url('../icons/checkbox-primary-hover-inactive.svg') left top
           no-repeat;
       }

package/src/atoms/Checkbox.tsx

@@ -4,45 +4,42 @@ import './Checkbox.scss'
 export type Variant = 'primary'
 
 export interface CheckboxProps extends React.ComponentPropsWithoutRef<'input'> {
-  label?: string
+  label: string
+  accessibilityLabel?: string
   hideLabel?: boolean
   variant?: Variant
   id?: string
-  accessibilityLabel: string
 }
 
 export function Checkbox({
-  accessibilityLabel,
   label,
-  hideLabel,
+  accessibilityLabel,
+  hideLabel = false,
   disabled,
   variant = 'primary',
   id,
   name,
+  className,
   ...props
 }: CheckboxProps) {
   const identifier = id || name
-  const inputCss = classNames('checkbox', variant)
-  const labelCss = classNames('checkbox-label-container', {
-    disabled: disabled,
-  })
 
   return (
-    <div className={`checkbox-group ${variant}`}>
+    <div
+      className={classNames('checkbox-group', variant, className, {
+        disabled: disabled,
+      })}
+    >
       <input
         id={identifier}
         name={name}
         type="checkbox"
-        className={inputCss}
+        className="checkbox"
         disabled={disabled}
-        aria-label={accessibilityLabel}
+        aria-label={accessibilityLabel || label}
         {...props}
       />
-
-      <label className={labelCss} htmlFor={identifier}>
-        <span className="background-icon"></span>
-        {!hideLabel && <span className="label">{label}</span>}
-      </label>
+      {!hideLabel && <label htmlFor={identifier}>{label}</label>}
     </div>
   )
 }

package/src/atoms/Input.scss

@@ -15,6 +15,11 @@
 
   .input-label {
     @include typography.form-label;
+  
+    &.is-required::after {
+      content: '*';
+      color: color_alias.$primary-color-600;
+    }
   }
 
   &.invalid .input-help-text {
@@ -146,4 +151,5 @@
       }
     }
   }
+
 }

package/src/atoms/Input.tsx

@@ -18,6 +18,7 @@ export interface InputProps extends React.ComponentPropsWithoutRef<'input'> {
   id?: string
   suffix?: string
   errors?: string[]
+  required?: boolean
 }
 
 export function Input({
@@ -34,6 +35,7 @@ export function Input({
   name,
   id,
   errors,
+  required = false,
   ...props
 }: InputProps): React.JSX.Element {
   const identifier = id || name
@@ -62,10 +64,14 @@ export function Input({
       })}
     >
       {!hideLabel && (
-        <label className="input-label" htmlFor={identifier}>
+        <label
+          className={classNames('input-label', required ? 'is-required' : '')}
+          htmlFor={identifier}
+        >
           {label}
         </label>
       )}
+
       <div className="input-container">
         {icon && <Icon className="left-icon" name={icon} />}
         <input
@@ -74,7 +80,10 @@ export function Input({
           type={handleInputType()}
           name={name}
           aria-label={accessibilityLabel || label}
-          className={classNames({ 'primary-outlined': type === 'file' })}
+          required={required}
+          className={classNames({
+            'primary-outlined': type === 'file',
+          })}
           {...props}
         />
         {suffix && <span className="input-suffix">{suffix}</span>}

package/src/stories/Changelog.mdx

@@ -4,12 +4,29 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+
 # 0.27.0
 
 * Add RadioButton component.
 * Add `vertically` prop to CardsTable component in order to display the data vertically both on desktop and mobile.
 * Add `singleLine` prop to DetailItem component in order to display the data on a single line.
 
+# 0.26.10
+
+* Add required property for input
+
+# 0.26.9
+
+* Update Checkbox component to use input and not span
+
+BREAKING CHANGES
+
+* Checkbox component make label mandatory and accessibilityLabel optional
+
+# 0.26.8
+
+* Set check value in CheckableTag
+
 # 0.26.7
 
 * Fix Collapsible header padding-bottom.

package/tests/Checkbox.spec.tsx

@@ -15,7 +15,7 @@ describe('Checkbox', () => {
       />,
     )
     expect(getAllByRole('generic')[1]).toHaveClass(`checkbox-group ${variant}`)
-    expect(getByRole('checkbox')).toHaveClass(`checkbox ${variant}`)
+    expect(getByRole('checkbox')).toHaveClass('checkbox')
     expect(getByText(/Do you like videogames/i)).toBeInTheDocument()
   })
 })

package/tests/Input.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { getByText, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Input } from '@/atoms/Input'
 
@@ -87,4 +87,17 @@ describe('Input', () => {
     expect(getByRole('spinbutton')).toBeInTheDocument()
     expect(getByText('€/Bottle')).toBeInTheDocument()
   })
+  it('renders required input', () => {
+    const { getByText } = render(
+      <Input
+        helpText="This text can help you"
+        label="Required input"
+        name="input"
+        type="text"
+        required
+      />,
+    )
+
+    expect(getByText('Required input')).toHaveClass('input-label is-required')
+  })
 })