[Design adjustments] Implement new design and separate data structure…

… for the footer (#1826) * refactor: implement new design for the footer * chore: use cube instead of banner with 4 columns to save space * chore: add documentation for how to define the footer
commercetools · Oct 9, 2023 · ef03807 · ef03807
1 parent 2886e98
commit ef03807
Show file tree

Hide file tree

Showing 13 changed files with 275 additions and 75 deletions.
diff --git a/.changeset/cool-guests-double.md b/.changeset/cool-guests-double.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-docs/gatsby-theme-docs': minor
+'@commercetools-docs/ui-kit': minor
+---
+
+Implement new design for the website footer. The footer is now defined in a separate data structure and is not in sync with the top menu anymore.
diff --git a/packages/gatsby-theme-docs/gatsby-node.mjs b/packages/gatsby-theme-docs/gatsby-node.mjs
@@ -201,6 +201,16 @@ export const createSchemaCustomization = ({ actions, schema }) => {
       href: String!
     }
     type FooterYaml implements Node @dontInfer {
+      id: ID!
+      menuTitle: String! @proxy(from: "menu-title")
+      items: [FooterItem!]
+    }
+    type FooterItem {
+      label: String!
+      href: String!
+      beta: Boolean
+    }
+    type FooterLinksYaml implements Node @dontInfer {
       id: ID!
       label: String!
       href: String!

diff --git a/packages/gatsby-theme-docs/src/data/footer-links.yaml b/packages/gatsby-theme-docs/src/data/footer-links.yaml
@@ -0,0 +1,6 @@
+- label: Privacy Policy
+  href: https://commercetools.com/privacy
+- label: Cookies
+  href: https://commercetools.com/privacy#1.2
+- label: Imprint
+  href: https://commercetools.com/imprint
diff --git a/packages/gatsby-theme-docs/src/data/footer.yaml b/packages/gatsby-theme-docs/src/data/footer.yaml
@@ -1,4 +1,20 @@
-- label: Privacy Policy
-  href: https://commercetools.com/privacy
-- label: Imprint
-  href: https://commercetools.com/imprint
+- menu-title: Documentation
+  items:
+    - label: Docs Kit Docs
+      href: /../documentation
+
+- menu-title: Test Sites
+  items:
+    - label: Docs Smoke Test
+      href: /../docs-smoke-test
+    - label: API Docs Smoke Test
+      href: /../api-docs-smoke-test
+    - label: Self-learning Smoke Test
+      href: /../self-learning-smoke-test
+
+- menu-title: Product with long title
+  items:
+    - label: Getting started
+      href: /
+    - label: APIs
+      href: /
diff --git a/packages/gatsby-theme-docs/src/layouts/internals/footer.js b/packages/gatsby-theme-docs/src/layouts/internals/footer.js
@@ -14,7 +14,6 @@ const Center = styled.div`
   > * + * {
     margin: ${designSystem.dimensions.spacings.l} 0 0;
     padding: ${designSystem.dimensions.spacings.l} 0 0;
-    border-top: 1px solid ${designSystem.colors.light.borderSecondary};
   }
 
   @media screen and (${designSystem.dimensions.viewports.mobile}) {
@@ -26,7 +25,7 @@ const Center = styled.div`
   }
   @media screen and (${designSystem.dimensions.viewports.tablet}) {
     width: calc(100% - ${designSystem.dimensions.spacings.m} * 2);
-    margin: ${designSystem.dimensions.spacings.l}
+    margin: ${designSystem.dimensions.spacings.xl}
       ${designSystem.dimensions.spacings.m};
   }
   @media screen and (${designSystem.dimensions.viewports.largeTablet}) {
@@ -38,14 +37,27 @@ const Center = styled.div`
     margin-left: ${designSystem.dimensions.spacings.xl};
   }
 `;
+
+const normalGridColumnTemplate = (children) => `repeat(
+  ${children},
+  1fr
+)`;
+
+const extendedGridColumnTemplate = (
+  children
+) => `${designSystem.dimensions.spacings.xl} repeat(
+  ${children},
+  1fr
+)`;
+
 const Columns = styled.div`
   display: grid;
-  grid-gap: ${designSystem.dimensions.spacings.xl};
+  grid-gap: ${designSystem.dimensions.spacings.big};
   grid-auto-columns: 1fr;
-  grid-template-columns: repeat(
-    ${(props) => React.Children.count(props.children)},
-    1fr
-  );
+  grid-template-columns: ${(props) =>
+    props.hasMoreThanThreeColumns
+      ? extendedGridColumnTemplate(React.Children.count(props.children) - 1)
+      : normalGridColumnTemplate(React.Children.count(props.children))};
 
   @media screen and (${designSystem.dimensions.viewports.mobile}) {
     display: block;
@@ -57,50 +69,40 @@ const Columns = styled.div`
   }
 `;
 const Column = styled.div``;
-const SideColumn = styled(Column)`
-  border-left: 1px solid ${designSystem.colors.light.borderSecondary};
-  padding-left: ${designSystem.dimensions.spacings.xl};
-
-  @media screen and (${designSystem.dimensions.viewports.mobile}) {
-    border-left: unset;
-    padding: ${designSystem.dimensions.spacings.m};
-  }
-`;
 const ColumnTitle = styled.div`
   color: ${designSystem.colors.light.textPrimary};
-  font-size: ${designSystem.typography.fontSizes.extraSmall};
-  font-weight: ${designSystem.typography.fontWeights.bold};
+  font-size: ${designSystem.typography.fontSizes.small};
+  font-weight: ${designSystem.typography.fontWeights['light-bold']};
   padding: 0 0 ${designSystem.dimensions.spacings.s} 0;
 
   @media screen and (${designSystem.dimensions.viewports.mobile}) {
     border-bottom: unset;
   }
 `;
+
 const Row = styled.div`
-  display: grid;
-  grid:
-    [row1-start] 'footer-copy footer-links' auto [row1-end]
-    / 1fr 1fr;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
   @media screen and (${designSystem.dimensions.viewports.mobile}) {
-    grid:
-      [row1-start] 'footer-links' auto [row1-end]
-      [row2-start] 'footer-copy' auto [row2-end]
-      / 1fr;
+    flex-direction: column;
+    align-items: flex-start;
   }
 `;
 const RowItem = styled.div`
-  grid-area: ${(props) => props.gridArea};
   @media screen and (${designSystem.dimensions.viewports.mobile}) {
-    padding: ${designSystem.dimensions.spacings.m};
+    width: -webkit-fill-available;
+    padding: ${(props) =>
+      props.isLastSection
+        ? `0 ${designSystem.dimensions.spacings.m} ${designSystem.dimensions.spacings.m} ${designSystem.dimensions.spacings.m}`
+        : designSystem.dimensions.spacings.m};
   }
 `;
 const CopyText = styled.div`
   font-size: ${designSystem.typography.fontSizes.extraSmall};
 `;
 const AlignedRight = styled.div`
-  text-align: right;
-
   @media screen and (${designSystem.dimensions.viewports.mobile}) {
     text-align: unset;
     > * + * {
@@ -111,24 +113,31 @@ const AlignedRight = styled.div`
   @media screen and (${designSystem.dimensions.viewports.tablet}) {
     > * + * {
       ::before {
-        content: '|';
         margin: 0 ${designSystem.dimensions.spacings.s};
       }
     }
   }
+
+  svg {
+    padding-right: ${designSystem.dimensions.spacings.m};
+  }
 `;
 
 const LayoutFooter = () => {
   const data = useStaticQuery(graphql`
     query GetFooterLinks {
-      allTopSideMenuYaml {
+      allFooterYaml {
         nodes {
           id
-          label
-          href
+          menuTitle
+          items {
+            label
+            href
+            beta
+          }
         }
       }
-      allFooterYaml {
+      allFooterLinksYaml {
         nodes {
           id
           label
@@ -148,15 +157,21 @@ const LayoutFooter = () => {
    * - render some elements using css grid with area names, so we can place
    *   the elements in the grid layout as we like
    */
+
+  const hasMoreThanThreeColumns = data.allFooterYaml.nodes.length > 3;
   return (
     <Center>
-      <Columns>
+      <Columns hasMoreThanThreeColumns={hasMoreThanThreeColumns}>
         <Column>
           <MediaQuery forViewport="tablet">
-            <Icons.LogoHorizontalSvgIcon />
+            {hasMoreThanThreeColumns ? (
+              <Icons.CtCubeForFooterSvgIcon />
+            ) : (
+              <Icons.CtBannerForFooterSvgIcon />
+            )}
           </MediaQuery>
         </Column>
-        {/* {data.allTopMenuYaml.nodes.map((node) => (
+        {data.allFooterYaml.nodes.map((node) => (
           <Column key={node.id}>
             <SpacingsStack scale="s">
               <ColumnTitle>{node.menuTitle}</ColumnTitle>
@@ -170,42 +185,30 @@ const LayoutFooter = () => {
               ))}
             </SpacingsStack>
           </Column>
-        ))} */}
-        <SideColumn>
-          <SpacingsStack scale="s">
-            {data.allTopSideMenuYaml.nodes.map((node) => (
+        ))}
+      </Columns>
+      <Row>
+        <RowItem>
+          <AlignedRight>
+            {data.allFooterLinksYaml.nodes.map((node) => (
               <GlobalNavigationLink href={node.href} key={node.id}>
                 {node.label}
               </GlobalNavigationLink>
             ))}
-            <GlobalNavigationLink href="https://ok.commercetools.com/user-research-program">
-              User Research Program
-            </GlobalNavigationLink>
-          </SpacingsStack>
-        </SideColumn>
-      </Columns>
-      <Row>
-        <RowItem gridArea="footer-copy">
-          <SpacingsStack>
+          </AlignedRight>
+        </RowItem>
+        <RowItem isLastSection>
+          <SpacingsInline alignItems="center" justifyContent="space-between">
             <MediaQuery forViewport="mobile">
-              <Icons.LogoHorizontalSvgIcon height={64} />
+              <Icons.CtBannerForFooterSvgIcon />
             </MediaQuery>
             <SpacingsInline scale="m" alignItems="center">
               <CopyText>
-                {'Copyright '}&copy;
+                &copy;
                 {` ${new Date().getFullYear()} commercetools`}
               </CopyText>
             </SpacingsInline>
-          </SpacingsStack>
-        </RowItem>
-        <RowItem gridArea="footer-links">
-          <AlignedRight>
-            {data.allFooterYaml.nodes.map((node) => (
-              <GlobalNavigationLink href={node.href} key={node.id}>
-                {node.label}
-              </GlobalNavigationLink>
-            ))}
-          </AlignedRight>
+          </SpacingsInline>
         </RowItem>
       </Row>
     </Center>

diff --git a/packages/gatsby-theme-docs/src/layouts/internals/layout-footer.js b/packages/gatsby-theme-docs/src/layouts/internals/layout-footer.js
@@ -3,10 +3,6 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { designSystem } from '@commercetools-docs/ui-kit';
 import Footer from './footer';
-
-const Container = styled.footer`
-  background-color: ${designSystem.colors.light.surfaceSecondary2};
-`;
 const ContentGrid = styled.div`
   width: 100%;
   position: relative;
@@ -64,12 +60,12 @@ const LayoutFooter = () => (
       grid-area: footer;
     `}
   >
-    <Container>
+    <footer>
       <ContentGrid>
         <Footer />
         <RightBlank />
       </ContentGrid>
-    </Container>
+    </footer>
   </div>
 );
 

diff --git a/packages/ui-kit/src/icons/generated/CtBannerForFooter.tsx b/packages/ui-kit/src/icons/generated/CtBannerForFooter.tsx
diff --git a/packages/ui-kit/src/icons/generated/CtCubeForFooter.tsx b/packages/ui-kit/src/icons/generated/CtCubeForFooter.tsx