@westpac/ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,123 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { RadioGroup } from './radio-group.component.js';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Example/RadioGroup',
+  component: RadioGroup,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="flex p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+  args: {
+    label: <h2>Test</h2>,
+  },
+  argTypes: {
+    orientation: {
+      description:
+        "Controls orientation of `Radio` components, can't be applied directly on `Radio` \n\n `'horizontal'` `'vertical'`",
+      type: { name: 'enum', value: ['horizontal', 'vertical'] },
+    },
+    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.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultRadio: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
+    ],
+  },
+};
+
+/**
+ * > RadioGroup with default value
+ */
+export const RadioWithDefaultValue: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
+    ],
+    defaultValue: 'Option 1',
+  },
+};
+
+/**
+ * > RadioGroup with radios aligned horizontally
+ */
+export const RadioHorizontal: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
+    ],
+    orientation: 'horizontal',
+  },
+};
+
+/**
+ * > RadioGroup that is disabled
+ */
+export const RadioDisabled: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
+    ],
+    isDisabled: true,
+  },
+};
+
+/**
+ * > RadioGroup with large radios
+ */
+export const RadioLarge: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
+    ],
+    size: 'large',
+  },
+};
+
+/**
+ * > RadioGroup that has hidden radios that will be revealed on clicking on button
+ */
+export const RadioWithHiddenOptions: Story = {
+  args: {
+    children: [
+      <RadioGroup.Radio value="Option 1">Option 1</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 2">Option 2</RadioGroup.Radio>,
+      <RadioGroup.Radio value="Option 3">Option 3</RadioGroup.Radio>,
+    ],
+    showAmount: 1,
+  },
+};

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

@@ -0,0 +1,17 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '',
+      radioWrapper: '',
+      revealButton: 'gap-1 px-0 text-text no-underline hover:underline',
+      buttonText: 'typography-body-10',
+    },
+    variants: {
+      orientation: { horizontal: { radioWrapper: 'flex flex-wrap' }, vertical: { radioWrapper: 'flex flex-col' } },
+      isFocusVisible: { true: { revealButton: 'focus-outline' } },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { type AriaRadioGroupProps } from 'react-aria';
+import { type RadioGroupState } from 'react-stately';
+
+export type RadioGroupProps = {
+  /**
+   * The `Radio` components to render
+   */
+  children: ReactNode[];
+  /**
+   * String to override base style
+   */
+  className?: string;
+  /**
+   * Amount of Radios to display, remainder will be hidden behind reveal button
+   */
+  showAmount?: number;
+  /**
+   * Controls size of `Radio` components, can't be applied directly to `Radio`
+   */
+  size?: 'medium' | 'large';
+} & Omit<AriaRadioGroupProps, 'errorMessage' | 'description'>;
+
+export type RadioGroupContextState = {
+  /**
+   * Controls orientation of `Radio` components, can't be applied directly on `Radio`
+   */
+  orientation: 'vertical' | 'horizontal';
+  /**
+   * Controls size of `Radio` components, can't be applied directly on `Radio`
+   */
+  size: 'medium' | 'large';
+} & RadioGroupState;

package/src/components/select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './select.component.js';
+export { type SelectProps } from './select.types.js';

package/src/components/select/select.component.tsx

@@ -0,0 +1,17 @@
+import React, { ForwardedRef, forwardRef } from 'react';
+
+import { styles } from './select.styles.js';
+import { type SelectProps } from './select.types.js';
+
+function BaseSelect(
+  { className, size = 'medium', invalid = false, children, ...props }: SelectProps,
+  ref: ForwardedRef<HTMLSelectElement>,
+) {
+  return (
+    <select ref={ref} className={styles({ className, size, invalid })} {...props}>
+      {children}
+    </select>
+  );
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(BaseSelect);

package/src/components/select/select.stories.tsx

@@ -0,0 +1,72 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Select } from './select.component.js';
+
+const meta: Meta<typeof Select> = {
+  title: 'Example/Select',
+  component: Select,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="flex items-center justify-center p-3">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: (
+      <>
+        <option value="option-1">option 1</option>
+        <option value="option-2">option 2</option>
+        <option value="option-3">option 3</option>
+        <option value="option-4">option 4</option>
+      </>
+    ),
+  },
+};
+
+/**
+ * > Invalid usage example
+ */
+export const InvalidStory: Story = {
+  args: {
+    invalid: true,
+    children: (
+      <>
+        <option value="option-1">option 1</option>
+        <option value="option-2">option 2</option>
+        <option value="option-3">option 3</option>
+        <option value="option-4">option 4</option>
+      </>
+    ),
+  },
+};
+
+/**
+ * > Disabled usage example
+ */
+export const DisabledStory: Story = {
+  args: {
+    disabled: true,
+    children: (
+      <>
+        <option value="option-1">option 1</option>
+        <option value="option-2">option 2</option>
+        <option value="option-3">option 3</option>
+        <option value="option-4">option 4</option>
+      </>
+    ),
+  },
+};

