agroptima-design-system 1.1.1-beta.1 → 1.1.1-beta.99

package/package.json

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

package/src/atoms/CardsTable/CardsTable.scss

@@ -47,7 +47,7 @@
     cursor: default;
   }
 
-  .checkbox {
+  .checkbox-group {
     margin-top: config.$space-1x;
   }
 

package/src/atoms/Drawer.tsx

@@ -12,7 +12,7 @@ export interface DrawerProps extends React.ComponentPropsWithoutRef<'div'> {
   id: string
   variant?: Variant
   title: string
-  buttons: ButtonProps[]
+  buttons?: ButtonProps[]
   onClose: () => void
 }
 
@@ -21,7 +21,7 @@ export function Drawer({
   className,
   variant = 'primary',
   title,
-  buttons,
+  buttons = [],
   children,
   onClose,
   ...props
@@ -59,13 +59,15 @@ export function Drawer({
             {children}
           </div>
         </div>
-        <div className="footer">
-          <Actions>
-            {buttons.map(({ ...button }) => (
-              <Button key={button.label} {...button} />
-            ))}
-          </Actions>
-        </div>
+        {buttons.length > 0 && (
+          <div className="footer">
+            <Actions>
+              {buttons.map(({ ...button }) => (
+                <Button key={button.label} {...button} />
+              ))}
+            </Actions>
+          </div>
+        )}
       </div>
     </div>
   )

package/src/atoms/Timeline/LoadMoreMilestonesButton.tsx

@@ -0,0 +1,47 @@
+import './Timeline'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+import { BaseButton, type BaseButtonProps } from '../Button'
+import { Icon, type IconType } from '../Icon'
+
+export type Variant = 'primary'
+
+export interface CustomProps {
+  variant?: Variant
+  title: string
+  disabled?: boolean
+  active?: boolean
+  leftIcon?: IconType
+}
+
+export type LoadMoreMilestonesButtonProps = CustomProps & BaseButtonProps
+
+export function LoadMoreMilestonesButton({
+  variant = 'primary',
+  className,
+  title,
+  disabled,
+  leftIcon,
+  prefetch = false,
+  ...props
+}: LoadMoreMilestonesButtonProps): React.JSX.Element {
+  const cssClasses = classNames(
+    'load-more-milestones-button',
+    variant,
+    className,
+    {
+      disabled,
+    },
+  )
+  return (
+    <BaseButton
+      className={cssClasses}
+      aria-disabled={disabled}
+      disabled={disabled}
+      {...props}
+    >
+      {leftIcon && <Icon name={leftIcon} size="6" />}
+      <span className="title">{title}</span>
+    </BaseButton>
+  )
+}

package/src/atoms/Timeline/Milestone.tsx

@@ -0,0 +1,44 @@
+import './Timeline.scss'
+import Link from 'next/link'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+import { Icon } from '../Icon'
+
+export interface MilestoneProps extends React.HTMLAttributes<HTMLLIElement> {
+  title: string
+  description: string
+  isSelected?: boolean
+  href?: string
+}
+
+export function Milestone({
+  title,
+  description,
+  isSelected = false,
+  href = '',
+  className,
+  ...props
+}: MilestoneProps) {
+  return (
+    <li
+      className={classNames('milestone-item', { selected: isSelected })}
+      {...props}
+    >
+      <div className="left-wrapper">
+        <Icon
+          name={isSelected ? 'TimelineCircleSelected' : 'TimelineCircleDefault'}
+        />
+      </div>
+      <div className="right-wrapper">
+        {href === '' ? (
+          <span className="milestone-title">{title}</span>
+        ) : (
+          <Link href={href} className={classNames('milestone-title-link')}>
+            <span className="milestone-title">{title}</span>
+          </Link>
+        )}
+        <p className="milestone-description">{description}</p>
+      </div>
+    </li>
+  )
+}

package/src/atoms/Timeline/Timeline.scss

@@ -0,0 +1,156 @@
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/mixins';
+@use '../../settings/depth';
+
+.timeline-container {
+  .timeline-rail {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: config.$space-halfx;
+      top: 0;
+      bottom: 0;
+      left: 11px;
+      z-index: depth.$z-timeline-rail;
+    }
+  }
+
+  .milestones-list {
+    list-style: none;
+    padding: 0;
+    margin: config.$space-2x 0px config.$space-2x 6px;
+
+    .milestone-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      gap: config.$space-3x;
+
+      .left-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        margin-top: config.$space-2x;
+
+        .icon {
+          width: config.$icon-size-3x;
+          height: config.$icon-size-3x;
+          z-index: depth.$z-timeline-circle;
+        }
+      }
+
+      .milestone-title {
+        @include typography.body-regular-primary;
+      }
+      .milestone-description {
+        @include typography.footnote-primary;
+      }
+
+      &.selected {
+        .milestone-title {
+          @include typography.body-bold;
+        }
+      }
+    }
+  }
+
+  &.primary {
+    .timeline-rail {
+      &::after {
+        background-color: var(--neutral-color-200);
+      }
+    }
+    .milestone-item {
+      .milestone-description {
+        color: var(--neutral-color-600);
+      }
+
+      .milestone-title-link {
+        .milestone-title {
+          color: var(--primary-color-600);
+        }
+      }
+
+      &.selected {
+        .milestone-description {
+          color: var(--neutral-color-1000);
+        }
+
+        @include mixins.icon-color(var(--primary-color-600));
+      }
+    }
+  }
+}
+
+.load-more-milestones-button {
+  display: flex;
+  justify-content: space-between;
+  gap: config.$space-2x;
+  border: 0;
+  background-color: transparent;
+  padding: 0;
+
+  .icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: config.$space-2x;
+    border-radius: config.$corner-radius-xxs;
+    padding: config.$space-1x;
+  }
+
+  &.primary {
+    &:hover {
+      .icon {
+        &:not(:disabled) {
+          border: 1px solid var(--primary-color-600);
+          background: var(--primary-color-50);
+          color: var(--primary-color-600);
+        }
+      }
+
+      .title {
+        &:not(:disabled) {
+          color: var(--primary-color-800);
+        }
+      }
+    }
+
+    .icon {
+      border: 1px solid var(--neutral-color-600);
+      background: var(--neutral-white);
+      @include typography.body-regular-primary;
+
+      > svg {
+        fill: var(--primary-color-600);
+        path {
+          fill: var(--primary-color-600);
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        pointer-events: none;
+        border: 1px solid var(--neutral-color-400);
+        background: var(--neutral-color-50);
+        color: var(--neutral-color-400);
+        > .icon {
+          > svg {
+            fill: var(--neutral-color-400);
+            path {
+              fill: var(--neutral-color-400);
+            }
+          }
+        }
+      }
+    }
+
+    .title {
+      color: var(--primary-color-600);
+    }
+  }
+}

package/src/atoms/Timeline/Timeline.tsx

@@ -0,0 +1,26 @@
+import './Timeline.scss'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+
+export type Variant = 'primary'
+export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: Variant
+}
+
+export function Timeline({
+  className,
+  variant = 'primary',
+  children,
+  ...props
+}: TimelineProps) {
+  return (
+    <div
+      className={classNames('timeline-container', variant, className)}
+      {...props}
+    >
+      <div className="timeline-rail">
+        <ol className={classNames('milestones-list')}>{children}</ol>
+      </div>
+    </div>
+  )
+}

