Merge pull request #661 from storybookjs/charles-storybook-8-hero

Storybook 8 new hero
storybookjs · Mar 11, 2024 · 9f33d7a · 9f33d7a
2 parents a240e5a + 4c063d0
commit 9f33d7a
Show file tree

Hide file tree

Showing 40 changed files with 2,929 additions and 344 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-tabs": "^1.0.4",
     "@storybook/api": "^6.5.9",
-    "@storybook/components-marketing": "^2.3.0",
+    "@storybook/components-marketing": "^2.3.1",
     "@storybook/design-system": "7.13.1",
     "@storybook/icons": "^1.2.2",
     "@storybook/theming": "^6.5.9",

diff --git a/src/components/layout/DocsLayout/DocsLayout.tsx b/src/components/layout/DocsLayout/DocsLayout.tsx
@@ -9,12 +9,7 @@ import {
   GLOBAL_SEARCH_IMPORTANCE,
   GLOBAL_SEARCH_META_KEYS,
 } from '../../../constants/global-search';
-import {
-  HEADER_HEIGHT,
-  HEADER_HEIGHT_WITH_EYEBROW,
-  SCROLL_CHANNEL_WIDTH,
-  SCROLL_THUMB_WIDTH,
-} from '../../../constants/style';
+import { HEADER_HEIGHT, SCROLL_CHANNEL_WIDTH, SCROLL_THUMB_WIDTH } from '../../../constants/style';
 import buildPathWithVersion from '../../../util/build-path-with-version';
 import useSiteMetadata from '../../lib/useSiteMetadata';
 import { DocsContextProvider } from '../../screens/DocsScreen/DocsContext';
@@ -43,10 +38,6 @@ const BubblesBackground = styled.img`
 const Wrapper = styled.div`
   padding-top: ${HEADER_HEIGHT};
 
