@westpac/ui 0.7.1 → 0.9.0

package/dist/stories/foundation/spacing.stories.d.ts

@@ -0,0 +1,15 @@
+import { type Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+/**
+ * Margin scale
+ */
+export declare const MarginScale: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Padding scale
+ */
+export declare const PaddingScale: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Gap scale
+ */
+export declare const GapScale: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/foundation/typography.stories.d.ts

@@ -9,3 +9,11 @@ export declare const BrandFont: () => import("react/jsx-runtime").JSX.Element;
  * Body fonts
  */
 export declare const BodyFont: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Line height
+ */
+export declare const LineHeight: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Fonts weight
+ */
+export declare const FontWeight: () => import("react/jsx-runtime").JSX.Element;

package/dist/tailwind/__mocks__/utils.constants.d.ts

@@ -1,44 +1,80 @@
 export declare const EXPECTED_SPACING: {
-    0: string;
-    1: string;
-    10: string;
-    11: string;
-    12: string;
-    13: string;
-    14: string;
-    15: string;
-    16: string;
-    17: string;
-    18: string;
-    19: string;
-    2: string;
-    20: string;
-    21: string;
-    22: string;
-    23: string;
-    24: string;
-    25: string;
-    26: string;
-    27: string;
-    28: string;
-    29: string;
-    3: string;
-    30: string;
-    31: string;
-    32: string;
-    33: string;
-    34: string;
-    35: string;
-    4: string;
-    5: string;
-    6: string;
-    7: string;
-    8: string;
-    9: string;
+    '0': string;
+    '1': string;
+    '2': string;
+    '3': string;
+    '4': string;
+    '5': string;
+    '6': string;
+    '7': string;
+    '8': string;
+    '9': string;
+    '10': string;
+    '11': string;
+    '12': string;
+    '13': string;
+    '14': string;
+    '15': string;
+    '16': string;
+    '17': string;
+    '18': string;
+    '19': string;
+    '20': string;
+    '21': string;
+    '22': string;
+    '23': string;
+    '24': string;
+    '25': string;
+    '26': string;
+    '27': string;
+    '28': string;
+    '29': string;
+    '30': string;
+    '31': string;
+    '32': string;
+    '33': string;
+    '34': string;
+    '35': string;
+    '0.5': string;
+    '1.5': string;
+    '2.5': string;
+    '3.5': string;
+    '4.5': string;
+    '5.5': string;
+    '6.5': string;
+    '7.5': string;
+    '8.5': string;
+    '9.5': string;
+    '10.5': string;
+    '11.5': string;
+    '12.5': string;
+    '13.5': string;
+    '14.5': string;
+    '15.5': string;
+    '16.5': string;
+    '17.5': string;
+    '18.5': string;
+    '19.5': string;
+    '20.5': string;
+    '21.5': string;
+    '22.5': string;
+    '23.5': string;
+    '24.5': string;
+    '25.5': string;
+    '26.5': string;
+    '27.5': string;
+    '28.5': string;
+    '29.5': string;
+    '30.5': string;
+    '31.5': string;
+    '32.5': string;
+    '33.5': string;
+    '34.5': string;
 };
 export declare const EXPECTED_FONT_SIZES_VARS: {
     'body-1': string;
     'body-10': string;
+    'body-11': string;
     'body-2': string;
     'body-3': string;
     'body-4': string;
@@ -49,6 +85,7 @@ export declare const EXPECTED_FONT_SIZES_VARS: {
     'body-9': string;
     'brand-1': string;
     'brand-10': string;
+    'brand-11': string;
     'brand-2': string;
     'brand-3': string;
     'brand-4': string;

package/dist/tailwind/__mocks__/utils.constants.js

@@ -1,44 +1,80 @@
 export const EXPECTED_SPACING = {
-    0: '0',
-    1: '0.375rem',
-    10: '3.75rem',
-    11: '4.125rem',
-    12: '4.5rem',
-    13: '4.875rem',
-    14: '5.25rem',
-    15: '5.625rem',
-    16: '6rem',
-    17: '6.375rem',
-    18: '6.75rem',
-    19: '7.125rem',
-    2: '0.75rem',
-    20: '7.5rem',
-    21: '7.875rem',
-    22: '8.25rem',
-    23: '8.625rem',
-    24: '9rem',
-    25: '9.375rem',
-    26: '9.75rem',
-    27: '10.125rem',
-    28: '10.5rem',
-    29: '10.875rem',
-    3: '1.125rem',
-    30: '11.25rem',
-    31: '11.625rem',
-    32: '12rem',
-    33: '12.375rem',
-    34: '12.75rem',
-    35: '13.125rem',
-    4: '1.5rem',
-    5: '1.875rem',
-    6: '2.25rem',
-    7: '2.625rem',
-    8: '3rem',
-    9: '3.375rem'
+    '0': '0rem',
+    '1': '0.375rem',
+    '2': '0.75rem',
+    '3': '1.125rem',
+    '4': '1.5rem',
+    '5': '1.875rem',
+    '6': '2.25rem',
+    '7': '2.625rem',
+    '8': '3rem',
+    '9': '3.375rem',
+    '10': '3.75rem',
+    '11': '4.125rem',
+    '12': '4.5rem',
+    '13': '4.875rem',
+    '14': '5.25rem',
+    '15': '5.625rem',
+    '16': '6rem',
+    '17': '6.375rem',
+    '18': '6.75rem',
+    '19': '7.125rem',
+    '20': '7.5rem',
+    '21': '7.875rem',
+    '22': '8.25rem',
+    '23': '8.625rem',
+    '24': '9rem',
+    '25': '9.375rem',
+    '26': '9.75rem',
+    '27': '10.125rem',
+    '28': '10.5rem',
+    '29': '10.875rem',
+    '30': '11.25rem',
+    '31': '11.625rem',
+    '32': '12rem',
+    '33': '12.375rem',
+    '34': '12.75rem',
+    '35': '13.125rem',
+    '0.5': '0.1875rem',
+    '1.5': '0.5625rem',
+    '2.5': '0.9375rem',
+    '3.5': '1.3125rem',
+    '4.5': '1.6875rem',
+    '5.5': '2.0625rem',
+    '6.5': '2.4375rem',
+    '7.5': '2.8125rem',
+    '8.5': '3.1875rem',
+    '9.5': '3.5625rem',
+    '10.5': '3.9375rem',
+    '11.5': '4.3125rem',
+    '12.5': '4.6875rem',
+    '13.5': '5.0625rem',
+    '14.5': '5.4375rem',
+    '15.5': '5.8125rem',
+    '16.5': '6.1875rem',
+    '17.5': '6.5625rem',
+    '18.5': '6.9375rem',
+    '19.5': '7.3125rem',
+    '20.5': '7.6875rem',
+    '21.5': '8.0625rem',
+    '22.5': '8.4375rem',
+    '23.5': '8.8125rem',
+    '24.5': '9.1875rem',
+    '25.5': '9.5625rem',
+    '26.5': '9.9375rem',
+    '27.5': '10.3125rem',
+    '28.5': '10.6875rem',
+    '29.5': '11.0625rem',
+    '30.5': '11.4375rem',
+    '31.5': '11.8125rem',
+    '32.5': '12.1875rem',
+    '33.5': '12.5625rem',
+    '34.5': '12.9375rem'
 };
 export const EXPECTED_FONT_SIZES_VARS = {
     'body-1': '3.75rem',
     'body-10': '0.875rem',
+    'body-11': '0.875rem',
     'body-2': '3.375rem',
     'body-3': '3rem',
     'body-4': '2.625rem',
@@ -49,6 +85,7 @@ export const EXPECTED_FONT_SIZES_VARS = {
     'body-9': '1rem',
     'brand-1': '3.75rem',
     'brand-10': '0.875rem',
+    'brand-11': '0.875rem',
     'brand-2': '3.375rem',
     'brand-3': '3rem',
     'brand-4': '2.625rem',

package/dist/tailwind/constants/spacing.d.ts

@@ -1,41 +1,7 @@
 export declare const SPACING_LENGTH = 35;
 export declare const SPACING_UNIT = 6;
 export declare const SPACING_SCALE = 16;
+export declare const ADD_MINOR_SCALE = true;
 export declare const SPACING: {
-    0: string;
-    1: string;
-    2: string;
-    22: string;
-    3: string;
-    4: string;
-    5: string;
-    6: string;
-    7: string;
-    8: string;
-    9: string;
-    10: string;
-    11: string;
-    12: string;
-    13: string;
-    14: string;
-    15: string;
-    16: string;
-    17: string;
-    18: string;
-    19: string;
-    20: string;
-    31: string;
-    26: string;
-    32: string;
-    28: string;
-    25: string;
-    34: string;
-    35: string;
-    30: string;
-    21: string;
-    23: string;
-    24: string;
-    27: string;
-    29: string;
-    33: string;
+    [x: number]: string;
 };

package/dist/tailwind/constants/spacing.js

@@ -2,4 +2,5 @@ import { createSpacing } from '../utils/create-spacing.js';
 export const SPACING_LENGTH = 35;
 export const SPACING_UNIT = 6;
 export const SPACING_SCALE = 16;
-export const SPACING = createSpacing(SPACING_UNIT, SPACING_SCALE);
+export const ADD_MINOR_SCALE = true;
+export const SPACING = createSpacing(SPACING_UNIT, SPACING_SCALE, ADD_MINOR_SCALE);

package/dist/tailwind/constants/typography.d.ts

@@ -41,4 +41,8 @@ export declare const FONT_SIZES: {
         fontSize: string;
         lineHeight: string;
     };
+    11: {
+        fontSize: string;
+        lineHeight: string;
+    };
 };

package/dist/tailwind/constants/typography.js

@@ -53,5 +53,9 @@ export const FONT_SIZES = {
     10: {
         fontSize: '0.875rem',
         lineHeight: 'normal'
+    },
+    11: {
+        fontSize: '0.875rem',
+        lineHeight: 'loose'
     }
 };

package/dist/tailwind/tailwind-plugin.js

@@ -42,7 +42,11 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
         extend: {
             lineHeight: {
                 tight: '1.2',
-                normal: '1.4'
+                normal: '1.4',
+                loose: '1.428571429'
+            },
+            borderRadius: {
+                DEFAULT: '0.1875rem'
             },
             borderWidth: {
                 5: '0.3125rem'
@@ -123,6 +127,10 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
             10: {
                 fontSize: '0.875rem',
                 lineHeight: 'normal'
+            },
+            11: {
+                fontSize: '0.875rem',
+                lineHeight: 'loose'
             }
         },
         formControl: {

package/dist/tailwind/types/index.d.ts

@@ -1,2 +1 @@
 export * from './brand.types.js';
-export * from './theme.types.js';

package/dist/tailwind/types/index.js

@@ -1,2 +1 @@
 export * from './brand.types.js';
-export * from './theme.types.js';

package/dist/tailwind/utils/create-spacing.d.ts

@@ -1,4 +1,3 @@
-import { type SPACING_KEY } from '../types/theme.types.js';
-type SpacingRecord = Record<SPACING_KEY, string>;
-export declare const createSpacing: (spacingUnit: number, spacingScale: number) => SpacingRecord;
+type SpacingRecord = Record<number, string>;
+export declare const createSpacing: (spacingUnit: number, spacingScale: number, addMinorScale: boolean) => SpacingRecord;
 export {};

package/dist/tailwind/utils/create-spacing.js

@@ -1,11 +1,11 @@
-export const createSpacing = (spacingUnit, spacingScale)=>{
+export const createSpacing = (spacingUnit, spacingScale, addMinorScale)=>{
     return Array.from({
-        length: 35
+        length: 36
     }).reduce((spacing, _, i)=>{
-        const newIndex = ++i;
-        spacing[newIndex] = `${newIndex * spacingUnit / spacingScale}rem`;
+        spacing[i] = `${i * spacingUnit / spacingScale}rem`;
+        if (addMinorScale && i < 35) {
+            spacing[i + 0.5] = `${(i + 0.5) * spacingUnit / spacingScale}rem`;
+        }
         return spacing;
-    }, {
-        0: '0'
-    });
+    }, {});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -40,11 +40,13 @@
   },
   "files": [
     "*",
+    "!.storybook",
     "!coverage",
+    "!scaffold",
     "!stories",
     "!vitest.setup.ts",
     "!vitest.config.ts",
-    "!**/*.{test,spec}.{ts,tsx,js,jsx}"
+    "!**/*.{test,spec,stories}.{ts,tsx,js,jsx}"
   ],
   "devDependencies": {
     "@react-types/tabs": "~3.3.0",

package/src/components/accordion/components/accordion-item/accordion-item.styles.ts

@@ -23,6 +23,7 @@ export const styles = tv(
         },
         false: {
           base: '',
+          itemHeader: 'hover:bg-background',
         },
       },
       isDisabled: {

package/src/components/alert/alert.styles.ts

@@ -3,11 +3,11 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 xsl:flex relative mb-4',
-      icon: 'xsl:mr-2 float-left mr-1 flex-none',
-      body: 'xsl:top-[0.125rem] relative flex-1 overflow-hidden [&_a]:underline',
+      base: 'typography-body-10 relative mb-4 xsl:flex',
+      icon: 'float-left mr-1 flex-none xsl:mr-2',
+      body: 'relative flex-1 overflow-hidden xsl:top-[0.125rem] [&_a]:underline',
       heading: 'typography-body-9 mb-2 font-bold',
-      close: 'absolute right-[0.1875rem] top-[0.1875rem] p-1 hover:opacity-[0.8]',
+      close: 'absolute right-0.5 top-0.5 p-1 hover:opacity-80',
     },
     variants: {
       look: {

package/src/components/badge/badge.styles.ts

@@ -24,7 +24,7 @@ export const styles = tv(
       },
       type: {
         pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-bold leading-none',
-        default: 'rounded-sm px-1 py-[0.1875rem] pb-[0.125rem] text-[0.75rem] leading-none',
+        default: 'rounded-sm px-1 py-0.5 pb-[0.125rem] text-[0.75rem] leading-none',
       },
     },
   },

package/src/components/breadcrumb/components/breadcrumb-item/breadcrumb-item.component.tsx

@@ -39,7 +39,7 @@ export function BaseBreadcrumbItem(
         {children}
       </FinalTag>
       {!isCurrent && (
-        <span aria-hidden="true" className="flex items-center px-[0.1875rem]">
+        <span aria-hidden="true" className="flex items-center px-0.5">
           <ArrowRightIcon size="small" className="inline-block" color="primary" />
         </span>
       )}

package/src/components/button/button.styles.ts

@@ -14,10 +14,10 @@ export const styles = tv(
     },
     variants: {
       size: {
-        small: { base: 'typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem] active-theme-rams:before:h-[0.0625rem]' },
+        small: { base: 'typography-body-10 px-2 pb-[0.25rem] pt-0.5 active-theme-rams:before:h-[0.0625rem]' },
         medium: { base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem]' },
-        large: { base: 'typography-body-9 px-[0.9375rem] py-[0.5rem] active-theme-rams:before:h-[0.1875rem]' },
-        xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem] active-theme-rams:before:h-[0.25rem]' },
+        large: { base: 'typography-body-9 px-2.5 py-[0.5rem] active-theme-rams:before:h-0.5' },
+        xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-1.5 active-theme-rams:before:h-[0.25rem]' },
       },
       look: {
         primary: {

package/src/components/button-dropdown/components/panel/panel.styles.ts

@@ -1,10 +1,9 @@
 import { tv } from 'tailwind-variants';
 
-// eslint-disable-next-line tailwindcss/no-custom-classname
 export const styles = tv(
   {
     slots: {
-      base: 'mt-[0.1875rem] rounded-[3px] border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
+      base: 'mt-0.5 rounded border border-border bg-white p-2 shadow-[0_0.375rem_0.75rem_rgba(0,0,0,0.175)]',
       dialog: '',
     },
     variants: {

package/src/components/compacta/compacta.styles.ts

@@ -4,17 +4,17 @@ export const styles = tv(
   {
     slots: {
       base: '',
-      item: 'border-borderDark mb-2 overflow-hidden rounded-[0.1875rem] border',
-      header: 'text-text bg-white px-3 py-[0.9375rem]',
+      item: 'mb-2 overflow-hidden rounded border border-borderDark',
+      header: 'bg-white px-3 py-2.5 text-text',
       headerTitle: 'flex min-w-0 flex-1 items-center',
       primaryHeading: 'flex w-full',
-      secondaryHeading: 'text-muted flex min-w-0 flex-1 items-center pl-4',
+      secondaryHeading: 'flex min-w-0 flex-1 items-center pl-4 text-muted',
       itemIndex: 'typography-body-9 mr-1 w-3 flex-none font-bold',
       removeBtn: 'mt-[0.875rem] h-auto p-0 no-underline hover:underline',
       addBtn: 'h-auto p-0 no-underline hover:underline',
       toggleBtn: 'p-0',
       collapsible: '',
-      content: 'xsl:pl-[3.375rem] p-[0_1.125rem_1.875rem]',
+      content: 'px-3 pb-5 pt-0 xsl:pl-9',
       footer: '',
       titlePrimary: 'typography-body-9 font-bold',
       titleSecondary: 'mt-1 items-center',

package/src/components/error-message/error-message.component.tsx

@@ -13,13 +13,7 @@ export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message,
     <ul className={styles.list({})} {...props}>
       {message.map(msg => (
         <li className={styles.base({ className })}>
-          <FinalIcon
-            copyrightYear="2023"
-            className={styles.icon({})}
-            size="xsmall"
-            look="outlined"
-            // color="inherit"
-          />
+          <FinalIcon copyrightYear="2023" className={styles.icon({})} size="xsmall" look="outlined" />
           {msg}
         </li>
       ))}

package/src/components/error-message/error-message.styles.ts

@@ -2,8 +2,9 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'typography-body-10 flex items-center text-danger',
+    base: 'typography-body-11 flex items-center text-danger',
     list: 'mb-2 flex flex-col gap-1',
-    icon: 'mr-[0.5rem] mt-[mr-0.25rem] align-top',
+    // below should be em rather than rem based on old GEL
+    icon: 'mr-[0.5em] align-top',
   },
 });

package/src/components/form/components/form-group/form-group.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: '',
+    base: 'last:mb-0',
     variants: {
       inline: {
         true: 'sm:inline-block sm:align-middle',

package/src/components/form/form.component.tsx

@@ -14,9 +14,9 @@ const FormContext = createContext<FormContextValue | null>(null);
 
 export const useFormContext = () => useContext(FormContext) || {};
 
-export function Form({ children, size = 'medium', spacing = 'medium', inline = false, ...props }: FormProps) {
+export function Form({ children, spacing = 'medium', inline = false, ...props }: FormProps) {
   return (
-    <FormContext.Provider value={{ inline, size, spacing }}>
+    <FormContext.Provider value={{ inline, spacing }}>
       <form {...props}>{children}</form>
     </FormContext.Provider>
   );

package/src/components/form/form.types.ts

@@ -5,10 +5,6 @@ export type FormContextValue = {
    * Whether form is inline
    */
   inline?: boolean;
-  /**
-   * Size of Form
-   */
-  size?: 'small' | 'medium' | 'large';
   /**
    * Spacing of Form
    */

package/src/components/form-hint/form-hint.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'typography-body-10 mb-2 text-muted',
+    base: 'typography-body-11 mb-2 text-muted',
     variants: {
       spacing: {
         medium: '-mt-1 mb-2',

package/src/components/form-label/form-label.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'typography-body-9 block font-medium',
+    base: 'typography-body-9 block font-medium leading-loose',
     variants: {
       spacing: {
         medium: '',

package/src/components/icon/components/exit-icon.tsx

@@ -7,11 +7,11 @@ export function ExitIcon({ 'aria-label': ariaLabel = 'Exit', copyrightYear = '20
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path
-        d="M3.51677 4.50981C8.20277 -0.176183 15.8008 -0.176713 20.4873 4.50981L19.0731 5.92403C15.1679 2.01878 8.83623 2.01878 4.93098 5.92403C1.02573 9.82928 1.02573 16.1609 4.93098 20.0662C8.83623 23.9714 15.1679 23.9714 19.0731 20.0662L20.4873 21.4804C15.8013 26.1664 8.2033 26.1669 3.51677 21.4804C-1.16976 16.7938 -1.16922 9.19581 3.51677 4.50981Z"
+        d="M3.51677 3.50981C8.20277 -1.17618 15.8008 -1.17671 20.4873 3.50981L19.0731 4.92403C15.1679 1.01878 8.83623 1.01878 4.93098 4.92403C1.02573 8.82928 1.02573 15.1609 4.93098 19.0662C8.83624 22.9714 15.1679 22.9714 19.0731 19.0662L20.4873 20.4804C15.8013 25.1664 8.2033 25.1669 3.51677 20.4804C-1.16976 15.7938 -1.16922 8.19581 3.51677 3.50981Z"
         fill="currentColor"
       />
       <path
-        d="M16.9117 17.2479L20.1525 14.0071H12L12.0391 12.0071L20.1562 12.0071L16.9118 8.76266L18.326 7.34844L24 13L18.326 18.6621L16.9117 17.2479Z"
+        d="M16.9117 16.2479L20.1525 13.0071H12L12.0391 11.0071L20.1562 11.0071L16.9118 7.76266L18.326 6.34844L24 12L18.326 17.6621L16.9117 16.2479Z"
         fill="currentColor"
       />
     </Icon>

package/src/components/icon/index.ts

@@ -231,4 +231,5 @@ export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';
 
 export { Icon } from './icon.component.js';
+
 export { type IconProps } from './icon.types.js';