Merge pull request #442 from WestpacGEL/feature/article-site-updates

feature(site): update article layouts and fix some content bugs

apps/site/keystatic.config.ts

@@ -263,7 +263,10 @@ export default config({
           links: true,
           label: 'Design',
           componentBlocks: ArticleComponentBlocks,
-          layouts: [[6, 6]],
+          layouts: [
+            [4, 4],
+            [5, 5],
+          ],
           images: {
             directory: 'public/images/articles/content',
             publicPath: '/images/articles/content',

apps/site/src/app/(home)/page.tsx

@@ -30,7 +30,7 @@ export default async function Homepage() {
   );
 
   return (
-    <main className="pb-8 font-gel-sans">
+    <main className="pb-8 font-gel-sans text-gel-text">
       <Hero />
       <ActionBar />
       <HomePageContent articleRows={articleRows} />

apps/site/src/app/articles/[article]/components/article-page/article-page.component.tsx

@@ -14,39 +14,35 @@ import { type ArticlePageProps } from './article-page.types';
 export function ArticlePage({ article, author }: ArticlePageProps) {
   return (
     <>
-      <div>
-        <div className="bg-gradient-to-b from-white from-25% to-gel-background">
-          <Container className=" pt-8 xsl:pt-10 sm:pt-11">
-            <Grid className="gap-y-5 xsl:gap-y-6 sm:gap-y-8">
-              <div className="col-span-12">
-                <h1 className="typography-site-6 mb-2 font-black !leading-[1.1] tracking-[-1px] xsl:typography-site-3 xsl:mb-3">
-                  {article.name}
-                </h1>
-                <p className="typography-site-9 text-gel-muted">{author?.name}</p>
-              </div>
-              <div className="col-span-12 mb-7 xsl:mb-9">
-                {article.image && (
-                  <figure>
-                    <img alt={article.name} src={article.image} className="block h-auto w-full" />
-                  </figure>
-                )}
-              </div>
-            </Grid>
-          </Container>
-        </div>
-        <Container>
-          <Grid>
-            <div className="col-span-12 pb-14.5 xsl:col-span-10 xsl:col-start-2 md:col-span-8 md:col-start-3">
-              <LeadingText text={article.description} />
-              <DocumentRenderer
-                document={article.content}
-                renderers={DOCUMENT_RENDERERS}
-                componentBlocks={ArticleComponentBlocksComponents}
-              />
+      <div className="bg-gradient-to-b from-white from-25% to-gel-background">
+        <Container className=" pt-8 xsl:pt-10 sm:pt-11">
+          <Grid className="gap-y-5 xsl:gap-y-6 sm:gap-y-8">
+            <div className="col-span-12">
+              <h1 className="typography-site-6 mb-2 font-black !leading-[1.1] tracking-[-1px] xsl:typography-site-3 xsl:mb-3">
+                {article.name}
+              </h1>
+              <p className="typography-site-9 text-gel-muted">{author?.name}</p>
+            </div>
+            <div className="col-span-12 mb-7 xsl:mb-9">
+              {article.image && (
+                <figure>
+                  <img alt={article.name} src={article.image} className="block h-auto w-full" />
+                </figure>
+              )}
             </div>
           </Grid>
         </Container>
       </div>
+      <Container className="pb-8 xsl:pb-10 sm:pb-11">
+        <Grid className="gap-y-0 xsl:gap-y-0 sm:gap-y-0">
+          <LeadingText text={article.description} />
+          <DocumentRenderer
+            document={article.content}
+            renderers={DOCUMENT_RENDERERS}
+            componentBlocks={ArticleComponentBlocksComponents}
+          />
+        </Grid>
+      </Container>
       <StickyFooter />
     </>
   );

apps/site/src/app/articles/[article]/components/document-renderer.tsx

@@ -2,14 +2,15 @@ import { DocumentRendererProps } from '@keystatic/core/renderer';
 
 import { Code as InlineCode, Link } from '@/components/content-blocks/typography';
 import { Blockquote, Code, Divider, List, Paragraph } from '@/components/document-renderer';
-import { Layout } from '@/components/document-renderer/layout/layout.component';
 
 import { Heading } from './heading';
 import { Image } from './image';
+import { Layout } from './layout';
 
 export const DOCUMENT_RENDERERS: Required<DocumentRendererProps>['renderers'] = {
   block: {
     divider: Divider,
+    block: ({ children }) => <>{children}</>,
     paragraph: props => <Paragraph {...props} type="graphik" />,
     code: Code,
     heading: Heading,

apps/site/src/app/articles/[article]/components/heading/heading.style.ts

@@ -1,20 +1,20 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'mt-7 font-bold xsl:mt-9',
+  base: 'col-span-12 font-bold xsl:col-span-10 xsl:col-start-2 md:col-span-8 md:col-start-3',
   variants: {
     textAlign: {
       left: 'text-left',
       center: 'text-center',
       end: 'text-right',
     },
     level: {
-      1: 'typography-site-5 mb-5',
-      2: 'typography-site-7 mb-4 !leading-loose xsl:typography-site-6 xsl:mb-5',
-      3: 'typography-site-7 mb-5',
-      4: 'typography-site-9 mb-5',
-      5: 'typography-site-10 mb-2',
-      6: 'typography-site-10 mb-2',
+      1: 'typography-site-5',
+      2: 'typography-site-7 mb-4 leading-[1.3] xsl:typography-site-6 xsl:mb-5 xsl:leading-[1.3]',
+      3: 'typography-site-8 mb-3 leading-[1.3] xsl:typography-site-7 xsl:leading-[1.3]',
+      4: 'typography-site-8 mb-3 leading-[1.3]',
+      5: 'typography-site-10',
+      6: 'typography-site-10',
     },
   },
 });

apps/site/src/app/articles/[article]/components/image/image.style.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'relative mx-0 my-4 only:my-0',
+    base: 'relative',
     img: 'block',
     caption: 'typography-site-10 mt-2 text-gel-muted',
   },

apps/site/src/app/articles/[article]/components/layout/index.ts

@@ -0,0 +1,2 @@
+export * from './layout.component';
+export * from './layout.types';

apps/site/src/app/articles/[article]/components/layout/layout.component.tsx

@@ -0,0 +1,25 @@
+import { Item } from '@westpac/ui';
+
+import { styles } from './layout.styles';
+import { type LayoutProps, type Variants } from './layout.types';
+import { layoutMap } from './layout.utils';
+
+export const Layout = ({ children, layout }: LayoutProps) => {
+  return (
+    <>
+      {children.map((child, index) => {
+        const width = layout[index];
+        return (
+          <Item
+            key={index}
+            span={layoutMap[width].span}
+            start={layoutMap[width].start[index]}
+            className={styles({ index: index as Variants['index'] })}
+          >
+            {child}
+          </Item>
+        );
+      })}
+    </>
+  );
+};

apps/site/src/app/articles/[article]/components/layout/layout.styles.ts

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'mb-7 xsl:mb-9',
+  variants: {
+    index: {
+      0: 'mb-4',
+    },
+  },
+});

apps/site/src/app/articles/[article]/components/layout/layout.types.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './layout.styles.js';
+
+export type LayoutProps = {
+  children: ReactElement[];
+  layout: [number, ...number[]];
+};
+
+export type Variants = VariantProps<typeof styles>;

apps/site/src/app/articles/[article]/components/layout/layout.utils.ts

@@ -0,0 +1,38 @@
+export const layoutMap: { [key: number]: { span: object; start: { [index: number]: object } } } = {
+  // body
+  4: {
+    span: {
+      initial: 12,
+      xsl: 5,
+      md: 4,
+    },
+    start: {
+      0: {
+        inital: 1,
+        xsl: 2,
+        md: 3,
+      },
+      1: {
+        initial: 1,
+        xsl: 7,
+      },
+    },
+  },
+  //body-wide
+  5: {
+    span: {
+      initial: 12,
+      xsl: 5,
+    },
+    start: {
+      0: {
+        initial: 1,
+        xsl: 2,
+      },
+      1: {
+        intial: 1,
+        xsl: 7,
+      },
+    },
+  },
+};

apps/site/src/app/articles/[article]/layout.tsx

@@ -2,7 +2,7 @@ import { Header } from './components';
 
 export default function ArticleLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="bg-gel-background pb-8">
+    <div className="bg-gel-background pb-8 text-gel-text">
       <Header />
       <main>{children}</main>
     </div>

apps/site/src/components/component-blocks/article-component-blocks.tsx

@@ -32,6 +32,14 @@ export const ArticleComponentBlocks = {
       title: fields.text({
         label: 'Title',
       }),
+      type: fields.select({
+        label: 'Image width',
+        options: [
+          { label: 'Body', value: 'body' },
+          { label: 'Body Wide', value: 'bodyWide' },
+        ],
+        defaultValue: 'body',
+      }),
     },
   }),
   leadingText: component({

apps/site/src/components/component-blocks/components/article-body-image/article-body-image.component.tsx

@@ -1,12 +1,17 @@
+import { Item } from '@westpac/ui/grid';
+
 import { styles as ArticleBodyImageStyles } from './article-body-image.style';
 import { type ArticleBodyImageProps } from './article-body-image.types';
+import { layoutMap } from './article-body-image.utils';
 
-export const ArticleBodyImage = ({ articleBodyImage, alt, title }: ArticleBodyImageProps) => {
+export const ArticleBodyImage = ({ articleBodyImage, alt, title, type = 'body' }: ArticleBodyImageProps) => {
   const styles = ArticleBodyImageStyles({});
   return (
-    <figure className={styles.base({})}>
-      <img className={styles.img({})} loading="lazy" alt={alt} src={articleBodyImage} />
-      {title && <figcaption className={styles.caption({})}>{title}</figcaption>}
-    </figure>
+    <Item span={layoutMap[type].span} start={layoutMap[type].start}>
+      <figure className={styles.base({})}>
+        <img className={styles.img({})} loading="lazy" alt={alt} src={articleBodyImage} />
+        {title && <figcaption className={styles.caption({})}>{title}</figcaption>}
+      </figure>
+    </Item>
   );
 };

apps/site/src/components/component-blocks/components/article-body-image/article-body-image.style.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'relative mx-0 my-7 xsl:my-9 md:-mx-17',
+    base: 'relative mb-7 xsl:mb-9',
     img: 'block w-full',
     caption: 'typography-site-10 mt-2 text-gel-muted',
   },

apps/site/src/components/component-blocks/components/article-body-image/article-body-image.types.ts

@@ -1,5 +1,8 @@
+export type Width = 'body' | 'bodyWide';
+
 export type ArticleBodyImageProps = {
   alt?: string;
   articleBodyImage?: string;
   title?: string;
+  type?: Width;
 };

apps/site/src/components/component-blocks/components/article-body-image/article-body-image.utils.ts

@@ -0,0 +1,26 @@
+import { type Width } from './article-body-image.types';
+
+export const layoutMap: Record<Width, { span: object; start: object }> = {
+  body: {
+    span: {
+      initial: 12,
+      xsl: 10,
+      md: 8,
+    },
+    start: {
+      initial: 1,
+      xsl: 2,
+      md: 3,
+    },
+  },
+  bodyWide: {
+    span: {
+      initial: 12,
+      xsl: 10,
+    },
+    start: {
+      initial: 1,
+      xsl: 2,
+    },
+  },
+};

apps/site/src/components/component-blocks/components/leading-text/leading-text.style.ts

@@ -1,5 +1,5 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'typography-site-8 mx-0 mb-7 leading-[1.6] xsl:typography-site-7 xsl:mb-9 xsl:leading-[1.6] md:-mx-17',
+  base: 'typography-site-8 col-span-12 mx-0 mb-7 leading-[1.6] xsl:typography-site-7 xsl:col-span-10 xsl:col-start-2 xsl:mb-9 xsl:leading-[1.6]',
 });

