Merge pull request #296 from WestpacGEL/feature/article-figcaption

Feature/article figcaption

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

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

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

@@ -1,13 +1,12 @@
 import { component, fields } from '@keystatic/core';
-import { DocumentRenderer } from '@keystatic/core/renderer';
 
 import { ArticleBodyImage } from './components/article-body-image';
 import { LeadingText } from './components/leading-text';
 
 export const ArticleComponentBlocks = {
   // EXAMPLES:
   articleBodyImage: component({
-    label: 'Hero Image',
+    label: 'Article body image',
     preview: props => (
       <img
         className="w-1/3"
@@ -22,14 +21,17 @@ export const ArticleComponentBlocks = {
     ),
     schema: {
       articleBodyImage: fields.image({
-        label: 'Hero Image',
-        description: 'Hero image',
+        label: 'Image',
+        description: 'image',
         directory: 'public/images/articles',
         publicPath: '/images/articles',
       }),
       alt: fields.text({
         label: 'Alt text',
       }),
+      title: fields.text({
+        label: 'Title',
+      }),
     },
   }),
   leadingText: component({

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

@@ -1,11 +1,12 @@
 import { styles as ArticleBodyImageStyles } from './article-body-image.style';
 import { type ArticleBodyImageProps } from './article-body-image.types';
 
-export const ArticleBodyImage = ({ articleBodyImage, alt }: ArticleBodyImageProps) => {
+export const ArticleBodyImage = ({ articleBodyImage, alt, title }: 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>
   );
 };

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

@@ -4,6 +4,6 @@ export const styles = tv({
   slots: {
     base: 'relative mx-0 my-7 xsl:my-9 md:-mx-17',
     img: 'block w-full',
-    caption: 'typography-body-10 mt-2 text-muted',
+    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,4 +1,5 @@
 export type ArticleBodyImageProps = {
   alt?: string;
   articleBodyImage?: string;
+  title?: string;
 };

apps/site/src/components/document-renderer/layout/layout.component.tsx

@@ -4,7 +4,7 @@ import { type LayoutProps } from './layout.types';
 
 export const Layout = ({ children, layout }: LayoutProps) => {
   return (
-    <Grid>
+    <Grid className="mb-7 mt-6 xsl:mb-10 xsl:mt-9">
       {children.map((child, index) => (
         <Item span={{ initial: 12, sm: layout[index] as any }} key={index}>
           {child}

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

@@ -8,15 +8,11 @@ From an accessibility perspective supporting data is your friend. Put simply; su
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![Horizontal bar chart showing an example data visualisation of annual spending](https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png)
-
-Fig.1 Data visualisation
+![Horizontal bar chart showing an example data visualisation of annual spending](https://res.cloudinary.com/westpac-gel/image/upload/v1668056696/claalvz8j001yf58i3mo76q1y.png "Fig.1 Data visualisation")
 {% /layout-area %}
 
 {% layout-area %}
-![Example of the supporting data required to communicate this chart.](https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png)
-
-Fig.2 Supporting data
+![Example of the supporting data required to communicate this chart.](https://res.cloudinary.com/westpac-gel/image/upload/v1668139956/clabzgicq0032f58ib8q8ehap.png "Fig.2 Supporting data")
 {% /layout-area %}
 {% /layout %}
 
@@ -26,15 +22,11 @@ Fig.3 (below) shows our lovely colourful pie chart. All the colours in this char
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png)
-
-Fig.3
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056723/claalwk7k0020f58i8e526pbn.png "Fig.3")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png)
-
-Fig.4
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056738/claalwvod0021f58i4chj6gkx.png "Fig.4")
 {% /layout-area %}
 {% /layout %}
 
@@ -44,15 +36,11 @@ To make our pie chart accessible we have to display the supporting data as shown
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png)
-
-Fig.5
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056754/claalx85w0022f58i5eso4q56.png "Fig.5")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png)
-
-Fig.6
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668056820/claalymzx0024f58iafpm4xzk.png "Fig.6")
 {% /layout-area %}
 {% /layout %}
 
@@ -62,15 +50,11 @@ These charts only use one category and therefore do not require a key. Providing
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png)
-
-Fig.7
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057373/claamahe90025f58i4mau2je8.png "Fig.7")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png)
-
-Fig.8
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668057973/claamncos0027f58i037eed43.png "Fig.8")
 {% /layout-area %}
 {% /layout %}
 
@@ -116,45 +100,33 @@ To give you some context, the following examples show how these colours are appl
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655524/clakieydu003xf58i1tvl7376.png)
-
-Fig.9
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655524/clakieydu003xf58i1tvl7376.png "Fig.9")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655540/clakifafp003yf58i6lpvhu10.png)
-
-Fig.10
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655540/clakifafp003yf58i6lpvhu10.png "Fig.10")
 {% /layout-area %}
 {% /layout %}
 
 The comparison chart in fig.11 shows how a tint is used with its corresponding solid colour (fig.12) and the area chart in fig.13 shows how the transparent colours are used with their corresponding solid colours (fig 14).
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655182/claki7mi1003rf58i3tup4ubm.png)
-
-Fig.11
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655182/claki7mi1003rf58i3tup4ubm.png "Fig.11")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655193/claki7ut2003sf58i83rp6epv.png)
-
-Fig.12
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655193/claki7ut2003sf58i83rp6epv.png "Fig.12")
 {% /layout-area %}
 {% /layout %}
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655302/clakia6by003uf58i1u8pc5y5.png)
-
-Fig.13
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655302/clakia6by003uf58i1u8pc5y5.png "Fig.13")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655322/clakiambr003vf58i2o7gb914.png)
-
-Fig.14
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668655322/clakiambr003vf58i2o7gb914.png "Fig.14")
 {% /layout-area %}
 {% /layout %}
 
