Merge pull request #828 from WestpacGEL/feature/left-and-right-filter…

…-scroll

Feature/left and right filter scroll. issue: #792

.changeset/polite-snakes-tickle.md

@@ -0,0 +1,6 @@
+---
+'@westpac/ui': minor
+---
+
+- Update filter buttons
+- Update typescript and tailwind variants version

.changeset/warm-knives-drop.md

@@ -0,0 +1,5 @@
+---
+'@westpac/eslint-config': minor
+---
+
+Update typescript version

apps/site/package.json

@@ -44,9 +44,9 @@
     "eslint-config-next": "14.2.4",
     "eslint-config-turbo": "^0.0.7",
     "postcss": "~8.4.31",
-    "tailwind-variants": "~0.1.13",
+    "tailwind-variants": "~0.2.1",
     "tailwindcss": "~3.3.2",
-    "typescript": "^5.1.3"
+    "typescript": "^5.5.4"
   },
   "overrides": {
     "react-live": {

apps/site/src/app/(home)/components/brand-select/brand-select.component.tsx

@@ -25,7 +25,7 @@ export function BrandSelect(props: BrandSelectProps) {
   const { buttonProps } = useButton(triggerProps, ref);
 
   const { focusProps, isFocusVisible } = useFocusRing();
-  const styles = brandSelectStyles({ isFocusVisible, isOpen: state.isOpen });
+  const styles = brandSelectStyles({ isFocusVisible });
 
   const finalButtonProps = mergeProps(focusProps, buttonProps);
   return (
@@ -45,7 +45,7 @@ export function BrandSelect(props: BrandSelectProps) {
         className={styles.button()}
       >
         <div className={styles.textWrapper()}>
-          <div className="flex w-full items-end gap-[0.625rem] overflow-hidden text-ellipsis py-2" {...valueProps}>
+          <div className="flex w-full items-end gap-2.5 overflow-hidden text-ellipsis py-2" {...valueProps}>
             <GELLogo className="w-7.5 shrink-0" />
             <span className="mb-[-0.2rem] shrink truncate leading-4">Design System</span>
           </div>

apps/site/src/app/(home)/components/brand-select/brand-select.styles.ts

@@ -3,12 +3,12 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative -mx-4 flex flex-col px-4 xsl:-mx-5 xsl:px-5',
-      label: 'block cursor-default text-left text-sm font-medium text-text',
+      base: 'xsl:-mx-5 xsl:px-5 relative -mx-4 flex flex-col px-4',
+      label: 'text-text block cursor-default text-left text-sm font-medium',
       button:
-        'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden pt-1.5 outline-none focus:focus-outline',
+        'focus:focus-outline relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden pt-1.5 outline-none',
       popover: 'w-full',
-      iconWrapper: 'pointer-events-none mb-[-0.4rem] flex flex-shrink-0 touch-none items-center text-primary',
+      iconWrapper: 'text-primary pointer-events-none mb-[-0.4rem] flex flex-shrink-0 touch-none items-center',
       textWrapper: 'flex flex-shrink items-center overflow-hidden pr-2',
     },
     variants: {
@@ -18,12 +18,6 @@ export const styles = tv(
         },
         false: {},
       },
-      isOpen: {
-        true: {
-          icon: 'rotate-90',
-        },
-        false: {},
-      },
     },
     compoundSlots: [],
   },

apps/site/src/app/design-system/[brand]/[...component]/components/header/header.styles.ts

@@ -3,11 +3,11 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'sticky top-0 z-50 flex w-full items-center gap-2 bg-hero px-2 py-3.5 antialiased transition-colors sm:px-4 md:-top-27 md:h-[14.25rem] md:items-end',
-      gridButton: 'flex h-6 items-stretch gap-[0.125rem] p-1 focus-visible:focus-outline',
+      base: 'bg-hero md:-top-27 sticky top-0 z-50 flex w-full items-center gap-2 px-2 py-3.5 antialiased transition-colors sm:px-4 md:h-[14.25rem] md:items-end',
+      gridButton: 'focus-visible:focus-outline flex h-6 items-stretch gap-0.5 p-1',
       gridButtonWrapper: 'fixed right-2 top-2 hidden items-center text-white sm:flex',
       hamburgerButton:
-        'fixed left-0 top-0 block translate-y-[-0.125rem] px-2 py-3.5 focus-visible:!outline-offset-[-2px] focus-visible:focus-outline sm:left-2 lg:hidden',
+        'focus-visible:focus-outline fixed left-0 top-0 block -translate-y-0.5 px-2 py-3.5 focus-visible:!outline-offset-[-2px] sm:left-2 lg:hidden',
       title: 'typography-brand-7 pl-6 font-normal leading-none text-white focus:outline-none sm:pl-6 lg:pl-0',
     },
     variants: {
@@ -18,23 +18,23 @@ export const styles = tv(
         },
         false: {
           base: '',
-          title: 'md:typography-brand-2 md:px-2 md:pb-4.5 md:pt-5 md:leading-none lg:ml-2',
+          title: 'md:typography-brand-2 md:pb-4.5 md:px-2 md:pt-5 md:leading-none lg:ml-2',
         },
       },
       brand: {
         wbg: {},
         bom: {},
         bsa: {
-          base: 'bg-[url("/imgs/backgrounds/bsa-background.svg"),_linear-gradient(to_right,#002f6c,#00adbd)] bg-cover',
+          base: 'bg-[url(/imgs/backgrounds/bsa-background.svg),_linear-gradient(to_right,#002f6c,#00adbd)] bg-cover',
         },
         rams: {
           base: 'bg-heading',
         },
         stg: {
-          base: 'bg-heading bg-[url("/imgs/backgrounds/stg-background.svg")] bg-cover',
+          base: 'bg-heading bg-[url(/imgs/backgrounds/stg-background.svg)] bg-cover',
         },
         wbc: {
-          base: 'bg-primary bg-[url("/imgs/backgrounds/wbc-background.svg")] bg-contain bg-right-bottom bg-no-repeat',
+          base: 'bg-primary bg-[url(/imgs/backgrounds/wbc-background.svg)] bg-contain bg-right-bottom bg-no-repeat',
           title: 'uppercase',
         },
       },

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

@@ -22,7 +22,7 @@ export function SidebarSelect(props: SidebarSelectProps) {
   const { buttonProps } = useButton(triggerProps, ref);
 
   const { focusProps, isFocusVisible } = useFocusRing();
-  const styles = sidebarSelectStyles({ isFocusVisible, isOpen: state.isOpen });
+  const styles = sidebarSelectStyles({ isFocusVisible });
   return (
     <div className={styles.base()}>
       <div {...labelProps} className={styles.label()}>
@@ -33,7 +33,7 @@ export function SidebarSelect(props: SidebarSelectProps) {
 
       <button {...mergeProps(buttonProps, focusProps)} ref={ref} className={styles.button()}>
         <div className={styles.textWrapper()}>
-          <div className="typography-body-11 w-full text-left leading-[1.5]" {...valueProps}>
+          <div className="typography-body-11 w-full text-left leading-normal" {...valueProps}>
             Change brand
           </div>
         </div>

apps/site/src/app/design-system/components/sidebar/components/sidebar-select/sidebar-select.styles.ts

@@ -4,23 +4,17 @@ export const styles = tv(
   {
     slots: {
       base: 'relative flex w-full flex-col',
-      label: 'block cursor-default text-left text-sm font-medium text-text',
+      label: 'text-text block cursor-default text-left text-sm font-medium',
       button:
         'relative flex h-11 cursor-pointer flex-row items-stretch overflow-hidden pl-3 pr-4 shadow-sm outline-none',
       popover: '-ml-2 w-[18.75rem]',
-      iconWrapper: 'flex items-center border-l border-l-border pl-4 text-primary',
+      iconWrapper: 'border-l-border text-primary flex items-center border-l pl-4',
       textWrapper: 'flex flex-1 items-center pr-2',
     },
     variants: {
       isFocusVisible: {
         true: {
-          button: '!outline-offset-[-2px] focus-outline',
-        },
-        false: {},
-      },
-      isOpen: {
-        true: {
-          icon: 'rotate-90',
+          button: 'focus-outline !outline-offset-[-2px]',
         },
         false: {},
       },

helpers/create-package/.template-ts/package.json

@@ -31,7 +31,7 @@
     "@westpac/ts-config": "workspace:~",
     "eslint": "^8.33.0",
     "shx": "^0.3.4",
-    "typescript": "^5.1.6",
+    "typescript": "^5.5.4",
     "vitest": "^0.30.1"
   },
   "scripts": {

package.json

@@ -41,7 +41,7 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "typescript": "~5.1.6"
+    "typescript": "~5.5.4"
   },
   "pnpm": {
     "overrides": {

packages/eslint-config/package.json

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@types/node": "*",
-    "typescript": "^5.1.6"
+    "typescript": "^5.5.4"
   },
   "publishConfig": {
     "access": "public"

packages/ui/package.json

@@ -260,6 +260,7 @@
     "chokidar": "^3.5.3",
     "colorjs.io": "~0.4.5",
     "cross-env": "~7.0.3",
+    "csstype": "~3.1.3",
     "eslint": "^8.56.0",
     "eslint-plugin-storybook": "~0.6.15",
     "glob": "~10.3.3",
@@ -274,11 +275,11 @@
     "react-dom": "^18.2.0",
     "shx": "^0.3.4",
     "storybook": "^7.6.4",
-    "tailwind-variants": "~0.1.13",
+    "tailwind-variants": "~0.2.1",
     "tailwindcss": "~3.3.2",
     "tailwindcss-themer": "~3.1.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.5.4",
     "vite": "^5.2.12",
     "vitest": "^0.30.1"
   },
@@ -303,7 +304,7 @@
     "@types/node": "~20.12.12",
     "colorjs.io": "~0.4.5",
     "react": ">=18.2.0",
-    "tailwind-variants": "~0.1.13",
+    "tailwind-variants": "~0.2.1",
     "tailwindcss": "~3.3.2",
     "tailwindcss-themer": "~3.1.0"
   }

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

@@ -30,7 +30,7 @@ describe('Autocomplete', () => {
     expect(style.input()).toBe('appearance-none bg-[transparent] outline-none form-control-large');
     expect(style.label()).toBe('block text-left text-sm font-medium text-text');
     expect(style.outerWrapper()).toBe(
-      'form-control relative flex flex-1 flex-row items-stretch overflow-hidden pr-2 disabled:form-control-disabled group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+      'form-control relative flex flex-1 flex-row items-stretch overflow-hidden pr-2 disabled:form-control-disabled group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0 border-borderDark',
     );
   });
 

packages/ui/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.types.ts

@@ -1,4 +1,5 @@
-import { CSSProperties, ReactNode } from 'react';
+import { Property } from 'csstype';
+import { ReactNode } from 'react';
 import { AriaModalOverlayProps } from 'react-aria';
 import { OverlayTriggerState } from 'react-stately';
 
@@ -10,7 +11,7 @@ export type ModalProps = AriaModalOverlayProps & {
   /**
    * Height of the Modal
    */
-  height?: CSSProperties['height'];
+  height?: Property.Height;
   /**
    * Element where the modal will be rendered, by default it will be into the body
    */
@@ -22,5 +23,5 @@ export type ModalProps = AriaModalOverlayProps & {
   /**
    * Width of the Modal
    */
-  width?: CSSProperties['width'];
+  width?: Property.Width;
 };

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

@@ -4,7 +4,7 @@ import React, { Ref, forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 
 import { styles as buttonStyles } from './button.styles.js';
-import { type ButtonProps } from './button.types.js';
+import { type ButtonProps, ButtonRef } from './button.types.js';
 import { getIconSize } from './button.utils.js';
 
 function BaseButton(
@@ -19,13 +19,14 @@ function BaseButton(
     iconBefore: IconBefore,
     iconAfter: IconAfter,
     iconColor,
+    iconSize,
     children,
     ...props
   }: ButtonProps,
-  ref: Ref<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>,
+  ref: Ref<ButtonRef>,
 ) {
   const { isFocusVisible, focusProps } = useFocusRing();
-  const iconSize = useMemo(() => getIconSize(size), [size]);
+  const btnIconSize = useMemo(() => iconSize || getIconSize(size), [iconSize, size]);
   const styles = buttonStyles({
     size,
     look,
@@ -38,9 +39,9 @@ function BaseButton(
 
   return (
     <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)}>
-      {IconBefore && <IconBefore size={iconSize} className={styles.iconBefore()} color={iconColor} aria-hidden />}
+      {IconBefore && <IconBefore size={btnIconSize} className={styles.iconBefore()} color={iconColor} aria-hidden />}
       <span className={styles.text()}>{children}</span>
-      {IconAfter && <IconAfter size={iconSize} className={styles.iconAfter()} color={iconColor} aria-hidden />}
+      {IconAfter && <IconAfter size={btnIconSize} className={styles.iconAfter()} color={iconColor} aria-hidden />}
     </Tag>
   );
 }

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-[1.5] 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.125rem] 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',
+      '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 active-theme-rams:before:h-0.5 px-2 py-[0.3125rem] border-primary bg-primary 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 relative border text-white inline-flex w-auto outline-none',
     );
   });
 

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

@@ -6,25 +6,25 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'items-center justify-center rounded leading-[1.5] 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',
+      base: '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',
       iconBefore: '',
       iconAfter: '',
       dropdown: 'ml-[0.4em]',
       text: 'overflow-hidden text-ellipsis',
     },
     variants: {
       size: {
-        small: { base: 'typography-body-10 px-2 pb-[0.25rem] pt-0.5 active-theme-rams:before:h-[0.0625rem]' },
-        medium: { base: 'typography-body-9 px-2 py-[0.3125rem] active-theme-rams:before:h-[0.125rem]' },
-        large: { base: 'typography-body-9 px-2.5 py-[0.5rem] active-theme-rams:before:h-0.5' },
-        xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-1.5 active-theme-rams:before:h-[0.25rem]' },
+        small: { base: 'typography-body-10 active-theme-rams:before:h-[0.0625rem] px-2 pb-1 pt-0.5' },
+        medium: { base: 'typography-body-9 active-theme-rams:before:h-0.5 px-2 py-[0.3125rem]' },
+        large: { base: 'typography-body-9 active-theme-rams:before:h-0.5 px-2.5 py-2' },
+        xlarge: { base: 'typography-body-8 active-theme-rams:before:h-1 px-3 pb-2.5 pt-1.5' },
       },
       look: {
         primary: {
-          base: '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',
+          base: 'border-primary bg-primary 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 relative border text-white',
         },
-        hero: { base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50' },
-        faint: { base: 'border border-border bg-light text-muted hover:bg-white active:bg-white' },
+        hero: { base: 'border-hero bg-hero hover:bg-hero-70 active:bg-hero-50 border text-white' },
+        faint: { base: 'border-border bg-light text-muted border hover:bg-white active:bg-white' },
         link: { base: 'text-link underline' },
       },
       soft: {
@@ -50,7 +50,7 @@ export const styles = tv(
         slots: ['base'],
         look: 'primary',
         soft: true,
-        className: 'text-text hover:text-white active-theme-rams:text-primary active-theme-rams:hover:text-white',
+        className: 'text-text active-theme-rams:text-primary active-theme-rams:hover:text-white hover:text-white',
       },
       {
         slots: ['base'],

packages/ui/src/components/button/button.types.ts

@@ -7,6 +7,8 @@ import { styles } from './button.styles.js';
 
 type Variants = VariantProps<typeof styles>;
 
+export type ButtonRef = HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement;
+
 export type ButtonProps = {
   /**
    * Fit button width to its parent width.
@@ -31,6 +33,12 @@ export type ButtonProps = {
    * Defaults to the current text color.
    */
   iconColor?: IconProps['color'];
+  /**
+   * The size of the icon
+   *
+   * Defaults to system size depending on size of the button
+   */
+  iconSize?: IconProps['size'];
   /**
    * When true, children will use flex justify-between
    * @default false