@westpac/ui 0.2.0 → 0.3.0

package/src/components/table/table.stories.tsx

@@ -0,0 +1,206 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Table } from './table.component.js';
+
+const meta: Meta<typeof Table> = {
+  title: 'Example/Table',
+  component: Table,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: (
+      <>
+        <Table.Caption>
+          Caption this table width is: <em>(100%)</em>
+        </Table.Caption>
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Games</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>6/7/2020</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Program Files</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>4/7/2021</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>bootmgr</Table.Cell>
+            <Table.Cell>System file</Table.Cell>
+            <Table.Cell>11/20/2010</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>log.txt</Table.Cell>
+            <Table.Cell>Text Document</Table.Cell>
+            <Table.Cell>1/18/2016</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
+      </>
+    ),
+  },
+};
+
+/**
+ * > Striped example
+ */
+export const StripedTable: Story = {
+  args: {
+    striped: true,
+    children: (
+      <>
+        <Table.Caption>
+          Caption this table width is: <em>(100%)</em>
+        </Table.Caption>
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Games</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>6/7/2020</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Program Files</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>4/7/2021</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>bootmgr</Table.Cell>
+            <Table.Cell>System file</Table.Cell>
+            <Table.Cell>11/20/2010</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>log.txt</Table.Cell>
+            <Table.Cell>Text Document</Table.Cell>
+            <Table.Cell>1/18/2016</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
+      </>
+    ),
+  },
+};
+
+/**
+ * > Striped example
+ */
+export const BorderedTable: Story = {
+  args: {
+    bordered: true,
+    children: (
+      <>
+        <Table.Caption>
+          Caption this table width is: <em>(100%)</em>
+        </Table.Caption>
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Games</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>6/7/2020</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Program Files</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>4/7/2021</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>bootmgr</Table.Cell>
+            <Table.Cell>System file</Table.Cell>
+            <Table.Cell>11/20/2010</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>log.txt</Table.Cell>
+            <Table.Cell>Text Document</Table.Cell>
+            <Table.Cell>1/18/2016</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
+      </>
+    ),
+  },
+};
+
+/**
+ * > Example of table with highlighted rows or cells
+ */
+export const HighlightedRowCellTable: Story = {
+  args: {
+    children: (
+      <>
+        <Table.Caption>
+          Caption this table width is: <em>(100%)</em>
+        </Table.Caption>
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row highlighted>
+            <Table.Cell>Games</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>6/7/2020</Table.Cell>
+          </Table.Row>
+          <Table.Row highlighted={[0, 2]}>
+            <Table.Cell>Program Files</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>4/7/2021</Table.Cell>
+          </Table.Row>
+          <Table.Row highlighted={[1, 2]}>
+            <Table.Cell>bootmgr</Table.Cell>
+            <Table.Cell>System file</Table.Cell>
+            <Table.Cell>11/20/2010</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell highlightStart highlighted>
+              log.txt
+            </Table.Cell>
+            <Table.Cell>Text Document</Table.Cell>
+            <Table.Cell>1/18/2016</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
+      </>
+    ),
+  },
+};

package/src/components/table/table.styles.ts

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'w-full',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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/tailwind/tailwind-plugin.ts

@@ -54,6 +54,16 @@ export const WestpacUIKitBasePlugin = plugin(
         animation: {
           fadeIn: 'fadeIn 0.2s 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: {
         1: {

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;
 };