agroptima-design-system 1.2.8 → 1.2.10

package/package.json

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

package/src/atoms/Notification/NotificationCenter.scss

@@ -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/icons/improvements.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#improvements__a)"><path d="m3.642 7.997 1.945.822a25.6 25.6 0 0 1 .723-1.345c.25-.432.524-.864.823-1.296l-1.396-.274-2.095 2.093Zm3.541 2.068 2.844 2.815c.698-.266 1.446-.673 2.244-1.221a15.944 15.944 0 0 0 2.245-1.868 13.41 13.41 0 0 0 2.731-3.874c.657-1.42.944-2.728.86-3.924-1.196-.083-2.51.204-3.94.86a13.367 13.367 0 0 0-3.89 2.727 15.934 15.934 0 0 0-1.872 2.242c-.548.798-.956 1.545-1.222 2.243Zm3.866-3.027c0-.557.192-1.026.574-1.408.382-.382.856-.573 1.422-.573.565 0 1.039.191 1.421.573.383.382.574.851.574 1.408a1.91 1.91 0 0 1-.574 1.407c-.382.382-.856.573-1.421.573-.566 0-1.04-.19-1.422-.573a1.912 1.912 0 0 1-.574-1.407Zm1.048 9.404 2.095-2.092-.274-1.396c-.433.3-.865.57-1.297.81-.433.24-.882.478-1.347.71l.823 1.968ZM19.904.174c.316 2.01.12 3.966-.587 5.867-.706 1.902-1.924 3.716-3.653 5.444l.498 2.466c.067.332.05.656-.05.971-.1.316-.266.59-.498.823l-4.19 4.185-2.096-4.908-4.265-4.26L.15 8.67l4.165-4.186a1.99 1.99 0 0 1 .836-.498c.324-.1.652-.116.985-.05l2.469.498c1.73-1.727 3.542-2.947 5.437-3.662a11.36 11.36 0 0 1 5.862-.598ZM1.92 13.926c.582-.581 1.292-.876 2.132-.884.84-.009 1.55.278 2.133.86.582.58.868 1.29.86 2.129-.008.839-.303 1.549-.885 2.13-.416.415-1.11.772-2.083 1.071-.973.3-2.315.565-4.028.797.233-1.71.499-3.051.798-4.023.3-.971.657-1.665 1.073-2.08Zm1.421 1.395c-.166.166-.332.47-.499.91a6.48 6.48 0 0 0-.349 1.332 6.98 6.98 0 0 0 1.335-.336c.44-.158.744-.32.91-.486.2-.2.308-.44.324-.722a.903.903 0 0 0-.274-.723.944.944 0 0 0-.723-.286 1.031 1.031 0 0 0-.724.311Z" fill="#161C26"/></g><defs><clipPath id="improvements__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/icons/index.tsx

@@ -33,6 +33,7 @@ import Error from './error.svg'
 import Export from './export.svg'
 import Filter from './filter.svg'
 import Import from './import.svg'
+import Improvements from './improvements.svg'
 import Info from './info.svg'
 import Invoice from './invoice.svg'
 import Loading from './loading.svg'
@@ -102,6 +103,7 @@ export {
   Export,
   Filter,
   Import,
+  Improvements,
   Info,
   Invoice,
   Loading,

package/src/stories/Changelog.mdx

@@ -4,6 +4,14 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.2.10
+
+* Add improvements icon
+
+## 1.2.9
+
+* The header actions, separated into another container
+
 ## 1.2.8
 
 * Increase notification width

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