@westpac/ui 0.2.1 → 0.4.0

package/dist/tailwind/themes/rams.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const PRIMARY = '#047DBC';
+const POP = '#78C339';
 export const theme = {
     code: 'RAMS',
-    colors: generateColorTints({
-        background: '#F3F4F4',
-        border: '#D3D4D5',
-        borderDark: '#909396',
-        focus: '#009CDB',
-        heading: '#1972B4',
-        hero: '#0F446C',
-        light: '#FAFAFA',
-        link: '#1972B4',
-        muted: '#6A6E72',
-        neutral: '#848588',
-        pop: '#78C339',
-        primary: '#047DBC',
-        text: '#333'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F3F4F4',
+            border: '#D3D4D5',
+            borderDark: '#909396',
+            focus: '#009CDB',
+            heading: '#1972B4',
+            hero: '#0F446C',
+            light: '#FAFAFA',
+            link: '#1972B4',
+            muted: '#6A6E72',
+            neutral: '#848588',
+            pop: POP,
+            primary: PRIMARY,
+            text: '#333'
+        }),
+        pictogram: {
+            dark: PRIMARY,
+            duo: {
+                highlight: POP,
+                outline: PRIMARY
+            }
+        }
+    },
     brandFont: 'Source Sans Pro',
     name: 'RAMS'
 };

package/dist/tailwind/themes/stg.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const TEXT = '#004833';
+const POP = '#78BE20';
 export const theme = {
     code: 'STG',
-    colors: generateColorTints({
-        background: '#F5F5F4',
-        border: '#D6D5D0',
-        borderDark: '#949386',
-        focus: '#9681AF',
-        heading: '#004833',
-        hero: '#008739',
-        light: '#FAFAF9',
-        link: '#E30000',
-        muted: '#727163',
-        neutral: '#727163',
-        pop: '#78BE20',
-        primary: '#E30000',
-        text: '#004833'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F5F5F4',
+            border: '#D6D5D0',
+            borderDark: '#949386',
+            focus: '#9681AF',
+            heading: '#004833',
+            hero: '#008739',
+            light: '#FAFAF9',
+            link: '#E30000',
+            muted: '#727163',
+            neutral: '#727163',
+            pop: POP,
+            primary: '#E30000',
+            text: TEXT
+        }),
+        pictogram: {
+            dark: TEXT,
+            duo: {
+                highlight: POP,
+                outline: TEXT
+            }
+        }
+    },
     brandFont: 'Dragon Bold',
     name: 'St.George'
 };

