@westpac/ui 0.6.0 → 0.7.0

package/src/components/selector/selector.stories.tsx

@@ -12,13 +12,10 @@ const HERE_IS_A_LABEL_B = 'Here is a label B';
 const HERE_IS_A_LABEL_C = 'Here is a label C';
 
 const meta: Meta<typeof Selector> = {
-  title: 'Example/Selector',
+  title: 'Components/Selector',
   component: Selector,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'padded',
-  },
 };
 
 export default meta;
@@ -27,7 +24,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory = () => {
+export const Default = () => {
   return (
     <Selector type="checkbox">
       {[
@@ -47,7 +44,7 @@ export const DefaultStory = () => {
 /**
  * > Radio usage example
  */
-export const RadioStory = () => {
+export const Radio = () => {
   return (
     <Selector type="radio">
       {[
@@ -67,7 +64,7 @@ export const RadioStory = () => {
 /**
  * > Radio usage example
  */
-export const CheckWithArrowStory = () => {
+export const CheckWithArrow = () => {
   return (
     <Selector type="radio">
       {[
@@ -87,7 +84,7 @@ export const CheckWithArrowStory = () => {
 /**
  * > Radio with state usage example
  */
-export const RadioWithStateStory = () => {
+export const RadioWithState = () => {
   const [selectedOption, setSelectedOption] = useState<string>();
   return (
     <>
@@ -117,7 +114,7 @@ export const RadioWithStateStory = () => {
 /**
  * > Check options with state usage example
  */
-export const CheckboxWithStateStory = () => {
+export const CheckboxWithState = () => {
   const [selectedOptions, setSelectedOptions] = useState<string[]>();
   return (
     <>
@@ -147,7 +144,7 @@ export const CheckboxWithStateStory = () => {
 /**
  * > Default usage example
  */
-export const LongTextStory = () => {
+export const LongText = () => {
   return (
     <Selector type="checkbox">
       {[
@@ -171,7 +168,7 @@ export const LongTextStory = () => {
 /**
  * > With hint text usage example
  */
-export const WithHintTextStory = () => {
+export const HintText = () => {
   return (
     <Selector type="checkbox">
       {[
@@ -211,7 +208,7 @@ export const WithHintTextStory = () => {
 /**
  * > With pictogram usage example
  */
-export const WithPictogramStory = () => {
+export const Pictogram = () => {
   return (
     <Selector type="checkbox">
       {[
@@ -271,7 +268,7 @@ export const WithPictogramStory = () => {
 /**
  * > With pictogram with different sizes usage example
  */
-export const WithPictogramDifferentSizesStory = () => {
+export const PictogramSizes = () => {
   return (
     <Selector type="checkbox">
       {[
@@ -331,7 +328,7 @@ export const WithPictogramDifferentSizesStory = () => {
 /**
  * > With icon and different size
  */
-export const WithIconsDifferentSizesStory = () => {
+export const IconsSizes = () => {
   return (
     <Selector type="checkbox">
       {[
@@ -391,7 +388,7 @@ export const WithIconsDifferentSizesStory = () => {
 /**
  * > With icon and secondary label
  */
-export const WithIconsAndSecondaryLabelStory = () => {
+export const IconsAndSecondaryLabel = () => {
   return (
     <Selector type="checkbox">
       {[
@@ -463,7 +460,7 @@ export const WithIconsAndSecondaryLabelStory = () => {
 /**
  * > Radio example with icons and secondary text
  */
-export const RadioWithIconsAndSecondaryLabelStory = () => {
+export const RadioWithIconsAndSecondaryLabel = () => {
   return (
     <Selector type="radio">
       {[
@@ -543,7 +540,7 @@ export const RadioWithIconsAndSecondaryLabelStory = () => {
 /**
  * > Disable state style example
  */
-export const DisableStateStory = () => {
+export const Disabled = () => {
   return (
     <Selector type="radio" value="A">
       {[

package/src/components/skip-link/skip-link.stories.tsx

@@ -1,15 +1,15 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { useRef } from 'react';
+
+import { Button } from '../index.js';
 
 import { SkipLink } from './skip-link.component.js';
 
 const meta: Meta<typeof SkipLink> = {
-  title: 'Example/SkipLink',
+  title: 'Components/SkipLink',
   component: SkipLink,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
@@ -18,9 +18,38 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
-  args: {
-    children: 'This is a text only for screen reader',
-    href: '#batata',
-  },
+export const Default = () => {
+  const skipLinkRef = useRef<HTMLAnchorElement>();
+  return (
+    <>
+      <SkipLink href="#skiptohere" ref={skipLinkRef}>
+        Skip to lower contents{' '}
+      </SkipLink>
+      <div>
+        ‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and
+        being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet —
+        it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read
+        fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to
+        be a book written about me, that there ought!’{' '}
+        <h3 id="skiptohere" className="typography-body-7 p-2 font-bold">
+          Will skip to here
+        </h3>{' '}
+        ‘It was much pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and
+        being ordered about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet —
+        it’s rather curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read
+        fairy-tales, I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to
+        be a book written about me, that there ought!’ ‘It was much pleasanter at home’, thought poor Alice, ‘when one
+        wasn’t always growing larger and smaller, and being ordered about by mice and rabbits. I almost wish I hadn’t
+        gone down that rabbit-hole — and yet — and yet — it’s rather curious, you know, this sort of life! I do wonder
+        what can have happened to me! When I used to read fairy-tales, I fancied that kind of thing never happened, and
+        now here I am in the middle of one! There ought to be a book written about me, that there ought!’ ‘It was much
+        pleasanter at home’, thought poor Alice, ‘when one wasn’t always growing larger and smaller, and being ordered
+        about by mice and rabbits. I almost wish I hadn’t gone down that rabbit-hole — and yet — and yet — it’s rather
+        curious, you know, this sort of life! I do wonder what can have happened to me! When I used to read fairy-tales,
+        I fancied that kind of thing never happened, and now here I am in the middle of one! There ought to be a book
+        written about me, that there ought!’
+      </div>
+      <Button onClick={() => skipLinkRef.current?.focus()}>Open content skipper</Button>
+    </>
+  );
 };

package/src/components/switch/switch.stories.tsx

@@ -3,30 +3,21 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Switch } from './switch.component.js';
 
 const meta: Meta<typeof Switch> = {
-  title: 'Example/Switch',
+  title: 'Components/Switch',
   component: Switch,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="flex p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const SIZES = ['small', 'medium', 'large', 'xlarge'];
+const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     size: 'medium',
     label: 'eStatements',
@@ -36,7 +27,7 @@ export const DefaultStory: Story = {
 /**
  * > Selected switch example
  */
-export const SelectedSwitch: Story = {
+export const Selected: Story = {
   args: {
     label: 'eStatements',
     checked: true,
@@ -46,9 +37,9 @@ export const SelectedSwitch: Story = {
 /**
  * > Switch size example
  */
-export const SwitchSizes = () => (
+export const Sizes = () => (
   <div>
-    {SIZES.map((size: any) => (
+    {SIZES.map(size => (
       <div key={size}>
         <h3 className="font-bold">{size}</h3>
         <div className="mb-2">
@@ -62,7 +53,7 @@ export const SwitchSizes = () => (
 /**
  * > Disabled switch example
  */
-export const DisabledSwitch: Story = {
+export const Disabled: Story = {
   args: {
     label: 'eStatements',
     isDisabled: true,
@@ -72,7 +63,7 @@ export const DisabledSwitch: Story = {
 /**
  * > Block switch example
  */
-export const BlockSwitch = () => (
+export const Block = () => (
   <div>
     <>
       <div className="mb-2">
@@ -91,7 +82,7 @@ export const BlockSwitch = () => (
 /**
  * > Responsive switch example
  */
-export const ResponsiveSizeSwitch: Story = {
+export const ResponsiveSize: Story = {
   args: {
     label: 'eStatements',
     size: { initial: 'small', md: 'large', lg: 'xlarge' },

package/src/components/switch/switch.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     slots: {
       base: 'mb-1 inline-flex items-center hover:cursor-pointer',
       switchDiv:
-        'border-borderDark after:shadow-switch relative box-content overflow-hidden border transition duration-[.3s] after:absolute after:left-0 after:top-0 after:block after:rounded-[50%] after:bg-white after:transition-all after:duration-[.3s]',
+        'relative box-content overflow-hidden border border-borderDark transition duration-[.3s] after:absolute after:left-0 after:top-0 after:block after:rounded-[50%] after:bg-white after:shadow-switch after:transition-all after:duration-[.3s]',
       label: 'pr-1',
     },
     variants: {

package/src/components/symbol/symbol.stories.tsx

@@ -5,13 +5,10 @@ import { SymbolProps, WBCLogo, WBCMultibrandSmallLogo } from './index.js';
 import * as symbols from './index.js';
 
 const meta: Meta<typeof Symbol> = {
-  title: 'Example/Symbol',
+  title: 'Foundation/Symbols',
   component: WBCLogo,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
@@ -20,7 +17,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
 };
 

package/src/components/table/components/cell/cell.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 border border-x-0 border-b-[1px] border-t-0 border-border p-2 text-left align-bottom',
+      base: 'typography-body-10 border border-x-0 border-b-[1px] border-t-0 border-border p-2 text-left align-top',
     },
     variants: {
       bordered: {

package/src/components/table/table.stories.tsx

@@ -3,19 +3,10 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Table } from './table.component.js';
 
 const meta: Meta<typeof Table> = {
-  title: 'Example/Table',
+  title: 'Components/Table',
   component: Table,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <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 DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: (
       <>
@@ -69,7 +60,7 @@ export const DefaultStory: Story = {
 /**
  * > Striped example
  */
-export const StripedTable: Story = {
+export const Striped: Story = {
   args: {
     striped: true,
     children: (
@@ -113,11 +104,58 @@ export const StripedTable: Story = {
 };
 
 /**
- * > Striped example
+ * > Bordered example
+ */
+export const Bordered: Story = {
+  args: {
+    bordered: true,
+    children: (
+      <>
+        <Table.Caption>
+          Caption this table width is: <em>(100%)</em>
+        </Table.Caption>
+        <Table.Header>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Type</Table.HeaderCell>
+            <Table.HeaderCell>Date Modified</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Header>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Games</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>6/7/2020</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Program Files</Table.Cell>
+            <Table.Cell>File folder</Table.Cell>
+            <Table.Cell>4/7/2021</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>bootmgr</Table.Cell>
+            <Table.Cell>System file</Table.Cell>
+            <Table.Cell>11/20/2010</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>log.txt</Table.Cell>
+            <Table.Cell>Text Document</Table.Cell>
+            <Table.Cell>1/18/2016</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+        <Table.Footer colspan={3}>Footer goes here and should colSpan all columns</Table.Footer>
+      </>
+    ),
+  },
+};
+
+/**
+ * > Bordered & Striped example
  */
-export const BorderedTable: Story = {
+export const BorderedAndStriped: Story = {
   args: {
     bordered: true,
+    striped: true,
     children: (
       <>
         <Table.Caption>
@@ -161,7 +199,7 @@ export const BorderedTable: Story = {
 /**
  * > Example of table with highlighted rows or cells
  */
-export const HighlightedRowCellTable: Story = {
+export const HighlightedRowCell: Story = {
   args: {
     children: (
       <>

package/src/components/tabs/components/tab/tab.styles.ts

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'typography-body-9 text-text flex cursor-pointer px-3 py-2 transition-colors hover:bg-white',
+    base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white',
     variants: {
       look: {
-        default: 'border-border border bg-white',
+        default: 'border border-border bg-white',
         material: '',
       },
       selected: {
@@ -58,36 +58,36 @@ export const styles = tv(
         color: 'primary',
         look: 'default',
         selected: false,
-        className: 'border-primary-90 bg-primary hover:bg-primary-70 text-white',
+        className: 'border-primary-90 bg-primary text-white hover:bg-primary-70',
       },
       {
         color: 'hero',
         selected: false,
         look: 'default',
-        className: 'border-hero-90 bg-hero hover:bg-hero-70 text-white',
+        className: 'border-hero-90 bg-hero text-white hover:bg-hero-70',
       },
       // Material look design
       {
         look: 'material',
         orientation: 'horizontal',
-        className: 'border-r-border border-b-4 border-r border-b-white last:border-r-0',
+        className: 'border-b-4 border-r border-b-white border-r-border last:border-r-0',
       },
       {
         look: 'material',
         orientation: 'vertical',
-        className: 'border-b-border border-b border-l-4 border-l-white last:border-b-0',
+        className: 'border-b border-l-4 border-b-border border-l-white last:border-b-0',
       },
       {
         look: 'material',
         selected: true,
         orientation: 'horizontal',
-        className: 'border-bottom text-text border-b-white',
+        className: 'border-bottom border-b-white text-text',
       },
       {
         look: 'material',
         selected: true,
         orientation: 'vertical',
-        className: 'border-left text-text border-l-transparent',
+        className: 'border-left border-l-transparent text-text',
       },
       {
         color: 'primary',

package/src/components/tabs/components/tab-panel/tab-panel.styles.ts

@@ -5,7 +5,7 @@ export const styles = tv(
     base: 'flex-1 bg-white p-4',
     variants: {
       look: {
-        default: 'border-border border',
+        default: 'border border-border',
         material: '',
       },
       isFocused: {

package/src/components/tabs/tabs.stories.tsx

@@ -4,19 +4,24 @@ import { Key, useState } from 'react';
 import { Tabs } from './tabs.component.js';
 
 const meta: Meta<typeof Tabs> = {
-  title: 'Example/Tabs',
+  title: 'Components/Tabs',
   component: Tabs,
   tags: ['autodocs'],
   decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
+    (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
+      Tabs.Panel.displayName = 'Tabs.Panel';
+
+      return <Story />;
+    },
   ],
-  parameters: {
-    layout: 'fullscreen',
-  },
 };
 
 export default meta;
@@ -25,7 +30,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     look: 'default',
     color: undefined,
@@ -48,7 +53,7 @@ export const DefaultStory: Story = {
 /**
  * > Default usage example
  */
-export const JustifyStory: Story = {
+export const Justify: Story = {
   args: {
     justify: true,
     children: [
@@ -68,7 +73,7 @@ export const JustifyStory: Story = {
 /**
  * > Default usage example
  */
-export const ColorStory: Story = {
+export const Color: Story = {
   args: {
     justify: true,
     color: 'hero',
@@ -89,7 +94,7 @@ export const ColorStory: Story = {
 /**
  * > Vertical story usage example
  */
-export const VerticalStory: Story = {
+export const Vertical: Story = {
   args: {
     orientation: 'vertical',
     children: [
@@ -105,73 +110,3 @@ export const VerticalStory: Story = {
     ],
   },
 };
-
-/**
- * > Vertical story usage example
- */
-export const MaterialLookStory: Story = {
-  args: {
-    look: 'material',
-    color: 'primary',
-    children: [
-      <Tabs.Panel key="FoR" title="Founding of Rome">
-        Arma virumque cano, Troiae qui primus ab oris.
-      </Tabs.Panel>,
-      <Tabs.Panel key="MaR" title="Monarchy and Republic">
-        Senatus Populusque Romanus.
-      </Tabs.Panel>,
-      <Tabs.Panel key="Emp" title="Empire">
-        Alea jacta est.
-      </Tabs.Panel>,
-    ],
-  },
-};
-
-/**
- * > Vertical story usage example
- */
-export const VerticalMaterialLookStory: Story = {
-  args: {
-    look: 'material',
-    color: 'primary',
-    orientation: 'vertical',
-    children: [
-      <Tabs.Panel key="FoR" title="Founding of Rome">
-        Arma virumque cano, Troiae qui primus ab oris
-      </Tabs.Panel>,
-      <Tabs.Panel key="MaR" title="Monarchy and Republic">
-        Senatus Populusque Romanus.
-      </Tabs.Panel>,
-      <Tabs.Panel key="Emp" title="Empire">
-        Alea jacta est.
-      </Tabs.Panel>,
-    ],
-  },
-};
-
-/**
- * > Vertical story usage example
- */
-export const ControlledMaterialLookStory: Story = {
-  render: () => {
-    const [selectedKey, setSelectedKey] = useState<Key>('FoR');
-    return (
-      <Tabs
-        selectedKey={selectedKey}
-        onSelectionChange={key => {
-          setSelectedKey(key);
-        }}
-      >
-        <Tabs.Panel key="FoR" title="Founding of Rome">
-          Arma virumque cano, Troiae qui primus ab oris.
-        </Tabs.Panel>
-        <Tabs.Panel key="MaR" title="Monarchy and Republic">
-          Senatus Populusque Romanus.
-        </Tabs.Panel>
-        <Tabs.Panel key="Emp" title="Empire">
-          Alea jacta est.
-        </Tabs.Panel>
-      </Tabs>
-    );
-  },
-};