feat(progress): Add flat variant (#207)

src/__tests__/components/progress.test.tsx

@@ -7,10 +7,10 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-gsTCUz hAeaPg"
+        class="sc-gsTCUz cECZDH"
       >
         <div
-          class="sc-bdfBwQ hyWavk"
+          class="sc-bdfBwQ dfCzcs"
           style="width: 50%;"
         />
       </div>

src/components/Progress/Progress.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import StyledProgress, { Bar } from "./StyledProgress";
 import ProgressBunnyWrapper from "./ProgressBunnyWrapper";
 import { ProgressBunny } from "../Svg";
-import { ProgressProps } from "./types";
+import { ProgressProps, variants } from "./types";
 
 const stepGuard = (step: number) => {
   if (step < 0) {
@@ -16,9 +16,14 @@ const stepGuard = (step: number) => {
   return step;
 };
 
-const Progress: React.FC<ProgressProps> = ({ primaryStep = 0, secondaryStep = null, showProgressBunny = false }) => {
+const Progress: React.FC<ProgressProps> = ({
+  variant = variants.ROUND,
+  primaryStep = 0,
+  secondaryStep = null,
+  showProgressBunny = false,
+}) => {
   return (
-    <StyledProgress>
+    <StyledProgress variant={variant}>
       {showProgressBunny && (
         <ProgressBunnyWrapper style={{ left: `${stepGuard(primaryStep)}%` }}>
           <ProgressBunny />

src/components/Progress/StyledProgress.tsx

@@ -1,4 +1,7 @@
 import styled from "styled-components";
+import { space, variant as StyledSystemVariant } from "styled-system";
+import { styleVariants } from "./themes";
+import { ProgressProps, variants } from "./types";
 
 interface BarProps {
   primary?: boolean;
@@ -9,8 +12,6 @@ export const Bar = styled.div<BarProps>`
   top: 0;
   left: 0;
   background-color: ${(props) => (props.primary ? props.theme.colors.secondary : `${props.theme.colors.secondary}80`)};
-  border-top-left-radius: 32px;
-  border-bottom-left-radius: 32px;
   height: 16px;
   transition: width 200ms ease;
 `;
@@ -19,13 +20,26 @@ Bar.defaultProps = {
   primary: false,
 };
 
-const StyledProgress = styled.div`
+interface StyledProgressProps {
+  variant: ProgressProps["variant"];
+}
+
+const StyledProgress = styled.div<StyledProgressProps>`
   position: relative;
   background-color: ${({ theme }) => theme.colors.input};
-  border-radius: 32px;
   box-shadow: ${({ theme }) => theme.shadows.inset};
   height: 16px;
   overflow: hidden;
+
+  ${Bar} {
+    border-top-left-radius: ${({ variant }) => (variant === variants.FLAT ? "0" : "32px")};
+    border-bottom-left-radius: ${({ variant }) => (variant === variants.FLAT ? "0" : "32px")};
+  }
+
+  ${StyledSystemVariant({
+    variants: styleVariants,
+  })}
+  ${space}
 `;
 
 export default StyledProgress;

src/components/Progress/index.stories.tsx

@@ -1,7 +1,10 @@
 import React, { useState } from "react";
-import random from "lodash/random";
+import { capitalize, random } from "lodash";
+import Box from "../Box/Box";
+import Heading from "../Heading/Heading";
 import Button from "../Button/Button";
 import Progress from "./Progress";
+import { variants } from "./types";
 
 export default {
   title: "Components/Progress",
@@ -16,7 +19,16 @@ export const Default: React.FC = () => {
 
   return (
     <div style={{ padding: "32px", width: "400px" }}>
-      <Progress primaryStep={progress} />
+      {Object.values(variants).map((variant) => {
+        return (
+          <Box key={variant} mb="16px">
+            <Heading size="md" mb="8px">
+              {capitalize(variant)}
+            </Heading>
+            <Progress variant={variant} primaryStep={progress} />
+          </Box>
+        );
+      })}
       <div style={{ marginTop: "32px" }}>
         <Button type="button" scale="sm" onClick={handleClick}>
           Random Progress

src/components/Progress/themes.ts

@@ -0,0 +1,12 @@
+import { variants } from "./types";
+
+export const styleVariants = {
+  [variants.ROUND]: {
+    borderRadius: "32px",
+  },
+  [variants.FLAT]: {
+    borderRadius: 0,
+  },
+};
+
+export default styleVariants;

src/components/Progress/types.ts

@@ -1,4 +1,12 @@
+export const variants = {
+  ROUND: "round",
+  FLAT: "flat",
+} as const;
+
+export type Variant = typeof variants[keyof typeof variants];
+
 export interface ProgressProps {
+  variant?: Variant;
   primaryStep?: number;
   secondaryStep?: number;
   showProgressBunny?: boolean;