@westpac/ui 0.2.1 → 0.4.0

package/src/components/pictogram/components/informative/wearables-pictogram.tsx

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../../pictogram.component.js';
+import { fill } from '../../pictogram.styles.js';
+import { type PictogramProps } from '../../pictogram.types.js';
+
+export function WearablesPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Wearables',
+  copyrightYear = '2021',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M47.436 52.37h-20.7a1.94 1.94 0 0 1-1.936-1.934V24.54a1.94 1.94 0 0 1 1.935-1.934h20.701a1.94 1.94 0 0 1 1.934 1.934v25.896a1.94 1.94 0 0 1-1.934 1.934"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M52.674 51.958a3.716 3.716 0 0 1-3.711 3.711h-23.75c-1.38 0-2.573-.768-3.213-1.89v.004c-.01-.017-.016-.036-.026-.053-.1-.18-.185-.37-.253-.568a4.018 4.018 0 0 1-.11-.348 3.48 3.48 0 0 1-.042-.208 3.375 3.375 0 0 1-.07-.648V23.031a3.716 3.716 0 0 1 3.712-3.71h23.752a3.716 3.716 0 0 1 3.71 3.71v28.927zm-7.53 12.405a87.928 87.928 0 0 1-.352 1.76c-.294 1.37-1.537 2.366-2.956 2.366h-9.327c-1.42 0-2.662-.996-2.956-2.367-.12-.554-.234-1.148-.353-1.759-.42-2.17-.871-4.495-1.69-6.194h19.324c-.818 1.7-1.27 4.023-1.69 6.194zM29.198 10.625c.119-.61.234-1.204.353-1.758.294-1.372 1.537-2.367 2.956-2.367h9.327c.162 0 .32.016.476.041.092.015.178.04.267.063.054.013.109.025.16.041.122.04.236.085.349.136l.035.017a2.992 2.992 0 0 1 1.672 2.07c.119.553.235 1.147.353 1.757.42 2.171.87 4.496 1.689 6.195H27.508c.819-1.699 1.27-4.024 1.689-6.195zm27.577 11.532c-2-2.833-3.93-4.113-5.183-4.72-.44-1.426-1.235-5.525-1.356-6.094a5.386 5.386 0 0 0-.981-2.104c-.761-.939-3.434-3.974-5.208-4.754A5.49 5.49 0 0 0 41.833 4h-9.35c-2.58.011-4.84 1.834-5.378 4.343a97.633 97.633 0 0 0-.362 1.807c-.308 1.59-.862 4.445-1.6 5.847-.267.506-.429.817-.87.902-2.98.455-5.273 3.028-5.273 6.132v28.927c0 1.342.243 2.27 1.13 3.527 2 2.833 4.459 4.5 4.459 4.5l-.007-.015c.37.27.77.494 1.196.676.425 1.407 1.206 5.43 1.327 6a5.41 5.41 0 0 0 .593 1.518s1.872 3.655 5.377 5.242a5.535 5.535 0 0 0 2.43.583h9.328c2.59 0 4.862-1.826 5.402-4.343.12-.569 1.103-8.216 2.832-8.576a6.22 6.22 0 0 0 5.104-6.11V26.03c0-1.35-.892-3.158-1.397-3.874z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/index.ts

