feat: new variant for navbar account notif (#2750)

* feat: introduce new notification 'info' variant for NavbarAccount component * chore: changeset
contentful · May 13, 2024 · 2d0ff52 · 2d0ff52
1 parent 5c4a294
commit 2d0ff52
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 4 deletions.
diff --git a/.changeset/silver-islands-try.md b/.changeset/silver-islands-try.md
@@ -0,0 +1,5 @@
+---
+'@contentful/f36-navbar': minor
+---
+
+Introduce new notification 'info' variant for NavbarAccount component
diff --git a/packages/components/navbar/examples/WithAccountNotificationNavbarExample.tsx b/packages/components/navbar/examples/WithAccountNotificationNavbarExample.tsx
@@ -5,7 +5,7 @@ import { EntryIcon, AssetIcon } from '@contentful/f36-icons';
 export default function WithAccountNotificationNavbarExample() {
   const notificationVariant = 'warning';
 
-  // Try 'negative' notifification variant
+  // Try 'negative' or 'info' notifification variant
   // const notificationVariant = 'negative'
 
   return (

diff --git a/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts b/packages/components/navbar/src/NavbarAccount/NavbarAccount.styles.ts
@@ -3,6 +3,15 @@ import tokens from '@contentful/f36-tokens';
 import { NavbarAccountProps } from './NavbarAccount';
 import { getGlowOnFocusStyles } from '../utils.styles';
 
+const notificationVarianColorMap: Record<
+  NavbarAccountProps['notificationVariant'],
+  string
+> = {
+  warning: tokens.colorWarning,
+  negative: tokens.colorNegative,
+  info: tokens.blue500,
+};
+
 export const getNavbarAccountStyles = () => ({
   root: css(
     {
@@ -37,8 +46,7 @@ export const getNavbarAccountStyles = () => ({
       width: tokens.spacingS,
       borderRadius: '50%',
       border: `2px solid ${tokens.gray900}`,
-      backgroundColor:
-        variant === 'negative' ? tokens.colorNegative : tokens.colorWarning,
+      backgroundColor: notificationVarianColorMap[variant],
       transform: 'translate(30%, -30%)',
     }),
 });
diff --git a/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx b/packages/components/navbar/src/NavbarAccount/NavbarAccount.tsx
@@ -17,7 +17,7 @@ type NavbarAccountOwnProps = CommonProps & {
   /**
    * @default 'warning'
    */
-  notificationVariant?: 'warning' | 'negative';
+  notificationVariant?: 'warning' | 'negative' | 'info';
 };
 
 export type NavbarAccountProps = PropsWithHTMLElement<

diff --git a/packages/components/navbar/stories/Navbar.stories.tsx b/packages/components/navbar/stories/Navbar.stories.tsx
@@ -226,6 +226,19 @@ export const WithAccountNotification: Story<NavbarProps> = () => {
           <MainItems />
         </Navbar>
       </Flex>
+
+      <Flex flexDirection="column">
+        <SectionHeading as="h3" marginBottom="spacingS">
+          Info
+        </SectionHeading>
+
+        <Navbar
+          switcher={<Switcher />}
+          account={<Account hasNotification notificationVariant="info" />}
+        >
+          <MainItems />
+        </Navbar>
+      </Flex>
     </Flex>
   );
 };