agroptima-design-system 0.26.8 → 0.27.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.26.8",
+  "version": "0.27.0-beta.1",
   "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/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,9 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-# 0.26.8
+# 0.27.0
 
-* 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.
 
 # 0.26.7
 

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/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"]
 }