agroptima-design-system 0.5.0 → 0.6.1

package/.github/workflows/run-linters.yml

@@ -25,3 +25,6 @@ jobs:
 
       - name: Lint
         run: npm run lint
+
+      - name: Types
+        run: npm run types

package/.github/workflows/run-tests.yml

@@ -0,0 +1,27 @@
+name: Run tests
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Test
+        run: npm run test

package/jest.config.ts

@@ -0,0 +1,17 @@
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+const config: Config = {
+  testEnvironment: 'jsdom',
+  clearMocks: true,
+  moduleNameMapper: {
+    '^.+\\.(svg)$': '<rootDir>/tests/svg.mock.js',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+}
+
+export default createJestConfig(config)

package/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -8,7 +8,9 @@
     "build-storybook": "storybook build",
     "lint": "eslint",
     "lint:fix": "eslint src --fix",
-    "chromatic": "npx chromatic --exit-zero-on-changes"
+    "types": "tsc --noEmit",
+    "chromatic": "npx chromatic --exit-zero-on-changes",
+    "test": "jest"
   },
   "dependencies": {
     "@storybook/addon-designs": "^7.0.5",
@@ -28,6 +30,10 @@
     "@storybook/react": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.9.4",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
@@ -36,7 +42,11 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-storybook": "^0.6.15",
+    "jest": "^29.7.0",
+    "jest-axe": "^8.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "storybook": "^7.6.6",
+    "ts-node": "^10.9.2",
     "typescript": "^5"
   },
   "description": "Agroptima design system",

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/atoms/Select.tsx

@@ -5,7 +5,11 @@ import { Icon } from './Icon'
 export type Variant = 'primary'
 export type Option = { id: string; label: string }
 
-export interface SelectProps extends React.ComponentPropsWithoutRef<'input'> {
+type InputPropsWithoutOnChange = Omit<
+  React.ComponentPropsWithoutRef<'input'>,
+  'onChange'
+>
+export interface SelectProps extends InputPropsWithoutOnChange {
   placeholder?: string
   helpText?: string
   variant?: Variant
@@ -15,6 +19,7 @@ export interface SelectProps extends React.ComponentPropsWithoutRef<'input'> {
   accessibilityLabel?: string
   hideLabel?: boolean
   selected?: Option
+  onChange?: (value: string) => void
 }
 
 export function Select({
@@ -29,6 +34,7 @@ export function Select({
   accessibilityLabel,
   hideLabel = false,
   selected,
+  onChange,
   ...props
 }: SelectProps): React.JSX.Element {
   const [showOptionsList, setShowOptionsList] = useState(false)
@@ -55,7 +61,6 @@ export function Select({
   }
 
   function selectOption(option: Option) {
-    const { onChange } = props
     setSelectedOption(option)
     setShowOptionsList(false)
 

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,15 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.6.1
+
+- Fixed error type in onChange select props
+- Added check types to CI
+
+## 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,
+}

package/tests/a11y.spec.tsx

@@ -0,0 +1,29 @@
+import { composeStories } from '@storybook/react'
+import { act, render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+import * as components from './library'
+
+expect.extend(toHaveNoViolations)
+
+const stories = Object.values(components).map((component) => {
+  return {
+    title: component.default.title,
+    stories: composeStories(component),
+  }
+})
+
+stories.forEach(({ title, stories }) => {
+  const variations = Object.entries(stories)
+
+  variations.forEach(([variationName, story]: [string, any]) => {
+    it(`${title} ${variationName} should be accessible`, async () => {
+      const { container } = render(story())
+
+      await act(async () => {
+        const results = await axe(container)
+        expect(results).toHaveNoViolations()
+      })
+    })
+  })
+})

package/tests/library.ts

@@ -0,0 +1,9 @@
+export * as Button from '../src/stories/Button.stories'
+export * as CardsTable from '../src/stories/CardsTable.stories'
+export * as CardsTableList from '../src/stories/CardsTableList.stories'
+export * as Checkbox from '../src/stories/Checkbox.stories'
+export * as EmptyState from '../src/stories/EmptyState.stories'
+export * as IconButton from '../src/stories/IconButton.stories'
+export * as Input from '../src/stories/Input.stories'
+export * as Multiselect from '../src/stories/Multiselect.stories'
+export * as Select from '../src/stories/Select.stories'

package/tests/svg.mock.js

@@ -0,0 +1 @@
+export default function () {}