Merge pull request #881 from WestpacGEL/develop

Develop

.changeset/flat-doors-impress.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+updated button styling; fix filter scroll button visual bug

.changeset/strong-eyes-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+updated progress-indicators to use IconProps

apps/playground/package.json

@@ -10,7 +10,7 @@
     "lint:fix": "next lint --fix"
   },
   "dependencies": {
-    "next": "14.2.5",
+    "next": "14.2.10",
     "react": "^18",
     "react-dom": "^18",
     "zustand": "~4.5.4"

apps/protoform/package.json

@@ -12,7 +12,7 @@
     "@westpac/ui": "workspace:~",
     "clsx": "^1.2.1",
     "lodash.throttle": "~4.1.1",
-    "next": "14.2.4",
+    "next": "14.2.10",
     "react": "^18",
     "react-dom": "^18"
   },
@@ -25,7 +25,7 @@
     "@westpac/ts-config": "workspace:~",
     "autoprefixer": "^10.0.1",
     "eslint": "^8.56.0",
-    "eslint-config-next": "14.2.4",
+    "eslint-config-next": "14.2.10",
     "eslint-config-turbo": "^0.0.7",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",

apps/site/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/site/package.json

@@ -19,7 +19,7 @@
     "clsx": "^1.2.1",
     "framer-motion": "~10.12.16",
     "lodash.throttle": "~4.1.1",
-    "next": "^14.2.4",
+    "next": "^14.2.10",
     "prism-react-renderer": "~2.0.6",
     "prismjs": "~1.29.0",
     "react": "^18.2.0",
@@ -41,7 +41,7 @@
     "@westpac/ts-config": "workspace:~",
     "autoprefixer": "~10.4.14",
     "eslint": "^8.56.0",
-    "eslint-config-next": "14.2.4",
+    "eslint-config-next": "14.2.10",
     "eslint-config-turbo": "^0.0.7",
     "postcss": "~8.4.31",
     "tailwind-variants": "~0.2.1",

apps/site/src/components/component-blocks/components/availability-content/availability-content.preview.tsx

@@ -4,6 +4,7 @@ const availabilityOptions = [
   { label: 'Available', value: 'available' },
   { label: 'Not Available', value: 'unavailable' },
   { label: 'In Progress', value: 'in-progress' },
+  { label: 'Older Version Available', value: 'older-version-available' },
 ];
 
 export const availabilityContent = component({

apps/site/src/components/component-blocks/components/availability-content/components/table-of-availability/table-of-availability.component.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderRow, TableRow } from '@westpac/ui';
-import { CalendarIcon, TickCircleIcon, WarningIcon } from '@westpac/ui/icon';
+import { AlertIcon, CalendarIcon, TickCircleIcon, WarningIcon } from '@westpac/ui/icon';
 import React from 'react';
 
 import { styles as TableOfAvailabilityStyles } from './table-of-availability.styles';
@@ -17,11 +17,12 @@ interface TableOfAvailabilityProps {
 
 const availabilityMap: Record<
   string,
-  { color: 'success' | 'warning' | 'info'; icon: React.ElementType; text: string }
+  { color: 'success' | 'warning' | 'info' | 'danger'; icon: React.ElementType; text: string }
 > = {
   available: { text: 'Available', icon: TickCircleIcon, color: 'success' },
-  unavailable: { text: 'Older version available', icon: WarningIcon, color: 'warning' },
   'in-progress': { text: 'Older version available - Upgrade in backlog', icon: CalendarIcon, color: 'info' },
+  'older-version-available': { text: 'Older version available', icon: WarningIcon, color: 'warning' },
+  unavailable: { text: 'Not available', icon: AlertIcon, color: 'danger' },
 };
 
 export function TableOfAvailability({

apps/site/src/components/component-blocks/components/availability-content/components/table-of-availability/table-of-availability.styles.ts

@@ -15,6 +15,9 @@ export const styles = tv({
       info: {
         text: 'text-info',
       },
+      danger: {
+        text: 'text-danger',
+      },
     },
   },
 });

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

@@ -3,6 +3,6 @@
 {% availabilityContent
   availableGel="available"
   availableMesh="in-progress"
-  availableLegacyWdp="unavailable"
+  availableLegacyWdp="older-version-available"
   alternativeMesh="Typeahead"
   alternativeLegacyWdp="Typeahead" /%}

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

@@ -3,4 +3,4 @@
 {% availabilityContent
   availableGel="available"
   availableMesh="in-progress"
-  availableLegacyWdp="unavailable" /%}
+  availableLegacyWdp="older-version-available" /%}

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

@@ -3,4 +3,4 @@
 {% availabilityContent
    availableGel="available"
    availableMesh="in-progress"
-   availableLegacyWdp="unavailable" /%}
+   availableLegacyWdp="older-version-available" /%}

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

