agroptima-design-system 1.1.0-beta.1 → 1.1.1-beta.0

package/.storybook/main.ts

@@ -1,6 +1,13 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
 import type { StorybookConfig } from '@storybook/nextjs'
+import { createRequire } from 'node:module'
+import { fileURLToPath } from 'node:url'
 import { dirname, join, resolve } from 'path'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const require = createRequire(import.meta.url)
+
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.

package/.storybook/manager.ts

@@ -2,7 +2,7 @@ import { addons } from 'storybook/manager-api'
 import {
   defaultConfig,
   type TagBadgeParameters,
-} from 'storybook-addon-tag-badges'
+} from 'storybook-addon-tag-badges/manager-helpers'
 
 addons.setConfig({
   tagBadges: [

package/jest.setup.ts

@@ -1 +1,9 @@
 import '@testing-library/jest-dom'
+
+const mockIntersectionObserver = jest.fn()
+mockIntersectionObserver.mockReturnValue({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+})
+window.IntersectionObserver = mockIntersectionObserver

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.1.0-beta.1",
+  "version": "1.1.1-beta.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -25,12 +25,12 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
-    "@storybook/addon-a11y": "^9.1.16",
-    "@storybook/addon-designs": "^10.0.2",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-links": "^9.1.16",
-    "@storybook/addon-themes": "^9.1.16",
-    "@storybook/nextjs": "^9.1.16",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-designs": "^11.1.1",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/addon-themes": "^10.1.11",
+    "@storybook/nextjs": "^10.1.11",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -46,13 +46,13 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.1.16",
+    "eslint-plugin-storybook": "^10.1.11",
     "jest": "^30.2.0",
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.2.0",
     "prettier": "^3.7.4",
-    "storybook": "^9.1.16",
-    "storybook-addon-tag-badges": "^2.0.4",
+    "storybook": "^10.1.11",
+    "storybook-addon-tag-badges": "^3.0.4",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.3"
   },

package/src/atoms/CardMenu/CardMenu.scss

@@ -12,6 +12,7 @@
   padding: config.$space-3x;
   gap: config.$space-3x;
   border-radius: config.$corner-radius-xxs;
+  border: none;
   text-decoration: none;
   cursor: default;
   &:hover {

package/src/atoms/CardMenu/CardMenuOption.tsx

@@ -1,37 +1,31 @@
 import './CardMenu.scss'
-import type { LinkProps as NextLinkProps } from 'next/link'
-import Link from 'next/link'
 import { classNames } from '../../utils/classNames'
+import { BaseButton, type BaseButtonProps } from '../Button'
 import type { IconType } from '../Icon'
 import { Icon } from '../Icon'
 
 export type Variant = 'primary'
 
-type LinkProps = NextLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
-export interface CardMenuOptionProps extends LinkProps {
-  id?: string
+interface CustomProps {
   variant?: Variant
   icon: IconType
   title: string
   description?: string
-  disabled?: boolean
-  href: string
   active?: boolean
   error?: boolean
 }
 
+export type CardMenuOptionProps = CustomProps & BaseButtonProps
+
 export function CardMenuOption({
-  id,
   variant = 'primary',
   className,
   icon,
   title,
   description,
-  disabled,
-  href,
+  disabled = false,
   active,
   error,
-  prefetch = false,
   ...props
 }: CardMenuOptionProps): React.JSX.Element {
   const cssClasses = classNames('card-menu-option', variant, className, {
@@ -41,12 +35,11 @@ export function CardMenuOption({
   })
 
   return (
-    <Link
+    <BaseButton
       role="menuitem"
       className={cssClasses}
-      href={disabled ? '#' : href}
-      aria-disabled={disabled}
-      prefetch={prefetch}
+      disabled={disabled}
+      type="button"
       {...props}
     >
       <div className="left">
@@ -59,6 +52,6 @@ export function CardMenuOption({
       <div className="right">
         <Icon name="AngleRight" className={variant} />
       </div>
-    </Link>
+    </BaseButton>
   )
 }

package/src/atoms/CardsTable/CardsTable.scss

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

package/src/atoms/Divider.scss

@@ -4,42 +4,48 @@
 
 $border-line: 1px solid var(--neutral-color-200);
 
-.divider {
+.divider-container {
   @include mixins.icon-color(var(--primary-color-600));
   @include typography.body_bold;
   display: flex;
-  align-items: center;
   gap: config.$space-3x;
 
-  &-title {
+  .divider {
+    width: 100%;
     display: flex;
     align-items: center;
-  }
-
-  .short {
-    width: config.$space-6x;
-    margin-right: config.$space-3x;
-  }
-
-  .line {
-    border: $border-line;
-  }
-
-  .long {
-    flex: 1;
-  }
-
-  .icon {
-    margin-right: config.$space-2x;
-  }
-
-  .link {
-    color: var(--primary-color-600);
-    text-decoration-line: underline;
-    cursor: default;
-  }
-
-  .iconButton {
-    margin-left: config.$space-3x;
+    gap: config.$space-3x;
+
+    &-title {
+      display: flex;
+      align-items: center;
+    }
+
+    .short {
+      width: config.$space-6x;
+      margin-right: config.$space-3x;
+    }
+
+    .line {
+      border: $border-line;
+    }
+
+    .long {
+      flex: 1;
+    }
+
+    .icon {
+      margin-right: config.$space-2x;
+    }
+
+    .link {
+      color: var(--primary-color-600);
+      text-decoration-line: underline;
+      cursor: default;
+    }
+
+    .iconButton {
+      margin-left: config.$space-3x;
+    }
   }
 }

package/src/atoms/Divider.tsx

@@ -27,16 +27,18 @@ export function Divider({
   const cssClasses = classNames('divider', variant, className)
 
   return (
-    <div role="separator" className={cssClasses}>
-      {title && (
-        <div className="divider-title">
-          <DividerIcon icon={icon} />
-          <span onClick={onClick} className={classNames({ link: hasAction })}>
-            {title}
-          </span>
-        </div>
-      )}
-      <div className="long line"></div>
+    <div className="divider-container">
+      <div role="separator" className={cssClasses}>
+        {title && (
+          <div className="divider-title">
+            <DividerIcon icon={icon} />
+            <span onClick={onClick} className={classNames({ link: hasAction })}>
+              {title}
+            </span>
+          </div>
+        )}
+        <div className="long line"></div>
+      </div>
       {children}
     </div>
   )

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,15 +59,13 @@ export function Drawer({
             {children}
           </div>
         </div>
-        {buttons.length > 0 && (
-          <div className="footer">
-            <Actions>
-              {buttons.map(({ ...button }) => (
-                <Button key={button.label} {...button} />
-              ))}
-            </Actions>
-          </div>
-        )}
+        <div className="footer">
+          <Actions>
+            {buttons.map(({ ...button }) => (
+              <Button key={button.label} {...button} />
+            ))}
+          </Actions>
+        </div>
       </div>
     </div>
   )

package/src/atoms/Select/InfiniteSelect.tsx

@@ -201,7 +201,7 @@ export function InfiniteSelect<T extends { uid: string }>({
             icon="Search"
             className="search"
           />
-          <ul role="listbox">
+          <ul role="listbox" aria-label="infinite-select-list">
             {items.map((item) => (
               <SelectItem
                 multiple={false}
@@ -233,8 +233,9 @@ function LoadingItems({
   loaderRef: RefObject<HTMLDivElement | null>
 }) {
   if (!visible) return null
+
   return (
-    <li>
+    <li role="option" aria-selected="false">
       <div ref={loaderRef} aria-label={label} className="loading">
         <Icon name="Loading" />
       </div>

package/src/icons/index.tsx

@@ -56,9 +56,7 @@ import Settings from './settings.svg'
 import Show from './show.svg'
 import ShowOff from './show-off.svg'
 import Sorter from './sorter.svg'
-import TimelineCircleDefault from './timeline-circle-default.svg'
-import TimelineCircleSelected from './timeline-circle-selected.svg'
-import Traceability from './traceability.svg'
+import TaxRule from './tax-rule.svg'
 import Upload from './upload.svg'
 import UserMenu from './user-menu.svg'
 import ValidateInvoice from './validate-invoice.svg'
@@ -123,9 +121,7 @@ export {
   Show,
   ShowOff,
   Sorter,
-  TimelineCircleDefault,
-  TimelineCircleSelected,
-  Traceability,
+  TaxRule,
   Upload,
   UserMenu,
   ValidateInvoice,

package/src/icons/tax-rule.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#tax-rule__a)"><path d="M4.375 8.75c-1.208 0-2.24-.427-3.094-1.281C.427 6.615 0 5.583 0 4.375s.427-2.24 1.281-3.094C2.135.427 3.167 0 4.375 0s2.24.427 3.094 1.281c.854.854 1.281 1.886 1.281 3.094s-.427 2.24-1.281 3.094c-.854.854-1.886 1.281-3.094 1.281Zm0-2.5c.52 0 .964-.182 1.328-.547.365-.364.547-.807.547-1.328 0-.52-.182-.964-.547-1.328A1.808 1.808 0 0 0 4.375 2.5c-.52 0-.964.182-1.328.547A1.808 1.808 0 0 0 2.5 4.375c0 .52.182.964.547 1.328.364.365.807.547 1.328.547ZM15.625 20c-1.208 0-2.24-.427-3.094-1.281-.854-.854-1.281-1.886-1.281-3.094s.427-2.24 1.281-3.094c.854-.854 1.886-1.281 3.094-1.281s2.24.427 3.094 1.281c.854.854 1.281 1.886 1.281 3.094s-.427 2.24-1.281 3.094c-.854.854-1.886 1.281-3.094 1.281Zm0-2.5c.52 0 .963-.182 1.328-.547.365-.364.547-.807.547-1.328 0-.52-.182-.963-.547-1.328a1.808 1.808 0 0 0-1.328-.547c-.52 0-.963.182-1.328.547a1.808 1.808 0 0 0-.547 1.328c0 .52.182.963.547 1.328.364.365.807.547 1.328.547ZM1.75 20 0 18.25 18.25 0 20 1.75 1.75 20Z" fill="#161C26"/></g><defs><clipPath id="tax-rule__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/settings/_depth.scss

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

package/src/stories/AlertContainer.stories.tsx

@@ -24,7 +24,7 @@ export const Primary: Story = {
   render: () => (
     <AlertContainer>
       <Alert variant="success" id="success" text="This is a success alert" />
-      <Alert variant="error" id="error" text="This is a error alert" />
+      <Alert variant="error" id="error" text="This is an error alert" />
     </AlertContainer>
   ),
 }

package/src/stories/CardMenu.stories.tsx

@@ -56,62 +56,70 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Option: Story = {
+export const LinkOption: Story = {
   render: () => (
-    <CardMenuOption
-      id="first-menu-option"
-      href="http://fakelink.com"
-      icon="Info"
-      variant="primary"
-      title="It's dangerous to go alone!"
-      description="Take this 🗡️ and this 🛡️ and this 💣 and this 🏹 and this 🔪 and this 🐴 and this 🔫 and this 🔪"
-    />
+    <CardMenu>
+      <CardMenuOption
+        id="first-menu-option"
+        href="http://fakelink.com"
+        icon="Info"
+        variant="primary"
+        title="It's dangerous to go alone!"
+        description="Take this 🗡️ and this 🛡️ and this 💣 and this 🏹 and this 🔪 and this 🐴 and this 🔫 and this 🔪"
+      />
+    </CardMenu>
   ),
 } as unknown as Story
 
-export const DisabledOption: Story = {
+export const LinkDisabledOption: Story = {
   render: () => (
-    <CardMenuOption
-      id="first-menu-option"
-      href="#"
-      icon="Info"
-      variant="primary"
-      title="It's dangerous to go alone!"
-      description="Take this 🗡️"
-      disabled
-    />
+    <CardMenu>
+      <CardMenuOption
+        id="first-menu-option"
+        href="#"
+        icon="Info"
+        variant="primary"
+        title="It's dangerous to go alone!"
+        description="Take this 🗡️"
+        disabled
+      />
+    </CardMenu>
   ),
 } as unknown as Story
 
-export const ActiveOption: Story = {
+export const LinkActiveOption: Story = {
   render: () => (
-    <CardMenuOption
-      id="first-menu-option"
-      href="#"
-      icon="Info"
-      variant="primary"
-      title="It's dangerous to go alone!"
-      description="Take this 🗡️"
-      active
-    />
+    <CardMenu>
+      <CardMenuOption
+        id="first-menu-option"
+        href="#"
+        icon="Info"
+        variant="primary"
+        title="It's dangerous to go alone!"
+        description="Take this 🗡️"
+        active
+      />
+    </CardMenu>
   ),
 } as unknown as Story
 
-export const ErrorOption: Story = {
+export const LinkErrorOption: Story = {
   render: () => (
-    <CardMenuOption
-      id="first-menu-option"
-      href="#"
-      icon="Info"
-      variant="primary"
-      title="It's dangerous to go alone!"
-      description="Take this 🗡️"
-      error
-    />
+    <CardMenu>
+      <CardMenuOption
+        id="first-menu-option"
+        href="#"
+        icon="Info"
+        variant="primary"
+        title="It's dangerous to go alone!"
+        description="Take this 🗡️"
+        error
+      />
+    </CardMenu>
   ),
 } as unknown as Story
 
-export const Menu: Story = {
+export const LinkMenu: Story = {
   render: () => (
     <CardMenu>
       <CardMenuOption
@@ -142,3 +150,18 @@ export const Menu: Story = {
     </CardMenu>
   ),
 } as unknown as Story
+
+export const ButtonOption: Story = {
+  render: () => (
+    <CardMenu>
+      <CardMenuOption
+        id="first-menu-option"
+        icon="Info"
+        variant="primary"
+        title="It's dangerous to go alone!"
+        description="Take this 🗡️ and this 🛡️ and this 💣 and this 🏹 and this 🔪 and this 🐴 and this 🔫 and this 🔪"
+        onClick={() => alert('Clicked!')}
+      />
+    </CardMenu>
+  ),
+} as unknown as Story

package/src/stories/Changelog.mdx

@@ -4,21 +4,32 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
-## 1.1.0
+## 1.1.1
+
+* Update to Storybook 10
+* Add custom `composeStories` helper workaround because of Storybook 10 breaking changes
+* Add missing components to a11y tests
+
+## 1.0.9
+
+* Add TaxRule icon
+
+
+## 1.0.8
+
+* CardMenuOption can be a button or a link
 
-* 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.7
 
 * Add link styles to Alert component
 
+
 ## 1.0.6
 
 * Restore select `disabled` styles
 
+
 ## 1.0.5
 
 * Rechecking npm security changes

package/tests/CardMenuOption.spec.tsx

@@ -19,4 +19,16 @@ describe('CardMenuOption', () => {
     expect(getByText(/this sword/i)).toBeInTheDocument()
     expect(getAllByRole('img')[0].title).toBe('Info')
   })
+  it('renders a button if dont have href', () => {
+    const { getByRole } = render(
+      <CardMenuOption
+        id="option-one"
+        icon="Info"
+        title="It's dangerous to go alone!"
+        description="Take this sword!"
+      />,
+    )
+
+    expect(getByRole('menuitem')).not.toHaveAttribute('href')
+  })
 })

package/tests/a11y.spec.tsx

@@ -1,7 +1,7 @@
-import { composeStories } from '@storybook/react'
 import { act, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import * as components from './library'
+import { composeStories } from './utils/storybookHelpers'
 
 expect.extend(toHaveNoViolations)
 

package/tests/library.ts

@@ -1,13 +1,38 @@
+export * as ActionsMenu from '../src/stories/ActionsMenu.stories'
+export * as Alert from '../src/stories/Alert.stories'
+export * as AlertContainer from '../src/stories/AlertContainer.stories'
+export * as Badge from '../src/stories/Badge.stories'
 export * as Button from '../src/stories/Button.stories'
+export * as ButtonGroup from '../src/stories/ButtonGroup.stories'
+export * as Card from '../src/stories/Card.stories'
+export * as CardMenu from '../src/stories/CardMenu.stories'
 export * as CardsTable from '../src/stories/CardsTable.stories'
+export * as CheckableTag from '../src/stories/CheckableTag.stories'
 export * as Checkbox from '../src/stories/Checkbox.stories'
+export * as Collapsible from '../src/stories/Collapsible.stories'
+export * as DateRangePicker from '../src/stories/DateRangePicker.stories'
+export * as DateSinglePicker from '../src/stories/DateSinglePicker.stories'
+export * as Divider from '../src/stories/Divider.stories'
+export * as Drawer from '../src/stories/Drawer.stories'
 export * as EmptyState from '../src/stories/EmptyState.stories'
+export * as FloatingButton from '../src/stories/FloatingButton.stories'
 export * as Form from '../src/stories/Form.stories'
+export * as Header from '../src/stories/Header.stories'
 export * as HelpText from '../src/stories/HelpText.stories'
 export * as IconButton from '../src/stories/IconButton.stories'
+export * as InfiniteSelect from '../src/stories/InfiniteSelect.stories'
 export * as Input from '../src/stories/Input.stories'
+export * as InputWithButton from '../src/stories/InputWithButton.stories'
 export * as Label from '../src/stories/Label.stories'
+export * as Menu from '../src/stories/Menu.stories'
 export * as Modal from '../src/stories/Modal.stories'
 export * as Multiselect from '../src/stories/Multiselect.stories'
+export * as Pagination from '../src/stories/Pagination.stories'
+export * as Popover from '../src/stories/Popover.stories'
+export * as PopoverMenu from '../src/stories/PopoverMenu.stories'
+export * as QuantitySelector from '../src/stories/QuantitySelector.stories'
 export * as RadioGroup from '../src/stories/RadioGroup.stories'
 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'

package/tests/utils/storybookHelpers.ts

@@ -0,0 +1,45 @@
+import * as React from 'react'
+/**
+ * @storybook/react provides the composeStories utility that helps convert CSF stories from a test file
+ * into renderable elements that can be reused in your Node tests with JSDOM.
+ *
+ * Due to Storybook 10 change to ESM only and CommonJS support drop breaking changes,
+ * something on composeStories is broken related to this and when running the a11y tests, a modules error
+ * is thrown.
+ *
+ * The following helper is a working workaround to the original composeStories, making the a11y tests work again.
+ * Once Storybook provides a fix for this, we can drop this helper and use the original composeStories from
+ * @storybook/react.
+ */
+
+export function composeStories(csfModule: Record<string, any>) {
+  const result: Record<string, (...args: any[]) => any> = {}
+  const meta = csfModule.default || {}
+  const metaComponent = meta.component
+  const metaArgs = meta.args || {}
+
+  Object.keys(csfModule).forEach((key) => {
+    if (key === 'default') return
+    const exported = csfModule[key]
+
+    // Story object with a `render` function (CSF v3 render)
+    if (exported && typeof exported.render === 'function') {
+      result[key] = (props: any = {}) =>
+        exported.render({ ...(exported.args || {}), ...(props.args || {}) })
+      return
+    }
+
+    // CSF named export objects that rely on `default.component`
+    if (metaComponent && exported && typeof exported === 'object') {
+      result[key] = (props: any = {}) =>
+        React.createElement(metaComponent, {
+          ...metaArgs,
+          ...(exported.args || {}),
+          ...(props.args || {}),
+        })
+      return
+    }
+  })
+
+  return result
+}

package/src/atoms/Timeline/LoadMoreMilestonesButton.tsx

@@ -1,47 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,156 +0,0 @@
-@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

@@ -1,26 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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/stories/Timeline.stories.tsx

@@ -1,155 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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',
-    )
-  })
-})