agroptima-design-system 0.25.7 → 0.26.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.25.7",
+  "version": "0.26.0-beta.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -16,23 +16,23 @@
   },
   "dependencies": {
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-viewport": "^8.3.2",
+    "@storybook/addon-viewport": "^8.2.9",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
-    "@storybook/addon-a11y": "^8.3.2",
-    "@storybook/addon-essentials": "^8.3.2",
-    "@storybook/addon-interactions": "^8.3.2",
-    "@storybook/addon-links": "^8.3.2",
-    "@storybook/addon-mdx-gfm": "^8.3.2",
-    "@storybook/blocks": "^8.3.2",
-    "@storybook/nextjs": "^8.3.2",
-    "@storybook/react": "^8.3.2",
-    "@storybook/test": "^8.3.2",
+    "@chromatic-com/storybook": "^1.8.0",
+    "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
@@ -50,7 +50,7 @@
     "jest": "^29.7.0",
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^8.3.2",
+    "storybook": "^8.2.9",
     "ts-node": "^10.9.2",
     "typescript": "^5"
   },

package/src/atoms/Badge.tsx

@@ -11,7 +11,7 @@ export type Variant =
   | 'warning-outlined'
   | 'error-outlined'
 
-export interface BadgeProps extends React.ComponentPropsWithoutRef<'div'> {
+export interface BadgeProps extends React.ComponentPropsWithoutRef<'span'> {
   variant?: Variant
   text: string
   accessibilityLabel: string

package/src/atoms/CheckableTag/CheckableTag.scss

@@ -0,0 +1,47 @@
+@use '../../settings/color_alias';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/depth';
+
+.checkable-tag-group {
+  display: flex;
+  flex-direction: row;
+  gap: config.$space-2x;
+  flex-wrap: wrap;
+
+  .checkable-tag {
+    display: flex;
+    flex-direction: column;
+    gap: config.$space-2x;
+    padding: config.$space-1x config.$space-3x;
+    width: fit-content;
+    cursor: default;
+    white-space: nowrap;
+
+    &.primary {
+      @include typography.footnote-primary;
+      color: color_alias.$neutral-color-1000;
+
+      border-radius: config.$corner-radius-m;
+      border: 1px solid color_alias.$neutral-color-200;
+      background: color_alias.$neutral-white;
+
+      &:hover {
+        background: color_alias.$neutral-color-50;
+      }
+
+      &.checked {
+        color: color_alias.$neutral-white;
+        border: 1px solid color_alias.$primary-color-600;
+        background: color_alias.$primary-color-600;
+      }
+
+      &.disabled {
+        color: color_alias.$neutral-color-200;
+
+        border: 1px solid color_alias.$neutral-color-200;
+        background: color_alias.$neutral-color-50;
+      }
+    }
+  }
+}

package/src/atoms/CheckableTag/CheckableTag.tsx

@@ -0,0 +1,54 @@
+import { classNames } from '../../utils/classNames'
+import './CheckableTag.scss'
+
+export type Variant = 'primary'
+
+type CheckableTagPropsWithoutOnChangeOnSelect = Omit<
+  React.ComponentPropsWithoutRef<'span'>,
+  'onChange' | 'onSelect'
+>
+
+export interface CheckableTagProps
+  extends CheckableTagPropsWithoutOnChangeOnSelect {
+  variant?: Variant
+  isDisabled?: boolean
+  isChecked?: boolean
+  label: string
+  onSelect: (label: string) => void
+  onChange: (checked: boolean) => void
+}
+
+export function CheckableTag({
+  variant = 'primary',
+  className,
+  isDisabled = false,
+  label,
+  isChecked = false,
+  onSelect,
+  onChange,
+  ...props
+}: CheckableTagProps): React.JSX.Element {
+  const cssClasses = classNames('checkable-tag', variant, className, {
+    disabled: isDisabled,
+    checked: isChecked,
+  })
+
+  function handleClick() {
+    onChange(!isChecked)
+    onSelect(label)
+  }
+
+  return (
+    <span
+      className={cssClasses}
+      role="checkbox"
+      aria-checked={false}
+      tabIndex={0}
+      aria-label={props['aria-label']}
+      onClick={handleClick}
+      {...props}
+    >
+      {label}
+    </span>
+  )
+}

package/src/atoms/CheckableTag/CheckableTagGroup.tsx

@@ -0,0 +1,19 @@
+import { classNames } from '../../utils/classNames'
+import './CheckableTag.scss'
+
+export interface CheckableTagGroupProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
+
+export function CheckableTagGroup({
+  className,
+  children,
+  ...props
+}: CheckableTagGroupProps): React.JSX.Element {
+  const cssClasses = classNames('checkable-tag-group', className)
+
+  return (
+    <div className={cssClasses} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/atoms/CheckableTag/index.ts

@@ -0,0 +1,4 @@
+import { CheckableTag } from './CheckableTag'
+import { CheckableTagGroup } from './CheckableTagGroup'
+
+export { CheckableTag, CheckableTagGroup }

package/src/atoms/Form/Form.scss

@@ -44,17 +44,11 @@
       padding-bottom: 9rem;
     }
     .actions {
-      background-color: color_alias.$neutral-white;
-      border-top: 1px solid color_alias.$neutral-color-200;
-      flex-direction: row;
-      justify-content: space-between;
-      gap: config.$space-2x;
+      padding: 0;
+      flex-direction: column;
       box-shadow: none;
-      padding: config.$space-4x auto config.$space-4x auto;
-
-      .button {
-        width: 50%;
-      }
+      background-color: transparent;
+      inset: auto config.$space-4x config.$space-4x config.$space-4x;
     }
   }
 }

package/src/atoms/Input.scss

@@ -1,7 +1,6 @@
 @use '../settings/color_alias';
 @use '../settings/typography/form' as typography;
 @use '../settings/config';
-@import 'button/Button.scss';
 
 .input-group {
   @include typography.input-text;
@@ -125,22 +124,4 @@
       }
     }
   }
