Merge pull request #817 from WestpacGEL/update-readme

update the develop with changes from main and update-readme

.changeset/mean-bears-mate.md

@@ -0,0 +1,8 @@
+---
+'site': minor
+'protoform': patch
+'@westpac/eslint-config': patch
+'@westpac/ui': patch
+---
+
+Snyk fixes

README.md

@@ -14,7 +14,7 @@ All GEL components have a couple of dependencies so please ensure the following
 
 ```
 npm i react@^18.2.0
-npm i -D tailwindcss postcss autoprefixer
+npm i -D tailwindcss@~3.3.2 postcss autoprefixer
 ```
 
 GEL is using [Tailwind](https://tailwindcss.com/) for styling. Visit the [Tailwind docs](https://tailwindcss.com/docs/installation/framework-guides) to learn more about installation and usage.

apps/protoform/package.json

@@ -12,7 +12,7 @@
     "@westpac/ui": "workspace:~",
     "clsx": "^1.2.1",
     "lodash.throttle": "~4.1.1",
-    "next": "14.2.3",
+    "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -24,10 +24,13 @@
     "@westpac/eslint-config": "workspace:~",
     "@westpac/ts-config": "workspace:~",
     "autoprefixer": "^10.0.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.0",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.2.4",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
+  },
+  "overrides": {
+    "json5": "1.0.2"
   }
 }

apps/site/package.json

