Merge pull request #309 from WestpacGEL/feature/article-title-for-hom…

…e-page

Feature/article title for home page

apps/site/keystatic.config.ts

@@ -103,7 +103,16 @@ export default config({
         }),
         design: fields.array(
           fields.object({
-            title: fields.text({ label: 'Name' }),
+            title: fields.slug({
+              name: {
+                label: 'Title',
+                validation: {
+                  length: {
+                    min: 1,
+                  },
+                },
+              },
+            }),
             noTitle: fields.checkbox({ label: 'No title' }),
             content: fields.document({
               formatting: true,
@@ -116,13 +125,22 @@ export default config({
           }),
           {
             label: 'Design sections',
-            itemLabel: props => props.fields.title.value,
+            itemLabel: props => props.fields.title.value.name,
             slugField: 'title',
           },
         ),
         accessibility: fields.array(
           fields.object({
-            title: fields.text({ label: 'Name' }),
+            title: fields.slug({
+              name: {
+                label: 'Title',
+                validation: {
+                  length: {
+                    min: 1,
+                  },
+                },
+              },
+            }),
             content: fields.document({
               formatting: true,
               dividers: true,
@@ -132,7 +150,7 @@ export default config({
           }),
           {
             label: 'Accessibility sections',
-            itemLabel: props => props.fields.title.value,
+            itemLabel: props => props.fields.title.value.name,
             slugField: 'title',
           },
         ),
@@ -193,6 +211,9 @@ export default config({
             },
           },
         }),
+        cardTitle: fields.text({
+          label: 'Card title on the home page',
+        }),
         description: fields.text({
           label: 'Description',
           multiline: true,

apps/site/src/app/(home)/components/article-tile/article-tile.component.tsx

@@ -17,7 +17,7 @@ export function ArticleTile({ article, slug, className, layout, index }: Article
         </div>
       )}
       <div className={styles.contentWrapper({})}>
-        <h4 className={styles.title({})}>{article.name}</h4>
+        <h4 className={styles.title({})}>{article.cardTitle}</h4>
         <p className={styles.description({})}>{article.smallDescription}</p>
         <ArrowRightIcon className={styles.icon({})} />
       </div>

apps/site/src/app/design-system/[...component]/page.tsx

@@ -61,7 +61,7 @@ export default async function ComponentPage({ params }: { params: { component: s
             .content()
             .then(content => {
               resolve({
-                title: section.title,
+                title: section.title.name,
                 content: content,
                 noTitle: section.noTitle,
               });
@@ -83,7 +83,7 @@ export default async function ComponentPage({ params }: { params: { component: s
             .content()
             .then(content => {
               resolve({
-                title: section.title,
+                title: section.title.name,
                 content: content,
               });
               return {

apps/site/src/components/sticky-footer/sticky-footer.component.tsx

@@ -5,7 +5,7 @@ import { EmailIcon, GithubIcon } from '@westpac/ui/icon';
 import throttle from 'lodash.throttle';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useLayoutEffect, useState } from 'react';
+import { MouseEventHandler, useCallback, useLayoutEffect, useState } from 'react';
 
 import { UpIcon } from './components/up-icon';
 import { styles as footerStyles } from './sticky-footer.styles';
@@ -35,6 +35,11 @@ export function StickyFooter() {
     };
   }, []);
 
+  const handleOnClick: MouseEventHandler<HTMLButtonElement> = useCallback(ev => {
+    ev.preventDefault();
+    window?.scrollTo({ top: 0, behavior: 'smooth' });
+  }, []);
+
   return (
     <footer className={styles.footer()}>
       <div className="flex items-center">
@@ -49,10 +54,9 @@ export function StickyFooter() {
         </div>
       </div>
       <Button
-        tag="a"
-        href="#0"
         look="link"
         iconAfter={UpIcon}
+        onClick={handleOnClick}
         size="large"
         className={styles.button()}
         aria-label="Go to top"

apps/site/src/content/articles/accessible-by-design.yaml

@@ -1,4 +1,5 @@
 name: Accessible By Design
+cardTitle: Accessible By Design
 description: >-
   Let’s change the way we think about accessibility. Westpac’s Access and
   Inclusion Director, Majella Knobel notes “People assume accessibility is only

apps/site/src/content/articles/build-strong-brands.yaml

@@ -1,4 +1,5 @@
 name: Build strong brands
+cardTitle: Build strong brands
 description: >-
   We take a digital first approach to brand design including meeting
   accessibility standards to ensure our brands are optimised for all of our

apps/site/src/content/articles/code-with-gel.yaml

@@ -1,4 +1,5 @@
 name: Code with GEL
+cardTitle: Code with GEL
 thumbnail: >-
   https://res.cloudinary.com/westpac-gel/image/upload/v1663140016/cl81amh5c000mam8i3iuq5qt9.png
 smallDescription: Automate your environment, scale your projects and speed up your work flow with our cutting edge code library.

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

@@ -1,4 +1,5 @@
 name: 'Collaborate for change '
+cardTitle: 'Collaborate for change '
 description: >-
   Design system change has wide impact, whether it’s a brand change, a component
   or a pattern change so collaboration & early engagement are key.

apps/site/src/content/articles/colour.yaml

@@ -1,4 +1,5 @@
 name: Colour
+cardTitle: Colour
 description: >-
   Colour plays an important role in our lives. Our minds are programmed to
   respond to colour. We stop our cars for red lights and go on green. We see

apps/site/src/content/articles/data-visualisation.yaml

@@ -1,4 +1,5 @@
 name: Data visualisation
+cardTitle: DataViz for everyone
 description: >-
   In recent years our appetite for data has increased significantly. So too has
   the need for a consistent approach to data visualisation. This article is an

apps/site/src/content/articles/design-with-gel.yaml

@@ -1,4 +1,5 @@
 name: Design with GEL
+cardTitle: Design with GEL
 description: >-
   You’ve got grand ideas! You’re up to speed on all the latest AI, AR, VR, and
   hardware technology. You’re excited to push the boundaries of what’s possible

apps/site/src/content/articles/figma-libraries.yaml

@@ -1,4 +1,5 @@
 name: Figma Libraries
+cardTitle: Figma Libraries
 description: >-
   The Figma Libraries are a complete set of multi-brand, accessible design
   assets to help you create high quality, consistent, experiences across all our

apps/site/src/content/articles/gel-design-approach.yaml

@@ -1,4 +1,5 @@
 name: GEL design approach
+cardTitle: GEL design approach
 description: >-
   The greatest value the GEL Design System can offer is re-use and consistency.
   We provide quality, re-usable solutions so that you have more time to focus on

apps/site/src/content/articles/iconography.yaml

@@ -1,4 +1,5 @@
 name: Iconography
+cardTitle: Iconography
 description: >-
   Our global visual language is shared across all our brands. We have a library
   of carefully crafted user interface icons for use in our designs. This article

apps/site/src/content/articles/motion-principles.yaml

@@ -1,4 +1,5 @@
 name: Motion principles
+cardTitle: Motion principles
 description: >-
   It can be difficult to deliver consistent experiences that feel on-brand, are
   accessible, and serve a purpose without following some guiding principles.

apps/site/src/content/articles/multi-brand-made-easy.yaml

@@ -1,4 +1,5 @@
 name: Multi-brand made easy
+cardTitle: Multi-brand made easy
 description: >-
   We’re a truly multi-brand organisation, which is why being able to create
   individually branded customer experiences while re-using our technical

apps/site/src/content/articles/patterns.yaml

@@ -1,4 +1,5 @@
 name: Patterns
+cardTitle: Patterns
 description: >-
   UX and UI patterns, are recurring design solutions and best practices that
   address common problems and challenges in user interface and interaction

apps/site/src/content/articles/test.yaml

@@ -1,4 +1,5 @@
 name: test
+cardTitle: test
 description: test
 thumbnail: /images/articles/test/thumbnail.png
 smallDescription: /images/articles/test/smallDescription.png

apps/site/src/content/articles/the-grid.yaml

@@ -1,4 +1,5 @@
 name: The Grid
+cardTitle: The Grid
 description: >-
   In recent years we’ve seen a fundamental shift in the hardware our customers
   use to access information and services online. New devices are being

apps/site/src/content/articles/think-responsive.yaml

@@ -1,4 +1,5 @@
 name: Think responsive
+cardTitle: Think responsive
 description: >-
   An increasing number of people are accessing information and services on their
   mobile devices. New devices are being introduced every day. We can’t keep

apps/site/src/content/articles/typography.yaml

@@ -1,4 +1,5 @@
 name: Typography
+cardTitle: Typography
 description: "There’s no disputing the power of typography. It has a huge influence on brand perception and recognition. Good typography not only differentiates a brand but also communicates the brand’s style, personality and tone of voice. This article explains how we use typography as part of our multi-brand system.\L\L"
 thumbnail: >-
   https://res.cloudinary.com/westpac-gel/image/upload/v1663139139/cl81a3o5k000iam8ib3zxgea6.png

apps/site/src/content/articles/using-fonts.yaml

@@ -1,4 +1,5 @@
 name: Using Fonts
+cardTitle: Using fonts online
 description: >-
   Using fonts today is fairly straight forward, however there are some
   complexities and requirements that should be addressed before jumping in. This

apps/site/src/content/articles/value-of-a-design-system.yaml

@@ -1,4 +1,5 @@
 name: Value of a design system
+cardTitle: Value of a design system
 description: >-
   The value of a design system is well documented and has roots in manufacturing
   and construction dating back centuries. In our digital world, and for Westpac

apps/site/src/content/articles/what-is-gel.yaml

@@ -1,4 +1,5 @@
 name: What is GEL?
+cardTitle: What is GEL?
 description: >-
   The Global Experience Language is our single source of truth, providing
   everything you need to deliver our brand promises and create consistent,

apps/site/src/content/design-system/accessibility/colour-vision-impairment/index.yaml

@@ -4,6 +4,10 @@ description: >-
   colour blindness and from 0.5-1% of all females. This is something that
   effects many of our customers, regardless of age.
 design:
-  - title: What is a colour vision impairment?
-  - title: Colour contrast testing
+  - title:
+      name: What is a colour vision impairment?
+      slug: what-is-a-colour-vision-impairment
+  - title:
+      name: Colour contrast testing
+      slug: colour-contrast-testing
 accessibility: []

apps/site/src/content/design-system/accessibility/design-system-accessibility/index.yaml

@@ -5,10 +5,22 @@ description: >-
   of product delivery. The following areas need to be considered when designing
   for accessibility and inclusion.
 design:
-  - title: Principles of accessibility
-  - title: Inclusive product design
-  - title: Inclusive content writing
-  - title: Accessible interfaces
-  - title: Accessibility testing
-  - title: Deprecated components
+  - title:
+      name: Principles of accessibility
+      slug: principles-of-accessibility
+  - title:
+      name: Inclusive product design
+      slug: inclusive-product-design
+  - title:
+      name: Inclusive content writing
+      slug: inclusive-content-writing
+  - title:
+      name: Accessible interfaces
+      slug: accessible-interfaces
+  - title:
+      name: Accessibility testing
+      slug: accessibility-testing
+  - title:
+      name: Deprecated components
+      slug: deprecated-components
 accessibility: []

apps/site/src/content/design-system/components/accordion/index.yaml

@@ -3,12 +3,28 @@ description: >-
   Tabcordions are grouped sets of tabbed or accordion style panels. Use them to
   group and simplify large amounts of content such as product information.
 design:
-  - title: Accordion
-  - title: User experience
-  - title: Visual design
-  - title: Dos and don’ts
+  - title:
+      name: Accordion
+      slug: accordion
+  - title:
+      name: User experience
+      slug: user-experience
+  - title:
+      name: Visual design
+      slug: visual-design
+  - title:
+      name: Dos and don’ts
+      slug: dos-and-donts
 accessibility:
-  - title: Notes on accessibility
-  - title: Accessibility features
-  - title: Keyboard support
-  - title: Accessibility API
+  - title:
+      name: Notes on accessibility
+      slug: notes-on-accessibility
+  - title:
+      name: Accessibility features
+      slug: accessibility-features
+  - title:
+      name: Keyboard support
+      slug: keyboard-support
+  - title:
+      name: Accessibility API
+      slug: accessibility-api

apps/site/src/content/design-system/components/alert/index.yaml

@@ -3,14 +3,32 @@ description: >-
   Alerts use a cross-brand palette of reserved, contextual colours providing a
   flexible, consistent message system for common user interactions.
 design:
-  - title: Alert boxes
-  - title: Alert text
-  - title: User experience
-  - title: Visual design
-  - title: Dos and don’ts
+  - title:
+      name: Alert boxes
+      slug: alert-boxes
+  - title:
+      name: Alert text
+      slug: alert-text
+  - title:
+      name: User experience
+      slug: user-experience
+  - title:
+      name: Visual design
+      slug: visual-design
+  - title:
+      name: Dos and don’ts
+      slug: dos-and-donts
 accessibility:
-  - title: Notes on accessibility
-  - title: Accessibility features
-  - title: Keyboard support
-  - title: Accessibility API
+  - title:
+      name: Notes on accessibility
+      slug: notes-on-accessibility
+  - title:
+      name: Accessibility features
+      slug: accessibility-features
+  - title:
+      name: Keyboard support
+      slug: keyboard-support
+  - title:
+      name: Accessibility API
+      slug: accessibility-api
 relatedInformation: []

apps/site/src/content/design-system/components/badge/index.yaml

@@ -4,12 +4,28 @@ description: >-
   be used as a number count, to highlight a word or give context to an action
   needed.
 design:
-  - title: Badge styles
-  - title: User experience
-  - title: Visual design
-  - title: Dos and don’ts
+  - title:
+      name: Badge styles
+      slug: badge-styles
+  - title:
+      name: User experience
+      slug: user-experience
+  - title:
+      name: Visual design
+      slug: visual-design
+  - title:
+      name: Dos and don’ts
+      slug: dos-and-donts
 accessibility:
-  - title: Notes on accessibility
-  - title: Accessibility features
-  - title: Keyboard support
-  - title: Accessibility API
+  - title:
+      name: Notes on accessibility
+      slug: notes-on-accessibility
+  - title:
+      name: Accessibility features
+      slug: accessibility-features
+  - title:
+      name: Keyboard support
+      slug: keyboard-support
+  - title:
+      name: Accessibility API
+      slug: accessibility-api