Merge pull request #484 from WestpacGEL/fixes/image-captions

fixes/image caption styling

apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 
 import { Container } from '@/app/design-system/components';
 import { Colors } from '@/components/component-blocks/colors/colors.component';
+import { ImageCaption } from '@/components/component-blocks/components/image-caption';
 import { Icons } from '@/components/component-blocks/icons/icons.component';
 import { Logos } from '@/components/component-blocks/logos/logos.component';
 import { Pictograms } from '@/components/component-blocks/pictograms/pictograms.component';
@@ -47,6 +48,7 @@ export function DesignContent({ designSections, description, relatedComponents,
                   pictograms: () => <Pictograms />,
                   symbols: () => <Symbols />,
                   colors: props => <Colors palette={props.palette} />,
+                  imageCaption: props => <ImageCaption text={props.text} />,
                 }}
               />
             </Container>

apps/site/src/components/component-blocks/components/image-caption/image-caption.component.tsx

@@ -0,0 +1,6 @@
+import { styles } from './image-caption.style';
+import { type ImageCaptionProps } from './image-caption.types';
+
+export const ImageCaption = ({ text }: ImageCaptionProps) => {
+  return <p className={styles({})}>{text}</p>;
+};

apps/site/src/components/component-blocks/components/image-caption/image-caption.preview.tsx

@@ -0,0 +1,11 @@
+import { component, fields } from '@keystatic/core';
+
+export const imageCaption = component({
+  label: 'Image Caption',
+  preview: props => <>{props.fields.text.value || ''}</>,
+  schema: {
+    text: fields.text({
+      label: 'Image Caption',
+    }),
+  },
+});

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

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'typography-body-10 mb-5 mt-2 text-muted',
+});

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

@@ -0,0 +1,3 @@
+export type ImageCaptionProps = {
+  text?: string;
+};

apps/site/src/components/component-blocks/components/image-caption/index.ts

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

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

@@ -1,4 +1,5 @@
 import { colors } from './colors/colors.preview';
+import { imageCaption } from './components/image-caption/image-caption.preview';
 import { icons } from './icons/icons.preview';
 import { logos } from './logos/logos.preview';
 import { pictograms } from './pictograms/pictograms.preview';
@@ -10,4 +11,5 @@ export const foundationBlocks = {
   logos,
   pictograms,
   symbols,
+  imageCaption,
 };

apps/site/src/content/design-system/components/button/design/user-experience/content.mdoc

@@ -6,4 +6,4 @@ Make sure buttons are an appropriate distance to the corresponding object or fun
 
 ![Two sets of 9 dots. First set shows 3 stacks of 3 dots evenly and closely aligned, labelled ‘Related’. Second set shows 2 stacks of 3 dots evenly and closely aligned, with a third stack placed further away labelled ‘Unrelated’. ](https://res.cloudinary.com/westpac-gel/image/upload/v1603867704/5f99143728dd13161ae76fdb.png)
 
-Gestalt law of proximity
+{% imageCaption text="Gestalt law of proximity" /%}

apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc

@@ -4,7 +4,7 @@ For example:
 
 ![Two examples of calls to action that are short and action oriented.](https://res.cloudinary.com/westpac-gel/image/upload/v1667894142/cla7x3vj6001ef58icgubfckf.png)
 
-Use short, action oriented calls to action
+{% imageCaption text="Use short, action oriented calls to action" /%}
 
 _Note: No full stops in CTAs but fine to use question marks._
 

apps/site/src/content/design-system/content/guidelines/empty-state/design/empty-states/content.mdoc

@@ -5,4 +5,4 @@ When creating messages for empty states:
 
 ![Two images showing empty states for linking an account or searching for something.](https://res.cloudinary.com/westpac-gel/image/upload/v1669959576/clb62taq40000bn8iasgdewap.png)
 
-Provide clear direction when displaying an empty state
+{% imageCaption text="Provide clear direction when displaying an empty state" /%}

apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc

@@ -76,7 +76,7 @@ For example:
 
 ![Two mobile screens showing examples of how to provide context for the next steps required of the user.](https://res.cloudinary.com/westpac-gel/image/upload/v1667893974/cla7x09o6001df58if3zg4kxp.png)
 
-Ensure you provide clear direction and context
+{% imageCaption text="Ensure you provide clear direction and context" /%}
 
 Don’t assume that a customer knows what to do. If a customer can’t do something with your message, you may like to rethink why you’re saying it.
 
@@ -86,7 +86,7 @@ For example:
 
 ![Two mobile screens showing two different states of a question flow. The first screen hiding further questions based on a previous answer, the second displaying them.](https://res.cloudinary.com/westpac-gel/image/upload/v1667962659/cla91wg22001kf58idlvq7efj.png)
 
-Only show what the customer needs to know
+{% imageCaption text="Only show what the customer needs to know" /%}
 
 ---
 

apps/site/src/content/design-system/foundation/icon/design/user-experience/content.mdoc

@@ -8,4 +8,4 @@ Here is an example of where icons may be misinterpreted, the heart icon is used
 
 ![](https://res.cloudinary.com/westpac-gel/image/upload/v1603867525/5f99138328dd13161ae76fda.png)
 
-Same icon used in three different apps with three different meanings
+{% imageCaption text="Same icon used in three different apps with three different meanings" /%}