@westpac/ui 0.2.1 → 0.4.0

package/src/components/table/table.types.ts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from 'react';
+
+export type TableProps = {
+  /**
+   * Whether the table should have borders around every cell and the table
+   */
+  bordered?: boolean;
+  /**
+   * Whether the table should have even rows with a different background color
+   */
+  striped?: boolean;
+} & HTMLAttributes<HTMLTableElement>;
+
+export type TableContextState = {
+  /**
+   * bordered
+   */
+  bordered?: boolean;
+  /**
+   * striped
+   */
+  striped?: boolean;
+};

package/src/components/tabs/components/tab/tab.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white focus:focus-outline',
     variants: {
       look: {
-        default: 'border border-border',
+        default: 'border border-border bg-white',
         material: '',
       },
       selected: {

package/src/components/tabs/components/tab-panel/tab-panel.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex-1 p-4 focus:focus-outline',
+    base: 'flex-1 bg-white p-4 focus:focus-outline',
     variants: {
       look: {
         default: 'border border-border',

package/src/components/tabs/tabs.stories.tsx

@@ -1,8 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Key, useState } from 'react';
 
-import { Button } from '../index.js';
-
 import { Tabs } from './tabs.component.js';
 
 const meta: Meta<typeof Tabs> = {
@@ -17,7 +15,7 @@ const meta: Meta<typeof Tabs> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

package/src/components/tabs/tabs.styles.ts

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'flex',
-      tabList: 'relative z-10 flex bg-white',
+      tabList: 'relative z-10 flex',
     },
     variants: {
       orientation: {

package/src/components/textarea/textarea.stories.tsx

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

package/src/components/textarea/textarea.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
+    base: 'form-control w-full read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
     variants: {
       size: {
         small: 'form-control-small min-h-[3.375rem]',

package/src/components/visually-hidden/visually-hidden.stories.tsx

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

package/src/hook/index.ts

@@ -0,0 +1 @@
+export * from '../components/pagination/pagination.hooks.js';

package/src/tailwind/tailwind-plugin.ts

@@ -5,6 +5,7 @@ import { BREAKPOINTS } from './constants/breakpoints.js';
 import { COLORS, DEFAULT_BODY_TYPOGRAPHY, FONT_TYPES, SPACING } from './constants/index.js';
 import { THEMES } from './themes/index.js';
 import { theme as WBCTheme } from './themes/wbc.js';
+import { generateDatePicker } from './utils/generate-date-picker-component.js';
 import { createFontSizes, generateFontComponents, generateFormControlComponents } from './utils/index.js';
 
 /**
@@ -25,6 +26,7 @@ export const WestpacUIKitBasePlugin = plugin(
     });
     addComponents(generateFontComponents(theme('typographySizes'), theme));
     addComponents(generateFormControlComponents(theme('formControl')));
+    addComponents(generateDatePicker());
   },
   {
     theme: {
@@ -50,9 +52,30 @@ export const WestpacUIKitBasePlugin = plugin(
             '0%': { opacity: '0' },
             '100%': { opacity: '1' },
           },
+          fadeInDown: {
+            '0%': {
+              opacity: '0',
+              transform: 'translateY(-10vh)',
+            },
+            '100%': {
+              opacity: '1',
+              transform: 'translateY(0)',
+            },
+          },
         },
         animation: {
           fadeIn: 'fadeIn 0.2s ease',
+          fadeInDown: 'fadeInDown 0.4s ease',
+        },
+        boxShadow: {
+          switch: '0.1875rem 0 0.375rem 0 rgba(0,0,0,0.53)',
+        },
+        maxWidth: {
+          xsl: BREAKPOINTS.xsl,
+          sm: BREAKPOINTS.sm,
+          md: BREAKPOINTS.md,
+          lg: BREAKPOINTS.lg,
+          container: '1320px', //1200 (lg) + 60 (paddingHorizontal) + 60 (paddingHorizontal)
         },
       },
       typographySizes: {
@@ -102,10 +125,10 @@ export const WestpacUIKitBasePlugin = plugin(
         disabled: 'cursor-not-allowed border-dashed bg-background text-muted',
         sizes: {
           // Some of the values are not following the spacing so we needed to use static values as following
-          small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm',
-          medium: 'typography-body-9 px-2 py-[0.3125rem]',
+          small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm leading-[1.3rem]',
+          medium: 'typography-body-9 px-2 py-[0.3125rem] leading-6',
           large: 'px-[0.9375rem] py-[0.5rem] text-base',
-          xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg',
+          xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg leading-[1.685rem]',
         },
       },
       focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus',

package/src/tailwind/tailwind-transformer.ts

@@ -6,6 +6,12 @@ import { WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin } from '@westpac/ui/ta
 export const withGEL = (config: Config) =>
   withTV({
     ...config,
+    safelist: [
+      // Workaround for date-picker which is a web component and tailwind can't pickup the inner components
+      'date-picker',
+      ...(typeof config.safelist === 'string' ? [config.safelist] : []),
+      ...(Array.isArray(config.safelist) ? config.safelist : []),
+    ],
     plugins: [
       WestpacUIKitBasePlugin,
       WestpacUIKitThemesPlugin,

package/src/tailwind/themes/bom.ts

@@ -1,23 +1,35 @@
 import { type BrandConfig } from '../index.js';
 import { generateColorTints } from '../utils/generate-color-tints.js';
 
+const HERO = '#534891';
+const POP = '#A094FC';
+
 export const theme: BrandConfig = {
   code: 'BOM',
-  colors: generateColorTints({
-    background: '#F7F7F7',
-    border: '#D4D4D8',
-    borderDark: '#939299',
-    focus: '#867BCD',
-    heading: '#534891',
-    hero: '#534891',
-    light: '#FBFBFD',
-    link: '#D13900',
-    muted: '#6E6C7A',
-    neutral: '#595762',
-    pop: '#A094FC',
-    primary: '#D13900',
-    text: '#20024E',
-  }),
+  colors: {
+    ...generateColorTints({
+      background: '#F7F7F7',
+      border: '#D4D4D8',
+      borderDark: '#939299',
+      focus: '#867BCD',
+      heading: '#534891',
+      hero: HERO,
+      light: '#FBFBFD',
+      link: '#D13900',
+      muted: '#6E6C7A',
+      neutral: '#595762',
+      pop: POP,
+      primary: '#D13900',
+      text: '#20024E',
+    }),
+    pictogram: {
+      dark: HERO,
+      duo: {
+        highlight: POP,
+        outline: HERO,
+      },
+    },
+  },
   brandFont: 'Brown Pro',
   name: 'Bank of Melbourne',
 };

package/src/tailwind/themes/bsa.ts

@@ -1,23 +1,36 @@
 import { type BrandConfig } from '../index.js';
 import { generateColorTints } from '../utils/generate-color-tints.js';
 
+const HERO = '#002F6C';
+const POP = '#00ADBD'; //Bight
+
 export const theme: BrandConfig = {
   code: 'BSA',
-  colors: generateColorTints({
-    background: '#F3F4F4',
-    border: '#D3D4D5',
-    borderDark: '#909396',
-    focus: '#C26F9D',
-    heading: '#002F6C',
-    hero: '#002F6C',
-    light: '#FAFAFA',
-    link: '#D81B2B',
-    muted: '#6A6E72',
-    neutral: '#6A6E72',
-    pop: '#00ADBD', //Bight
-    primary: '#D81B2B',
-    text: '#333',
-  }),
+  colors: {
+    ...generateColorTints({
+      background: '#F3F4F4',
+      border: '#D3D4D5',
+      borderDark: '#909396',
+      focus: '#C26F9D',
+      heading: '#002F6C',
+      hero: HERO,
+      light: '#FAFAFA',
+      link: '#D81B2B',
+      muted: '#6A6E72',
+      neutral: '#6A6E72',
+      pop: POP,
+      primary: '#D81B2B',
+      text: '#333',
+    }),
+    pictogram: {
+      dark: HERO,
+      duo: {
+        highlight: POP,
+        outline: HERO,
+      },
+    },
+  },
+
   brandFont: 'Aller',
   name: 'BankSA',
 };

package/src/tailwind/themes/btfg.ts

@@ -1,23 +1,35 @@
 import { type BrandConfig } from '../index.js';
 import { generateColorTints } from '../utils/generate-color-tints.js';
 
+const HERO = '#2574A9';
+const PRIMARY = '#9E005D';
+
 export const theme: BrandConfig = {
   code: 'BTFG',
-  colors: generateColorTints({
-    background: '#F9F9F9',
-    border: '#E0E0E0',
-    borderDark: '#949494',
-    focus: '#CA73A6',
-    heading: '#2574A9',
-    hero: '#2574A9',
-    light: '#FCFCFC',
-    link: '#9E005D',
-    muted: '#666666',
-    neutral: '#637B98',
-    pop: '#9E005D', //Primary
-    primary: '#9E005D',
-    text: '#333',
-  }),
+  colors: {
+    ...generateColorTints({
+      background: '#F9F9F9',
+      border: '#E0E0E0',
+      borderDark: '#949494',
+      focus: '#CA73A6',
+      heading: '#2574A9',
+      hero: HERO,
+      light: '#FCFCFC',
+      link: '#9E005D',
+      muted: '#666666',
+      neutral: '#637B98',
+      pop: PRIMARY,
+      primary: PRIMARY,
+      text: '#333',
+    }),
+    pictogram: {
+      dark: HERO,
+      duo: {
+        highlight: PRIMARY,
+        outline: HERO,
+      },
+    },
+  },
   brandFont: 'Georgia, "Times New Roman", Times, serif',
   name: 'BT Financial Group',
 };

package/src/tailwind/themes/rams.ts

@@ -1,23 +1,35 @@
 import { type BrandConfig } from '../index.js';
 import { generateColorTints } from '../utils/generate-color-tints.js';
 
+const PRIMARY = '#047DBC';
+const POP = '#78C339'; //RAMS Green
+
 export const theme: BrandConfig = {
   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', //RAMS Green
-    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/src/tailwind/themes/stg.ts

@@ -1,23 +1,35 @@
 import { type BrandConfig } from '../index.js';
 import { generateColorTints } from '../utils/generate-color-tints.js';
 
+const TEXT = '#004833';
+const POP = '#78BE20'; //St.George Green
+
 export const theme: BrandConfig = {
   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', //St.George Green
-    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/src/tailwind/themes/wbc.ts

@@ -1,23 +1,35 @@
 import { type BrandConfig } from '../index.js';
 import { generateColorTints } from '../utils/generate-color-tints.js';
 
+const HERO = '#1F1C4F';
+const PRIMARY = '#DA1710';
+
 export const theme: BrandConfig = {
   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', //Bright Pink
-    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', //Bright Pink
+      primary: PRIMARY,
+      text: '#181B25',
+    }),
+    pictogram: {
+      dark: HERO,
+      duo: {
+        highlight: PRIMARY,
+        outline: HERO,
+      },
+    },
+  },
   brandFont: 'Westpac',
   name: 'Westpac',
 };

package/src/tailwind/themes/wbg.ts

@@ -1,23 +1,35 @@
 import { type BrandConfig } from '../index.js';
 import { generateColorTints } from '../utils/generate-color-tints.js';
 
+const HERO = '#000';
+const BORDER_DARK = '#91979A';
+
 export const theme: BrandConfig = {
   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/src/tailwind/types/brand.types.ts

@@ -18,11 +18,13 @@ type ColorsKey =
   | '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;
 };

package/src/tailwind/utils/generate-date-picker-component.ts

@@ -0,0 +1,109 @@
+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': {},
+        },
+      },
+
+      /* SIZE VARIANTS */
+      '&.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]': {},
+        },
+      },
+
+      /* Calendar selects */
+      '.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',
+      },
+
+      /* Calendar days */
+      '.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',
+      },
+    },
+  };
+};