From 5efccca68ead6246407891d9a05004dde3d4695c Mon Sep 17 00:00:00 2001 From: Tom King Date: Thu, 7 Dec 2023 16:18:05 +1000 Subject: [PATCH] - added image caption content block - updated image captions in certain areas --- .../design-content/design-content.component.tsx | 2 ++ .../image-caption/image-caption.component.tsx | 6 ++++++ .../image-caption/image-caption.preview.tsx | 11 +++++++++++ .../components/image-caption/image-caption.style.ts | 5 +++++ .../components/image-caption/image-caption.types.ts | 3 +++ .../components/image-caption/index.ts | 2 ++ .../components/component-blocks/foundation-blocks.tsx | 2 ++ .../button/design/user-experience/content.mdoc | 2 +- .../design/calls-to-action/content.mdoc | 2 +- .../empty-state/design/empty-states/content.mdoc | 2 +- .../design/writing-tips/content.mdoc | 4 ++-- .../icon/design/user-experience/content.mdoc | 2 +- 12 files changed, 37 insertions(+), 6 deletions(-) create mode 100644 apps/site/src/components/component-blocks/components/image-caption/image-caption.component.tsx create mode 100644 apps/site/src/components/component-blocks/components/image-caption/image-caption.preview.tsx create mode 100644 apps/site/src/components/component-blocks/components/image-caption/image-caption.style.ts create mode 100644 apps/site/src/components/component-blocks/components/image-caption/image-caption.types.ts create mode 100644 apps/site/src/components/component-blocks/components/image-caption/index.ts diff --git a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx b/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx index 32ac788cc..8f1da2096 100644 --- a/apps/site/src/app/design-system/[...component]/components/content-tabs/components/design-content/design-content.component.tsx +++ b/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: () => , symbols: () => , colors: props => , + imageCaption: props => , }} /> diff --git a/apps/site/src/components/component-blocks/components/image-caption/image-caption.component.tsx b/apps/site/src/components/component-blocks/components/image-caption/image-caption.component.tsx new file mode 100644 index 000000000..0239211cf --- /dev/null +++ b/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

{text}

; +}; diff --git a/apps/site/src/components/component-blocks/components/image-caption/image-caption.preview.tsx b/apps/site/src/components/component-blocks/components/image-caption/image-caption.preview.tsx new file mode 100644 index 000000000..7772551c7 --- /dev/null +++ b/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', + }), + }, +}); diff --git a/apps/site/src/components/component-blocks/components/image-caption/image-caption.style.ts b/apps/site/src/components/component-blocks/components/image-caption/image-caption.style.ts new file mode 100644 index 000000000..68160e296 --- /dev/null +++ b/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', +}); diff --git a/apps/site/src/components/component-blocks/components/image-caption/image-caption.types.ts b/apps/site/src/components/component-blocks/components/image-caption/image-caption.types.ts new file mode 100644 index 000000000..64a85afc2 --- /dev/null +++ b/apps/site/src/components/component-blocks/components/image-caption/image-caption.types.ts @@ -0,0 +1,3 @@ +export type ImageCaptionProps = { + text?: string; +}; diff --git a/apps/site/src/components/component-blocks/components/image-caption/index.ts b/apps/site/src/components/component-blocks/components/image-caption/index.ts new file mode 100644 index 000000000..b1e72d043 --- /dev/null +++ b/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'; diff --git a/apps/site/src/components/component-blocks/foundation-blocks.tsx b/apps/site/src/components/component-blocks/foundation-blocks.tsx index b7d1a98f8..dbac8c10b 100644 --- a/apps/site/src/components/component-blocks/foundation-blocks.tsx +++ b/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, }; diff --git a/apps/site/src/content/design-system/components/button/design/user-experience/content.mdoc b/apps/site/src/content/design-system/components/button/design/user-experience/content.mdoc index 20c4636fc..7952120ba 100644 --- a/apps/site/src/content/design-system/components/button/design/user-experience/content.mdoc +++ b/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" /%} diff --git a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc b/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc index a9a5dc5bb..f3f771f32 100644 --- a/apps/site/src/content/design-system/content/guidelines/calls-to-action-ctas/design/calls-to-action/content.mdoc +++ b/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._ diff --git a/apps/site/src/content/design-system/content/guidelines/empty-state/design/empty-states/content.mdoc b/apps/site/src/content/design-system/content/guidelines/empty-state/design/empty-states/content.mdoc index a13cb5846..809b2f153 100644 --- a/apps/site/src/content/design-system/content/guidelines/empty-state/design/empty-states/content.mdoc +++ b/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" /%} diff --git a/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc b/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc index 0267059e7..fb154c835 100644 --- a/apps/site/src/content/design-system/content/writing-for-digital/design/writing-tips/content.mdoc +++ b/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" /%} --- diff --git a/apps/site/src/content/design-system/foundation/icon/design/user-experience/content.mdoc b/apps/site/src/content/design-system/foundation/icon/design/user-experience/content.mdoc index 7241bb7d0..3a897f97a 100644 --- a/apps/site/src/content/design-system/foundation/icon/design/user-experience/content.mdoc +++ b/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" /%} \ No newline at end of file