@westpac/ui 0.6.0 → 0.7.0

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

@@ -0,0 +1,8 @@
+import { type Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+/**
+ * Breakpoints are a set of predefined viewport widths that can be used to change the layout of a webpage to ensure it accommodates different devices.
+ * For styling GEL is using Tailwind and refer https://tailwindcss.com/docs/responsive-design for detailed documentation.
+ */
+export declare const Breakpoints: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/foundation/breakpoints.stories.js

@@ -0,0 +1,12 @@
+import { Table } from '../../components/index.js';
+const meta = {
+    title: 'Foundation/Breakpoints',
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ]
+};
+export default meta;
+export const Breakpoints = ()=>React.createElement(Table, null, React.createElement(Table.Caption, null, "GEL breakpoint tokens"), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Token"), React.createElement(Table.HeaderCell, null, "Value"), React.createElement(Table.HeaderCell, null, "Tailwind prefix"))), React.createElement(Table.Body, null, React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "xsl"), React.createElement(Table.Cell, null, "0px and up"), React.createElement(Table.Cell, null, "xsl:")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "sm"), React.createElement(Table.Cell, null, "768px and up"), React.createElement(Table.Cell, null, "sm:")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "md"), React.createElement(Table.Cell, null, "992 and up"), React.createElement(Table.Cell, null, "md:")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "lg"), React.createElement(Table.Cell, null, "1200 and up"), React.createElement(Table.Cell, null, "lg:")), React.createElement(Table.Row, null, React.createElement(Table.Cell, null, "xl"), React.createElement(Table.Cell, null, "1900 and up"), React.createElement(Table.Cell, null, "xl:"))));

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

@@ -0,0 +1,16 @@
+import { type Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Examples for all colors that change with brand
+ */
+export declare const BrandColors: Story;
+/**
+ * All reserved colors that do not change with brand
+ */
+export declare const ReservedColors: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Colors that are reserved but have no extra tints
+ */
+export declare const ReservedWithNoTints: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/foundation/colours.stories.js

@@ -0,0 +1,387 @@
+import { useState } from 'react';
+import { Field, Select } from '../../components/index.js';
+import { BASE_COLORS } from '../../tailwind/constants/colors.js';
+import { ALL_THEMES } from '../../tailwind/themes/index.js';
+import { generateColorTints } from '../../tailwind/utils/generate-color-tints.js';
+const meta = {
+    title: 'Foundation/Colours',
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export default meta;
+const LOAD_COLORS = {
+    background: [
+        'bg-background',
+        'bg-background-90',
+        'bg-background-80',
+        'bg-background-70',
+        'bg-background-60',
+        'bg-background-50',
+        'bg-background-40',
+        'bg-background-30',
+        'bg-background-20',
+        'bg-background-10',
+        'bg-background-5'
+    ],
+    border: [
+        'bg-border',
+        'bg-border-90',
+        'bg-border-80',
+        'bg-border-70',
+        'bg-border-60',
+        'bg-border-50',
+        'bg-border-40',
+        'bg-border-30',
+        'bg-border-20',
+        'bg-border-10',
+        'bg-border-5'
+    ],
+    borderDark: [
+        'bg-borderDark',
+        'bg-borderDark-90',
+        'bg-borderDark-80',
+        'bg-borderDark-70',
+        'bg-borderDark-60',
+        'bg-borderDark-50',
+        'bg-borderDark-40',
+        'bg-borderDark-30',
+        'bg-borderDark-20',
+        'bg-borderDark-10',
+        'bg-borderDark-5'
+    ],
+    focus: [
+        'bg-focus',
+        'bg-focus-90',
+        'bg-focus-80',
+        'bg-focus-70',
+        'bg-focus-60',
+        'bg-focus-50',
+        'bg-focus-40',
+        'bg-focus-30',
+        'bg-focus-20',
+        'bg-focus-10',
+        'bg-focus-5'
+    ],
+    heading: [
+        'bg-heading',
+        'bg-heading-90',
+        'bg-heading-80',
+        'bg-heading-70',
+        'bg-heading-60',
+        'bg-heading-50',
+        'bg-heading-40',
+        'bg-heading-30',
+        'bg-heading-20',
+        'bg-heading-10',
+        'bg-heading-5'
+    ],
+    hero: [
+        'bg-hero',
+        'bg-hero-90',
+        'bg-hero-80',
+        'bg-hero-70',
+        'bg-hero-60',
+        'bg-hero-50',
+        'bg-hero-40',
+        'bg-hero-30',
+        'bg-hero-20',
+        'bg-hero-10',
+        'bg-hero-5'
+    ],
+    light: [
+        'bg-light',
+        'bg-light-90',
+        'bg-light-80',
+        'bg-light-70',
+        'bg-light-60',
+        'bg-light-50',
+        'bg-light-40',
+        'bg-light-30',
+        'bg-light-20',
+        'bg-light-10',
+        'bg-light-5'
+    ],
+    link: [
+        'bg-link',
+        'bg-link-90',
+        'bg-link-80',
+        'bg-link-70',
+        'bg-link-60',
+        'bg-link-50',
+        'bg-link-40',
+        'bg-link-30',
+        'bg-link-20',
+        'bg-link-10',
+        'bg-link-5'
+    ],
+    muted: [
+        'bg-muted',
+        'bg-muted-90',
+        'bg-muted-80',
+        'bg-muted-70',
+        'bg-muted-60',
+        'bg-muted-50',
+        'bg-muted-40',
+        'bg-muted-30',
+        'bg-muted-20',
+        'bg-muted-10',
+        'bg-muted-5'
+    ],
+    neutral: [
+        'bg-neutral',
+        'bg-neutral-90',
+        'bg-neutral-80',
+        'bg-neutral-70',
+        'bg-neutral-60',
+        'bg-neutral-50',
+        'bg-neutral-40',
+        'bg-neutral-30',
+        'bg-neutral-20',
+        'bg-neutral-10',
+        'bg-neutral-5'
+    ],
+    pop: [
+        'bg-pop',
+        'bg-pop-90',
+        'bg-pop-80',
+        'bg-pop-70',
+        'bg-pop-60',
+        'bg-pop-50',
+        'bg-pop-40',
+        'bg-pop-30',
+        'bg-pop-20',
+        'bg-pop-10',
+        'bg-pop-5'
+    ],
+    primary: [
+        'bg-primary',
+        'bg-primary-90',
+        'bg-primary-80',
+        'bg-primary-70',
+        'bg-primary-60',
+        'bg-primary-40',
+        'bg-primary-50',
+        'bg-primary-30',
+        'bg-primary-20',
+        'bg-primary-10',
+        'bg-primary-5'
+    ],
+    text: [
+        'bg-text',
+        'bg-text-90',
+        'bg-text-80',
+        'bg-text-70',
+        'bg-text-60',
+        'bg-text-50',
+        'bg-text-40',
+        'bg-text-30',
+        'bg-text-20',
+        'bg-text-10',
+        'bg-text-5'
+    ],
+    success: [
+        'bg-success',
+        'bg-success-90',
+        'bg-success-80',
+        'bg-success-70',
+        'bg-success-60',
+        'bg-success-50',
+        'bg-success-40',
+        'bg-success-30',
+        'bg-success-20',
+        'bg-success-10',
+        'bg-success-5'
+    ],
+    info: [
+        'bg-info',
+        'bg-info-90',
+        'bg-info-80',
+        'bg-info-70',
+        'bg-info-60',
+        'bg-info-50',
+        'bg-info-40',
+        'bg-info-30',
+        'bg-info-20',
+        'bg-info-10',
+        'bg-info-5'
+    ],
+    warning: [
+        'bg-warning',
+        'bg-warning-90',
+        'bg-warning-80',
+        'bg-warning-70',
+        'bg-warning-60',
+        'bg-warning-50',
+        'bg-warning-40',
+        'bg-warning-30',
+        'bg-warning-20',
+        'bg-warning-10',
+        'bg-warning-5'
+    ],
+    danger: [
+        'bg-danger',
+        'bg-danger-90',
+        'bg-danger-80',
+        'bg-danger-70',
+        'bg-danger-60',
+        'bg-danger-50',
+        'bg-danger-40',
+        'bg-danger-30',
+        'bg-danger-20',
+        'bg-danger-10',
+        'bg-danger-5'
+    ],
+    system: [
+        'bg-system',
+        'bg-system-90',
+        'bg-system-80',
+        'bg-system-70',
+        'bg-system-60',
+        'bg-system-50',
+        'bg-system-40',
+        'bg-system-30',
+        'bg-system-20',
+        'bg-system-10',
+        'bg-system-5'
+    ]
+};
+export const BrandColors = {
+    render: (args, { globals: { theme  }  })=>{
+        var _ALL_THEMES_find;
+        const currThemeToken = theme ? theme : 'WBC';
+        const currColors = (_ALL_THEMES_find = ALL_THEMES.find((brand)=>brand.code === currThemeToken)) === null || _ALL_THEMES_find === void 0 ? void 0 : _ALL_THEMES_find.colors;
+        const brandColors = [
+            'background',
+            'border',
+            'borderDark',
+            'focus',
+            'heading',
+            'hero',
+            'light',
+            'link',
+            'muted',
+            'neutral',
+            'pop',
+            'primary',
+            'text'
+        ];
+        const TINTS = [
+            'DEFAULT',
+            90,
+            80,
+            70,
+            60,
+            50,
+            40,
+            30,
+            20,
+            10,
+            5
+        ];
+        const [selectedTint, setSelectedTint] = useState('DEFAULT');
+        const tintString = selectedTint !== 'DEFAULT' ? `-${selectedTint}` : '';
+        return React.createElement(React.Fragment, null, React.createElement("div", {
+            className: "p-2"
+        }, React.createElement(Field, {
+            label: "Select a tint:"
+        }, React.createElement(Select, {
+            onChange: (e)=>setSelectedTint(e.target.value)
+        }, TINTS.map((tint)=>React.createElement("option", {
+                value: tint,
+                key: tint
+            }, tint))))), React.createElement("div", {
+            className: "flex flex-wrap"
+        }, brandColors.map((color)=>React.createElement("div", {
+                className: "w-[33%] min-w-[200px] max-w-[300px] p-2",
+                key: color
+            }, React.createElement("div", {
+                className: `bg-${color}${tintString} h-[80px]`
+            }), React.createElement("div", {
+                className: "divide-y divide-border border border-border p-2"
+            }, React.createElement("div", {
+                className: "pb-2 font-bold"
+            }, color), React.createElement("div", {
+                className: "typography-body-10 py-2 font-light"
+            }, `Tailwind eg: bg-${color}${tintString}`), React.createElement("div", {
+                className: "typography-body-10 pt-2 font-light"
+            }, currColors[color][selectedTint]))))));
+    }
+};
+export const ReservedColors = ()=>{
+    const reservedColors = Object.keys(BASE_COLORS);
+    const TINTS = [
+        'DEFAULT',
+        90,
+        80,
+        70,
+        60,
+        50,
+        40,
+        30,
+        20,
+        10,
+        5
+    ];
+    const [selectedTint, setSelectedTint] = useState('DEFAULT');
+    const tintString = selectedTint !== 'DEFAULT' ? `-${selectedTint}` : '';
+    const baseColorTints = generateColorTints(BASE_COLORS);
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+        className: "p-2"
+    }, React.createElement(Field, {
+        label: "Select a tint:"
+    }, React.createElement(Select, {
+        onChange: (e)=>setSelectedTint(e.target.value)
+    }, TINTS.map((tint)=>React.createElement("option", {
+            value: tint,
+            key: tint
+        }, tint))))), React.createElement("div", {
+        className: "flex flex-wrap"
+    }, reservedColors.map((color)=>React.createElement("div", {
+            className: "w-[33%] min-w-[200px] max-w-[300px] p-2",
+            key: color
+        }, React.createElement("div", {
+            className: `bg-${color}${tintString} h-[80px]`
+        }), React.createElement("div", {
+            className: "divide-y divide-border border border-border p-2"
+        }, React.createElement("div", {
+            className: "pb-2 font-bold"
+        }, color), React.createElement("div", {
+            className: "typography-body-10 py-2 font-light"
+        }, `Tailwind eg: bg-${color}${tintString}`), React.createElement("div", {
+            className: "typography-body-10 pt-2 font-light"
+        }, baseColorTints[color][selectedTint]))))));
+};
+export const ReservedWithNoTints = ()=>React.createElement("div", {
+        className: "flex"
+    }, React.createElement("div", {
+        className: "w-[33%] min-w-[200px] max-w-[300px] p-2"
+    }, React.createElement("div", {
+        className: `h-[80px] bg-black`
+    }), React.createElement("div", {
+        className: "divide-y divide-border border border-border p-2"
+    }, React.createElement("div", {
+        className: "pb-2 font-bold"
+    }, "black"), React.createElement("div", {
+        className: "typography-body-10 py-2 font-light"
+    }, `Tailwind eg: bg-black`), React.createElement("div", {
+        className: "typography-body-10 pt-2 font-light"
+    }, "#000"))), React.createElement("div", {
+        className: "w-[33%] min-w-[200px] max-w-[300px] p-2"
+    }, React.createElement("div", {
+        className: `h-[80px] border border-border bg-white`
+    }), React.createElement("div", {
+        className: "divide-y divide-border border border-border p-2"
+    }, React.createElement("div", {
+        className: "pb-2 font-bold"
+    }, "white"), React.createElement("div", {
+        className: "typography-body-10 py-2 font-light"
+    }, `Tailwind eg: bg-white`), React.createElement("div", {
+        className: "typography-body-10 pt-2 font-light"
+    }, "#FFF"))));

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

