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

package/package.json

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

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,163 @@
+@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: 93vh;
+
+        .notification-header {
+          .notification-header-title {
+            border-radius: 0;
+          }
+        }
+
+        .notification-list {
+          height: 100%;
+          background-color: var(--neutral-white);
+          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/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'
@@ -108,6 +109,7 @@ export {
   Minus,
   More,
   NewView,
+  Notification,
   Orders,
   PDF,
   Picture,

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/stories/Changelog.mdx

@@ -4,6 +4,10 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.0
+
+* Add NotificationCenter components
+
 ## 1.1.1
 
 * Update to Storybook 10

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>
+          <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