docs(PPDSC-2259): skeleton of homepage (#318)

* docs(PPDSC-2259): skeleton of homepage * fix(PPDSC-2259): update footer links
newscorp-ghfb · Aug 2, 2022 · 37eb09c · 37eb09c
1 parent 3a120bb
commit 37eb09c
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 29 deletions.
diff --git a/site/components/site-footer.tsx b/site/components/site-footer.tsx
@@ -75,7 +75,7 @@ const SiteFooter: React.FC<FooterProps> = ({cellProps = {xs: 12}}) => (
               <Link
                 href="https://www.newscareers.co.uk/"
                 target="_blank"
-                external={false}
+                external
                 overrides={linkOverrides}
               >
                 Careers
@@ -85,7 +85,7 @@ const SiteFooter: React.FC<FooterProps> = ({cellProps = {xs: 12}}) => (
               <Link
                 href="https://medium.com/newskit-design-system"
                 target="_blank"
-                external={false}
+                external
                 overrides={linkOverrides}
               >
                 Blog

diff --git a/site/pages/index-new.tsx b/site/pages/index-new.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import {GridLayout, GridLayoutItem, styled, TextBlock, Visible} from 'newskit';
+import Layout, {LayoutProps} from '../components/layout';
+import {GridLayoutItemProps} from '../../src/grid-layout/types';
+
+const Placeholder: React.FC = ({children}) => (
+  <TextBlock
+    as="span"
+    stylePreset="inkContrast"
+    typographyPreset="editorialLabel010"
+  >
+    {children}
+  </TextBlock>
+);
+
+// Placeholder box
+const GridBox = styled.div`
+  padding: 10px;
+  border: 1px solid orange;
+`;
+
+const fullGridColumns: GridLayoutItemProps = {
+  column: {xs: `2 / span 10`},
+};
+
+const Index = (layoutProps: LayoutProps) => (
+  <Layout {...layoutProps} newPage hideSidebar path="/index-new">
+    <GridLayout
+      columns={{xs: 'repeat(12, minmax(0,1fr))'}}
+      rowGap={{xs: 'space070', md: 'space100'}}
+      overrides={{marginBlockEnd: 'space080'}}
+    >
+      <GridLayoutItem {...fullGridColumns}>
+        <GridLayout
+          overrides={{marginBlockStart: {xs: 'space070', xl: 'space000'}}}
+        >
+          <GridLayoutItem column={{xs: `auto / span 10`, xl: `auto / span 4`}}>
+            <GridBox>
+              <Placeholder>Hero Text</Placeholder>
+            </GridBox>
+          </GridLayoutItem>
+          <GridLayoutItem column={{xl: `span 6 / 11`}}>
+            <Visible xl>
+              <GridBox>
+                <Placeholder>Hero Image</Placeholder>
+              </GridBox>
+            </Visible>
+          </GridLayoutItem>
+        </GridLayout>
+      </GridLayoutItem>
+      <GridLayoutItem {...fullGridColumns}>
+        <GridBox>
+          <Placeholder>Banner</Placeholder>
+        </GridBox>
+      </GridLayoutItem>
+      <GridLayoutItem {...fullGridColumns}>
+        <GridBox>
+          <Placeholder>Explore</Placeholder>
+        </GridBox>
+      </GridLayoutItem>
+      <GridLayoutItem {...fullGridColumns}>
+        <GridBox>
+          <Placeholder>Whats New</Placeholder>
+        </GridBox>
+      </GridLayoutItem>
+      <GridLayoutItem {...fullGridColumns}>
+        <GridBox>
+          <Placeholder>Contribute</Placeholder>
+        </GridBox>
+      </GridLayoutItem>
+      <GridLayoutItem {...fullGridColumns}>
+        <GridBox>
+          <Placeholder>Keep in touch</Placeholder>
+        </GridBox>
+      </GridLayoutItem>
+      <GridLayoutItem {...fullGridColumns}>
+        <GridBox>
+          <Placeholder>Supported brands</Placeholder>
+        </GridBox>
+      </GridLayoutItem>
+    </GridLayout>
+  </Layout>
+);
+
+export default Index;
diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap
@@ -1258,11 +1258,13 @@ Object {
     },
     "linkFooter": Object {
       "active": Object {
-        "color": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary050}}",
+        "iconColor": "{{colors.interactivePrimary050}}",
         "textDecoration": "none",
       },
       "base": Object {
-        "color": "{{colors.interactivePrimary040}}",
+        "color": "{{colors.interactivePrimary030}}",
+        "iconColor": "{{colors.interactivePrimary030}}",
         "textDecoration": "none",
       },
       "focus-visible": Object {
@@ -1273,7 +1275,8 @@ Object {
         "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "hover": Object {
-        "color": "{{colors.interactivePrimary030}}",
+        "color": "{{colors.interactivePrimary040}}",
+        "iconColor": "{{colors.interactivePrimary040}}",
         "textDecoration": "underline",
       },
     },
@@ -3666,11 +3669,13 @@ Object {
     },
     "linkFooter": Object {
       "active": Object {
-        "color": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary050}}",
+        "iconColor": "{{colors.interactivePrimary050}}",
         "textDecoration": "none",
       },
       "base": Object {
-        "color": "{{colors.interactivePrimary040}}",
+        "color": "{{colors.interactivePrimary030}}",
+        "iconColor": "{{colors.interactivePrimary030}}",
         "textDecoration": "none",
       },
       "focus-visible": Object {
@@ -3681,7 +3686,8 @@ Object {
         "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "hover": Object {
-        "color": "{{colors.interactivePrimary030}}",
+        "color": "{{colors.interactivePrimary040}}",
+        "iconColor": "{{colors.interactivePrimary040}}",
         "textDecoration": "underline",
       },
     },
@@ -6077,11 +6083,13 @@ Object {
     },
     "linkFooter": Object {
       "active": Object {
-        "color": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary050}}",
+        "iconColor": "{{colors.interactivePrimary050}}",
         "textDecoration": "none",
       },
       "base": Object {
-        "color": "{{colors.interactivePrimary040}}",
+        "color": "{{colors.interactivePrimary030}}",
+        "iconColor": "{{colors.interactivePrimary030}}",
         "textDecoration": "none",
       },
       "focus-visible": Object {
@@ -6092,7 +6100,8 @@ Object {
         "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "hover": Object {
-        "color": "{{colors.interactivePrimary030}}",
+        "color": "{{colors.interactivePrimary040}}",
+        "iconColor": "{{colors.interactivePrimary040}}",
         "textDecoration": "underline",
       },
     },
