feature(component): Rewrite Progress to use themes, resolves #141 (#172)

* feat(component):Rewrite Progress to use FlowbiteTheme, close #141 * fix: test a11y * chore: fix the aria-label and use the excludeClassName * style(progress): prettier * style(progress): import type
themesberg · Jun 16, 2022 · cdea61e · cdea61e
1 parent 7a09a0a
commit cdea61e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 51 deletions.
diff --git a/src/lib/components/Flowbite/FlowbiteTheme.ts b/src/lib/components/Flowbite/FlowbiteTheme.ts
@@ -12,6 +12,7 @@ import type {
 import type { PositionInButtonGroup } from '../Button/ButtonGroup';
 import type { HelperColors, LabelColors } from '../FormControls';
 import type { ModalPositions, ModalSizes } from '../Modal';
+import type { ProgressColor, ProgressSizes } from '../Progress';
 import type { StarSizes } from '../Rating';
 import type { SidebarCTAColors } from '../Sidebar/SidebarCTA';
 import type { SpinnerColors, SpinnerSizes } from '../Spinner';
@@ -303,6 +304,13 @@ export interface FlowbiteTheme {
       img: string;
     };
   };
+  progress: {
+    base: string;
+    label: string;
+    bar: string;
+    color: ProgressColor;
+    size: ProgressSizes;
+  };
   spinner: {
     base: string;
     color: SpinnerColors;

diff --git a/src/lib/components/Progress/Progress.stories.tsx b/src/lib/components/Progress/Progress.stories.tsx
@@ -24,13 +24,13 @@ Default.args = {
 export const Sizes = (): JSX.Element => (
   <>
     <div className="text-base font-medium dark:text-white">Small</div>
-    <Progress progress={45} size="sm" color="dark" />
+    <Progress progress={45} size="sm" />
     <div className="mt-3 text-base font-medium dark:text-white">Default</div>
-    <Progress progress={45} size="md" color="dark" />
+    <Progress progress={45} size="md" />
     <div className="mt-3 text-lg font-medium dark:text-white">Large</div>
-    <Progress progress={45} size="lg" color="dark" />
+    <Progress progress={45} size="lg" />
     <div className="mt-3 text-lg font-medium dark:text-white">Extra Large</div>
-    <Progress progress={45} size="xl" color="dark" />
+    <Progress progress={45} size="xl" />
   </>
 );
 
@@ -58,6 +58,7 @@ WithLabelInside.storyName = 'With label inside';
 WithLabelInside.args = {
   label: 'Flowbite',
   progress: 45,
+  size: 'lg',
 };
 
 export const WithLabelOutside = Template.bind({});

diff --git a/src/lib/components/Progress/index.tsx b/src/lib/components/Progress/index.tsx
@@ -1,71 +1,50 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { useId } from 'react';
+import { excludeClassName } from '../../helpers/exclude';
+import type { FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
+import { useTheme } from '../Flowbite/ThemeContext';
 
-type Color = 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple';
-type Size = 'sm' | 'md' | 'lg' | 'xl';
+export interface ProgressProps extends PropsWithChildren<ComponentProps<'div'>> {
+  size?: keyof ProgressSizes;
+  label?: string;
+  labelPosition?: 'inside' | 'outside' | 'none';
+  labelProgress?: boolean;
+  progress: number;
+}
+export interface ProgressColor
+  extends Pick<FlowbiteColors, 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'> {
+  [key: string]: string;
+}
+export interface ProgressSizes extends Pick<FlowbiteSizes, 'sm' | 'md' | 'lg' | 'xl'> {
+  [key: string]: string;
+}
 
-export type ProgressProps = PropsWithChildren<
-  ComponentProps<'div'> & {
-    className?: string;
-    color?: Color;
-    label?: string;
-    labelPosition?: 'inside' | 'outside';
-    labelProgress?: boolean;
-    progress: number;
-    size?: Size;
-  }
->;
-
-const colorClasses: Record<Color, string> = {
-  dark: 'bg-gray-600 dark:bg-gray-300',
-  blue: 'bg-blue-600 dark:bg-blue-600',
-  red: 'bg-red-600 dark:bg-red-500',
-  green: 'bg-green-600 dark:bg-green-500',
-  yellow: 'bg-yellow-400 dark:bg-yellow-400',
-  indigo: 'bg-indigo-600 dark:bg-indigo-500',
-  purple: 'bg-purple-600 dark:bg-purple-500',
-};
-const sizeClasses: Record<Size, string> = {
-  sm: 'h-1.5',
-  md: 'h-2.5',
-  lg: 'h-4',
-  xl: 'h-6',
-};
 export const Progress: FC<ProgressProps> = ({
-  className,
   color = 'blue',
-  label = '',
-  labelPosition = 'inside',
+  label = 'progressbar',
+  labelPosition = 'none',
   labelProgress = false,
   progress,
   size = 'md',
   ...props
-}) => {
+}): JSX.Element => {
   const id = useId();
+  const theme = useTheme().theme.progress;
+  const theirProps = excludeClassName(props);
 
   return (
     <>
-      <span id={`${id}-flowbite-progress`} className="sr-only">
-        {label}
-      </span>
-      <div aria-labelledby={`${id}-flowbite-progress`} aria-valuenow={progress} role="progressbar" {...props}>
+      <div id={id} aria-label={label} aria-valuenow={progress} role="progressbar" {...theirProps}>
         {label && labelPosition === 'outside' && (
-          <div className="mb-1 flex justify-between font-medium dark:text-white">
+          <div className={theme.label}>
             <span>{label}</span>
             {labelProgress && <span>{progress}%</span>}
           </div>
         )}
-        <div
-          className={classNames('w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700', sizeClasses[size])}
-        >
+        <div className={classNames(theme.base, theme.size[size])}>
           <div
-            className={classNames(
-              'flex items-center justify-center rounded-full text-center font-medium leading-none text-blue-100',
-              colorClasses[color],
-              sizeClasses[size],
-              className,
-            )}
+            className={classNames(theme.bar, theme.color[color], theme.size[size])}
             style={{ width: `${progress}%` }}
           >
             {label && labelPosition === 'inside' && label}

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -487,6 +487,26 @@ export default {
       img: 'mr-3 h-6 sm:h-7',
     },
   },
+  progress: {
+    base: 'w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700',
+    label: 'mb-1 flex justify-between font-medium dark:text-white',
+    bar: 'flex items-center justify-center rounded-full text-center font-medium leading-none text-blue-100',
+    color: {
+      dark: 'bg-gray-600 dark:bg-gray-300',
+      blue: 'bg-blue-600',
+      red: 'bg-red-600 dark:bg-red-500',
+      green: 'bg-green-600 dark:bg-green-500',
+      yellow: 'bg-yellow-400',
+      indigo: 'bg-indigo-600 dark:bg-indigo-500',
+      purple: 'bg-purple-600 dark:bg-purple-500',
+    },
+    size: {
+      sm: 'h-1.5',
+      md: 'h-2.5',
+      lg: 'h-4',
+      xl: 'h-6',
+    },
+  },
   spinner: {
     base: 'inline animate-spin text-gray-200',
     color: {