@@ -3,4 +3,4 @@
 {% availabilityContent
    availableGel="available"
    availableMesh="in-progress"
-   availableLegacyWdp="unavailable" /%}
+   availableLegacyWdp="older-version-available" /%}

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

@@ -3,4 +3,4 @@
 {% availabilityContent
    availableGel="available"
    availableMesh="in-progress"
-   availableLegacyWdp="unavailable" /%}
+   availableLegacyWdp="older-version-available" /%}

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

@@ -3,4 +3,4 @@
 {% availabilityContent
    availableGel="available"
    availableMesh="in-progress"
-   availableLegacyWdp="unavailable" /%}
+   availableLegacyWdp="older-version-available" /%}

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

@@ -3,4 +3,4 @@
 {% availabilityContent
    availableGel="available"
    availableMesh="in-progress"
-   availableLegacyWdp="unavailable" /%}
+   availableLegacyWdp="older-version-available" /%}

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

@@ -3,4 +3,4 @@
 {% availabilityContent
    availableGel="available"
    availableMesh="in-progress"
-   availableLegacyWdp="unavailable" /%}
+   availableLegacyWdp="older-version-available" /%}

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

@@ -3,4 +3,4 @@
 {% availabilityContent
   availableGel="available"
   availableMesh="available"
-  availableLegacyWdp="unavailable" /%}
+  availableLegacyWdp="older-version-available" /%}

packages/eslint-config/package.json

@@ -8,7 +8,7 @@
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
     "eslint": "^8.56.0",
-    "eslint-config-next": "14.2.4",
+    "eslint-config-next": "14.2.10",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-config-turbo": "^0.0.7",

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

@@ -15,6 +15,7 @@ const INVERTED_COLORS = [
   'success-inverted',
   'warning-inverted',
 ] as const;
+const SIZES = ['xlarge', 'large', 'medium', 'small'] as const;
 
 const meta: Meta<typeof Badge> = {
   title: 'Components/Badge',
@@ -141,17 +142,58 @@ export const Links = () => (
 );
 
 /**
- * > Example next to link
+ * > Example on buttons
  */
 export const Buttons = () => (
   <div className="flex flex-col gap-2">
-    {INVERTED_COLORS.map(color => (
-      <Button key={color} look="primary">
-        Primary
-        <Badge color={color} type="pill" className="ml-1">
-          {color}
-        </Badge>
-      </Button>
-    ))}
+    <div className="flex gap-2">
+      {SIZES.map(size => (
+        <Button key={size} color="primary" size={size}>
+          <div className="w-max flex items-center">
+            Label
+            <Badge type="default" color="faint" className="ml-1">
+              NEW
+            </Badge>{' '}
+          </div>
+        </Button>
+      ))}
+    </div>
+    <div className="flex gap-2">
+      {SIZES.map(size => (
+        <Button key={size} color="primary" size={size}>
+          <div className="w-max flex items-center">
+            <Badge type="default" color="faint" className="mr-1">
+              NEW
+            </Badge>{' '}
+            Label
+          </div>
+        </Button>
+      ))}
+    </div>
+    <h3 className="typography-body-9 font-bold">Pill badge</h3>
+    <div className="flex gap-2">
+      {SIZES.map(size => (
+        <Button key={size} look="primary" size={size}>
+          <div className="w-max flex items-center">
+            Label
+            <Badge color="danger-inverted" type="pill" className="ml-1">
+              88
+            </Badge>
+          </div>
+        </Button>
+      ))}
+    </div>
+    <div className="flex gap-2">
+      {SIZES.map(size => (
+        <Button key={size} look="primary" size={size}>
+          <div className="w-max flex items-center">
+            <Badge color="danger-inverted" type="pill" className="mr-1">
+              88
+            </Badge>
+            Label
+          </div>
+        </Button>
+      ))}
+    </div>
   </div>
 );

packages/ui/src/components/button/button.spec.tsx

@@ -17,7 +17,7 @@ describe('Button', () => {
   it('renders the style correctly', () => {
     const style = styles({ look: 'primary', size: 'medium' });
     expect(style.base()).toBe(
-      'items-center justify-center rounded leading-normal transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-0.5 relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop inline-flex w-auto outline-none',
+      'items-center justify-center rounded transition-[background] disabled:pointer-events-none disabled:opacity-50 group-first/add-on-before:rounded-r-none group-last/add-on-after:rounded-l-none typography-body-9 px-2 active-theme-rams:before:h-0.5 h-6 relative border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50 active-theme-rams:border-b-pop active-theme-rams:before:absolute active-theme-rams:before:bottom-0 active-theme-rams:before:block active-theme-rams:before:w-full active-theme-rams:before:bg-pop inline-flex w-auto outline-none',
     );
   });
 
@@ -64,6 +64,6 @@ describe('Button utils', () => {
       md: 'large',
       lg: 'xlarge',
     });
-    expect(size).toStrictEqual({ initial: 'small', md: 'medium', lg: 'medium' });
+    expect(size).toStrictEqual({ initial: 'xsmall', md: 'small', lg: 'medium' });
   });
 });

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