@@ -8485,11 +8494,13 @@ Object {
     },
     "linkFooter": Object {
       "active": Object {
-        "color": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary050}}",
+        "iconColor": "{{colors.interactivePrimary050}}",
         "textDecoration": "none",
       },
       "base": Object {
-        "color": "{{colors.interactivePrimary040}}",
+        "color": "{{colors.interactivePrimary030}}",
+        "iconColor": "{{colors.interactivePrimary030}}",
         "textDecoration": "none",
       },
       "focus-visible": Object {
@@ -8500,7 +8511,8 @@ Object {
         "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "hover": Object {
-        "color": "{{colors.interactivePrimary030}}",
+        "color": "{{colors.interactivePrimary040}}",
+        "iconColor": "{{colors.interactivePrimary040}}",
         "textDecoration": "underline",
       },
     },
@@ -10896,11 +10908,13 @@ Object {
     },
     "linkFooter": Object {
       "active": Object {
-        "color": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary050}}",
+        "iconColor": "{{colors.interactivePrimary050}}",
         "textDecoration": "none",
       },
       "base": Object {
-        "color": "{{colors.interactivePrimary040}}",
+        "color": "{{colors.interactivePrimary030}}",
+        "iconColor": "{{colors.interactivePrimary030}}",
         "textDecoration": "none",
       },
       "focus-visible": Object {
@@ -10911,7 +10925,8 @@ Object {
         "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "hover": Object {
-        "color": "{{colors.interactivePrimary030}}",
+        "color": "{{colors.interactivePrimary040}}",
+        "iconColor": "{{colors.interactivePrimary040}}",
         "textDecoration": "underline",
       },
     },
