feat(progress-indicator): update types and styles

WestpacGEL · Sep 22, 2024 · 3e4be81 · 3e4be81
1 parent d209255
commit 3e4be81
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 30 deletions.
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,10 +1,9 @@
 import React from 'react';
 
 import { Icon } from '../icon/icon.component.js';
-import { IconProps } from '../icon/icon.types.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,
@@ -13,9 +12,9 @@ export function ProgressIndicator({
   size = 'medium',
   'aria-label': ariaLabel = 'Loading',
   ...props
-}: IconProps) {
+}: ProgressIndicatorProps) {
   return (
-    <Icon className={styles({ className, size })} color={color} aria-label={ariaLabel} {...props}>
+    <Icon className={styles({ className })} size={size} color={color} aria-label={ariaLabel} {...props}>
       {children}
     </Icon>
   );

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,16 +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',
-      },
-    },
+    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;