From 6136eee226b6fe8156c683a56a85481ddaad893b Mon Sep 17 00:00:00 2001 From: Kenji Shiroma Date: Fri, 8 Dec 2023 13:01:51 +1000 Subject: [PATCH] fix examples code --- .../brand-select/brand-select.styles.ts | 2 - .../sidebar-select/sidebar-select.styles.ts | 2 - .../src/app/design-system/hooks/use-brand.ts | 9 ++ .../components/code/code.inject-components.ts | 2 +- .../tax-file-number/tax-file-number.demo.tsx | 8 +- .../code/development-examples/content.mdoc | 111 ++++++++++++++++-- .../code/development-examples/content.mdoc | 8 +- .../code/development-examples/content.mdoc | 8 +- .../code/development-examples/content.mdoc | 64 +++++++++- apps/site/tailwind.config.ts | 6 + .../grid/components/item/item.component.tsx | 4 +- .../grid/components/item/item.styles.ts | 8 ++ .../grid/components/item/item.types.ts | 4 + 13 files changed, 211 insertions(+), 25 deletions(-) create mode 100644 apps/site/src/app/design-system/hooks/use-brand.ts diff --git a/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts b/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts index add128b48..d9fd1eac5 100644 --- a/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts +++ b/apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts @@ -7,9 +7,7 @@ export const styles = tv( label: 'block cursor-default text-left text-sm font-medium text-text', button: 'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden pt-1.5 outline-none focus:focus-outline', - // TODO: this is a workaround to align, but need to find a better way. popover: 'w-full', - // icon: 'text-primary transition-transform', iconWrapper: 'pointer-events-none mb-[-0.4rem] flex flex-shrink-0 touch-none items-center text-primary', textWrapper: 'flex flex-shrink items-center overflow-hidden pr-2', }, diff --git a/apps/site/src/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts b/apps/site/src/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts index 0bd8550dc..cf9be8056 100644 --- a/apps/site/src/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts +++ b/apps/site/src/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts @@ -7,9 +7,7 @@ export const styles = tv( label: 'block cursor-default text-left text-sm font-medium text-text', button: 'relative flex h-11 cursor-pointer flex-row items-stretch overflow-hidden pl-3 pr-4 shadow-sm outline-none', - // TODO: this is a workaround to align, but need to find a better way. popover: 'ml-[-0.75rem] w-[18.75rem]', - // icon: 'text-primary transition-transform', iconWrapper: 'flex items-center border-l border-l-border pl-4 text-primary', textWrapper: 'flex flex-1 items-center pr-2', }, diff --git a/apps/site/src/app/design-system/hooks/use-brand.ts b/apps/site/src/app/design-system/hooks/use-brand.ts new file mode 100644 index 000000000..7ba1c2ee6 --- /dev/null +++ b/apps/site/src/app/design-system/hooks/use-brand.ts @@ -0,0 +1,9 @@ +import { useSearchParams } from 'next/navigation'; + +import { BANK_OPTIONS } from '@/constants/bank-options'; + +export function useBrand() { + const searchParams = useSearchParams(); + const brand = searchParams.get('brand') ?? 'wbc'; + return BANK_OPTIONS.find(({ key }) => key === brand); +} diff --git a/apps/site/src/components/code/code.inject-components.ts b/apps/site/src/components/code/code.inject-components.ts index 6033d4a14..530a0ae23 100644 --- a/apps/site/src/components/code/code.inject-components.ts +++ b/apps/site/src/components/code/code.inject-components.ts @@ -1,6 +1,6 @@ import Link from 'next/link'; -export { DesktopComputerPictogram } from '@westpac/ui/pictogram'; +export { DesktopComputerPictogram, DriversLicencePictogram } from '@westpac/ui/pictogram'; export { MastercardAcceptedSymbol, WBCLogo } from '@westpac/ui/symbol'; diff --git a/apps/site/src/components/code/components/demos/tax-file-number/tax-file-number.demo.tsx b/apps/site/src/components/code/components/demos/tax-file-number/tax-file-number.demo.tsx index 0f61b9b90..1ae52d25d 100644 --- a/apps/site/src/components/code/components/demos/tax-file-number/tax-file-number.demo.tsx +++ b/apps/site/src/components/code/components/demos/tax-file-number/tax-file-number.demo.tsx @@ -1,8 +1,11 @@ import { Alert, Field, Form, Input, Select } from '@westpac/ui'; import { Fragment, useState } from 'react'; +import { useBrand } from '@/app/design-system/hooks/use-brand'; + export const TaxFileNumberPattern = ({ showPrevious = false, showErrors = false }) => { const [value, setValue] = useState(); + const brand = useBrand(); const error = showErrors ? 'Error message goes here if activated' : ''; const invalid = showErrors; @@ -60,9 +63,8 @@ export const TaxFileNumberPattern = ({ showPrevious = false, showErrors = false )} {value === 'provide-later' && ( - {/* TODO: BRand.Name */} - You can provide your TFN at any time via phone or at a BRAND.name branch. In the meantime, please note, we may - need to withhold tax from any interest you earn. + You can provide your TFN at any time via phone or at a {brand?.label} branch. In the meantime, please note, we + may need to withhold tax from any interest you earn. )} diff --git a/apps/site/src/content/design-system/foundation/grid/code/development-examples/content.mdoc b/apps/site/src/content/design-system/foundation/grid/code/development-examples/content.mdoc index d2fafe0fd..f739e7956 100644 --- a/apps/site/src/content/design-system/foundation/grid/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/foundation/grid/code/development-examples/content.mdoc @@ -24,23 +24,116 @@ _**Important:** @westpac/grid uses CSS Grid and is not supported by Internet Exp ### Transposed ```tsx -// TODO: Write the example + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 10 + + + 11 + + + 12 + + + 13 + + + 14 + + + 15 + + + 16 + + + 17 + + + 18 + + + 19 + + + 20 + + + 21 + + + 22 + + + 23 + + + 24 + + ``` ### Offset ```tsx -// TODO: Write the example -``` - -### Areas - -```tsx -// TODO: Write the example + + + Top Left + + + Top Right + + + Middle + + + Bottom Left + + + Bottom Right + + ``` ### Responsive ```tsx -// TODO: Write the example + + + {`{ initial: 12, xsl: 6, sm: 4, md: 3, lg: 2 }`} + + + {`{ initial: 12, xsl: 10, sm: 6, md: 10, lg: 12 }`} + + + {`{ initial: 12, xsl: 8, sm: 3, md: 6, lg: 4 }`} + + ``` diff --git a/apps/site/src/content/design-system/foundation/logo/code/development-examples/content.mdoc b/apps/site/src/content/design-system/foundation/logo/code/development-examples/content.mdoc index 218589c42..8a3ca76b6 100644 --- a/apps/site/src/content/design-system/foundation/logo/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/foundation/logo/code/development-examples/content.mdoc @@ -7,5 +7,11 @@ ### Re-sizing ```tsx -// TODO: write the examples + + Resize by width + +
+ Responsive width resize + + ``` diff --git a/apps/site/src/content/design-system/foundation/pictogram/code/development-examples/content.mdoc b/apps/site/src/content/design-system/foundation/pictogram/code/development-examples/content.mdoc index 421125296..f3d467f5f 100644 --- a/apps/site/src/content/design-system/foundation/pictogram/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/foundation/pictogram/code/development-examples/content.mdoc @@ -1,5 +1,11 @@ ### Body text styling ```tsx -// TODO: write example + + Resize by width + +
+ Responsive width resize + + ``` diff --git a/apps/site/src/content/design-system/foundation/text-styling/code/development-examples/content.mdoc b/apps/site/src/content/design-system/foundation/text-styling/code/development-examples/content.mdoc index 07a7d0b5e..790e2a44b 100644 --- a/apps/site/src/content/design-system/foundation/text-styling/code/development-examples/content.mdoc +++ b/apps/site/src/content/design-system/foundation/text-styling/code/development-examples/content.mdoc @@ -1,7 +1,63 @@ -```tsx - -``` +### Body text styling ```tsx -// TODO: write the examples + +
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ +

+ Paragraph +

+

The baseline body text.

+
+

+ Link +

+ + Link a snippet of text + + . The default text styling being underlined and primary colour. +
+

+ Small +

+

+ De-emphasise inline or blocks of text. +

+
+

+ Strong +

+

+ Emphasise a snippet of text. The default text styling being a heavier font weight. +

+
+

+ Emphasis +

+

+ Emphasise a snippet of text. The default text styling being italics. +

+
+

+ Mark +

+

+ Highlight a portion of text. +

+
+

+ Del/Ins +

+

+ Show changes by marking up what has been deleted and what has been inserted. +

+ + ``` diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts index f80a2f284..0a250b4af 100644 --- a/apps/site/tailwind.config.ts +++ b/apps/site/tailwind.config.ts @@ -97,6 +97,12 @@ const config: Config = withGEL({ 'w-6/12', 'w-7/12', 'w-5/12', + 'row-span-2', + 'w-5', + 'sm:w-10', + 'md:w-20', + 'lg:w-30', + 'w-auto', ], plugins: [SitePlugin], options: { diff --git a/packages/ui/src/components/grid/components/item/item.component.tsx b/packages/ui/src/components/grid/components/item/item.component.tsx index da9c8be1d..2fe40e9ee 100644 --- a/packages/ui/src/components/grid/components/item/item.component.tsx +++ b/packages/ui/src/components/grid/components/item/item.component.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { styles } from './item.styles.js'; import { type ItemProps } from './item.types.js'; -export function Item({ className, tag: Tag = 'div', span, start, children, ...props }: ItemProps) { +export function Item({ className, tag: Tag = 'div', span, rowSpan, start, children, ...props }: ItemProps) { return ( - + {children} ); diff --git a/packages/ui/src/components/grid/components/item/item.styles.ts b/packages/ui/src/components/grid/components/item/item.styles.ts index 485a8df12..3cacbe735 100644 --- a/packages/ui/src/components/grid/components/item/item.styles.ts +++ b/packages/ui/src/components/grid/components/item/item.styles.ts @@ -4,6 +4,14 @@ export const styles = tv( { base: '', variants: { + rowSpan: { + 1: 'row-span-1', + 2: 'row-span-2', + 3: 'row-span-3', + 4: 'row-span-4', + 5: 'row-span-5', + 6: 'row-span-6', + }, span: { 1: 'col-span-1', 2: 'col-span-2', diff --git a/packages/ui/src/components/grid/components/item/item.types.ts b/packages/ui/src/components/grid/components/item/item.types.ts index 6a7c6c26b..10da674ed 100644 --- a/packages/ui/src/components/grid/components/item/item.types.ts +++ b/packages/ui/src/components/grid/components/item/item.types.ts @@ -6,6 +6,10 @@ import { styles } from './item.styles.js'; type Variants = VariantProps; export type ItemProps = { + /** + * Controls height of item based on amount of grid spaces to cover + */ + rowSpan?: Variants['rowSpan']; /** * Controls width of item based on amount of grid spaces to cover */