agroptima-design-system 1.2.7 → 1.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Notification/NotificationCenter.scss

@@ -18,7 +18,7 @@
   .notification-center {
     display: flex;
     flex-direction: column;
-    width: 350px;
+    width: 450px;
     box-shadow:
       0 3px 6px -4px rgba(0, 0, 0, 0.12),
       0px 6px 16px 0px rgba(0, 0, 0, 0.08),
@@ -42,18 +42,31 @@
       .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;
+        flex-wrap: wrap;
         background: var(--neutral-white);
 
-        > .button:last-child {
-          @include typography.footnote-primary;
-          color: var(--primary-color-600);
-          border: 0;
-          background-color: transparent;
-          padding: 0;
+        > .checkable-tag-group {
+          flex-grow: 1;
+          min-width: 0;
+        }
+
+        > .notification-header-actions {
+          flex-basis: 100%;
+          text-align: right;
+          flex-shrink: 1;
+          min-width: 0;
+
+          > .button {
+            @include typography.footnote-primary;
+            color: var(--primary-color-600);
+            border: 0;
+            background-color: transparent;
+            padding: 0;
+            white-space: normal;
+          }
         }
       }
     }

package/src/atoms/Notification/NotificationHeader.tsx

@@ -2,25 +2,29 @@
 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
+  actions?: React.ReactNode
 }
 
 function NotificationHeader({
   title,
   className,
   children,
+  actions,
 }: NotificationHeaderProps) {
   return (
     <div className={classNames('notification-header', className)}>
       <div className="notification-header-title">{title}</div>
-      <div className="notification-header-content">{children}</div>
+      <div className="notification-header-content">
+        {children}
+        {actions && (
+          <div className="notification-header-actions">{actions}</div>
+        )}
+      </div>
     </div>
   )
 }

package/src/stories/Changelog.mdx

@@ -4,6 +4,14 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.9
+
+* The header actions, separated into another container
+
+## 1.2.8
+
+* Increase notification width
+
 ## 1.2.7
 
 * Fix bug on InfiniteSelect component search
@@ -18,7 +26,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 ## 1.2.4
 
-* Add new prop decorative to Icon component to distinguish between decorative and informative icons 
+* Add new prop decorative to Icon component to distinguish between decorative and informative icons
 * Add more required accessibilityLabels
 * Add optional accessibilityLabels with fallbacks
 * Fix accessibilityLabels in Input type password and PaginationNumber
@@ -63,7 +71,6 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 * CardMenuOption can be a button or a link
 
-
 ## 1.0.7
 
 * Add link styles to Alert component
@@ -97,7 +104,8 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 ⚠️ **BREAKING CHANGES**: If the project which consumes the Design System is reading any of the color variables in SASS, please, use a version below 1.0.0 or update them to CSS variables.
 
-### Add themes management:
+### Add themes management
+
 * Update colors.css, color_alias.css and create themes.css
 * Change SASS theme related variables to CSS variables
 * Refactor File Input component icon to fit themes

package/src/stories/Notification.stories.tsx

@@ -49,7 +49,15 @@ export const NotificationCenterWithNotifications: Story = {
 
         <div style={{ display: 'flex', gap: '10px' }}>
           <NotificationCenter hasNewNotifications={true}>
-            <NotificationHeader title="Notifications">
+            <NotificationHeader
+              title="Notifications"
+              actions={
+                <Button
+                  onClick={() => alert('mark all as read')}
+                  label="Mark all as read"
+                />
+              }
+            >
               <CheckableTagGroup>
                 <CheckableTag
                   variant="primary"
@@ -73,10 +81,6 @@ export const NotificationCenterWithNotifications: Story = {
                   isChecked={false}
                 />
               </CheckableTagGroup>
-              <Button
-                onClick={() => alert('mark all as read')}
-                label="Mark all as read"
-              />
             </NotificationHeader>
             <NotificationList>
               <NotificationLine
@@ -134,7 +138,15 @@ export const NotificationCenterEmptyState: Story = {
 
         <div style={{ display: 'flex', gap: '10px' }}>
           <NotificationCenter {...props}>
-            <NotificationHeader title="Notifications">
+            <NotificationHeader
+              title="Notifications"
+              actions={
+                <Button
+                  onClick={() => alert('mark all as read')}
+                  label="Mark all as read"
+                />
+              }
+            >
               <CheckableTagGroup>
                 <CheckableTag
                   variant="primary"
@@ -158,10 +170,6 @@ export const NotificationCenterEmptyState: Story = {
                   isChecked={false}
                 />
               </CheckableTagGroup>
-              <Button
-                onClick={() => alert('mark all as read')}
-                label="Mark all as read"
-              />
             </NotificationHeader>
             <NotificationEmptyState
               title="No new notifications"

package/tests/Notification.spec.tsx

@@ -13,7 +13,15 @@ describe('NotificationCenter', () => {
   it('renders with expected content and buttons', () => {
     const { getByText } = render(
       <NotificationCenter>
-        <NotificationHeader title="Notifications">
+        <NotificationHeader
+          title="Notifications"
+          actions={
+            <Button
+              onClick={() => alert('mark all as read')}
+              label="Mark all as read"
+            />
+          }
+        >
           <CheckableTagGroup>
             <CheckableTag
               variant="primary"
@@ -37,10 +45,6 @@ describe('NotificationCenter', () => {
               isChecked={false}
             />
           </CheckableTagGroup>
-          <Button
-            onClick={() => alert('mark all as read')}
-            label="Mark all as read"
-          />
         </NotificationHeader>
         <NotificationList>
           <NotificationLine