agroptima-design-system 0.5.0 → 0.6.0

package/package.json

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

package/src/atoms/Checkbox.scss

@@ -0,0 +1,71 @@
+@use '../settings/color_alias';
+@use '../settings/typography';
+@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;
+    }
+
+    .label {
+      @include typography.checkbox-label;
+    }
+  }
+
+  &.primary {
+    input[type='checkbox'] {
+      display: none;
+    }
+
+    input[type='checkbox'] + .checkbox-label-container .background-icon {
+      background: url('../icons/checkbox-primary-inactive.svg') left top
+        no-repeat;
+    }
+
+    input[type='checkbox']:checked
+      + .checkbox-label-container
+      .background-icon {
+      background: url('../icons/checkbox-primary-active.svg') left top no-repeat;
+    }
+
+    // Disabled
+    input[type='checkbox']
+      + .checkbox-label-container.disabled
+      .background-icon {
+      background: url('../icons/checkbox-disabled-inactive.svg') left top
+        no-repeat;
+    }
+
+    input[type='checkbox']:checked
+      + .checkbox-label-container.disabled
+      .background-icon {
+      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 {
+        background: url('../icons/checkbox-primary-hover-inactive.svg') left top
+          no-repeat;
+      }
+    }
+  }
+}

package/src/atoms/Checkbox.tsx

@@ -0,0 +1,45 @@
+import './Checkbox.scss'
+
+export type Variant = 'primary'
+
+export interface CheckboxProps extends React.ComponentPropsWithoutRef<'input'> {
+  label?: string
+  hideLabel?: boolean
+  variant?: Variant
+  id: string
+  accessibilityLabel: string
+}
+
+export function Checkbox({
+  accessibilityLabel,
+  label,
+  hideLabel,
+  disabled,
+  variant = 'primary',
+  id,
+  ...props
+}: CheckboxProps) {
+  const disabledClass = disabled ? 'disabled' : ''
+  const cssClasses = ['checkbox', variant].join(' ')
+
+  return (
+    <div className={`checkbox-group ${variant}`}>
+      <input
+        id={id}
+        type="checkbox"
+        className={cssClasses}
+        disabled={disabled}
+        aria-label={accessibilityLabel}
+        {...props}
+      />
+
+      <label
+        className={`checkbox-label-container ${disabledClass}`}
+        htmlFor={id}
+      >
+        <span className="background-icon"></span>
+        {!hideLabel && <span className="label">{label}</span>}
+      </label>
+    </div>
+  )
+}

package/src/icons/checkbox-disabled-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="border" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#F3F3F3"/><path class="background" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#9B9B9B"/><path class="check" d="m7.085 13.699-3.793-3.98L2 11.063 7.085 16.4 18 4.946 16.718 3.6 7.085 13.699Z" fill="#9B9B9B"/></svg>

package/src/icons/checkbox-disabled-inactive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="background" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#F3F3F3"/><path class="border" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#9B9B9B"/></svg>

package/src/icons/checkbox-primary-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="border" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#A95782"/><path class="background" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#A95782"/><path class="check" d="m7.085 13.699-3.793-3.98L2 11.063 7.085 16.4 18 4.946 16.718 3.6 7.085 13.699Z" fill="#fff"/></svg>

package/src/icons/checkbox-primary-hover-inactive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="background" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#fff"/><path class="border" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#A95782"/></svg>

package/src/icons/checkbox-primary-inactive.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path class="background" d="M0 2a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Z" fill="#fff"/><path class="border" fill-rule="evenodd" clip-rule="evenodd" d="M18 1H2a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM2 0a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z" fill="#727272"/></svg>

package/src/settings/_typography.scss

@@ -68,6 +68,24 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
   line-height: 0.775rem;
 }
 
+@mixin checkbox-label {
+  font-style: $text-base-style;
+  font-variant: $text-base-style;
+  font-weight: 400;
+  font-family: $font-base-family;
+  font-size: 1rem;
+  color: color_alias.$neutral-color-1000;
+}
+
+@mixin checkbox-disabled-label {
+  font-style: $text-base-style;
+  font-variant: $text-base-style;
+  font-weight: 400;
+  font-family: $font-base-family;
+  font-size: 1rem;
+  color: color_alias.$neutral-color-400;
+}
+
 @mixin cards-table-list-header {
   font-style: $text-base-style;
   font-variant: $text-base-style;

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,10 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.6.0
+
+Checkbox component is added to Storybook.
+
 ## 0.5.0
 
 - IconButton component is added to Storybook.

package/src/stories/Checkbox.stories.ts

@@ -0,0 +1,58 @@
+import { StoryObj } from '@storybook/react'
+import { Checkbox } from '../atoms/Checkbox'
+
+const meta = {
+  title: 'Design System/Atoms/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    accessibilityLabel: {
+      description: 'Accessible name & description of the element',
+    },
+    variant: {
+      description: 'Variant used from a list of values',
+    },
+    disabled: {
+      description: 'Is the component in disabled state?',
+    },
+    label: {
+      description: 'Label for the component',
+    },
+    id: {
+      description: 'Value needed for the label relation',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=521-104&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    accessibilityLabel: 'Marks if the user likes videogames',
+    variant: 'primary',
+    disabled: false,
+    label: 'Do you like videogames?',
+    id: 'checkbox-videogames-preference',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const PrimaryWithoutLabel: Story = {
+  args: {
+    accessibilityLabel: 'Marks if the user likes videogames',
+    variant: 'primary',
+    disabled: false,
+    label: 'Do you like videogames?',
+    id: 'checkbox-videogames-preference',
+    hideLabel: true,
+  },
+  parameters: figmaPrimaryDesign,
+}