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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.1.1-beta.1",
+  "version": "1.2.0-beta.0",
   "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/Icon.scss

@@ -48,6 +48,9 @@
   &.error {
     @include mixins.svg-color(var(--error-color-1000));
   }
+  &.primary {
+    @include mixins.svg-color(var(--primary-color-600));
+  }
 
   @keyframes rotate {
     from {

package/src/atoms/Icon.tsx

@@ -5,7 +5,7 @@ import { classNames } from '../utils/classNames'
 export type IconType = keyof typeof icons
 
 export type IconSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8'
-export type Variant = 'info' | 'success' | 'warning' | 'error'
+export type Variant = 'info' | 'success' | 'warning' | 'error' | 'primary'
 
 export interface IconProps extends React.SVGAttributes<HTMLOrSVGElement> {
   name: IconType

package/src/atoms/Notification/NotificationCenter.scss

@@ -0,0 +1,161 @@
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/depth';
+@use '../../settings/breakpoints';
+@use '../../settings/mixins';
+
+.notification-center-container {
+  .notification-center {
+    display: flex;
+    flex-direction: column;
+    width: 350px;
+    box-shadow:
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+      0px 9px 28px 8px rgba(0, 0, 0, 0.05);
+
+    .notification-header {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      .notification-header-title {
+        @include typography.body-bold;
+        display: flex;
+        padding: config.$space-2x config.$space-3x;
+        gap: var(--space-1x);
+        border-radius: config.$corner-radius-m config.$corner-radius-m 0 0;
+        background: var(--neutral-color-900);
+        color: var(--neutral-white);
+      }
+
+      .notification-header-content {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: config.$space-2x config.$space-3x;
+        gap: config.$space-2x;
+        background: var(--neutral-white);
+
+        > .button:last-child {
+          @include typography.footnote-primary;
+          color: var(--primary-color-600);
+          border: 0;
+          background-color: transparent;
+          padding: 0;
+        }
+      }
+    }
+
+    .notification-list {
+      max-height: 370px;
+      overflow-y: auto;
+    }
+
+    .notification-line {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding: config.$space-2x config.$space-3x config.$space-2x
+        config.$space-3x;
+      background-color: var(--neutral-white);
+
+      &:hover {
+        background-color: var(--primary-color-50);
+      }
+
+      .notification-line-head {
+        display: flex;
+        gap: config.$space-2x;
+        justify-content: space-between;
+        align-items: center;
+        cursor: default;
+
+        .notification-line-title {
+          white-space: normal;
+          display: flex;
+          align-items: baseline;
+          @include typography.body-bold;
+
+          &:has(.icon.success) {
+            align-items: center;
+          }
+
+          .icon {
+            margin-right: config.$space-1x;
+
+            &.primary {
+              width: config.$icon-size-2x;
+              height: config.$icon-size-2x;
+            }
+          }
+        }
+        .notification-line-date {
+          @include typography.footnote-primary;
+        }
+      }
+
+      .notification-line-description {
+        display: flex;
+        flex-direction: column;
+        gap: config.$space-2x;
+        cursor: default;
+
+        &[open] summary::after {
+          content: attr(data-open);
+        }
+
+        &:not([open]) summary::after {
+          content: attr(data-close);
+        }
+
+        > summary {
+          list-style: none;
+          color: var(--primary-color-600);
+          text-decoration-line: underline;
+        }
+
+        > summary::-webkit-details-marker {
+          display: none;
+        }
+
+        > p {
+          white-space: normal;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: breakpoints.$medium) {
+  .popover-container {
+    position: relative;
+
+    .popover-menu-container {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+
+      .backdrop {
+        display: none;
+        visibility: hidden;
+      }
+
+      .notification-center {
+        width: 100%;
+        height: 96vh;
+
+        .notification-header {
+          .notification-header-title {
+            border-radius: 0;
+          }
+        }
+
+        .notification-list {
+          max-height: 100vh;
+        }
+      }
+    }
+  }
+}

package/src/atoms/Notification/NotificationCenter.tsx

@@ -0,0 +1,43 @@
+'use client'
+import './NotificationCenter.scss'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+import { IconButton } from '../Button'
+import type { Variant } from '../Button/IconButton'
+import { Popover, type Position } from '../Popover'
+
+export interface NotificationCenterProps {
+  position?: Position
+  className?: string
+  variant?: Variant
+  accessibilityLabel?: string
+  children: React.ReactNode
+}
+
+function NotificationCenter({
+  position = 'right',
+  className,
+  variant = 'secondary',
+  accessibilityLabel = 'Open notifications center',
+  children,
+}: NotificationCenterProps) {
+  return (
+    <Popover
+      position={position}
+      className={classNames('notification-center-container', className)}
+      renderButton={({ toggle }) => (
+        <IconButton
+          icon="Notification"
+          variant={variant}
+          accessibilityLabel={accessibilityLabel}
+          onClick={toggle}
+        />
+      )}
+      closeOnClick={false}
+    >
+      <div className="notification-center">{children}</div>
+    </Popover>
+  )
+}
+
+export { NotificationCenter }

package/src/atoms/Notification/NotificationEmptyState.tsx

@@ -0,0 +1,31 @@
+'use client'
+import './NotificationCenter.scss'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+import { Icon } from '../Icon'
+
+export interface NotificationEmptyStateProps {
+  title: string
+  date: string
+  className?: string
+}
+
+function NotificationEmptyState({
+  title,
+  date,
+  className,
+}: NotificationEmptyStateProps) {
+  return (
+    <div className={classNames('notification-line', className)}>
+      <div className="notification-line-head">
+        <span className="notification-line-title">
+          <Icon variant="success" name="Check" />
+          {title}
+        </span>
+        <span className="notification-line-date">{date}</span>
+      </div>
+    </div>
+  )
+}
+
+export { NotificationEmptyState }

package/src/atoms/Notification/NotificationHeader.tsx

@@ -0,0 +1,28 @@
+'use client'
+import './NotificationCenter.scss'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+import { IconButton } from '../Button'
+import type { Variant } from '../Button/IconButton'
+import { Popover, type Position } from '../Popover'
+
+export interface NotificationHeaderProps {
+  title: string
+  className?: string
+  children: React.ReactNode
+}
+
+function NotificationHeader({
+  title,
+  className,
+  children,
+}: NotificationHeaderProps) {
+  return (
+    <div className={classNames('notification-header', className)}>
+      <div className="notification-header-title">{title}</div>
+      <div className="notification-header-content">{children}</div>
+    </div>
+  )
+}
+
+export { NotificationHeader }

package/src/atoms/Notification/NotificationLine.tsx

@@ -0,0 +1,45 @@
+'use client'
+import './NotificationCenter.scss'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+import { Icon } from '../Icon'
+
+export interface NotificationLineProps extends React.ComponentPropsWithoutRef<'div'> {
+  title: string
+  date: string
+  isRead?: boolean
+  expandLabel?: string
+  collapseLabel?: string
+  className?: string
+  onClick?: () => void
+  children: React.ReactNode
+}
+
+function NotificationLine({
+  title,
+  date,
+  isRead = false,
+  expandLabel = 'View more',
+  collapseLabel = 'View less',
+  className,
+  onClick = () => {},
+  children,
+}: NotificationLineProps) {
+  return (
+    <div className={classNames('notification-line', className)}>
+      <div className="notification-line-head" onClick={onClick}>
+        <span className="notification-line-title">
+          {!isRead && <Icon variant="primary" name="TimelineCircleSelected" />}
+          {title}
+        </span>
+        <span className="notification-line-date">{date}</span>
+      </div>
+      <details className="notification-line-description">
+        <summary data-open={collapseLabel} data-close={expandLabel}></summary>
+        <p>{children}</p>
+      </details>
+    </div>
+  )
+}
+
+export { NotificationLine }

package/src/atoms/Notification/NotificationList.tsx

@@ -0,0 +1,17 @@
+'use client'
+import './NotificationCenter.scss'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+
+export interface NotificationListProps {
+  className?: string
+  children: React.ReactNode
+}
+
+function NotificationList({ className, children }: NotificationListProps) {
+  return (
+    <div className={classNames('notification-list', className)}>{children}</div>
+  )
+}
+
+export { NotificationList }

package/src/atoms/Notification/index.ts

@@ -0,0 +1,13 @@
+import { NotificationCenter } from './NotificationCenter'
+import { NotificationEmptyState } from './NotificationEmptyState'
+import { NotificationHeader } from './NotificationHeader'
+import { NotificationLine } from './NotificationLine'
+import { NotificationList } from './NotificationList'
+
+export {
+  NotificationCenter,
+  NotificationEmptyState,
+  NotificationHeader,
+  NotificationLine,
+  NotificationList,
+}

package/src/atoms/Popover/Popover.tsx

@@ -14,12 +14,13 @@ type Actions = {
 
 export type Horizontal = 'left' | 'right' | 'center'
 
-type Position = Horizontal | `top-${Horizontal}`
+export type Position = Horizontal | `top-${Horizontal}`
 
 export interface PopoverProps {
   renderButton: (props: Actions) => React.ReactNode
   position?: Position
   className?: string
+  closeOnClick?: boolean
   children: React.ReactNode
 }
 
@@ -27,6 +28,7 @@ function Popover({
   renderButton,
   position = 'left',
   className,
+  closeOnClick = true,
   children,
 }: PopoverProps) {
   const { isOpen, close, open, toggle } = useOpen()
@@ -44,7 +46,7 @@ function Popover({
         className={classNames('popover-menu-container', position, {
           hidden: !isOpen,
         })}
-        onClick={close}
+        onClick={closeOnClick ? close : () => {}}
         aria-hidden={!isOpen}
       >
         <div className="backdrop"></div>

package/src/atoms/Popover/index.ts

@@ -1,6 +1,13 @@
 import { Popover } from './Popover'
 import { type Horizontal } from './Popover'
+import { type Position } from './Popover'
 import { PopoverMenu } from './PopoverMenu'
 import { PopoverMenuOption } from './PopoverMenuOption'
 
-export { type Horizontal, Popover, PopoverMenu, PopoverMenuOption }
+export {
+  type Horizontal,
+  Popover,
+  PopoverMenu,
+  PopoverMenuOption,
+  type Position,
+}

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

@@ -40,6 +40,7 @@ import Logout from './logout.svg'
 import Minus from './minus.svg'
 import More from './more.svg'
 import NewView from './new-view.svg'
+import Notification from './notification.svg'
 import Orders from './orders.svg'
 import PDF from './pdf.svg'
 import Picture from './picture.svg'
@@ -57,6 +58,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'
@@ -105,6 +109,7 @@ export {
   Minus,
   More,
   NewView,
+  Notification,
   Orders,
   PDF,
   Picture,
@@ -122,6 +127,9 @@ export {
   ShowOff,
   Sorter,
   TaxRule,
+  TimelineCircleDefault,
+  TimelineCircleSelected,
+  Traceability,
   Upload,
   UserMenu,
   ValidateInvoice,

package/src/icons/notification.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 17.025v-1.983h1.983V8.1c0-1.372.414-2.59 1.24-3.657.826-1.066 1.9-1.764 3.223-2.095v-.694c0-.413.144-.764.434-1.053A1.43 1.43 0 0 1 9.933.167c.414 0 .765.144 1.054.434.29.289.434.64.434 1.053v.694a5.725 5.725 0 0 1 3.223 2.095c.826 1.066 1.24 2.285 1.24 3.657v6.942h1.983v1.983H2ZM9.933 20a1.91 1.91 0 0 1-1.4-.583 1.91 1.91 0 0 1-.583-1.4h3.967a1.91 1.91 0 0 1-.583 1.4 1.91 1.91 0 0 1-1.4.583Z" fill="#161C26"/></svg>

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

@@ -4,17 +4,27 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.0
+
+* Add NotificationCenter components
+
 ## 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 +34,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/Header.stories.tsx

@@ -1,8 +1,7 @@
 import type { StoryObj } from '@storybook/nextjs'
 import React from 'react'
-import { Button, IconButton } from '../atoms/Button'
+import { IconButton } from '../atoms/Button'
 import { Header, type HeaderProps } from '../atoms/Header'
-import { Popover, PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
 
 const meta = {
   title: 'Design System/Atoms/Header',

package/src/stories/Notification.stories.tsx

@@ -0,0 +1,169 @@
+import type { StoryObj } from '@storybook/nextjs'
+import React from 'react'
+import { Button, IconButton } from '../atoms/Button'
+import { CheckableTag, CheckableTagGroup } from '../atoms/CheckableTag'
+import { Header } from '../atoms/Header'
+import {
+  NotificationCenter,
+  NotificationEmptyState,
+  NotificationHeader,
+  NotificationLine,
+  NotificationList,
+} from '../atoms/Notification'
+import type { NotificationCenterProps } from '../atoms/Notification/NotificationCenter'
+
+const meta = {
+  title: 'Design System/Atoms/Notification',
+  component: NotificationCenter,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2>' +
+          '<p>The <code>Header</code> component is used to provide consistent branding and global navigation across the application.</p>' +
+          '<ul>' +
+          '  <li>Use it at the top of every page to display the logo, user menu, and language selector</li>' +
+          '  <li>Keep the header content minimal and focused on global actions only</li>' +
+          '  <li>Position utility items (language selector, user menu) on the right side for better accessibility</li>' +
+          '  <li>Maintain consistent height and styling across all pages</li>' +
+          '</ul>',
+      },
+    },
+  },
+  tags: ['autodocs', 'Feedback components', 'Layout components'],
+  argTypes: {
+    children: {
+      description: 'Header elements are passed as children',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  render: (props: NotificationCenterProps) => (
+    <Header {...props}>
+      <h1>Header Title</h1>
+
+      <div style={{ display: 'flex', gap: '10px', marginRight: '30px' }}>
+        <NotificationCenter {...props}>
+          <NotificationHeader title="Notifications">
+            <CheckableTagGroup>
+              <CheckableTag
+                variant="primary"
+                label="All"
+                aria-label="All notifications"
+                onSelect={() => alert('click')}
+                isChecked={true}
+              />
+              <CheckableTag
+                variant="primary"
+                label="Errors"
+                aria-label="Notification errors"
+                onSelect={() => alert('click')}
+                isChecked={false}
+              />
+              <CheckableTag
+                variant="primary"
+                label="Updates"
+                aria-label="Notification updates"
+                onSelect={() => alert('click')}
+                isChecked={false}
+              />
+            </CheckableTagGroup>
+            <Button
+              onClick={() => alert('mark all as read')}
+              label="Mark all as read"
+            />
+          </NotificationHeader>
+          <NotificationList>
+            <NotificationLine
+              title="Trophy: Parting on Good Terms"
+              date="Jan 04"
+              onClick={() => alert('Notification clicked')}
+            >
+              Good terms? No. I&apos;m here to burn bridges.
+            </NotificationLine>
+            <NotificationLine title="New operating system update" date="Jan 02">
+              Enjoy the new UI and performance improvements. <br /> Contact{' '}
+              <a href="support@fakemail.com">support@fakemail.com</a> for help.
+            </NotificationLine>
+            <NotificationLine title="Trophy: Shell of the Past" date="Dec 30">
+              What exactly have we learned?
+            </NotificationLine>
+            <NotificationLine
+              title="New SHf game patch update"
+              date="Dec 29"
+              isRead={true}
+            >
+              Fixes a bug when saving the game in certain conditions.
+            </NotificationLine>
+            <NotificationLine
+              title="Trophy: On the Way to School"
+              date="Dec 28"
+              isRead={true}
+              onClick={() => alert('Notification clicked')}
+            >
+              The little sparrow escapes with its friends, wings flapping
+              nervously...
+            </NotificationLine>
+          </NotificationList>
+        </NotificationCenter>
+        <IconButton
+          icon="UserMenu"
+          accessibilityLabel="User menu button"
+          variant="secondary"
+        />
+      </div>
+    </Header>
+  ),
+} as unknown as Story
+
+export const EmptyState: Story = {
+  render: (props: NotificationCenterProps) => (
+    <Header {...props}>
+      <h1>Header Title</h1>
+
+      <div style={{ display: 'flex', gap: '10px', marginRight: '30px' }}>
+        <NotificationCenter {...props}>
+          <NotificationHeader title="Notifications">
+            <CheckableTagGroup>
+              <CheckableTag
+                variant="primary"
+                label="All"
+                aria-label="All notifications"
+                onSelect={() => alert('click')}
+                isChecked={true}
+              />
+              <CheckableTag
+                variant="primary"
+                label="Errors"
+                aria-label="Notification errors"
+                onSelect={() => alert('click')}
+                isChecked={false}
+              />
+              <CheckableTag
+                variant="primary"
+                label="Updates"
+                aria-label="Notification updates"
+                onSelect={() => alert('click')}
+                isChecked={false}
+              />
+            </CheckableTagGroup>
+            <Button
+              onClick={() => alert('mark all as read')}
+              label="Mark all as read"
+            />
+          </NotificationHeader>
+          <NotificationEmptyState title="No new notifications" date="Jan 21" />
+        </NotificationCenter>
+        <IconButton
+          icon="UserMenu"
+          accessibilityLabel="User menu button"
+          variant="secondary"
+        />
+      </div>
+    </Header>
+  ),
+} as unknown as Story

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'