@westpac/ui 0.6.0 → 0.7.0

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

@@ -0,0 +1,93 @@
+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/tailwind-plugin.ts

@@ -13,7 +13,7 @@ import { createFontSizes, generateFontComponents, generateFormControlComponents
  */
 export const WestpacUIKitBasePlugin = plugin(
   // Adding the typography components
-  ({ addComponents, addUtilities, addBase, theme }) => {
+  ({ addComponents, addUtilities, addVariant, addBase, theme }) => {
     addBase({
       html: { color: theme('colors.text.DEFAULT') },
     });
@@ -27,6 +27,12 @@ export const WestpacUIKitBasePlugin = plugin(
     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: {
@@ -131,6 +137,23 @@ export const WestpacUIKitBasePlugin = plugin(
           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/dist/components/button-group/components/button/button.stories.d.ts

@@ -1,9 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { Button } from './button.component.js';
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-/**
- * > Only a default usage example as most things are controlled by ButtonGroup
- */
-export declare const DefaultStory: Story;

package/dist/components/button-group/components/button/button.stories.js

@@ -1,23 +0,0 @@
-import { Button } from './button.component.js';
-const meta = {
-    title: 'Example/ButtonGroup/Button',
-    component: Button,
-    tags: [
-        'autodocs'
-    ],
-    decorators: [
-        (Story)=>React.createElement("div", {
-                className: "p-3"
-            }, React.createElement(Story, null))
-    ],
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-export default meta;
-export const DefaultStory = {
-    args: {
-        children: 'Option 1',
-        value: 'Option 1'
-    }
-};

package/src/components/button-group/components/button/button.stories.tsx

@@ -1,32 +0,0 @@
-import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-
-import { Button } from './button.component.js';
-
-const meta: Meta<typeof Button> = {
-  title: 'Example/ButtonGroup/Button',
-  component: Button,
-  tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * > Only a default usage example as most things are controlled by ButtonGroup
- */
-export const DefaultStory: Story = {
-  args: {
-    children: 'Option 1',
-    value: 'Option 1',
-  },
-};

package/src/stories/Introduction.mdx

@@ -1,213 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
-
-<style>
-  {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 700;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-    }
-
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
-      }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span,
-    .link-item p {
-      margin: 0;
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
-
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-  `}
-</style>
-
-# Welcome to Westpac-x/UI Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>stories/Introduction.stories.mdx</code>
-</div>