Merge pull request #882 from WestpacGEL/fix/style-fixes

Fix/style fixes
WestpacGEL · Sep 22, 2024 · 182ccca · 182ccca
2 parents 11062cc + 3e4be81
commit 182ccca
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 46 deletions.
diff --git a/.changeset/strong-eyes-sparkle.md b/.changeset/strong-eyes-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+updated progress-indicators to use IconProps
diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx
@@ -15,6 +15,7 @@ const INVERTED_COLORS = [
   'success-inverted',
   'warning-inverted',
 ] as const;
+const SIZES = ['xlarge', 'large', 'medium', 'small'] as const;
 
 const meta: Meta<typeof Badge> = {
   title: 'Components/Badge',
@@ -141,17 +142,58 @@ export const Links = () => (
 );
 
 /**
- * > Example next to link
+ * > Example on buttons
  */
 export const Buttons = () => (
   <div className="flex flex-col gap-2">
-    {INVERTED_COLORS.map(color => (
-      <Button key={color} look="primary">
-        Primary
-        <Badge color={color} type="pill" className="ml-1">
-          {color}
-        </Badge>
-      </Button>
-    ))}
+    <div className="flex gap-2">
+      {SIZES.map(size => (
+        <Button key={size} color="primary" size={size}>
+          <div className="w-max flex items-center">
+            Label
+            <Badge type="default" color="faint" className="ml-1">
+              NEW
+            </Badge>{' '}
+          </div>
+        </Button>
+      ))}
+    </div>
+    <div className="flex gap-2">
+      {SIZES.map(size => (
+        <Button key={size} color="primary" size={size}>
+          <div className="w-max flex items-center">
+            <Badge type="default" color="faint" className="mr-1">
+              NEW
+            </Badge>{' '}
+            Label
+          </div>
+        </Button>
+      ))}
+    </div>
+    <h3 className="typography-body-9 font-bold">Pill badge</h3>
+    <div className="flex gap-2">
+      {SIZES.map(size => (
+        <Button key={size} look="primary" size={size}>
+          <div className="w-max flex items-center">
+            Label
+            <Badge color="danger-inverted" type="pill" className="ml-1">
+              88
+            </Badge>
+          </div>
+        </Button>
+      ))}
+    </div>
+    <div className="flex gap-2">
+      {SIZES.map(size => (
+        <Button key={size} look="primary" size={size}>
+          <div className="w-max flex items-center">
+            <Badge color="danger-inverted" type="pill" className="mr-1">
+              88
+            </Badge>
+            Label
+          </div>
+        </Button>
+      ))}
+    </div>
   </div>
 );
diff --git a/packages/ui/src/components/button/button.stories.tsx b/packages/ui/src/components/button/button.stories.tsx
@@ -1,6 +1,7 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { ArrowLeftIcon, ArrowRightIcon, BurgerIcon } from '../icon/index.js';
+import { ProgressIndicator } from '../progress-indicator/progress-indicator.component.js';
 
 import { Button } from './button.component.js';
 

diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.component.tsx
@@ -1,19 +1,21 @@
 import React from 'react';
 
+import { Icon } from '../icon/icon.component.js';
+
 import { styles } from './progress-indicator.styles.js';
-import { type ProgressIndicatorProps } from './progress-indicator.types.js';
+import { ProgressIndicatorProps } from './progress-indicator.types.js';
 
 export function ProgressIndicator({
   className,
   children,
-  inverted = false,
+  color = 'hero',
   size = 'medium',
   'aria-label': ariaLabel = 'Loading',
   ...props
 }: ProgressIndicatorProps) {
   return (
-    <div className={styles({ className, size, inverted })} aria-label={ariaLabel} {...props}>
+    <Icon className={styles({ className })} size={size} color={color} aria-label={ariaLabel} {...props}>
       {children}
-    </div>
+    </Icon>
   );
 }
diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.scenarios.stories.tsx
@@ -0,0 +1,97 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../button/button.component.js';
+import { ClearIcon, DropDownIcon, SearchIcon } from '../icon/index.js';
+import { Input } from '../input/input.component.js';
+import { InputGroup } from '../input-group/input-group.component.js';
+
+import { ProgressIndicator } from './progress-indicator.component.js';
+
+const meta: Meta<typeof ProgressIndicator> = {
+  title: 'Components/ProgressIndicator/Scenarios',
+  component: ProgressIndicator,
+  tags: ['autodocs'],
+  decorators: [(Story: StoryFn) => <Story />],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * >Default usage example
+ */
+export const Default: Story = {
+  args: { size: 'xlarge' },
+};
+
+/**
+ * >Usage in buttons
+ */
+
+export const ButtonsUsage = () => {
+  return (
+    <div>
+      {(['large', 'medium', 'small'] as const).map(size => (
+        <>
+          <h3 className="font-bold">{size.charAt(0).toUpperCase() + size.slice(1)}</h3>
+          <div className="flex gap-2 py-2">
+            {(['primary', 'hero', 'faint'] as const).map(look => (
+              <Button
+                size={size}
+                look={look}
+                key={`${size}-${look}`}
+                iconAfter={ProgressIndicator}
+                iconSize={size === 'small' ? 'xsmall' : 'small'}
+                iconColor={look === 'faint' ? 'hero' : 'white'}
+              >
+                Loading...{'  '}
+              </Button>
+            ))}
+          </div>
+        </>
+      ))}
+    </div>
+  );
+};
+
+/**
+ * > Usage in input
+ */
+
+export const InputUsage = () => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const clearInput = useCallback(() => setInputValue(''), []);
+
+  return (
+    <>
+      <InputGroup
+        label="Input with left progress indicator"
+        before={{
+          icon: ProgressIndicator,
+        }}
+        after={{
+          inset: true,
+          element: <Button onClick={clearInput} look="link" iconAfter={ClearIcon} iconColor="muted" />,
+        }}
+      >
+        <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+      </InputGroup>
+      <InputGroup
+        label="Input with right progress indicator"
+        before={{
+          inset: true,
+          element: <Button onClick={clearInput} look="link" iconAfter={DropDownIcon} iconColor="muted" />,
+        }}
+        after={{
+          icon: ProgressIndicator,
+        }}
+      >
+        <Input onChange={({ target: { value } }) => setInputValue(value)} value={inputValue} />
+      </InputGroup>
+    </>
+  );
+};
diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx b/packages/ui/src/components/progress-indicator/progress-indicator.stories.tsx
@@ -3,7 +3,7 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 import { ProgressIndicator } from './progress-indicator.component.js';
 
 const meta: Meta<typeof ProgressIndicator> = {
-  title: 'Components/Progress Indicator',
+  title: 'Components/ProgressIndicator',
   component: ProgressIndicator,
   tags: ['autodocs'],
   decorators: [(Story: StoryFn) => <Story />],
@@ -42,9 +42,9 @@ export const Sizes = () => {
 
 export const Inverted = () => {
   return (
-    <div className="bg-black">
+    <div className="rounded bg-black">
       {(['xsmall', 'small', 'medium', 'large', 'xlarge'] as const).map(size => (
-        <ProgressIndicator key={size} size={size} inverted className="mr-2" />
+        <ProgressIndicator key={size} size={size} color={'white'} className="mr-2" />
       ))}
     </div>
   );

diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts b/packages/ui/src/components/progress-indicator/progress-indicator.styles.ts
@@ -2,20 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-[transparent]',
-    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',
-      },
-      inverted: {
-        true: 'border-b-white border-l-white',
-        false: 'border-b-hero border-l-hero',
-      },
-    },
+    base: 'box-border inline-block animate-[spin_0.7s_linear_infinite] rounded-full border border-r-0 border-t-transparent',
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
 );
diff --git a/packages/ui/src/components/progress-indicator/progress-indicator.types.ts b/packages/ui/src/components/progress-indicator/progress-indicator.types.ts
@@ -1,17 +1,3 @@
-import { HTMLAttributes } from 'react';
-import { type VariantProps } from 'tailwind-variants';
+import { IconProps } from '../icon/icon.types.js';
 
-import { styles } from './progress-indicator.styles.js';
-
-type Variants = VariantProps<typeof styles>;
-
-export type ProgressIndicatorProps = {
-  /**
-   * Whether indicator should be white for a dark background
-   */
-  inverted?: boolean;
-  /**
-   * Size of progress indicator
-   */
-  size?: Variants['size'];
-} & HTMLAttributes<Element>;
+export type ProgressIndicatorProps = IconProps;