feat: secondary progress

Adds a "secondary" variant to the
the progress. This will not break
any existing usage of this component
since the "primary" color will be
default for the progress bar.

Author: lekoaf

packages/core/src/Progress/index.tsx

@@ -7,6 +7,13 @@ import { spacing, shape } from '../designparams'
 type BaseElement = HTMLDivElement
 type BaseProps = HTMLAttributes<BaseElement>
 
+type ProgressMeterVariants = 'primary' | 'secondary'
+
+interface ProgressMeterProps {
+  readonly fraction: number
+  readonly variant: ProgressMeterVariants
+}
+
 const ProgressContainer = styled.div`
   display: flex;
   align-items: center;
@@ -22,8 +29,11 @@ const ProgressIndicator = styled.div`
   overflow: hidden;
 `
 
-const ProgressMeter = styled.div<{ readonly fraction: number }>`
-  background-color: ${({ theme }) => theme.color.elementPrimary()};
+const ProgressMeter = styled.div<ProgressMeterProps>`
+  background-color: ${({ theme, variant }) =>
+    variant === 'primary'
+      ? theme.color.elementPrimary()
+      : theme.color.element14()};
   border-radius: inherit;
   height: 100%;
   width: ${({ fraction }) => `${Math.round(fraction * 100)}%`};
@@ -50,12 +60,21 @@ export interface ProgressProps extends BaseProps {
    * A string used to tell the user information regarding the progress value.
    */
   readonly label: string
+  /**
+   * Primary or secondary variant of the progress meter
+   */
+  readonly variant?: ProgressMeterVariants
 }
 
-export const Progress: FC<ProgressProps> = ({ value, label, ...props }) => (
+export const Progress: FC<ProgressProps> = ({
+  value,
+  label,
+  variant = 'primary',
+  ...props
+}) => (
   <ProgressContainer {...props}>
     <ProgressIndicator>
-      <ProgressMeter fraction={value} />
+      <ProgressMeter fraction={value} variant={variant} />
     </ProgressIndicator>
     <ProgressLabel>{label}</ProgressLabel>
   </ProgressContainer>

packages/docs/src/mdx/coreComponents/Progress.mdx

@@ -5,7 +5,11 @@ export const meta = {
 }
 
 import styled from 'styled-components'
-import { Progress } from 'practical-react-components-core'
+import {
+  Progress,
+  SpaceBlock,
+  Typography,
+} from 'practical-react-components-core'
 
 # Progress
 
@@ -15,14 +19,23 @@ A Progress inform users about the status of ongoing progresses.
 
 export const total = 84
 export const data = 31
-export const value = (data / total).toFixed(2)
+export const value = parseFloat((data / total).toFixed(2))
 
+<Typography>Primary</Typography>
 <Progress value={value} label={`${data}/${total}Mb`} className="progress" />
+<SpaceBlock variant={32} />
+<Typography>Secondary</Typography>
+<Progress
+  value={value}
+  label={`${data}/${total}Mb`}
+  className="progress"
+  variant="secondary"
+/>
 
 ## Basic usage
 
 ```typescript type="live"
-<Progress value={0.5} label="50%" />
+<Progress value={0.5} label="50%" variant="primary" />
 ```
 
 ## Props