@westpac/ui 0.3.0 → 0.4.0

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

@@ -0,0 +1,104 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { ProgressRopeGroupStep, ProgressRopeStep } from './components/index.js';
+import { styles } from './progress-rope.styles.js';
+import { type ProgressRopeProps, type ProgressRopeStepWithIndex } from './progress-rope.types.js';
+
+const verifyByCurrentIndexWhichGroupIsOpened = (currentIndex: number, mappedData: ProgressRopeStepWithIndex[]) => {
+  return mappedData.reduce((acc: null | number, step, index) => {
+    if (step.type === 'group' && step.steps.find(subStep => subStep.index === currentIndex)) {
+      return index;
+    }
+    return acc;
+  }, null);
+};
+
+export function ProgressRope({
+  'aria-label': ariaLabel = 'Form steps',
+  role = 'navigation',
+  className,
+  tag: Tag = 'nav',
+  current = 0,
+  data,
+  ...props
+}: ProgressRopeProps) {
+  const [furthestVisitedStep, setFurthestVisitedStep] = useState<number>(current);
+
+  const mappedData = useMemo(() => {
+    let autoIncrement = -1;
+    return data?.reduce((acc: ProgressRopeStepWithIndex[], current) => {
+      if (current.type === 'group') {
+        return [
+          ...acc,
+          {
+            ...current,
+            steps: current.steps.map(step => {
+              autoIncrement++;
+              return { ...step, index: autoIncrement };
+            }),
+          },
+        ];
+      }
+      autoIncrement++;
+      return [
+        ...acc,
+        {
+          ...current,
+          index: autoIncrement,
+        },
+      ];
+    }, []);
+  }, [data]);
+
+  useEffect(() => {
+    setFurthestVisitedStep(state => {
+      return state > current ? state : current;
+    });
+  }, [current]);
+
+  const [openedGroupStepIndex, setOpenedGroupStepIndex] = useState<number | null>(
+    verifyByCurrentIndexWhichGroupIsOpened(current, mappedData || []),
+  );
+
+  useEffect(() => {
+    const newGroupStepIndex = verifyByCurrentIndexWhichGroupIsOpened(current, mappedData || []);
+    if (newGroupStepIndex !== openedGroupStepIndex) {
+      setOpenedGroupStepIndex(newGroupStepIndex);
+    }
+  }, [current]);
+
+  return (
+    <Tag className={className} role={role} aria-label={ariaLabel} {...props}>
+      <ul className={styles({})}>
+        {mappedData?.map((item, index) => {
+          return (
+            <li key={index}>
+              {item.type === 'group' ? (
+                <ProgressRopeGroupStep
+                  firstItem={index === 0}
+                  furthestVisitedStep={furthestVisitedStep}
+                  currentKey={current}
+                  steps={item.steps}
+                  opened={openedGroupStepIndex === index}
+                  onToggle={() => setOpenedGroupStepIndex(state => (state === index ? null : index))}
+                >
+                  {item.text}
+                </ProgressRopeGroupStep>
+              ) : (
+                <ProgressRopeStep
+                  firstItem={index === 0}
+                  type={item.type}
+                  onClick={furthestVisitedStep >= item.index ? item.onClick : undefined}
+                  visited={furthestVisitedStep >= item.index}
+                  current={current === item.index}
+                >
+                  {item.text}
+                </ProgressRopeStep>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </Tag>
+  );
+}

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

@@ -0,0 +1,112 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../index.js';
+
+import { ProgressRope } from './progress-rope.component.js';
+import { ProgressRopeProps } from './progress-rope.types.js';
+
+const meta: Meta<typeof ProgressRope> = {
+  title: 'Example/ProgressRope',
+  component: ProgressRope,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+  render: () => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const handleClick = useCallback(
+      (index: number) => () => {
+        setActiveIndex(index);
+      },
+      [],
+    );
+    const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
+      { text: <h3>Step 1</h3>, onClick: handleClick(0) },
+      { text: <h3>Step 2</h3>, onClick: handleClick(1) },
+      { text: <h3>Step 3</h3>, onClick: handleClick(2) },
+      { text: <h3>Step 4</h3>, onClick: handleClick(3) },
+      { text: <h3>Step 5</h3>, onClick: handleClick(4) },
+      { text: <h3>Review and Submit</h3>, onClick: handleClick(5) },
+    ];
+
+    return (
+      <div>
+        <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
+        <div>
+          <h3>Helper Controls</h3>
+          <h4>Current: {activeIndex}</h4>
+          <Button onClick={() => setActiveIndex(state => --state)}>prev</Button>{' '}
+          <Button onClick={() => setActiveIndex(state => ++state)}>next</Button>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * > Grouping steps story usage example
+ */
+export const GroupingStepsStory: Story = {
+  args: {},
+  render: () => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const handleClick = useCallback(
+      (index: number) => () => {
+        setActiveIndex(index);
+      },
+      [],
+    );
+    const PROGRESS_ROPE_DATA: ProgressRopeProps['data'] = [
+      {
+        type: 'group',
+        text: 'Group 1',
+        steps: [
+          { text: 'Step 1', onClick: handleClick(0) },
+          { text: 'Step 2', onClick: handleClick(1) },
+        ],
+      },
+      {
+        type: 'group',
+        text: 'Group 2',
+        steps: [
+          { text: 'Step 3', onClick: handleClick(2) },
+          { text: 'Step 4', onClick: handleClick(3) },
+        ],
+      },
+      {
+        type: 'group',
+        text: 'Group 3',
+        steps: [
+          { text: 'Step 5', onClick: handleClick(4) },
+          { text: 'Step 6', onClick: handleClick(5) },
+          { text: 'Step 7', onClick: handleClick(6) },
+        ],
+      },
+      { text: 'Review and Submit', onClick: handleClick(7) },
+    ];
+
+    return (
+      <div>
+        <ProgressRope current={activeIndex} data={PROGRESS_ROPE_DATA} />
+        <div>
+          <h3>Helper Controls</h3>
+          <h4>Current: {activeIndex}</h4>
+          <Button onClick={() => setActiveIndex(state => --state)}>prev</Button>{' '}
+          <Button onClick={() => setActiveIndex(state => ++state)}>next</Button>
+        </div>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'relative flex flex-col',
+});

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

@@ -0,0 +1,41 @@
+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>;
+  text: ReactNode;
+  type?: 'step';
+};
+
+export type ProgressRopeStepWithIndex =
+  | (ProgressRopeStepItem & { index: number })
+  | {
+      steps: (ProgressRopeStepItem & { index: number })[];
+      text: ReactNode;
+      type: 'group';
+    };
+
+export type ProgressRopeProps = {
+  /**
+   * Current active step (zero-indexed)
+   */
+  current?: number;
+  /**
+   * Data
+   */
+  data?: (
+    | ProgressRopeStepItem
+    | {
+        steps: ProgressRopeStepItem[];
+        text: ReactNode;
+        type: 'group';
+      }
+  )[];
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

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

@@ -14,7 +14,7 @@ const meta: Meta<typeof Radio> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
   argTypes: {
     isDisabled: {

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

@@ -14,7 +14,7 @@ const meta: Meta<typeof RadioGroup> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
   args: {
     label: <h2>Test</h2>,

package/src/components/select/select.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof Select> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline',
+    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline 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/skip-link/skip-link.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof SkipLink> = {
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

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

@@ -14,7 +14,7 @@ const meta: Meta<typeof Switch> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

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: {
@@ -30,7 +30,7 @@ export const styles = tv(
       },
       isSelected: {
         true: {
-          switchDiv: 'bg-hero border-hero after:left-full after:-translate-x-full',
+          switchDiv: 'border-hero bg-hero after:left-full after:-translate-x-full',
         },
       },
       isDisabled: {

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'typography-body-8 mb-2 text-left font-light',
+    base: 'typography-body-8 mb-2 text-left font-light group-first/panel:px-4 group-first/panel:pt-4 max-xsl:group-first/panel:px-2 max-xsl:group-first/panel:pt-2',
     variants: {},
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

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

@@ -3,14 +3,14 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'typography-body-10 border-border border border-x-0 border-b-[1px] border-t-0 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-bottom',
     },
     variants: {
       bordered: {
-        true: { base: 'border-x-1' },
+        true: { base: 'border-x' },
       },
-      highlighted: { true: { base: 'border-b-primary border border-b-[3px]' } },
-      highlightStart: { true: { base: 'border-l-primary border border-b-[3px] border-l-[6px]' } },
+      highlighted: { true: { base: 'border border-b-[3px] border-b-primary' } },
+      highlightStart: { true: { base: 'border border-b-[3px] border-l-[6px] border-l-primary' } },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

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

@@ -2,10 +2,10 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    slots: { base: 'text-muted typography-body-10 p-2 text-left font-light' },
+    slots: { base: 'typography-body-10 p-2 text-left font-light text-muted' },
     variants: {
       bordered: {
-        true: { base: 'border-border border' },
+        true: { base: 'border border-border' },
       },
     },
   },

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

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

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

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

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

@@ -14,7 +14,7 @@ const meta: Meta<typeof Table> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

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

@@ -5,7 +5,7 @@ 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',
     variants: {
       look: {
-        default: 'border border-border',
+        default: 'border border-border bg-white',
         material: '',
       },
       selected: {

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex-1 p-4 focus:focus-outline',
+    base: 'flex-1 bg-white p-4 focus:focus-outline',
     variants: {
       look: {
         default: 'border border-border',

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

@@ -1,8 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { Key, useState } from 'react';
 
-import { Button } from '../index.js';
-
 import { Tabs } from './tabs.component.js';
 
 const meta: Meta<typeof Tabs> = {
@@ -17,7 +15,7 @@ const meta: Meta<typeof Tabs> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

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

@@ -4,7 +4,7 @@ export const styles = tv(
   {
     slots: {
       base: 'flex',
-      tabList: 'relative z-10 flex bg-white',
+      tabList: 'relative z-10 flex',
     },
     variants: {
       orientation: {

package/src/components/textarea/textarea.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof Textarea> = {
     ),
   ],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

package/src/components/textarea/textarea.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
+    base: 'form-control w-full read-only:form-control-disabled disabled:form-control-disabled focus:focus-outline',
     variants: {
       size: {
         small: 'form-control-small min-h-[3.375rem]',

package/src/components/visually-hidden/visually-hidden.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof VisuallyHidden> = {
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
   parameters: {
-    layout: 'center',
+    layout: 'fullscreen',
   },
 };
 

package/src/hook/index.ts

@@ -0,0 +1 @@
+export * from '../components/pagination/pagination.hooks.js';

package/src/tailwind/tailwind-plugin.ts

@@ -5,6 +5,7 @@ import { BREAKPOINTS } from './constants/breakpoints.js';
 import { COLORS, DEFAULT_BODY_TYPOGRAPHY, FONT_TYPES, SPACING } from './constants/index.js';
 import { THEMES } from './themes/index.js';
 import { theme as WBCTheme } from './themes/wbc.js';
+import { generateDatePicker } from './utils/generate-date-picker-component.js';
 import { createFontSizes, generateFontComponents, generateFormControlComponents } from './utils/index.js';
 
 /**
@@ -25,6 +26,7 @@ export const WestpacUIKitBasePlugin = plugin(
     });
     addComponents(generateFontComponents(theme('typographySizes'), theme));
     addComponents(generateFormControlComponents(theme('formControl')));
+    addComponents(generateDatePicker());
   },
   {
     theme: {
@@ -50,9 +52,20 @@ export const WestpacUIKitBasePlugin = plugin(
             '0%': { opacity: '0' },
             '100%': { opacity: '1' },
           },
+          fadeInDown: {
+            '0%': {
+              opacity: '0',
+              transform: 'translateY(-10vh)',
+            },
+            '100%': {
+              opacity: '1',
+              transform: 'translateY(0)',
+            },
+          },
         },
         animation: {
           fadeIn: 'fadeIn 0.2s ease',
+          fadeInDown: 'fadeInDown 0.4s ease',
         },
         boxShadow: {
           switch: '0.1875rem 0 0.375rem 0 rgba(0,0,0,0.53)',
@@ -112,10 +125,10 @@ export const WestpacUIKitBasePlugin = plugin(
         disabled: 'cursor-not-allowed border-dashed bg-background text-muted',
         sizes: {
           // Some of the values are not following the spacing so we needed to use static values as following
-          small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm',
-          medium: 'typography-body-9 px-2 py-[0.3125rem]',
+          small: 'px-[0.5625rem] pb-[0.25rem] pt-[0.1875rem] text-sm leading-[1.3rem]',
+          medium: 'typography-body-9 px-2 py-[0.3125rem] leading-6',
           large: 'px-[0.9375rem] py-[0.5rem] text-base',
-          xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg',
+          xlarge: 'px-3 pb-[0.625rem] pt-[0.5625rem] text-lg leading-[1.685rem]',
         },
       },
       focusOutline: 'outline outline-2 outline-offset-[3px] outline-focus',

package/src/tailwind/tailwind-transformer.ts

@@ -6,6 +6,12 @@ import { WestpacUIKitBasePlugin, WestpacUIKitThemesPlugin } from '@westpac/ui/ta
 export const withGEL = (config: Config) =>
   withTV({
     ...config,
+    safelist: [
+      // Workaround for date-picker which is a web component and tailwind can't pickup the inner components
+      'date-picker',
+      ...(typeof config.safelist === 'string' ? [config.safelist] : []),
+      ...(Array.isArray(config.safelist) ? config.safelist : []),
+    ],
     plugins: [
       WestpacUIKitBasePlugin,
       WestpacUIKitThemesPlugin,