feat(progress): Scale (#79)

pancakeswap · Apr 19, 2021 · 1adc8f2 · 1adc8f2
1 parent a7bbf7a
commit 1adc8f2
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 8 deletions.
diff --git a/packages/pancake-uikit/src/__tests__/components/progress.test.tsx b/packages/pancake-uikit/src/__tests__/components/progress.test.tsx
@@ -11,7 +11,7 @@ it("renders correctly", () => {
       top: 0;
       left: 0;
       background-color: #7645D9;
-      height: 16px;
+      height: 100%;
       -webkit-transition: width 200ms ease;
       transition: width 200ms ease;
     }
@@ -20,9 +20,9 @@ it("renders correctly", () => {
       position: relative;
       background-color: #eeeaf4;
       box-shadow: inset 0px 2px 2px -1px rgba(74,74,104,0.1);
-      height: 16px;
       overflow: hidden;
       border-radius: 32px;
+      height: 16px;
     }
 
     .c0 .c1 {
@@ -32,6 +32,7 @@ it("renders correctly", () => {
 
     <div
         class="c0"
+        scale="md"
       >
         <div
           class="c1 c2"

diff --git a/packages/pancake-uikit/src/components/Progress/Progress.tsx b/packages/pancake-uikit/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, variants } from "./types";
+import { ProgressProps, variants, scales } from "./types";
 
 const stepGuard = (step: number) => {
   if (step < 0) {
@@ -18,12 +18,13 @@ const stepGuard = (step: number) => {
 
 const Progress: React.FC<ProgressProps> = ({
   variant = variants.ROUND,
+  scale = scales.MD,
   primaryStep = 0,
   secondaryStep = null,
   showProgressBunny = false,
 }) => {
   return (
-    <StyledProgress variant={variant}>
+    <StyledProgress variant={variant} scale={scale}>
       {showProgressBunny && (
         <ProgressBunnyWrapper style={{ left: `${stepGuard(primaryStep)}%` }}>
           <ProgressBunny />

diff --git a/packages/pancake-uikit/src/components/Progress/StyledProgress.tsx b/packages/pancake-uikit/src/components/Progress/StyledProgress.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { space, variant as StyledSystemVariant } from "styled-system";
-import { styleVariants } from "./themes";
+import { styleVariants, styleScales } from "./themes";
 import { ProgressProps, variants } from "./types";
 
 interface BarProps {
@@ -12,7 +12,7 @@ export const Bar = styled.div<BarProps>`
   top: 0;
   left: 0;
   background-color: ${(props) => (props.primary ? props.theme.colors.secondary : `${props.theme.colors.secondary}80`)};
-  height: 16px;
+  height: 100%;
   transition: width 200ms ease;
 `;
 
@@ -22,13 +22,13 @@ Bar.defaultProps = {
 
 interface StyledProgressProps {
   variant: ProgressProps["variant"];
+  scale: ProgressProps["scale"];
 }
 
 const StyledProgress = styled.div<StyledProgressProps>`
   position: relative;
   background-color: ${({ theme }) => theme.colors.input};
   box-shadow: ${({ theme }) => theme.shadows.inset};
-  height: 16px;
   overflow: hidden;
 
   ${Bar} {
@@ -39,6 +39,10 @@ const StyledProgress = styled.div<StyledProgressProps>`
   ${StyledSystemVariant({
     variants: styleVariants,
   })}
+  ${StyledSystemVariant({
+    prop: "scale",
+    variants: styleScales,
+  })}
   ${space}
 `;
 

diff --git a/packages/pancake-uikit/src/components/Progress/index.stories.tsx b/packages/pancake-uikit/src/components/Progress/index.stories.tsx
@@ -29,6 +29,10 @@ export const Default: React.FC = () => {
           </Box>
         );
       })}
+      <Heading size="md" mb="8px">
+        Small
+      </Heading>
+      <Progress scale="sm" primaryStep={progress} />
       <div style={{ marginTop: "32px" }}>
         <Button type="button" scale="sm" onClick={handleClick}>
           Random Progress

diff --git a/packages/pancake-uikit/src/components/Progress/themes.ts b/packages/pancake-uikit/src/components/Progress/themes.ts
@@ -1,4 +1,4 @@
-import { variants } from "./types";
+import { variants, scales } from "./types";
 
 export const styleVariants = {
   [variants.ROUND]: {
@@ -9,4 +9,13 @@ export const styleVariants = {
   },
 };
 
+export const styleScales = {
+  [scales.MD]: {
+    height: "16px",
+  },
+  [scales.SM]: {
+    height: "8px",
+  },
+};
+
 export default styleVariants;
diff --git a/packages/pancake-uikit/src/components/Progress/types.ts b/packages/pancake-uikit/src/components/Progress/types.ts
@@ -3,10 +3,18 @@ export const variants = {
   FLAT: "flat",
 } as const;
 
+export const scales = {
+  MD: "md",
+  SM: "sm",
+} as const;
+
+export type Scale = typeof scales[keyof typeof scales];
+
 export type Variant = typeof variants[keyof typeof variants];
 
 export interface ProgressProps {
   variant?: Variant;
+  scale?: Scale;
   primaryStep?: number;
   secondaryStep?: number;
   showProgressBunny?: boolean;

diff --git a/yarn.lock b/yarn.lock
@@ -2429,6 +2429,20 @@
   dependencies:
     "@octokit/openapi-types" "^6.0.0"
 
+"@pancakeswap-libs/[email protected]":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@pancakeswap-libs/eslint-config-pancake/-/eslint-config-pancake-0.1.0.tgz#109863752b77106bf2721d639c9a17e89002879d"
+  integrity sha512-wJBZike/rd2f/9Vep6yNyA8qqRl7UBW55ppYvPaJa61HjethJ113hcUxWzgbQ35OfnLO5beuTBFqR/rypJ5V/A==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "^4.7.0"
+    "@typescript-eslint/parser" "^4.7.0"
+    eslint-config-airbnb "^18.2.1"
+    eslint-config-prettier "^6.15.0"
+    eslint-plugin-import "^2.22.1"
+    eslint-plugin-jsx-a11y "^6.4.1"
+    eslint-plugin-react "^7.21.5"
+    eslint-plugin-react-hooks "^4.0.0"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz#1eec460596d200c0236bf195b078a5d1df89b766"