Make walkthrough bar charts adapt to the user situation

package.json

@@ -14,6 +14,7 @@
     "babel-preset-gatsby": "^0.1.11",
     "core-js": "^2.6.5",
     "fast-xml-parser": "^3.12.16",
+    "framer-motion": "^1.6.3",
     "gatsby": "^2.4.2",
     "gatsby-cli": "^2.5.13",
     "gatsby-image": "^2.0.34",

src/components/bucket.tsx

@@ -0,0 +1,74 @@
+import React, { useLayoutEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import styled from "@emotion/styled";
+
+const Bucket = function BucketComponent({ percentage, className }) {
+  const water = useRef();
+  const grayPercentage = useRef();
+  const bluePercentage = useRef();
+
+  // TODO: use state as conditional to prevent trigger on additional renders
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      water.current.style.transformOrigin = "center bottom";
+      //grayPercentage.current.style.transformOrigin = 'center bottom';
+      //bluePercentage.current.style.transformOrigin = 'center bottom';
+    }, 6000);
+  });
+
+  return (
+    <svg viewBox={"0 0 100 400"} className={className}>
+      <motion.rect
+        ref={water}
+        width={"100%"}
+        height={"100%"}
+        initial={{ scaleY: 1 }}
+        animate={{ scaleY: percentage }}
+        transition={{ duration: 5 }}
+      />
+      <motion.text
+        ref={grayPercentage}
+        id="gray"
+        x={"50%"}
+        initial={{ translateY: 0 }}
+        animate={{ translateY: `${(1 - percentage) / 2 * 100}%` }}
+        transition={{ duration: 5 }}
+      >
+        {`${(1 - percentage) * 100}%`}
+      </motion.text>
+      <motion.text
+        ref={bluePercentage}
+        id="blue"
+        x={"50%"}
+        initial={{ translateY: '100%' }}
+        animate={{ translateY: `${(1 - percentage / 2) * 100}%` }}
+        transition={{ duration: 5 }}
+      >
+        {`${percentage * 100}%`}
+      </motion.text>
+    </svg>
+  );
+};
+
+const StyledBucket = styled(Bucket)`
+  width: 100px;
+  background-color: lightgray;
+
+  > * {
+    transform-origin: bottom;
+  }
+
+  rect {
+    fill: #4381c1;
+  }
+
+  text {
+    text-anchor: middle;
+  }
+
+  #blue {
+    fill: white;
+  }
+`;
+
+export default StyledBucket;

src/components/progress-tracker.tsx

@@ -1,16 +1,15 @@
 import React from "react";
 import { Link } from "gatsby";
 import styled from "@emotion/styled";
-import { colors } from "../constants";
+import { colors, breakPoints } from "../constants";
 
 const StyledSeparator = styled.div`
-  width: 1px;
 `;
 
 function Step(props) {
   return (
     <Link to={props.path} className={props.className}>
-      {props.label}
+      <span className="label">{props.label}</span>
     </Link>
   );
 }
@@ -25,13 +24,13 @@ const StyledStep = styled(Step)`
   background-color: ${props => {
     switch (props.status) {
       case stepStatus.complete: {
-        return colors.gray;
+        return colors.lightblue;
       }
       case stepStatus.active: {
         return colors.blue;
       }
       case stepStatus.ongoing: {
-        return colors.white;
+        return colors.gray;
       }
     }
   }};
@@ -44,12 +43,96 @@ const StyledStep = styled(Step)`
         return colors.white;
       }
       case stepStatus.ongoing: {
-        return colors.black;
+        return colors.white;
       }
     }
   }};
-  padding: 1em 0.5em;
-  border: 1px solid black;
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-left: 15px;
+  margin-right: 15px;
+  height: 48px;
+  line-height: 48px;
+  vertical-align: middle;
+  text-align: center;
+  box-shadow: 1px 1px 2px;
+  text-decoration-line: none;
+
+  @media (max-width: ${breakPoints[3]}) {
+    .label {
+      display: ${({ status }) => {
+        switch (status) {
+          case stepStatus.complete: {
+            return 'none';
+          }
+          case stepStatus.active: {
+            return 'inline-block';
+          }
+          case stepStatus.ongoing: {
+            return 'none';
+          }
+        }
+      }};
+    }
+  }
+
+  position: relative;
+  :before {
+    content: "";
+    border-left: 1.5em solid transparent;
+    border-top: 1.5em solid ${props => {
+      switch (props.status) {
+        case stepStatus.complete: {
+          return colors.lightblue;
+        }
+        case stepStatus.active: {
+          return colors.blue;
+        }
+        case stepStatus.ongoing: {
+          return colors.gray;
+        }
+      }
+    }};
+    border-bottom: 1.5em solid ${props => {
+      switch (props.status) {
+        case stepStatus.complete: {
+          return colors.lightblue;
+        }
+        case stepStatus.active: {
+          return colors.blue;
+        }
+        case stepStatus.ongoing: {
+          return colors.gray;
+        }
+      }
+    }};
+
+    position: absolute;
+    bottom: 0;
+    left: -1.5em;
+  }
+  :after {
+    content: "";
+    border-left: 1.5em solid ${props => {
+      switch (props.status) {
+        case stepStatus.complete: {
+          return colors.lightblue;
+        }
+        case stepStatus.active: {
+          return colors.blue;
+        }
+        case stepStatus.ongoing: {
+          return colors.gray;
+        }
+      }
+    }};
+    border-top: 1.5em solid transparent;
+    border-bottom: 1.5em solid transparent;
+
+    position: absolute;
+    bottom: 0;
+    right: -1.5em;
+  }
 `;
 
 // FIXME: does not check for duplicate paths
@@ -72,7 +155,7 @@ const StyledProgressTracker = styled(ProgressTracker)`
   /* override html, body font-size CSS rule (was set to 130%) */
   font-size: 100;
 
-
+  /*
   *:first-child {
     border-radius: 1.5em 0 0 1.5em;
     padding-left: 1em;
@@ -82,6 +165,7 @@ const StyledProgressTracker = styled(ProgressTracker)`
     border-radius: 0 1.5em 1.5em 0;
     padding-right: 1em;
   }
+  */
 `;
 
 export { StyledProgressTracker as ProgressTracker };

src/pages/screen-3.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Bucket from "../components/bucket.tsx";
+
+const Screen3 = function Screen3Page() {
+  return (
+    <Bucket percentage={0.4}/>
+  );
+};
+
+export default Screen3;