@westpac/ui 0.7.0 → 0.8.0

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

@@ -1,387 +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',
-            '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.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/src/components/accordion/accordion.stories.tsx

@@ -1,135 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { Key, useState } from 'react';
-
-import { Button } from '../index.js';
-
-import { Accordion } from './accordion.component.js';
-
-const meta: Meta<typeof Accordion> = {
-  title: 'Components/Accordion',
-  component: Accordion,
-  tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => {
-      /**
-       * NOTE:
-       * Needed to change displayName here so subcomponent shows correct name in code view
-       * Could not change it on the component as Item from react-stately is used in three components
-       * and one displayName would overwrite the others
-       */
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      Accordion.Item.displayName = 'Accordion.Item';
-
-      return <Story />;
-    },
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    rounded: true,
-    color: undefined,
-    children: [
-      { key: 'files', title: 'My files' },
-      { key: 'shared', title: 'Shared with us' },
-      { key: 'last', title: 'Last item' },
-    ].map(({ key, title }) => (
-      <Accordion.Item key={key} title={title}>
-        <h3>{title}</h3>
-        <p>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, nobis itaque iste sequi, pariatur, nam
-          reiciendis quasi illum nulla aliquid mollitia corrupti nostrum incidunt? At minima error nobis ullam!
-        </p>
-        <Button>Test</Button>
-      </Accordion.Item>
-    )),
-  },
-};
-
-/**
- * > Primary color usage example
- */
-export const PrimaryColor: Story = {
-  args: {
-    color: 'primary',
-    rounded: false,
-  },
-  render: ({ ...props }) => (
-    <Accordion {...props}>
-      {[
-        { key: 'colors', title: 'Your colors' },
-        { key: 'shared', title: 'Shared color' },
-        { key: 'last', title: 'Last item' },
-      ].map(({ key, title }) => (
-        <Accordion.Item key={key} title={title}>
-          <p>{title}</p>
-          <Button>Test</Button>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  ),
-};
-
-/**
- * > Hero color usage example
- */
-export const HeroColor: Story = {
-  args: {
-    color: 'hero',
-    rounded: false,
-  },
-  render: ({ ...props }) => (
-    <Accordion {...props}>
-      {[
-        { key: 'files', title: 'My files' },
-        { key: 'shared', title: 'my shared with you' },
-        { key: 'last', title: 'Last item' },
-      ].map(({ key, title }) => (
-        <Accordion.Item key={key} title={title}>
-          <p>{title}</p>
-          <Button>Test</Button>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  ),
-};
-
-/**
- * > Controlled example
- */
-export const ControlledColor: Story = {
-  args: {
-    color: 'hero',
-    rounded: false,
-  },
-  render: ({ ...props }) => {
-    const [expandedKeys, setExpandedKeys] = useState<Set<Key>>();
-    return (
-      <Accordion
-        {...props}
-        expandedKeys={expandedKeys}
-        onExpandedChange={keys => {
-          setExpandedKeys(keys);
-        }}
-      >
-        {[
-          { key: 'files', title: 'Your files' },
-          { key: 'shared', title: 'Shared with you' },
-          { key: 'last', title: 'Last item' },
-        ].map(({ key, title }) => (
-          <Accordion.Item key={key} title={title}>
-            <p>{title}</p>
-            <Button>Test</Button>
-          </Accordion.Item>
-        ))}
-      </Accordion>
-    );
-  },
-};