apps/site/src/components/document-renderer/list/list.style.ts

@@ -2,8 +2,8 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'my-4 w-full p-0 leading-[2] last:mb-0',
-    li: 'relative mb-2 pl-[1.1875rem] leading-7',
+    base: 'w-full p-0 leading-[2] last:mb-0',
+    li: 'relative mb-2 leading-7',
   },
   variants: {
     color: {
@@ -16,18 +16,21 @@ export const styles = tv({
     },
     type: {
       ordered: {
-        base: 'list-decimal',
+        base: 'list-decimal ps-[1.25rem]',
+        li: 'last:mb-0',
       },
       unordered: {
         base: '',
-        li: 'leading-[2] before:absolute before:left-[0.25rem] before:top-[0.7rem] before:block before:h-[0.5rem] before:w-[0.5rem] before:rounded-full last:mb-0',
+        li: 'pl-[1.1875rem] leading-[2] before:absolute before:left-[0.25rem] before:top-[0.7rem] before:block before:h-[0.5rem] before:w-[0.5rem] before:rounded-full last:mb-0',
       },
     },
     fontFamily: {
       default: {
+        base: 'my-4',
         li: 'typography-body-9',
       },
       graphik: {
+        base: 'col-span-12 mb-7 xsl:col-span-10 xsl:col-start-2 xsl:mb-9 md:col-span-8 md:col-start-3 [&:has(+_p)]:mb-7',
         li: 'typography-site-9',
       },
     },

apps/site/src/components/document-renderer/paragraph/paragraph.style.ts

@@ -9,7 +9,8 @@ export const styles = tv({
     },
     type: {
       default: 'typography-body-9',
-      graphik: 'typography-site-9',
+      graphik:
+        'typography-site-9 col-span-12 mb-7 leading-[2] xsl:col-span-10 xsl:col-start-2 xsl:mb-9 md:col-span-8 md:col-start-3 [&:has(+_p,_+_ul,_+_ol)]:mb-2',
     },
   },
 });

apps/site/src/content/articles/collaborate-for-change/content.mdoc

@@ -27,7 +27,7 @@ When proposing a component change a strong business case is required as change m
 - Technical build in platform component libraries
 - Adoption across projects, touch-points and platforms
 
-{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1667029580/cl9tmdbnu000gf58idsyzgaiq.png" alt="The 5 stages of the process; request, review, feedback, approval and build." /%}
+{% articleBodyImage articleBodyImage="https://res.cloudinary.com/westpac-gel/image/upload/v1667029580/cl9tmdbnu000gf58idsyzgaiq.png" alt="The 5 stages of the process; request, review, feedback, approval and build." type="bodyWide" /%}
 
 ## Requesting component and pattern change