@@ -0,0 +1,7 @@
+import { type Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+/**
+ * Providing themeing is a matter of wrapping with HTML or div with data-theme="theme-name", see code of story for example
+ */
+export declare const Theme: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/foundation/theme.stories.js

@@ -0,0 +1,16 @@
+const meta = {
+    title: 'Foundation/Theme',
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Theme = ()=>React.createElement("div", {
+        "data-theme": "wbc"
+    }, "Click on show code");

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

@@ -0,0 +1,11 @@
+import { type Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+/**
+ * Brand fonts
+ */
+export declare const BrandFont: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Body fonts
+ */
+export declare const BodyFont: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/foundation/typography.stories.js

@@ -0,0 +1,109 @@
+import { Table } from '../../components/index.js';
+const meta = {
+    title: 'Foundation/Typography',
+    tags: [
+        'autodocs'
+    ],
+    decorators: [
+        (Story)=>React.createElement(Story, null)
+    ]
+};
+export default meta;
+export const BrandFont = ()=>{
+    const typographyBrandScale = [
+        {
+            className: 'typography-brand-1',
+            size: '3.75rem (60px)'
+        },
+        {
+            className: 'typography-brand-2',
+            size: '3.375rem (54px)'
+        },
+        {
+            className: 'typography-brand-3',
+            size: '3rem (48px)'
+        },
+        {
+            className: 'typography-brand-4',
+            size: '2.625rem (42px)'
+        },
+        {
+            className: 'typography-brand-5',
+            size: '2.25rem (36px)'
+        },
+        {
+            className: 'typography-brand-6',
+            size: '1.875rem (30px)'
+        },
+        {
+            className: 'typography-brand-7',
+            size: '1.5rem (24px)'
+        },
+        {
+            className: 'typography-brand-8',
+            size: '1.125rem (18px)'
+        },
+        {
+            className: 'typography-brand-9',
+            size: '1rem (16px)'
+        },
+        {
+            className: 'typography-brand-10',
+            size: '0.875rem (14px)'
+        }
+    ];
+    return React.createElement(Table, null, React.createElement(Table.Caption, null, "GEL brand typography tokens"), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Token"), React.createElement(Table.HeaderCell, null, "Value"), React.createElement(Table.HeaderCell, null, "Tailwind class"))), React.createElement(Table.Body, null, typographyBrandScale.map((i)=>React.createElement(Table.Row, {
+            key: i.className
+        }, React.createElement(Table.Cell, null, React.createElement("span", {
+            className: i.className
+        }, i.className.replace('typography-', ''))), React.createElement(Table.Cell, null, i.size), React.createElement(Table.Cell, null, i.className)))));
+};
+export const BodyFont = ()=>{
+    const typographyBrandScale = [
+        {
+            className: 'typography-body-1',
+            size: '3.75rem (60px)'
+        },
+        {
+            className: 'typography-body-2',
+            size: '3.375rem (54px)'
+        },
+        {
+            className: 'typography-body-3',
+            size: '3rem (48px)'
+        },
+        {
+            className: 'typography-body-4',
+            size: '2.625rem (42px)'
+        },
+        {
+            className: 'typography-body-5',
+            size: '2.25rem (36px)'
+        },
+        {
+            className: 'typography-body-6',
+            size: '1.875rem (30px)'
+        },
+        {
+            className: 'typography-body-7',
+            size: '1.5rem (24px)'
+        },
+        {
+            className: 'typography-body-8',
+            size: '1.125rem (18px)'
+        },
+        {
+            className: 'typography-body-9',
+            size: '1rem (16px)'
+        },
+        {
+            className: 'typography-body-10',
+            size: '0.875rem (14px)'
+        }
+    ];
+    return React.createElement(Table, null, React.createElement(Table.Caption, null, "GEL body typography tokens"), React.createElement(Table.Header, null, React.createElement(Table.HeaderRow, null, React.createElement(Table.HeaderCell, null, "Token"), React.createElement(Table.HeaderCell, null, "Value"), React.createElement(Table.HeaderCell, null, "Tailwind class"))), React.createElement(Table.Body, null, typographyBrandScale.map((i)=>React.createElement(Table.Row, {
+            key: i.className
+        }, React.createElement(Table.Cell, null, React.createElement("span", {
+            className: i.className
+        }, i.className.replace('typography-', ''))), React.createElement(Table.Cell, null, i.size), React.createElement(Table.Cell, null, i.className)))));
+};

