Merge pull request #240 from WestpacGEL/feature/importing-articles

Feature/importing articles

apps/site/keystatic.config.ts

@@ -200,6 +200,12 @@ export default config({
           directory: 'public/images/articles',
           publicPath: '/images/articles',
         }),
+        smallDescription: fields.image({
+          label: 'Small description',
+          description: 'Small description that goes along with the thumbnail',
+          directory: 'public/images/articles',
+          publicPath: '/images/articles',
+        }),
         image: fields.image({
           label: 'Main Image',
           description: 'Main image',

apps/site/next.config.js

@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: false,
+  images: {
+    domains: ['res.cloudinary.com'],
+  },
 };

apps/site/package.json

@@ -7,6 +7,7 @@
     "dev": "next dev",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "check-types": "tsc --noemit --emitDeclarationOnly false"
   },
   "dependencies": {

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

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

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

@@ -1,8 +1,18 @@
 name: 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
+  about the 18% of people with disability. But everyone, to some extent, will
+  experience what it’s like to live with disability. It could be a change in
+  eyesight, an injured wrist or a recovery from surgery. Disability and
+  accessibility requirements will impact all of us at some point in our
+  lifetime.”
+thumbnail: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1666333819/cl9i44qb7000wtc8ihnxv08ex.png
+smallDescription: >-
   The Westpac Group is committed to creating products that are perceivable,
   operable, understandable, and robust for all users. Inclusive design is part
   of our dna.
-thumbnail: /images/articles/accessible-by-design/thumbnail.png
-image: /images/articles/accessible-by-design/image.png
+image: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1666333853/cl9i45goa000xtc8i8wgx5cu2.png
 author: michael-colibraro

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

@@ -0,0 +1,14 @@
+name: 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
+  customers. This approach helps us to deliver consistent brand experiences
+  across all channels.
+thumbnail: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1667097999/cl9ur3rp6000tf58i5s7y3ote.png
+smallDescription: >-
+  Create consistent, on brand journeys to strengthen brand recognition and
+  trust.
+image: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1665993797/cl9chovs7000htc8igwry11s4.jpg
+author: marita-purins

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

@@ -0,0 +1,36 @@
+Our digital brands have been designed using a multi-brand, responsive and accessible design system.
+
+The foundations of our digital brands such as [colours](/articles/colour), [fonts](/articles/typography), [icons](/articles/iconography), [pictograms](/articles/pictograms) and the [responsive grid](/articles/the-grid), along with the most commonly used interface elements, are specified in the design system, which is the single source of truth for the Groups brands within the digital space.
+
+The design system delivers our digital brands in React, Vanilla HTML CSS and tokens to help us efficiently manage 6 brands and service multiple technologies and platforms across the organisation. Each brand’s code can also be leveraged by front-end developers to build multi-brand, responsive and accessible solutions with greater brand consistency and quality at speed, with less effort.
+
+Digital brand compliance
+------------------------
+
+We have 3 approaches to achieve digital brand compliance. This gives projects the flexibility to tailor the GEL features that best suit their requirements. For example; Project X is using a 3rd party web service with it's own codebase, therefore a Level 1 engagement is probably all that's required.
+
+### Level 1
+
+Getting the basics right. All projects need to align with Level 1 to be visually brand compliant. To achieve this level means you have used the correct colours, fonts and basic UI elements - presenting our brands to customers more consistently across different platforms and touch-points.
+
+Aligning to these design guidelines means no more wasted time determining or discussing button colours and corner radiuses – its all taken care of.
+
+Native apps tend to use this level so they can optimise their solutions using the native platform controls.
+
+### Level 2
+
+This is where you start realising the benefits of using the design system. When implemented correctly, the design system supports you to design a solution once and have it will work across any brand (with some small tweaks).
+
+Using the grid to create responsive designs will mean your project can also work on almost any screen size. This ensures efficiency, scalability and most of all productivity.
+
+One design, multiple brands and multiple devices.
+
+This is used by web based projects that need to create and configure their own code rather than consuming code directly from the GEL design system.
+
+### Level 3
+
+This is where things get really interesting. At level 3, not only are you fully brand aligned, multi-brand and responsive; by integrating with the GEL design system you’ll also benefit from the use of the developer tool kits and the ability to use code straight from the design system.
+
+So, as well as increasing the speed which your project can be created, it also means that any future branding and accessibility updates can be simpler, save time and money now and in the future.
+
+[Access the design system for the digital brand foundationsCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/colours)

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

@@ -0,0 +1,13 @@
+name: Code with GEL
+description: >-
+  The GEL coding framework has been built with serviceability in mind,
+  supporting multiple platforms across the Bank that may use different
+  libraries, languages and coding technologies.
+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.
+image: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1663300551/cl83y79gg0013am8iddv886ry.jpg
+author: marita-purins

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

@@ -0,0 +1,40 @@
+The GEL design system provides the foundations you need to build accessible, multi-brand solutions that work across any device.
+
+**ReactJS**
+
+Prefabricated components, optimised for performance, scalability and accessibility.
+
+**HTML CSS**
+
+Vanilla solution to support teams to integrate with their preferred JavaScript language.
+
+**Design tokens**
+
+Basic core elements of the system which provide an accurate representation of brand including colours, fonts and font sizes, spacing and breakpoints. Token formats include JSON, LESS, CSS, SCSS/SASS. 
+
+There are 3 levels of GEL design system adoption
+------------------------------------------------
+
+#### Level 1: Follow the specifications
+
+Achieve brand compliance.
+
+In this scenario, you can use the GEL design system documentation and design tokens to achieve brand compliance.
+
+#### Level 2: Adopt the design system and principles
+
+Achieve brand compliance and scalability.
+
+In this scenario, you can use the design system docs and apply the multi-brand, responsive principles to achieve scalability and brand consistency in your project.
+
+#### Level 3: Integrate with the framework
+
+Achieve brand compliance, scalability and speed.
+
+In this scenario, you can consume the React JS or vanilla HTML code in your project to increase the speed at which your project can be created, and simplify future branding and accessibility updates.
+
+[Read more about the levels of design system adoption](/articles/build-strong-brands)
+
+[Access the design systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system)
+
+[Get started using the GEL design systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/development/get-started?b=WBC)

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

@@ -0,0 +1,10 @@
+name: '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.
+thumbnail: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1666855413/cl9qqobm6000cf58idusod3xr.png
+smallDescription: Considered change made collaboratively achieves the best results.
+image: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1663227077/cl82qghhn000tam8ia8c6gxjs.jpg
+author: marita-purins

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

@@ -0,0 +1,77 @@
+Change impacts the customer journey and brand experience as well as project funding and prioritisation. Since many platforms, touch-points and teams are impacted, we take an evidence based approach to global change to prove the value of making change across the Group.
+
+Balancing many perspectives
+---------------------------
+
+The enterprise GEL Design System is created in collaboration with teams across the Group to ensure it balances the various requirements of the business including branding, accessibility, experience design and usability, technology and operations.
+
+We work with Brand to ensure that our brand changes are optimised for digital so that we can achieve a more consistent brand experience across the entire brand ecosystem including non-digital channels.
+
+We also help brands to meet accessibility standards to ensure that we optimise our brands for all customers including those with vision impairments. Digital and accessibility first design ensures that all channels can provide a consistent and aligned brand experience.
+
+Working with the Experience Design, Access & Inclusion and Technology teams, we can understand individual touchpoint and platform considerations so that we can achieve global solutions which can significantly increase project team velocity and ability to scale solutions.
+
+The system evolves to include valuable global components and patterns to serve many teams across the enterprise.
+
+We facilitate the exploration of shared design and development problems across the digital channel. Our intention is to align teams to and provide a truly global, best practice solution for inclusion in the system, to continue to deliver customer and business value.
+
+Governing change
+----------------
+
+Since multiple teams across the Bank are impacted by change in the design system, these teams are key to driving change decisions to ensure we maintain a strategic, enterprise approach. Change requests will go through a process and will also need to meet GEL quality standards to be accepted.
+
+When proposing a component change a strong business case is required as change must go through a comprehensive process of:
+
+*   Senior stakeholder engagement and approval
+*   Accessibility testing
+*   Requirements and co-design with impacted teams
+*   Technical build in the design system
+*   Technical build in platform component libraries 
+*   Adoption across projects, touch-points and platforms
+
+![The 5 stages of the process; request, review, feedback, approval and build.](https://res.cloudinary.com/westpac-gel/image/upload/v1667029580/cl9tmdbnu000gf58idsyzgaiq.png)
+
+Requesting component and pattern change
+---------------------------------------
+
+To consider a global component change would need to determine if there is a business or customer challenge to solve proven through data and research insights and if there is a usability or accessibility issue presenting an application risk down the line.
+
+### Research & insights
+
+To make a global change due diligence must be completed as change impacts many teams. When we have evidence of the problem or opportunity, proposed change can be assessed and value versus effort understood. This helps our impacted teams to agree a way forward.
+
+We must have data to qualify a problem as change not impacts many other projects, platforms and stakeholders, for the investment made in change we need to be able to measure success.
+
+For this we would need to take an objective approach and identify how we can gather evidence to validate the problem.
+
+We need to understand the behaviour you are trying to influence, the different customer types and the context the customer is operating in.
+
+### Accessibility standards
+
+If a problem is validated with evidence, the GEL team can facilitate accessibility testing to assist us to meet the Group commitment. We must ensure that all customers can apply for products and access the digital banking platforms. This will take priority in our approach.
+
+### GEL collaborative approach
+
+If a problem is validated with evidence, as part of standard process, we would include other teams in the conversation to ensure their requirements are met and the best global solution is agreed.
+
+We take a rigorous, best practice, production & development inclusive approach to interface design, prioritising criteria such as:
+
+*   Masterbrand alignment and brand consistency
+*   Group accessibility goals and standards
+*   Re-usable design and code
+*   Modular design
+*   Product and context agnostic design
+*   Usability principles
+*   Multi-brand
+*   Scalability
+*   Optimise for build and maintenance efficiencies
+*   Performance
+*   Browser compliance
+*   Multi-lingual
+*   Legibility
+
+If you have a design problem you think is a problem shared we’ll investigate its potential to become a global solution.
+
+You can help us improve and evolve the Design System by raising bugs and suggestions in our [Github pageCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://github.com/WestpacGEL/GEL/issues).
+
+To help us continuously improve our design patterns you can send your feedback to [[email protected] © 2023 by Westpac Banking Corporation. All rights reserved.](mailto:[email protected]).

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

@@ -0,0 +1,14 @@
+name: 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
+  colour before we see form. This article explains why we have a colour system
+  and how to apply it to your designs.
+thumbnail: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1666755294/cl9p32exi0004u48idenu5zh8.png
+smallDescription: >-
+  Speed up your workflow, ensure you're on brand and stay accessible with our
+  multi-brand colour system.
+image: >-
+  https://res.cloudinary.com/westpac-gel/image/upload/v1666069890/cl9dqztwo000jtc8iarv46fe1.png
+author: justin-spencer

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

@@ -0,0 +1,56 @@
+**Colour in brand**
+-------------------
+
+There’s no disputing the significance of colour in branding. Many of the world’s most recognisable brands rely on colour for instant recognition. Colour increases brand recognition by up to 80% _(Source: University of Loyola, Maryland study)_
+
+Each brand in the Westpac Group uses a unique colour palette as part of its identity. These colours permeate across every touchpoint in the customer journey. The correct use of these colours plays a crucial role in brand recognition and customer experience. When the colour palette is not applied correctly the integrity of the brand is diluted and the customer journey fragmented.
+
+**Colour in the user interface**
+--------------------------------
+
+Applying each of the brand colour palettes in the the digital space comes with its own set of design challenges and opportunities.
+
+### **Challenges include:**
+
+1.  Accessibility requirements.
+2.  Multi-brand - shared code base requirements.
+
+### **Opportunities include:**
+
+1.  Contextualising colour, giving it meaning, purpose and function.
+2.  Applying colour dynamically using code and automated tasks.
+
+The Design System provides a flexible, multi-brand colour system which enables us to map each brand palette to a set of core contextual colours. Each of the core colours has a defined purpose and function.
+
+Using the colour system (as part of the Design System) allows us to automate the rollout of multi-brand applications. Being an automated system, design and development time is significantly reduced, as is the margin for error.
+
+Further more, in the event of a re-brand or brand refresh the colour system allows us to quickly and accurately update and deploy new colour palettes. The same would apply when adding new brands to the system. However, for any of this to work effectively it’s important that brand agencies collaborate with the Digital Design Quality team.
+
+The practical application of the colour system encourages consistency across all user interfaces which strengthens brand recognition, creates a consistent user journey and provides a positive customer experience.
+
+**How it works**
+----------------
+
+The Colour system is a collection of carefully considered variables (or tokens) designed to work in unison. In consultation with each brand we developed a unique set of corresponding colour values all rigorously tested to ensure brand alignment and guarantee the user interface remained accessible in every possible scenario.
+
+When we reference these colours in our applications we don’t specify the explicit colour value, instead we reference the colours variable (or token). For example the _Primary colour_ in Westpac is #DA1710 (fig 1) however in Rams it’s #047DBC. Our application only needs to know that the _Primary colour_ is being used, the value of that colour is irrelevant.
+
+### **Secondary palette**
+
+Some of the brands also use a secondary palette however the colour system does not currently map the secondary palette. These colours are bespoke and can be used in many different ways depending on the brand guidelines. Typically the secondary palette is used for things like data visualisation, graphs, charts, illustration etc. The guidelines around the correct use of the secondary palette are brand specific.
+
+### **Reserved Colours**
+
+The Westpac group has a set of reserved, contextual colours used only for messaging (success, information, warning and danger). These colours are used across all our brands. They’re purely functional and have no relevance to the brand. They should never be used for anything other than messaging.
+
+### **Tints**
+
+Each brand has a neutral colour with a set of 11 tints for subtle colouring. Several of these tints are already used in the primary palette for borders and backgrounds etc. The remaining tints can be used for additional colouring if required.
+
+[View the colour systemCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://gel.westpacgroup.com.au/design-system/foundation/colours)
+
+### **Accessibility**
+
+The Westpac group have committed to comply with WCAG 2.1 AA standards. This is both a social responsibility and a legal requirement. As a result, key colours and colour combinations have been rigorously tested to ensure contrast ratios comply with WCAG standards. The Design System’s colour section contains a basic guide to accessibility for each brand, however, we still encourage designers to always check colour contrast ratios during the design phase. The [Colour Contrast AnalyserCopyright © 2023 by Westpac Banking Corporation. All rights reserved.](https://www.paciellogroup.com/resources/contrastanalyser/) is a useful tool for this purpose.
+
+The [Accessibility Matters](/articles/accessible-by-design) article provides more in-depth information on accessibility.