-  &.file .input-container {
-    padding: 0;
-    border: none;
-    input {
-      color: color_alias.$neutral-color-600;
-      &::before {
-        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' fill='none'%3E%3Cpath d='M2.943 8.718h4.114V4.694H9.8L5 0 .2 4.694h2.743v4.024ZM5 1.898l1.488 1.455h-.802v4.023H4.314V3.353h-.802L5 1.898Zm-4.8 8.16h9.6V11.4H.2v-1.341Z' fill='%23EB004D'/%3E%3C/svg%3E");
-        position: absolute;
-        left: config.$space-3x;
-        bottom: config.$space-2x;
-      }
-      &::file-selector-button {
-        margin-right: config.$space-2x;
-        padding-left: config.$space-3x + config.$icon-size-2x + config.$space-1x;
-        @extend .button;
-      }
-    }
-  }
 }

package/src/atoms/Input.tsx

@@ -57,7 +57,6 @@ export function Input({
   return (
     <div
       className={classNames('input-group', variant, className, {
-        file: type === 'file',
         invalid: errors?.length,
       })}
     >
@@ -74,7 +73,6 @@ export function Input({
           type={handleInputType()}
           name={name}
           aria-label={accessibilityLabel || label}
-          className={classNames({ 'primary-outlined': type === 'file' })}
           {...props}
         />
         {suffix && <span className="input-suffix">{suffix}</span>}

package/src/icons/filter.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.556 7.143c1.11 0 1.666-.572 1.666-1.714 0-1.143-.555-1.715-1.666-1.715-1.112 0-1.667.572-1.667 1.715 0 1.142.555 1.714 1.667 1.714Zm0 1.714c1.45 0 2.686-.954 3.143-2.286H20V4.286H8.7C8.241 2.954 7.006 2 5.555 2c-1.452 0-2.687.954-3.144 2.286H0V6.57h2.412c.457 1.332 1.692 2.286 3.144 2.286Zm8.888 7.429c-1.227 0-1.666-.452-1.666-1.715 0-1.262.44-1.714 1.666-1.714 1.228 0 1.667.452 1.667 1.714 0 1.263-.44 1.715-1.667 1.715Zm0 1.714c-1.45 0-2.686-.954-3.143-2.286H0V13.43h11.3c.458-1.332 1.693-2.286 3.144-2.286 1.452 0 2.687.954 3.144 2.286H20v2.285h-2.412C17.131 17.046 15.896 18 14.444 18Z" fill="#161C26"/></svg>

package/src/icons/index.tsx

@@ -22,6 +22,7 @@ import EditColumns from './edit-columns.svg'
 import EmptyState from './empty-customize.svg'
 import Error from './error.svg'
 import Export from './export.svg'
+import Filter from './filter.svg'
 import Import from './import.svg'
 import Info from './info.svg'
 import Invoice from './invoice.svg'
@@ -67,6 +68,7 @@ export {
   EmptyState,
   Error,
   Export,
+  Filter,
   Import,
   Info,
   Invoice,

package/src/stories/Changelog.mdx

@@ -4,13 +4,10 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-# 0.25.7
+# 0.26.0
 
-* Add styles for file Input component
-
-# 0.25.6
-
-* Align Form Action buttons horizontally
+* Add CheckableTag & CheckableTagGroup components.
+* Add Filter icon.
 
 # 0.25.5
 

package/src/stories/CheckableTag.stories.js

@@ -0,0 +1,103 @@
+import { CheckableTag, CheckableTagGroup } from '../atoms/CheckableTag'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=3287-999&m=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/CheckableTag',
+  component: CheckableTag,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      description: 'Component variant used',
+    },
+    label: {
+      description: 'Component label',
+    },
+    isDisabled: {
+      description: 'Is the component disabled?',
+    },
+    isChecked: {
+      description: 'Is the component checked?',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export default meta
+
+export const TagGroup = {
+  render: () => (
+    <CheckableTagGroup>
+      <CheckableTag
+        variant="primary"
+        label="RPG"
+        aria-label="RPG games"
+        onSelect={() => {}}
+        onChange={() => {}}
+        isChecked={false}
+      />
+      <CheckableTag
+        variant="primary"
+        label="Sports"
+        aria-label="Sport games"
+        onSelect={() => {}}
+        onChange={() => {}}
+        isChecked={false}
+      />
+      <CheckableTag
+        variant="primary"
+        label="Party"
+        aria-label="Party games"
+        onSelect={() => {}}
+        onChange={() => {}}
+        isChecked={false}
+        isDisabled={true}
+      />
+      <CheckableTag
+        variant="primary"
+        label="Survival horror"
+        aria-label="Survival horror games"
+        onSelect={() => {}}
+        onChange={() => {}}
+        isChecked={true}
+      />
+      <CheckableTag
+        variant="primary"
+        label="Action"
+        aria-label="Action games"
+        onSelect={() => {}}
+        onChange={() => {}}
+        isChecked={false}
+      />
+      <CheckableTag
+        variant="primary"
+        label="Platform"
+        aria-label="Platform games"
+        onSelect={() => {}}
+        onChange={() => {}}
+        isChecked={false}
+      />
+      <CheckableTag
+        variant="primary"
+        label="Graphic adventure"
+        aria-label="Graphic adventure games"
+        onSelect={() => {}}
+        onChange={() => {}}
+        isChecked={false}
+      />
+      <CheckableTag
+        variant="primary"
+        label="FPS"
+        aria-label="First Person Shooter games"
+        onSelect={() => {}}
+        onChange={() => {}}
+        isChecked={false}
+      />
+    </CheckableTagGroup>
+  ),
+}

package/src/stories/Input.stories.ts

@@ -86,18 +86,6 @@ export const Password: Story = {
   parameters: figmaPrimaryDesign,
 }
 
-export const File: Story = {
-  args: {
-    label: 'Label for input file',
-    variant: 'primary',
-    disabled: false,
-    helpText: 'This text can help you',
-    name: 'file',
-    type: 'file',
-  },
-  parameters: figmaPrimaryDesign,
-}
-
 export const WithErrors: Story = {
   args: {
     label: 'Email',

package/tests/Badge.spec.tsx

@@ -1,4 +1,4 @@
-import type { Variant } from '@/atoms/Alert'
+import type { Variant } from '@/atoms/Badge'
 import React from 'react'
 import { render } from '@testing-library/react'
 import { Badge } from '@/atoms/Badge'

package/tests/CheckableTag.spec.tsx

@@ -0,0 +1,26 @@
+import type { Variant } from '@/atoms/CheckableTag'
+import React from 'react'
+import { render } from '@testing-library/react'
+import { CheckableTag } from '@/atoms/CheckableTag'
+
+describe('CheckableTag', () => {
+  const variants = ['primary']
+
+  it.each(variants)('renders the %s variant with text', (variant) => {
+    const label = `${variant} checkable-tag label`
+    const accessibilityLabel = `${variant} checkable-tag label`
+
+    const { getByRole, getByText } = render(
+      <CheckableTag
+        id={`${variant}-checkabletag`}
+        aria-label={accessibilityLabel}
+        label={label}
+        variant={variant as Variant}
+        onSelect={() => jest.fn()}
+        onChange={() => jest.fn()}
+      />,
+    )
+    expect(getByText(label)).toBeInTheDocument()
+    expect(getByRole('checkbox')).toHaveClass(`checkable-tag ${variant}`)
+  })
+})

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"  ],
   "exclude": ["node_modules"]
 }