@westpac/ui 0.13.0 → 0.14.0

package/src/components/flexi-cell/flexi-cell.types.ts

@@ -1,4 +1,11 @@
-import { CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+
+import { BadgeProps } from '../index.js';
+
+import { styles } from './flexi-cell.styles.js';
+
+type Variants = VariantProps<typeof styles>;
 
 type BaseFlexiCellProps = {
   /**
@@ -6,45 +13,51 @@ type BaseFlexiCellProps = {
    */
   after?: ReactNode;
   /**
-   * Renders an element on the top right corner
+   * Renders an element on the left
    */
-  badge?: ReactNode;
+  before?: ReactNode;
   /**
-   * zIndex for badge
+   * the middle content of FlexiCell
    */
-  badgeZIndex?: CSSProperties['zIndex'];
+  children?: ReactNode;
   /**
-   * Renders an element on the left
+   * Sets tabIndex to -1 to make untabbable when disabled
    */
-  before?: ReactNode;
+  disabled?: boolean;
   /**
-   * Injects the FlexiCell.Body inside of the children
+   * Wraps body with an 'a' tag for dual action styled component
+   * - Requires href to be provided
+   * - Tag prop should not be used when using this prop
+   * @default false
    */
-  body?: boolean;
+  dualAction?: boolean;
   /**
-   * the middle content of FlexiCell
+   * href in case it is an "a" tag or dualAction
    */
-  children?: ReactNode;
+  href?: string;
   /**
-   * href in case it is an "a" tag
+   * Large adds more padding/spacing to the Flex Cell
+   * @default default
    */
-  href?: string;
+  size?: Variants['size'];
   /**
    * The native tag that flexicell will be rendered
+   * @default div
    */
   tag?: keyof JSX.IntrinsicElements;
+  /**
+   * Renders badge in top right corner based on provided string
+   */
+  topBadge?: (props: BadgeProps) => JSX.Element;
   /**
    * Adds an arrow on top right
    */
   withArrow?: boolean;
   /**
    * Adds a border radius and a border
+   * @default false
    */
   withBorder?: boolean;
-  /**
-   * With hover style
-   */
-  withHoverEffect?: boolean;
 } & HTMLAttributes<HTMLOrSVGElement>;
 
 type FlexiCellAsLinkProps = {
@@ -58,6 +71,17 @@ type FlexiCellAsLinkProps = {
   tag: 'a';
 };
 
+type DualActionFlexiCellProps = {
+  /**
+   * The native tag that the circle will be rendered as
+   */
+  dualAction: true;
+  /**
+   * The href for the link
+   */
+  href: string;
+};
+
 type FlexiCellAsAllOtherTagsProps<Tag> = {
   href?: never;
   tag?: Tag;
@@ -65,4 +89,6 @@ type FlexiCellAsAllOtherTagsProps<Tag> = {
 
 export type FlexiCellProps<
   Tag extends keyof Omit<JSX.IntrinsicElements, 'a'> = keyof Omit<JSX.IntrinsicElements, 'a'>,
-> = (FlexiCellAsLinkProps | FlexiCellAsAllOtherTagsProps<Tag>) & BaseFlexiCellProps & HTMLAttributes<Element>;
+> = (FlexiCellAsLinkProps | DualActionFlexiCellProps | FlexiCellAsAllOtherTagsProps<Tag>) &
+  BaseFlexiCellProps &
+  HTMLAttributes<Element>;

package/src/components/footer/footer.component.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import { useFocusRing } from 'react-aria';
+
+import { Grid, GridItem, VisuallyHidden } from '../index.js';
+import {
+  BOMMultibrandSmallLogo,
+  BSAMultibrandSmallLogo,
+  RAMSMultibrandSmallLogo,
+  STGMultibrandSmallLogo,
+  SymbolProps,
+  WBCMultibrandSmallLogo,
+  WBGMultibrandSmallLogo,
+} from '../symbol/index.js';
+
+import { styles as footerStyles } from './footer.styles.js';
+import { type FooterProps } from './footer.types.js';
+
+export function Footer({
+  brand,
+  logoLink = '#',
+  logoAssistiveText,
+  hideLogo = false,
+  offsetSidebar = false,
+  srOnlyText,
+  className,
+  children,
+  ...props
+}: FooterProps) {
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = footerStyles({ offsetSidebar, isFocusVisible });
+  const logoMap = {
+    wbc: {
+      logo: (props: SymbolProps) => <WBCMultibrandSmallLogo {...props} />,
+    },
+    stg: {
+      logo: (props: SymbolProps) => <STGMultibrandSmallLogo {...props} />,
+    },
+    bom: {
+      logo: (props: SymbolProps) => <BOMMultibrandSmallLogo {...props} />,
+    },
+    bsa: {
+      logo: (props: SymbolProps) => <BSAMultibrandSmallLogo {...props} />,
+    },
+    wbg: {
+      logo: (props: SymbolProps) => <WBGMultibrandSmallLogo {...props} />,
+    },
+    rams: {
+      logo: (props: SymbolProps) => <RAMSMultibrandSmallLogo {...props} />,
+    },
+  };
+  const Logo = logoMap[brand].logo;
+  return (
+    <footer className={styles.base({ className })} {...props}>
+      <div className={styles.wrapper()}>
+        <Grid className={styles.topRow()}>
+          <GridItem span={12}>{children}</GridItem>
+        </Grid>
+        <Grid>
+          <GridItem span={{ initial: 12, md: 1 }}>
+            {!hideLogo && (
+              <a href={logoLink} className={styles.link()} {...focusProps}>
+                {srOnlyText && <VisuallyHidden>{srOnlyText}</VisuallyHidden>}
+                <Logo align="right" aria-label={logoAssistiveText} />
+              </a>
+            )}
+          </GridItem>
+        </Grid>
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'relative overflow-hidden border-t-[1px] border-t-primary',
+      wrapper: 'pt-3 max-md:px-2 max-md:pb-3 md:px-4 md:pb-4',
+      topRow: 'max-md:mb-7 md:mb-4',
+      link: 'float-right block',
+    },
+    variants: {
+      offsetSidebar: {
+        true: {
+          base: 'lg:mr-[300px]',
+        },
+        false: {},
+      },
+      isFocusVisible: {
+        true: { link: 'focus-outline' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/footer/footer.types.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+
+import { BrandKey } from '../../tailwind/index.js';
+
+export type FooterProps = {
+  /**
+   * Icon for brand
+   */
+  brand: Exclude<BrandKey, 'btfg'>;
+  /**
+   * Hide logo
+   */
+  hideLogo?: boolean;
+  /**
+   * Aria-label for the logo
+   */
+  logoAssistiveText?: string;
+  /**
+   * href for logo link
+   */
+  logoLink?: string;
+  /**
+   * Right offset for use with GEL sidebar component
+   */
+  offsetSidebar?: boolean;
+  /**
+   * Visually hidden text for logo link
+   */
+  srOnlyText?: string;
+} & HTMLAttributes<Element>;

package/src/components/form/components/form-group/form-group.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'last:mb-0',
+    base: '',
     variants: {
       inline: {
         true: 'sm:inline-block sm:align-middle',

package/src/components/form/components/form-hint/form-hint.component.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { type FormHintProps, FormHint as GelFormHint } from '../../../index.js';
+import { Hint as GelFormHint, type HintProps } from '../../../index.js';
 import { useFormContext } from '../../form.component.js';
 
-export function FormHint({ ...props }: FormHintProps) {
+export function FormHint({ ...props }: HintProps) {
   const { spacing } = useFormContext();
 
   return <GelFormHint spacing={spacing} {...props} />;

package/src/components/form/components/form-label/form-label.component.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { type FormLabelProps } from '../../../../index.js';
-import { FormLabel as GELFormLabel } from '../../../index.js';
+import { type LabelProps } from '../../../../index.js';
+import { Label as GELFormLabel } from '../../../index.js';
 import { useFormContext } from '../../form.component.js';
 
-export function FormLabel({ spacing, children, ...props }: FormLabelProps) {
+export function FormLabel({ spacing, children, ...props }: LabelProps) {
   const context = useFormContext();
   const finalSpacing = spacing || context?.spacing || 'medium';
 

package/src/components/form/form.component.tsx

@@ -2,9 +2,6 @@
 
 import React, { createContext, useContext } from 'react';
 
-import { ErrorMessage } from '../error-message/index.js';
-
-import { FormChitChat, FormGroup, FormHint, FormLabel, FormSection } from './components/index.js';
 import { FormContextValue, type FormProps } from './form.types.js';
 
 // ==============================
@@ -21,10 +18,3 @@ export function Form({ children, spacing = 'medium', inline = false, ...props }:
     </FormContext.Provider>
   );
 }
-
-Form.Label = FormLabel;
-Form.ErrorMessage = ErrorMessage;
-Form.Hint = FormHint;
-Form.Section = FormSection;
-Form.ChitChat = FormChitChat;
-Form.Group = FormGroup;

package/src/components/form/index.ts

@@ -1,2 +1,3 @@
 export { Form } from './form.component.js';
 export { type FormProps } from './form.types.js';
+export { FormLabel, FormHint, FormSection, FormChitChat, FormGroup } from './components/index.js';

package/src/components/grid/components/grid-container/grid-container.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './grid-container.styles.js';
+import { type GridContainerProps } from './grid-container.types.js';
+
+export function GridContainer({ className, tag: Tag = 'div', fixed, children, ...props }: GridContainerProps) {
+  return (
+    <Tag className={styles({ fixed, className })} {...props}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/grid/components/grid-container/grid-container.types.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+
+export type GridContainerProps = {
+  /**
+   * Enable fixed width container mode. In this mode the container width is fixed at each breakpoint.
+   */
+  fixed?: boolean;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<Element>;

package/src/components/grid/components/grid-item/grid-item.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styles } from './grid-item.styles.js';
+import { type GridItemProps } from './grid-item.types.js';
+
+export function GridItem({ className, tag: Tag = 'div', span, rowSpan, start, children, ...props }: GridItemProps) {
+  return (
+    <Tag className={styles({ span, rowSpan, start, className })} {...props}>
+      {children}
+    </Tag>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: '',
+    variants: {
+      rowSpan: {
+        1: 'row-span-1',
+        2: 'row-span-2',
+        3: 'row-span-3',
+        4: 'row-span-4',
+        5: 'row-span-5',
+        6: 'row-span-6',
+      },
+      span: {
+        1: 'col-span-1',
+        2: 'col-span-2',
+        3: 'col-span-3',
+        4: 'col-span-4',
+        5: 'col-span-5',
+        6: 'col-span-6',
+        7: 'col-span-7',
+        8: 'col-span-8',
+        9: 'col-span-9',
+        10: 'col-span-10',
+        11: 'col-span-11',
+        12: 'col-span-12',
+      },
+      start: {
+        1: 'col-start-1',
+        2: 'col-start-2',
+        3: 'col-start-3',
+        4: 'col-start-4',
+        5: 'col-start-5',
+        6: 'col-start-6',
+        7: 'col-start-7',
+        8: 'col-start-8',
+        9: 'col-start-9',
+        10: 'col-start-10',
+        11: 'col-start-11',
+        12: 'col-start-12',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/grid/components/grid-item/grid-item.types.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './grid-item.styles.js';
+
+type Variants = VariantProps<typeof styles>;
+
+export type GridItemProps = {
+  /**
+   * Controls height of item based on amount of grid spaces to cover
+   */
+  rowSpan?: Variants['rowSpan'];
+  /**
+   * Controls width of item based on amount of grid spaces to cover
+   */
+  span?: Variants['span'];
+  /**
+   * Position item should start in grid
+   */
+  start?: Variants['start'];
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<Element>;

package/src/components/grid/components/index.ts

@@ -1,2 +1,2 @@
-export { Container } from './container/container.component.js';
-export { Item } from './item/item.component.js';
+export { GridContainer } from './grid-container/grid-container.component.js';
+export { GridItem } from './grid-item/grid-item.component.js';

package/src/components/grid/index.ts

@@ -1,3 +1,4 @@
 export { Grid } from './grid.component.js';
-export { Container, Item } from './components/index.js';
+export { GridContainer, GridItem } from './components/index.js';
 export { type GridProps } from './grid.types.js';
+export { type GridContainerProps } from './components/grid-container/grid-container.types.js';

package/src/components/header/header.component.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import throttle from 'lodash.throttle';
+import React, { useEffect, useState } from 'react';
+
+import { ArrowLeftIcon, HamburgerMenuIcon } from '../icon/index.js';
+import { Button, SkipLink } from '../index.js';
+import {
+  BOMMultibrandLargeLogo,
+  BOMMultibrandSmallLogo,
+  BSAMultibrandLargeLogo,
+  BSAMultibrandSmallLogo,
+  RAMSMultibrandLargeLogo,
+  RAMSMultibrandSmallLogo,
+  STGMultibrandLargeLogo,
+  STGMultibrandSmallLogo,
+  SymbolProps,
+  WBCMultibrandLargeLogo,
+  WBCMultibrandSmallLogo,
+  WBGMultibrandLargeLogo,
+  WBGMultibrandSmallLogo,
+} from '../symbol/index.js';
+
+import { styles as headerStyles } from './header.styles.js';
+import { type HeaderProps } from './header.types.js';
+
+const logoMap = {
+  wbc: {
+    logo: (props: SymbolProps) => <WBCMultibrandSmallLogo {...props} />,
+    largeLogo: (props: SymbolProps) => <WBCMultibrandLargeLogo {...props} />,
+  },
+  stg: {
+    logo: (props: SymbolProps) => <STGMultibrandSmallLogo {...props} />,
+    largeLogo: (props: SymbolProps) => <STGMultibrandLargeLogo {...props} />,
+  },
+  bom: {
+    logo: (props: SymbolProps) => <BOMMultibrandSmallLogo {...props} />,
+    largeLogo: (props: SymbolProps) => <BOMMultibrandLargeLogo {...props} />,
+  },
+  bsa: {
+    logo: (props: SymbolProps) => <BSAMultibrandSmallLogo {...props} />,
+    largeLogo: (props: SymbolProps) => <BSAMultibrandLargeLogo {...props} />,
+  },
+  wbg: {
+    logo: (props: SymbolProps) => <WBGMultibrandSmallLogo {...props} />,
+    largeLogo: (props: SymbolProps) => <WBGMultibrandLargeLogo {...props} />,
+  },
+  rams: {
+    logo: (props: SymbolProps) => <RAMSMultibrandSmallLogo {...props} />,
+    largeLogo: (props: SymbolProps) => <RAMSMultibrandLargeLogo {...props} />,
+  },
+};
+
+export function Header({
+  brand,
+  className,
+  children,
+  fixed = false,
+  leftIcon,
+  leftOnClick,
+  leftAssistiveText,
+  logoAssistiveText,
+  logoLink = '#',
+  logoCenter = false,
+  logoOnClick,
+  skipLinkContent = 'Skip to main content',
+  skipToContentId,
+  ...props
+}: HeaderProps) {
+  const [scrolled, setScrolled] = useState(false);
+
+  const handleScroll = throttle(() => {
+    let hasScrolled = false;
+    if (window.scrollY > 5) {
+      hasScrolled = true;
+    }
+    setScrolled(hasScrolled);
+  }, 10);
+
+  useEffect(() => {
+    if (fixed) window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const logoAlignment = logoCenter ? 'center' : 'left';
+
+  const SmallLogo = logoMap[brand].logo;
+  const LargeLogo = logoMap[brand].largeLogo;
+
+  const ButtonIcon = leftIcon === 'arrow' ? ArrowLeftIcon : HamburgerMenuIcon;
+
+  const styles = headerStyles({ logoCenter, fixed, leftIcon, scrolled });
+
+  return (
+    <header className={styles.base({ className })} {...props}>
+      <div className={styles.inner()}>
+        {skipToContentId && <SkipLink href={skipToContentId}>{skipLinkContent}</SkipLink>}
+        {leftIcon && (
+          <div className={styles.leftContent()}>
+            <Button
+              look="link"
+              iconAfter={ButtonIcon}
+              size="large"
+              onClick={leftOnClick}
+              aria-label={leftAssistiveText}
+              className={styles.leftButton()}
+              iconColor="text"
+            />
+          </div>
+        )}
+        {/* useFocusRing was causing this link to need two clicks to activate so focus-visible styling is used instead */}
+        <a href={logoLink} className={styles.logoLink()} onClick={logoOnClick}>
+          <SmallLogo align={logoAlignment} aria-label={logoAssistiveText} className={styles.smallLogo()} />
+          <LargeLogo aria-label={logoAssistiveText} className={styles.largeLogo()} />
+        </a>
+        {children && <div className={styles.rightContent()}>{children}</div>}
+      </div>
+    </header>
+  );
+}

package/src/components/header/header.styles.ts

@@ -0,0 +1,57 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'flex-none bg-white',
+      inner:
+        'mx-auto flex w-full flex-1 border border-x-0 border-t-0 border-b-[#E8E8ED] bg-white text-left transition-[border-bottom-width] duration-200 will-change-[border-bottom-width] 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] max-sm:h-9 max-sm:px-2 sm:h-11 sm:px-4',
+      logoLink: 'inline-flex items-center focus-visible:focus-outline',
+      smallLogo: 'sm:hidden',
+      largeLogo: 'max-sm:hidden',
+      leftContent: 'flex items-center',
+      leftButton:
+        'my-1 border-r-[1px] 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]',
+      rightContent: 'ml-auto flex items-center',
+    },
+    variants: {
+      logoCenter: {
+        true: {
+          logoLink:
+            'max-sm:absolute max-sm:left-1/2 max-sm:z-0 max-sm:translate-x-[-50%] max-sm:translate-y-[15%] sm:relative',
+          smallLogo: '',
+        },
+        false: {
+          logoLink: 'relative',
+        },
+      },
+      fixed: {
+        true: {
+          base: '',
+          inner: 'fixed inset-x-0 top-0 z-10',
+        },
+      },
+      leftIcon: {
+        arrow: {
+          leftButton: '',
+        },
+        hamburger: {
+          leftButton: 'sm:hidden',
+        },
+      },
+      scrolled: {
+        true: {
+          inner: '',
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        fixed: true,
+        scrolled: true,
+        className: { inner: 'border-b-0 after:opacity-100' },
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/header/header.types.ts

@@ -0,0 +1,50 @@
+import { HTMLAttributes } from 'react';
+
+import { BrandKey } from '../../tailwind/index.js';
+
+export type HeaderProps = {
+  /**
+   * Icon for brand
+   */
+  brand: Exclude<BrandKey, 'btfg'>;
+  /**
+   * Enable fixed header
+   */
+  fixed?: boolean;
+  /**
+   * Visually hidden text for left button
+   */
+  leftAssistiveText?: string;
+  /**
+   * Icon type for left button either 'arrow' or 'hamburger'
+   */
+  leftIcon?: 'arrow' | 'hamburger';
+  /**
+   * On click handler for left button
+   */
+  leftOnClick?: () => void;
+  /**
+   * Aria-label for the logo
+   */
+  logoAssistiveText?: string;
+  /**
+   * Center logo at xs breakpoint
+   */
+  logoCenter?: boolean;
+  /**
+   * Link for logo
+   */
+  logoLink?: string;
+  /**
+   * On click handler for logo
+   */
+  logoOnClick?: () => void;
+  /**
+   * Text content for skip link
+   */
+  skipLinkContent?: string;
+  /**
+   * The id to the pages main content
+   */
+  skipToContentId?: string;
+} & HTMLAttributes<Element>;