@@ -0,0 +1,96 @@
+export { AccessibilityPictogram } from './components/informative/accessibility-pictogram.js';
+export { AccountsPictogram } from './components/informative/accounts-pictogram.js';
+export { AeroplanePictogram } from './components/informative/aeroplane-pictogram.js';
+export { ArrowDownPictogram } from './components/informative/arrow-down-pictogram.js';
+export { ArrowLeftPictogram } from './components/informative/arrow-left-pictogram.js';
+export { ArrowRightPictogram } from './components/informative/arrow-right-pictogram.js';
+export { ArrowUpPictogram } from './components/informative/arrow-up-pictogram.js';
+export { ArrowsPassingPictogram } from './components/informative/arrows-passing-pictogram.js';
+export { ATMPictogram } from './components/informative/atm-pictogram.js';
+export { AustraliaPictogram } from './components/informative/australia-pictogram.js';
+export { BankCardLockedPictogram } from './components/informative/bank-card-locked-pictogram.js';
+export { BankCardPictogram } from './components/informative/bank-card-pictogram.js';
+export { BankPictogram } from './components/informative/bank-pictogram.js';
+export { BirthCertificatePictogram } from './components/informative/birth-certificate-pictogram.js';
+export { BuildingPictogram } from './components/informative/building-pictogram.js';
+export { BuoyPictogram } from './components/informative/buoy-pictogram.js';
+export { BusPictogram } from './components/informative/bus-pictogram.js';
+export { BusinessPersonPictogram } from './components/informative/business-person-pictogram.js';
+export { CalculatorPictogram } from './components/informative/calculator-pictogram.js';
+export { CalendarPictogram } from './components/informative/calendar-pictogram.js';
+export { CarPictogram } from './components/informative/car-pictogram.js';
+export { CashPictogram } from './components/informative/cash-pictogram.js';
+export { CelebrationPictogram } from './components/informative/celebration-pictogram.js';
+export { ChatPictogram } from './components/informative/chat-pictogram.js';
+export { ClockPictogram } from './components/informative/clock-pictogram.js';
+export { CoffeePictogram } from './components/informative/coffee-pictogram.js';
+export { CoinsPictogram } from './components/informative/coins-pictogram.js';
+export { CompassPictogram } from './components/informative/compass-pictogram.js';
+export { CustomerProfilePictogram } from './components/informative/customer-profile-pictogram.js';
+export { DesktopComputerPictogram } from './components/informative/desktop-computer-pictogram.js';
+export { DocumentAndPenPictogram } from './components/informative/document-and-pen-pictogram.js';
+export { DollarSignPictogram } from './components/informative/dollar-sign-pictogram.js';
+export { DriversLicencePictogram } from './components/informative/drivers-licence-pictogram.js';
+export { EducationPictogram } from './components/informative/education-pictogram.js';
+export { EftposPictogram } from './components/informative/eftpos-pictogram.js';
+export { EnvelopeEmailPictogram } from './components/informative/envelope-email-pictogram.js';
+export { EnvelopePrintedPictogram } from './components/informative/envelope-printed-pictogram.js';
+export { FaceHappyPictogram } from './components/informative/face-happy-pictogram.js';
+export { FaceUnhappyPictogram } from './components/informative/face-unhappy-pictogram.js';
+export { FaceUnsurePictogram } from './components/informative/face-unsure-pictogram.js';
+export { FingerMotionPictogram } from './components/informative/finger-motion-pictogram.js';
+export { FingerprintPictogram } from './components/informative/fingerprint-pictogram.js';
+export { FootballPictogram } from './components/informative/football-pictogram.js';
+export { ForkKnifePictogram } from './components/informative/fork-knife-pictogram.js';
+export { GenericDocumentPictogram } from './components/informative/generic-document-pictogram.js';
+export { GiftPictogram } from './components/informative/gift-pictogram.js';
+export { GlobeAustraliaPictogram } from './components/informative/globe-australia-pictogram.js';
+export { GlobePictogram } from './components/informative/globe-pictogram.js';
+export { GraphDecreasingPictogram } from './components/informative/graph-decreasing-pictogram.js';
+export { GraphIncreasingPictogram } from './components/informative/graph-increasing-pictogram.js';
+export { GymPictogram } from './components/informative/gym-pictogram.js';
+export { HeadsetPictogram } from './components/informative/headset-pictogram.js';
+export { HeartPictogram } from './components/informative/heart-pictogram.js';
+export { HousePictogram } from './components/informative/house-pictogram.js';
+export { LightBulbPictogram } from './components/informative/light-bulb-pictogram.js';
+export { LoopPictogram } from './components/informative/loop-pictogram.js';
+export { MedicareCardPictogram } from './components/informative/medicare-card-pictogram.js';
+export { MobileDevicePictogram } from './components/informative/mobile-device-pictogram.js';
+export { MoneyInPictogram } from './components/informative/money-in-pictogram.js';
+export { MoneyOutPictogram } from './components/informative/money-out-pictogram.js';
+export { MovieTicketsPictogram } from './components/informative/movie-tickets-pictogram.js';
+export { NestEggPictogram } from './components/informative/nest-egg-pictogram.js';
+export { NoodlesPictogram } from './components/informative/noodles-pictogram.js';
+export { Number1Pictogram } from './components/informative/number-1-pictogram.js';
+export { Number2Pictogram } from './components/informative/number-2-pictogram.js';
+export { Number3Pictogram } from './components/informative/number-3-pictogram.js';
+export { Number4Pictogram } from './components/informative/number-4-pictogram.js';
+export { Number5Pictogram } from './components/informative/number-5-pictogram.js';
+export { PadlockLockedPictogram } from './components/informative/padlock-locked-pictogram.js';
+export { PadlockUnlockedPictogram } from './components/informative/padlock-unlocked-pictogram.js';
+export { PassportPictogram } from './components/informative/passport-pictogram.js';
+export { PercentSignPictogram } from './components/informative/percent-sign-pictogram.js';
+export { PersonPictogram } from './components/informative/person-pictogram.js';
+export { PiggyBankPictogram } from './components/informative/piggy-bank-pictogram.js';
+export { PizzaPictogram } from './components/informative/pizza-pictogram.js';
+export { PlantPictogram } from './components/informative/plant-pictogram.js';
+export { SearchPictogram } from './components/informative/search-pictogram.js';
+export { SecurePictogram } from './components/informative/secure-pictogram.js';
+export { ShopPictogram } from './components/informative/shop-pictogram.js';
+export { ShoppingPictogram } from './components/informative/shopping-pictogram.js';
+export { StarPictogram } from './components/informative/star-pictogram.js';
+export { StopwatchPictogram } from './components/informative/stopwatch-pictogram.js';
+export { TaxDocumentPictogram } from './components/informative/tax-document-pictogram.js';
+export { TelephoneCallPictogram } from './components/informative/telephone-call-pictogram.js';
+export { ThumbsUpPictogram } from './components/informative/thumbs-up-pictogram.js';
+export { TickPictogram } from './components/informative/tick-pictogram.js';
+export { ToolsPictogram } from './components/informative/tools-pictogram.js';
+export { TractorPictogram } from './components/informative/tractor-pictogram.js';
+export { TruckPictogram } from './components/informative/truck-pictogram.js';
+export { UmbrellaPictogram } from './components/informative/umbrella-pictogram.js';
+export { UnsecurePictogram } from './components/informative/unsecure-pictogram.js';
+export { WalletPictogram } from './components/informative/wallet-pictogram.js';
+export { WearablesPictogram } from './components/informative/wearables-pictogram.js';
+
+export { WBCBankCardPictogram } from './components/decorative/wbc-bank-card-pictogram.js';
+export { type PictogramProps } from './pictogram.types.js';

