@westpac/ui 0.7.1 → 0.9.0

package/src/components/well/well.stories.tsx

@@ -1,71 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Well } from './well.component.js';
-
-const meta: Meta<typeof Well> = {
-  title: 'Components/Well',
-  component: Well,
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Default usage example
- */
-export const Default: Story = {
-  args: {
-    children: "Look, I'm in a well",
-  },
-};
-
-/**
- * > Nested usage example
- */
-export const Nested: Story = {
-  args: {
-    children: (
-      <>
-        I am outside
-        <Well color="white">I am inside</Well>
-      </>
-    ),
-  },
-};
-
-/**
- * > Tag as <article>
- */
-export const CustomTag: Story = {
-  args: {
-    tag: 'article',
-    children: "Look, I'm in a well",
-  },
-};
-
-/**
- * > Nested tag as <article>
- */
-export const CustomTagNested: Story = {
-  args: {
-    tag: 'article',
-    children: (
-      <>
-        I am outside
-        <Well color="white">I am inside</Well>
-      </>
-    ),
-  },
-};
-
-/**
- * > Tag as <aside> with child <san>, passed as a component
- */
-export const ComplexCustomTagNested: Story = {
-  args: {
-    tag: 'aside',
-    children: <span>Look, I'm in a well</span>,
-  },
-};

package/src/stories/foundation/breakpoints.stories.tsx

@@ -1,55 +0,0 @@
-import { type Meta, StoryFn } from '@storybook/react';
-
-import { Table } from '../../components/index.js';
-
-const meta: Meta = {
-  title: 'Foundation/Breakpoints',
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-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 const Breakpoints = () => (
-  <Table>
-    <Table.Caption>GEL breakpoint tokens</Table.Caption>
-    <Table.Header>
-      <Table.HeaderRow>
-        <Table.HeaderCell>Token</Table.HeaderCell>
-        <Table.HeaderCell>Value</Table.HeaderCell>
-        <Table.HeaderCell>Tailwind prefix</Table.HeaderCell>
-      </Table.HeaderRow>
-    </Table.Header>
-    <Table.Body>
-      <Table.Row>
-        <Table.Cell>xsl</Table.Cell>
-        <Table.Cell>0px and up</Table.Cell>
-        <Table.Cell>xsl:</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>sm</Table.Cell>
-        <Table.Cell>768px and up</Table.Cell>
-        <Table.Cell>sm:</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>md</Table.Cell>
-        <Table.Cell>992 and up</Table.Cell>
-        <Table.Cell>md:</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>lg</Table.Cell>
-        <Table.Cell>1200 and up</Table.Cell>
-        <Table.Cell>lg:</Table.Cell>
-      </Table.Row>
-      <Table.Row>
-        <Table.Cell>xl</Table.Cell>
-        <Table.Cell>1900 and up</Table.Cell>
-        <Table.Cell>xl:</Table.Cell>
-      </Table.Row>
-    </Table.Body>
-  </Table>
-);

package/src/stories/foundation/colours.stories.tsx

@@ -1,380 +0,0 @@
-import { type Meta, StoryFn, StoryObj } from '@storybook/react';
-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: Meta = {
-  title: 'Foundation/Colours',
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// NOTE: Although unused this needs to be here so all colors load correctly
-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',
-  ],
-};
-
-/**
- * Examples for all colors that change with brand
- */
-export const BrandColors: Story = {
-  render: (args, { globals: { theme } }) => {
-    const currThemeToken = theme ? theme : 'WBC';
-    const currColors = ALL_THEMES.find(brand => brand.code === currThemeToken)?.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 (
-      <>
-        <div className="p-2">
-          <Field label="Select a tint:">
-            <Select onChange={e => setSelectedTint(e.target.value)}>
-              {TINTS.map(tint => (
-                <option value={tint} key={tint}>
-                  {tint}
-                </option>
-              ))}
-            </Select>
-          </Field>
-        </div>
-        <div className="flex flex-wrap">
-          {brandColors.map(color => (
-            <div className="w-[33%] min-w-[200px] max-w-[300px] p-2" key={color}>
-              <div className={`bg-${color}${tintString} h-[80px]`} />
-              <div className="divide-y divide-border border border-border p-2">
-                <div className="pb-2 font-bold">{color}</div>
-                <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}${tintString}`}</div>
-                {/* Below comments to get rid of type nightmare when trying to get hex value */}
-                {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                {/* @ts-ignore */}
-                <div className="typography-body-10 pt-2 font-light">{currColors[color][selectedTint]}</div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </>
-    );
-  },
-};
-
-/**
- * All reserved colors that do not change with brand
- */
-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 (
-    <>
-      <div className="p-2">
-        <Field label="Select a tint:">
-          <Select onChange={e => setSelectedTint(e.target.value)}>
-            {TINTS.map(tint => (
-              <option value={tint} key={tint}>
-                {tint}
-              </option>
-            ))}
-          </Select>
-        </Field>
-      </div>
-      <div className="flex flex-wrap">
-        {reservedColors.map(color => (
-          <div className="w-[33%] min-w-[200px] max-w-[300px] p-2" key={color}>
-            <div className={`bg-${color}${tintString} h-[80px]`} />
-            <div className="divide-y divide-border border border-border p-2">
-              <div className="pb-2 font-bold">{color}</div>
-              <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-${color}${tintString}`}</div>
-              {/* Below comments to get rid of type nightmare when trying to get hex value */}
-              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-              {/* @ts-ignore */}
-              <div className="typography-body-10 pt-2 font-light">{baseColorTints[color][selectedTint]}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </>
-  );
-};
-
-/**
- * Colors that are reserved but have no extra tints
- */
-export const ReservedWithNoTints = () => (
-  <div className="flex">
-    <div className="w-[33%] min-w-[200px] max-w-[300px] p-2">
-      <div className={`h-[80px] bg-black`} />
-      <div className="divide-y divide-border border border-border p-2">
-        <div className="pb-2 font-bold">black</div>
-        <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-black`}</div>
-        <div className="typography-body-10 pt-2 font-light">#000</div>
-      </div>
-    </div>
-    <div className="w-[33%] min-w-[200px] max-w-[300px] p-2">
-      <div className={`h-[80px] border border-border bg-white`} />
-      <div className="divide-y divide-border border border-border p-2">
-        <div className="pb-2 font-bold">white</div>
-        <div className="typography-body-10 py-2 font-light">{`Tailwind eg: bg-white`}</div>
-        <div className="typography-body-10 pt-2 font-light">#FFF</div>
-      </div>
-    </div>
-  </div>
-);

package/src/stories/foundation/theme.stories.tsx

@@ -1,29 +0,0 @@
-import { type Meta, StoryFn } from '@storybook/react';
-
-const meta: Meta = {
-  title: 'Foundation/Theme',
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-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 const Theme = () => (
-  /**
-   * Valid theme tokens:
-   * bom
-   * bsa
-   * btfg
-   * rams
-   * stg
-   * wbc
-   * wbg
-   */
-  <div data-theme="wbc">Click on show code</div>
-);

package/src/stories/foundation/typography.stories.tsx

@@ -1,93 +0,0 @@
-import { type Meta, StoryFn } from '@storybook/react';
-
-import { Table } from '../../components/index.js';
-
-const meta: Meta = {
-  title: 'Foundation/Typography',
-  tags: ['autodocs'],
-  decorators: [(Story: StoryFn) => <Story />],
-};
-
-export default meta;
-
-/**
- * Brand fonts
- */
-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 (
-    <Table>
-      <Table.Caption>GEL brand typography tokens</Table.Caption>
-      <Table.Header>
-        <Table.HeaderRow>
-          <Table.HeaderCell>Token</Table.HeaderCell>
-          <Table.HeaderCell>Value</Table.HeaderCell>
-          <Table.HeaderCell>Tailwind class</Table.HeaderCell>
-        </Table.HeaderRow>
-      </Table.Header>
-      <Table.Body>
-        {typographyBrandScale.map(i => (
-          <Table.Row key={i.className}>
-            <Table.Cell>
-              <span className={i.className}>{i.className.replace('typography-', '')}</span>
-            </Table.Cell>
-            <Table.Cell>{i.size}</Table.Cell>
-            <Table.Cell>{i.className}</Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
-  );
-};
-
-/**
- * Body fonts
- */
-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 (
-    <Table>
-      <Table.Caption>GEL body typography tokens</Table.Caption>
-      <Table.Header>
-        <Table.HeaderRow>
-          <Table.HeaderCell>Token</Table.HeaderCell>
-          <Table.HeaderCell>Value</Table.HeaderCell>
-          <Table.HeaderCell>Tailwind class</Table.HeaderCell>
-        </Table.HeaderRow>
-      </Table.Header>
-      <Table.Body>
-        {typographyBrandScale.map(i => (
-          <Table.Row key={i.className}>
-            <Table.Cell>
-              <span className={i.className}>{i.className.replace('typography-', '')}</span>
-            </Table.Cell>
-            <Table.Cell>{i.size}</Table.Cell>
-            <Table.Cell>{i.className}</Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
-  );
-};

package/src/tailwind/types/theme.types.ts

@@ -1,37 +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;