package/dist/tailwind/themes/wbc.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#1F1C4F';
+const PRIMARY = '#DA1710';
 export const theme = {
     code: 'WBC',
-    colors: generateColorTints({
-        background: '#F3F4F6',
-        border: '#DEDEE1',
-        borderDark: '#9390A2',
-        focus: '#B978D9',
-        heading: '#1F1C4F',
-        hero: '#1F1C4F',
-        light: '#F9F9FB',
-        link: '#DA1710',
-        muted: '#595767',
-        neutral: '#2A2E42',
-        pop: '#FF3DDB',
-        primary: '#DA1710',
-        text: '#181B25'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F3F4F6',
+            border: '#DEDEE1',
+            borderDark: '#9390A2',
+            focus: '#B978D9',
+            heading: '#1F1C4F',
+            hero: HERO,
+            light: '#F9F9FB',
+            link: '#DA1710',
+            muted: '#595767',
+            neutral: '#2A2E42',
+            pop: '#FF3DDB',
+            primary: PRIMARY,
+            text: '#181B25'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: PRIMARY,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Westpac',
     name: 'Westpac'
 };

package/dist/tailwind/themes/wbg.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#000';
+const BORDER_DARK = '#91979A';
 export const theme = {
     code: 'WBG',
-    colors: generateColorTints({
-        background: '#F3F5F6',
-        border: '#D3D3D3',
-        borderDark: '#91979A',
-        focus: '#6892E8',
-        heading: '#000',
-        hero: '#000',
-        light: '#FAFAFA',
-        link: '#DA1710',
-        muted: '#686362',
-        neutral: '#403A38',
-        pop: '#FF7468',
-        primary: '#DA1710',
-        text: '#000'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F3F5F6',
+            border: '#D3D3D3',
+            borderDark: BORDER_DARK,
+            focus: '#6892E8',
+            heading: '#000',
+            hero: HERO,
+            light: '#FAFAFA',
+            link: '#DA1710',
+            muted: '#686362',
+            neutral: '#403A38',
+            pop: '#FF7468',
+            primary: '#DA1710',
+            text: '#000'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: BORDER_DARK,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Montserrat',
     name: 'Westpac Group'
 };

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

@@ -2,11 +2,19 @@ export type BrandKey = 'bom' | 'bsa' | 'btfg' | 'rams' | 'stg' | 'wbc' | 'wbg';
 type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'DEFAULT';
 type ColorValue = Record<'DEFAULT' | ColorShade, string>;
 type ColorsKey = 'background' | 'border' | 'borderDark' | 'focus' | 'heading' | 'hero' | 'light' | 'link' | 'muted' | 'neutral' | 'pop' | 'primary' | 'text' | 'white' | 'black';
+type PictogramColorMap = {
+    dark: string;
+    duo: {
+        highlight: string;
+        outline: string;
+    };
+};
+type PictogramConfig = Record<'pictogram', PictogramColorMap>;
 type ColorConfig = Record<ColorsKey, ColorValue>;
 export type BrandConfig = {
     brandFont: string;
     code: string;
-    colors: ColorConfig;
+    colors: ColorConfig & PictogramConfig;
     name: string;
 };
 export {};

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

@@ -0,0 +1,98 @@
+export declare const generateDatePicker: () => {
+    '.date-picker': {
+        '.duet-date__input': {
+            '@apply text-lg focus:!border-borderDark focus:!shadow-none focus:focus-outline border border-borderDark border-solid rounded': {};
+        };
+        '.duet-date__toggle': {
+            '@apply shadow-none border-solid border-l !border-l-borderDark !bg-light touch-manipulation whitespace-nowrap transition hover:bg-white active:bg-white rounded-r': {};
+            '@apply focus:shadow-none focus:focus-outline': {};
+        };
+        '.duet-date__select select:focus + .duet-date__select-label': {
+            '@apply !focus-outline rounded': {};
+        };
+        '.duet-date__toggle-icon': {
+            '@apply w-[18px] h-[18px] bg-cover flex-auto': {};
+            'background-image': string;
+            svg: {
+                '@apply hidden': {};
+            };
+        };
+        '&.date-picker-sm': {
+            '.duet-date__input': {
+                '@apply py-[0.25rem] pl-[0.5625rem] text-sm': {};
+            };
+            '.duet-date__toggle': {
+                '@apply px-2 w-auto': {};
+            };
+        };
+        '&.date-picker-md': {
+            '.duet-date__input': {
+                '@apply py-1 pl-2 text-base': {};
+            };
+            '.duet-date__toggle': {
+                '@apply px-2 w-auto': {};
+            };
+        };
+        '&.date-picker-lg': {
+            '.duet-date__input': {
+                '@apply py-[0.5rem] pl-[0.9375.rem] text-base': {};
+            };
+            '.duet-date__toggle': {
+                '@apply px-2 w-auto': {};
+            };
+            '.duet-date__toggle-icon': {
+                '@apply w-[24px] h-[24px]': {};
+            };
+        };
+        '&.date-picker-xl': {
+            '.duet-date__input': {
+                '@apply py-[0.5625rem] pl-[1.125rem]': {};
+            };
+            '.duet-date__toggle': {
+                '@apply px-3 w-auto': {};
+            };
+            '.duet-date__toggle-icon': {
+                '@apply w-[24px] h-[24px]': {};
+            };
+        };
+        '.duet-date__dialog-content': {
+            '@apply bg-white': {};
+        };
+        '.duet-date__dialog': {
+            '@apply z-10': {};
+        };
+        '.duet-date__select-label': {
+            '@apply mt-0 font-semibold': {};
+            svg: {
+                '@apply text-primary': {};
+            };
+        };
+        '.duet-date__table-header': {
+            '@apply font-bold': {};
+        };
+        '.duet-date__prev, .duet-date__next': {
+            '@apply bg-background focus:focus-outline !outline-offset-0 text-primary': {};
+        };
+        '.duet-date-dialog-select select:focus + .duet-date-dialog-select-label': {
+            '@apply focus-outline !shadow-none': {};
+            'outline-offset': string;
+        };
+        '.duet-date__day': {
+            '@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': {};
+            };
+            '&.is-disabled': {
+                '@apply line-through': {};
+            };
+            "&[aria-pressed='true']": {
+                '@apply border border-opacity-0 !bg-primary !text-white focus:!text-white': {};
+            };
+        };
+        '.duet-date__close:focus': {
+            '@apply bg-light focus-outline': {};
+            'outline-offset': string;
+        };
+    };
+};

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

@@ -0,0 +1,100 @@
+export const generateDatePicker = ()=>{
+    return {
+        '.date-picker': {
+            '.duet-date__input': {
+                '@apply text-lg focus:!border-borderDark focus:!shadow-none focus:focus-outline border border-borderDark border-solid rounded': {}
+            },
+            '.duet-date__toggle': {
+                '@apply shadow-none border-solid border-l !border-l-borderDark !bg-light touch-manipulation whitespace-nowrap transition hover:bg-white active:bg-white rounded-r': {},
+                '@apply focus:shadow-none focus:focus-outline': {}
+            },
+            '.duet-date__select select:focus + .duet-date__select-label': {
+                '@apply !focus-outline rounded': {}
+            },
+            '.duet-date__toggle-icon': {
+                '@apply w-[18px] h-[18px] bg-cover flex-auto': {},
+                'background-image': `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23686362' fill-rule='evenodd' d='M20,2 L22,2 C23.1045695,2 24,2.8954305 24,4 L24,22 C24,23.1045695 23.1045695,24 22,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,4 C-1.3527075e-16,2.8954305 0.8954305,2 2,2 L4,2 L4,0 L6,0 L6,2 L18,2 L18,0 L20,0 L20,2 Z M2,8 L2,22 L22,22 L22,8 L2,8 Z M14,14 L20,14 L20,20 L14,20 L14,14 Z'%3E%3C/path%3E%3C/svg%3E")`,
+                svg: {
+                    '@apply hidden': {}
+                }
+            },
+            '&.date-picker-sm': {
+                '.duet-date__input': {
+                    '@apply py-[0.25rem] pl-[0.5625rem] text-sm': {}
+                },
+                '.duet-date__toggle': {
+                    '@apply px-2 w-auto': {}
+                }
+            },
+            '&.date-picker-md': {
+                '.duet-date__input': {
+                    '@apply py-1 pl-2 text-base': {}
+                },
+                '.duet-date__toggle': {
+                    '@apply px-2 w-auto': {}
+                }
+            },
+            '&.date-picker-lg': {
+                '.duet-date__input': {
+                    '@apply py-[0.5rem] pl-[0.9375.rem] text-base': {}
+                },
+                '.duet-date__toggle': {
+                    '@apply px-2 w-auto': {}
+                },
+                '.duet-date__toggle-icon': {
+                    '@apply w-[24px] h-[24px]': {}
+                }
+            },
+            '&.date-picker-xl': {
+                '.duet-date__input': {
+                    '@apply py-[0.5625rem] pl-[1.125rem]': {}
+                },
+                '.duet-date__toggle': {
+                    '@apply px-3 w-auto': {}
+                },
+                '.duet-date__toggle-icon': {
+                    '@apply w-[24px] h-[24px]': {}
+                }
+            },
+            '.duet-date__dialog-content': {
+                '@apply bg-white': {}
+            },
+            '.duet-date__dialog': {
+                '@apply z-10': {}
+            },
+            '.duet-date__select-label': {
+                '@apply mt-0 font-semibold': {},
+                svg: {
+                    '@apply text-primary': {}
+                }
+            },
+            '.duet-date__table-header': {
+                '@apply font-bold': {}
+            },
+            '.duet-date__prev, .duet-date__next': {
+                '@apply bg-background focus:focus-outline !outline-offset-0 text-primary': {}
+            },
+            '.duet-date-dialog-select select:focus + .duet-date-dialog-select-label': {
+                '@apply focus-outline !shadow-none': {},
+                'outline-offset': '0 !important'
+            },
+            '.duet-date__day': {
+                '@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': {}
+                },
+                '&.is-disabled': {
+                    '@apply line-through': {}
+                },
+                "&[aria-pressed='true']": {
+                    '@apply border border-opacity-0 !bg-primary !text-white focus:!text-white': {}
+                }
+            },
+            '.duet-date__close:focus': {
+                '@apply bg-light focus-outline': {},
+                'outline-offset': '0 !important'
+            }
+        }
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -19,6 +19,18 @@
     "./css": {
       "default": "./dist/css/westpac-ui.min.css"
     },
+    "./icon": {
+      "default": "./dist/components/icon/index.js"
+    },
+    "./hook": {
+      "default": "./dist/hook/index.js"
+    },
+    "./pictogram": {
+      "default": "./dist/components/pictogram/index.js"
+    },
+    "./symbol": {
+      "default": "./dist/components/symbol/index.js"
+    },
     "./tailwind": {
       "default": "./dist/tailwind/index.js"
     }
@@ -33,6 +45,10 @@
   ],
   "devDependencies": {
     "@react-types/accordion": "3.0.0-alpha.14",
+    "@react-types/combobox": "~3.7.0",
+    "@react-types/shared": "~3.18.1",
+    "@storybook/addon-actions": "~7.4.3",
+    "@storybook/addon-a11y": "~7.4.3",
     "@storybook/addon-essentials": "^7.0.21",
     "@storybook/addon-interactions": "^7.0.21",
     "@storybook/addon-links": "^7.0.21",
@@ -46,6 +62,7 @@
     "@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/prettier": "~2.7.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.2.1",
@@ -77,6 +94,7 @@
     "vitest": "^0.30.1"
   },
   "dependencies": {
+    "@duetds/date-picker": "~1.4.0",
     "@react-aria/accordion": "3.0.0-alpha.19",
     "@react-aria/utils": "~3.18.0",
     "@react-spectrum/utils": "~3.10.0",
@@ -90,6 +108,7 @@
     "@westpac/ts-config": "~0.0.0"
   },
   "peerDependencies": {
+    "@duetds/date-picker": "~1.4.0",
     "colorjs.io": "~0.4.5",
     "tailwind-variants": "~0.1.13",
     "tailwindcss": "~3.3.2",
@@ -110,7 +129,7 @@
     "lint": "eslint \"./src/**/*.{ts,tsx,js,jsx}\"",
     "lint:fix": "eslint \"./src/**/*.{ts,tsx,js,jsx}\" --fix",
     "test": "vitest run",
-    "test:watch": "vitest",
+    "test:watch": "vitest --no-coverage",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "generate:component": "plop"

package/scaffold/component/scaffold.stories.hbs

@@ -8,7 +8,7 @@ const meta: Meta<typeof {{name}}> = {
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
   parameters: {
-    layout: 'center',
+    layout: 'centered',
   },
 };
 

package/src/components/accordion/accordion.stories.tsx

@@ -17,7 +17,7 @@ const meta: Meta<typeof Accordion> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

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

@@ -3,7 +3,7 @@ import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useRef } from 'react';
 import { mergeProps, useHover, useLocale } from 'react-aria';
 
-import { ArrowLeftIcon, ArrowRightIcon } from '../../../index.js';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 
 import { styles as accordionItemStyles } from './accordion-item.styles.js';
 import { type AccordionItemProps } from './accordion-item.types.js';
@@ -28,9 +28,9 @@ export function AccordionItem<T = any>({
 
   return (
     <Tag className={styles.base()}>
-      {/* 
+      {/*
         Using h3 tag since the official page is using it, also the react-spectrum
-        https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ 
+        https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
       */}
       <h3>
         <button {...mergeProps(buttonProps, hoverProps)} ref={ref} className={styles.itemHeader()}>

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

@@ -22,10 +22,10 @@ export const styles = tv(
       },
       color: {
         hero: {
-          itemHeader: 'border-l-5 border-l-border transition-colors',
+          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
         },
         primary: {
-          itemHeader: 'border-l-5 border-l-border transition-colors',
+          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
         },
       },
       isOpen: {
@@ -69,12 +69,12 @@ export const styles = tv(
       {
         slots: ['content'],
         color: 'hero',
-        className: 'border-l-5 border-l-border',
+        className: 'border-l-[0.375rem] border-l-border',
       },
       {
         slots: ['content'],
         color: 'primary',
-        className: 'border-l-5 border-l-border',
+        className: 'border-l-[0.375rem] border-l-border',
       },
     ],
   },

package/src/components/alert/alert.component.tsx

@@ -1,7 +1,7 @@
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { AlertIcon, CloseIcon, InfoIcon, LimitIcon, SuccessIcon, WarningIcon } from '../index.js';
+import { AlertIcon, CloseIcon, InfoIcon, LimitIcon, SuccessIcon, WarningIcon } from '../icon/index.js';
 
 import { styles as alertStyles } from './alert.styles.js';
 import { type AlertProps, type Look } from './alert.types.js';

package/src/components/alert/alert.stories.tsx

@@ -1,6 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
-import { TelephoneIcon } from '../index.js';
+import { TelephoneIcon } from '../icon/index.js';
 
 import { Alert } from './alert.component.js';
 

package/src/components/autocomplete/autocomplete.component.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { useButton, useComboBox, useFilter, useSearchField } from 'react-aria';
+import { Item, useComboBoxState, useSearchFieldState } from 'react-stately';
+
+import { ClearIcon } from '../icon/index.js';
+
+import { styles as autocompleteStyles } from './autocomplete.styles.js';
+import { type AutocompleteProps } from './autocomplete.types.js';
+import { ListBox, Popover } from './components/index.js';
+
+export function Autocomplete<T extends object>({
+  size = 'medium',
+  invalid = false,
+  isDisabled,
+  footer,
+  portalContainer,
+  ...props
+}: AutocompleteProps<T>) {
+  const { contains } = useFilter({ sensitivity: 'base' });
+  const state = useComboBoxState({ isDisabled, ...props, defaultFilter: contains });
+  const inputRef = React.useRef(null);
+  const listBoxRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const { inputProps, listBoxProps, labelProps } = useComboBox(
+    {
+      ...props,
+      isDisabled,
+      inputRef,
+      listBoxRef,
+      popoverRef,
+    },
+    state,
+  );
+
+  const styles = autocompleteStyles({
+    isDisabled,
+    isFocused: state.isFocused,
+    size,
+    invalid,
+  });
+  // Get props for the clear button from useSearchField
+  const searchProps = {
+    label: props.label,
+    value: state.inputValue,
+    onChange: (v: string) => state.setInputValue(v),
+  };
+
+  const searchState = useSearchFieldState(searchProps);
+  const { clearButtonProps } = useSearchField(
+    { ...searchProps, 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'] },
+    searchState,
+    inputRef,
+  );
+  const clearButtonRef = React.useRef(null);
+  const { buttonProps } = useButton(clearButtonProps, clearButtonRef);
+  const outerRef = React.useRef(null);
+
+  return (
+    <div className={styles.base()}>
+      <label {...labelProps} className={styles.label()}>
+        {props.label}
+      </label>
+
+      <div ref={outerRef} className={styles.outerWrapper()}>
+        <input {...inputProps} ref={inputRef} className={styles.input()} />
+
+        <button
+          {...buttonProps}
+          ref={clearButtonRef}
+          style={{ visibility: state.inputValue !== '' ? 'visible' : 'hidden' }}
+          className={styles.clearButton()}
+        >
+          <ClearIcon aria-hidden="true" color="muted" size="small" />
+        </button>
+      </div>
+
+      {state.isOpen && (
+        <Popover
+          popoverRef={popoverRef}
+          triggerRef={outerRef}
+          state={state}
+          isNonModal
+          placement="bottom start"
+          portalContainer={portalContainer}
+        >
+          <ListBox {...listBoxProps} listBoxRef={listBoxRef} state={state} />
+          {footer && <div className="border-t border-t-border px-3 py-2">{footer}</div>}
+        </Popover>
+      )}
+    </div>
+  );
+}
+
+Autocomplete.Item = Item;