@westpac/ui 0.2.0 → 0.3.0

package/dist/tailwind/themes/wbc.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#1F1C4F';
+const PRIMARY = '#DA1710';
 export const theme = {
     code: 'WBC',
-    colors: generateColorTints({
-        background: '#F3F4F6',
-        border: '#DEDEE1',
-        borderDark: '#9390A2',
-        focus: '#B978D9',
-        heading: '#1F1C4F',
-        hero: '#1F1C4F',
-        light: '#F9F9FB',
-        link: '#DA1710',
-        muted: '#595767',
-        neutral: '#2A2E42',
-        pop: '#FF3DDB',
-        primary: '#DA1710',
-        text: '#181B25'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F3F4F6',
+            border: '#DEDEE1',
+            borderDark: '#9390A2',
+            focus: '#B978D9',
+            heading: '#1F1C4F',
+            hero: HERO,
+            light: '#F9F9FB',
+            link: '#DA1710',
+            muted: '#595767',
+            neutral: '#2A2E42',
+            pop: '#FF3DDB',
+            primary: PRIMARY,
+            text: '#181B25'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: PRIMARY,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Westpac',
     name: 'Westpac'
 };

package/dist/tailwind/themes/wbg.js

@@ -1,21 +1,32 @@
 import { generateColorTints } from '../utils/generate-color-tints.js';
+const HERO = '#000';
+const BORDER_DARK = '#91979A';
 export const theme = {
     code: 'WBG',
-    colors: generateColorTints({
-        background: '#F3F5F6',
-        border: '#D3D3D3',
-        borderDark: '#91979A',
-        focus: '#6892E8',
-        heading: '#000',
-        hero: '#000',
-        light: '#FAFAFA',
-        link: '#DA1710',
-        muted: '#686362',
-        neutral: '#403A38',
-        pop: '#FF7468',
-        primary: '#DA1710',
-        text: '#000'
-    }),
+    colors: {
+        ...generateColorTints({
+            background: '#F3F5F6',
+            border: '#D3D3D3',
+            borderDark: BORDER_DARK,
+            focus: '#6892E8',
+            heading: '#000',
+            hero: HERO,
+            light: '#FAFAFA',
+            link: '#DA1710',
+            muted: '#686362',
+            neutral: '#403A38',
+            pop: '#FF7468',
+            primary: '#DA1710',
+            text: '#000'
+        }),
+        pictogram: {
+            dark: HERO,
+            duo: {
+                highlight: BORDER_DARK,
+                outline: HERO
+            }
+        }
+    },
     brandFont: 'Montserrat',
     name: 'Westpac Group'
 };

package/dist/tailwind/types/brand.types.d.ts

@@ -2,11 +2,19 @@ export type BrandKey = 'bom' | 'bsa' | 'btfg' | 'rams' | 'stg' | 'wbc' | 'wbg';
 type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'DEFAULT';
 type ColorValue = Record<'DEFAULT' | ColorShade, string>;
 type ColorsKey = 'background' | 'border' | 'borderDark' | 'focus' | 'heading' | 'hero' | 'light' | 'link' | 'muted' | 'neutral' | 'pop' | 'primary' | 'text' | 'white' | 'black';
+type PictogramColorMap = {
+    dark: string;
+    duo: {
+        highlight: string;
+        outline: string;
+    };
+};
+type PictogramConfig = Record<'pictogram', PictogramColorMap>;
 type ColorConfig = Record<ColorsKey, ColorValue>;
 export type BrandConfig = {
     brandFont: string;
     code: string;
-    colors: ColorConfig;
+    colors: ColorConfig & PictogramConfig;
     name: string;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -19,6 +19,15 @@
     "./css": {
       "default": "./dist/css/westpac-ui.min.css"
     },
+    "./icon": {
+      "default": "./dist/components/icon/index.js"
+    },
+    "./pictogram": {
+      "default": "./dist/components/pictogram/index.js"
+    },
+    "./symbol": {
+      "default": "./dist/components/symbol/index.js"
+    },
     "./tailwind": {
       "default": "./dist/tailwind/index.js"
     }
@@ -89,6 +98,12 @@
     "@westpac/test-config": "~0.0.0",
     "@westpac/ts-config": "~0.0.0"
   },
+  "peerDependencies": {
+    "colorjs.io": "~0.4.5",
+    "tailwind-variants": "~0.1.13",
+    "tailwindcss": "~3.3.2",
+    "tailwindcss-themer": "~3.1.0"
+  },
   "scripts": {
     "dev": "pnpm build:watch",
     "clean": "shx rm -rf dist",

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

@@ -3,7 +3,7 @@ import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useRef } from 'react';
 import { mergeProps, useHover, useLocale } from 'react-aria';
 
-import { ArrowLeftIcon, ArrowRightIcon } from '../../../index.js';
+import { ArrowLeftIcon, ArrowRightIcon } from '../../../icon/index.js';
 
 import { styles as accordionItemStyles } from './accordion-item.styles.js';
 import { type AccordionItemProps } from './accordion-item.types.js';
@@ -28,9 +28,9 @@ export function AccordionItem<T = any>({
 
   return (
     <Tag className={styles.base()}>
-      {/* 
+      {/*
         Using h3 tag since the official page is using it, also the react-spectrum
-        https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ 
+        https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
       */}
       <h3>
         <button {...mergeProps(buttonProps, hoverProps)} ref={ref} className={styles.itemHeader()}>

package/src/components/alert/alert.component.tsx

@@ -1,7 +1,7 @@
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { AlertIcon, CloseIcon, InfoIcon, LimitIcon, SuccessIcon, WarningIcon } from '../index.js';
+import { AlertIcon, CloseIcon, InfoIcon, LimitIcon, SuccessIcon, WarningIcon } from '../icon/index.js';
 
 import { styles as alertStyles } from './alert.styles.js';
 import { type AlertProps, type Look } from './alert.types.js';

package/src/components/alert/alert.stories.tsx

@@ -1,6 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
-import { TelephoneIcon } from '../index.js';
+import { TelephoneIcon } from '../icon/index.js';
 
 import { Alert } from './alert.component.js';
 

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef } from 'react';
 import { useBreadcrumbItem } from 'react-aria';
 
-import { ArrowRightIcon } from '../../../index.js';
+import { ArrowRightIcon } from '../../../icon/index.js';
 
 import { styles } from './breadcrumb-item.styles.js';
 import { type BreadcrumbItemProps } from './breadcrumb-item.types.js';

package/src/components/button/button.stories.tsx

@@ -1,6 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
-import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../index.js';
+import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
 
 import { Button } from './button.component.js';
 

package/src/components/button/button.types.ts

@@ -1,7 +1,7 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 
-import { IconProps } from '../index.js';
+import { IconProps } from '../icon/index.js';
 
 import { styles } from './button.styles.js';
 

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

@@ -7,14 +7,14 @@ export const styles = tv(
       checkIcon: 'overflow-visible',
       textWrapper: 'flex flex-col justify-center',
       labelText: 'typography-body-10 py-[2px] pl-1',
-      hintText: 'typography-body-10 text-muted pl-1',
+      hintText: 'typography-body-10 pl-1 text-muted',
       checkbox: 'flex h-4 w-4 items-center justify-center rounded border border-hero',
     },
     variants: {
       isDisabled: {
         true: {
           labelText: 'text-muted',
-          checkbox: 'bg-border-20 border-border',
+          checkbox: 'border-border bg-border-20',
         },
         false: {
           base: 'hover:cursor-pointer',

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

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

package/src/components/grid/components/container/container.styles.ts

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'mx-auto box-border w-full max-w-container px-2 xsl:px-5 sm:px-6 md:px-8 lg:px-10',
+    variants: {
+      fixed: {
+        true: 'sm:max-w-xsl md:max-w-md lg:max-w-lg',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './container.styles.js';
+
+export type ContainerProps = {
+  /**
+   * 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;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: '',
+    variants: {
+      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/item/item.types.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './item.styles.js';
+
+export type ItemProps = {
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

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

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

package/src/components/grid/grid.stories.tsx

@@ -0,0 +1,70 @@
+import { type Meta, StoryFn } from '@storybook/react';
+
+import { Container, Item } from './components/index.js';
+import { Grid } from './grid.component.js';
+
+const meta: Meta<typeof Grid> = {
+  title: 'Example/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="mt-10">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+export const GridStory = () => {
+  const items = Array(12).fill(null);
+
+  return (
+    <Grid>
+      {items.map((_, i) => (
+        <Item key={i} className="border border-border bg-light p-2 text-center">
+          {i + 1}
+        </Item>
+      ))}
+    </Grid>
+  );
+};
+
+export const ContainerStory = () => {
+  const items = Array(12).fill(null);
+
+  return (
+    <Container>
+      <Grid>
+        {items.map((_, i) => (
+          <Item key={i} className="border border-border bg-light p-2 text-center">
+            {i + 1}
+          </Item>
+        ))}
+      </Grid>
+    </Container>
+  );
+};
+
+export const ItemStory = () => {
+  return (
+    <Container>
+      <Grid>
+        <Item span={{ initial: 6, lg: 2 }} className="border border-border bg-light p-2 text-center">
+          span - (xs:6, lg:3)
+        </Item>
+        <Item span={{ initial: 6, lg: 10 }} className="border border-border bg-light p-2 text-center">
+          span - (xs:6, lg:10)
+        </Item>
+        <Item start={5} span={4} className="border border-border bg-light p-2 text-center">
+          start:5 span:4
+        </Item>
+      </Grid>
+    </Container>
+  );
+};

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

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'grid h-auto grid-flow-row auto-rows-[minmax(32px,auto)] grid-cols-[repeat(12,_1fr)] gap-2 xsl:gap-4',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './grid.styles.js';
+
+export type GridProps = {
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/grid/index.ts

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

package/src/components/index.ts

@@ -2,7 +2,6 @@ export * from './skip-link/index.js';
 export * from './visually-hidden/index.js';
 export * from './button/index.js';
 export * from './well/index.js';
-export * from './icon/index.js';
 export * from './alert/index.js';
 export * from './textarea/index.js';
 export * from './input/index.js';
@@ -14,3 +13,8 @@ export * from './tabs/index.js';
 export * from './checkbox-group/index.js';
 export * from './accordion/index.js';
 export * from './button-group/index.js';
+export * from './switch/index.js';
+export * from './progress-bar/index.js';
+export * from './link/index.js';
+export * from './grid/index.js';
+export * from './table/index.js';

package/src/components/link/index.ts

@@ -0,0 +1,2 @@
+export { Link } from './link.component.js';
+export { type LinkProps } from './link.types.js';

package/src/components/link/link.component.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef, useRef } from 'react';
+import { useLink } from 'react-aria';
+
+import { ArrowRightIcon } from '../icon/index.js';
+
+import { styles as linkStyles } from './link.styles.js';
+import { type LinkProps } from './link.types.js';
+
+export function BaseLink(
+  {
+    className,
+    children,
+    href,
+    iconBefore: IconBefore,
+    iconAfter: IconAfter,
+    iconSize = 'small',
+    target,
+    type = 'standalone',
+    underline = true,
+    ...props
+  }: LinkProps,
+  propRef: any,
+) {
+  const ref = useRef(propRef);
+  const { linkProps } = useLink({ ...props }, ref);
+  const styles = linkStyles({ type, underline });
+
+  if (type === 'standalone' && !IconBefore && !IconAfter) {
+    IconBefore = ArrowRightIcon;
+  }
+
+  return (
+    <a {...linkProps} ref={propRef} href={href} target={target} className={styles.base({ className })}>
+      {IconBefore && <IconBefore size={iconSize} color="link" className={styles.iconBefore()} />}
+      <span className={styles.text()}>{children}</span>
+      {IconAfter && <IconAfter size={iconSize} color="link" className={styles.iconAfter()} />}
+    </a>
+  );
+}
+
+export const Link = forwardRef(BaseLink);

package/src/components/link/link.stories.tsx

@@ -0,0 +1,122 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { ArrowRightIcon, PdfFileIcon } from '../icon/index.js';
+
+import { Link } from './link.component.js';
+
+const meta: Meta<typeof Link> = {
+  title: 'Example/Link',
+  component: Link,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-1">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: "Look, I'm a default link",
+    href: '#',
+  },
+};
+
+const SIZES = ['xsmall', 'small', 'medium', 'large', 'xlarge'];
+
+/**
+ * > Standalone link with iconSizes, arrowRight is default but can be overridden.
+ * > If no icon is passed it defaults to ArrowRightIcon in the iconBefore position
+ */
+export const StandaloneLink = () => (
+  <div className="space-y-1 pl-1">
+    <h1 className="font-bold">Default</h1>
+    <Link href="#">Look I'm a standalone link</Link>
+    <h1 className="font-bold">Icon Before override</h1>
+    <Link href="#" iconBefore={PdfFileIcon}>
+      Look I'm a standalone link
+    </Link>
+    <h1 className="font-bold">Icon Before override</h1>
+    <Link href="#" iconAfter={ArrowRightIcon}>
+      Look I'm a standalone link
+    </Link>
+  </div>
+);
+
+/**
+ * > Inline link example
+ */
+export const InlineLink = () => (
+  <div className="space-y-1 p-1">
+    <p className="typography-body-10">
+      Lorem ipsum dolor{' '}
+      <Link href="#" type="inline">
+        look, I'm an inline link
+      </Link>{' '}
+      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+    </p>
+    <p className="typography-body-10">
+      Lorem ipsum dolor{' '}
+      <Link href="#" type="inline" underline={false}>
+        look, I'm an inline link with no underline
+      </Link>{' '}
+      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+    </p>
+    <p className="typography-body-10">
+      Lorem ipsum dolor{' '}
+      <Link href="#" type="inline" iconBefore={PdfFileIcon}>
+        look, I'm an inline link
+      </Link>{' '}
+      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+    </p>
+    <p className="typography-body-10">
+      Lorem ipsum dolor{' '}
+      <Link href="#" type="inline" iconAfter={PdfFileIcon}>
+        look, I'm an inline link
+      </Link>{' '}
+      sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+      doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+    </p>
+    <Link href="#" type="inline" iconBefore={PdfFileIcon}>
+      look, I'm an inline link
+    </Link>
+  </div>
+);
+
+/**
+ * > example of icon sizes
+ */
+export const IconSizes = () => (
+  <div className="space-y-1 pl-1">
+    {SIZES.map((size: any) => (
+      <div key={size}>
+        <h1 className="font-bold">{size}</h1>
+        <Link href="#" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>
+          Look I'm a standalone link
+        </Link>
+        <p className="typography-body-10">
+          Lorem ipsum dolor{' '}
+          <Link href="#" type="inline" iconSize={size} iconBefore={PdfFileIcon} iconAfter={PdfFileIcon}>
+            look, I'm an inline link
+          </Link>{' '}
+          sit amet consectetur, adipisicing elit. Libero facilis odit voluptate reprehenderit laborum numquam ex optio
+          doloribus magni repudiandae vero fugiat iusto tempora debitis sunt laboriosam nobis, ut voluptatum?
+        </p>
+      </div>
+    ))}
+  </div>
+);