agroptima-design-system 0.26.0-beta.8 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.26.0-beta.8",
+  "version": "0.26.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -17,7 +17,6 @@
   "dependencies": {
     "@storybook/addon-designs": "^8.0.3",
     "@storybook/addon-viewport": "^8.3.2",
-    "agroptima-design-system": "^0.26.0-beta.3",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/src/atoms/Button/BaseButton.tsx

@@ -2,6 +2,7 @@ import NextLink from 'next/link'
 
 interface CommonProps {
   disabled?: boolean
+  visible?: boolean
 }
 
 type HtmlButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
@@ -15,7 +16,12 @@ export type BaseButtonProps =
 const hasHref = (props: HtmlButtonProps | AnchorProps): props is AnchorProps =>
   'href' in props
 
-export function BaseButton({ children, ...props }: BaseButtonProps) {
+export function BaseButton({
+  children,
+  visible = true,
+  ...props
+}: BaseButtonProps) {
+  if (!visible) return null
   if (hasHref(props)) {
     return (
       <NextLink href={props.href || ''} {...props}>

package/src/atoms/Button/IconButton.tsx

@@ -11,7 +11,6 @@ interface CustomProps {
   icon: IconType
   variant?: Variant
   disabled?: boolean
-  visible?: boolean
   accessibilityLabel: string
 }
 
@@ -21,12 +20,9 @@ export function IconButton({
   accessibilityLabel,
   icon,
   disabled,
-  visible = true,
   variant = 'primary',
   ...props
 }: IconButtonProps) {
-  if (!visible) return null
-
   return (
     <BaseButton
       disabled={disabled}

package/src/atoms/CheckableTag/CheckableTag.tsx

@@ -3,19 +3,17 @@ import './CheckableTag.scss'
 
 export type Variant = 'primary'
 
-type CheckableTagPropsWithoutOnChangeOnSelect = Omit<
+type CheckableTagPropsWithoutOnSelect = Omit<
   React.ComponentPropsWithoutRef<'span'>,
-  'onChange' | 'onSelect'
+  'onSelect'
 >
 
-export interface CheckableTagProps
-  extends CheckableTagPropsWithoutOnChangeOnSelect {
+export interface CheckableTagProps extends CheckableTagPropsWithoutOnSelect {
   variant?: Variant
   isDisabled?: boolean
   isChecked?: boolean
   label: string
   onSelect: (label: string) => void
-  onChange: (checked: boolean) => void
 }
 
 export function CheckableTag({
@@ -25,7 +23,6 @@ export function CheckableTag({
   label,
   isChecked = false,
   onSelect,
-  onChange,
   ...props
 }: CheckableTagProps): React.JSX.Element {
   const cssClasses = classNames('checkable-tag', variant, className, {
@@ -33,11 +30,6 @@ export function CheckableTag({
     checked: isChecked,
   })
 
-  function handleClick() {
-    onChange(!isChecked)
-    onSelect(label)
-  }
-
   return (
     <span
       className={cssClasses}
@@ -45,7 +37,7 @@ export function CheckableTag({
       aria-checked={false}
       tabIndex={0}
       aria-label={props['aria-label']}
-      onClick={handleClick}
+      onClick={() => onSelect(label)}
       {...props}
     >
       {label}

package/src/atoms/CheckableTag/index.ts

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

package/src/atoms/Drawer.tsx

@@ -11,7 +11,7 @@ export interface DrawerProps extends React.ComponentPropsWithoutRef<'div'> {
   variant?: Variant
   title: string
   buttons: ButtonProps[]
-  onCloseDrawer: () => void
+  onClose: () => void
 }
 
 export function Drawer({
@@ -21,7 +21,7 @@ export function Drawer({
   title,
   buttons,
   children,
-  onCloseDrawer,
+  onClose,
   ...props
 }: DrawerProps): React.JSX.Element {
   const cssClasses = classNames('drawer', variant, className)
@@ -40,7 +40,7 @@ export function Drawer({
           <IconButton
             icon="Close"
             accessibilityLabel="Close"
-            onClick={onCloseDrawer}
+            onClick={onClose}
           />
         </div>
         <div className="scroll-area">

package/src/atoms/Input.scss

@@ -127,7 +127,10 @@
   }
   &.file .input-container {
     padding: 0;
-    border: none;
+    border: transparent;
+    &:has(input:focus) {
+      border: transparent;
+    }
     input {
       color: color_alias.$neutral-color-600;
       &::before {

package/src/atoms/Modal.scss

@@ -48,6 +48,7 @@
         display: flex;
         gap: config.$space-2x;
         align-items: flex-start;
+        padding-bottom: config.$space-2x;
 
         .icon {
           margin-top: 4px;

package/src/icons/download.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 6.706h-4.571V0H6.57v6.706H2l8 7.823 8-7.823ZM8.857 8.94V2.235h2.286v6.706h1.337L10 11.366 7.52 8.942h1.337ZM2 16.765h16V19H2v-2.235Z" fill="#161C26"/></svg>

package/src/icons/index.tsx

@@ -17,6 +17,7 @@ import Delete from './delete.svg'
 import Done from './done.svg'
 import DoubleArrowLeft from './double-arrow-left.svg'
 import DoubleArrowRight from './double-arrow-right.svg'
+import Download from './download.svg'
 import Edit from './edit.svg'
 import EditColumns from './edit-columns.svg'
 import EmptyState from './empty-customize.svg'
@@ -37,6 +38,7 @@ import Settings from './settings.svg'
 import Show from './show.svg'
 import ShowOff from './show-off.svg'
 import Sorter from './sorter.svg'
+import Upload from './upload.svg'
 import UserMenu from './user-menu.svg'
 import Warning from './warning.svg'
 import DeliveryNote from './delivery-note.svg'
@@ -63,6 +65,7 @@ export {
   Done,
   DoubleArrowLeft,
   DoubleArrowRight,
+  Download,
   Edit,
   EditColumns,
   EmptyState,
@@ -84,6 +87,7 @@ export {
   Show,
   ShowOff,
   Sorter,
+  Upload,
   UserMenu,
   Warning,
 }

package/src/icons/upload.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M6.571 14.53h6.858V7.823H18L10 0 2 7.824h4.571v6.705ZM10 3.162l2.48 2.425h-1.337v6.706H8.857V5.588H7.52L10 3.163ZM2 16.765h16V19H2v-2.235Z" fill="#161C26"/></svg>

package/src/stories/Button.stories.ts

@@ -37,6 +37,10 @@ const meta = {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',
     },
+    visible: {
+      description: 'Is the button visible?',
+      control: { type: 'boolean', default: true },
+    },
   },
 }
 

package/src/stories/Changelog.mdx

@@ -11,6 +11,12 @@ import { Meta } from "@storybook/blocks";
 * Add Dot option to Badge component.
 * Add Drawer component.
 
+# 0.25.8
+
+* Remove focus style for file Input component
+* Download and Upload icons
+* Add visible prop to buttons
+
 # 0.25.7
 
 * Add styles for file Input component

package/src/stories/CheckableTag.stories.js

@@ -24,6 +24,9 @@ const meta = {
     isChecked: {
       description: 'Is the component checked?',
     },
+    onSelect: {
+      description: 'Callback triggered when clicking on an option'
+    }
   },
   parameters: figmaPrimaryDesign,
 }
@@ -37,24 +40,21 @@ export const TagGroup = {
         variant="primary"
         label="RPG"
         aria-label="RPG games"
-        onSelect={() => {}}
-        onChange={() => {}}
+        onSelect={() => alert('click')}
         isChecked={false}
       />
       <CheckableTag
         variant="primary"
         label="Sports"
         aria-label="Sport games"
-        onSelect={() => {}}
-        onChange={() => {}}
+        onSelect={() => alert('click')}
         isChecked={false}
       />
       <CheckableTag
         variant="primary"
         label="Party"
         aria-label="Party games"
-        onSelect={() => {}}
-        onChange={() => {}}
+        onSelect={() => alert('click')}
         isChecked={false}
         isDisabled={true}
       />
@@ -62,40 +62,35 @@ export const TagGroup = {
         variant="primary"
         label="Survival horror"
         aria-label="Survival horror games"
-        onSelect={() => {}}
-        onChange={() => {}}
+        onSelect={() => alert('click')}
         isChecked={true}
       />
       <CheckableTag
         variant="primary"
         label="Action"
         aria-label="Action games"
-        onSelect={() => {}}
-        onChange={() => {}}
+        onSelect={() => alert('click')}
         isChecked={false}
       />
       <CheckableTag
         variant="primary"
         label="Platform"
         aria-label="Platform games"
-        onSelect={() => {}}
-        onChange={() => {}}
+        onSelect={() => alert('click')}
         isChecked={false}
       />
       <CheckableTag
         variant="primary"
         label="Graphic adventure"
         aria-label="Graphic adventure games"
-        onSelect={() => {}}
-        onChange={() => {}}
+        onSelect={() => alert('click')}
         isChecked={false}
       />
       <CheckableTag
         variant="primary"
         label="FPS"
         aria-label="First Person Shooter games"
-        onSelect={() => {}}
-        onChange={() => {}}
+        onSelect={() => alert('click')}
         isChecked={false}
       />
     </CheckableTagGroup>

package/src/stories/Drawer.stories.js

@@ -41,7 +41,7 @@ export const Filters = {
       title="Filters"
       buttons={[
         {
-          label: 'Clean',
+          label: 'Clear',
           variant: 'primary-outlined',
           onClick: () => alert('click'),
         },

package/tests/Drawer.spec.tsx

@@ -1,63 +1,49 @@
 import React from 'react'
-import { screen, render, queryByRole } from '@testing-library/react'
-import { Modal } from '@/atoms/Modal'
+import { render } from '@testing-library/react'
+import { Drawer } from '@/atoms/Drawer'
+import { Collapsible } from '@/atoms/Collapsible'
+import { CheckableTag, CheckableTagGroup } from '@/atoms/CheckableTag'
 
-describe('Modal', () => {
-  const variants = ['info', 'success', 'warning', 'error']
-  it.each(variants)(
-    'renders the %s variant with title and the expected icon and button',
-    (variant) => {
-      const title = `${variant} modal`
-      const content = `${variant} modal content`
-      const { getByRole, getByText } = render(
-        <Modal
-          id={`${variant}-modal`}
-          title={title}
-          buttons={[
-            {
-              label: 'Done',
-            },
-          ]}
-        >
-          {content}
-        </Modal>,
-      )
-      expect(getByRole('img')).toHaveClass('info')
-      expect(getByText(title)).toBeInTheDocument()
-      expect(getByText(content)).toBeInTheDocument()
-      expect(getByRole('button')).toHaveTextContent('Done')
-      expect(getByRole('button')).toHaveClass('primary')
-    },
-  )
-
-  it('renders the Delete/Discard variant with title and the expected icon and buttons', () => {
-    const title = 'Delete modal'
-    const content = 'Delete modal content'
-    const { getByRole, getByText } = render(
-      <Modal
-        id="discard-modal"
-        title={title}
-        variant="discard"
+describe('Drawer', () => {
+  it('renders with expected title, content and buttons', () => {
+    const { getByLabelText, getByText, getAllByRole } = render(
+      <Drawer
+        id="videogames-filters"
+        title="Filters"
+        onClose={jest.fn()}
         buttons={[
           {
-            label: 'Cancel',
-            variant: 'neutral',
+            label: 'Clear',
+            variant: 'primary-outlined',
+            onClick: () => alert('click'),
           },
           {
-            label: 'Delete',
-            variant: 'error',
+            label: 'Apply',
+            onClick: () => alert('click'),
           },
         ]}
       >
-        {content}
-      </Modal>,
+        <Collapsible noHorizontalPadding open title="Genres">
+          <CheckableTagGroup>
+            <CheckableTag
+              variant="primary"
+              label="RPG"
+              aria-label="RPG games"
+              onSelect={() => {}}
+              onChange={() => {}}
+              isChecked={false}
+            />
+          </CheckableTagGroup>
+        </Collapsible>
+      </Drawer>,
     )
-    expect(getByRole('img')).toHaveClass('discard')
-    expect(getByText(title)).toBeInTheDocument()
-    expect(getByText(content)).toBeInTheDocument()
-    expect(screen.getAllByRole('button')[0]).toHaveTextContent('Cancel')
-    expect(screen.getAllByRole('button')[0]).toHaveClass('neutral')
-    expect(screen.getAllByRole('button')[1]).toHaveTextContent('Delete')
-    expect(screen.getAllByRole('button')[1]).toHaveClass('error')
+    expect(getByText('Filters')).toBeInTheDocument()
+    expect(getByText('RPG')).toBeInTheDocument()
+    expect(getByLabelText('Close')).toBeInTheDocument()
+    expect(getAllByRole('button')[0]).toHaveClass('icon-button primary')
+    expect(getAllByRole('button')[1]).toHaveTextContent('Clear')
+    expect(getAllByRole('button')[1]).toHaveClass('primary-outlined')
+    expect(getAllByRole('button')[2]).toHaveTextContent('Apply')
+    expect(getAllByRole('button')[2]).toHaveClass('primary')
   })
 })

package/tests/Modal.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { screen, render, queryByRole } from '@testing-library/react'
+import { screen, render } from '@testing-library/react'
 import { Modal } from '@/atoms/Modal'
 
 describe('Modal', () => {