add sticky styles for signup button

chromaui · Dec 12, 2024 · 1e58f92 · 1e58f92
1 parent 18980ed
commit 1e58f92
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/src/Header/Header.stories.tsx b/src/Header/Header.stories.tsx
@@ -41,6 +41,26 @@ export const DesktopDark: Story = {
   },
 };
 
+export const DesktopLightSticky: Story = {
+  ...DesktopLight,
+  args: {
+    ...DesktopLight.args,
+    isSticky: true,
+  },
+};
+
+export const DesktopDarkSticky: Story = {
+  args: {
+    ...DesktopLight.args,
+    theme: 'dark',
+    isSticky: true,
+  },
+  parameters: {
+    ...DesktopLight.parameters,
+    backgrounds: { default: 'dark' },
+  },
+};
+
 export const DesktopLoggedOut: Story = {
   args: {
     ...DesktopLight.args,

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 }>;
 }