Merge pull request #113 from chromaui/header-adjustments

Header and footer adjustments

src/Button/Button.tsx

@@ -14,7 +14,7 @@ export interface ButtonProps {
   href?: string;
   target?: '_blank' | '_self' | '_parent' | '_top';
   onClick?: () => void;
-  as?: 'button' | 'a';
+  as?: 'button' | 'a' | 'span';
 }
 
 const Container = styled.a<{

src/Footer/Footer.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Footer } from './Footer';
-import { footerColumns, footerSocialLinks, homeLink } from './data';
 
 const meta: Meta<typeof Footer> = {
   title: 'Components/Footer',
@@ -18,17 +17,10 @@ const meta: Meta<typeof Footer> = {
 export default meta;
 type Story = StoryObj<typeof Footer>;
 
-export const Base: Story = {
-  args: {
-    columns: footerColumns,
-    socialLinks: footerSocialLinks,
-    homeLink,
-  },
-};
+export const Base: Story = {};
 
 export const Inverse: Story = {
   args: {
-    ...Base.args,
     theme: 'dark',
   },
 };

src/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ElementType, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { minSm, typography } from '../_helpers';
 import { color, spacing } from '../_tokens';
@@ -7,7 +7,7 @@ import { Container } from '../Container';
 import { Logo } from '../Logo';
 import { Icon } from '../Icon';
 import { HStack } from '../Stack';
-import { FooterColumn, FooterSocialItem, HomeItem } from './types';
+import { createFooterColumns, footerSocialLinks } from './data';
 
 const Columns = styled.div`
   display: grid;
@@ -67,7 +67,7 @@ const SocialLink = styled(LinkWithWrapper, {
   border-color: ${({ inverse }) =>
     inverse ? color.whiteTr10 : color.blackTr10};
 
-  transition: border-color: 150ms ease-out;
+  transition: border-color 150ms ease-out;
 
   svg {
     display: block;
@@ -142,19 +142,15 @@ const HomeLink = styled(LinkWithWrapper)`
 
 export interface FooterProps {
   theme: 'light' | 'dark';
-  columns: FooterColumn[];
-  socialLinks: FooterSocialItem[];
-  homeLink: HomeItem;
+  LinkWrapper: ElementType;
 }
 
-export const Footer = ({
-  theme,
-  columns,
-  socialLinks,
-  homeLink,
-  ...props
-}: FooterProps) => {
+export const Footer = ({ theme, LinkWrapper, ...props }: FooterProps) => {
   const inverse = theme === 'dark';
+  const columns = useMemo(
+    () => createFooterColumns(LinkWrapper),
+    [LinkWrapper]
+  );
 
   return (
     <FooterWrapper inverse={inverse} {...props}>
@@ -173,7 +169,7 @@ export const Footer = ({
         </Columns>
         <BottomRow>
           <Colophon gap={5} align="center">
-            <HomeLink href={homeLink.href} LinkWrapper={homeLink.LinkWrapper}>
+            <HomeLink href="/" LinkWrapper={LinkWrapper}>
               <Logo
                 alt="Chromatic"
                 name="chromatic"
@@ -185,7 +181,7 @@ export const Footer = ({
             </ColophonText>
           </Colophon>
           <HStack gap={4}>
-            {socialLinks.map(({ title, icon, ...linkProps }) => (
+            {footerSocialLinks.map(({ title, icon, ...linkProps }) => (
               <SocialLink
                 key={title}
                 inverse={inverse}

src/Footer/data.tsx

@@ -1,77 +1,80 @@
-import { FooterProps } from './Footer';
+import { ElementType } from 'react';
+import { FooterColumn, FooterSocialItem } from './types';
 
-export const footerColumns: FooterProps['columns'] = [
+export const createFooterColumns = (
+  LinkWrapper: ElementType
+): FooterColumn[] => [
   {
-    title: 'Product',
+    title: 'Company',
     links: [
-      { title: 'Pricing', href: '/pricing' },
-      { title: 'About', href: '/company/about' },
-      { title: 'Jobs', href: '/company/careers' },
+      { title: 'About', href: '/company/about', LinkWrapper },
+      { title: 'Careers', href: '/company/careers', LinkWrapper },
       { title: 'Terms of Service', href: '/docs/terms-of-service' },
       { title: 'Privacy', href: '/docs/privacy-policy' },
-      { title: 'Status', href: 'https://status.chromatic.com/' },
       { title: 'Security • SOC 2', href: '/security' },
-      { title: 'Contact Sales', href: '/sales' },
+      { title: 'Status', href: 'https://status.chromatic.com/' },
+      { title: 'Contact Sales', href: '/sales', LinkWrapper },
     ],
   },
   {
-    title: 'Features',
+    title: 'Platform',
     links: [
-      { title: 'UI Tests', href: '/features/test' },
+      { title: 'UI Tests', href: '/features/test', LinkWrapper },
       {
         title: 'Visual test',
         href: '/features/visual-test',
+        LinkWrapper,
       },
       {
         title: 'Interaction test',
         href: '/features/interaction-test',
-      },
-      { title: 'TurboSnap', href: '/features/turbosnap' },
-      { title: 'UI Review', href: '/features/review' },
-      { title: 'Publish', href: '/features/publish' },
+        LinkWrapper,
+      },
+      { title: 'TurboSnap', href: '/features/turbosnap', LinkWrapper },
+      { title: 'UI Review', href: '/features/review', LinkWrapper },
+      { title: 'Publish', href: '/features/publish', LinkWrapper },
+      { title: 'Storybook', href: '/storybook', LinkWrapper },
+      { title: 'Playwright', href: '/playwright', LinkWrapper },
+      { title: 'Cypress', href: '/cypress', LinkWrapper },
       { title: 'Figma plugin', href: '/features/figma-plugin' },
-      {
-        title: 'Storybook',
-        href: '/storybook',
-      },
-      {
-        title: 'Playwright',
-        href: '/playwright',
-      },
-      {
-        title: 'Cypress',
-        href: '/cypress',
-      },
+      { title: 'Pricing', href: '/pricing', LinkWrapper },
     ],
   },
   {
     title: 'Customers',
     links: [
-      { title: 'Made for Storybook', href: '/solutions/storybook' },
+      { title: 'Enterprise', href: '/enterprise', LinkWrapper },
       {
         title: 'Frontend teams',
         href: '/solutions/frontend',
+        LinkWrapper,
       },
       {
         title: 'Design systems',
         href: '/solutions/design-systems',
+        LinkWrapper,
       },
       {
         title: 'Digital agencies',
         href: '/solutions/agencies',
+        LinkWrapper,
       },
       {
         title: 'Netlify',
         href: '/customers/netlify',
+        LinkWrapper,
       },
       {
         title: 'Monday.com',
         href: '/customers/monday',
+        LinkWrapper,
       },
       {
         title: 'Collective.work',
         href: '/customers/collective',
+        LinkWrapper,
       },
+      { title: 'ezCater', href: '/customers/ezcater', LinkWrapper },
     ],
   },
   {
@@ -91,42 +94,59 @@ export const footerColumns: FooterProps['columns'] = [
         title: 'Component Driven UIs',
         href: 'https://www.componentdriven.org/',
       },
+      {
+        title: 'Frontend testing guide',
+        href: '/frontend-testing-guide',
+        LinkWrapper,
+      },
     ],
   },
   {
     title: 'Compare',
     links: [
+      {
+        title: 'Overview of tools',
+        href: '/choose/visual-testing',
+        LinkWrapper,
+      },
       {
         title: 'Applitools',
         href: '/compare/applitools',
-      },
-      { title: 'Percy', href: '/compare/percy' },
+        LinkWrapper,
+      },
+      { title: 'Percy', href: '/compare/percy', LinkWrapper },
+      { title: 'Sauce Labs', href: '/compare/sauce-labs', LinkWrapper },
+      { title: 'Katalon', href: '/compare/katalon', LinkWrapper },
+      { title: 'LambdaTest', href: '/compare/lambdatest', LinkWrapper },
+      { title: 'SmartBear', href: '/compare/smartbear', LinkWrapper },
+      { title: 'TestingBot', href: '/compare/testingbot', LinkWrapper },
+      { title: 'Lost Pixel', href: '/compare/lost-pixel', LinkWrapper },
+      { title: 'Backstop', href: '/compare/backstop', LinkWrapper },
+      { title: 'Playwright', href: '/compare/playwright', LinkWrapper },
       {
         title: 'Deploy Storybook',
         href: '/choose/storybook-deploy',
-      },
-      {
-        title: 'Visual testing services',
-        href: '/choose/visual-testing',
+        LinkWrapper,
       },
     ],
   },
 ];
 
-export const footerSocialLinks: FooterProps['socialLinks'] = [
+export const footerSocialLinks: FooterSocialItem[] = [
   { title: 'github', icon: 'github', href: 'https://github.com/chromaui/' },
   {
     title: 'twitter',
     icon: 'twitter',
     href: 'https://twitter.com/chromaticcom',
   },
+  {
+    title: 'BlueSky',
+    icon: 'bluesky',
+    href: 'https://bsky.app/profile/chromaticui.bsky.social',
+  },
   {
     title: 'youtube',
     icon: 'youtube',
     href: 'https://youtube.com/@chromaticui',
   },
 ];
-
-export const homeLink: FooterProps['homeLink'] = {
-  href: '/',
-};

src/Header/Header.stories.tsx

@@ -2,9 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { within, userEvent } from '@storybook/testing-library';
 import { Header } from './Header';
-import { Button } from '../Button';
-import { desktopData, mobileData } from './data';
-import { Link } from '../Link';
+import { defaultLinks } from './data';
 import { SubNav } from '../SubNav';
 
 const meta: Meta<typeof Header> = {
@@ -21,28 +19,7 @@ type Story = StoryObj<typeof Header>;
 export const DesktopLight: Story = {
   args: {
     theme: 'light',
-    desktopData,
-    mobileData,
-    desktopRight: (
-      <>
-        <Link size="md" weight="semibold" href="/">
-          Sign in
-        </Link>
-        <Button size="sm" variant="outline" color="blue">
-          Sign up
-        </Button>
-      </>
-    ),
-    mobileBottom: (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-        <Button size="sm" variant="outline" color="blue">
-          Sign in
-        </Button>
-        <Button size="sm" variant="solid" color="blue">
-          Sign up
-        </Button>
-      </div>
-    ),
+    links: defaultLinks,
   },
   parameters: {
     layout: 'fullscreen',
@@ -64,6 +41,35 @@ export const DesktopDark: Story = {
   },
 };
 
+export const DesktopLoggedOut: Story = {
+  args: {
+    ...DesktopLight.args,
+    loggedIn: false,
+  },
+};
+
+export const DesktopLoggedIn: Story = {
+  args: {
+    ...DesktopLight.args,
+    loggedIn: true,
+  },
+};
+
+export const DesktopLoggedOutMaintenance: Story = {
+  args: {
+    ...DesktopLight.args,
+    maintenanceMode: true,
+  },
+};
+
+export const DesktopLoggedInMaintenance: Story = {
+  args: {
+    ...DesktopLight.args,
+    loggedIn: true,
+    maintenanceMode: true,
+  },
+};
+
 export const WithSubNav: Story = {
   render: (args) => (
     <>
@@ -132,7 +138,7 @@ export const DesktopLightOpen: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const MenuButton = await canvas.findByRole('button', {
-      name: 'Features',
+      name: 'Platform',
     });
     MenuButton.focus();
     await userEvent.keyboard('{enter}');
@@ -156,7 +162,7 @@ export const DesktopDarkOpen: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const MenuButton = await canvas.findByRole('button', {
-      name: 'Features',
+      name: 'Platform',
     });
     MenuButton.focus();
     await userEvent.keyboard('{enter}');