agroptima-design-system 1.2.0-beta.4 → 1.2.0-beta.5

package/package.json

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

package/src/atoms/Notification/NotificationCenter.scss

@@ -7,6 +7,16 @@
 $header-height: 50px;
 
 .notification-center-container {
+  .notification-button-container {
+    position: relative;
+
+    .new-notifications-dot {
+      position: absolute;
+      right: 0;
+      top: -2px;
+    }
+  }
+
   .notification-center {
     display: flex;
     flex-direction: column;

package/src/atoms/Notification/NotificationCenter.tsx

@@ -2,6 +2,7 @@
 import './NotificationCenter.scss'
 import React from 'react'
 import { classNames } from '../../utils/classNames'
+import { Badge } from '../Badge'
 import { IconButton } from '../Button'
 import type { Variant } from '../Button/IconButton'
 import { Popover, type Position } from '../Popover'
@@ -11,6 +12,7 @@ export interface NotificationCenterProps {
   className?: string
   variant?: Variant
   accessibilityLabel?: string
+  hasNewNotifications?: boolean
   children: React.ReactNode
 }
 
@@ -18,6 +20,7 @@ function NotificationCenter({
   position = 'right',
   className,
   variant = 'secondary',
+  hasNewNotifications = false,
   accessibilityLabel = 'Open notifications center',
   children,
 }: NotificationCenterProps) {
@@ -26,12 +29,21 @@ function NotificationCenter({
       position={position}
       className={classNames('notification-center-container', className)}
       renderButton={({ toggle }) => (
-        <IconButton
-          icon="Notification"
-          variant={variant}
-          accessibilityLabel={accessibilityLabel}
-          onClick={toggle}
-        />
+        <div className="notification-button-container">
+          {hasNewNotifications && (
+            <Badge
+              className="new-notifications-dot"
+              variant="notification"
+              isDot
+            />
+          )}
+          <IconButton
+            icon="Notification"
+            variant={variant}
+            accessibilityLabel={accessibilityLabel}
+            onClick={toggle}
+          />
+        </div>
       )}
       closeOnClick={false}
     >

package/src/stories/Notification.stories.tsx

@@ -47,7 +47,7 @@ export const NotificationCenterWithNotifications: Story = {
       <h1>Header Title</h1>
 
       <div style={{ display: 'flex', gap: '10px', marginRight: '30px' }}>
-        <NotificationCenter>
+        <NotificationCenter hasNewNotifications={true}>
           <NotificationHeader title="Notifications">
             <CheckableTagGroup>
               <CheckableTag

package/debug-storybook.log

@@ -1,26 +0,0 @@
-[08:27:33.154] [INFO] storybook v10.1.11
-[08:27:33.766] [DEBUG] Getting package.json info for /Users/verochan/wineries/design-system/package.json...
-[08:27:34.402] [DEBUG] Serving static files from public at /
-[08:27:34.407] [INFO] Starting...
-[08:27:34.825] [DEBUG] Starting preview..
-[08:27:34.844] [INFO] Addon-docs: using MDX3
-[08:27:34.865] [INFO] Using implicit CSS loaders
-[08:27:35.233] [INFO] Using SWC as compiler
-[08:27:35.245] [INFO] Using default Webpack5 setup
-[08:27:35.616] [DEBUG] Using tsconfig paths for react-docgen
-[08:27:45.882] [ERROR] Failed to build the preview
-[08:27:45.887] [WARN] Force closed preview build
-[08:27:45.888] [ERROR] SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
-Run Storybook with --debug-webpack for more information.
-    at starter (file://./node_modules/@storybook/builder-webpack5/dist/index.js:799:11)
-    at starter.next (<anonymous>)
-    at Module.start (file://./node_modules/@storybook/builder-webpack5/dist/index.js:857:34)
-    at process.processTicksAndRejections (node:internal/process/task_queues:103:5)
-    at async storybookDevServer (file://./node_modules/storybook/dist/core-server/index.js:6806:82)
-    at async buildOrThrow (file://./node_modules/storybook/dist/core-server/index.js:5555:12)
-    at async buildDevStandalone (file://./node_modules/storybook/dist/core-server/index.js:7208:66)
-    at async withTelemetry (file://./node_modules/storybook/dist/_node-chunks/chunk-2372JZ52.js:209:12)
-    at async dev (file://./node_modules/storybook/dist/bin/core.js:2734:3)
-    at async _Command.<anonymous> (file://./node_modules/storybook/dist/bin/core.js:2801:92)
-[08:27:45.889] [WARN] Broken build, fix the error above.
-You may need to refresh the browser.