@westpac/ui 0.5.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.component.tsx

@@ -1,18 +1,30 @@
 import React, { useId, useRef } from 'react';
-import { VisuallyHidden, useCheckbox, useFocusRing } from 'react-aria';
+import { VisuallyHidden, mergeProps, useCheckbox, useFocusRing } from 'react-aria';
 import { useToggleState } from 'react-stately';
 
 import { styles as switchStyles } from './switch.styles.js';
 import { type SwitchProps } from './switch.types.js';
 
-export function Switch({ className, label, size = 'medium', block = false, isDisabled, ...props }: SwitchProps) {
-  const state = useToggleState(props);
+export function Switch({
+  className,
+  label,
+  size = 'medium',
+  block = false,
+  checked = false,
+  isDisabled,
+  ...props
+}: SwitchProps) {
+  const state = useToggleState({ ...props, defaultSelected: checked });
   const labelId = useId();
   const ref = useRef(null);
-  const { inputProps } = useCheckbox({ isDisabled, 'aria-labelledby': labelId, ...props }, state, ref);
   const { isSelected } = state;
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const styles = switchStyles({ block, isFocusVisible, isSelected, isDisabled, size });
+  const { inputProps } = useCheckbox(
+    { isDisabled, 'aria-labelledby': labelId, defaultSelected: checked, ...props },
+    state,
+    ref,
+  );
+  const { isFocused, focusProps } = useFocusRing();
+  const styles = switchStyles({ block, isFocused, isSelected, isDisabled, size });
 
   return (
     <label className={styles.base({ className })}>
@@ -20,7 +32,7 @@ export function Switch({ className, label, size = 'medium', block = false, isDis
         {label}
       </span>
       <VisuallyHidden>
-        <input {...inputProps} {...focusProps} ref={ref} />
+        <input {...mergeProps(inputProps, focusProps)} ref={ref} />
       </VisuallyHidden>
       <div className={styles.switchDiv()} />
     </label>

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,19 +27,19 @@ export const DefaultStory: Story = {
 /**
  * > Selected switch example
  */
-export const SelectedSwitch: Story = {
+export const Selected: Story = {
   args: {
     label: 'eStatements',
-    isSelected: true,
+    checked: true,
   },
 };
 
 /**
  * > 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

@@ -23,7 +23,7 @@ export const styles = tv(
           switchDiv: 'h-[2.875rem] w-14 rounded-[2.875rem] after:h-[2.875rem] after:w-[2.875rem]',
         },
       },
-      isFocusVisible: {
+      isFocused: {
         true: {
           switchDiv: 'focus-outline',
         },

package/src/components/switch/switch.types.ts

@@ -8,6 +8,10 @@ export type SwitchProps = {
    * Whether to display switch as block
    */
   block?: boolean;
+  /**
+   * Default checked
+   */
+  checked?: boolean;
   /**
    * Classname for overriding base style
    */
@@ -16,5 +20,5 @@ export type SwitchProps = {
    * Label for the switch
    */
   label: string;
-} & Omit<AriaCheckboxProps, 'children'> &
+} & Omit<AriaCheckboxProps, 'children' | 'isSelected'> &
   Pick<VariantProps<typeof styles>, 'size'>;

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.component.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { useTab } from 'react-aria';
+import { mergeProps, useFocusRing, useTab } from 'react-aria';
 
 import { styles } from './tab.styles.js';
 import { type TabProps } from './tab.types.js';
@@ -7,10 +7,11 @@ import { type TabProps } from './tab.types.js';
 export function Tab({ item: { key, rendered }, state, orientation, justify, color, look }: TabProps) {
   const ref = useRef(null);
   const { tabProps } = useTab({ key }, state, ref);
+  const { isFocusVisible, focusProps } = useFocusRing();
   return (
     <div
-      {...tabProps}
-      className={styles({ selected: key === state.selectedKey, orientation, justify, color, look })}
+      {...mergeProps(tabProps, focusProps)}
+      className={styles({ selected: key === state.selectedKey, orientation, justify, color, look, isFocusVisible })}
       ref={ref}
     >
       {rendered}

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white focus:focus-outline',
+    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',
@@ -23,6 +23,10 @@ export const styles = tv(
         primary: '',
         hero: '',
       },
+      isFocusVisible: {
+        true: 'focus-outline',
+        false: 'outline-none',
+      },
     },
     compoundVariants: [
       {

package/src/components/tabs/components/tab-panel/tab-panel.component.tsx

@@ -1,14 +1,15 @@
 import React, { useRef } from 'react';
-import { useTabPanel } from 'react-aria';
+import { mergeProps, useFocusRing, useTabPanel } from 'react-aria';
 
 import { styles } from './tab-panel.styles.js';
 import { type TabPanelProps } from './tab-panel.types.js';
 
 export function TabPanel({ className, state, look, ...props }: TabPanelProps) {
   const ref = useRef(null);
+  const { isFocused, focusProps } = useFocusRing();
   const { tabPanelProps } = useTabPanel({ ...props }, state, ref);
   return (
-    <div {...tabPanelProps} ref={ref} className={styles({ className, look })}>
+    <div {...mergeProps(tabPanelProps, focusProps)} ref={ref} className={styles({ className, look, isFocused })}>
       {state.selectedItem?.props.children}
     </div>
   );

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

@@ -2,12 +2,15 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex-1 bg-white p-4 focus:focus-outline',
+    base: 'flex-1 bg-white p-4',
     variants: {
       look: {
         default: 'border border-border',
         material: '',
       },
+      isFocused: {
+        true: 'outline-none',
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },