@westpac/ui 0.8.0 → 0.10.0

package/src/components/list/components/item/item.styles.ts

@@ -42,19 +42,19 @@ export const styles = tv(
       },
       type: {
         bullet: {
-          bullet: 'left-[0.25rem] top-[0.375rem] h-[0.5rem] w-[0.5rem] rounded-full',
+          bullet: 'left-[0.25rem] top-1 h-[0.5rem] w-[0.5rem] rounded-full',
         },
         link: {
           bullet:
-            'left-[0.125rem] top-[0.375rem] h-[0.5rem] w-[0.5rem] rotate-45 border-b-0 border-l-0 border-r-[0.125rem] border-t-[0.125rem] bg-[transparent]',
+            'left-[0.125rem] top-1 h-[0.5rem] w-[0.5rem] rotate-45 border-b-0 border-l-0 border-r-[0.125rem] border-t-[0.125rem] bg-[transparent]',
         },
         tick: {
           bullet:
-            ' left-[0.125rem] top-[0.3125rem] h-[0.375rem] w-[0.75rem] rotate-[-44deg] border-b-[0.125rem] border-l-[0.125rem] border-r-0 border-t-0 bg-[transparent]',
+            ' left-[0.125rem] top-[0.3125rem] h-1 w-2 rotate-[-44deg] border-b-[0.125rem] border-l-[0.125rem] border-r-0 border-t-0 bg-[transparent]',
         },
         cross: {
           bullet:
-            'left-[0.375rem] top-[0.25rem] h-[0.75rem] w-0 -rotate-45 border-y-0 border-l-[0.125rem] border-r-0 bg-[transparent] after:absolute after:left-[-0.125rem] after:block after:h-[0.75rem] after:w-0 after:rotate-90 after:border-y-0 after:border-l-[0.125rem] after:border-r-0',
+            'left-1 top-[0.25rem] h-2 w-0 -rotate-45 border-y-0 border-l-[0.125rem] border-r-0 bg-[transparent] after:absolute after:left-[-0.125rem] after:block after:h-2 after:w-0 after:rotate-90 after:border-y-0 after:border-l-[0.125rem] after:border-r-0',
         },
         unstyled: {
           base: 'pl-0',

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

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white outline-none',
+      base: 'relative mx-auto max-w-full overflow-hidden rounded bg-white outline-none',
       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',
     },

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

@@ -2,14 +2,14 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'typography-body-10 relative block border 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-1.5 text-center text-text transition-colors',
     variants: {
       firstItem: {
-        true: 'rounded-l-[0.1875rem]',
+        true: 'rounded-l',
         false: 'ml-[-1px]',
       },
       lastItem: {
-        true: 'rounded-r-[0.1875rem]',
+        true: 'rounded-r',
         false: '',
       },
       active: {

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

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

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

@@ -1,18 +1,48 @@
-import React from 'react';
+import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { FocusScope } from 'react-aria';
 
 import { Button } from '../../../button/index.js';
 import { CloseIcon } from '../../../icon/index.js';
+import { usePopoverPosition } from '../../popover.hooks.js';
 
 import { styles as panelStyles } from './panel.styles.js';
-import { type PanelProps } from './panel.types.js';
+import { type PanelProps, Position } from './panel.types.js';
 
-export function Panel({ state, heading, headingTag: Tag = 'h1', content, placement = 'top', id }: PanelProps) {
-  const styles = panelStyles({ placement });
+export function Panel({ state, heading, headingTag: Tag = 'h1', content, placement, id, triggerRef }: PanelProps) {
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const arrowRef = useRef<HTMLDivElement>(null);
+  const remSize = parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+
+  const [position, setPosition] = useState<Position>({
+    placement: 'top',
+    offset: 'left',
+    panelPosition: triggerRef.current ? triggerRef.current.offsetWidth / 2 / remSize : 0,
+    arrowPosition: popoverRef.current ? popoverRef.current.getBoundingClientRect().width / 2 / remSize : 0,
+  });
+
+  useLayoutEffect(() => {
+    setPosition(usePopoverPosition(triggerRef, popoverRef, arrowRef, placement));
+  }, [state.isOpen]);
+
+  const getPopoverClass = useCallback(() => {
+    return {
+      [position.offset as string]:
+        position.offset === 'left' ? `${position.panelPosition}rem` : `-${position.panelPosition}rem`,
+      transform: position.offset === 'left' ? 'translateX(-50%)' : 'none',
+    };
+  }, [position]);
+
+  const getArrowClass = useCallback(() => {
+    return {
+      [!position.offset || position.offset === 'left' ? 'left' : 'right']: `${position.arrowPosition}rem`,
+    };
+  }, [position]);
+
+  const styles = panelStyles({ placement: position.placement });
 
   return (
     <FocusScope restoreFocus>
-      <div className={styles.popover()} id={id}>
+      <div className={styles.popover()} style={getPopoverClass()} id={id} ref={popoverRef}>
         <div className={styles.content()}>
           <Tag className={styles.heading()}>{heading}</Tag>
           <div className={styles.body()}>{content}</div>
@@ -24,7 +54,7 @@ export function Panel({ state, heading, headingTag: Tag = 'h1', content, placeme
             aria-label="Close popover"
           />
         </div>
-        <div aria-hidden className={styles.arrow()} />
+        <div aria-hidden className={styles.arrow()} style={getArrowClass()} ref={arrowRef} />
       </div>
     </FocusScope>
   );

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

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: '',
-      popover: 'absolute z-[999] rounded-[0.1875rem] border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
+      popover: 'absolute z-[999] rounded border border-muted bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
       arrow:
         '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',
@@ -15,12 +15,12 @@ export const styles = tv(
     variants: {
       placement: {
         top: {
-          popover: 'bottom-full left-1/2 mb-[0.9375rem] -translate-x-1/2',
-          arrow: 'left-1/2 top-full -translate-x-1/2 after:top-[-12px] after:translate-x-[-7px]',
+          popover: 'bottom-full mb-2.5',
+          arrow: 'top-full after:top-[-12px] after:translate-x-[-7px]',
         },
         bottom: {
-          popover: 'left-1/2 top-full mt-[0.9375rem] -translate-x-1/2',
-          arrow: 'bottom-full left-1/2 -translate-x-1/2 rotate-180 after:bottom-[1px] after:translate-x-[-7px]',
+          popover: 'top-full mt-2.5',
+          arrow: 'bottom-full rotate-180 after:bottom-[1px] after:translate-x-[-7px]',
         },
       },
     },

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, RefObject } from 'react';
 import { OverlayTriggerState } from 'react-stately';
 
 export type PanelProps = {
@@ -15,11 +15,22 @@ export type PanelProps = {
    */
   headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
   /**
-   * Overlay trigger state
+   * Placement of popover. If no placement provided it will default to top unless there is no space then will appear on bottom.
    */
   placement?: 'top' | 'bottom';
   /**
    * Overlay trigger state
    */
   state: OverlayTriggerState;
+  /**
+   * Ref for the trigger
+   */
+  triggerRef: RefObject<HTMLDivElement>;
 } & HTMLAttributes<Element>;
+
+export type Position = {
+  arrowPosition?: number;
+  offset?: 'left' | 'right';
+  panelPosition?: number;
+  placement?: 'top' | 'bottom';
+};

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useCallback, useEffect, useId } from 'react';
+import React, { useCallback, useEffect, useId, useLayoutEffect, useRef } from 'react';
 import { useOverlayTriggerState } from 'react-stately';
 
 import { Button } from '../button/index.js';
@@ -9,6 +9,11 @@ import { Panel } from './components/panel/panel.component.js';
 import { styles as popoverStyles } from './popover.styles.js';
 import { type PopoverProps } from './popover.types.js';
 
+/**
+ * TODO: Revisit this component when react-aria has updated usePopover, see: https://github.com/adobe/react-spectrum/discussions/5341
+ * This version does not currently use react-aria as it blocked so functionality that was needed to match GEL 3.0
+ */
+
 export function Popover({
   children,
   className,
@@ -21,9 +26,10 @@ export function Popover({
   open = false,
   icon,
 }: PopoverProps) {
-  const state = useOverlayTriggerState({ defaultOpen: open });
+  const state = useOverlayTriggerState({});
   const panelId = useId();
   const styles = popoverStyles({});
+  const ref = useRef<HTMLDivElement>(null);
 
   const handleClick = useCallback(() => {
     onClick();
@@ -44,6 +50,9 @@ export function Popover({
     };
   }, [state.isOpen]);
 
+  useLayoutEffect(() => {
+    if (open) state.setOpen(true);
+  }, [open]);
   return (
     <div className={styles.base({ className })}>
       <Button
@@ -52,6 +61,7 @@ export function Popover({
         aria-expanded={state.isOpen}
         aria-controls={panelId}
         onClick={handleClick}
+        ref={ref}
       >
         {children}
       </Button>
@@ -63,6 +73,7 @@ export function Popover({
           content={content}
           state={state}
           id={panelId}
+          triggerRef={ref}
         />
       )}
     </div>

package/src/components/popover/popover.hooks.tsx

@@ -0,0 +1,56 @@
+import { RefObject } from 'react';
+
+import { Position } from './components/panel/panel.types.js';
+
+export const usePopoverPosition = (
+  triggerRef: RefObject<HTMLDivElement>,
+  popoverRef: RefObject<HTMLDivElement>,
+  arrowRef: RefObject<HTMLDivElement>,
+  placement?: 'top' | 'bottom',
+): Position => {
+  // bail early without refs
+  if (!triggerRef.current || !popoverRef.current || !arrowRef.current) {
+    throw new Error('You must pass valid refs.');
+  }
+
+  const trigger = triggerRef.current.getBoundingClientRect();
+  const popover = popoverRef.current.getBoundingClientRect();
+  const arrow = arrowRef.current.getBoundingClientRect();
+  const remSize = parseInt(window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize);
+
+  const position: Position = {
+    placement: placement ? placement : 'top',
+    offset: popover.right >= window.innerWidth ? 'right' : 'left',
+    panelPosition: trigger.width / 2 / remSize,
+    arrowPosition: (popover.width / 2 - arrow.width / 2) / remSize,
+  };
+  if (typeof window === 'undefined') {
+    return position;
+  }
+
+  const offLeft = popover.left <= 0;
+  const offRight = popover.right + remSize >= window.innerWidth;
+
+  if (offLeft) {
+    position.panelPosition = (popover.width - popover.right + trigger.width / 2 + remSize) / remSize;
+    position.arrowPosition = (trigger.right - trigger.width / 2 - arrow.width / 2 - remSize) / remSize;
+  }
+
+  if (offRight) {
+    position.panelPosition = (window.innerWidth - trigger.right - remSize) / remSize;
+    position.arrowPosition =
+      (window.innerWidth - (trigger.left + trigger.width / 2) - (remSize + arrow.width / 2)) / remSize;
+  }
+
+  if (popover.height > trigger.top) {
+    position.placement = placement ? placement : 'bottom';
+    return position;
+  }
+
+  if (popover.bottom > window.innerHeight) {
+    position.placement = placement ? placement : 'top';
+    return position;
+  }
+
+  return position;
+};

package/src/components/popover/popover.types.ts

@@ -33,7 +33,7 @@ export type PopoverProps = {
    */
   open?: boolean;
   /**
-   * Placement of popover
+   * Placement of popover. If no placement provided it will default to top unless there is no space then will appear on bottom.
    */
   placement?: 'top' | 'bottom';
 } & HTMLAttributes<Element> &

package/src/components/progress-bar/progress-bar.styles.ts

@@ -5,12 +5,12 @@ export const styles = tv(
     slots: {
       base: 'box-border w-full overflow-hidden border border-border bg-white p-[0.0625rem]',
       innerBar: 'box-border h-full bg-hero text-right leading-tight transition-[width] duration-[.6s]',
-      label: 'typography-body-10 mx-[0.75rem] my-0 block font-bold text-white',
+      label: 'typography-body-10 mx-2 my-0 block font-bold text-white',
     },
     variants: {
       look: {
         default: {
-          base: 'h-[1.5rem] rounded-[1.5rem]',
+          base: 'h-4 rounded-[1.5rem]',
           innerBar: ' rounded-[1.5rem]',
         },
         skinny: {

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

@@ -6,11 +6,11 @@ export const styles = tv(
       base: '',
       list: 'm-0 flex list-none flex-col pl-0',
       item: 'relative',
-      itemIndex: 'mb-[1.125rem] font-bold',
+      itemIndex: 'mb-3 font-bold',
       content: '',
       removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
       footer: 'flex justify-between pt-[0.875rem]',
-      addBtn: 'height-auto p-0 no-underline hover:underline',
+      addBtn: 'h-auto p-0 no-underline hover:underline',
     },
     variants: {
       separator: {
@@ -19,8 +19,8 @@ export const styles = tv(
         },
         true: {
           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]',
+          content: 'px-3 pb-7 pt-0',
+          removeBtn: 'relative mb-5 ml-3',
           footer: 'border-t-2 border-neutral',
         },
       },

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:
-        '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]',
+        'relative box-content overflow-hidden border border-borderDark transition duration-[.3s] after:absolute after:left-0 after:top-0 after:block after:rounded-full after:bg-white after:shadow-switch after:transition-all after:duration-[.3s]',
       label: 'pr-1',
     },
     variants: {

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

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: { base: 'hover:bg-background' },
     variants: {
-      striped: { true: { base: 'hover:bg-default even:bg-background' } },
+      striped: { true: { base: 'even:bg-background hover:bg-[transparent]' } },
       highlightedRow: { true: { base: 'border border-b-[3px] border-l-[6px] border-r-0 border-primary' } },
     },
   },

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',
+    base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors',
     variants: {
       look: {
         default: 'border border-border bg-white',
@@ -10,7 +10,7 @@ export const styles = tv(
       },
       selected: {
         true: 'bg-white',
-        false: '',
+        false: 'hover:bg-background',
       },
       orientation: {
         horizontal: '',
@@ -37,12 +37,12 @@ export const styles = tv(
       {
         orientation: 'horizontal',
         look: 'default',
-        className: 'rounded-t-[0.1875rem]',
+        className: 'rounded-t',
       },
       {
         orientation: 'vertical',
         look: 'default',
-        className: 'rounded-l-[0.1875rem]',
+        className: 'rounded-l',
       },
       {
         orientation: 'horizontal',

package/src/components/well/well.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'rounded-[0.1875rem] border border-border p-2 sm:p-4',
+    base: 'rounded border border-border p-2 sm:p-4',
     variants: {
       color: {
         light: 'bg-light',

package/src/tailwind/__mocks__/utils.constants.ts

@@ -1,40 +1,75 @@
 export const EXPECTED_SPACING = {
-  0: '0',
-  1: '0.375rem',
-  10: '3.75rem',
-  11: '4.125rem',
-  12: '4.5rem',
-  13: '4.875rem',
-  14: '5.25rem',
-  15: '5.625rem',
-  16: '6rem',
-  17: '6.375rem',
-  18: '6.75rem',
-  19: '7.125rem',
-  2: '0.75rem',
-  20: '7.5rem',
-  21: '7.875rem',
-  22: '8.25rem',
-  23: '8.625rem',
-  24: '9rem',
-  25: '9.375rem',
-  26: '9.75rem',
-  27: '10.125rem',
-  28: '10.5rem',
-  29: '10.875rem',
-  3: '1.125rem',
-  30: '11.25rem',
-  31: '11.625rem',
-  32: '12rem',
-  33: '12.375rem',
-  34: '12.75rem',
-  35: '13.125rem',
-  4: '1.5rem',
-  5: '1.875rem',
-  6: '2.25rem',
-  7: '2.625rem',
-  8: '3rem',
-  9: '3.375rem',
+  '0': '0rem',
+  '1': '0.375rem',
+  '2': '0.75rem',
+  '3': '1.125rem',
+  '4': '1.5rem',
+  '5': '1.875rem',
+  '6': '2.25rem',
+  '7': '2.625rem',
+  '8': '3rem',
+  '9': '3.375rem',
+  '10': '3.75rem',
+  '11': '4.125rem',
+  '12': '4.5rem',
+  '13': '4.875rem',
+  '14': '5.25rem',
+  '15': '5.625rem',
+  '16': '6rem',
+  '17': '6.375rem',
+  '18': '6.75rem',
+  '19': '7.125rem',
+  '20': '7.5rem',
+  '21': '7.875rem',
+  '22': '8.25rem',
+  '23': '8.625rem',
+  '24': '9rem',
+  '25': '9.375rem',
+  '26': '9.75rem',
+  '27': '10.125rem',
+  '28': '10.5rem',
+  '29': '10.875rem',
+  '30': '11.25rem',
+  '31': '11.625rem',
+  '32': '12rem',
+  '33': '12.375rem',
+  '34': '12.75rem',
+  '35': '13.125rem',
+  '0.5': '0.1875rem',
+  '1.5': '0.5625rem',
+  '2.5': '0.9375rem',
+  '3.5': '1.3125rem',
+  '4.5': '1.6875rem',
+  '5.5': '2.0625rem',
+  '6.5': '2.4375rem',
+  '7.5': '2.8125rem',
+  '8.5': '3.1875rem',
+  '9.5': '3.5625rem',
+  '10.5': '3.9375rem',
+  '11.5': '4.3125rem',
+  '12.5': '4.6875rem',
+  '13.5': '5.0625rem',
+  '14.5': '5.4375rem',
+  '15.5': '5.8125rem',
+  '16.5': '6.1875rem',
+  '17.5': '6.5625rem',
+  '18.5': '6.9375rem',
+  '19.5': '7.3125rem',
+  '20.5': '7.6875rem',
+  '21.5': '8.0625rem',
+  '22.5': '8.4375rem',
+  '23.5': '8.8125rem',
+  '24.5': '9.1875rem',
+  '25.5': '9.5625rem',
+  '26.5': '9.9375rem',
+  '27.5': '10.3125rem',
+  '28.5': '10.6875rem',
+  '29.5': '11.0625rem',
+  '30.5': '11.4375rem',
+  '31.5': '11.8125rem',
+  '32.5': '12.1875rem',
+  '33.5': '12.5625rem',
+  '34.5': '12.9375rem',
 };
 
 export const EXPECTED_FONT_SIZES_VARS = {

package/src/tailwind/constants/spacing.ts

@@ -3,5 +3,6 @@ import { createSpacing } from '../utils/create-spacing.js';
 export const SPACING_LENGTH = 35;
 export const SPACING_UNIT = 6;
 export const SPACING_SCALE = 16;
+export const ADD_MINOR_SCALE = true;
 
-export const SPACING = createSpacing(SPACING_UNIT, SPACING_SCALE);
+export const SPACING = createSpacing(SPACING_UNIT, SPACING_SCALE, ADD_MINOR_SCALE);

package/src/tailwind/tailwind-plugin.ts

@@ -51,6 +51,9 @@ export const WestpacUIKitBasePlugin = plugin(
           // See https://stackoverflow.com/questions/19982651/why-does-bootstrap-set-the-line-height-property-to-1-428571429 for below line height reasoning
           loose: '1.428571429',
         },
+        borderRadius: {
+          DEFAULT: '0.1875rem',
+        },
         borderWidth: {
           5: '0.3125rem',
         },

package/src/tailwind/types/index.ts

@@ -1,2 +1 @@
 export * from './brand.types.js';
-export * from './theme.types.js';

package/src/tailwind/utils/create-spacing.ts

@@ -1,14 +1,10 @@
-import { type SPACING_KEY } from '../types/theme.types.js';
-
-type SpacingRecord = Record<SPACING_KEY, string>;
-export const createSpacing = (spacingUnit: number, spacingScale: number) => {
-  return Array.from({ length: 35 }).reduce<SpacingRecord>(
-    (spacing, _, i) => {
-      const newIndex = ++i;
-      spacing[newIndex as SPACING_KEY] = `${(newIndex * spacingUnit) / spacingScale}rem`;
-
-      return spacing;
-    },
-    { 0: '0' } as SpacingRecord,
-  );
+type SpacingRecord = Record<number, string>;
+export const createSpacing = (spacingUnit: number, spacingScale: number, addMinorScale: boolean) => {
+  return Array.from({ length: 36 }).reduce<SpacingRecord>((spacing, _, i) => {
+    spacing[i] = `${(i * spacingUnit) / spacingScale}rem`;
+    if (addMinorScale && i < 35) {
+      spacing[i + 0.5] = `${((i + 0.5) * spacingUnit) / spacingScale}rem`;
+    }
+    return spacing;
+  }, {} as SpacingRecord);
 };

package/tsconfig.build.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["**/*.spec.*", "**/*.test.*"]
+  "exclude": ["**/*.spec.*", "**/*.test.*", "**/*.stories.*"]
 }