@westpac/ui 0.7.1 → 0.9.0

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

@@ -1,386 +0,0 @@
-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',
-            '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.js

@@ -1,16 +0,0 @@
-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.js

@@ -1,109 +0,0 @@
-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/types/theme.types.d.ts

@@ -1 +0,0 @@
-export type SPACING_KEY = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35;

package/dist/tailwind/types/theme.types.js

@@ -1 +0,0 @@
-export { };

package/scaffold/component/scaffold.component.hbs

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { styles } from './{{kebabCase name}}.styles.js';
-import { type {{name}}Props } from './{{kebabCase name}}.types.js';
-
-export function {{name}}({ className, tag: Tag = 'div', children, ...props }: {{name}}Props) {
-  return (
-    <Tag className={styles({ className })} {...props}>
-      {children}
-    </Tag>
-  );
-}

package/scaffold/component/scaffold.index.hbs

@@ -1,2 +0,0 @@
-export { {{name}} } from './{{kebabCase name}}.component.js';
-export { type {{name}}Props } from './{{kebabCase name}}.types.js';

package/scaffold/component/scaffold.spec.hbs

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react';
-
-import { {{name}} } from './{{kebabCase name}}.component.js';
-import { styles } from './{{kebabCase name}}.styles.js';
-
-describe('{{name}}', () => {
-  it('renders the component', () => {
-    const { container } = render(<{{name}} />);
-    expect(container).toBeInTheDocument();
-  });
-  it('renders the style correctly', () => {
-    const style = styles();
-    // TODO: use some variants for test
-    expect(style).toBe('');
-  });
-});

package/scaffold/component/scaffold.stories.hbs

@@ -1,23 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { {{name}} } from './{{kebabCase name}}.component.js';
-
-const meta: Meta<typeof {{name}}> = {
-  title: 'Components/{{name}}',
-  component: {{name}},
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const DefaultStory: Story = {
-  args: {},
-};

package/scaffold/component/scaffold.styles.hbs

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

package/scaffold/component/scaffold.types.hbs

@@ -1,12 +0,0 @@
-import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './{{kebabCase name}}.styles.js';
-
-export type {{name}}Props = {
-  /**
-   * Tag to render
-   */
-  tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;