@westpac/ui 0.12.0 → 0.14.0

package/dist/tailwind/utils/generate-date-picker-component.d.ts

@@ -18,6 +18,9 @@ export declare const generateDatePicker: () => {
             };
         };
         '&.date-picker-sm': {
+            '.duet-date': {
+                '@apply max-w-[8.75rem]': {};
+            };
             '.duet-date__input': {
                 '@apply py-[0.25rem] pl-[0.5625rem] text-sm': {};
             };
@@ -26,6 +29,9 @@ export declare const generateDatePicker: () => {
             };
         };
         '&.date-picker-md': {
+            '.duet-date': {
+                '@apply max-w-[10.9375rem]': {};
+            };
             '.duet-date__input': {
                 '@apply py-1 pl-2 text-base': {};
             };
@@ -34,6 +40,9 @@ export declare const generateDatePicker: () => {
             };
         };
         '&.date-picker-lg': {
+            '.duet-date': {
+                '@apply max-w-[12.0625rem]': {};
+            };
             '.duet-date__input': {
                 '@apply py-[0.5rem] pl-[0.9375.rem] text-base': {};
             };
@@ -45,6 +54,9 @@ export declare const generateDatePicker: () => {
             };
         };
         '&.date-picker-xl': {
+            '.duet-date': {
+                '@apply max-w-[13.6875rem]': {};
+            };
             '.duet-date__input': {
                 '@apply py-[0.5625rem] pl-[1.125rem]': {};
             };
@@ -55,6 +67,11 @@ export declare const generateDatePicker: () => {
                 '@apply w-[24px] h-[24px]': {};
             };
         };
+        '&.date-picker-block': {
+            '.duet-date': {
+                '@apply max-w-none': {};
+            };
+        };
         '.duet-date__dialog-content': {
             '@apply bg-white': {};
         };
