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

package/package.json

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

package/src/atoms/CardsTable/CardsTable.scss

@@ -3,6 +3,28 @@
 @use '../../settings/config';
 @use '../../settings/breakpoints';
 
+@mixin align-data-vertically() {
+  thead {
+    display: none;
+  }
+
+  tbody {
+    tr {
+      flex-direction: row;
+      flex-wrap: wrap;
+      position: relative;
+      gap: config.$space-1x;
+      padding: config.$space-2x config.$space-3x;
+    }
+  }
+
+  td {
+    width: 100%;
+    flex: inherit;
+    padding: 0px;
+  }
+}
+
 .cards-table-list {
   display: flex;
   flex-direction: column;
@@ -184,28 +206,14 @@
     justify-content: flex-end !important;
   }
 
+  &.vertically {
+    @include align-data-vertically();
+  }
+
   // Media queries
   // Mobile & tablet cases
   @media only screen and (max-width: breakpoints.$large) {
-    thead {
-      display: none;
-    }
-
-    tbody {
-      tr {
-        flex-direction: row;
-        flex-wrap: wrap;
-        position: relative;
-        gap: config.$space-1x;
-        padding: config.$space-2x config.$space-3x;
-      }
-    }
-
-    td {
-      width: 100%;
-      flex: inherit;
-      padding: 0px;
-    }
+    @include align-data-vertically();
 
     td:first-child {
       order: -2;

package/src/atoms/CardsTable/CardsTable.tsx

@@ -7,6 +7,7 @@ export interface CardsTableProps
   extends React.ComponentPropsWithoutRef<'table'> {
   variant?: Variant
   withTitle?: boolean
+  vertically?: boolean
 }
 
 export function CardsTable({
@@ -14,11 +15,13 @@ export function CardsTable({
   summary,
   variant = 'primary',
   withTitle = false,
+  vertically = false,
   children,
   ...props
 }: CardsTableProps): React.JSX.Element {
   const cssClasses = classNames('cards-table-list', variant, className, {
     'with-title': withTitle,
+    vertically: vertically,
   })
   return (
     <table summary={summary} role="table" className={cssClasses} {...props}>

package/src/atoms/CheckableTag/CheckableTag.tsx

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

package/src/atoms/Checkbox.scss

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

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

package/src/atoms/DetailItem.scss

@@ -8,8 +8,14 @@
   flex-direction: column;
   margin-bottom: config.$space-3x;
 
+  &.single-line {
+    flex-direction: row;
+    gap: config.$space-1x;
+  }
+
   &.alignment-right {
     text-align: right;
+    justify-content: flex-end;
   }
 
   .title {

package/src/atoms/DetailItem.tsx

@@ -12,6 +12,7 @@ export interface DetailItemProps extends React.ComponentPropsWithoutRef<'div'> {
   variant?: Variant
   title?: string
   align?: Alignment
+  singleLine?: boolean
 }
 
 export function DetailItem({
@@ -20,6 +21,7 @@ export function DetailItem({
   variant = 'primary',
   title,
   align = Alignment.Left,
+  singleLine = false,
   children,
   ...props
 }: DetailItemProps): React.JSX.Element {
@@ -30,6 +32,7 @@ export function DetailItem({
         variant,
         `alignment-${align}`,
         className,
+        { 'single-line': singleLine },
       )}
       {...props}
     >

package/src/atoms/RadioButton.scss

@@ -0,0 +1,92 @@
+@use '../settings/color_alias';
+@use '../settings/typography/form' as typography;
+@use '../settings/config';
+
+.radio-group {
+  display: flex;
+  align-items: center;
+  gap: config.$space-1x;
+
+  .radio-label-container {
+    .label {
+      @include typography.checkbox-label;
+    }
+
+    &.disabled {
+      .label {
+        @include typography.checkbox-disabled-label;
+      }
+    }
+  }
+
+  &.primary {
+    input[type='radio'] {
+      appearance: none;
+      position: relative;
+
+      margin: 0 1rem 0 0;
+
+      // Outside circle
+      &:after {
+        content: '';
+
+        position: absolute;
+        top: -6px;
+        left: -2px;
+
+        width: 16px;
+        height: 16px;
+
+        background: #fff;
+
+        border: 1px solid color_alias.$neutral-color-600;
+        border-radius: 50%;
+      }
+
+      &:checked {
+        // Inside circle
+        &:before {
+          content: '';
+          position: absolute;
+          top: -2px;
+          left: 2px;
+          z-index: 1;
+          width: 8px;
+          height: 8px;
+          background: color_alias.$primary-color-600;
+          border-radius: 50%;
+        }
+
+        &:after {
+          border: 1px solid color_alias.$primary-color-600;
+        }
+      }
+
+      &:hover {
+        &:after {
+          border: 1px solid color_alias.$primary-color-600;
+        }
+      }
+
+      &:disabled {
+        &:after {
+          border: 1px solid color_alias.$neutral-color-400;
+        }
+        &:checked {
+          &:before {
+            background: color_alias.$neutral-color-400;
+          }
+
+          &:after {
+            border: 1px solid color_alias.$neutral-color-400;
+          }
+        }
+        &:hover {
+          &:after {
+            border: 1px solid color_alias.$neutral-color-400;
+          }
+        }
+      }
+    }
+  }
+}

package/src/atoms/RadioButton.tsx

@@ -0,0 +1,47 @@
+import { classNames } from '../utils/classNames'
+import './RadioButton.scss'
+
+export type Variant = 'primary'
+
+export interface RadioButtonProps
+  extends React.ComponentPropsWithoutRef<'input'> {
+  label?: string
+  hideLabel?: boolean
+  variant?: Variant
+  id?: string
+  accessibilityLabel: string
+}
+
+export function RadioButton({
+  accessibilityLabel,
+  label,
+  hideLabel,
+  disabled,
+  variant = 'primary',
+  id,
+  name,
+  ...props
+}: RadioButtonProps) {
+  const inputCss = classNames('radio', variant)
+  const labelCss = classNames('radio-label-container', {
+    disabled: disabled,
+  })
+
+  return (
+    <div className={`radio-group ${variant}`}>
+      <input
+        id={id}
+        name={name}
+        type="radio"
+        className={inputCss}
+        disabled={disabled}
+        aria-label={accessibilityLabel}
+        {...props}
+      />
+
+      <label className={labelCss} htmlFor={id}>
+        {!hideLabel && <span className="label">{label}</span>}
+      </label>
+    </div>
+  )
+}

package/src/stories/CardsTable.stories.js

@@ -218,3 +218,19 @@ export const OnlyTitle = {
     </CardsTable>
   ),
 }
+
+export const DataAlignedVertically = {
+  render: (args) => (
+    <CardsTable vertically {...args}>
+      <CardsTableBody>
+        <CardsTableRow>
+          <CardsTableCell>Silent Hill</CardsTableCell>
+          <CardsTableCell>Metal Gear Solid 5</CardsTableCell>
+          <CardsTableCell>Tekken 8</CardsTableCell>
+          <CardsTableCell>The Witcher 3</CardsTableCell>
+          <CardsTableCell>Zone of the Enders: The 2nd Runner</CardsTableCell>
+        </CardsTableRow>
+      </CardsTableBody>
+    </CardsTable>
+  ),
+}

package/src/stories/Changelog.mdx

@@ -4,17 +4,11 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-# 0.26.9
+# 0.27.0
 
-* 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
+* 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.7
 

package/src/stories/Modal.stories.js

@@ -162,7 +162,12 @@ export const Details = {
           <p>Final Fantasy X</p>
         </Card>
       </Collapsible>
-      <DetailItem style={{ marginTop: '10px' }} align="right" title="Price">
+      <DetailItem
+        singleLine
+        style={{ marginTop: '10px' }}
+        align="right"
+        title="Price"
+      >
         59,95 €
       </DetailItem>
     </Modal>

package/src/stories/RadioButton.stories.js

@@ -0,0 +1,94 @@
+import { RadioButton } from '../atoms/RadioButton'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=527-73&m=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/RadioButton',
+  component: RadioButton,
+  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',
+    },
+    hideLabel: {
+      description: 'Hide or show label?',
+    },
+    id: {
+      description: 'Value needed for the label relation',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export default meta
+
+export const Enabled = {
+  render: () => (
+    <>
+      <RadioButton
+        accessibilityLabel="Marks if the user likes action videogames"
+        id="preference-1"
+        name="videogames-preference"
+        value="action"
+        label="Action games"
+        variant="primary"
+      />
+      <RadioButton
+        accessibilityLabel="Marks if the user likes party videogames"
+        id="preference-2"
+        name="videogames-preference"
+        value="party"
+        label="Party games"
+        variant="primary"
+      />
+      <RadioButton
+        accessibilityLabel="Marks if the user likes platform videogames"
+        id="preference-3"
+        name="videogames-preference"
+        value="platform"
+        label="Platform games"
+        variant="primary"
+      />
+    </>
+  ),
+}
+
+export const Disabled = {
+  render: () => (
+    <>
+      <RadioButton
+        disabled
+        accessibilityLabel="Marks if the user likes platform videogames"
+        id="preference-3"
+        name="videogames-preference"
+        value="action"
+        label="Action games"
+        variant="primary"
+      />
+      <RadioButton
+        disabled
+        checked
+        accessibilityLabel="Marks if the user likes platform videogames"
+        id="preference-4"
+        name="videogames-preference"
+        value="platform"
+        label="Platform games"
+        variant="primary"
+      />
+    </>
+  ),
+}

package/tests/Checkbox.spec.tsx

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

package/tests/RadioButton.spec.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { RadioButton } from '@/atoms/RadioButton'
+
+describe('RadioButton', () => {
+  const variants = ['primary']
+
+  it.each(variants)('renders with label and expected styles', (variant) => {
+    const { getAllByRole, getByText } = render(
+      <>
+        <RadioButton
+          accessibilityLabel="Marks if the user likes party videogames"
+          id="preference-2"
+          name="videogames-preference"
+          value="party"
+          label="Party games"
+          variant="primary"
+        />
+        <RadioButton
+          accessibilityLabel="Marks if the user likes platform videogames"
+          id="preference-3"
+          name="videogames-preference"
+          value="platform"
+          label="Platform games"
+          variant="primary"
+        />
+      </>,
+    )
+    expect(getAllByRole('generic')[1]).toHaveClass(`radio-group ${variant}`)
+    expect(getAllByRole('radio')[0]).toHaveClass(`radio ${variant}`)
+    expect(getAllByRole('radio')[1]).toHaveClass(`radio ${variant}`)
+    expect(getByText(/Party games/i)).toBeInTheDocument()
+    expect(getByText(/Platform games/i)).toBeInTheDocument()
+  })
+})

package/tsconfig.json

@@ -34,6 +34,6 @@
     "src/stories/Card.stories.js",
     "src/stories/Menu.stories.js",
     "src/stories/EmptyState.stories.js"
-, "src/stories/CheckableTag.stories.js"  ],
+, "src/stories/CheckableTag.stories.js", "src/stories/RadioButton.stories.js"  ],
   "exclude": ["node_modules"]
 }