package/dist/tailwind/tailwind-plugin.js

@@ -6,7 +6,7 @@ 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';
-export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , addBase , theme  })=>{
+export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , addVariant , addBase , theme  })=>{
     addBase({
         html: {
             color: theme('colors.text.DEFAULT')
@@ -23,6 +23,12 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
     addComponents(generateFontComponents(theme('typographySizes'), theme));
     addComponents(generateFormControlComponents(theme('formControl')));
     addComponents(generateDatePicker());
+    THEMES.forEach(({ name  })=>{
+        addVariant(`active-theme-${name.toLowerCase()}`, [
+            `[data-theme="${name.toLowerCase()}"] &`,
+            `.theme-${name.toLowerCase()} &`
+        ]);
+    });
 }, {
     theme: {
         screens: BREAKPOINTS,
@@ -129,6 +135,22 @@ export const WestpacUIKitBasePlugin = plugin(({ addComponents , addUtilities , a
                 xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg leading-[1.685rem]'
             }
         },
+        button: {
+            base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50 group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+            look: {
+                base: {
+                    primary: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50',
+                    hero: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50',
+                    faint: 'border border-border bg-light text-muted hover:bg-white active:bg-white',
+                    link: 'text-link underline'
+                },
+                soft: {
+                    primary: 'border border-primary bg-white text-text hover:text-white hover:bg-primary-70 active:bg-primary-50',
+                    hero: 'border border-hero bg-hero bg-white text-text hover:text-white hover:bg-hero-70 active:bg-hero-50',
+                    faint: 'border border-border bg-white text-muted hover:bg-light active:bg-light'
+                }
+            }
+        },
         focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus'
     }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -47,16 +47,18 @@
     "@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-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",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.35",
     "@testing-library/jest-dom": "^5.16.5",
@@ -64,7 +66,7 @@
     "@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": "^18.2.28",
     "@types/react-dom": "^18.2.1",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@vitejs/plugin-react-swc": "^3.3.0",

package/scaffold/component/scaffold.stories.hbs

@@ -3,7 +3,7 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { {{name}} } from './{{kebabCase name}}.component.js';
 
 const meta: Meta<typeof {{name}}> = {
-  title: 'Example/{{name}}',
+  title: 'Components/{{name}}',
   component: {{name}},
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],