@@ -164,9 +136,7 @@ We just looked at where to use these colours. Now we’re going to look at when
 
 The first 4 colours (A–D) are the main set and should ALWAYS be the first choice. The last 2 colours (E–F) are backup colours and must ONLY be used as a last resort for charts that require more than 4 categories.
 
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668141281/clac08xt60033f58i13sya6es.png)
-
-Fig.15
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668141281/clac08xt60033f58i13sya6es.png "Fig.15")
 
 Incorrect use of these colours will dilute the consistency and integrity of the brand. If you’re unsure how to apply these colours or have any concerns please ask your design principle for help. We also recommend informing the business whenever you use the backup colours in charts as they are strictly governed, and only for use in edge-case scenarios.
 
@@ -182,15 +152,11 @@ Always use colours from the main set before using colours from the backup set.
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137247/clabxugfj002rf58ic1e8civz.png)
-
-Fig.16
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137247/clabxugfj002rf58ic1e8civz.png "Fig.16")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137812/claby6kak002vf58ig262gyco.png)
-
-Fig.17
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137812/claby6kak002vf58ig262gyco.png "Fig.17")
 {% /layout-area %}
 {% /layout %}
 
@@ -200,15 +166,11 @@ Avoid using the tint (or transparent) variations on their own. As mentioned earl
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139231/clabz1005002yf58icsfzf6by.png)
-
-Fig.18
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139231/clabz1005002yf58icsfzf6by.png "Fig.18")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139502/clabz6t3c0030f58ifh9o0bde.png)
-
-Fig.19
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139502/clabz6t3c0030f58ifh9o0bde.png "Fig.19")
 {% /layout-area %}
 {% /layout %}
 
@@ -218,15 +180,11 @@ Only use the tint (and transparent) variations with their corresponding solid co
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137869/claby7sm3002wf58ibvhq5cu0.png)
-
-Fig 20
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668137869/claby7sm3002wf58ibvhq5cu0.png "Fig.20")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139527/clabz7bov0031f58iaifvhbqp.png)
-
-Fig.21
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668139527/clabz7bov0031f58iaifvhbqp.png "Fig.21")
 {% /layout-area %}
 {% /layout %}
 
@@ -238,15 +196,11 @@ Fig.23 below shows a simple Westpac line graph. This graph uses colour C from th
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650799/clakflnvh003lf58ibe6u08ab.png)
-
-Fig.23
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650799/clakflnvh003lf58ibe6u08ab.png "Fig.23")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650815/clakfm0ne003mf58i0pxk0la6.png)
-
-Fig.24
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668650815/clakfm0ne003mf58i0pxk0la6.png "Fig.24")
 {% /layout-area %}
 {% /layout %}
 
@@ -288,15 +242,11 @@ If you want to take advantage of this system, using either of these colours (A o
 
 {% layout layout=[6, 6] %}
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651525/clakg18oj003nf58id9wr0o81.png)
-
-Fig.25
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651525/clakg18oj003nf58id9wr0o81.png "Fig.25")
 {% /layout-area %}
 
 {% layout-area %}
-![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651562/clakg214l003of58iesjaah4j.png)
-
-Fig.26
+![](https://res.cloudinary.com/westpac-gel/image/upload/v1668651562/clakg214l003of58iesjaah4j.png "Fig.26")
 {% /layout-area %}
 {% /layout %}