refactor footer to hardcode columns

chromaui · Nov 29, 2024 · fe35052 · fe35052
1 parent f26f05b
commit fe35052
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 67 deletions.
diff --git a/src/Footer/Footer.stories.tsx b/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',
   },
 };
diff --git a/src/Footer/Footer.tsx b/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}

diff --git a/src/Footer/data.tsx b/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: '/',
-};
diff --git a/src/Header/data.tsx b/src/Header/data.tsx
@@ -9,6 +9,7 @@ import { Icons } from '../Icon/Icon';
 import { PlaywrightIcon } from './icons/playwright';
 import { CypressIcon } from './icons/cypress';
 import { EzCaterIcon } from './icons/ezcater';
+import { LinkKeys } from '../shared-types';
 
 interface HeaderLink {
   title: string;
@@ -19,7 +20,9 @@ interface HeaderLink {
   linkWrapper?: any;
 }
 
-export const defaultLinks: { [key: string]: HeaderLink } = {
+export type HeaderLinks = Record<LinkKeys, HeaderLink>;
+
+export const defaultLinks: HeaderLinks = {
   signin: {
     title: 'Sign in',
     href: '/start',
@@ -185,10 +188,6 @@ export const defaultLinks: { [key: string]: HeaderLink } = {
   },
 };
 
-type HeaderLinkKeys = keyof typeof defaultLinks;
-
-export type HeaderLinks = Record<HeaderLinkKeys, HeaderLink>;
-
 export const createDesktopMenu = (
   links: HeaderLinks = defaultLinks
 ): HeaderDesktopItem[] => [

diff --git a/src/Icon/iconPaths.tsx b/src/Icon/iconPaths.tsx
@@ -1466,4 +1466,9 @@ export const icons = {
       <path d="M10.24.04c.13 0 .26.03.38.09L13.5 1.5a.87.87 0 0 1 .5.8v.03-.01 9.39c0 .33-.2.63-.5.78l-2.88 1.38a.87.87 0 0 1-1-.17l-5.5-5.03-2.4 1.83a.58.58 0 0 1-.75-.04l-.77-.7a.58.58 0 0 1 0-.86L2.27 7 .2 5.1a.58.58 0 0 1 0-.86l.77-.7c.21-.2.52-.2.75-.04l2.4 1.83L9.63.3a.87.87 0 0 1 .61-.26Zm.26 3.78L6.32 7l4.18 3.18V3.82Z" />
     </>
   ),
+  bluesky: (
+    <>
+      <path d="M3.035 1.83C4.64 3.035 6.366 5.478 7 6.79c.634-1.312 2.36-3.755 3.965-4.96C12.124.96 14 .288 14 2.428c0 .428-.245 3.592-.389 4.105-.5 1.786-2.32 2.242-3.94 1.966 2.831.482 3.551 2.078 1.996 3.674-2.954 3.032-4.246-.76-4.577-1.732-.061-.178-.09-.261-.09-.19 0-.071-.029.012-.09.19-.33.972-1.622 4.764-4.577 1.732C.778 10.577 1.498 8.981 4.33 8.5 2.71 8.775.89 8.319.39 6.533.245 6.02 0 2.856 0 2.428 0 .288 1.877.96 3.035 1.83Z" />
+    </>
+  ),
 } as const;
diff --git a/src/shared-types.ts b/src/shared-types.ts
@@ -0,0 +1,30 @@
+export type LinkKeys =
+  | 'signin'
+  | 'signup'
+  | 'uiTest'
+  | 'visualTest'
+  | 'interactionTest'
+  | 'storybook'
+  | 'playwright'
+  | 'cypress'
+  | 'turboSnap'
+  | 'uiReview'
+  | 'publish'
+  | 'figmaPlugin'
+  | 'frontendTeams'
+  | 'designSystems'
+  | 'digitalAgencies'
+  | 'aboutChromatic'
+  | 'careers'
+  | 'security'
+  | 'enterprise'
+  | 'netlify'
+  | 'monday'
+  | 'collective'
+  | 'ezcater'
+  | 'blog'
+  | 'changelog'
+  | 'frontendTestingGuide'
+  | 'docs'
+  | 'pricing'
+  | 'sales';