refactor: update dependency and make environment not mandatory

contentful · Sep 9, 2024 · dbee7ba · dbee7ba
1 parent 7c95de9
commit dbee7ba
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
@@ -15,7 +15,7 @@
     "@contentful/f36-skeleton": "^4.68.1",
     "@contentful/f36-tokens": "^4.0.1",
     "@contentful/f36-tooltip": "^4.68.1",
-    "@contentful/f36-typography": "5.0.0-alpha.1",
+    "@contentful/f36-typography": "^4.68.1",
     "@contentful/f36-utils": "^4.23.2",
     "emotion": "^10.0.17"
   },

diff --git a/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx b/packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx
@@ -169,13 +169,17 @@ function _NavbarSwitcher(
             ) : (
               <>
                 <SwitcherLabel type="space" value={space} styles={styles} />
-                <CaretRightIcon size="tiny" color={tokens.gray500} />
-                <SwitcherLabel
-                  envVariant={envVariant}
-                  type="environment"
-                  value={environment}
-                  styles={styles}
-                />
+                {environment && (
+                  <>
+                    <CaretRightIcon size="tiny" color={tokens.gray500} />
+                    <SwitcherLabel
+                      envVariant={envVariant}
+                      type="environment"
+                      value={environment}
+                      styles={styles}
+                    />
+                  </>
+                )}
               </>
             )}
           </Flex>

diff --git a/packages/components/navbar/stories/Navbar.stories.tsx b/packages/components/navbar/stories/Navbar.stories.tsx
@@ -141,6 +141,27 @@ Basic.args = {
     'https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100',
 };
 
+export const BasicNoEnvironment: Story<{
+  initials?: string;
+  avatar?: string;
+}> = (args) => {
+  return (
+    <div style={{ minWidth: '900px' }}>
+      <Navbar
+        mainNavigation={<MainItems />}
+        switcher={<Navbar.Switcher space="Our super long space name" />}
+        account={<Account {...args} />}
+      />
+    </div>
+  );
+};
+
+BasicNoEnvironment.args = {
+  initials: 'AB',
+  avatar:
+    'https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100',
+};
+
 export const SizeVariants: Story<NavbarProps> = () => {
   return (
     <Flex gap="spacingL" style={{ width: '97vw' }} flexDirection="column">