package/src/components/select/select.styles.ts

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline',
+    variants: {
+      size: {
+        small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
+        medium: 'form-control-medium bg-[right_0.75rem_center] pr-[calc(0.5rem+14px+0.75rem)]',
+        large: 'form-control-large bg-[right_0.9375rem_center] pr-[calc(0.5rem+14px+0.9375rem)]',
+        xlarge: 'form-control-xlarge bg-[right_1.125rem_center] pr-[calc(0.5rem+14px+1.125rem)]',
+      },
+      invalid: {
+        true: 'border-danger',
+        false: 'border-borderDark',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/select/select.types.ts

@@ -0,0 +1,6 @@
+import { SelectHTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './select.styles.js';
+
+export type SelectProps = VariantProps<typeof styles> & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>;

package/src/components/tabs/components/index.ts

@@ -0,0 +1,2 @@
+export * from './tab/index.js';
+export * from './tab-panel/index.js';

package/src/components/tabs/components/tab/index.ts

@@ -0,0 +1,2 @@
+export { Tab } from './tab.component.js';
+export { type TabProps } from './tab.types.js';

package/src/components/tabs/components/tab/tab.component.tsx

@@ -0,0 +1,19 @@
+import React, { useRef } from 'react';
+import { useTab } from 'react-aria';
+
+import { styles } from './tab.styles.js';
+import { type TabProps } from './tab.types.js';
+
+export function Tab({ item: { key, rendered }, state, orientation, justify, color, look }: TabProps) {
+  const ref = useRef(null);
+  const { tabProps } = useTab({ key }, state, ref);
+  return (
+    <div
+      {...tabProps}
+      className={styles({ selected: key === state.selectedKey, orientation, justify, color, look })}
+      ref={ref}
+    >
+      {rendered}
+    </div>
+  );
+}

package/src/components/tabs/components/tab/tab.styles.ts

@@ -0,0 +1,119 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'typography-body-9 flex cursor-pointer px-3 py-2 text-text transition-colors hover:bg-white focus:focus-outline',
+    variants: {
+      look: {
+        default: 'border border-border',
+        material: '',
+      },
+      selected: {
+        true: 'bg-white',
+        false: '',
+      },
+      orientation: {
+        horizontal: '',
+        vertical: '',
+      },
+      justify: {
+        true: 'flex-1',
+      },
+      color: {
+        primary: '',
+        hero: '',
+      },
+    },
+    compoundVariants: [
+      {
+        look: 'default',
+        selected: false,
+        className: 'bg-light',
+      },
+      {
+        orientation: 'horizontal',
+        look: 'default',
+        className: 'rounded-t-[0.1875rem]',
+      },
+      {
+        orientation: 'vertical',
+        look: 'default',
+        className: 'rounded-l-[0.1875rem]',
+      },
+      {
+        orientation: 'horizontal',
+        selected: true,
+        className: 'border-b-0',
+      },
+      {
+        orientation: 'vertical',
+        selected: true,
+        className: 'border-r-0',
+      },
+      {
+        color: 'primary',
+        look: 'default',
+        selected: false,
+        className: 'border-primary-90 bg-primary text-white hover:bg-primary-70',
+      },
+      {
+        color: 'hero',
+        selected: false,
+        look: 'default',
+        className: 'border-hero-90 bg-hero text-white hover:bg-hero-70',
+      },
+      // Material look design
+      {
+        look: 'material',
+        orientation: 'horizontal',
+        className: 'border-b-4 border-r border-b-white border-r-border last:border-r-0',
+      },
+      {
+        look: 'material',
+        orientation: 'vertical',
+        className: 'border-b border-l-4 border-b-border border-l-white last:border-b-0',
+      },
+      {
+        look: 'material',
+        selected: true,
+        orientation: 'horizontal',
+        className: 'border-bottom border-b-white text-text',
+      },
+      {
+        look: 'material',
+        selected: true,
+        orientation: 'vertical',
+        className: 'border-left border-l-transparent text-text',
+      },
+      {
+        color: 'primary',
+        look: 'material',
+        selected: true,
+        orientation: 'horizontal',
+        className: 'border-b-primary border-r-border',
+      },
+      {
+        color: 'hero',
+        look: 'material',
+        selected: true,
+        orientation: 'horizontal',
+        className: 'border-b-hero border-r-border',
+      },
+      {
+        color: 'primary',
+        look: 'material',
+        selected: true,
+        orientation: 'vertical',
+        className: 'border-b-border border-l-primary',
+      },
+      {
+        color: 'hero',
+        look: 'material',
+        selected: true,
+        orientation: 'vertical',
+        className: 'border-b-border border-l-hero',
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/tabs/components/tab/tab.types.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import { Orientation } from 'react-aria';
+import { Node, TabListState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './tab.styles.js';
+
+export type TabProps<T = any> = {
+  /**
+   * isDisabled flag
+   */
+  isDisabled?: boolean;
+  /**
+   * Item
+   */
+  item: Node<T>;
+  /**
+   * Orientation, vertical or horizontal for tab
+   */
+  orientation?: Orientation;
+  /**
+   * TabListState
+   */
+  state: TabListState<T>;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/tabs/components/tab-panel/index.ts

@@ -0,0 +1,2 @@
+export { TabPanel } from './tab-panel.component.js';
+export { type TabPanelProps } from './tab-panel.types.js';

package/src/components/tabs/components/tab-panel/tab-panel.component.tsx

@@ -0,0 +1,15 @@
+import React, { useRef } from 'react';
+import { useTabPanel } from 'react-aria';
+
+import { styles } from './tab-panel.styles.js';
+import { type TabPanelProps } from './tab-panel.types.js';
+
+export function TabPanel({ className, state, look, ...props }: TabPanelProps) {
+  const ref = useRef(null);
+  const { tabPanelProps } = useTabPanel({ ...props }, state, ref);
+  return (
+    <div {...tabPanelProps} ref={ref} className={styles({ className, look })}>
+      {state.selectedItem?.props.children}
+    </div>
+  );
+}

package/src/components/tabs/components/tab-panel/tab-panel.styles.ts

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex-1 p-4 focus:focus-outline',
+    variants: {
+      look: {
+        default: 'border border-border',
+        material: '',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/tabs/components/tab-panel/tab-panel.types.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+import { AriaTabPanelProps } from 'react-aria';
+import { TabListState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './tab-panel.styles.js';
+
+export type TabPanelProps<T = any> = {
+  /**
+   * Tab list state
+   */
+  state: TabListState<T>;
+} & AriaTabPanelProps &
+  VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './tabs.component.js';
+export { type TabsProps } from './tabs.types.js';

package/src/components/tabs/tabs.component.tsx

@@ -0,0 +1,44 @@
+import React, { useRef } from 'react';
+import { useTabList } from 'react-aria';
+import { Item, useTabListState } from 'react-stately';
+
+import { Tab, TabPanel } from './components/index.js';
+import { styles as tabStyles } from './tabs.styles.js';
+import { type TabsProps } from './tabs.types.js';
+
+export function Tabs({
+  className,
+  orientation = 'horizontal',
+  justify,
+  children,
+  color,
+  look = 'default',
+  sticky = false,
+  stickyOffset = {},
+  ...props
+}: TabsProps) {
+  const state = useTabListState({ ...props, children });
+  const styles = tabStyles({ orientation, look, sticky });
+
+  const ref = useRef(null);
+  const { tabListProps } = useTabList({ ...props, orientation }, state, ref);
+  return (
+    <div className={styles.base({ className })}>
+      <div style={{ ...tabListProps.style, ...stickyOffset }} {...tabListProps} className={styles.tabList()} ref={ref}>
+        {[...state.collection].map(item => (
+          <Tab
+            key={item.key}
+            item={item}
+            state={state}
+            orientation={orientation}
+            justify={justify}
+            color={color}
+            look={look}
+          />
+        ))}
+      </div>
+      <TabPanel look={look} key={state.selectedItem?.key} state={state} />
+    </div>
+  );
+}
+Tabs.Panel = Item;