Merge pull request #74 from storybookjs/charles-improve-nav-sb8

Fix global navigation for the new homepage for SB8
storybookjs · Mar 11, 2024 · 09d903b · 09d903b
2 parents 8bf3d7a + 9140eb1
commit 09d903b
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
     "@floating-ui/react-dom-interactions": "^0.6.5",
     "@storybook/api": "^6.5.9",
     "@storybook/design-system": "^7.9.0",
+    "@storybook/icons": "^1.2.8",
     "@storybook/theming": "^6.5.9",
     "formik": "^2.1.5",
     "human-format": "^0.11.0",

diff --git a/src/components/Eyebrow.tsx b/src/components/Eyebrow.tsx
@@ -33,10 +33,12 @@ const EyebrowCallout = styled(Link)<{ inverse?: boolean }>`
 const EyebrowContainer = styled.div<{
   inverse?: boolean;
 }>`
+  position: relative;
+  z-index: 20;
   display: none;
   align-items: center;
   padding: ${spacing.padding.small}px ${spacing.padding.medium}px;
-  background-color: ${(props) => (props.inverse ? 'rgba(0, 0, 0, 0.3)' : color.blueLight)};
+  background-color: ${(props) => (props.inverse ? 'rgba(0, 0, 0, 0.1)' : color.blueLight)};
   box-shadow: ${(props) => (props.inverse ? 'rgba(255, 255, 255, 0.1)' : color.tr10)} 0 -1px 0px 0px
     inset;
 
@@ -83,7 +85,7 @@ export const Eyebrow = ({ label, link, inverse, githubStarCount }: EyebrowProps)
       Visual test with Chromatic
     </EyebrowCallout>
     <GithubButtonWrapper>
-      <GithubButton starCount={githubStarCount} />
+      <GithubButton starCount={githubStarCount} inverse={inverse} />
     </GithubButtonWrapper>
   </EyebrowContainer>
 );
