Fix/style fixes

.changeset/cyan-owls-rest.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+Updated the appearance and svg of progress indicator component; updated visual bugs in header and badge;

apps/protoform/src/components/cta/cta.tsx

@@ -19,7 +19,7 @@ export function Cta({
   tertiaryOnClick?: () => void;
 }) {
   return (
-    <div className="flex gap-2 py-5 max-md:flex-col">
+    <div className="flex gap-2 pt-5 pb-9 max-md:flex-col">
       <Button size="large" look="primary" className="md:px-2.5" onClick={primaryOnClick} type={primaryType}>
         {children}
       </Button>

apps/protoform/src/components/sidebar/sidebar.tsx

@@ -84,7 +84,7 @@ export function Sidebar({ children }: { children?: ReactNode }) {
       <>
         <div
           className={clsx(
-            'sticky top-0 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
+            'sticky items-center top-0 flex h-9 justify-between bg-white px-2 py-3 after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:z-10 after:block after:h-1 after:bg-gradient-to-b after:from-black/[.2] after:from-0% after:opacity-0 after:transition-all after:duration-200 after:will-change-[opacity] xsl:px-4 sm:px-5 md:hidden',
             { 'after:opacity-100': scrolled },
           )}
         >

apps/site/src/app/design-system/components/sidebar/sidebar.component.tsx

@@ -28,18 +28,18 @@ export function Sidebar({ items, brand }: SidebarProps) {
   });
 
   useEffect(() => {
-    if (!listRef.current) {
+    if (!outsideRef.current) {
       return;
     }
     const listener = () => {
-      const y = listRef.current?.scrollTop || 0;
+      const y = outsideRef.current?.scrollTop || 0;
       setScrolled(y > 0);
     };
-    listRef.current.addEventListener('scroll', listener);
+    outsideRef.current.addEventListener('scroll', listener);
     return () => {
-      listRef.current?.removeEventListener('scroll', listener);
+      outsideRef.current?.removeEventListener('scroll', listener);
     };
-  }, [listRef]);
+  }, []);
 
   useEffect(() => {
     if (open) {
@@ -81,8 +81,8 @@ export function Sidebar({ items, brand }: SidebarProps) {
           })}
         >
           <div
-            className={clsx({
-              'shadow-[rgba(0,0,0,0.26)_0_2px_5px]': scrolled,
+            className={clsx('sticky top-0 bg-white transition-shadow delay-0 duration-200 ease-[ease]', {
+              'shadow-[0_2px_5px_rgba(0,0,0,0.3)]': scrolled,
             })}
           >
             <button

apps/site/src/content/design-system/components/badge/accessibilityDemo.mdoc

@@ -35,9 +35,11 @@
                 <span>Label</span>
               </div>
             </Button>
-            <a className="text-link underline" href="#">
-                Messages 
-                <Badge color="muted" type="pill" className="ml-1">
+            <a className="text-link flex items-center" href="#">
+                <div className="underline">
+                  Product feature
+                </div>
+                <Badge color="muted" type="pill" className="ml-1 no-underline">
                   12
                 </Badge>
               </a>
@@ -65,12 +67,11 @@
 
             <a className="text-link underline" href="#">
                 Product feature
-                <Badge color="muted"  className="ml-1">
+                <Badge color="muted" className="ml-1">
                   NEW
                 </Badge>
               </a>
 
-
           </div>
         </div>
       </div>

apps/site/src/content/design-system/components/badge/design/badge-styles/content.mdoc

@@ -105,8 +105,10 @@ Badges come in 2 different styles: Default, used to highlight words, and Pill, u
                 <span>Label</span>
               </div>
             </Button>
-            <a className="text-link underline" href="#">
-                Messages 
+            <a className="text-link flex items-center" href="#">
+                <div className="underline">
+                  Messages
+                </div> 
                 <Badge color="muted" type="pill" className="ml-1">
                   12
                 </Badge>

apps/site/src/content/design-system/components/badge/design/where-is-this-available/content.mdoc

@@ -1,6 +1,6 @@
 {% shortCode name="where-is-this-available" /%}
 
 {% availabilityContent
-  availableGel="available"
-  availableMesh="in-progress"
-  availableLegacyWdp="older-version-available" /%}
+   availableGel="available"
+   availableMesh="in-progress"
+   availableLegacyWdp="older-version-available" /%}

packages/ui/src/components/badge/badge.stories.tsx

@@ -131,12 +131,14 @@ export const Soft = () => (
 export const Links = () => (
   <div className="flex flex-col gap-2">
     {COLORS.map(color => (
-      <a key={color} className="text-link underline" href="#">
-        {color}
-        <Badge color={color} type="pill" className="ml-1">
-          12
-        </Badge>
-      </a>
+      <div key={color} className="flex items-center">
+        <a className="flex items-center text-link" href="#">
+          <div className="underline">Product feature</div>
+          <Badge color={color} type="pill" className="ml-1">
+            NEW
+          </Badge>
+        </a>
+      </div>
     ))}
   </div>
 );

packages/ui/src/components/header/header.component.tsx

@@ -103,7 +103,7 @@ export function Header({
             <Button
               look="link"
               iconAfter={ButtonIcon}
-              size="large"
+              iconSize={leftIcon === 'arrow' ? 'medium' : 'small'}
               onClick={leftOnClick}
               aria-label={leftAssistiveText}
               className={styles.leftButton()}

packages/ui/src/components/header/header.styles.ts

@@ -11,7 +11,7 @@ export const styles = tv(
       largeLogo: 'max-sm:hidden',
       leftContent: 'flex items-center',
       leftButton:
-        'my-1 border-r border-[#E8E8ED] p-0 max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
+        'my-1 border-r border-[#E8E8ED] p-0 rounded-none max-sm:-ml-2 max-sm:mr-2 max-sm:h-7 max-sm:min-w-[2.625rem] sm:-ml-4 sm:mr-3 sm:h-[3.3125rem] sm:min-w-[3.75rem]',
       rightContent: 'ml-auto flex items-center',
     },
     variants: {

packages/ui/src/components/progress-indicator/progress-indicator.component.tsx

@@ -1,21 +1,74 @@
-import React from 'react';
+import React, { useId } from 'react';
 
 import { Icon } from '../icon/icon.component.js';
+import { Label } from '../label/label.component.js';
 
-import { styles } from './progress-indicator.styles.js';
+import { styles as ProgressIndicatorStyles } from './progress-indicator.styles.js';
 import { ProgressIndicatorProps } from './progress-indicator.types.js';
 
 export function ProgressIndicator({
-  className,
-  children,
   color = 'hero',
+  inverted = false,
+  label,
   size = 'medium',
+  icon: EmbedIcon,
+  className,
   'aria-label': ariaLabel = 'Loading',
   ...props
 }: ProgressIndicatorProps) {
+  const styles = ProgressIndicatorStyles({
+    size,
+    inverted,
+  });
+
+  const id = useId();
+
+  const sizeMap: Record<string, { strokeWidth: number }> = {
+    xlarge: { strokeWidth: 4 },
+    large: { strokeWidth: 4 },
+    medium: { strokeWidth: 15 },
+    small: { strokeWidth: 20 },
+    xsmall: { strokeWidth: 30 },
+  };
+
+  const strokeHalfWidth = sizeMap[size.toString()].strokeWidth / 2;
+
   return (
-    <Icon className={styles({ className })} size={size} color={color} aria-label={ariaLabel} {...props}>
-      {children}
-    </Icon>
+    <div aria-label={ariaLabel} className={styles.container()}>
+      <div className="relative">
+        <Icon
+          viewBox="0 0 180 180"
+          fill="none"
+          color={inverted ? 'white' : 'hero'}
+          className={styles.base({ className })}
+          {...props}
+        >
+          <defs>
+            <linearGradient id={`${id}-1`}>
+              <stop offset="0%" stopOpacity="0" stopColor="currentColor" />
+              <stop offset="100%" stopColor="currentColor" />
+            </linearGradient>
+            <linearGradient id={`${id}-2`}>
+              <stop offset="0%" stopColor="currentColor" />
+              <stop offset="50%" stopColor="currentColor" />
+            </linearGradient>
+          </defs>
+          <g strokeWidth={strokeHalfWidth * 2}>
+            <>
+              <path
+                stroke={`url(#${id}-1)`}
+                d={`M ${strokeHalfWidth} 90 A ${90 - strokeHalfWidth} ${90 - strokeHalfWidth} 0 0 1 ${180 - strokeHalfWidth} 90`}
+              ></path>
+              <path
+                stroke={`url(#${id}-2)`}
+                d={`M ${180 - strokeHalfWidth} 90 A ${90 - strokeHalfWidth} ${90 - strokeHalfWidth} 0 0 1 ${strokeHalfWidth} 90`}
+              ></path>
+            </>
+          </g>
+        </Icon>
+        {EmbedIcon && size === 'large' && <EmbedIcon size="large" className={styles.icon()} />}
+      </div>
+      {label && size === 'large' && <Label className={styles.label()}>{label}</Label>}
+    </div>
   );
 }

packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx

@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>;
  * >Default usage example
  */
 export const Default: Story = {
-  args: { size: 'xlarge' },
+  args: { size: 'large' },
 };
 
 /**

packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx

@@ -1,5 +1,7 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
+import { FingerprintIcon, PadlockIcon, PadlockTickIcon } from '../icon/index.js';
+
 import { ProgressIndicator } from './progress-indicator.component.js';
 
 const meta: Meta<typeof ProgressIndicator> = {
@@ -19,7 +21,7 @@ type Story = StoryObj<typeof meta>;
  * > Default usage example
  */
 export const Default: Story = {
-  args: { size: 'xlarge' },
+  args: { size: 'large' },
 };
 
 /**
@@ -28,11 +30,11 @@ export const Default: Story = {
 
 export const Sizes = () => {
   return (
-    <>
-      {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator key={size} size={size} className="mr-2" />
+    <div className="flex items-center justify-center gap-1">
+      {(['xsmall', 'small', 'medium', 'large'] as const).map(size => (
+        <ProgressIndicator key={size} size={size} />
       ))}
-    </>
+    </div>
   );
 };
 
@@ -42,10 +44,36 @@ export const Sizes = () => {
 
 export const Inverted = () => {
   return (
-    <div className="rounded bg-black">
-      {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator key={size} size={size} color={'white'} className="mr-2" />
+    <div className="flex items-center justify-center gap-1 rounded bg-black">
+      {(['xsmall', 'small', 'medium', 'large'] as const).map(size => (
+        <ProgressIndicator key={size} size={size} inverted />
       ))}
     </div>
   );
 };
+
+/**
+ * > Large indicator with embedded icon example
+ */
+
+export const Icon = () => {
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <ProgressIndicator size="large" icon={PadlockIcon} />
+      <ProgressIndicator size="large" icon={PadlockTickIcon} />
+      <ProgressIndicator size="large" color="primary" icon={FingerprintIcon} />
+    </div>
+  );
+};
+
+/**
+ * > Large indicator with label example
+ */
+export const Label = () => {
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <ProgressIndicator size="large" label="Loading..." />
+      <ProgressIndicator size="large" icon={PadlockTickIcon} label="Signing in..." />
+    </div>
+  );
+};

packages/ui/src/components/progress-indicator/progress-indicator.styles.ts

@@ -2,7 +2,37 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0',
+    slots: {
+      icon: 'absolute inset-0 m-auto',
+      base: 'animate-[spin_0.7s_linear_infinite]',
+      container: 'flex flex-col items-center',
+      label: 'typography-body-9 mt-1.5',
+    },
+    variants: {
+      size: {
+        xsmall: { base: 'h-2 w-2' },
+        small: { base: 'h-3 w-3' },
+        medium: { base: 'h-4 w-4' },
+        large: { base: 'h-15 w-15' },
+        xlarge: { base: 'h-15 w-15' },
+      },
+      inverted: {
+        true: '',
+        false: '',
+      },
+    },
+    compoundSlots: [
+      {
+        slots: ['icon', 'base', 'container'],
+        inverted: true,
+        class: ['text-white'],
+      },
+      {
+        slots: ['icon', 'base', 'container'],
+        inverted: false,
+        class: ['text-hero'],
+      },
+    ],
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
 );

packages/ui/src/components/progress-indicator/progress-indicator.types.ts

@@ -1,3 +1,24 @@
+import { ReactNode } from 'react';
+
 import { IconProps } from '../icon/icon.types.js';
 
-export type ProgressIndicatorProps = IconProps;
+export type ProgressIndicatorProps = IconProps & {
+  /**
+   * children prop
+   * @default false
+   */
+  children?: ReactNode;
+  /**
+   * Icon embedded in progress indicator
+   */
+  icon?: (props: IconProps) => JSX.Element;
+  /**
+   * Progress indicator color
+   * @default false
+   */
+  inverted?: boolean;
+  /**
+   * Label placed below progress indicator
+   */
+  label?: string;
+};

packages/ui/src/stories/foundation/typography.stories.tsx

@@ -42,7 +42,7 @@ export const BrandFont = () => {
     { className: 'typography-brand-11', fontSize: fourteenPixel, lineHeight: twentyPixel },
   ];
   return (
-    <Table>
+    <Table className="whitespace-pre">
       <TableCaption>GEL brand typography tokens</TableCaption>
       <TableHeader>
         <TableHeaderRow>