agroptima-design-system 0.27.7 → 0.27.8-beta.0

package/package.json

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

package/src/atoms/CardsTable/CardsTable.scss

@@ -183,6 +183,10 @@
     justify-content: flex-start;
     align-items: center;
     flex: 2;
+
+    .checkbox-group {
+      margin-right: config.$space-1x;
+    }
   }
 
   td {
@@ -198,10 +202,6 @@
     justify-content: center;
   }
 
-  td:has(.badge) {
-    gap: config.$space-2x;
-  }
-
   .alignment-right {
     justify-content: flex-end !important;
   }

package/src/atoms/Checkbox.scss

@@ -44,5 +44,12 @@
           no-repeat;
       }
     }
+
+    &.indeterminate {
+      .checkbox:checked {
+        background: url('../icons/checkbox-indeterminate-active.svg') left top
+          no-repeat;
+      }
+    }
   }
 }

package/src/atoms/Checkbox.tsx

@@ -9,6 +9,7 @@ export interface CheckboxProps extends React.ComponentPropsWithoutRef<'input'> {
   hideLabel?: boolean
   variant?: Variant
   id?: string
+  indeterminate?: boolean
 }
 
 export function Checkbox({
@@ -18,6 +19,7 @@ export function Checkbox({
   disabled,
   variant = 'primary',
   id,
+  indeterminate = false,
   name,
   className,
   ...props
@@ -28,6 +30,7 @@ export function Checkbox({
     <div
       className={classNames('checkbox-group', variant, className, {
         disabled: disabled,
+        indeterminate: indeterminate,
       })}
     >
       <input

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path 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="#eb004dff"/><path 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="#eb004dff"/><path d="M18 10.8H2V8.4h16v2.4Z" fill="#fff"/></svg>

package/src/icons/checkbox-indeterminate.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path 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="#161C26"/><path 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="#161C26"/><path d="M18 10.8H2V8.4h16v2.4Z" fill="#fff"/></svg>

package/src/icons/index.tsx

@@ -9,6 +9,7 @@ import Calendar from './calendar.svg'
 import Check from './check.svg'
 import CheckboxActive from './checkbox-active.svg'
 import CheckboxInactive from './checkbox-inactive.svg'
+import CheckboxIndeterminate from './checkbox-indeterminate.svg'
 import ChangePassword from './change-password.svg'
 import Client from './client.svg'
 import Close from './close.svg'
@@ -58,6 +59,7 @@ export {
   Check,
   CheckboxActive,
   CheckboxInactive,
+  CheckboxIndeterminate,
   Client,
   Close,
   Comment,

package/src/stories/CardsTable.stories.js

@@ -10,6 +10,7 @@ import {
 } from '../atoms/CardsTable'
 import { IconButton } from '../atoms/Button'
 import { Badge } from '../atoms/Badge'
+import { Checkbox } from '@/atoms/Checkbox'
 
 const figmaPrimaryDesign = {
   design: {
@@ -40,7 +41,16 @@ export const Primary = {
     <CardsTable withTitle {...args}>
       <CardsTableHead>
         <CardsTableRow>
-          <CardsTableHeader>Game title</CardsTableHeader>
+          <CardsTableHeader>
+            <Checkbox
+              accessibilityLabel="Select all table rows"
+              id="checkbox-select-all"
+              indeterminate
+              checked
+              variant="primary"
+            />
+            <span>Game title</span>
+          </CardsTableHeader>
           <CardsTableHeader>Company address</CardsTableHeader>
           <CardsTableHeader>Customer service email</CardsTableHeader>
           <CardsTableHeader>Price</CardsTableHeader>
@@ -50,6 +60,11 @@ export const Primary = {
       <CardsTableBody>
         <CardsTableRow>
           <CardsTableCell titleWithActions={3}>
+            <Checkbox
+              accessibilityLabel="Select all table rows"
+              id="checkbox-select-all"
+              variant="primary"
+            />
             <span>Zone of the Enders: The 2nd Runner</span>
             <Badge
               accessibilityLabel="Game is bought"
@@ -83,7 +98,14 @@ export const Primary = {
         </CardsTableRow>
 
         <CardsTableRow isDisabled>
-          <CardsTableCell titleWithActions={2}>The Witcher 3</CardsTableCell>
+          <CardsTableCell titleWithActions={2}>
+            <Checkbox
+              accessibilityLabel="Select all table rows"
+              id="checkbox-select-all"
+              variant="primary"
+            />
+            <span>The Witcher 3</span>
+          </CardsTableCell>
           <CardsTableCell>
             CD PROJEKT S.A. ul. Jagiellońska 74 03-301 Warszawa Poland
           </CardsTableCell>
@@ -104,7 +126,14 @@ export const Primary = {
         </CardsTableRow>
 
         <CardsTableRow isActive onClick={() => alert('Click')}>
-          <CardsTableCell titleWithActions={1}>Tekken 8</CardsTableCell>
+          <CardsTableCell titleWithActions={1}>
+            <Checkbox
+              accessibilityLabel="Select all table rows"
+              id="checkbox-select-all"
+              variant="primary"
+            />
+            <span>Tekken 8</span>
+          </CardsTableCell>
           <CardsTableCell>
             Bandai Namco Studios Inc. ; Address: 2-37-25 Eitai, Koto-ku, Tokyo
             135-0034, Japan
@@ -121,6 +150,11 @@ export const Primary = {
         </CardsTableRow>
         <CardsTableRow>
           <CardsTableCell titleWithActions={4}>
+            <Checkbox
+              accessibilityLabel="Select all table rows"
+              id="checkbox-select-all"
+              variant="primary"
+            />
             <span>Metal Gear Solid 5: The Phantom Pain</span>
             <Badge
               accessibilityLabel="Game is bought"
@@ -159,6 +193,11 @@ export const Primary = {
         </CardsTableRow>
         <CardsTableRow>
           <CardsTableCell titleWithActions={5}>
+            <Checkbox
+              accessibilityLabel="Select all table rows"
+              id="checkbox-select-all"
+              variant="primary"
+            />
             <span>Silent Hill</span>
           </CardsTableCell>
           <CardsTableCell>

package/src/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.27.8
+
+* Add indeterminate property and related styles to Checkbox component
+
 # 0.27.6
 
 * Add AlertContiner component

package/src/stories/Checkbox.stories.ts

@@ -56,3 +56,15 @@ export const PrimaryWithoutLabel: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const Indeterminate: Story = {
+  args: {
+    accessibilityLabel: 'Marks if the user likes videogames',
+    variant: 'primary',
+    disabled: false,
+    label: 'Do you like videogames?',
+    id: 'checkbox-videogames-preference',
+    indeterminate: true,
+  },
+  parameters: figmaPrimaryDesign,
+}

package/tests/Checkbox.spec.tsx

@@ -18,4 +18,24 @@ describe('Checkbox', () => {
     expect(getByRole('checkbox')).toHaveClass('checkbox')
     expect(getByText(/Do you like videogames/i)).toBeInTheDocument()
   })
+
+  it.each(variants)(
+    'renders indeterminate variant with label and expected styles',
+    (variant) => {
+      const { getByRole, getAllByRole, getByText } = render(
+        <Checkbox
+          accessibilityLabel="Marks if the user likes videogames"
+          id="checkbox-videogames-preference"
+          label="Do you like videogames?"
+          variant="primary"
+          indeterminate
+        />,
+      )
+      expect(getAllByRole('generic')[1]).toHaveClass(
+        `checkbox-group ${variant} indeterminate`,
+      )
+      expect(getByRole('checkbox')).toHaveClass('checkbox')
+      expect(getByText(/Do you like videogames/i)).toBeInTheDocument()
+    },
+  )
 })