package/src/atoms/Timeline/index.tsx

@@ -0,0 +1,5 @@
+import { Timeline } from './Timeline'
+export type { TimelineProps } from './Timeline'
+import { Milestone } from './Milestone'
+
+export { Milestone, Timeline }

package/src/icons/index.tsx

@@ -57,6 +57,9 @@ import Show from './show.svg'
 import ShowOff from './show-off.svg'
 import Sorter from './sorter.svg'
 import TaxRule from './tax-rule.svg'
+import TimelineCircleDefault from './timeline-circle-default.svg'
+import TimelineCircleSelected from './timeline-circle-selected.svg'
+import Traceability from './traceability.svg'
 import Upload from './upload.svg'
 import UserMenu from './user-menu.svg'
 import ValidateInvoice from './validate-invoice.svg'
@@ -122,6 +125,9 @@ export {
   ShowOff,
   Sorter,
   TaxRule,
+  TimelineCircleDefault,
+  TimelineCircleSelected,
+  Traceability,
   Upload,
   UserMenu,
   ValidateInvoice,

package/src/icons/timeline-circle-default.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M0 5a5 5 0 1 1 10 0A5 5 0 0 1 0 5Z" fill="var(--neutral-white)"/><path d="M8 5a3 3 0 1 0-3 3v2A5 5 0 1 1 5 0a5 5 0 0 1 0 10V8a3 3 0 0 0 3-3Z" fill="var(--neutral-color-800)"/></svg>

package/src/icons/timeline-circle-selected.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M0 5a5 5 0 1 1 10 0A5 5 0 0 1 0 5Z" fill="#161C26"/></svg>

package/src/icons/traceability.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17 19c-.65 0-1.233-.188-1.75-.563A2.91 2.91 0 0 1 14.175 17H9c-1.1 0-2.042-.392-2.825-1.175C5.392 15.042 5 14.1 5 13s.392-2.042 1.175-2.825C6.958 9.392 7.9 9 9 9h2c.55 0 1.02-.196 1.412-.588C12.804 8.021 13 7.55 13 7c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 11 5H5.825a3.09 3.09 0 0 1-1.088 1.438A2.852 2.852 0 0 1 3 7a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 0 4c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 3 1c.65 0 1.23.188 1.737.563.509.375.871.854 1.088 1.437H11c1.1 0 2.042.392 2.825 1.175C14.608 4.958 15 5.9 15 7s-.392 2.042-1.175 2.825C13.042 10.608 12.1 11 11 11H9c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 7 13c0 .55.196 1.02.588 1.412.391.392.862.588 1.412.588h5.175a3.09 3.09 0 0 1 1.087-1.438A2.851 2.851 0 0 1 17 13c.833 0 1.542.292 2.125.875S20 15.167 20 16s-.292 1.542-.875 2.125A2.893 2.893 0 0 1 17 19ZM3 5a.97.97 0 0 0 .712-.287A.968.968 0 0 0 4 4a.968.968 0 0 0-.288-.712A.968.968 0 0 0 3 3a.968.968 0 0 0-.712.288A.968.968 0 0 0 2 4c0 .283.096.52.288.713A.968.968 0 0 0 3 5Z" fill="#161C26"/></svg>

package/src/settings/_depth.scss

@@ -13,4 +13,7 @@ $z-modal: $z-alert-container + $above;
 $z-aside-desktop: $base + $above;
 $z-aside-mobile: $z-modal + $above;
 
-$z-header: $base + $above;
+$z-header: $base + $above;
+
+$z-timeline-rail: $base;
+$z-timeline-circle: $base + $above;

package/src/stories/Changelog.mdx

@@ -7,14 +7,20 @@ import { Meta } from "@storybook/addon-docs/blocks";
 ## 1.1.1
 
 * Update to Storybook 10
-* Add custom `composeStories` helper workaround because of Storybook 10 breaking changes
+* Add custom `composeStories` helper workaround for a11y tests because of Storybook 10 breaking changes
 * Add missing components to a11y tests
 
+## 1.1.0
+
+* Add Timeline, Milestone and LoadMoreMilestonesButton components
+* On Drawer component, `buttons` prop is optional
+* Add Traceability icon
+* Fix Checkbox vertical displacement on CardsTable component
+
 ## 1.0.9
 
 * Add TaxRule icon
 
-
 ## 1.0.8
 
 * CardMenuOption can be a button or a link
@@ -24,12 +30,10 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 * Add link styles to Alert component
 
-
 ## 1.0.6
 
 * Restore select `disabled` styles
 
-
 ## 1.0.5
 
 * Rechecking npm security changes

package/src/stories/Timeline.stories.tsx

@@ -0,0 +1,155 @@
+import type { StoryObj } from '@storybook/nextjs'
+import React from 'react'
+import { Drawer } from '../atoms/Drawer'
+import { Milestone, Timeline } from '../atoms/Timeline'
+import { LoadMoreMilestonesButton } from '../atoms/Timeline/LoadMoreMilestonesButton'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=4786-71&m=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/Timeline',
+  component: Timeline,
+  tags: ['autodocs', 'Data display components'],
+  argTypes: {
+    variant: {
+      description: 'Component variant used',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2>' +
+          '<p>The vertical display Timeline component shows progress through a workflow or chronological events in a linear order.</p>' +
+          '<ul>' +
+          ' <li>Use it when a series of information needs to be ordered by time (ascending or descending).</li>' +
+          ' <li>Use it when you need a timeline to make a visual connection.</li>' +
+          ' <li>The milestone title can either be a button or a link.</li>' +
+          '</ul>',
+      },
+    },
+    figmaPrimaryDesign,
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TimelineDrawer: Story = {
+  render: () => (
+    <Drawer id="timeline-drawer" title="1986" onClose={() => alert('close')}>
+      <div style={{ marginTop: '20px' }}>
+        <LoadMoreMilestonesButton
+          onClick={() => alert('more milestones')}
+          variant="primary"
+          title="View previous"
+          leftIcon="AngleUp"
+        />
+        <Timeline>
+          <Milestone
+            title="1985"
+            description="Nintendo
+NES launches with breakout hits like Super
+Mario Bros.
+Sega launches its Master System."
+          />
+          <Milestone
+            isSelected
+            title="1986"
+            description="Legend of Zelda comes out, spawning a long series of popular games."
+          />
+          <Milestone
+            title="1988"
+            description="Sega's 16-bit
+Mega Drive is introduced, becoming the company's most successful system."
+          />
+          <Milestone
+            title="1989"
+            description="Nintendo's handheld
+Game Boy hits the market."
+          />
+          <Milestone
+            title="1991"
+            description="Sega's hit Sonic the Hedgehog and the 16-bit
+Super Nintendo come out."
+          />
+          <Milestone
+            title="1994"
+            description="32-bit consoles like the Sega Saturn, Sony PlayStation, and NEC PC-FX launch."
+          />
+        </Timeline>
+        <LoadMoreMilestonesButton
+          onClick={() => alert('more milestones')}
+          variant="primary"
+          title="View next"
+          leftIcon="AngleDown"
+        />
+      </div>
+    </Drawer>
+  ),
+} as unknown as Story
+
+export const TimelineWithLinksDrawer: Story = {
+  render: () => (
+    <Drawer id="timeline-drawer" title="1986" onClose={() => alert('close')}>
+      <div style={{ marginTop: '20px' }}>
+        <LoadMoreMilestonesButton
+          onClick={() => alert('more milestones')}
+          variant="primary"
+          title="View previous"
+          leftIcon="AngleUp"
+        />
+        <Timeline>
+          <Milestone
+            title="1985"
+            description="Nintendo
+NES launches with breakout hits like Super
+Mario Bros.
+Sega launches its Master System."
+            href="link.com"
+          />
+          <Milestone
+            isSelected
+            title="1986"
+            description="Legend of Zelda comes out, spawning a long series of popular games."
+            href="link.com"
+          />
+          <Milestone
+            title="1988"
+            description="Sega's 16-bit
+Mega Drive is introduced, becoming the company's most successful system."
+            href="link.com"
+          />
+          <Milestone
+            title="1989"
+            description="Nintendo's handheld
+Game Boy hits the market."
+            href="link.com"
+          />
+          <Milestone
+            title="1991"
+            description="Sega's hit Sonic the Hedgehog and the 16-bit
+Super Nintendo come out."
+            href="link.com"
+          />
+          <Milestone
+            title="1994"
+            description="32-bit consoles like the Sega Saturn, Sony PlayStation, and NEC PC-FX launch."
+            href="link.com"
+          />
+        </Timeline>
+        <LoadMoreMilestonesButton
+          onClick={() => alert('more milestones')}
+          variant="primary"
+          title="View next"
+          leftIcon="AngleDown"
+        />
+      </div>
+    </Drawer>
+  ),
+} as unknown as Story

package/tests/Timeline.spec.tsx

@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { Milestone, Timeline } from '../src/atoms/Timeline'
+import { LoadMoreMilestonesButton } from '../src/atoms/Timeline/LoadMoreMilestonesButton'
+
+describe('Timeline', () => {
+  it('renders with expected content and buttons', () => {
+    const { getByText, getAllByRole } = render(
+      <>
+        <LoadMoreMilestonesButton
+          onClick={() => jest.fn()}
+          variant="primary"
+          title="View previous"
+          leftIcon="AngleUp"
+        />
+        <Timeline>
+          <Milestone
+            title="1985"
+            description="Nintendo
+      NES launches with breakout hits like Super
+      Mario Bros.
+      Sega launches its Master System."
+          />
+          <Milestone
+            isSelected
+            title="1986"
+            description="Legend of Zelda comes out, spawning a long series of popular games."
+          />
+        </Timeline>
+        <LoadMoreMilestonesButton
+          onClick={() => jest.fn()}
+          variant="primary"
+          title="View next"
+          leftIcon="AngleDown"
+        />
+      </>,
+    )
+    expect(getByText('1985')).toBeInTheDocument()
+    expect(getByText(/Nintendo NES launches with/i)).toBeInTheDocument()
+    expect(getByText('1986')).toBeInTheDocument()
+    expect(getByText(/Legend of Zelda comes out/i)).toBeInTheDocument()
+    expect(getAllByRole('listitem')[0]).toHaveClass('milestone-item')
+    expect(getAllByRole('listitem')[1]).toHaveClass('milestone-item selected')
+    expect(getAllByRole('button')[0]).toBeInTheDocument()
+    expect(getAllByRole('button')[1]).toBeInTheDocument()
+    expect(getAllByRole('button')[0]).toHaveClass(
+      'load-more-milestones-button primary',
+    )
+    expect(getAllByRole('button')[1]).toHaveClass(
+      'load-more-milestones-button primary',
+    )
+  })
+})

package/tests/library.ts

@@ -36,3 +36,4 @@ export * as Select from '../src/stories/Select.stories'
 export * as Switch from '../src/stories/Switch.stories'
 export * as TabMenu from '../src/stories/TabMenu.stories'
 export * as TextArea from '../src/stories/TextArea.stories'
+export * as Timeline from '../src/stories/Timeline.stories'