Merge pull request #116 from chromaui/sticky-signup

add sticky styles for signup button
chromaui · Dec 12, 2024 · d04baec · d04baec
2 parents 18980ed + 5927d98
commit d04baec
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/src/Header/Header.stories.tsx b/src/Header/Header.stories.tsx
@@ -8,6 +8,9 @@ import { SubNav } from '../SubNav';
 const meta: Meta<typeof Header> = {
   title: 'Components/Header',
   component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -22,7 +25,6 @@ export const DesktopLight: Story = {
     links: defaultLinks,
   },
   parameters: {
-    layout: 'fullscreen',
     chromatic: { viewports: [940, 1024, 1280, 1536] },
     viewport: {
       defaultViewport: 'lg',
@@ -41,6 +43,24 @@ export const DesktopDark: Story = {
   },
 };
 
+export const DesktopLightSticky: Story = {
+  args: {
+    ...DesktopLight.args,
+    isSticky: true,
+  },
+};
+
+export const DesktopDarkSticky: Story = {
+  args: {
+    ...DesktopLight.args,
+    theme: 'dark',
+    isSticky: true,
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+};
+
 export const DesktopLoggedOut: Story = {
   args: {
     ...DesktopLight.args,
@@ -128,7 +148,6 @@ export const DesktopLightOpen: Story = {
     ...DesktopLight.args,
   },
   parameters: {
-    layout: 'fullscreen',
     chromatic: { pauseAnimationAtEnd: true, delay: 600 },
     viewport: {
       defaultViewport: 'lg',
@@ -151,7 +170,6 @@ export const DesktopDarkOpen: Story = {
     theme: 'dark',
   },
   parameters: {
-    layout: 'fullscreen',
     backgrounds: { default: 'dark' },
     chromatic: { pauseAnimationAtEnd: true, delay: 600 },
     viewport: {
@@ -174,7 +192,6 @@ export const TabletLight: Story = {
     ...DesktopLight.args,
   },
   parameters: {
-    layout: 'fullscreen',
     chromatic: { viewports: [320, 640, 768, 939] },
     viewport: {
       defaultViewport: 'md',
@@ -188,7 +205,6 @@ export const TabletDark: Story = {
     theme: 'dark',
   },
   parameters: {
-    layout: 'fullscreen',
     chromatic: { viewports: [320, 640, 768, 939] },
     viewport: {
       defaultViewport: 'md',
@@ -202,7 +218,6 @@ export const TabletOpen: Story = {
     ...DesktopLight.args,
   },
   parameters: {
-    layout: 'fullscreen',
     chromatic: { viewports: [320, 640, 768, 939] },
     viewport: {
       defaultViewport: 'md',
@@ -239,7 +254,6 @@ export const MobileOpen: Story = {
     ...DesktopLight.args,
   },
   parameters: {
-    layout: 'fullscreen',
     chromatic: { viewports: [320, 640, 768, 939] },
     viewport: {
       defaultViewport: 'xsm',
@@ -260,17 +274,13 @@ export const DesktopFullWidth: Story = {
     ...DesktopLight.args,
     fullWidth: true,
   },
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export const MobileFullWidth: Story = {
   args: {
     ...DesktopLight.args,
   },
   parameters: {
-    layout: 'fullscreen',
     viewport: {
       defaultViewport: 'xsm',
     },

diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -88,6 +88,7 @@ export const Header = ({
   fullWidth = false,
   loggedIn,
   maintenanceMode,
+  isSticky,
   TrackSignUp = DefaultTrackSignUp,
 }: HeaderProps) => {
   const HeaderContainer = fullWidth ? FullWidthContainer : Container;
@@ -151,8 +152,8 @@ export const Header = ({
                       <HeaderCTAButton
                         as="span"
                         size="sm"
-                        variant="outline"
-                        color={theme === 'dark' ? 'white' : 'blue'}
+                        variant={isSticky ? 'solid' : 'outline'}
+                        color={theme === 'light' || isSticky ? 'blue' : 'white'}
                         href={links.signup.href}
                       >
                         {links.signup.title}

diff --git a/src/Header/types.ts b/src/Header/types.ts
@@ -48,6 +48,7 @@ export interface HeaderProps {
   fullWidth?: boolean;
   loggedIn?: boolean;
   maintenanceMode?: boolean;
+  isSticky?: boolean;
   links: HeaderLinks;
   TrackSignUp: ComponentType<{ children: ReactNode }>;
 }