diff --git a/src/components/Footer/Footer.styles.ts b/src/components/Footer/Footer.styles.ts
@@ -12,7 +12,9 @@ import {
 const inverseBorder = 'rgba(255, 255, 255, 0.1)';
 
 export const FooterWrapper = styled.footer<{ inverse?: boolean }>`
-  background-color: ${(props) => (props.inverse ? color.midnight : background.app)};
+  position: relative;
+  z-index: 10;
+  background-color: ${(props) => (props.inverse ? '#0E0C2A' : background.app)};
   border-top: 1px solid ${(props) => (props.inverse ? inverseBorder : color.border)};
   padding-top: 3rem;
   padding-bottom: 3rem;

diff --git a/src/components/GithubButton.tsx b/src/components/GithubButton.tsx
@@ -1,22 +1,35 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
+import { styles } from '@storybook/design-system';
 
-const Svg = styled.svg`
+const Wrapper = styled.div<{ inverse?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: ${(props) =>
+    `1px solid ${props.inverse ? 'rgba(255, 255, 255, 0.2)' : styles.color.border}`};
+  height: 32px;
+  border-radius: 64px;
+  cursor: pointer;
+  gap: 10px;
+  padding: 0 12px;
+`;
+
+const Svg = styled.svg<{ inverse?: boolean }>`
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
   white-space: nowrap;
   font-size: 11px;
   font-weight: 600;
   line-height: 14px;
   cursor: pointer;
   user-select: none;
-  color: #24292f;
+  color: ${(props) => (props.inverse ? styles.color.lightest : '#24292f')};
   width: 14;
   height: 14;
   display: inline-block;
   vertical-align: text-top;
   fill: currentColor;
   overflow: visible;
-  margin-right: 4px;
 `;
 
 const Star = styled.a`
@@ -27,78 +40,38 @@ const Star = styled.a`
   position: relative;
   display: inline-flex;
   height: 14px;
-  padding: 2px 5px;
   font-size: 11px;
   font-weight: 600;
   line-height: 14px;
   vertical-align: bottom;
-  cursor: pointer;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27, 31, 36, 0.15);
-  color: #24292f;
-  background-color: #ebf0f4;
-  background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
-  border-radius: 0.25em 0 0 0.25em;
-
-  &:focus,
-  &:hover {
-    background-color: #e9ebef;
-    background-position: 0 -0.5em;
-    background-image: url(
-      data:image/svg + xml,
-      %3csvgxmlns='http://www.w3.org/2000/svg'%3e%3clinearGradientid='o'x2='0'y2='1'%3e%3cstopstop-color='%23f3f4f6'/%3e%3cstopoffset='90%25'stop-color='%23e9ebef'/%3e%3c/linearGradient%3e%3crectwidth='100%25'height='100%25'fill='url(%23o)'/%3e%3c/svg%3e
-    );
-    background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%);
-  }
-
-  &:active {
-    background-color: #e5e9ed;
-    box-shadow: inset 0 0.15em 0.3em rgb(27 31 36 / 15%);
-    background-image: none;
-  }
 `;
 
-const Count = styled.a`
+const Count = styled.a<{ inverse?: boolean }>`
   box-sizing: content-box;
   text-align: left;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
   text-decoration: none;
-  position: relative;
-  display: inline-flex;
   height: 14px;
-  padding: 2px 5px;
   font-size: 11px;
   font-weight: 600;
   line-height: 14px;
   vertical-align: bottom;
   cursor: pointer;
   user-select: none;
-  background-repeat: repeat-x;
-  background-position: -1px -1px;
-  background-size: 110% 110%;
-  border: 1px solid rgba(27, 31, 36, 0.15);
-  border-left: 0;
-  border-radius: 0 0.25em 0.25em 0;
-  color: #24292f;
-  background-color: #fff;
+  color: ${(props) => (props.inverse ? styles.color.lightest : '#24292f')};
+  transition: color 0.2s ease;
 
   &:focus,
   &:hover {
-    color: #0969da;
+    color: ${(props) => (props.inverse ? styles.color.lightest : '#0969da')};
   }
 `;
 
-const Wrapper = styled.div`
-  display: flex;
-`;
-
-export const GithubButton = ({ starCount }: { starCount: number }) => (
-  <Wrapper className="chromatic-ignore">
+export const GithubButton = ({ starCount, inverse }: { starCount: number; inverse: boolean }) => (
+  <Wrapper className="chromatic-ignore" inverse={inverse}>
     <Star
       href="https://github.com/storybookjs/storybook"
       rel="noopener"
@@ -111,19 +84,20 @@ export const GithubButton = ({ starCount }: { starCount: number }) => (
         height="14"
         className="octicon octicon-mark-github"
         aria-hidden="true"
+        inverse={inverse}
       >
         <path
           fillRule="evenodd"
           d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
         />
       </Svg>
-      <span>Star</span>
     </Star>
     <Count
       href="https://github.com/storybookjs/storybook/stargazers"
       rel="noopener"
       target="_blank"
       aria-label={`${starCount} stargazers on GitHub`}
+      inverse={inverse}
     >
       {starCount.toLocaleString()}
     </Count>

diff --git a/src/components/IllustratedFeatureList.tsx b/src/components/IllustratedFeatureList.tsx
@@ -61,7 +61,7 @@ const IconWrapper = styled.div`
 
 const Feature = styled.button<{ inverse?: boolean }>`
   border: 1px solid ${(props) => (props.inverse ? 'rgba(255 255 255 / 10%)' : color.border)};
-  background-color: ${(props) => (props.inverse ? color.midnight : color.lightest)};
+  background-color: ${(props) => (props.inverse ? '#0E0C2A' : color.lightest)};
   border-radius: ${spacing.borderRadius.small}px;
   text-align: left;
   display: flex;

diff --git a/src/components/Nav/Nav.stories.tsx b/src/components/Nav/Nav.stories.tsx
@@ -82,7 +82,7 @@ export const FullStack = () => (
       link="https://storybook.js.org/blog/storybook-lazy-compilation-for-webpack/"
       githubStarCount={73724}
     />
-    <Nav apiKey="ALGOLIA_API_KEY" version="6.5" activeSection="showcase" />
+    <Nav apiKey="ALGOLIA_API_KEY" version="6.5" activeSection="showcase" githubStarCount={82000} />
     <SubNav>
       <SubNavBreadcrumb tertiary href="/back">
         <Icon icon="arrowleft" />