feat(topbar): add package (#3205)

* feat(topbar): add package * fix(sidebar): provide 100% width when within flex wrapper * chore: build fixes and codemods * chore: lockfile * chore: fix lint errors * chore: limit story viewport for snapshotting * fix: pr comments * fix: stories padding removed * fix(sidebar): overlay content wrapper margin when compact * feat(design-tokens): add size-topbar token * fix(topbar): add minHeight token * test: update snapshot
twilio-labs · May 3, 2023 · 6060c8d · 6060c8d
1 parent 47b3fbd
commit 6060c8d
Show file tree

Hide file tree

Showing 28 changed files with 531 additions and 38 deletions.
diff --git a/.changeset/kind-suns-cross.md b/.changeset/kind-suns-cross.md
@@ -0,0 +1,5 @@
+---
+'@twilio-paste/codemods': patch
+---
+
+[Codemods] Add `@twilio-paste/topbar` package
diff --git a/.changeset/light-scissors-remain.md b/.changeset/light-scissors-remain.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/sidebar': patch
+'@twilio-paste/core': patch
+---
+
+[Sidebar] set width to 100% for `SidebarOverlayContentWrapper`
diff --git a/.changeset/modern-jobs-fix.md b/.changeset/modern-jobs-fix.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/sidebar': patch
+'@twilio-paste/core': patch
+---
+
+[Sidebar] fix SidebarOverlayContentWrapper left margin when `compact=true`
diff --git a/.changeset/strange-rivers-pretend.md b/.changeset/strange-rivers-pretend.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/topbar': minor
+'@twilio-paste/core': minor
+---
+
+[Topbar] add package with stories and tests
diff --git a/.changeset/thirty-pens-prove.md b/.changeset/thirty-pens-prove.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': patch
+'@twilio-paste/design-tokens': patch
+---
+
+[Design tokens] add `size-topbar` token
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -92,6 +92,7 @@
     "/packages/paste-core/components/toast",
     "/packages/paste-core/components/tooltip",
     "/packages/paste-core/primitives/tooltip",
+    "/packages/paste-core/components/topbar",
     "/packages/paste-core/components/truncate",
     "/packages/paste-types",
     "/packages/paste-libraries/uid",

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -103,7 +103,11 @@ export const decorators = [
           <RenderPerformanceProfiler id={context.id} kind={context.kind} view="default">
             <GlobalStyles />
             <Theme.Provider theme={theme} disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-              <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
+              <Box
+                backgroundColor="colorBackgroundBody"
+                color="colorText"
+                padding={context.parameters.padding === false ? 'space0' : 'space80'}
+              >
                 <Story />
               </Box>
             </Theme.Provider>
@@ -116,7 +120,11 @@ export const decorators = [
             <Grid>
               <Column>
                 <Theme.Provider theme="twilio" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-                  <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
+                  <Box
+                    backgroundColor="colorBackgroundBody"
+                    color="colorText"
+                    padding={context.parameters.padding === false ? 'space0' : 'space80'}
+                  >
                     <Story />
                   </Box>
                 </Theme.Provider>
@@ -127,7 +135,11 @@ export const decorators = [
                   disableAnimations={isTestEnvironment}
                   customBreakpoints={breakpoints}
                 >
-                  <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
+                  <Box
+                    backgroundColor="colorBackgroundBody"
+                    color="colorText"
+                    padding={context.parameters.padding === false ? 'space0' : 'space80'}
+                  >
                     <Story />
                   </Box>
                 </Theme.Provider>
@@ -141,49 +153,97 @@ export const decorators = [
             <GlobalStyles />
             <Stack orientation="vertical" spacing="space0">
               <Theme.Provider theme="default" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
+                <Box
+                  backgroundColor="colorBackgroundBody"
+                  color="colorText"
+                  padding={context.parameters.padding === false ? 'space0' : 'space80'}
+                >
                   <Story />
                 </Box>
               </Theme.Provider>
               <Theme.Provider theme="default" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space20">
-                  <Box margin="space40" padding="space40" backgroundColor="colorBackground">
+                <Box
+                  backgroundColor="colorBackgroundBody"
+                  color="colorText"
+                  padding={context.parameters.padding === false ? 'space0' : 'space20'}
+                >
+                  <Box
+                    margin={context.parameters.padding === false ? 'space0' : 'space40'}
+                    padding={context.parameters.padding === false ? 'space0' : 'space40'}
+                    backgroundColor="colorBackground"
+                  >
                     <Story />
                   </Box>
                 </Box>
               </Theme.Provider>
               <Theme.Provider theme="dark" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
+                <Box
+                  backgroundColor="colorBackgroundBody"
+                  color="colorText"
+                  padding={context.parameters.padding === false ? 'space0' : 'space80'}
+                >
                   <Story />
                 </Box>
               </Theme.Provider>
               <Theme.Provider theme="dark" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space20">
-                  <Box margin="space40" padding="space40" backgroundColor="colorBackground">
+                <Box
+                  backgroundColor="colorBackgroundBody"
+                  color="colorText"
+                  padding={context.parameters.padding === false ? 'space0' : 'space20'}
+                >
+                  <Box
+                    margin={context.parameters.padding === false ? 'space0' : 'space40'}
+                    padding={context.parameters.padding === false ? 'space0' : 'space40'}
+                    backgroundColor="colorBackground"
+                  >
                     <Story />
                   </Box>
                 </Box>
               </Theme.Provider>
               <Theme.Provider theme="twilio" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
+                <Box
+                  backgroundColor="colorBackgroundBody"
+                  color="colorText"
+                  padding={context.parameters.padding === false ? 'space0' : 'space80'}
+                >
                   <Story />
                 </Box>
               </Theme.Provider>
               <Theme.Provider theme="twilio" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space20">
-                  <Box margin="space40" padding="space40" backgroundColor="colorBackground">
+                <Box
+                  backgroundColor="colorBackgroundBody"
+                  color="colorText"
+                  padding={context.parameters.padding === false ? 'space0' : 'space20'}
+                >
+                  <Box
+                    margin={context.parameters.padding === false ? 'space0' : 'space40'}
+                    padding={context.parameters.padding === false ? 'space0' : 'space40'}
+                    backgroundColor="colorBackground"
+                  >
                     <Story />
                   </Box>
                 </Box>
               </Theme.Provider>
               <Theme.Provider theme="twilio-dark" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space80">
+                <Box
+                  backgroundColor="colorBackgroundBody"
+                  color="colorText"
+                  padding={context.parameters.padding === false ? 'space0' : 'space80'}
+                >
                   <Story />
                 </Box>
               </Theme.Provider>
               <Theme.Provider theme="twilio-dark" disableAnimations={isTestEnvironment} customBreakpoints={breakpoints}>
-                <Box backgroundColor="colorBackgroundBody" color="colorText" padding="space20">
-                  <Box margin="space40" padding="space40" backgroundColor="colorBackground">
+                <Box
+                  backgroundColor="colorBackgroundBody"
+                  color="colorText"
+                  padding={context.parameters.padding === false ? 'space0' : 'space20'}
+                >
+                  <Box
+                    margin={context.parameters.padding === false ? 'space0' : 'space40'}
+                    padding={context.parameters.padding === false ? 'space0' : 'space40'}
+                    backgroundColor="colorBackground"
+                  >
                     <Story />
                   </Box>
                 </Box>

diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -188,6 +188,7 @@
   "SidebarCollapseButton": "@twilio-paste/core/sidebar",
   "SidebarCollapseButtonWrapper": "@twilio-paste/core/sidebar",
   "SidebarContext": "@twilio-paste/core/sidebar",
+  "SidebarHeader": "@twilio-paste/core/sidebar",
   "SidebarOverlayContentWrapper": "@twilio-paste/core/sidebar",
   "SidebarPushContentWrapper": "@twilio-paste/core/sidebar",
   "SkeletonLoader": "@twilio-paste/core/skeleton-loader",
@@ -224,6 +225,7 @@
   "useToaster": "@twilio-paste/core/toast",
   "Tooltip": "@twilio-paste/core/tooltip",
   "useTooltipState": "@twilio-paste/core/tooltip",
+  "Topbar": "@twilio-paste/core/topbar",
   "Truncate": "@twilio-paste/core/truncate",
   "AspectRatio": "@twilio-paste/core/aspect-ratio",
   "Flex": "@twilio-paste/core/flex",

diff --git a/packages/paste-core/components/sidebar/src/SidebarOverlayContentWrapper.tsx b/packages/paste-core/components/sidebar/src/SidebarOverlayContentWrapper.tsx
@@ -20,8 +20,8 @@ export const SidebarOverlayContentWrapper = React.forwardRef<HTMLDivElement, Sid
     if (!isMobile && variant === 'compact') {
       return (
         <Box display="flex" justifyContent="flex-start">
-          <Box role="presentation" width="sizeSidebarCompact" height="100%" minHeight="1px" />
-          <Box {...safelySpreadBoxProps(props)} element={element} as="div" ref={ref}>
+          <Box role="presentation" width="sizeSidebarCompact" height="100%" minHeight="1px" flexShrink={0} />
+          <Box {...safelySpreadBoxProps(props)} element={element} as="div" ref={ref} width="100%">
             {children}
           </Box>
         </Box>

diff --git a/packages/paste-core/components/sidebar/stories/customization.stories.tsx b/packages/paste-core/components/sidebar/stories/customization.stories.tsx
@@ -16,16 +16,9 @@ import {
   SidebarOverlayContentWrapper,
 } from '../src';
 
-// Fix for docs page examples overflowing the container
-const styles = {
-  transform: 'scale(1)',
-  height: '100vh',
-};
-
 // eslint-disable-next-line import/no-default-export
 export default {
   title: 'Components/Sidebar/Customization',
-  decorators: [(storyFn) => <div style={styles}>{storyFn()}</div>],
 };
 
 export const WithDefaultElementName: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
@@ -94,6 +87,7 @@ WithDefaultElementName.parameters = {
     // false positives in CI due to hiding button behind sidebar when open
     disable: true,
   },
+  padding: false,
 };
 
 export const WithCustomElementName: StoryFn = (_args, {parameters: {isTestEnvironment}}) => {
@@ -172,4 +166,5 @@ WithCustomElementName.parameters = {
     // false positives in CI due to hiding button behind sidebar when open
     disable: true,
   },
+  padding: false,
 };
diff --git a/packages/paste-core/components/sidebar/stories/overlay.stories.tsx b/packages/paste-core/components/sidebar/stories/overlay.stories.tsx
@@ -13,16 +13,9 @@ import {
   SidebarOverlayContentWrapper,
 } from '../src';
 
-// Fix for docs page examples overflowing the container
-const styles = {
-  transform: 'scale(1)',
-  height: '100vh',
-};
-
 // eslint-disable-next-line import/no-default-export
 export default {
   title: 'Components/Sidebar/Overlay',
-  decorators: [(storyFn) => <div style={styles}>{storyFn()}</div>],
 };
 
 export const Default: StoryFn = () => {
@@ -58,6 +51,7 @@ Default.parameters = {
     // false positives in CI due to hiding button behind sidebar when open
     disable: true,
   },
+  padding: false,
 };
 
 export const Compact: StoryFn = () => {
@@ -93,4 +87,5 @@ Compact.parameters = {
     // false positives in CI due to hiding button behind sidebar when open
     disable: true,
   },
+  padding: false,
 };
diff --git a/packages/paste-core/components/sidebar/stories/push.stories.tsx b/packages/paste-core/components/sidebar/stories/push.stories.tsx
@@ -13,16 +13,9 @@ import {
   SidebarPushContentWrapper,
 } from '../src';
 
-// Fix for docs page examples overflowing the container
-const styles = {
-  transform: 'scale(1)',
-  height: '100vh',
-};
-
 // eslint-disable-next-line import/no-default-export
 export default {
   title: 'Components/Sidebar/Push',
-  decorators: [(storyFn) => <div style={styles}>{storyFn()}</div>],
 };
 
 export const Default: StoryFn = () => {
@@ -58,6 +51,7 @@ Default.parameters = {
     // false positives in CI due to hiding button behind sidebar when open
     disable: true,
   },
+  padding: false,
 };
 
 export const Compact: StoryFn = () => {
@@ -93,4 +87,5 @@ Compact.parameters = {
     // false positives in CI due to hiding button behind sidebar when open
     disable: true,
   },
+  padding: false,
 };
diff --git a/packages/paste-core/components/topbar/__tests__/index.spec.tsx b/packages/paste-core/components/topbar/__tests__/index.spec.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import {CustomizationProvider} from '@twilio-paste/customization';
+
+import {Topbar} from '../src';
+
+describe('Topbar', () => {
+  it('renders correctly', () => {
+    render(<Topbar>Topbar</Topbar>);
+    const renderedTopbar = screen.getByText('Topbar');
+    expect(renderedTopbar).toHaveStyleRule('position', 'sticky');
+    expect(renderedTopbar).toHaveStyleRule('top', '0');
+  });
+
+  describe('customization', () => {
+    it('should add custom styling correctly', (): void => {
+      render(
+        <CustomizationProvider
+          baseTheme="default"
+          elements={{
+            TOPBAR: {
+              backgroundColor: 'colorBackgroundPrimary',
+              color: 'colorTextInverse',
+            },
+            CUSTOM_TOPBAR: {
+              backgroundColor: 'colorBackgroundPrimaryWeak',
+              color: 'colorText',
+            },
+          }}
+        >
+          <Topbar>Topbar</Topbar>
+          <Topbar element="CUSTOM_TOPBAR">CustomTopbar</Topbar>
+        </CustomizationProvider>
+      );
+
+      const renderedTopbar = screen.getByText('Topbar');
+      expect(renderedTopbar).toHaveStyleRule('background-color', 'rgb(2, 99, 224)');
+      expect(renderedTopbar).toHaveStyleRule('color', 'rgb(255, 255, 255)');
+
+      const renderedCustomTopbar = screen.getByText('CustomTopbar');
+      expect(renderedCustomTopbar).toHaveStyleRule('background-color', 'rgb(153, 205, 255)');
+      expect(renderedCustomTopbar).toHaveStyleRule('color', 'rgb(18, 28, 45)');
+    });
+  });
+});
diff --git a/packages/paste-core/components/topbar/build.js b/packages/paste-core/components/topbar/build.js
@@ -0,0 +1,3 @@
+const {build} = require('../../../../tools/build/esbuild');
+
+build(require('./package.json'));