@westpac/ui 0.7.0 → 0.7.1

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

@@ -3,6 +3,8 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './dialog.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type DialogProps = {
   /**
    * Boolean to wrap all children into a Modal.Body
@@ -20,9 +22,12 @@ export type DialogProps = {
    * onClose callback
    */
   onClose?: () => unknown;
+  /**
+   * Size of dialog
+   */
+  size?: Variants['size'];
   /**
    * Title for Modal
    */
   title?: string;
-} & VariantProps<typeof styles> &
-  AriaDialogProps;
+} & AriaDialogProps;

package/src/components/modal/modal.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import { Backdrop, Dialog } from './components/index.js';

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

@@ -6,6 +6,7 @@ import { type PaginationItemProps } from './pagination-item.types.js';
 export function PaginationItem({
   className,
   firstItem = false,
+  lastItem = false,
   tag: Tag = 'a',
   children,
   active,
@@ -14,7 +15,7 @@ export function PaginationItem({
 }: PaginationItemProps) {
   return (
     <Tag
-      className={styles({ className, firstItem, active, disabled })}
+      className={styles({ className, firstItem, lastItem, active, disabled })}
       {...props}
       disabled={disabled}
       aria-current={active ? 'page' : undefined}

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

@@ -2,14 +2,18 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'typography-body-10 block border-l border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
+    base: 'typography-body-10 relative block border border-border px-2 py-[0.5625rem] text-center text-text transition-colors',
     variants: {
       firstItem: {
-        true: 'border-l-0',
+        true: 'rounded-l',
+        false: 'ml-[-1px]',
+      },
+      lastItem: {
+        true: 'rounded-r',
         false: '',
       },
       active: {
-        true: 'bg-hero text-white',
+        true: 'z-10 border-hero bg-hero text-white',
         false: 'hover:bg-light',
       },
       disabled: {

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

@@ -1,12 +1,29 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement } from 'react';
-import { type VariantProps } from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
 
 import { styles } from './pagination-item.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type PaginationItemProps = {
+  /**
+   * Whether item is active
+   */
+  active?: Variants['active'];
+  /**
+   * Whether item is disabled
+   */
+  disabled?: Variants['disabled'];
+  /**
+   * Whether it is the first item
+   */
+  firstItem?: Variants['firstItem'];
+  /**
+   * Whether it is the last item
+   */
+  lastItem?: Variants['lastItem'];
   /**
    * Link component to render
    */
   tag?: 'a' | 'button' | ((...args: any[]) => ReactElement | null);
-} & VariantProps<typeof styles> &
-  (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
+} & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);

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

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useCallback, useMemo } from 'react';
 
 import { PaginationItem } from './components/index.js';
@@ -84,6 +86,7 @@ export function Pagination({
     const defaultNextProps = {
       disabled: !infinite && backwardsOnly,
       tag: linkComponent,
+      lastItem: true,
     };
     if (defaultNextProps.disabled) {
       return {

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

@@ -165,7 +165,7 @@ export const UsePaginationDifferentComponents = () => {
   });
 
   return (
-    <div className="flex items-center">
+    <div className="flex w-[15.625rem] items-center justify-between">
       <Button look="link" iconAfter={ArrowLeftIcon} onClick={previous} />
       <h4>{selectedPage.text}</h4>
       <Button look="link" iconAfter={ArrowRightIcon} onClick={next} />

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

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'flex flex-col items-center',
-      ul: 'flex overflow-hidden rounded border border-border',
+      ul: 'flex overflow-hidden',
     },
     variants: {},
   },

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

@@ -1,8 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 
 import { type PaginationItemProps } from './components/index.js';
-import { styles } from './pagination.styles.js';
 
 export type PageProps = {
   href: string;
@@ -63,5 +61,4 @@ export type PaginationProps = {
    */
   tag?: keyof JSX.IntrinsicElements;
 } & (PaginationAsLinkProps | PaginationAsButtonProps) &
-  VariantProps<typeof styles> &
   Omit<HTMLAttributes<Element>, 'onChange'>;

package/src/components/pictogram/pictogram.types.ts

@@ -1,7 +1,4 @@
 import { type SVGAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './pictogram.styles.js';
 
 export type PictogramProps = SVGAttributes<SVGElement> & {
   /**
@@ -24,4 +21,4 @@ export type PictogramProps = SVGAttributes<SVGElement> & {
    * SVG viewBox width
    */
   viewBoxWidth?: number;
-} & VariantProps<typeof styles>;
+};

package/src/components/popover/popover.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useCallback, useEffect, useId } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 

package/src/components/progress-bar/progress-bar.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { useProgressBar } from 'react-aria';
 

package/src/components/progress-rope/components/progress-rope-group-step/progress-rope-group-step.types.ts

@@ -1,10 +1,7 @@
 import { ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
 
 import { ProgressRopeStepItem, type ProgressRopeStepWithIndex } from '../../progress-rope.types.js';
 
-import { styles } from './progress-rope-group-step.styles.js';
-
 export type ProgressRopeGroupStepProps = {
   /**
    * Children
@@ -30,8 +27,9 @@ export type ProgressRopeGroupStepProps = {
    * Boolean to tell if group is expanded
    */
   opened?: boolean;
+
   /**
    * Steps to render
    */
   steps: (ProgressRopeStepItem & { index: number })[];
-} & VariantProps<typeof styles>;
+};

package/src/components/progress-rope/components/progress-rope-step/progress-rope-step.types.ts

@@ -5,11 +5,21 @@ import { ProgressRopeStepItem } from '../../progress-rope.types.js';
 
 import { styles } from './progress-rope-step.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type ProgressRopeStepProps = {
   /**
    * Says it is current
    */
   current?: boolean;
+  /**
+   * Whether step is first item
+   */
+  firstItem?: Variants['firstItem'];
+  /**
+   * Size of step
+   */
+  size?: Variants['size'];
   /**
    * Tag to render
    */
@@ -19,5 +29,4 @@ export type ProgressRopeStepProps = {
    */
   visited?: boolean;
 } & Omit<ProgressRopeStepItem, 'text'> &
-  VariantProps<typeof styles> &
   HTMLAttributes<Element>;

package/src/components/progress-rope/progress-rope.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { ProgressRopeGroupStep, ProgressRopeStep } from './components/index.js';

package/src/components/progress-rope/progress-rope.types.ts

@@ -1,7 +1,4 @@
 import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './progress-rope.styles.js';
 
 export type ProgressRopeStepItem = {
   onClick?: MouseEventHandler<Element>;
@@ -37,5 +34,4 @@ export type ProgressRopeProps = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;

package/src/components/radio-group/components/radio/radio.component.tsx

@@ -29,3 +29,4 @@ function BaseRadio({ className, hint, children, ...props }: RadioProps, ref: any
 }
 
 export const Radio = forwardRef(BaseRadio);
+Radio.displayName = 'RadioGroup.Radio';

package/src/components/radio-group/components/radio/radio.styles.ts

@@ -6,8 +6,8 @@ export const styles = tv(
       base: 'flex',
       textWrapper: 'flex flex-col justify-center',
       labelText: 'typography-body-10 py-[2px] pl-1',
-      hintText: 'typography-body-10 text-muted pl-1',
-      selector: 'border-hero flex shrink-0 h-4 w-4 items-center justify-center rounded-full border',
+      hintText: 'typography-body-10 pl-1 text-muted',
+      selector: 'flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-hero',
     },
     variants: {
       isDisabled: {

package/src/components/radio-group/radio-group.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';

package/src/components/repeater/repeater.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useFocusRing } from 'react-aria';
@@ -74,7 +76,7 @@ export function Repeater({
                   animate={{ opacity: 1 }}
                   exit={{ opacity: 0 }}
                   transition={{ duration: 0.15 }}
-                  key={index}
+                  key={item.id}
                 >
                   <div
                     ref={(el: HTMLDivElement) => {
@@ -90,7 +92,9 @@ export function Repeater({
                       <Button
                         className={styles.removeBtn()}
                         aria-label={`remove item ${index + 1}`}
-                        iconBefore={(props: IconProps) => <RemoveCircleIcon {...props} aria-hidden size="xsmall" />}
+                        iconBefore={(props: IconProps) => (
+                          <RemoveCircleIcon {...props} aria-hidden look="outlined" size="xsmall" />
+                        )}
                         look="link"
                         size="small"
                         soft

package/src/components/repeater/repeater.styles.ts

@@ -15,10 +15,10 @@ export const styles = tv(
     variants: {
       separator: {
         true: {
-          item: 'border-neutral border-t-2 pt-[0.625rem]',
+          item: 'border-t-2 border-neutral pt-[0.625rem]',
           content: 'p-[0_1.125rem_2.625rem]',
           removeBtn: 'relative m-[0_0_1.875rem_1.125rem]',
-          footer: 'border-neutral border-t-2 pt-[0.875rem]',
+          footer: 'border-t-2 border-neutral pt-[0.875rem]',
         },
       },
       isFocused: {

package/src/components/select/select.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ForwardedRef, forwardRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 

package/src/components/select/select.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
     variants: {
       size: {
         small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',

package/src/components/select/select.types.ts

@@ -3,4 +3,15 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './select.styles.js';
 
-export type SelectProps = VariantProps<typeof styles> & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>;
+type Variants = VariantProps<typeof styles>;
+
+export type SelectProps = {
+  /**
+   * Whether select is invalid
+   */
+  invalid?: Variants['invalid'];
+  /**
+   * Size of select
+   */
+  size?: Variants['size'];
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>;

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.types.ts

@@ -1,15 +1,11 @@
 import { type AriaCheckboxGroupItemProps } from 'react-aria';
-import { type VariantProps } from 'tailwind-variants';
 
 import { FlexiCellProps } from '../../../../../index.js';
 
-import { styles } from './selector-checkbox-group-option.styles.js';
-
 export type SelectorCheckboxGroupOptionProps = {
   /**
    * Check icon to render
    */
   checkIcon?: 'checkbox' | 'arrow';
 } & FlexiCellProps &
-  VariantProps<typeof styles> &
   Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.types.ts

@@ -1,9 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './selector-checkbox-group.styles.js';
 
 export type SelectorCheckboxGroupContextState = CheckboxGroupState;
 
@@ -21,5 +18,4 @@ export type SelectorCheckboxGroupProps = {
    */
   size?: 'medium' | 'large';
 } & AriaCheckboxGroupProps &
-  VariantProps<typeof styles> &
   Omit<HTMLAttributes<Element>, 'onChange'>;

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.types.ts

@@ -1,11 +1,8 @@
 import { type HTMLAttributes } from 'react';
 import { type AriaRadioProps } from 'react-aria';
-import { type VariantProps } from 'tailwind-variants';
 
 import { type FlexiCellProps } from '../../../../../../index.js';
 
-import { styles } from './selector-radio-group-option.styles.js';
-
 export type SelectorRadioGroupOptionProps = {
   /**
    * Check icon to render
@@ -17,5 +14,4 @@ export type SelectorRadioGroupOptionProps = {
   tag?: keyof JSX.IntrinsicElements;
 } & FlexiCellProps &
   AriaRadioProps &
-  VariantProps<typeof styles> &
   HTMLAttributes<Element>;

package/src/components/selector/components/selector-radio-group/selector-radio-group.types.ts

@@ -5,13 +5,18 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './selector-radio-group.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type SelectorRadioGroupProps = {
+  /**
+   * Orientation of radio
+   */
+  orientation?: Variants['orientation'];
   /**
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  AriaRadioGroupProps &
+} & AriaRadioGroupProps &
   Omit<HTMLAttributes<Element>, 'onChange'>;
 
 export type SelectorRadioGroupContextState = {

package/src/components/selector/selector.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import {

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

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef } from 'react';
 
 import { styles } from './skip-link.styles.js';

package/src/components/skip-link/skip-link.types.ts

@@ -1,7 +1,4 @@
 import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './skip-link.styles.js';
 
 export type SkipLinkProps = (
   | {
@@ -21,5 +18,4 @@ export type SkipLinkProps = (
       tag?: keyof Pick<JSX.IntrinsicElements, 'a'>;
     }
 ) &
-  VariantProps<typeof styles> &
   HTMLAttributes<Element>;

package/src/components/switch/switch.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useId, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useCheckbox, useFocusRing } from 'react-aria';
 import { useToggleState } from 'react-stately';

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

@@ -3,11 +3,13 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './switch.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type SwitchProps = {
   /**
    * Whether to display switch as block
    */
-  block?: boolean;
+  block?: Variants['block'];
   /**
    * Default checked
    */
@@ -20,5 +22,8 @@ export type SwitchProps = {
    * Label for the switch
    */
   label: string;
-} & Omit<AriaCheckboxProps, 'children' | 'isSelected'> &
-  Pick<VariantProps<typeof styles>, 'size'>;
+  /**
+   * Size of switch
+   */
+  size?: Variants['size'];
+} & Omit<AriaCheckboxProps, 'children' | 'isSelected'>;

package/src/components/symbol/index.ts

@@ -13,6 +13,7 @@ export { BSAMultibrandSmallLogo } from './components/logos/bsa-multibrand-small-
 export { BSAStackedLogo } from './components/logos/bsa-stacked-logo.js';
 export { FacebookSymbol } from './components/symbols/facebook-symbol.js';
 export { GooglePlusSymbol } from './components/symbols/google-plus-symbol.js';
+export { GoogleStoreSymbol } from './components/symbols/google-store-symbol.js';
 export { InstagramSymbol } from './components/symbols/instagram-symbol.js';
 export { LinkedInSymbol } from './components/symbols/linked-in-symbol.js';
 export { MastercardAcceptedSymbol } from './components/symbols/mastercard-accepted-symbol.js';

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

@@ -1,6 +1,9 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import React from 'react';
 
+import { Symbol } from './symbol.component.js';
+import { type Align } from './symbol.types.js';
+
 import { SymbolProps, WBCLogo, WBCMultibrandSmallLogo } from './index.js';
 import * as symbols from './index.js';
 
@@ -60,14 +63,69 @@ export const AllLogos = () => {
     {} as { [index: string]: React.FC<SymbolProps> },
   );
 
+  const logos = Object.entries(allLogos).reduce(
+    (curr, [key, symbol]) => (!key.includes('Multibrand') ? { ...curr, [key]: symbol } : curr),
+    {} as { [index: string]: React.FC<SymbolProps> },
+  );
+
+  const multibrandLargeLogos = Object.entries(allLogos).reduce(
+    (curr, [key, symbol]) => (key.includes('MultibrandLarge') ? { ...curr, [key]: symbol } : curr),
+    {} as { [index: string]: React.FC<SymbolProps> },
+  );
+
+  const multibrandSmallLogos = Object.entries(allLogos).reduce(
+    (curr, [key, symbol]) => (key.includes('MultibrandSmall') ? { ...curr, [key]: symbol } : curr),
+    {} as { [index: string]: React.FC<SymbolProps> },
+  );
+
+  const align: Align[] = ['left', 'center', 'right'];
+
   return (
-    <div className="grid grid-cols-4 gap-5">
-      {Object.entries(allLogos).map(([key, Logo]) => (
-        <div key={key} className=" flex flex-col items-center justify-end">
-          <Logo />
-          <p className="mt-2">{key}</p>
-        </div>
-      ))}
-    </div>
+    <>
+      <h3 className="typography-body-7 mb-4 font-bold">Logos</h3>
+      <div className="grid grid-cols-4 gap-5">
+        {Object.entries(logos).map(([key, Logo]) => (
+          <div key={key} className=" flex flex-col items-center justify-end">
+            <Logo />
+            <p className="mt-2">{`<${key} />`}</p>
+          </div>
+        ))}
+      </div>
+      <h3 className="typography-body-7 mb-2 mt-6 font-bold">Multi-brand logos</h3>
+      <h4 className="typography-body-8 mb-4 font-bold">Large</h4>
+      <div className="grid grid-cols-4 gap-5">
+        {Object.entries(multibrandLargeLogos).map(([key, Logo]) => (
+          <>
+            <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
+              <Logo className="border border-dashed border-border" />
+              <p className="mt-2">{`<${key} />`}</p>
+            </div>
+            {align.map(align => (
+              <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
+                <Logo align={align} className="border border-dashed border-border" />
+                <p className="mt-2">{`<${key} align=${align} />`}</p>
+              </div>
+            ))}
+          </>
+        ))}
+      </div>
+      <h4 className="typography-body-8 my-4 font-bold">Small</h4>
+      <div className="grid grid-cols-4 gap-5">
+        {Object.entries(multibrandSmallLogos).map(([key, Logo]) => (
+          <>
+            <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
+              <Logo className="border border-dashed border-border" />
+              <p className="mt-2">{`<${key} />`}</p>
+            </div>
+            {align.map(align => (
+              <div key={`${key}-${align}`} className=" flex flex-col items-center justify-end">
+                <Logo align={align} className="border border-dashed border-border" />
+                <p className="mt-2">{`<${key} align=${align} />`}</p>
+              </div>
+            ))}
+          </>
+        ))}
+      </div>
+    </>
   );
 };

package/src/components/symbol/symbol.types.ts

@@ -1,7 +1,4 @@
 import { type SVGAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
-
-import { styles } from './symbol.styles.js';
 
 export type Align = 'left' | 'center' | 'right';
 
@@ -30,4 +27,4 @@ export type SymbolProps = Omit<SVGAttributes<SVGElement>, 'offset'> & {
    * SVG viewBox width
    */
   viewBoxWidth?: number;
-} & VariantProps<typeof styles>;
+};

package/src/components/table/table.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { createContext } from 'react';
 
 import { Body, Caption, Cell, Footer, Header, HeaderCell, HeaderRow, Row } from './components/index.js';

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

@@ -5,7 +5,13 @@ import { type VariantProps } from 'tailwind-variants';
 
 import { styles } from './tab.styles.js';
 
+type Variants = VariantProps<typeof styles>;
+
 export type TabProps<T = any> = {
+  /**
+   * Color of tab
+   */
+  color?: Variants['color'];
   /**
    * isDisabled flag
    */
@@ -14,6 +20,14 @@ export type TabProps<T = any> = {
    * Item
    */
   item: Node<T>;
+  /**
+   * Whether tab is justified
+   */
+  justify?: Variants['justify'];
+  /**
+   * Look of tab
+   */
+  look?: Variants['look'];
   /**
    * Orientation, vertical or horizontal for tab
    */
@@ -26,5 +40,4 @@ export type TabProps<T = any> = {
    * Tag to render
    */
   tag?: keyof JSX.IntrinsicElements;
-} & VariantProps<typeof styles> &
-  HTMLAttributes<Element>;
+} & HTMLAttributes<Element>;