agroptima-design-system 0.26.8 → 0.26.9

package/package.json

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

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/stories/Changelog.mdx

@@ -4,6 +4,14 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 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

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()
   })
 })