@@ -13304,11 +13319,13 @@ Object {
     },
     "linkFooter": Object {
       "active": Object {
-        "color": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary050}}",
+        "iconColor": "{{colors.interactivePrimary050}}",
         "textDecoration": "none",
       },
       "base": Object {
-        "color": "{{colors.interactivePrimary040}}",
+        "color": "{{colors.interactivePrimary030}}",
+        "iconColor": "{{colors.interactivePrimary030}}",
         "textDecoration": "none",
       },
       "focus-visible": Object {
@@ -13319,7 +13336,8 @@ Object {
         "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "hover": Object {
-        "color": "{{colors.interactivePrimary030}}",
+        "color": "{{colors.interactivePrimary040}}",
+        "iconColor": "{{colors.interactivePrimary040}}",
         "textDecoration": "underline",
       },
     },
@@ -15715,11 +15733,13 @@ Object {
     },
     "linkFooter": Object {
       "active": Object {
-        "color": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary050}}",
+        "iconColor": "{{colors.interactivePrimary050}}",
         "textDecoration": "none",
       },
       "base": Object {
-        "color": "{{colors.interactivePrimary040}}",
+        "color": "{{colors.interactivePrimary030}}",
+        "iconColor": "{{colors.interactivePrimary030}}",
         "textDecoration": "none",
       },
       "focus-visible": Object {
@@ -15730,7 +15750,8 @@ Object {
         "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "hover": Object {
-        "color": "{{colors.interactivePrimary030}}",
+        "color": "{{colors.interactivePrimary040}}",
+        "iconColor": "{{colors.interactivePrimary040}}",
         "textDecoration": "underline",
       },
     },
@@ -18123,11 +18144,13 @@ Object {
     },
     "linkFooter": Object {
       "active": Object {
-        "color": "{{colors.interactivePrimary020}}",
+        "color": "{{colors.interactivePrimary050}}",
+        "iconColor": "{{colors.interactivePrimary050}}",
         "textDecoration": "none",
       },
       "base": Object {
-        "color": "{{colors.interactivePrimary040}}",
+        "color": "{{colors.interactivePrimary030}}",
+        "iconColor": "{{colors.interactivePrimary030}}",
         "textDecoration": "none",
       },
       "focus-visible": Object {
@@ -18138,7 +18161,8 @@ Object {
         "safariOutlineStyle": "{{outlines.safariOutlineStyleDefault}}",
       },
       "hover": Object {
-        "color": "{{colors.interactivePrimary030}}",
+        "color": "{{colors.interactivePrimary040}}",
+        "iconColor": "{{colors.interactivePrimary040}}",
         "textDecoration": "underline",
       },
     },

diff --git a/site/theme/style-presets.ts b/site/theme/style-presets.ts
@@ -427,15 +427,18 @@ export const stylePresets = {
   },
   linkFooter: {
     base: {
-      color: '{{colors.interactivePrimary040}}',
+      color: '{{colors.interactivePrimary030}}',
+      iconColor: '{{colors.interactivePrimary030}}',
       textDecoration: 'none',
     },
     hover: {
-      color: '{{colors.interactivePrimary030}}',
+      color: '{{colors.interactivePrimary040}}',
+      iconColor: '{{colors.interactivePrimary040}}',
       textDecoration: 'underline',
     },
     active: {
-      color: '{{colors.interactivePrimary020}}',
+      color: '{{colors.interactivePrimary050}}',
+      iconColor: '{{colors.interactivePrimary050}}',
       textDecoration: 'none',
     },
     'focus-visible': {