@westpac/ui 0.6.0 → 0.7.0

package/src/components/textarea/textarea.stories.tsx

@@ -1,21 +1,14 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
+import { Field } from '../field/index.js';
+
 import { Textarea } from './textarea.component.js';
 
 const meta: Meta<typeof Textarea> = {
-  title: 'Example/Textarea',
+  title: 'Components/Textarea',
   component: Textarea,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="flex justify-center p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -24,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     placeholder: 'placeholder',
     size: 'medium',
@@ -34,7 +27,7 @@ export const DefaultStory: Story = {
 /**
  * > Invalid usage example
  */
-export const InvalidStory: Story = {
+export const Invalid: Story = {
   args: {
     invalid: true,
   },
@@ -43,7 +36,7 @@ export const InvalidStory: Story = {
 /**
  * > Disabled usage example
  */
-export const DisabledStory: Story = {
+export const Disabled: Story = {
   args: {
     disabled: true,
   },
@@ -52,8 +45,26 @@ export const DisabledStory: Story = {
 /**
  * > ReadOnly usage example
  */
-export const ReadOnlyStory: Story = {
+export const ReadOnly: Story = {
   args: {
     readOnly: true,
   },
 };
+
+/**
+ * > Form field example
+ */
+export const FormField: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Field
+        label="Are you an existing customer?"
+        hintMessage="Hint: choose from one of the following options"
+        errorMessage="This is an inline error message"
+      >
+        <Textarea />
+      </Field>
+    );
+  },
+};

package/src/components/visually-hidden/visually-hidden.stories.tsx

@@ -3,13 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { VisuallyHidden } from './visually-hidden.component.js';
 
 const meta: Meta<typeof VisuallyHidden> = {
-  title: 'Example/VisuallyHidden',
+  title: 'Components/VisuallyHidden',
   component: VisuallyHidden,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
@@ -21,7 +18,7 @@ type Story = StoryObj<typeof meta>;
  * Note: The examples below the following headings are visibility hidden.
  * Best you inspect what is being rendered using your browser’s DevTools.
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: 'Only screen reader can read this',
   },

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

@@ -3,19 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Well } from './well.component.js';
 
 const meta: Meta<typeof Well> = {
-  title: 'Example/Well',
+  title: 'Components/Well',
   component: Well,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div style={{ padding: '3rem' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -24,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultUsage: Story = {
+export const Default: Story = {
   args: {
     children: "Look, I'm in a well",
   },
@@ -33,7 +24,7 @@ export const DefaultUsage: Story = {
 /**
  * > Nested usage example
  */
-export const NestedUsage: Story = {
+export const Nested: Story = {
   args: {
     children: (
       <>
@@ -47,7 +38,7 @@ export const NestedUsage: Story = {
 /**
  * > Tag as <article>
  */
-export const CustomTagUsage: Story = {
+export const CustomTag: Story = {
   args: {
     tag: 'article',
     children: "Look, I'm in a well",
@@ -57,7 +48,7 @@ export const CustomTagUsage: Story = {
 /**
  * > Nested tag as <article>
  */
-export const CustomTagNestedUsage: Story = {
+export const CustomTagNested: Story = {
   args: {
     tag: 'article',
     children: (
@@ -72,7 +63,7 @@ export const CustomTagNestedUsage: Story = {
 /**
  * > Tag as <aside> with child <san>, passed as a component
  */
-export const ComplexCustomTagNestedUsage: Story = {
+export const ComplexCustomTagNested: Story = {
   args: {
     tag: 'aside',
     children: <span>Look, I'm in a well</span>,

package/src/css/global.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  @apply typography-body-10;
+}

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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,381 @@
+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',
+      '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 (
+      <>
+        <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

@@ -0,0 +1,29 @@
+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>
+);