@@ -11,15 +11,15 @@
     "check-types": "tsc --noemit --emitDeclarationOnly false"
   },
   "dependencies": {
-    "@keystatic/core": "^0.3.4",
-    "@keystatic/next": "^3.0.0",
-    "@vercel/postgres": "~0.5.1",
+    "@keystatic/core": "^0.5.26",
+    "@keystatic/next": "^5.0.1",
+    "@vercel/postgres": "~0.9.0",
     "@westpac/ui": "workspace:~",
     "clipboard-copy": "~4.0.1",
     "clsx": "^1.2.1",
     "framer-motion": "~10.12.16",
     "lodash.throttle": "~4.1.1",
-    "next": "^14.2.3",
+    "next": "^14.2.4",
     "prism-react-renderer": "~2.0.6",
     "prismjs": "~1.29.0",
     "react": "^18.2.0",
@@ -40,8 +40,8 @@
     "@westpac/eslint-config": "workspace:~",
     "@westpac/ts-config": "workspace:~",
     "autoprefixer": "~10.4.14",
-    "eslint": "^8.29.0",
-    "eslint-config-next": "13.1.1",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.2.4",
     "postcss": "~8.4.31",
     "tailwind-variants": "~0.1.13",
     "tailwindcss": "~3.3.2",

apps/site/src/app/(home)/components/action-bar/action-bar.component.tsx

@@ -16,8 +16,8 @@ export function ActionBar() {
   return (
     <StickyHeader>
       <GridContainer fixed className="px-4 lg:max-w-gel-lg-container lg:px-10">
-        <div className="hidden h-[6.375rem] items-end bg-white pb-2 sm:flex">
-          <div className="mr-4 flex h-full flex-col justify-end border-r-[1px] border-gel-border">
+        <div className="hidden h-17 items-end bg-white pb-2 sm:flex">
+          <div className="mr-4 flex h-full flex-col justify-end border-r border-gel-border">
             <GELLogo className="mb-2 block h-3 w-[45px] text-gel-text" />
             <p className="mb-1 flex items-end">
               Design System

apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx

@@ -46,7 +46,7 @@ export function BrandSelect(props: BrandSelectProps) {
       >
         <div className={styles.textWrapper()}>
           <div className="flex w-full items-end gap-[0.625rem] overflow-hidden text-ellipsis py-2" {...valueProps}>
-            <GELLogo className="w-[2.8125rem] shrink-0" />
+            <GELLogo className="w-7.5 shrink-0" />
             <span className="mb-[-0.2rem] shrink truncate leading-4">Design System</span>
           </div>
         </div>

apps/site/src/app/articles/[article]/components/header/header.component.tsx

@@ -9,14 +9,14 @@ import { StickyHeader } from '@/components/sticky-header';
 export function Header() {
   return (
     <StickyHeader>
-      <header className="flex h-9 items-end bg-[#C80038] xsl:h-11">
+      <header className="flex h-9 items-end bg-gel-primary xsl:h-11">
         <Link href="/">
           <div className="flex h-7 items-center xsl:h-9">
             <span className="flex w-8 items-center justify-center xsl:w-10">
               <ArrowLeftIcon className="text-white" />
             </span>
             <span className="flex h-full items-center border-l border-[rgba(255,255,255,0.8)] pl-3">
-              <GELLogo className="h-3 w-[2.8125rem] text-white xsl:h-4 xsl:w-10" />
+              <GELLogo className="h-3 w-7.5 text-white xsl:h-4 xsl:w-10" />
             </span>
           </div>
         </Link>

apps/site/src/app/design-system/[brand]/[...component]/components/content-tabs/components/intro/components/table-of-contents/table-of-contents.component.tsx

@@ -11,7 +11,7 @@ export function TableOfContents({ contents = [] }: TableOfContentsProps) {
   return (
     <nav>
       <h2 className="typography-body-9 border-b border-border pb-2 font-medium">Page content</h2>
-      <List icon={ArrowDownRightIcon} type="icon" look="primary" className="mt-3 [&_li]:my-[0.5625rem]">
+      <List icon={ArrowDownRightIcon} type="icon" look="primary" className="mt-3 [&_li]:my-1.5">
         {contents.map(({ title }) => {
           const id = title
             .replace(/[^a-zA-Z0-9\s]/g, '')

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

@@ -16,8 +16,8 @@ export function Tabs(props: AriaTabListProps<AriaTabProps>) {
   const { tabListProps } = useTabList(props, state, ref);
   return (
     <div>
-      <StickyHeader stickyPosition={HEADER_OFFSET} className="top-[4.125rem]" shadow="thin">
-        <div {...tabListProps} ref={ref} className="flex h-11 items-end bg-white sm:h-[5.625rem]">
+      <StickyHeader stickyPosition={HEADER_OFFSET} className="top-11" shadow="thin">
+        <div {...tabListProps} ref={ref} className="flex h-11 items-end bg-white sm:h-15">
           {[...state.collection].map(item => (
             <Tab key={item.key} item={item} state={state} />
           ))}

apps/site/src/app/design-system/[brand]/[...component]/components/header/header.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'sticky top-0 z-50 flex w-full items-center gap-2 bg-hero px-2 py-3.5 antialiased transition-colors sm:px-4 md:top-[-10.125rem] md:h-[14.25rem] md:items-end',
+      base: 'sticky top-0 z-50 flex w-full items-center gap-2 bg-hero px-2 py-3.5 antialiased transition-colors sm:px-4 md:-top-27 md:h-[14.25rem] md:items-end',
       gridButton: 'flex h-6 items-stretch gap-[0.125rem] p-1 focus-visible:focus-outline',
       gridButtonWrapper: 'fixed right-2 top-2 hidden items-center text-white sm:flex',
       hamburgerButton:
@@ -18,7 +18,7 @@ export const styles = tv(
         },
         false: {
           base: '',
-          title: 'md:typography-brand-2 md:px-2 md:pb-[1.6875rem] md:pt-5 md:leading-none lg:ml-2',
+          title: 'md:typography-brand-2 md:px-2 md:pb-4.5 md:pt-5 md:leading-none lg:ml-2',
         },
       },
       brand: {

apps/site/src/app/design-system/[brand]/page.tsx

@@ -119,7 +119,7 @@ export default function DesignSystemHomePage({ params }: { params: { brand: stri
       </Section>
       <Section background>
         <SectionHeading>Downloads &amp; links</SectionHeading>
-        <Grid className="mb-5 sm:mb-[3.375rem]">
+        <Grid className="mb-5 sm:mb-9">
           <SectionItem className="flex flex-col gap-2">
             <p className="leading-[2]">Design on-brand with greater efficiency and accuracy using the Sketch UI Kit.</p>
             <p className="leading-[2]">Visit GitHub to follow Westpac GEL Design System code updates and log issues.</p>
@@ -132,7 +132,7 @@ export default function DesignSystemHomePage({ params }: { params: { brand: stri
               <li className="border-b border-border">
                 <Link
                   href="/articles/figma-libraries"
-                  className="box-border flex min-h-[3.4375rem] items-center justify-between py-[1rem] outline-offset-[3px] outline-focus hover:text-primary hover:underline sm:min-h-[4.5rem] sm:py-[0.5625rem] sm:pr-[0.5625rem]"
+                  className="box-border flex min-h-[3.4375rem] items-center justify-between py-[1rem] outline-offset-[3px] outline-focus hover:text-primary hover:underline sm:min-h-[4.5rem] sm:py-1.5 sm:pr-1.5"
                 >
                   Figma UI Kits
                   <FigmaLogo />
@@ -147,7 +147,7 @@ export default function DesignSystemHomePage({ params }: { params: { brand: stri
                 <Link
                   href="https://github.com/WestpacGEL/GEL-next/"
                   target="_blank"
-                  className="box-border flex min-h-[3.4375rem] items-center justify-between py-[1rem] outline-offset-[3px] outline-focus hover:text-primary hover:underline sm:min-h-[4.5rem] sm:py-[0.5625rem] sm:pr-[0.5625rem]"
+                  className="box-border flex min-h-[3.4375rem] items-center justify-between py-[1rem] outline-offset-[3px] outline-focus hover:text-primary hover:underline sm:min-h-[4.5rem] sm:py-1.5 sm:pr-1.5"
                 >
                   Follow Westpac GEL on GitHub
                   <GithubIcon size={{ initial: 'large', lg: 'xlarge' }} color="text" />

apps/site/src/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts

@@ -7,7 +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',
-      popover: 'ml-[-0.75rem] w-[18.75rem]',
+      popover: '-ml-2 w-[18.75rem]',
       iconWrapper: 'flex items-center border-l border-l-border pl-4 text-primary',
       textWrapper: 'flex flex-1 items-center pr-2',
     },

apps/site/src/components/content-blocks/typography/typography.component.tsx

@@ -40,5 +40,5 @@ export function Link({
 }
 
 export function Code({ children }: { children?: React.ReactNode }) {
-  return <code className="bg-white px-[0.1875rem] font-monospace text-info">{children}</code>;
+  return <code className="bg-white px-0.5 font-monospace text-info">{children}</code>;
 }

apps/site/src/content/articles/banker-file-upload.yaml

@@ -0,0 +1,8 @@
+name: File upload
+thumbnail: {}
+image:
+  src: >-
+    https://res.cloudinary.com/westpac-gel/image/upload/v1695685237/clmzj7hwq001mvd8iairl9yoy.png
+  height: 1080
+  width: 1920
+author: Digital Experience

apps/site/src/content/articles/banker-file-upload/content.mdoc

@@ -0,0 +1,48 @@
+Use this pattern to allow new or existing business customers to provide their registered business address, principal place of business and business mailing addresses. These addresses are required for general contact information as well as to verify business identification.
+
+## What’s happening here?
+
+- **Home address.** A version of this pattern assumes that the customer's home address has already been captured as part of the personal details section of the application. The first question simplifies the process by asking if the home and business addresses are the same. There is also a version to use when the home address is not known.
+- **Pre-filling.** Each address is displayed sequentially, only showing the next question when the previous has been answered. Each question asks if it is the same address as the previous. This stops the user having to add the same address multiple times.
+- **Pre-filling.** The mailing address is captured by letting the customer either select from the addresses already provided in the application or by choosing to provide a new address.
+- **Auto/manual entry.** The address capture component allows the customer to either enter their address manually or use auto-complete to search and select it.
+
+## Why do we do it this way?
+
+### Reduce load
+
+If we have already captured customer information it is a better experience to use it, rather than ask for it again.
+
+### Empower customers
+
+Giving the customer the option to either search for their address, or to enter it manually gives them a sense of control.
+
+## Where does it sit in the sequence?
+
+Business address is generally captured just after identity check, along with all the other business details.
+
+## How do we want our customers to feel?
+
+After providing their address details, customers should feel delighted that the process felt so quick and easy and confident that they have provided what has been asked of them.
+
+## Looking for detailed designs?
+
+Here are links to detailed specifications of the pattern in Figma. This information is only available to Westpac Group employees:
+
+[Pattern guidelines - Business address](https://www.figma.com/proto/J2RDfHZfPY0Iz0PwgNfn2F/Forms-shell?page-id=716%3A5483&type=design&node-id=716-5484&viewport=-11058%2C3152%2C5.97&t=gYjpfddVneZItggE-1&scaling=scale-down-width&mode=design)
+
+## Related items
+
+- [Business industry](/articles/originations-business-industry)
+- [Celebration moment](/articles/originations-celebration-moment)
+- [Confirm profile](/articles/originations-confirm-profile)
+- [Contact details](/articles/originations-capture-contact-details)
+- Dashboard (Coming soon)
+- [Foreign tax residency](/articles/originations-foreign-tax-residency)
+- [Retrieve application](/articles/originations-retrieve-application)
+- Review (Coming soon)
+- [Select Business](/articles/originations-select-business)
+- [Set up Online Banking](/articles/originations-set-up-online-banking)
+- [Third party intro](/articles/originations-third-party-intro)
+- [Verify ID](/articles/originations-verify-ID)
+- [Back to Originations](/articles/originations-experience)

azure-pipelines.yml

@@ -52,7 +52,7 @@ stages:
                   --env SNYK_TOKEN \
                   --env DEBUG=1 \
                   -v $(Build.SourcesDirectory):/app \
-                  snyk/snyk:node-20 snyk ${SNYK_CMD} --all-projects --org=${SNYK_ORG_ID} --remote-repo-url=GEL-next --project-tags=applicationid=A00C6A,componenttype=ui,buildnumber=0.0.$(Build.BuildId)
+                  snyk/snyk:node-20 snyk ${SNYK_CMD} --severity-threshold=high --all-projects --org=${SNYK_ORG_ID} --remote-repo-url=GEL-next --project-tags=applicationid=A00C6A,componenttype=ui,buildnumber=0.0.$(Build.BuildId)
             env:
               SNYK_TOKEN: $(SNYK_TOKEN)
               SNYK_ORG_ID: $(SNYK_ORG_ID)

package.json

@@ -41,5 +41,12 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "typescript": "~5.1.6"
+  },
+  "pnpm": {
+    "overrides": {
+      "braces": "3.0.3",
+      "micromatch": "4.0.6",
+      "json5": "1.0.2"
+    }
   }
 }

packages/eslint-config/package.json

@@ -7,8 +7,8 @@
     "@rushstack/eslint-patch": "^1.2.0",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
-    "eslint": "^8.33.0",
-    "eslint-config-next": "^13.3.0",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.2.4",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-config-turbo": "^0.0.7",
@@ -18,7 +18,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-sonarjs": "^0.18.0",
-    "eslint-plugin-tailwindcss": "~3.13.0",
+    "eslint-plugin-tailwindcss": "^3.17.4",
     "eslint-plugin-typescript-sort-keys": "^2.3.0",
     "prettier": "^3.2.5"
   },
@@ -31,5 +31,9 @@
   },
   "peerDependencies": {
     "@types/node": "*"
+  },
+  "overrides": {
+    "micromatch": "4.0.6",
+    "braces": "3.0.3"
   }
 }

packages/ui/package.json

@@ -260,7 +260,7 @@
     "chokidar": "^3.5.3",
     "colorjs.io": "~0.4.5",
     "cross-env": "~7.0.3",
-    "eslint": "^7.32.0",
+    "eslint": "^8.56.0",
     "eslint-plugin-storybook": "~0.6.15",
     "glob": "~10.3.3",
     "jsdom": "^22.0.0",

packages/ui/src/components/filter/filter.stories.tsx

@@ -309,7 +309,7 @@ export const FilterWithContent = () => {
       <div>
         {filteredAccounts.map(({ title, id, payees }) => (
           <div key={id}>
-            <h3 className="mb-3 border-b-[1px] border-border pb-1 font-normal">{title}</h3>
+            <h3 className="mb-3 border-b border-border pb-1 font-normal">{title}</h3>
             {payees.map(({ name, number, paidAt, bank, code }) =>
               paidAt ? (
                 <FlexiCell

packages/ui/src/components/flexi-cell/flexi-cell.stories.tsx

@@ -484,7 +484,7 @@ export const PayeeList: Story = {
       <>
         {MOCK_PAYEES.map(({ title, id, payees }) => (
           <div key={id}>
-            <h3 className="mb-3 border-b-[1px] border-border pb-1 font-normal">{title}</h3>
+            <h3 className="mb-3 border-b border-border pb-1 font-normal">{title}</h3>
             {payees.map(({ name, initials, number, paidAt }) =>
               paidAt ? (
                 <FlexiCell
@@ -595,7 +595,7 @@ export const ForeinCurrencyPayeeList: Story = {
       <>
         {MOCK_FOREIGNPAYEES.map(({ title, id, payees }) => (
           <div key={id}>
-            <h3 className="mb-3 border-b-[1px] border-border pb-1 font-normal">{title}</h3>
+            <h3 className="mb-3 border-b border-border pb-1 font-normal">{title}</h3>
             {payees.map(({ name, number, paidAt, bank, code }) =>
               paidAt ? (
                 <FlexiCell

packages/ui/src/components/footer/footer.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative overflow-hidden border-t-[1px] border-t-border',
+      base: 'relative overflow-hidden border-t border-t-border',
       wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
       topRow: '',
       link: 'float-right block',

packages/ui/src/components/header/header.styles.ts

@@ -11,7 +11,7 @@ export const styles = tv(
       largeLogo: 'max-sm:hidden',
       leftContent: 'flex items-center',
       leftButton:
-        'my-1 border-r-[1px] border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
+        'my-1 border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
       rightContent: 'ml-auto flex items-center',
     },
     variants: {

packages/ui/src/components/popover/components/panel/panel.styles.ts

@@ -6,7 +6,7 @@ export const styles = tv(
       base: '',
       popover: 'absolute z-[999] rounded border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
       arrow:
-        'absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+        'absolute h-0 w-0 border-x-8 border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
       closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
       content: 'w-[17.625rem] py-4 pl-3 pr-5',
       heading: 'typography-body-9 mb-2 font-bold text-text',

packages/ui/src/components/progress-bar/progress-bar.styles.ts

@@ -10,8 +10,8 @@ export const styles = tv(
     variants: {
       look: {
         default: {
-          base: 'h-4 rounded-[1.5rem]',
-          innerBar: ' rounded-[1.5rem]',
+          base: 'h-4 rounded-3xl',
+          innerBar: ' rounded-3xl',
         },
         skinny: {
           base: 'h-[0.625rem] rounded-[0.625rem]',

packages/ui/src/components/progress-indicator/progress-indicator.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-y-[1px] border-l-[1px] border-r-0 border-t-[transparent]',
+    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-[transparent]',
     variants: {
       size: {
         xsmall: 'h-2 w-2',

packages/ui/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.styles.ts

@@ -6,7 +6,7 @@ export const styles = tv(
       base: '',
       circle: 'relative z-10 h-[14px] w-[14px] border-2 bg-white transition-colors',
       circleWrapper:
-        'typography-body-9 relative flex w-full cursor-pointer items-center gap-2 pb-[1.625rem] pt-1 leading-[1.428571429] transition-colors ',
+        'typography-body-9 relative flex w-full cursor-pointer items-center gap-2 pb-[1.625rem] pt-1 leading-loose transition-colors ',
       stepsWrapper: 'relative transition-all',
     },
     variants: {