agroptima-design-system 1.2.0-beta.0 → 1.2.0-beta.2

package/package.json

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

package/src/atoms/Notification/NotificationCenter.scss

@@ -144,7 +144,7 @@
 
       .notification-center {
         width: 100%;
-        height: 96vh;
+        height: 93vh;
 
         .notification-header {
           .notification-header-title {
@@ -153,8 +153,16 @@
         }
 
         .notification-list {
+          height: 100%;
+          background-color: var(--neutral-white);
           max-height: 100vh;
         }
+
+        .notification-line {
+          &.empty-state {
+            height: 100%;
+          }
+        }
       }
     }
   }

package/src/atoms/Notification/NotificationEmptyState.tsx

@@ -16,7 +16,7 @@ function NotificationEmptyState({
   className,
 }: NotificationEmptyStateProps) {
   return (
-    <div className={classNames('notification-line', className)}>
+    <div className={classNames('notification-line', 'empty-state', className)}>
       <div className="notification-line-head">
         <span className="notification-line-title">
           <Icon variant="success" name="Check" />

package/src/stories/Notification.stories.tsx

@@ -20,12 +20,12 @@ const meta = {
       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>' +
+          '<p>The <code>NotificationCenter</code> component is used to show an open/close action, list of notifications and related filters actions to the user.</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>' +
+          '  <li>Use it at the header to display the open/close IconButton</li>' +
+          '  <li>By default, the <code>NotificationCenter</code> will be aligned to the right of the open/close IconButton</li>' +
+          '  <li>Use short, informative, and actionable text. Avoid vague, repetitive, or excessive notifications</li>' +
+          '  <li>Distinguish between read and unread messages</li>' +
           '</ul>',
       },
     },
@@ -33,7 +33,7 @@ const meta = {
   tags: ['autodocs', 'Feedback components', 'Layout components'],
   argTypes: {
     children: {
-      description: 'Header elements are passed as children',
+      description: 'Header, List and Line components are passed as children',
     },
   },
 }
@@ -41,13 +41,13 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Primary: Story = {
+export const NotificationCenterWithNotifications: Story = {
   render: (props: NotificationCenterProps) => (
     <Header {...props}>
       <h1>Header Title</h1>
 
       <div style={{ display: 'flex', gap: '10px', marginRight: '30px' }}>
-        <NotificationCenter {...props}>
+        <NotificationCenter>
           <NotificationHeader title="Notifications">
             <CheckableTagGroup>
               <CheckableTag
@@ -120,7 +120,7 @@ export const Primary: Story = {
   ),
 } as unknown as Story
 
-export const EmptyState: Story = {
+export const NotificationCenterEmptyState: Story = {
   render: (props: NotificationCenterProps) => (
     <Header {...props}>
       <h1>Header Title</h1>

package/tests/Notification.spec.tsx

@@ -0,0 +1,83 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import { Button } from '../src/atoms/Button'
+import { CheckableTag, CheckableTagGroup } from '../src/atoms/CheckableTag'
+import {
+  NotificationCenter,
+  NotificationHeader,
+  NotificationLine,
+  NotificationList,
+} from '../src/atoms/Notification'
+
+describe('NotificationCenter', () => {
+  it('renders with expected content and buttons', () => {
+    const { getByText } = render(
+      <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 SHf game patch update"
+            date="Dec 29"
+            isRead={true}
+          >
+            Fixes a bug when saving the game in certain conditions.
+          </NotificationLine>
+        </NotificationList>
+      </NotificationCenter>,
+    )
+    expect(getByText('All')).toBeInTheDocument()
+    expect(getByText('Errors')).toBeInTheDocument()
+    expect(getByText('Updates')).toBeInTheDocument()
+    expect(getByText(/Mark all as read/i)).toBeInTheDocument()
+
+    expect(getByText('Trophy: Parting on Good Terms')).toHaveClass(
+      'notification-line-title',
+    )
+    expect(getByText('Jan 04')).toHaveClass('notification-line-date')
+    expect(
+      getByText("Good terms? No. I'm here to burn bridges."),
+    ).toBeInTheDocument()
+    expect(getByText('New SHf game patch update')).toHaveClass(
+      'notification-line-title',
+    )
+    expect(getByText('Dec 29')).toBeInTheDocument()
+    expect(
+      getByText('Fixes a bug when saving the game in certain conditions.'),
+    ).toBeInTheDocument()
+  })
+})

package/tests/library.ts

@@ -27,6 +27,7 @@ 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 Notification from '../src/stories/Notification.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'