@@ -68,7 +85,7 @@ export declare const generateDatePicker: () => {
             };
         };
         '.duet-date__table-header': {
-            '@apply font-bold': {};
+            '@apply font-semibold': {};
         };
         '.duet-date__prev, .duet-date__next': {
             '@apply bg-background focus:focus-outline !outline-offset-0 text-primary': {};
@@ -81,10 +98,10 @@ export declare const generateDatePicker: () => {
             '@apply hover:!bg-primary/5 focus:!bg-white/0 focus:!text-text': {};
             '@apply active:shadow active:focus-outline focus:focus-outline focus:!shadow-none !outline-offset-0': {};
             '&.is-today': {
-                '@apply !shadow-primary !text-text !bg-primary/5': {};
+                '@apply !shadow-primary !text-text !bg-primary/5 !border !border-solid !border-primary': {};
             };
             '&.is-disabled': {
-                '@apply line-through': {};
+                '@apply hover:!bg-[transparent] after:absolute after:z-[1] after:top-1/2 after:left-1/2 after:border after:border-t-0 after:border-x-0 after:border-muted after:w-3 after:h-0 after:-translate-x-1/2': {};
             };
             "&[aria-pressed='true']": {
                 '@apply border border-opacity-0 !bg-primary !text-white focus:!text-white': {};

package/dist/tailwind/utils/generate-date-picker-component.js

@@ -19,6 +19,9 @@ export const generateDatePicker = ()=>{
                 }
             },
             '&.date-picker-sm': {
+                '.duet-date': {
+                    '@apply max-w-[8.75rem]': {}
+                },
                 '.duet-date__input': {
                     '@apply py-[0.25rem] pl-[0.5625rem] text-sm': {}
                 },
@@ -27,6 +30,9 @@ export const generateDatePicker = ()=>{
                 }
             },
             '&.date-picker-md': {
+                '.duet-date': {
+                    '@apply max-w-[10.9375rem]': {}
+                },
                 '.duet-date__input': {
                     '@apply py-1 pl-2 text-base': {}
                 },
@@ -35,6 +41,9 @@ export const generateDatePicker = ()=>{
                 }
             },
             '&.date-picker-lg': {
+                '.duet-date': {
+                    '@apply max-w-[12.0625rem]': {}
+                },
                 '.duet-date__input': {
                     '@apply py-[0.5rem] pl-[0.9375.rem] text-base': {}
                 },
@@ -46,6 +55,9 @@ export const generateDatePicker = ()=>{
                 }
             },
             '&.date-picker-xl': {
+                '.duet-date': {
+                    '@apply max-w-[13.6875rem]': {}
+                },
                 '.duet-date__input': {
                     '@apply py-[0.5625rem] pl-[1.125rem]': {}
                 },
@@ -56,6 +68,11 @@ export const generateDatePicker = ()=>{
                     '@apply w-[24px] h-[24px]': {}
                 }
             },
+            '&.date-picker-block': {
+                '.duet-date': {
+                    '@apply max-w-none': {}
+                }
+            },
             '.duet-date__dialog-content': {
                 '@apply bg-white': {}
             },
@@ -69,7 +86,7 @@ export const generateDatePicker = ()=>{
                 }
             },
             '.duet-date__table-header': {
-                '@apply font-bold': {}
+                '@apply font-semibold': {}
             },
             '.duet-date__prev, .duet-date__next': {
                 '@apply bg-background focus:focus-outline !outline-offset-0 text-primary': {}
@@ -82,10 +99,10 @@ export const generateDatePicker = ()=>{
                 '@apply hover:!bg-primary/5 focus:!bg-white/0 focus:!text-text': {},
                 '@apply active:shadow active:focus-outline focus:focus-outline focus:!shadow-none !outline-offset-0': {},
                 '&.is-today': {
-                    '@apply !shadow-primary !text-text !bg-primary/5': {}
+                    '@apply !shadow-primary !text-text !bg-primary/5 !border !border-solid !border-primary': {}
                 },
                 '&.is-disabled': {
-                    '@apply line-through': {}
+                    '@apply hover:!bg-[transparent] after:absolute after:z-[1] after:top-1/2 after:left-1/2 after:border after:border-t-0 after:border-x-0 after:border-muted after:w-3 after:h-0 after:-translate-x-1/2': {}
                 },
                 "&[aria-pressed='true']": {
                     '@apply border border-opacity-0 !bg-primary !text-white focus:!text-white': {}

package/dist/tailwind/utils/generate-linear-loader.d.ts

@@ -0,0 +1,10 @@
+export declare const generateLinearLoader: () => {
+    '.linear-gradient-style': {
+        '@apply overflow-hidden flex bg-background': {};
+        '&::before': {
+            '@apply translate-x-0 block w-full h-full animate-skeleton': {};
+            content: string;
+            background: string;
+        };
+    };
+};

package/dist/tailwind/utils/generate-linear-loader.js

@@ -0,0 +1,17 @@
+export const generateLinearLoader = ()=>{
+    return {
+        '.linear-gradient-style': {
+            '@apply overflow-hidden flex bg-background': {},
+            '&::before': {
+                '@apply translate-x-0 block w-full h-full animate-skeleton': {},
+                content: '""',
+                background: `linear-gradient(
+          to right,
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0.7) 50%,
+          rgba(255, 255, 255, 0) 100%
+        );`
+            }
+        }
+    };
+};

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

@@ -3,3 +3,4 @@ export { generateColorTints } from './generate-color-tints.js';
 export { createFontSizes } from './create-font-sizes.js';
 export { generateFontComponents } from './generate-font-components.js';
 export { generateFormControlComponents } from './generate-form-control.js';
+export { createBrandFonts } from './create-brand-fonts.js';

package/dist/tailwind/utils/index.js

@@ -3,3 +3,4 @@ export { generateColorTints } from './generate-color-tints.js';
 export { createFontSizes } from './create-font-sizes.js';
 export { generateFontComponents } from './generate-font-components.js';
 export { generateFormControlComponents } from './generate-form-control.js';
+export { createBrandFonts } from './create-brand-fonts.js';

package/generate-component-types.cjs

@@ -29,7 +29,7 @@ const TYPES_TO_BE_IGNORED = [
   const results = await glob(components);
 
   const data = Object.fromEntries(
-    tsConfigParser.parse(results).reduce((acc, { displayName, description, props, tags }) => {
+    tsConfigParser.parse(results).reduce((acc, { displayName, description, props, tags, filePath }) => {
       /**
        * Some components should not be scanned since it is a internal component
        * so the comment @private is used in order to skip some components.
@@ -37,7 +37,6 @@ const TYPES_TO_BE_IGNORED = [
       if (tags.private !== undefined) {
         return acc;
       }
-
       return [
         ...acc,
         [
@@ -45,6 +44,10 @@ const TYPES_TO_BE_IGNORED = [
           {
             displayName,
             description,
+            filePath: filePath
+              .replace(process.cwd(), '')
+              .replace('/src/components/', '')
+              .replace('src/components/', ''),
             // Sort the required props before the non-required props, then sort alphabetically
             props: Object.fromEntries(
               Object.values(props)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -28,6 +28,12 @@
     "./tailwind": {
       "default": "./dist/tailwind/index.js"
     },
+    "./themes": {
+      "default": "./dist/tailwind/themes/index.js"
+    },
+    "./themes-constants": {
+      "default": "./dist/tailwind/constants/index.js"
+    },
     "./accordion": {
       "default": "./dist/components/accordion/index.js"
     },
@@ -40,6 +46,9 @@
     "./badge": {
       "default": "./dist/components/badge/index.js"
     },
+    "./bottom-sheet": {
+      "default": "./dist/components/bottom-sheet/index.js"
+    },
     "./breadcrumb": {
       "default": "./dist/components/breadcrumb/index.js"
     },
@@ -73,29 +82,41 @@
     "./field": {
       "default": "./dist/components/field/index.js"
     },
+    "./filter": {
+      "default": "./dist/components/filter/index.js"
+    },
     "./flexi-cell": {
       "default": "./dist/components/flexi-cell/index.js"
     },
+    "./footer": {
+      "default": "./dist/components/footer/index.js"
+    },
     "./form": {
       "default": "./dist/components/form/index.js"
     },
-    "./form-hint": {
-      "default": "./dist/components/form-hint/index.js"
+    "./hint": {
+      "default": "./dist/components/hint/index.js"
     },
-    "./form-label": {
-      "default": "./dist/components/form-label/index.js"
+    "./label": {
+      "default": "./dist/components/label/index.js"
     },
     "./grid": {
       "default": "./dist/components/grid/index.js"
     },
+    "./header": {
+      "default": "./dist/components/header/index.js"
+    },
+    "./heading": {
+      "default": "./dist/components/heading/index.js"
+    },
     "./icon": {
       "default": "./dist/components/icon/index.js"
     },
     "./input": {
       "default": "./dist/components/input/index.js"
     },
-    "./input-field": {
-      "default": "./dist/components/input-field/index.js"
+    "./input-group": {
+      "default": "./dist/components/input-group/index.js"
     },
     "./link": {
       "default": "./dist/components/link/index.js"
@@ -112,6 +133,12 @@
     "./panel": {
       "default": "./dist/components/panel/index.js"
     },
+    "./pass-code": {
+      "default": "./dist/components/pass-code/index.js"
+    },
+    "./pass-code-view": {
+      "default": "./dist/components/pass-code-view/index.js"
+    },
     "./pictogram": {
       "default": "./dist/components/pictogram/index.js"
     },
@@ -121,6 +148,9 @@
     "./progress-bar": {
       "default": "./dist/components/progress-bar/index.js"
     },
+    "./progress-indicator": {
+      "default": "./dist/components/progress-indicator/index.js"
+    },
     "./progress-rope": {
       "default": "./dist/components/progress-rope/index.js"
     },
@@ -172,28 +202,29 @@
     "!**/*.{test,spec,stories}.{ts,tsx,js,jsx}"
   ],
   "devDependencies": {
-    "@react-types/tabs": "~3.3.0",
     "@react-types/accordion": "3.0.0-alpha.14",
     "@react-types/combobox": "~3.7.0",
     "@react-types/shared": "~3.18.1",
-    "@storybook/addon-a11y": "~7.4.3",
-    "@storybook/addon-actions": "~7.4.3",
-    "@storybook/addon-essentials": "^7.0.21",
-    "@storybook/addon-interactions": "^7.0.21",
-    "@storybook/addon-links": "^7.0.21",
-    "@storybook/addon-styling": "~1.3.2",
-    "@storybook/blocks": "^7.0.21",
-    "@storybook/manager-api": "~7.4.6",
-    "@storybook/react": "^7.0.21",
-    "@storybook/react-vite": "^7.0.21",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "@storybook/theming": "~7.4.6",
+    "@react-types/tabs": "~3.3.0",
+    "@storybook/addon-a11y": "~7.6.4",
+    "@storybook/addon-actions": "~7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-styling": "~1.3.7",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/manager-api": "~7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-vite": "^7.6.4",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "~7.6.4",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.35",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "~14.4.3",
     "@types/lodash-es": "~4.17.8",
+    "@types/lodash.throttle": "~4.1.7",
     "@types/prettier": "~2.7.3",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.1",
@@ -204,11 +235,11 @@
     "colorjs.io": "~0.4.5",
     "cross-env": "~7.0.3",
     "eslint": "^7.32.0",
-    "eslint-plugin-storybook": "~0.6.12",
+    "eslint-plugin-storybook": "~0.6.15",
     "glob": "~10.3.3",
     "jsdom": "^22.0.0",
     "plop": "~3.1.2",
-    "postcss": "~8.4.24",
+    "postcss": "~8.4.31",
     "postcss-cli": "~10.1.0",
     "prettier": "^2.8.4",
     "prop-types": "^15.8.1",
@@ -216,17 +247,17 @@
     "react-docgen-typescript": "~2.2.2",
     "react-dom": "^18.2.0",
     "shx": "^0.3.4",
-    "storybook": "^7.0.21",
+    "storybook": "^7.6.4",
     "tailwind-variants": "~0.1.13",
     "tailwindcss": "~3.3.2",
     "tailwindcss-themer": "~3.1.0",
     "ts-node": "~10.9.1",
     "typescript": "^5.1.6",
-    "vite": "^4.3.4",
+    "vite": "^4.3.9",
     "vitest": "^0.30.1",
     "@westpac/eslint-config": "~0.1.0",
-    "@westpac/test-config": "~0.0.0",
-    "@westpac/ts-config": "~0.0.0"
+    "@westpac/ts-config": "~0.0.0",
+    "@westpac/test-config": "~0.0.0"
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",
@@ -235,6 +266,7 @@
     "@react-spectrum/utils": "~3.10.0",
     "clsx": "^1.2.1",
     "framer-motion": "~10.12.16",
+    "lodash.throttle": "~4.1.1",
     "react-aria": "~3.25.0",
     "react-stately": "~3.23.0"
   },

package/src/components/accordion/accordion.component.tsx

@@ -8,7 +8,7 @@ import { Item, useTreeState } from 'react-stately';
 
 import { styles } from './accordion.styles.js';
 import { type AccordionProps } from './accordion.types.js';
-import { AccordionItem } from './components/index.js';
+import { AccordionItem as AccordionItemContent } from './components/index.js';
 
 function Accordion<T extends object>(
   { className, rounded = true, look = 'soft', ...props }: AccordionProps<T>,
@@ -38,18 +38,18 @@ function Accordion<T extends object>(
     <div {...filterDOMProps(finalProps)} {...accordionProps} ref={domRef} className={styles({ className, rounded })}>
       <div className="ml-[-1px] mt-[-1px]">
         {[...state.collection].map(item => (
-          <AccordionItem<T> key={item.key} item={item} state={state} look={look} />
+          <AccordionItemContent<T> key={item.key} item={item} state={state} look={look} />
         ))}
       </div>
     </div>
   );
 }
 
-const _Accordion = forwardRef(Accordion) as unknown as { Item: typeof Item; displayName: string } & (<T>(
+const _Accordion = forwardRef(Accordion) as unknown as { displayName: string } & (<T>(
   props: AccordionProps<T> & { ref?: any },
 ) => ReturnType<typeof Accordion>);
 
 _Accordion.displayName = 'Accordion';
-_Accordion.Item = Item;
 
 export { _Accordion as Accordion };
+export const AccordionItem = Item;

package/src/components/accordion/accordion.types.ts

@@ -7,16 +7,23 @@ import { AccordionItemProps } from './components/index.js';
 
 type Variants = VariantProps<typeof styles>;
 export type AccordionProps<T = any> = SpectrumAccordionProps<T> & {
+  /**
+   * <AccordionItem /> as a collection
+   */
+  children?: SpectrumAccordionProps<T>['children'];
   /**
    * Stretch the tab to fill the whole content
+   * @default false
    */
   justify?: boolean;
   /**
    * The look of the accordion
+   * @default soft
    */
   look?: AccordionItemProps['look'];
   /**
    * Whether the accordion is rounded
+   * @default true
    */
   rounded?: Variants['rounded'];
 } & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;

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

@@ -68,4 +68,3 @@ export function AccordionItem<T = any>({
     </Tag>
   );
 }
-AccordionItem.displayName = 'Accordion.Item';

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { Node, TreeState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 
@@ -7,6 +7,10 @@ import { styles } from './accordion-item.styles.js';
 type Variants = VariantProps<typeof styles>;
 
 export type AccordionItemProps<T = any> = {
+  /**
+   * AccordionItem body content
+   */
+  children?: ReactNode;
   /**
    * Node from react-stately
    */

package/src/components/accordion/index.ts

@@ -1,2 +1,2 @@
-export { Accordion } from './accordion.component.js';
+export { Accordion, AccordionItem } from './accordion.component.js';
 export { type AccordionProps } from './accordion.types.js';

package/src/components/alert/alert.types.ts

@@ -1,10 +1,15 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 
 export type Look = 'info' | 'success' | 'warning' | 'danger' | 'system';
 
 export type AlertProps = {
+  /**
+   * The alert content
+   */
+  children?: React.ReactNode;
   /**
    * Enable dismissible mode
+   * @default false
    */
   dismissible?: boolean;
   /**
@@ -13,6 +18,7 @@ export type AlertProps = {
   heading?: string;
   /**
    * The alert heading tag is automatically defined, but may be overridden via this prop if required for semantic reasons.
+   * @default h2
    */
   headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /**
@@ -23,10 +29,12 @@ export type AlertProps = {
   icon?: React.ElementType;
   /**
    * Alert look style
+   * @default info
    */
   look?: Look;
   /**
    * Alert mode
+   * @default box
    */
   mode?: 'box' | 'text';
   /**
@@ -39,6 +47,7 @@ export type AlertProps = {
   open?: boolean;
   /**
    * Tag to render
+   * @default div
    */
   tag?: keyof JSX.IntrinsicElements;
 } & HTMLAttributes<Element>;