@westpac/ui 0.6.0 → 0.7.0

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

@@ -5,19 +5,10 @@ import { ArrowRightIcon, PdfFileIcon } from '../icon/index.js';
 import { Link } from './link.component.js';
 
 const meta: Meta<typeof Link> = {
-  title: 'Example/Link',
+  title: 'Components/Link',
   component: Link,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-1">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
@@ -26,21 +17,21 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: "Look, I'm a default link",
     href: '#',
   },
 };
 
-const SIZES = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+const SIZES = ['xsmall', 'small', 'medium', 'large', 'xlarge'] as const;
 
 /**
  * > Standalone link with iconSizes, arrowRight is default but can be overridden.
  * > If no icon is passed it defaults to ArrowRightIcon in the iconBefore position
  */
-export const StandaloneLink = () => (
-  <div className="space-y-1 pl-1">
+export const Standalone = () => (
+  <div className="space-y-1">
     <h1 className="font-bold">Default</h1>
     <Link href="#">Look I'm a standalone link</Link>
     <h1 className="font-bold">Icon Before override</h1>
@@ -57,8 +48,8 @@ export const StandaloneLink = () => (
 /**
  * > Inline link example
  */
-export const InlineLink = () => (
-  <div className="space-y-1 p-1">
+export const Inline = () => (
+  <div className="space-y-1">
     <p className="typography-body-10">
       Lorem ipsum dolor{' '}
       <Link href="#" type="inline">
@@ -101,8 +92,8 @@ export const InlineLink = () => (
  * > example of icon sizes
  */
 export const IconSizes = () => (
-  <div className="space-y-1 pl-1">
-    {SIZES.map((size: any) => (
+  <div className="space-y-1">
+    {SIZES.map(size => (
       <div key={size}>
         <h1 className="font-bold">{size}</h1>
         <Link href="#" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>

package/src/components/link/link.styles.ts

@@ -4,19 +4,18 @@ export const styles = tv(
   {
     slots: {
       base: 'inline-flex bg-[transparent] hover:underline',
-      text: 'typography-body-10',
       iconBefore: 'mr-1',
       iconAfter: 'ml-1',
     },
     variants: {
       type: {
         inline: {
-          base: 'text-link items-baseline',
+          base: 'items-baseline text-link',
           iconBefore: 'self-center',
           iconAfter: 'self-center',
         },
         standalone: {
-          base: 'text-text items-center',
+          base: 'items-center text-text',
         },
       },
       underline: {

package/src/components/list/list.stories.tsx

@@ -5,31 +5,22 @@ import { AndroidIcon } from '../icon/index.js';
 import { List } from './list.component.js';
 
 const meta: Meta<typeof List> = {
-  title: 'Example/List',
+  title: 'Components/List',
   component: List,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-2">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'center',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const LOOKS = ['primary', 'hero', 'neutral', 'success', 'danger', 'link'];
-const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered'];
+const LOOKS = ['primary', 'hero', 'neutral', 'success', 'danger', 'link'] as const;
+const TYPES = ['bullet', 'link', 'tick', 'cross', 'unstyled', 'icon', 'ordered'] as const;
 
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: [
       <List.Item>Styled list</List.Item>,
@@ -42,8 +33,8 @@ export const DefaultStory: Story = {
 /**
  * > Type of list
  */
-export const ListTypes = () =>
-  TYPES.map((type: any) => (
+export const Types = () =>
+  TYPES.map(type => (
     <div className="mb-2" key={type}>
       <h1 className="typography-body-8">{type}</h1>
       <List type={type} icon={type === 'icon' ? AndroidIcon : undefined}>
@@ -63,8 +54,8 @@ export const ListTypes = () =>
 /**
  * > Type of list
  */
-export const ListLooks = () =>
-  LOOKS.map((look: any) => (
+export const Looks = () =>
+  LOOKS.map(look => (
     <div className="mb-2" key={look}>
       <h1 className="typography-body-8">{look}</h1>
       <List look={look} type="bullet">
@@ -84,7 +75,7 @@ export const ListLooks = () =>
 /**
  * Nested list
  */
-export const NestedList = () => (
+export const Nested = () => (
   <div>
     <List type="bullet" assistiveText="test">
       <List.Item>Styled list</List.Item>
@@ -112,7 +103,7 @@ export const NestedList = () => (
 /**
  * List spacing
  */
-export const ListSpacing = () => (
+export const Spacing = () => (
   <div>
     <h1 className="typography-body-10 mb-2">Medium</h1>
     <List type="bullet" className="mb-4" spacing="medium">

package/src/components/modal/components/backdrop/backdrop.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'animate-fadeIn fixed inset-0 z-50 flex justify-center overflow-y-auto bg-black/50 p-2',
-    modal: 'animate-fadeInDown relative top-5 z-10 h-fit w-full',
+    base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
+    modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown',
   },
 });

package/src/components/modal/components/dialog/dialog.styles.ts

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white outline-none',
-      title: 'border-b-heading border-b pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
+      title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
       close: 'absolute right-1 top-1 block p-1',
     },
     variants: {

package/src/components/modal/components/dialog/dialog.types.ts

@@ -19,7 +19,7 @@ export type DialogProps = {
   /**
    * onClose callback
    */
-  onClose?: () => any;
+  onClose?: () => unknown;
   /**
    * Title for Modal
    */

package/src/components/modal/modal.stories.tsx

@@ -7,13 +7,10 @@ import { Button } from '../index.js';
 import { Modal } from './modal.component.js';
 
 const meta: Meta<typeof Modal> = {
-  title: 'Example/Modal',
+  title: 'Components/Modal',
   component: Modal,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
@@ -22,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: `
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis saepe sapiente officia inventore eligendi dolores delectus vitae veritatis repudiandae, unde alias, ipsa a consequatur assumenda perferendis, commodi rem voluptates?
@@ -34,7 +31,7 @@ export const DefaultStory: Story = {
     title: 'Title',
     isDismissable: true,
   },
-  render: ({ children, ...props }: any) => {
+  render: ({ children, ...props }) => {
     const state = useOverlayTriggerState({});
     return (
       <>
@@ -50,13 +47,13 @@ export const DefaultStory: Story = {
 /**
  * > WithFooter usage example
  */
-export const WithFooterStory: Story = {
+export const WithFooter: Story = {
   args: {
     children: `I'm children`,
     title: 'Title',
     isDismissable: true,
   },
-  render: ({ children, ...props }: any) => {
+  render: ({ children, ...props }) => {
     const state = useOverlayTriggerState({});
 
     return (
@@ -76,13 +73,13 @@ export const WithFooterStory: Story = {
 /**
  * > All sizes usage example
  */
-export const AllSizesStory: Story = {
+export const Sizes: Story = {
   args: {
     children: `I'm children`,
     title: 'Title',
     isDismissable: true,
   },
-  render: ({ children, ...props }: any) => {
+  render: ({ children, ...props }) => {
     const stateSM = useOverlayTriggerState({});
     const stateMD = useOverlayTriggerState({});
     const stateLG = useOverlayTriggerState({});
@@ -97,15 +94,15 @@ export const AllSizesStory: Story = {
 
     return (
       <div className="flex gap-2">
-        {['sm', 'md', 'lg'].map((size: string) => (
+        {(['sm', 'md', 'lg'] as const).map(size => (
           <Fragment key={size}>
-            <Modal {...props} size={size} state={states[size as 'sm' | 'md' | 'lg']} title={`Modal ${size}`}>
+            <Modal {...props} size={size} state={states[size]} title={`Modal ${size}`}>
               <Modal.Body>{children}</Modal.Body>
               <Modal.Footer>
                 <p>Lorem, ipsum dolor</p>
               </Modal.Footer>
             </Modal>
-            <Button onClick={states[size as 'sm' | 'md' | 'lg'].open}>Open Modal {size}</Button>
+            <Button onClick={states[size].open}>Open Modal {size}</Button>
           </Fragment>
         ))}
       </div>
@@ -116,13 +113,13 @@ export const AllSizesStory: Story = {
 /**
  * > Not dismissable example
  */
-export const NotDismissibleStory: Story = {
+export const NotDismissible: Story = {
   args: {
     children: `I'm children`,
     title: 'Title',
     isDismissable: false,
   },
-  render: ({ children, ...props }: any) => {
+  render: ({ children, ...props }) => {
     const state = useOverlayTriggerState({});
 
     return (

package/src/components/pagination/components/pagination-item/pagination-item.styles.ts

@@ -13,7 +13,7 @@ export const styles = tv(
         false: 'hover:bg-light',
       },
       disabled: {
-        true: 'cursor-not-allowed bg-light text-muted-90',
+        true: 'cursor-not-allowed bg-light text-muted opacity-50',
         false: 'cursor-pointer',
       },
     },

package/src/components/pagination/pagination.component.tsx

@@ -24,7 +24,7 @@ export function Pagination({
         current: number,
         infinite: boolean,
         forwardOnly: boolean,
-        onChange: (page: number) => any,
+        onChange: (page: number) => unknown,
         pages: PaginationProps['pages'],
       ) =>
       () => {
@@ -67,7 +67,7 @@ export function Pagination({
   }, [current, onChange, linkComponent, pages, infinite]);
 
   const generateHandleOnClickForward = useCallback(
-    (current: number, infinite: boolean, backwardsOnly: boolean, onChange: (page: number) => any) => () => {
+    (current: number, infinite: boolean, backwardsOnly: boolean, onChange: (page: number) => unknown) => () => {
       if (infinite && backwardsOnly) {
         return onChange(1);
       }

package/src/components/pagination/pagination.stories.tsx

@@ -1,30 +1,26 @@
 import { action } from '@storybook/addon-actions';
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '../icon/index.js';
-import { Button } from '../index.js';
+import { Button, PaginationProps } from '../index.js';
 
 import { Pagination } from './pagination.component.js';
 import { usePagination } from './pagination.hooks.js';
 
 const meta: Meta<typeof Pagination> = {
-  title: 'Example/Pagination',
+  title: 'Components/Pagination',
   component: Pagination,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
 };
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 
 /**
  * > Button usage example
  */
-export const DefaultStory: any = {
+export const Default: unknown = {
   args: {
     current: 1,
     onChange: action('onChange'),
@@ -40,12 +36,29 @@ export const DefaultStory: any = {
       },
     ],
   },
+  render: (props: PaginationProps) => {
+    const [current, setCurrent] = useState(props.current);
+    useEffect(() => {
+      setCurrent(props.current);
+    }, [props.current]);
+
+    return (
+      <Pagination
+        {...props}
+        onChange={value => {
+          setCurrent(value);
+          props.onChange?.(value);
+        }}
+        current={current}
+      />
+    );
+  },
 };
 
 /**
  * > Link usage example
  */
-export const AsLinkStory: any = {
+export const AsLink: unknown = {
   args: {
     current: 1,
     onChange: undefined,
@@ -69,7 +82,7 @@ export const AsLinkStory: any = {
 /**
  * > Using useState as example
  */
-export const ExampleWithState = () => {
+export const State = () => {
   const [page, setPage] = useState(1);
 
   return (
@@ -86,7 +99,7 @@ export const ExampleWithState = () => {
 /**
  * > Using useState as example
  */
-export const ExampleWithInfiniteState = () => {
+export const InfiniteState = () => {
   const [page, setPage] = useState(1);
 
   return (
@@ -104,7 +117,7 @@ export const ExampleWithInfiniteState = () => {
 /**
  * > Using custom back and next label
  */
-export const ExampleWithCustomBackAndNextLabel = () => {
+export const CustomBackAndNextLabel = () => {
   const [page, setPage] = useState(1);
 
   return (
@@ -123,7 +136,7 @@ export const ExampleWithCustomBackAndNextLabel = () => {
 /**
  * > Using use pagination hook
  */
-export const ExampleWithUsePagination = () => {
+export const UsePagination = () => {
   const { pages, currentPage, setCurrentPage } = usePagination({
     pages: [{ text: '1' }, { text: '2' }, { text: '3' }],
   });
@@ -145,7 +158,7 @@ export const ExampleWithUsePagination = () => {
 /**
  * > Using use pagination hook with other components
  */
-export const ExampleUsePagination = () => {
+export const UsePaginationDifferentComponents = () => {
   const { next, previous, selectedPage } = usePagination({
     pages: [{ text: 'Page 1' }, { text: 'Page 2' }, { text: 'Page 3' }],
     infinite: true,

package/src/components/pagination/pagination.styles.ts

@@ -3,8 +3,8 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'overflow-hidden rounded border border-border',
-      ul: 'flex',
+      base: 'flex flex-col items-center',
+      ul: 'flex overflow-hidden rounded border border-border',
     },
     variants: {},
   },

package/src/components/pagination/pagination.types.ts

@@ -24,7 +24,7 @@ export type PaginationAsButtonProps = {
   /**
    * on page change
    */
-  onChange: (page: number) => any;
+  onChange: (page: number) => unknown;
   /**
    * Pages items
    */

package/src/components/panel/components/body/body.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    slots: { base: 'typography-body-10 p-4 max-xsl:px-2' },
+    slots: { base: 'typography-body-10 p-2 sm:p-4' },
     variants: {},
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/panel/components/footer/footer.styles.ts

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'border-t-1 border-0 border-t border-border bg-light px-4 py-[0.625rem] max-xsl:px-2',
+      base: 'border-0 border-t border-border bg-light px-2 py-[0.625rem] sm:px-4',
     },
     variants: {},
   },

package/src/components/panel/panel.stories.tsx

@@ -5,19 +5,10 @@ import { Table } from '../table/index.js';
 import { Panel } from './panel.component.js';
 
 const meta: Meta<typeof Panel> = {
-  title: 'Example/Panel',
+  title: 'Components/Panel',
   component: Panel,
   tags: ['autodocs'],
-  decorators: [
-    (Story: StoryFn) => (
-      <div className="p-3">
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
+  decorators: [(Story: StoryFn) => <Story />],
   args: {
     heading: 'Panel title',
   },
@@ -29,7 +20,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: [
       <Panel.Body>
@@ -45,7 +36,7 @@ export const DefaultStory: Story = {
 /**
  * > Faint look example
  */
-export const FaintLookPanel: Story = {
+export const FaintLook: Story = {
   args: {
     look: 'faint',
     children: [
@@ -62,7 +53,7 @@ export const FaintLookPanel: Story = {
 /**
  * > Example using a table
  */
-export const PanelWithTable: Story = {
+export const WithTable: Story = {
   args: {
     children: [
       <Table>
@@ -107,7 +98,7 @@ export const PanelWithTable: Story = {
 /**
  * > Example using a table with a body and a panel footer
  */
-export const PanelWithTableAndBody: Story = {
+export const WithTableAndBody: Story = {
   args: {
     children: [
       <Panel.Body>

package/src/components/panel/panel.styles.ts

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'group/panel mb-4 overflow-hidden rounded-[0.1875rem] border border-hero',
-      header: 'px-4 py-[0.625rem] max-xsl:px-2',
+      header: 'px-2 py-[0.625rem] sm:px-4',
     },
     variants: {
       look: {

package/src/components/pictogram/pictogram.stories.tsx

@@ -13,7 +13,7 @@ const AllPictogramsExample = (props: PictogramProps) => {
     {} as { [index: string]: React.FC<PictogramProps> },
   );
   return (
-    <div className={clsx('grid grid-cols-5 gap-5 p-5', mode === 'light' && 'bg-hero text-white')}>
+    <div className={clsx('grid grid-cols-5 gap-5', mode === 'light' && 'bg-hero text-white')}>
       {Object.entries(informativePictograms).map(([key, Pictogram]) => (
         <div key={key} className="flex flex-col items-center justify-end">
           <Pictogram {...props} />
@@ -25,13 +25,10 @@ const AllPictogramsExample = (props: PictogramProps) => {
 };
 
 const meta: Meta<typeof Pictogram> = {
-  title: 'Example/Pictogram',
+  title: 'Foundation/Pictograms',
   component: AllPictogramsExample,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
     mode: {
       description: 'mode',
@@ -46,8 +43,8 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {},
 };
 
-export const DecorativeStory = () => <WBCBankCardPictogram />;
+export const Decorative = () => <WBCBankCardPictogram />;

package/src/components/popover/components/panel/panel.styles.ts

@@ -4,9 +4,9 @@ export const styles = tv(
   {
     slots: {
       base: '',
-      popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
+      popover: 'absolute z-[999] rounded-[3px] border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
       arrow:
-        'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+        'absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
       closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
       content: 'w-[17.625rem] py-4 pl-3 pr-5',
       heading: 'typography-body-9 mb-2 font-bold',

package/src/components/popover/popover.stories.tsx

@@ -8,19 +8,16 @@ const popoverContent =
   'Small overlays of content for housing secondary information. These are often used to provide explanatory information for complex ideas.';
 
 const meta: Meta<typeof Popover> = {
-  title: 'Example/Popover',
+  title: 'Components/Popover',
   component: Popover,
   tags: ['autodocs'],
   decorators: [
     (Story: StoryFn) => (
-      <div className="p-[200px]">
+      <div className="p-29">
         <Story />
       </div>
     ),
   ],
-  parameters: {
-    layout: 'center',
-  },
   args: {
     content: popoverContent,
     heading: 'Test Heading',
@@ -33,7 +30,7 @@ type Story = StoryObj<typeof meta>;
 /**
  * > Default usage example
  */
-export const DefaultStory: Story = {
+export const Default: Story = {
   args: {
     children: 'Click Me',
   },
@@ -42,7 +39,7 @@ export const DefaultStory: Story = {
 /**
  * > Using icon as trigger
  */
-export const PopoverIconTrigger: Story = {
+export const IconTrigger: Story = {
   args: {
     icon: () => <HelpIcon color="hero" />,
   },
@@ -51,7 +48,7 @@ export const PopoverIconTrigger: Story = {
 /**
  * > Default open
  */
-export const DefaultOpenPopover: Story = {
+export const DefaultOpen: Story = {
   args: {
     children: 'Click Me',
     open: true,
@@ -61,7 +58,7 @@ export const DefaultOpenPopover: Story = {
 /**
  * > No heading
  */
-export const PopoverNoHeading: Story = {
+export const NoHeading: Story = {
   args: {
     children: 'Click Me',
     open: true,