package/src/components/pictogram/pictogram.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { styles } from './pictogram.styles.js';
+import { type PictogramProps } from './pictogram.types.js';
+
+export function Pictogram({
+  copyrightYear = '',
+  xmlns = 'http://www.w3.org/2000/svg',
+  role = 'img',
+  focusable = false,
+  className,
+  viewBoxWidth,
+  viewBoxHeight,
+  children,
+  ...props
+}: PictogramProps) {
+  return (
+    <span className={styles({ className })}>
+      <svg
+        xmlns={xmlns}
+        role={role}
+        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+        focusable={focusable}
+        className="block"
+        {...props}
+      >
+        {copyrightYear && (
+          <metadata>{`Copyright © ${copyrightYear} by Westpac Banking Corporation. All rights reserved.`}</metadata>
+        )}
+        {children}
+      </svg>
+    </span>
+  );
+}

package/src/components/pictogram/pictogram.stories.tsx

@@ -0,0 +1,53 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { clsx } from 'clsx';
+
+import { Pictogram } from './pictogram.component.js';
+
+import * as AllPictograms from './index.js';
+import { PictogramProps, WBCBankCardPictogram } from './index.js';
+
+const AllPictogramsExample = (props: PictogramProps) => {
+  const { mode } = props;
+  const informativePictograms = Object.entries(AllPictograms).reduce(
+    (curr, [key, symbol]) => (!key.startsWith('WBC') ? { ...curr, [key]: symbol } : curr),
+    {} as { [index: string]: React.FC<PictogramProps> },
+  );
+  return (
+    <div className={clsx('grid grid-cols-5 gap-5 p-5', mode === 'light' && 'bg-hero text-white')}>
+      {Object.entries(informativePictograms).map(([key, Pictogram]) => (
+        <div key={key} className="flex flex-col items-center justify-end">
+          <Pictogram {...props} />
+          <p className="mt-2">{key}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const meta: Meta<typeof Pictogram> = {
+  title: 'Example/Pictogram',
+  component: AllPictogramsExample,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    mode: {
+      description: 'mode',
+      type: { name: 'enum', value: ['duo', 'dark', 'light'] },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+};
+
+export const DecorativeStory = () => <WBCBankCardPictogram />;

package/src/components/pictogram/pictogram.styles.ts

@@ -0,0 +1,38 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'inline-block shrink-0 leading-none',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);
+
+export const fill = tv({
+  base: '',
+  variants: {
+    mode: {
+      dark: 'fill-pictogram-dark',
+      light: 'fill-white',
+      duo: '',
+    },
+    highlight: {
+      true: '',
+    },
+    outline: {
+      true: '',
+    },
+  },
+  compoundVariants: [
+    {
+      mode: 'duo',
+      highlight: true,
+      className: 'fill-pictogram-duo-highlight',
+    },
+    {
+      mode: 'duo',
+      outline: true,
+      className: 'fill-pictogram-duo-outline',
+    },
+  ],
+});

package/src/components/pictogram/pictogram.types.ts

@@ -0,0 +1,27 @@
+import { type SVGAttributes } from 'react';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './pictogram.styles.js';
+
+export type PictogramProps = SVGAttributes<SVGElement> & {
+  /**
+   * SVG copyright year
+   */
+  copyrightYear?: string;
+  /**
+   * Pictogram mode
+   */
+  mode?: 'dark' | 'light' | 'duo';
+  /**
+   * Tag to render
+   */
+  tag?: keyof JSX.IntrinsicElements;
+  /**
+   * SVG viewBox height
+   */
+  viewBoxHeight?: number;
+  /**
+   * SVG viewBox width
+   */
+  viewBoxWidth?: number;
+} & VariantProps<typeof styles>;

package/src/components/popover/components/panel/index.ts

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

package/src/components/popover/components/panel/panel.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FocusScope } from 'react-aria';
+
+import { Button } from '../../../button/index.js';
+import { CloseIcon } from '../../../icon/index.js';
+
+import { styles as panelStyles } from './panel.styles.js';
+import { type PanelProps } from './panel.types.js';
+
+export function Panel({ state, heading, headingTag: Tag = 'h1', content, placement = 'top', id }: PanelProps) {
+  const styles = panelStyles({ placement });
+
+  return (
+    <FocusScope restoreFocus>
+      <div className={styles.popover()} id={id}>
+        <div className={styles.content()}>
+          <Tag className={styles.heading()}>{heading}</Tag>
+          <div className={styles.body()}>{content}</div>
+          <Button
+            look="link"
+            onClick={state.close}
+            className={styles.closeBtn()}
+            iconAfter={() => <CloseIcon color="muted" size="small" aria-hidden />}
+            aria-label="Close popover"
+          />
+        </div>
+        <div aria-hidden className={styles.arrow()} />
+      </div>
+    </FocusScope>
+  );
+}

package/src/components/popover/components/panel/panel.styles.ts

@@ -0,0 +1,29 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '',
+      popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
+      arrow:
+        'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
+      closeBtn: 'focus:focus-outline absolute right-1 top-1 m-1 p-0 hover:opacity-80',
+      content: 'w-[17.625rem] py-4 pl-3 pr-5',
+      heading: 'typography-body-9 mb-2 font-bold',
+      body: 'typography-body-10',
+    },
+    variants: {
+      placement: {
+        top: {
+          popover: 'bottom-full left-1/2 mb-[0.9375rem] -translate-x-1/2',
+          arrow: 'left-1/2 top-full -translate-x-1/2 after:top-[-12px] after:translate-x-[-7px]',
+        },
+        bottom: {
+          popover: 'left-1/2 top-full mt-[0.9375rem] -translate-x-1/2',
+          arrow: 'bottom-full left-1/2 -translate-x-1/2 rotate-180 after:bottom-[1px] after:translate-x-[-7px]',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/popover/components/panel/panel.types.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+
+export type PanelProps = {
+  /**
+   * Content of popover
+   */
+  content: string;
+  /**
+   * Heading for popover box
+   */
+  heading?: string;
+  /**
+   * Tag to render
+   */
+  headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+  /**
+   * Overlay trigger state
+   */
+  placement?: 'top' | 'bottom';
+  /**
+   * Overlay trigger state
+   */
+  state: OverlayTriggerState;
+} & HTMLAttributes<Element>;

package/src/components/popover/index.ts

@@ -0,0 +1,2 @@
+export { Popover } from './popover.component.js';
+export { type PopoverProps } from './popover.types.js';

package/src/components/popover/popover.component.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback, useEffect, useId } from 'react';
+import { useOverlayTriggerState } from 'react-stately';
+
+import { Button } from '../button/index.js';
+
+import { Panel } from './components/panel/panel.component.js';
+import { styles as popoverStyles } from './popover.styles.js';
+import { type PopoverProps } from './popover.types.js';
+
+export function Popover({
+  children,
+  className,
+  headingTag,
+  content,
+  heading,
+  onClick = () => undefined,
+  placement,
+  look,
+  open = false,
+  icon,
+}: PopoverProps) {
+  const state = useOverlayTriggerState({ defaultOpen: open });
+  const panelId = useId();
+  const styles = popoverStyles({});
+
+  const handleClick = useCallback(() => {
+    onClick();
+    state.toggle();
+  }, [onClick, state.isOpen]);
+
+  const keyHandler = useCallback(
+    (event: globalThis.KeyboardEvent) => {
+      if (state.isOpen && event.key === 'Escape') state.close();
+    },
+    [state.isOpen],
+  );
+
+  useEffect(() => {
+    window.document.addEventListener('keydown', keyHandler);
+    return () => {
+      window.document.removeEventListener('keydown', keyHandler);
+    };
+  }, [state.isOpen]);
+
+  return (
+    <div className={styles.base({ className })}>
+      <Button
+        look={icon && !children ? 'link' : look}
+        iconAfter={icon}
+        className={styles.button()}
+        aria-expanded={state.isOpen}
+        aria-controls={panelId}
+        onClick={handleClick}
+      >
+        {children}
+      </Button>
+      {state.isOpen && (
+        <Panel
+          placement={placement}
+          heading={heading ? heading : ''}
+          headingTag={headingTag}
+          content={content}
+          state={state}
+          id={panelId}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/popover/popover.stories.tsx

@@ -0,0 +1,84 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { HelpIcon } from '../icon/index.js';
+
+import { Popover } from './popover.component.js';
+
+const popoverContent =
+  'Small overlays of content for housing secondary information. These are often used to provide explanatory information for complex ideas.';
+
+const meta: Meta<typeof Popover> = {
+  title: 'Example/Popover',
+  component: Popover,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-[200px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'center',
+  },
+  args: {
+    content: popoverContent,
+    heading: 'Test Heading',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {
+    children: 'Click Me',
+  },
+};
+
+/**
+ * > Using icon as trigger
+ */
+export const PopoverIconTrigger: Story = {
+  args: {
+    icon: () => <HelpIcon color="hero" />,
+  },
+};
+
+/**
+ * > Default open
+ */
+export const DefaultOpenPopover: Story = {
+  args: {
+    children: 'Click Me',
+    open: true,
+  },
+};
+
+/**
+ * > No heading
+ */
+export const PopoverNoHeading: Story = {
+  args: {
+    children: 'Click Me',
+    open: true,
+    heading: undefined,
+  },
+};
+
+/**
+ * > Top and bottom popover
+ */
+export const PopoverPlacement = () => (
+  <div>
+    <Popover className="mr-3" heading="Heading" placement="top" content={popoverContent} open>
+      Top Popover
+    </Popover>
+    <Popover placement="bottom" heading="Heading" content={popoverContent} open>
+      Bottom Popover
+    </Popover>
+  </div>
+);

package/src/components/popover/popover.styles.ts

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'relative inline-block',
+      button: 'focus:focus-outline',
+    },
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/popover/popover.types.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+import { ButtonProps } from '../button/index.js';
+import { IconProps } from '../icon/icon.types.js';
+
+export type PopoverProps = {
+  /**
+   * Button text
+   */
+  children?: ReactNode;
+  /**
+   * Content of popover
+   */
+  content: string;
+  /**
+   * Heading for popover box
+   */
+  heading?: string;
+  /**
+   * Tag to render
+   */
+  headingTag?: keyof Pick<JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+  /**
+   * Use an icon as the button
+   */
+  icon?: (props: IconProps) => JSX.Element;
+  /**
+   * A function for the onClick event
+   */
+  onClick?: () => void;
+  /**
+   * Whether popover is open by default
+   */
+  open?: boolean;
+  /**
+   * Placement of popover
+   */
+  placement?: 'top' | 'bottom';
+} & HTMLAttributes<Element> &
+  Pick<ButtonProps, 'look'>;

package/src/components/progress-bar/index.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './progress-bar.component.js';
+export { type ProgressBarProps } from './progress-bar.types.js';

package/src/components/progress-bar/progress-bar.component.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useProgressBar } from 'react-aria';
+
+import { styles as progressBarStyles } from './progress-bar.styles.js';
+import { type ProgressBarProps } from './progress-bar.types.js';
+
+export function ProgressBar({ className, look = 'default', value = 0, noLabel = false, ...props }: ProgressBarProps) {
+  const roundedValue = Math.round(value);
+  const barValue = `${roundedValue}%`;
+
+  const { progressBarProps, labelProps } = useProgressBar({
+    value: roundedValue,
+    label: barValue,
+    ...props,
+  });
+
+  const styles = progressBarStyles({ look });
+
+  return (
+    <div {...progressBarProps} className={styles.base({ className })}>
+      <div style={{ width: barValue }} className={styles.innerBar()}>
+        <span className={styles.label({ class: `${noLabel || look === 'skinny' ? 'hidden' : ''}` })} {...labelProps}>
+          {barValue}
+        </span>
+      </div>
+    </div>
+  );
+}