@westpac/ui 0.1.0

package/src/components/icon/icon.stories.tsx

@@ -0,0 +1,142 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { ChangeEvent, useCallback, useMemo, useState } from 'react';
+
+import { Icon } from './icon.component.js';
+
+import * as AllIcons from './index.js';
+
+const AllIconsExample = (props: AllIcons.IconProps) => {
+  const [search, setSearch] = useState('');
+  const filteredIcons = useMemo(() => {
+    return Object.entries(AllIcons).reduce((acc: { Icon: any; key: string }[], [iconName, Icon]) => {
+      if (iconName.toUpperCase().indexOf(search.toUpperCase()) === -1) {
+        return acc;
+      }
+      return [...acc, { key: iconName, Icon }];
+    }, []);
+  }, [search]);
+
+  const handleOnChange = useCallback(({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+    setSearch(value);
+  }, []);
+
+  const handleOnClick = useCallback(
+    async (key: string) => {
+      try {
+        await navigator.clipboard.writeText(`<${key} />`);
+        console.log('Content copied to clipboard');
+      } catch (err) {
+        console.error('Failed to copy: ', err);
+      }
+    },
+    [props.className],
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <input
+        className="rounded-sm border border-border px-3 py-2"
+        onChange={handleOnChange}
+        placeholder="e.g: Accessibiliy"
+      />
+      <div className="flex flex-row flex-wrap justify-center gap-2">
+        {filteredIcons.map(({ key, Icon }) => (
+          <button
+            onClick={() => handleOnClick(key)}
+            className="flex h-15 w-23 flex-col items-center justify-center gap-2 border border-border"
+            key={key}
+          >
+            <Icon {...props} />
+            <span className="whitespace-pre-wrap text-xs">{`<${key} />`}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const meta: Meta<typeof Icon> = {
+  title: 'Example/Icon',
+  component: AllIconsExample,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ padding: '3rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    children: {
+      description: 'Children',
+      type: { name: 'string' },
+    },
+    copyrightYear: {
+      description: 'CopyrightYear',
+      type: { name: 'string' },
+    },
+    size: {
+      description: 'size',
+      type: { name: 'enum', value: ['xsmall', 'small', 'medium', 'large', 'xlarge'] },
+    },
+    color: {
+      description: 'color',
+      type: {
+        name: 'enum',
+        value: [
+          'success',
+          'info',
+          'warning',
+          'danger',
+          'system',
+          'white',
+          'black',
+          'background',
+          'border',
+          'borderDark',
+          'focus',
+          'heading',
+          'hero',
+          'light',
+          'link',
+          'muted',
+          'neutral',
+          'pop',
+          'primary',
+          'text',
+        ],
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+};
+
+/**
+ * > With primary color example
+ */
+export const WithPrimaryColorStory: Story = {
+  args: {
+    color: 'primary',
+  },
+};
+
+/**
+ * > With large size example
+ */
+export const WithDifferentSizeStory: Story = {
+  args: {
+    size: 'xlarge',
+  },
+};

package/src/components/icon/icon.styles.ts

@@ -0,0 +1,39 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'rounded transition-colors disabled:pointer-events-none disabled:opacity-50',
+    variants: {
+      size: {
+        xsmall: 'h-2 w-2',
+        small: 'h-3 w-3',
+        medium: 'h-4 w-4',
+        large: 'h-6 w-6',
+        xlarge: 'h-8 w-8',
+      },
+      color: {
+        success: 'text-success',
+        info: 'text-info',
+        warning: 'text-warning',
+        danger: 'text-danger',
+        system: 'text-system',
+        white: 'text-white',
+        black: 'text-black',
+        background: 'text-background',
+        border: 'text-border',
+        borderDark: 'text-borderDark',
+        focus: 'text-focus',
+        heading: 'text-heading',
+        hero: 'text-hero',
+        light: 'text-light',
+        link: 'text-link',
+        muted: 'text-muted',
+        neutral: 'text-neutral',
+        pop: 'text-pop',
+        primary: 'text-primary',
+        text: 'text-text',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/icon/icon.types.ts

@@ -0,0 +1,16 @@
+import { type ReactNode, type SVGAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './icon.styles.js';
+
+export type IconProps = SVGAttributes<SVGElement> & {
+  /**
+   * children prop
+   */
+  children?: ReactNode;
+
+  /**
+   * The icon SVG metadata copyright year text
+   */
+  copyrightYear?: string;
+} & VariantProps<typeof styles>;

package/src/components/icon/index.ts

@@ -0,0 +1,178 @@
+export { AccessibilityIcon } from './components/accessibility-icon.js';
+export { AccountIcon } from './components/account-icon.js';
+export { AddCircleIcon } from './components/add-circle-icon.js';
+export { AddIcon } from './components/add-icon.js';
+export { AlertIcon } from './components/alert-icon.js';
+export { AndroidIcon } from './components/android-icon.js';
+export { AppleIcon } from './components/apple-icon.js';
+export { ArrowLeftIcon } from './components/arrow-left-icon.js';
+export { ArrowRightIcon } from './components/arrow-right-icon.js';
+export { AtmIcon } from './components/atm-icon.js';
+export { AustraliaIcon } from './components/australia-icon.js';
+export { BackspaceIcon } from './components/backspace-icon.js';
+export { BankIcon } from './components/bank-icon.js';
+export { BarChartIcon } from './components/bar-chart-icon.js';
+export { BookIcon } from './components/book-icon.js';
+export { BpayIcon } from './components/bpay-icon.js';
+export { BusinessPersonIcon } from './components/business-person-icon.js';
+export { CafeIcon } from './components/cafe-icon.js';
+export { CalculatorIcon } from './components/calculator-icon.js';
+export { CalendarIcon } from './components/calendar-icon.js';
+export { CameraIcon } from './components/camera-icon.js';
+export { CarIcon } from './components/car-icon.js';
+export { ChatIcon } from './components/chat-icon.js';
+export { ClearCircleIcon } from './components/clear-circle-icon.js';
+export { ClearIcon } from './components/clear-icon.js';
+export { ClockIcon } from './components/clock-icon.js';
+export { CloseIcon } from './components/close-icon.js';
+export { CompassIcon } from './components/compass-icon.js';
+export { ContactIcon } from './components/contact-icon.js';
+export { CopyContentIcon } from './components/copy-content-icon.js';
+export { CreditCardIcon } from './components/credit-card-icon.js';
+export { CubeIcon } from './components/cube-icon.js';
+export { CursorArrowClickIcon } from './components/cursor-arrow-click-icon.js';
+export { CursorArrowDoubleClickIcon } from './components/cursor-arrow-double-click-icon.js';
+export { CursorArrowIcon } from './components/cursor-arrow-icon.js';
+export { CursorArrowRaysIcon } from './components/cursor-arrow-rays-icon.js';
+export { DeleteIcon } from './components/delete-icon.js';
+export { DesktopIcon } from './components/desktop-icon.js';
+export { DollarIcon } from './components/dollar-icon.js';
+export { DownloadFileIcon } from './components/download-file-icon.js';
+export { DownloadIcon } from './components/download-icon.js';
+export { DragIcon } from './components/drag-icon.js';
+export { DropDownIcon } from './components/drop-down-icon.js';
+export { DropUpIcon } from './components/drop-up-icon.js';
+export { DropboxIcon } from './components/dropbox-icon.js';
+export { EditIcon } from './components/edit-icon.js';
+export { EftposIcon } from './components/eftpos-icon.js';
+export { EmailIcon } from './components/email-icon.js';
+export { ErrorIcon } from './components/error-icon.js';
+export { ExcelFileIcon } from './components/excel-file-icon.js';
+export { ExitIcon } from './components/exit-icon.js';
+export { ExpandLessIcon } from './components/expand-less-icon.js';
+export { ExpandMoreIcon } from './components/expand-more-icon.js';
+export { FaceHappyIcon } from './components/face-happy-icon.js';
+export { FacebookIcon } from './components/facebook-icon.js';
+export { FavouriteIcon } from './components/favourite-icon.js';
+export { FilterIcon } from './components/filter-icon.js';
+export { FingerprintIcon } from './components/fingerprint-icon.js';
+export { FutureClockIcon } from './components/future-clock-icon.js';
+export { GelIcon } from './components/gel-icon.js';
+export { GenericFileIcon } from './components/generic-file-icon.js';
+export { GeolocationIcon } from './components/geolocation-icon.js';
+export { GiftIcon } from './components/gift-icon.js';
+export { GithubIcon } from './components/github-icon.js';
+export { GlobalIcon } from './components/global-icon.js';
+export { GooglePlusIcon } from './components/google-plus-icon.js';
+export { GridIcon } from './components/grid-icon.js';
+export { GrowthIcon } from './components/growth-icon.js';
+export { HamburgerMenuIcon } from './components/hamburger-menu-icon.js';
+export { HeadsetIcon } from './components/headset-icon.js';
+export { HelpIcon } from './components/help-icon.js';
+export { HistoryClockIcon } from './components/history-clock-icon.js';
+export { HouseIcon } from './components/house-icon.js';
+export { IdCardIcon } from './components/id-card-icon.js';
+export { ImageSquareIcon } from './components/image-square-icon.js';
+export { InfoIcon } from './components/info-icon.js';
+export { InstagramIcon } from './components/instagram-icon.js';
+export { InvestIcon } from './components/invest-icon.js';
+export { KeyIcon } from './components/key-icon.js';
+export { KeyholeIcon } from './components/keyhole-icon.js';
+export { LightBulbIcon } from './components/light-bulb-icon.js';
+export { LimitIcon } from './components/limit-icon.js';
+export { LinkIcon } from './components/link-icon.js';
+export { LinkedinIcon } from './components/linkedin-icon.js';
+export { ListIcon } from './components/list-icon.js';
+export { LiveChatIcon } from './components/live-chat-icon.js';
+export { MapIcon } from './components/map-icon.js';
+export { MapPinIcon } from './components/map-pin-icon.js';
+export { MessageIcon } from './components/message-icon.js';
+export { MobilePayIcon } from './components/mobile-pay-icon.js';
+export { MoneyInIcon } from './components/money-in-icon.js';
+export { MoneyOutIcon } from './components/money-out-icon.js';
+export { MoreHorizontalIcon } from './components/more-horizontal-icon.js';
+export { MoreVerticalIcon } from './components/more-vertical-icon.js';
+export { MoveFromIcon } from './components/move-from-icon.js';
+export { MoveToIcon } from './components/move-to-icon.js';
+export { NewContentIcon } from './components/new-content-icon.js';
+export { NewWindowIcon } from './components/new-window-icon.js';
+export { NotificationActiveIcon } from './components/notification-active-icon.js';
+export { NotificationIcon } from './components/notification-icon.js';
+export { NotificationOffIcon } from './components/notification-off-icon.js';
+export { OfficeIcon } from './components/office-icon.js';
+export { OpenBrowserIcon } from './components/open-browser-icon.js';
+export { PadlockIcon } from './components/padlock-icon.js';
+export { PadlockOpenIcon } from './components/padlock-open-icon.js';
+export { PauseCircleIcon } from './components/pause-circle-icon.js';
+export { PauseIcon } from './components/pause-icon.js';
+export { PayIcon } from './components/pay-icon.js';
+export { PayToMobileIcon } from './components/pay-to-mobile-icon.js';
+export { PaypassIcon } from './components/paypass-icon.js';
+export { PdfFileIcon } from './components/pdf-file-icon.js';
+export { PendingIcon } from './components/pending-icon.js';
+export { PeopleIcon } from './components/people-icon.js';
+export { PercentIcon } from './components/percent-icon.js';
+export { PersonIcon } from './components/person-icon.js';
+export { PhoneIcon } from './components/phone-icon.js';
+export { PieChartIcon } from './components/pie-chart-icon.js';
+export { PlaneIcon } from './components/plane-icon.js';
+export { PlayCircleIcon } from './components/play-circle-icon.js';
+export { PlayIcon } from './components/play-icon.js';
+export { PresetsIcon } from './components/presets-icon.js';
+export { PrintIcon } from './components/print-icon.js';
+export { ProgressIcon } from './components/progress-icon.js';
+export { QuickBalanceIcon } from './components/quick-balance-icon.js';
+export { ReceiptIcon } from './components/receipt-icon.js';
+export { RefreshIcon } from './components/refresh-icon.js';
+export { RemoveCircleIcon } from './components/remove-circle-icon.js';
+export { RemoveIcon } from './components/remove-icon.js';
+export { RssIcon } from './components/rss-icon.js';
+export { SdStorageIcon } from './components/sd-storage-icon.js';
+export { SearchIcon } from './components/search-icon.js';
+export { SecurityIcon } from './components/security-icon.js';
+export { ServiceBellIcon } from './components/service-bell-icon.js';
+export { SettingsIcon } from './components/settings-icon.js';
+export { ShareIcon } from './components/share-icon.js';
+export { ShareIosIcon } from './components/share-ios-icon.js';
+export { ShopIcon } from './components/shop-icon.js';
+export { SimCardIcon } from './components/sim-card-icon.js';
+export { SlackIcon } from './components/slack-icon.js';
+export { SmsIcon } from './components/sms-icon.js';
+export { StarEmptyIcon } from './components/star-empty-icon.js';
+export { StarHalfIcon } from './components/star-half-icon.js';
+export { StarIcon } from './components/star-icon.js';
+export { StopwatchIcon } from './components/stopwatch-icon.js';
+export { SuccessIcon } from './components/success-icon.js';
+export { SuperIcon } from './components/super-icon.js';
+export { SwitchIcon } from './components/switch-icon.js';
+export { TabletIcon } from './components/tablet-icon.js';
+export { TakeOutIcon } from './components/take-out-icon.js';
+export { TelephoneIcon } from './components/telephone-icon.js';
+export { ThumbDownIcon } from './components/thumb-down-icon.js';
+export { ThumbUpIcon } from './components/thumb-up-icon.js';
+export { TickCircleIcon } from './components/tick-circle-icon.js';
+export { TickIcon } from './components/tick-icon.js';
+export { TransferIcon } from './components/transfer-icon.js';
+export { TransportIcon } from './components/transport-icon.js';
+export { TwitterIcon } from './components/twitter-icon.js';
+export { UmbrellaIcon } from './components/umbrella-icon.js';
+export { UploadIcon } from './components/upload-icon.js';
+export { VerifiedIcon } from './components/verified-icon.js';
+export { VideoIcon } from './components/video-icon.js';
+export { VisibilityIcon } from './components/visibility-icon.js';
+export { VisibilityOffIcon } from './components/visibility-off-icon.js';
+export { VoiceIcon } from './components/voice-icon.js';
+export { WalkIcon } from './components/walk-icon.js';
+export { WalletIcon } from './components/wallet-icon.js';
+export { WarningIcon } from './components/warning-icon.js';
+export { WatchIcon } from './components/watch-icon.js';
+export { WearableIcon } from './components/wearable-icon.js';
+export { WheelchairIcon } from './components/wheelchair-icon.js';
+export { WindowsNewIcon } from './components/windows-new-icon.js';
+export { WordFileIcon } from './components/word-file-icon.js';
+export { WriteIcon } from './components/write-icon.js';
+export { YammerIcon } from './components/yammer-icon.js';
+export { YoutubeIcon } from './components/youtube-icon.js';
+export { ZipFileIcon } from './components/zip-file-icon.js';
+
+export { type IconProps } from './icon.types.js';

package/src/components/index.ts

@@ -0,0 +1,5 @@
+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';

package/src/components/skip-link/index.ts

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

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

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+
+import { styles } from './skip-link.styles.js';
+import { type SkipLinkProps } from './skip-link.types.js';
+
+function BaseSkipLink({ className, tag: Tag = 'a', children, ...props }: SkipLinkProps, ref: any) {
+  return (
+    <Tag {...({ ref } as any)} className={styles({ className })} {...props}>
+      {children}
+    </Tag>
+  );
+}
+
+export const SkipLink = forwardRef(BaseSkipLink);
+SkipLink.displayName = 'SkipLink';

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

@@ -0,0 +1,26 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { SkipLink } from './skip-link.component.js';
+
+const meta: Meta<typeof SkipLink> = {
+  title: 'Example/SkipLink',
+  component: SkipLink,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: 'This is a text only for screen reader',
+    href: '#batata',
+  },
+};

package/src/components/skip-link/skip-link.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'sr-only focus:not-sr-only focus:fixed focus:inset-x-0 focus:top-0 focus:bg-white focus:p-3 focus:text-center focus:text-xl focus:text-link focus:underline focus:-outline-offset-2 focus:outline-focus',
+});

package/src/components/skip-link/skip-link.types.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './skip-link.styles.js';
+
+export type SkipLinkProps = (
+  | {
+      /**
+       * Tag to render
+       */
+      tag?: keyof Omit<JSX.IntrinsicElements, 'a'>;
+    }
+  | {
+      /**
+       * href
+       */
+      href: string;
+      /**
+       * Tag to render
+       */
+      tag?: keyof Pick<JSX.IntrinsicElements, 'a'>;
+    }
+) &
+  VariantProps<typeof styles> &
+  HTMLAttributes<Element>;

package/src/components/visually-hidden/index.ts

@@ -0,0 +1,2 @@
+export { VisuallyHidden } from './visually-hidden.component.js';
+export { type VisuallyHiddenProps } from './visually-hidden.types.js';

package/src/components/visually-hidden/visually-hidden.component.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { styles } from './visually-hidden.styles.js';
+import { type VisuallyHiddenProps } from './visually-hidden.types.js';
+
+export function VisuallyHidden({ className, tag: Tag = 'div', children, ...props }: VisuallyHiddenProps) {
+  return (
+    <Tag
+      className={styles({
+        className,
+      })}
+      {...props}
+    >
+      {children}
+    </Tag>
+  );
+}

package/src/components/visually-hidden/visually-hidden.stories.tsx

@@ -0,0 +1,28 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { VisuallyHidden } from './visually-hidden.component.js';
+
+const meta: Meta<typeof VisuallyHidden> = {
+  title: 'Example/VisuallyHidden',
+  component: VisuallyHidden,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ *
+ * Note: The examples below the following headings are visibility hidden.
+ * Best you inspect what is being rendered using your browser’s DevTools.
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: 'Only screen reader can read this',
+  },
+};

package/src/components/visually-hidden/visually-hidden.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  base: 'sr-only',
+});

package/src/components/visually-hidden/visually-hidden.types.ts

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

package/src/components/well/index.ts

@@ -0,0 +1,2 @@
+export { Well } from './well.component.js';
+export { type WellProps } from './well.types.js';

package/src/components/well/well.component.tsx

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

package/src/components/well/well.stories.tsx

@@ -0,0 +1,80 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Well } from './well.component.js';
+
+const meta: Meta<typeof Well> = {
+  title: 'Example/Well',
+  component: Well,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ padding: '3rem' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultUsage: Story = {
+  args: {
+    children: "Look, I'm in a well",
+  },
+};
+
+/**
+ * > Nested usage example
+ */
+export const NestedUsage: Story = {
+  args: {
+    children: (
+      <>
+        I am outside
+        <Well color="white">I am inside</Well>
+      </>
+    ),
+  },
+};
+
+/**
+ * > Tag as <article>
+ */
+export const CustomTagUsage: Story = {
+  args: {
+    tag: 'article',
+    children: "Look, I'm in a well",
+  },
+};
+
+/**
+ * > Nested tag as <article>
+ */
+export const CustomTagNestedUsage: Story = {
+  args: {
+    tag: 'article',
+    children: (
+      <>
+        I am outside
+        <Well color="white">I am inside</Well>
+      </>
+    ),
+  },
+};
+
+/**
+ * > Tag as <aside> with child <san>, passed as a component
+ */
+export const ComplexCustomTagNestedUsage: Story = {
+  args: {
+    tag: 'aside',
+    children: <span>Look, I'm in a well</span>,
+  },
+};

package/src/components/well/well.styles.ts

@@ -0,0 +1,14 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'rounded border border-border p-2 sm:p-4',
+    variants: {
+      color: {
+        light: 'bg-light',
+        white: 'bg-white',
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/well/well.types.tsx

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './well.styles.js';
+
+export type WellProps = {
+  /**
+   * Well's content
+   */
+  children: ReactNode;
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+} & HTMLAttributes<Element> &
+  VariantProps<typeof styles>;