@westpac/ui 0.5.0 → 0.7.0

package/.storybook/global.css

@@ -1,3 +1,108 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* BOM fonts */
+@font-face {
+  src: url('/fonts/lineto-brown-pro-light.woff2') format('woff2'),
+    url('/fonts/lineto-brown-pro-light.woff') format('woff');
+  font-family: 'Brown Pro';
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/lineto-brown-pro-regular.woff2') format('woff2'),
+    url('/fonts/lineto-brown-pro-regular.woff') format('woff');
+  font-family: 'Brown Pro';
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/lineto-brown-pro-bold.woff2') format('woff2'),
+    url('/fonts/lineto-brown-pro-bold.woff') format('woff');
+  font-family: 'Brown Pro';
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* BSA fonts */
+@font-face {
+  src: url('/fonts/Aller_Lt.woff2') format('woff2'), url('/fonts/Aller_Lt.woff') format('woff');
+  font-family: 'Aller';
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/Aller_Bd.woff2') format('woff2'), url('/fonts/Aller_Bd.woff') format('woff');
+  font-family: 'Aller';
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* RAMS fonts */
+@font-face {
+  src: url('/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'),
+    url('/fonts/source-sans-pro-v14-latin-regular.woff') format('woff');
+  font-family: 'Source Sans Pro';
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'),
+    url('/fonts/source-sans-pro-v14-latin-600.woff') format('woff');
+  font-family: 'Source Sans Pro';
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/source-sans-pro-v14-latin-700.woff2') format('woff2'),
+    url('/fonts/source-sans-pro-v14-latin-700.woff') format('woff');
+  font-family: 'Source Sans Pro';
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* STG fonts */
+@font-face {
+  src: url('/fonts/dragonbold-bold-webfont.woff2') format('woff2'),
+    url('/fonts/dragonbold-bold-webfont.woff') format('woff');
+  font-family: 'Dragon Bold';
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* WBC fonts */
+@font-face {
+  src: url('/fonts/Westpac-Bold-v2.007.woff2') format('woff2'), url('/fonts/Westpac-Bold-v2.007.woff') format('woff');
+  font-family: 'Westpac';
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* WBG fonts */
+@font-face {
+  src: url('/fonts/montserrat-v14-latin-300.woff2') format('woff2'),
+    url('/fonts/montserrat-v14-latin-300.woff') format('woff');
+  font-family: 'Montserrat';
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/montserrat-v14-latin-regular.woff2') format('woff2'),
+    url('/fonts/montserrat-v14-latin-regular.woff') format('woff');
+  font-family: 'Montserrat';
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  src: url('/fonts/montserrat-v14-latin-700.woff2') format('woff2'),
+    url('/fonts/montserrat-v14-latin-700.woff') format('woff');
+  font-family: 'Montserrat';
+  font-weight: 700;
+  font-style: normal;
+}
+
+
+body {
+  @apply typography-body-10;
+}

package/.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -18,6 +18,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: 'tag',
   },
+  staticDirs: ['../assets/storybook'],
   async viteFinal(config) {
     return mergeConfig(config, {
       optimizeDeps: {

package/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme: theme,
+});

package/.storybook/preview.tsx

@@ -5,12 +5,57 @@ import * as React from 'react';
 const withThemeProvider = (Story, context) => {
   const theme = context.globals?.theme || 'WBC';
   return (
-    <div data-theme={theme.toLowerCase()}>
+    <div data-theme={theme.toLowerCase()} className="p-4">
       <Story />
     </div>
   );
 };
 
+const systemViewports = {
+  xs: {
+    name: 'XS',
+    styles: {
+      width: '375px',
+      height: '801px',
+    },
+  },
+  xsl: {
+    name: 'XSL',
+    styles: {
+      width: '576px',
+      height: '801px',
+    },
+  },
+  sm: {
+    name: 'SM',
+    styles: {
+      width: '768px',
+      height: '801px',
+    },
+  },
+  md: {
+    name: 'MD',
+    styles: {
+      width: '992px',
+      height: '801px',
+    },
+  },
+  lg: {
+    name: 'LG',
+    styles: {
+      width: '1200px',
+      height: '801px',
+    },
+  },
+  xl: {
+    name: 'XL',
+    styles: {
+      width: '1900px',
+      height: '801px',
+    },
+  },
+};
+
 const preview: Preview = {
   globalTypes: {
     theme: {
@@ -35,6 +80,10 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    layout: 'fullscreen',
+    viewport: {
+      viewports: systemViewports,
+    },
   },
   decorators: [withThemeProvider],
 };

package/.storybook/theme.ts

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  brandTitle: 'GEL Next',
+  brandImage: '/gel-icon.svg',
+  brandTarget: '_self',
+  colorSecondary: '#DA1710',
+});

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @westpac/ui
 
+## 0.7.0
+
+### Minor Changes
+
+- 6e580a5: miscellaneous styling updates to bring new components to align with current design system
+
+## 0.6.0
+
+### Minor Changes
+
+- 240f606: fixes keyboard focus style in several components
+
 ## 0.5.0
 
 ### Minor Changes

package/assets/storybook/gel-icon.svg

@@ -0,0 +1,3 @@
+<svg width="72" height="72" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.998 0.033959C17.795 0.033959 22.494 4.73096 22.494 10.525C22.494 19.198 14.411 22.782 11.998 23.989V21.016C6.20101 21.016 1.50201 16.319 1.50201 10.526C1.50201 4.72996 6.20201 0.032959 11.998 0.032959V0.033959ZM7.20901 7.60096C5.32801 7.60096 3.92701 8.88696 3.92701 10.794V10.864C3.92701 12.736 5.08301 14.057 7.20901 14.057C9.23101 14.057 10.272 12.859 10.272 11.267V10.497H7.33201V11.747H8.50501C8.46901 12.247 8.13701 12.692 7.26201 12.692C6.17701 12.692 5.80001 11.905 5.80001 10.89V10.82C5.80001 9.69196 6.33401 9.00996 7.21801 9.00996C7.88301 9.00996 8.26001 9.31596 8.34701 9.90196H10.124C10.001 8.27496 8.68801 7.60196 7.20901 7.60196V7.60096ZM15.121 7.69796H10.798V13.952H15.261V12.57H12.583V11.433H14.605V10.156H12.583V9.07996H15.121V7.69796ZM17.607 7.69796H15.804V13.952H19.97V12.562H17.607V7.69696V7.69796Z" fill="#263238"/>
+</svg>

package/dist/components/accordion/accordion.component.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Item } from 'react-stately';
 import { type AccordionProps } from './accordion.types.js';
-declare function Accordion<T extends object>({ className, color, rounded, look, ...props }: AccordionProps<T>, ref: any): JSX.Element;
+declare function Accordion<T extends object>({ className, color, rounded, look, ...props }: AccordionProps<T>, ref: any): import("react/jsx-runtime").JSX.Element;
 declare const _Accordion: {
     Item: typeof Item;
     displayName: string;
@@ -24,8 +24,8 @@ declare const _Accordion: {
         default: string;
     };
 }, undefined>> & {
-    color?: "hero" | "primary" | ({
-        [x: string]: "hero" | "primary" | undefined;
+    color?: "primary" | "hero" | ({
+        [x: string]: "primary" | "hero" | undefined;
     } & string) | undefined;
     justify?: boolean | undefined;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "color"> & {

package/dist/components/accordion/accordion.stories.d.ts

@@ -6,20 +6,16 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > Primary color usage example
  */
-export declare const PrimaryColorStory: Story;
+export declare const PrimaryColor: Story;
 /**
  * > Hero color usage example
  */
-export declare const HeroColorStory: Story;
-/**
- * > Hero color usage example
- */
-export declare const MaterialLookStory: Story;
+export declare const HeroColor: Story;
 /**
  * > Controlled example
  */
-export declare const ControlledColorStory: Story;
+export declare const ControlledColor: Story;

package/dist/components/accordion/accordion.stories.js

@@ -16,22 +16,20 @@ import { useState } from 'react';
 import { Button } from '../index.js';
 import { Accordion } from './accordion.component.js';
 const meta = {
-    title: 'Example/Accordion',
+    title: 'Components/Accordion',
     component: Accordion,
     tags: [
         'autodocs'
     ],
     decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
+        (Story)=>{
+            Accordion.Item.displayName = 'Accordion.Item';
+            return React.createElement(Story, null);
+        }
+    ]
 };
 export default meta;
-export const DefaultStory = {
+export const Default = {
     args: {
         rounded: true,
         color: undefined,
@@ -54,7 +52,7 @@ export const DefaultStory = {
             }, React.createElement("h3", null, title), React.createElement("p", null, "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam!"), React.createElement(Button, null, "Test")))
     }
 };
-export const PrimaryColorStory = {
+export const PrimaryColor = {
     args: {
         color: 'primary',
         rounded: false
@@ -77,7 +75,7 @@ export const PrimaryColorStory = {
                 title: title
             }, React.createElement("p", null, title), React.createElement(Button, null, "Test"))))
 };
-export const HeroColorStory = {
+export const HeroColor = {
     args: {
         color: 'hero',
         rounded: false
@@ -100,30 +98,7 @@ export const HeroColorStory = {
                 title: title
             }, React.createElement("p", null, title), React.createElement(Button, null, "Test"))))
 };
-export const MaterialLookStory = {
-    args: {
-        look: 'material',
-        rounded: false
-    },
-    render: ({ ...props })=>React.createElement(Accordion, _extends({}, props), [
-            {
-                key: 'files',
-                title: 'Your files'
-            },
-            {
-                key: 'shared',
-                title: 'Shared with you'
-            },
-            {
-                key: 'last',
-                title: 'Last item'
-            }
-        ].map(({ key , title  })=>React.createElement(Accordion.Item, {
-                key: key,
-                title: title
-            }, React.createElement("p", null, title), React.createElement(Button, null, "Test"))))
-};
-export const ControlledColorStory = {
+export const ControlledColor = {
     args: {
         color: 'hero',
         rounded: false

package/dist/components/accordion/components/accordion-item/accordion-item.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type AccordionItemProps } from './accordion-item.types.js';
-export declare function AccordionItem<T = any>({ className, tag: Tag, color, look, ...props }: AccordionItemProps<T>): JSX.Element;
+export declare function AccordionItem<T = any>({ className, tag: Tag, color, look, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/components/accordion-item/accordion-item.component.js

@@ -15,7 +15,7 @@ function _extends() {
 import { useAccordionItem } from '@react-aria/accordion';
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useRef } from 'react';
-import { mergeProps, useHover, useLocale } from 'react-aria';
+import { mergeProps, useFocusRing, useHover, useLocale } from 'react-aria';
 import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 import { styles as accordionItemStyles } from './accordion-item.styles.js';
 const loadAnimations = ()=>import('./accordion-item.utils.js').then((res)=>res.default);
@@ -23,6 +23,7 @@ export function AccordionItem({ className , tag: Tag = 'div' , color , look ='de
     const ref = useRef(null);
     const { state , item  } = props;
     const { buttonProps , regionProps  } = useAccordionItem(props, state, ref);
+    const { isFocusVisible , focusProps  } = useFocusRing();
     const isOpen = state.expandedKeys.has(item.key);
     const isDisabled = state.disabledKeys.has(item.key);
     const { hoverProps  } = useHover({
@@ -34,11 +35,12 @@ export function AccordionItem({ className , tag: Tag = 'div' , color , look ='de
         isDisabled,
         className,
         color,
-        look
+        look,
+        isFocusVisible
     });
     return React.createElement(Tag, {
         className: styles.base()
-    }, React.createElement("h3", null, React.createElement("button", _extends({}, mergeProps(buttonProps, hoverProps), {
+    }, React.createElement("h3", null, React.createElement("button", _extends({}, mergeProps(buttonProps, hoverProps, focusProps), {
         ref: ref,
         className: styles.itemHeader()
     }), React.createElement("span", null, item.props.title), look === 'material' && React.createElement("div", {

package/dist/components/accordion/components/accordion-item/accordion-item.styles.d.ts

@@ -29,6 +29,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: {
+            itemHeader: string;
+        };
+        false: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;
@@ -67,6 +75,14 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         true: string;
         false: string;
     };
+    isFocusVisible: {
+        true: {
+            itemHeader: string;
+        };
+        false: {
+            itemHeader: string;
+        };
+    };
 }, {
     base: string;
     itemHeader: string;

package/dist/components/accordion/components/accordion-item/accordion-item.styles.js

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
         base: '',
-        itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2 focus:focus-outline',
+        itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2',
         indicator: '',
         content: 'hidden'
     },
@@ -14,7 +14,7 @@ export const styles = tv({
             },
             default: {
                 itemHeader: 'border-t border-border bg-light',
-                indicator: 'h-3 w-3 -rotate-90 transition-transform'
+                indicator: 'h-3 w-3 rotate-90 transition-transform'
             }
         },
         color: {
@@ -36,6 +36,14 @@ export const styles = tv({
         isDisabled: {
             true: '',
             false: ''
+        },
+        isFocusVisible: {
+            true: {
+                itemHeader: 'focus-outline'
+            },
+            false: {
+                itemHeader: 'outline-none'
+            }
         }
     },
     compoundSlots: [
@@ -45,7 +53,7 @@ export const styles = tv({
             ],
             look: 'default',
             isOpen: true,
-            className: 'rotate-90'
+            className: '-rotate-90'
         },
         {
             slots: [

package/dist/components/alert/alert.component.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type AlertProps } from './alert.types.js';
-export declare function Alert({ look, mode, heading, headingTag: HeadingTag, dismissible, open: isOpen, onClose, icon, tag: Tag, className, children, ...props }: AlertProps): JSX.Element;
+export declare function Alert({ look, mode, heading, headingTag: HeadingTag, dismissible, open: isOpen, onClose, icon, tag: Tag, className, children, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/alert/alert.stories.d.ts

@@ -6,24 +6,24 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export declare const DefaultStory: Story;
+export declare const Default: Story;
 /**
  * > All looks example
  */
-export declare const LooksStory: Story;
+export declare const Looks: Story;
 /**
  * > Text mode example
  */
-export declare const TextStory: Story;
+export declare const TextMode: Story;
 /**
  * > Heading example
  */
-export declare const HeadingStory: Story;
+export declare const Heading: Story;
 /**
  * > Dismissible example
  */
-export declare const DismissibleStory: Story;
+export declare const Dismissible: Story;
 /**
  * > Custom icon example
  */
-export declare const CustomIconStory: Story;
+export declare const CustomIcon: Story;