-  @media (min-width: 440px) {
-    padding-top: ${HEADER_HEIGHT_WITH_EYEBROW};
-  }
-
   ${minSm} {
     display: flex;
     gap: calc(${GUTTER} - ${SCROLL_CHANNEL_WIDTH} + ${OPTICAL_ALIGNMENT_WITH_LOGO});
@@ -59,7 +50,7 @@ const SidebarContainer = styled.div`
   ${minMd} {
     display: block;
     position: sticky;
-    top: ${HEADER_HEIGHT_WITH_EYEBROW};
+    top: ${HEADER_HEIGHT};
     align-self: flex-start;
   }
 `;
@@ -68,7 +59,7 @@ const SidebarRoot = styled(ScrollArea.Root)`
   position: relative;
   left: calc(${OPTICAL_ALIGNMENT_WITH_LOGO} - ${FOCUS_OUTLINE_WIDTH});
   width: ${SIDEBAR_WIDTH};
-  height: calc(100vh - ${HEADER_HEIGHT_WITH_EYEBROW});
+  height: calc(100vh - ${HEADER_HEIGHT});
 `;
 
 const SidebarViewport = styled(ScrollArea.Viewport)`

diff --git a/src/components/layout/DocsLayout/Sidebar.tsx b/src/components/layout/DocsLayout/Sidebar.tsx
@@ -55,27 +55,33 @@ const TutorialsIcon: FC = () => (
 );
 
 const ChangelogIcon: FC = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
+  <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
+      d="M3.099 9.374 6.497.13A.2.2 0 0 1 6.685 0h6.276a.2.2 0 0 1 .184.278l-2.5 5.872a.2.2 0 0 0 .184.279h4.746a.2.2 0 0 1 .154.327l-9.03 10.908c-.067.082-.2.015-.174-.088l1.888-7.685a.2.2 0 0 0-.194-.248H3.287a.2.2 0 0 1-.188-.27Z"
       fill="#FF4785"
-      d="M6.06 18c-.419 0-.828-.194-1.093-.519a1.39 1.39 0 0 1-.281-1.16l1.143-5.615H2.84a.84.84 0 0 1-.766-1.18L6.089.5a.84.84 0 0 1 .767-.5h6.213a.84.84 0 0 1 .76 1.198L12.097 4.87h3.267a.84.84 0 0 1 .658 1.36L7.11 17.515A1.382 1.382 0 0 1 6.06 18ZM4.133 9.028h2.724a.84.84 0 0 1 .823 1.007l-1.11 5.455 7.062-8.94h-2.857a.84.84 0 0 1-.76-1.197l1.732-3.672H7.403l-3.27 7.347Z"
     />
+  </svg>
+);
+
+const APIIcon: FC = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
+    <rect width="18" height="16" y="1.001" fill="#A8E38C" rx="8" />
+    <g fill="#489524">
+      <path d="M7.348 12.345a.52.52 0 0 0 0-.73l-2.606-2.63 2.606-2.628a.521.521 0 0 0-.37-.856.511.511 0 0 0-.355.125l-2.97 2.991a.519.519 0 0 0 0 .737l2.97 2.991a.514.514 0 0 0 .365.156.512.512 0 0 0 .36-.156ZM11.011 12.5a.512.512 0 0 1-.474-.321.523.523 0 0 1 .114-.565l2.607-2.629-2.607-2.628a.521.521 0 0 1 .37-.856c.13-.005.257.04.355.125l2.971 2.991a.52.52 0 0 1 0 .737l-2.971 2.991a.515.515 0 0 1-.365.156Z" />
+    </g>
+  </svg>
+);
+
+const AddonsIcon: FC = () => (
+  <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      fill="#FFA0C0"
-      d="M6.857 9.027H4.133l3.27-7.347h4.343l-1.731 3.672a.84.84 0 0 0 .76 1.197h2.857l-7.063 8.94 1.11-5.455a.836.836 0 0 0-.822-1.007Z"
+      d="M16 2.4v7.634a.4.4 0 0 1-.683.283L7.683 2.683A.4.4 0 0 1 7.966 2H15.6c.22 0 .4.18.4.4Z"
+      fill="#37D5D3"
     />
+    <circle cx="7" cy="11" r="5" fill="#87E6E5" />
   </svg>
 );
 
-// const APIIcon: FC = () => (
-//   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none">
-//     <rect width="18" height="16" y="1.001" fill="#A8E38C" rx="8" />
-//     <g fill="#489524">
-//       <path d="M7.348 12.345a.52.52 0 0 0 0-.73l-2.606-2.63 2.606-2.628a.521.521 0 0 0-.37-.856.511.511 0 0 0-.355.125l-2.97 2.991a.519.519 0 0 0 0 .737l2.97 2.991a.514.514 0 0 0 .365.156.512.512 0 0 0 .36-.156ZM11.011 12.5a.512.512 0 0 1-.474-.321.523.523 0 0 1 .114-.565l2.607-2.629-2.607-2.628a.521.521 0 0 1 .37-.856c.13-.005.257.04.355.125l2.971 2.991a.52.52 0 0 1 0 .737l-2.971 2.991a.515.515 0 0 1-.365.156Z" />
-//     </g>
-//   </svg>
-// );
-
 const TopNav = styled.ul`
   display: flex;
   flex-direction: column;
@@ -241,24 +247,30 @@ export const Sidebar: FC<SidebarProps> = ({ docsToc, versions: versionsProp, slu
               Documentation
             </Link>
           </Line>
+          <Line>
+            <Link to="/docs/api">
+              <APIIcon />
+              API
+            </Link>
+          </Line>
           <Line>
             <Link to="/tutorials">
               <TutorialsIcon />
               Tutorials
             </Link>
           </Line>
+          <Line>
+            <Link to="/integrations">
+              <AddonsIcon />
+              Integrations
+            </Link>
+          </Line>
           <Line>
             <Link to="/releases">
               <ChangelogIcon />
               Changelog
             </Link>
           </Line>
-          {/* <Line>
-            <Link to="/docs/api">
-              <APIIcon />
-              API
-            </Link>
-          </Line> */}
         </TopNav>
       </nav>
       <VersionSelector version={version} versions={versions} slug={slug} />

diff --git a/src/components/layout/PageLayout.js b/src/components/layout/PageLayout.js
@@ -2,13 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { color, styled } from '@storybook/theming';
 import Helmet from 'react-helmet';
-import {
-  Nav,
-  LinksContextProvider,
-  Eyebrow,
-  Footer,
-  defaultLinks,
-} from '@storybook/components-marketing';
+import { Nav, LinksContextProvider, Footer, defaultLinks } from '@storybook/components-marketing';
 import { useStaticQuery, graphql } from 'gatsby';
 import GatsbyLinkWrapper from '../basics/GatsbyLinkWrapper';
 import '@docsearch/css';
@@ -139,17 +133,13 @@ export function PurePageLayout({ dxData, children, pageContext, ...props }) {
         {pageContext && pageContext.layout === 'docs' ? (
           <>
             <NavWrapper>
-              <Eyebrow
-                label={dxData.latestPost.title}
-                link={dxData.latestPost.url}
-                inverse={isHomePage}
-                githubStarCount={dxData.githubStars}
-              />
               <Nav
                 inverse={isHomePage}
+                monochrome={isHomePage}
                 version={versionString || latestVersionString}
                 apiKey={ALGOLIA_API_KEY}
                 activeSection={activeSection}
+                githubStarCount={dxData.githubStars}
               />
             </NavWrapper>
             <DocsLayout pageContext={pageContext} {...props}>
@@ -160,17 +150,13 @@ export function PurePageLayout({ dxData, children, pageContext, ...props }) {
           <>
             {pageContext.layout !== 'iframe' && (
               <>
-                <Eyebrow
-                  label={dxData.latestPost.title}
-                  link={dxData.latestPost.url}
-                  inverse={isHomePage}
-                  githubStarCount={dxData.githubStars}
-                />
                 <Nav
                   inverse={isHomePage}
+                  monochrome={isHomePage}
                   version={versionString || latestVersionString}
                   apiKey={ALGOLIA_API_KEY}
                   activeSection={activeSection}
+                  githubStarCount={dxData.githubStars}
                 />
               </>
             )}

diff --git a/src/components/layout/SocialProof.js b/src/components/layout/SocialProof.js
@@ -2,14 +2,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { NormalizeArea, styles } from '@storybook/components-marketing';
 
-const { pageMargins, breakpoints } = styles;
-
-const Logo = styled.img`
-  display: block;
-  height: auto;
-  opacity: 0.4;
-  filter: grayscale(100%);
-`;
+const { breakpoints } = styles;
 
 const Logos = styled.div`
   display: flex;
@@ -18,6 +11,8 @@ const Logos = styled.div`
   gap: 10px;
   flex-wrap: wrap;
   --ideal-area: 1000;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 
   @media (min-width: ${breakpoints[1]}px) {
     gap: 20px;
@@ -26,87 +21,81 @@ const Logos = styled.div`
 
   @media (min-width: ${breakpoints[2]}px) {
     justify-content: center;
-    gap: 40px;
+    gap: 54px;
     --ideal-area: 5000;
+    padding-top: 5rem;
+    padding-bottom: 5rem;
   }
 
   @media (min-width: ${breakpoints[3]}px) {
     gap: 60px;
     --ideal-area: 7500;
   }
-`;
 
-const Wrapper = styled.div`
-  ${pageMargins};
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-
-  @media (min-width: ${breakpoints[2]}px) {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
+  @media (min-width: 1400px) {
+    gap: 80px;
   }
 `;
 
+const Logo = styled.img`
+  display: block;
+  height: auto;
+  opacity: 0.8;
+`;
+
 const brands = [
   {
     name: 'VScode',
-    image: '/images/logos/user/logo-vscode.svg',
+    image: '/images/home/logos/logo-vscode.svg',
     width: 33,
     height: 34,
   },
   {
     name: 'EU',
-    image: '/images/logos/user/logo-eu.svg',
+    image: '/images/home/logos/logo-eu.svg',
     width: 48,
     height: 31,
   },
   {
     name: 'Github',
-    image: '/images/logos/user/logo-github.svg',
+    image: '/images/home/logos/logo-github.svg',
     width: 92,
     height: 26,
   },
   {
     name: 'Airbnb',
-    image: '/images/logos/user/logo-airbnb.svg',
+    image: '/images/home/logos/logo-airbnb.svg',
     width: 300,
     height: 94,
   },
   {
     name: 'Mozilla',
-    image: '/images/logos/user/logo-mozilla.svg',
+    image: '/images/home/logos/logo-mozilla.svg',
     width: 360,
     height: 103,
   },
   {
     name: 'monday.com',
-    image: '/images/logos/user/logo-monday.svg',
+    image: '/images/home/logos/logo-monday.svg',
     width: 132,
     height: 24,
   },
   {
     name: 'BBC',
-    image: '/images/logos/user/logo-bbc.svg',
+    image: '/images/home/logos/logo-bbc.svg',
     width: 120,
     height: 32,
   },
 ];
 
-export default function SocialProof(props) {
+export default function SocialProof() {
   return (
-    <Wrapper {...props}>
-      <Logos>
-        {brands.map((brand) => (
-          <NormalizeArea
-            key={brand.name}
-            width={brand.width}
-            height={brand.height}
-            idealArea={5000}
-          >
-            <Logo src={brand.image} alt={brand.name} />
-          </NormalizeArea>
-        ))}
-      </Logos>
-    </Wrapper>
+    <Logos>
+      {brands.map((brand) => (
+        <NormalizeArea key={brand.name} width={brand.width} height={brand.height} idealArea={5000}>
+          <Logo src={brand.image} alt={brand.name} />
+        </NormalizeArea>
+      ))}
+    </Logos>
   );
 }
diff --git a/src/components/screens/DocsScreen/DocsScreen.tsx b/src/components/screens/DocsScreen/DocsScreen.tsx
@@ -7,11 +7,7 @@ import { color, spacing } from '@chromaui/tetra';
 import { Button, Link, ShadowBoxCTA, Subheading, styles } from '@storybook/design-system';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 
-import {
-  HEADER_HEIGHT_WITH_EYEBROW,
-  SCROLL_CHANNEL_WIDTH,
-  SCROLL_THUMB_WIDTH,
-} from '../../../constants/style';
+import { HEADER_HEIGHT, SCROLL_CHANNEL_WIDTH, SCROLL_THUMB_WIDTH } from '../../../constants/style';
 import { useMediaQuery } from '../../lib/useMediaQuery';
 import useSiteMetadata from '../../lib/useSiteMetadata';
 import { mdFormatting } from '../../../styles/formatting';
@@ -83,13 +79,13 @@ const RightRail = styled.div`
 
 const RightRailSticky = styled.div`
   position: sticky;
-  top: ${HEADER_HEIGHT_WITH_EYEBROW};
+  top: ${HEADER_HEIGHT};
 `;
 
 const RightRailRoot = styled(ScrollArea.Root)`
   position: relative;
   width: ${RIGHT_RAIL_WIDTH};
-  height: calc(100vh - ${HEADER_HEIGHT_WITH_EYEBROW});
+  height: calc(100vh - ${HEADER_HEIGHT});
 `;
 
 const RightRailViewport = styled(ScrollArea.Viewport)`