fix examples code

WestpacGEL · Dec 8, 2023 · 6136eee · 6136eee
1 parent 2503b0f
commit 6136eee
Show file tree

Hide file tree

Showing 13 changed files with 211 additions and 25 deletions.
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
@@ -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/...c/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts b/...c/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
@@ -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
@@ -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
@@ -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<string>();
+  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' && (
         <Alert>
-          {/* 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.
         </Alert>
       )}
     </Fragment>

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
@@ -24,23 +24,116 @@ _**Important:** @westpac/grid uses CSS Grid and is not supported by Internet Exp
 ### Transposed
 
 ```tsx
-// TODO: Write the example
+<Grid>
+  <Item rowSpan={2} span={2} className="bg-primary-20 p-2 text-center text-primary">
+    1
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    2
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    3
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    4
+  </Item>
+  <Item rowSpan={5} span={2} className="bg-primary-20 p-2 text-center text-primary">
+    5
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    6
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    7
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    8
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    9
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    10
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    11
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    12
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    13
+  </Item>
+  <Item rowSpan={2} span={2} className="bg-primary-20 p-2 text-center text-primary">
+    14
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    15
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    16
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    17
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    18
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    19
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    20
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    21
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    22
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    23
+  </Item>
+  <Item span={2} className="bg-primary-20 p-2 text-center text-primary">
+    24
+  </Item>
+</Grid>
 ```
 
 ### Offset
 
 ```tsx
-// TODO: Write the example
-```
-
-### Areas
-
-```tsx
-// TODO: Write the example
+<Grid>
+  <Item span={4} className="bg-primary-20 p-2 text-center text-primary">
+    Top Left
+  </Item>
+  <Item start={9} span={4} className="bg-primary-20 p-2 text-center text-primary">
+    Top Right
+  </Item>
+  <Item start={5} span={4} className="bg-primary-20 p-2 text-center text-primary">
+    Middle
+  </Item>
+  <Item start={1} span={4} className="bg-primary-20 p-2 text-center text-primary">
+    Bottom Left
+  </Item>
+  <Item start={9} span={4} className="bg-primary-20 p-2 text-center text-primary">
+    Bottom Right
+  </Item>
+</Grid>
 ```
 
 ### Responsive
 
 ```tsx
-// TODO: Write the example
+<Grid>
+  <Item span={{ initial: 12, xsl: 6, sm: 4, md: 3, lg: 2 }} className="bg-primary-20 p-2 text-center text-primary">
+    {`{ initial: 12, xsl: 6, sm: 4, md: 3, lg: 2 }`}
+  </Item>
+  <Item span={{ initial: 12, xsl: 10, sm: 6, md: 10, lg: 12 }} className="bg-primary-20 p-2 text-center text-primary">
+    {`{ initial: 12, xsl: 10, sm: 6, md: 10, lg: 12 }`}
+  </Item>
+  <Item span={{ initial: 12, xsl: 8, sm: 3, md: 6, lg: 4 }} className="bg-primary-20 p-2 text-center text-primary">
+    {`{ initial: 12, xsl: 8, sm: 3, md: 6, lg: 4 }`}
+  </Item>
+</Grid>
 ```
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
@@ -7,5 +7,11 @@
 ### Re-sizing
 
 ```tsx
-// TODO: write the examples
+<Fragment>
+  <ComponentTitle>Resize by width</ComponentTitle>
+  <MastercardAcceptedSymbol />
+  <hr className="border-t border-t-border my-4" />
+  <ComponentTitle>Responsive width resize</ComponentTitle>
+  <MastercardAcceptedSymbol className="h-auto w-5 sm:w-10 md:w-20 lg:w-30" />
+</Fragment>
 ```
diff --git a/...ite/src/content/design-system/foundation/pictogram/code/development-examples/content.mdoc b/...ite/src/content/design-system/foundation/pictogram/code/development-examples/content.mdoc
@@ -1,5 +1,11 @@
 ### Body text styling
 
 ```tsx
-// TODO: write example
+<Fragment>
+  <ComponentTitle>Resize by width</ComponentTitle>
+  <DriversLicencePictogram />
+  <hr className="border-t border-t-border my-4" />
+  <ComponentTitle>Responsive width resize</ComponentTitle>
+  <DriversLicencePictogram className="h-auto w-5 sm:w-10 md:w-20 lg:w-30" />
+</Fragment>
 ```
diff --git a/.../src/content/design-system/foundation/text-styling/code/development-examples/content.mdoc b/.../src/content/design-system/foundation/text-styling/code/development-examples/content.mdoc
@@ -1,7 +1,63 @@
-```tsx
-<DesktopComputerPictogram />
-```
+### Body text styling
 
 ```tsx
-// TODO: write the examples
+<Fragment>
+  <div className="text-heading font-bold flex flex-col gap-3 mb-4">
+    <h1 className="typography-body-5">Heading 1</h1>
+    <h2 className="typography-body-6">Heading 2</h2>
+    <h3 className="typography-body-7">Heading 3</h3>
+    <h4 className="typography-body-8">Heading 4</h4>
+    <h5 className="typography-body-9">Heading 5</h5>
+    <h6 className="typography-body-10">Heading 6</h6>
+  </div>
+  <Body>
+    <p>
+      <strong>Paragraph</strong>
+    </p>
+    <p>The baseline body text.</p>
+    <Hr />
+    <p>
+      <strong>Link</strong>
+    </p>
+    <a href="#" className="underline text-primary">
+      Link a snippet of text
+    </a>
+    . The default text styling being underlined and primary colour.
+    <Hr />
+    <p>
+      <strong>Small</strong>
+    </p>
+    <p>
+      <small>De-emphasise</small> inline or blocks of text.
+    </p>
+    <Hr />
+    <p>
+      <strong>Strong</strong>
+    </p>
+    <p>
+      <strong>Emphasise a snippet of text.</strong> The default text styling being a heavier font weight.
+    </p>
+    <Hr />
+    <p>
+      <strong>Emphasis</strong>
+    </p>
+    <p>
+      <em>Emphasise a snippet of text.</em> The default text styling being italics.
+    </p>
+    <Hr />
+    <p>
+      <strong>Mark</strong>
+    </p>
+    <p>
+      <mark className="bg-primary-20">Highlight</mark> a portion of text.
+    </p>
+    <Hr />
+    <p>
+      <strong>Del/Ins</strong>
+    </p>
+    <p>
+      Show changes by marking up what has been <del>deleted</del> and what has been <ins>inserted</ins>.
+    </p>
+  </Body>
+</Fragment>
 ```
diff --git 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
@@ -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 (
-    <Tag className={styles({ span, start, className })} {...props}>
+    <Tag className={styles({ span, rowSpan, start, className })} {...props}>
       {children}
     </Tag>
   );

diff --git 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
@@ -6,6 +6,10 @@ import { styles } from './item.styles.js';
 type Variants = VariantProps<typeof styles>;
 
 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
    */