@@ -1,6 +1,7 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
+import { ProgressIndicator } from '../progress-indicator/progress-indicator.component.js';
 
 import { Button } from './button.component.js';
 
@@ -36,15 +37,15 @@ export const Colors = () => (
     <div className="flex gap-2">
       {LOOKS.map(look => (
         <Button key={look} look={look}>
-          {look}
+          {look.charAt(0).toUpperCase() + look.slice(1)}
         </Button>
       ))}
     </div>
     <h3 className="font-bold">Soft</h3>
     <div className="flex gap-2">
       {SOFT_LOOKS.map(look => (
         <Button key={look} look={look} soft>
-          {look}
+          {look.charAt(0).toUpperCase() + look.slice(1)}
         </Button>
       ))}
     </div>
@@ -62,14 +63,14 @@ export const Sizes = () => (
         <div className="flex gap-2">
           {LOOKS.map(look => (
             <Button key={look} look={look} size={size}>
-              {look}
+              {look.charAt(0).toUpperCase() + look.slice(1)}
             </Button>
           ))}
         </div>
         <div className="flex gap-2">
           {SOFT_LOOKS.map(look => (
             <Button key={look} look={look} size={size} soft>
-              {look}
+              {look.charAt(0).toUpperCase() + look.slice(1)}
             </Button>
           ))}
         </div>
@@ -89,7 +90,7 @@ export const Block = () => (
         <div className="flex flex-col gap-2">
           {SOFT_LOOKS.map(look => (
             <Button key={look} look={look} size={size} block>
-              {look}
+              {look.charAt(0).toUpperCase() + look.slice(1)}
             </Button>
           ))}
         </div>
@@ -109,14 +110,14 @@ export const Icons = () => (
       <div className="flex gap-2">
         {LOOKS.map(look => (
           <Button key={look} look={look} iconBefore={BurgerIcon}>
-            {look}
+            {look.charAt(0).toUpperCase() + look.slice(1)}
           </Button>
         ))}
       </div>
       <div className="flex gap-2">
         {SOFT_LOOKS.map(look => (
           <Button key={look} look={look} soft iconBefore={BurgerIcon}>
-            {look}
+            {look.charAt(0).toUpperCase() + look.slice(1)}
           </Button>
         ))}
       </div>
@@ -152,14 +153,14 @@ export const Icons = () => (
       <div className="flex gap-2">
         {LOOKS.map(look => (
           <Button key={look} look={look} iconAfter={BurgerIcon}>
-            {look}
+            {look.charAt(0).toUpperCase() + look.slice(1)}
           </Button>
         ))}
       </div>
       <div className="flex gap-2">
         {SOFT_LOOKS.map(look => (
           <Button key={look} look={look} soft iconAfter={BurgerIcon}>
-            {look}
+            {look.charAt(0).toUpperCase() + look.slice(1)}
           </Button>
         ))}
       </div>