@westpac/ui 0.1.0 → 0.2.0

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

@@ -1,5 +1,7 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
+import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../index.js';
+
 import { Button } from './button.component.js';
 
 const meta: Meta<typeof Button> = {
@@ -21,6 +23,10 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const LOOKS = ['primary', 'hero', 'faint', 'link'];
+const SOFT_LOOKS = ['primary', 'hero', 'faint'];
+const SIZES = ['small', 'medium', 'large', 'xlarge'];
+
 /**
  * > Default usage example
  */
@@ -31,15 +37,240 @@ export const DefaultStory: Story = {
 };
 
 /**
- * > Responsive size
+ * > Button looks
+ */
+export const ButtonColors = () => (
+  <div className="flex flex-col gap-2">
+    <h3 className="font-bold">Default</h3>
+    <div className="flex gap-2">
+      {LOOKS.map((look: any) => (
+        <Button look={look}>{look}</Button>
+      ))}
+    </div>
+    <h3 className="font-bold">Soft</h3>
+    <div className="flex gap-2">
+      {SOFT_LOOKS.map((look: any) => (
+        <Button look={look} soft>
+          {look}
+        </Button>
+      ))}
+    </div>
+  </div>
+);
+
+/**
+ * > Button sizes
+ */
+export const ButtonSizes = () => (
+  <div className="flex flex-col gap-2">
+    {SIZES.map((size: any) => (
+      <>
+        <h3 className="font-bold">{size}</h3>
+        <div className="flex gap-2">
+          {LOOKS.map((look: any) => (
+            <Button look={look} size={size}>
+              {look}
+            </Button>
+          ))}
+        </div>
+        <div className="flex gap-2">
+          {SOFT_LOOKS.map((look: any) => (
+            <Button look={look} size={size} soft>
+              {look}
+            </Button>
+          ))}
+        </div>
+      </>
+    ))}
+  </div>
+);
+
+/**
+ * > Block buttons
+ */
+export const BlockButtons = () => (
+  <div className="flex flex-col gap-2">
+    {SIZES.map((size: any) => (
+      <>
+        <h3 className="font-bold">{size}</h3>
+        <div className="flex flex-col gap-2">
+          {SOFT_LOOKS.map((look: any) => (
+            <Button look={look} size={size} block>
+              {look}
+            </Button>
+          ))}
+        </div>
+      </>
+    ))}
+  </div>
+);
+
+/**
+ * > Buttons with icons
+ */
+export const ButtonIcons = () => (
+  <div>
+    <div className="mb-4 flex flex-col gap-2">
+      <h2 className="typography-body-7 font-bold">Icon Before</h2>
+      <h3 className="font-bold">Colors</h3>
+      <div className="flex gap-2">
+        {LOOKS.map((look: any) => (
+          <Button look={look} iconBefore={BurgerIcon}>
+            {look}
+          </Button>
+        ))}
+      </div>
+      <div className="flex gap-2">
+        {SOFT_LOOKS.map((look: any) => (
+          <Button look={look} soft iconBefore={BurgerIcon}>
+            {look}
+          </Button>
+        ))}
+      </div>
+      <h3 className="font-bold">Sizes</h3>
+      <div>
+        {SIZES.map((size: any) => (
+          <Button size={size} iconBefore={BurgerIcon} className="mr-2">
+            Button
+          </Button>
+        ))}
+      </div>
+      <div>
+        {SIZES.map((size: any) => (
+          <Button size={size} iconBefore={BurgerIcon} soft className="mr-2">
+            Button
+          </Button>
+        ))}
+      </div>
+      <h3 className="font-bold">Block</h3>
+      <div className="flex flex-col gap-2">
+        <Button block iconBefore={ArrowLeftIcon}>
+          Button
+        </Button>
+        <Button block justify iconBefore={ArrowLeftIcon}>
+          Button
+        </Button>
+      </div>
+    </div>
+
+    <div className="mb-4 flex flex-col gap-2">
+      <h2 className="typography-body-7 font-bold">Icon After</h2>
+      <h3 className="font-bold">Colors</h3>
+      <div className="flex gap-2">
+        {LOOKS.map((look: any) => (
+          <Button look={look} iconAfter={BurgerIcon}>
+            {look}
+          </Button>
+        ))}
+      </div>
+      <div className="flex gap-2">
+        {SOFT_LOOKS.map((look: any) => (
+          <Button look={look} soft iconAfter={BurgerIcon}>
+            {look}
+          </Button>
+        ))}
+      </div>
+      <h3 className="font-bold">Sizes</h3>
+      <div>
+        {SIZES.map((size: any) => (
+          <Button size={size} iconAfter={BurgerIcon} className="mr-2">
+            Button
+          </Button>
+        ))}
+      </div>
+      <div>
+        {SIZES.map((size: any) => (
+          <Button size={size} iconAfter={BurgerIcon} soft className="mr-2">
+            Button
+          </Button>
+        ))}
+      </div>
+      <h3 className="font-bold">Block</h3>
+      <div className="flex flex-col gap-2">
+        <Button block iconAfter={ArrowRightIcon}>
+          Button
+        </Button>
+        <Button block justify iconAfter={ArrowRightIcon}>
+          Button
+        </Button>
+      </div>
+    </div>
+    <div className="mb-4 flex flex-col gap-2">
+      <h2 className="typography-body-7 font-bold">Icon Only</h2>
+      <h3 className="font-bold">Colors</h3>
+      <div className="flex gap-2">
+        {LOOKS.map((look: any) => (
+          <Button look={look} iconAfter={BurgerIcon} />
+        ))}
+      </div>
+      <div className="flex gap-2">
+        {SOFT_LOOKS.map((look: any) => (
+          <Button look={look} soft iconAfter={BurgerIcon} />
+        ))}
+      </div>
+      <h3 className="font-bold">Sizes</h3>
+      <div>
+        {SIZES.map((size: any) => (
+          <Button size={size} iconAfter={BurgerIcon} className="mr-2" />
+        ))}
+      </div>
+      <div>
+        {SIZES.map((size: any) => (
+          <Button size={size} iconAfter={BurgerIcon} soft className="mr-2" />
+        ))}
+      </div>
+      <h3 className="font-bold">Block</h3>
+      <div className="flex flex-col gap-2">
+        <Button block iconAfter={BurgerIcon} />
+      </div>
+    </div>
+  </div>
+);
+
+/**
+ * > Responsive styles
+ */
+export const ResponsiveSize = () => (
+  <div>
+    <Button
+      size={{
+        initial: 'small',
+        md: 'large',
+        lg: 'xlarge',
+      }}
+    >
+      Responsive Button
+    </Button>{' '}
+    <Button
+      iconAfter={BurgerIcon}
+      size={{
+        initial: 'small',
+        md: 'large',
+        lg: 'xlarge',
+      }}
+    >
+      Responsive Button with icon
+    </Button>{' '}
+  </div>
+);
+
+/**
+ * > As anchor tag
+ */
+export const AsLinkStory: Story = {
+  args: {
+    children: 'Link button',
+    tag: 'a',
+    href: '#',
+  },
+};
+
+/**
+ * > Disabled look
  */
-export const ResponsiveSizeStory: Story = {
+export const DisabledStory: Story = {
   args: {
-    children: 'Button text',
-    size: {
-      initial: 'small',
-      md: 'large',
-      lg: 'xlarge',
-    },
+    children: 'Disabled button',
+    disabled: true,
   },
 };

package/src/components/button/button.styles.ts

@@ -1,26 +1,72 @@
 import { tv } from 'tailwind-variants';
 
+/**
+ * Current GEL design not using design tokens in some cases. Because of that, we need specify numeric values such as pb-[0.25rem] for spacing
+ */
 export const styles = tv(
   {
-    base: 'inline-flex items-center gap-2 rounded transition-colors disabled:pointer-events-none disabled:opacity-50',
+    slots: {
+      base: 'inline-flex items-center justify-center rounded leading-[1.5] transition-[background] disabled:pointer-events-none disabled:opacity-50',
+      iconBefore: '',
+      iconAfter: '',
+      text: 'overflow-hidden text-ellipsis',
+    },
     variants: {
       size: {
-        small: 'typography-body-10 px-1',
-        medium: 'typography-body-9 px-2 py-1',
-        large: 'typography-body-9 px-3 py-1',
-        xlarge: 'typography-body-8 px-4 py-2',
-      },
-      color: {
-        hero: 'border border-hero bg-hero text-white hover:bg-hero-300 active:bg-hero-200',
-        primary: 'border border-primary bg-primary text-white hover:bg-primary-300 active:bg-primary-200',
-        link: 'text-link underline',
-        faint: 'border border-border bg-light text-text hover:bg-white active:bg-white',
-        'hero-soft': 'border border-hero bg-white text-text hover:bg-hero-300 hover:text-white active:bg-hero-200',
-        'primary-soft':
-          'border border-primary bg-white text-text hover:bg-primary-300 hover:text-white active:bg-primary-200',
-        'faint-soft': 'border border-border bg-white text-text hover:bg-light active:bg-light',
+        small: { base: 'typography-body-10 px-2 pb-[0.25rem] pt-[0.1875rem]' },
+        medium: { base: 'typography-body-9 px-2 py-[0.3125rem]' },
+        large: { base: 'typography-body-9 px-[0.9375rem] py-[0.5rem]' },
+        xlarge: { base: 'typography-body-8 px-3 pb-[0.625rem] pt-[0.5625rem]' },
+      },
+      look: {
+        primary: { base: 'border border-primary bg-primary text-white hover:bg-primary-70 active:bg-primary-50' },
+        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' },
+        link: { base: 'text-link underline' },
+      },
+      soft: {
+        true: { base: 'bg-white' },
+      },
+      block: {
+        true: { base: 'flex w-full' },
+      },
+      justify: {
+        true: { base: 'justify-between' },
+      },
+      hasChildren: {
+        true: '',
       },
     },
+    compoundSlots: [
+      {
+        slots: ['base'],
+        look: 'primary',
+        soft: true,
+        className: 'text-text hover:text-white',
+      },
+      {
+        slots: ['base'],
+        look: 'hero',
+        soft: true,
+        className: 'text-text hover:text-white',
+      },
+      {
+        slots: ['base'],
+        look: 'faint',
+        soft: true,
+        className: 'hover:bg-light active:bg-light',
+      },
+      {
+        slots: ['iconBefore'],
+        hasChildren: true,
+        className: 'mr-[0.4em]',
+      },
+      {
+        slots: ['iconAfter'],
+        hasChildren: true,
+        className: 'ml-[0.4em]',
+      },
+    ],
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
 );

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

@@ -1,12 +1,23 @@
-import { AnchorHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 
+import { IconProps } from '../index.js';
+
 import { styles } from './button.styles.js';
 
 export type ButtonProps = {
+  /**
+   * Places an icon within the button, after the button’s text
+   */
+  iconAfter?: (props: IconProps) => JSX.Element;
+  /**
+   * Places an icon within the button, before the button’s text
+   */
+  iconBefore?: (props: IconProps) => JSX.Element;
   /**
    * Tag to render
    */
   tag?: keyof Pick<JSX.IntrinsicElements, 'a' | 'span' | 'button' | 'div'>;
-} & Omit<AnchorHTMLAttributes<Element>, 'type' | 'color'> &
+} & ButtonHTMLAttributes<Element> &
+  AnchorHTMLAttributes<Element> &
   VariantProps<typeof styles>;

package/src/components/button/button.utils.ts

@@ -0,0 +1,14 @@
+export const getIconSize = (size: string | object) => {
+  const iconSizeMap: Record<string, string> = {
+    small: 'small',
+    medium: 'small',
+    large: 'medium',
+    xlarge: 'medium',
+  };
+
+  if (typeof size === 'string') {
+    return iconSizeMap[size];
+  } else {
+    return Object.entries(size).reduce((acc, [key, val]) => ({ ...acc, [key]: iconSizeMap[val] }), {});
+  }
+};

package/src/components/button-group/button-group.component.tsx

@@ -0,0 +1,55 @@
+import React, { ReactElement, cloneElement, createContext } from 'react';
+import { useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+
+import { styles as buttonGroupStyles } from './button-group.styles.js';
+import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
+import { Button } from './components/button/button.component.js';
+
+export const ButtonGroupContext = createContext<ButtonGroupContextState>({
+  // TODO: Remove deprecated name prop once React Aria removes it from RadioGroupState
+  name: '',
+  isDisabled: false,
+  isReadOnly: false,
+  isRequired: false,
+  validationState: null,
+  selectedValue: null,
+  setSelectedValue: () => null,
+  lastFocusedValue: null,
+  setLastFocusedValue: () => null,
+  block: false,
+  look: 'hero',
+  size: 'medium',
+});
+
+export function ButtonGroup({
+  className,
+  children,
+  label,
+  look = 'hero',
+  size = 'medium',
+  block = false,
+  ...props
+}: ButtonGroupProps) {
+  const state = useRadioGroupState({ ...props, label, orientation: 'horizontal' });
+  const { radioGroupProps, labelProps } = useRadioGroup({ ...props, label, orientation: 'horizontal' }, state);
+  const styles = buttonGroupStyles({});
+  const childrenToRender = children.map((child, index) => {
+    return cloneElement(child as ReactElement, {
+      key: index,
+      className: 'group/buttons',
+    });
+  });
+
+  return (
+    <div className={styles.base({ className })} {...radioGroupProps}>
+      <span {...labelProps}>{label}</span>
+      <div className={styles.buttonWrapper()}>
+        <ButtonGroupContext.Provider value={{ ...state, size, look, block }}>
+          {childrenToRender}
+        </ButtonGroupContext.Provider>
+      </div>
+    </div>
+  );
+}
+ButtonGroup.Button = Button;

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

@@ -0,0 +1,133 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { ButtonGroup } from './button-group.component.js';
+
+const meta: Meta<typeof ButtonGroup> = {
+  title: 'Example/ButtonGroup',
+  component: ButtonGroup,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+  argTypes: {
+    isDisabled: {
+      description: 'Controls whether all radio options are disabled or not',
+      type: { name: 'boolean' },
+    },
+    label: {
+      description:
+        'Not part of original GEL component but added for compatability with React Aria and accessibility. Styling can be done by passing tag with className as value.',
+    },
+    size: {
+      description:
+        'Controls size of buttons, can use any size the regular GEL Next Button components use or responsive sizing',
+    },
+  },
+  args: {
+    label: 'Test Label',
+    isDisabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LOOKS = ['primary', 'hero'];
+const SIZES = ['small', 'medium', 'large', 'xlarge'];
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: [
+      <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
+      <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>,
+      <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>,
+    ],
+  },
+};
+
+/**
+ * Button group looks
+ */
+export const ButtonGroupColors = () => (
+  <div className="flex flex-col gap-2">
+    {LOOKS.map((look: any) => (
+      <ButtonGroup label={<h3 className="font-bold">{look}</h3>} look={look}>
+        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
+        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
+        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
+      </ButtonGroup>
+    ))}
+  </div>
+);
+
+/**
+ * Button group sizes
+ */
+export const ButtonGroupSizes = () => (
+  <div className="flex flex-col gap-2">
+    {SIZES.map((size: any) => (
+      <ButtonGroup label={<h3 className="font-bold">{size}</h3>} size={size}>
+        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
+        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
+        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
+      </ButtonGroup>
+    ))}
+  </div>
+);
+
+/**
+ * Button group responsive sizing
+ */
+export const ButtonGroupResponsiveSize: Story = {
+  args: {
+    children: [
+      <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
+      <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>,
+      <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>,
+    ],
+    size: {
+      initial: 'small',
+      md: 'large',
+      lg: 'xlarge',
+    },
+  },
+};
+
+/**
+ * Button group block
+ */
+export const ButtonGroupBlock = () => (
+  <div className="flex flex-col gap-2">
+    {SIZES.map((size: any) => (
+      <ButtonGroup block label={<h3 className="font-bold">{size}</h3>} size={size}>
+        <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>
+        <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>
+        <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>
+      </ButtonGroup>
+    ))}
+  </div>
+);
+
+/**
+ * Disabled button group
+ */
+export const DisabledButtonGroup: Story = {
+  args: {
+    children: [
+      <ButtonGroup.Button value="Option 1">Option 1</ButtonGroup.Button>,
+      <ButtonGroup.Button value="Option 2">Option 2</ButtonGroup.Button>,
+      <ButtonGroup.Button value="Option 3">Option 3</ButtonGroup.Button>,
+    ],
+    isDisabled: true,
+  },
+};

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

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '',
+      buttonWrapper: 'flex',
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { AriaRadioGroupProps } from 'react-aria';
+import { RadioGroupState } from 'react-stately';
+
+import { type ButtonProps } from '../button/index.js';
+
+export type ButtonGroupProps = {
+  /**
+   * Sets whether buttons fill the entire box they are located in
+   */
+  block?: boolean;
+  /**
+   * The `Button` components to render
+   */
+  children: ReactNode[];
+  /**
+   * String to override base style
+   */
+  className?: string;
+  /**
+   * Controls look of `Button` components, can't be applied directly to `Button`
+   */
+  look?: 'hero' | 'primary';
+} & Omit<AriaRadioGroupProps, 'errorMessage' | 'description' | 'orientation'> &
+  Pick<ButtonProps, 'size'>;
+
+export type ButtonGroupContextState = {
+  /**
+   * Sets whether buttons fill the entire box they are located in
+   */
+  block?: boolean;
+  /**
+   * Controls look of `Button` components, can't be applied directly to `Button`
+   */
+  look?: 'hero' | 'primary';
+} & RadioGroupState &
+  Pick<ButtonProps, 'size'>;

package/src/components/button-group/components/button/button.component.tsx

@@ -0,0 +1,36 @@
+import React, { useContext, useRef } from 'react';
+import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
+
+import { Button as GELButton } from '../../../button/index.js';
+import { ButtonGroupContext } from '../../button-group.component.js';
+
+import { styles as buttonStyles } from './button.styles.js';
+import { type ButtonProps } from './button.types.js';
+
+export function Button({ className, children, ...props }: ButtonProps) {
+  const state = useContext(ButtonGroupContext);
+  const { size, look, block } = state;
+  const ref = useRef(null);
+  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children }, state, ref);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = buttonStyles({ block, isDisabled, isFocusVisible });
+
+  return (
+    <label className={styles.base({ className })}>
+      <VisuallyHidden>
+        <input {...inputProps} {...focusProps} ref={ref} />
+      </VisuallyHidden>
+      <GELButton
+        tag="div"
+        block={block}
+        soft={!isSelected}
+        disabled={isDisabled}
+        look={look}
+        size={size}
+        className={styles.button()}
+      >
+        {children}
+      </GELButton>
+    </label>
+  );
+}