[C-4006] Remove all stems components (#7861)

packages/harmony/src/components/index.ts

@@ -15,3 +15,5 @@ export * from './radio'
 export * from './radio-group'
 export * from './popup-menu'
 export * from './modal'
+export * from './progress-bar'
+export * from './scrubber'

packages/stems/src/components/ProgressBar/ProgressBar.module.css → packages/harmony/src/components/progress-bar/ProgressBar.module.css

@@ -5,7 +5,7 @@
 }
 
 .slider {
-  background-color: var(--neutral-light-9);
+  background-color: var(--harmony-n-50);
   box-shadow: inset 1px 1px 7px -2px rgba(53, 54, 79, 0.25);
   border-radius: 22px;
   height: 24px;
@@ -14,11 +14,7 @@
 }
 
 .sliderBar {
-  background: linear-gradient(
-    315deg,
-    var(--page-header-gradient-color-1) 2.04%,
-    var(--page-header-gradient-color-2) 100%
-  );
+  background: var(--harmony-gradient);
   bottom: 0;
   left: 0;
   position: absolute;
@@ -28,14 +24,14 @@
 
 .labels {
   display: flex;
-  font-size: var(--font-s);
+  font-size: var(--harmony-font-s);
   justify-content: space-between;
   margin-top: 8px;
   padding: 0 4px;
 }
 
 .minLabel,
 .maxLabel {
-  color: var(--neutral-light-4);
-  font-weight: var(--font-bold);
+  color: var(--harmony-text-subdued);
+  font-weight: var(--harmony-font-bold);
 }

packages/stems/src/components/ProgressBar/ProgressBar.tsx → packages/harmony/src/components/progress-bar/ProgressBar.tsx

@@ -1,11 +1,8 @@
 import { useState, useEffect, useMemo } from 'react'
-import * as React from 'react'
 
 import BN from 'bn.js'
 import cn from 'classnames'
 
-import { clampBN } from 'utils/bnHelpers'
-
 import styles from './ProgressBar.module.css'
 import { ProgressBarProps, ProgressValue } from './types'
 
@@ -14,18 +11,24 @@ const getBN = (num: ProgressValue): BN => {
   return new BN(num)
 }
 
-export const ProgressBar: React.FC<ProgressBarProps> = ({
-  className,
-  sliderClassName,
-  sliderBarClassName,
-  min = new BN(0),
-  max = new BN(100),
-  value,
-  showLabels = false,
-  minWrapper: MinWrapper,
-  maxWrapper: MaxWrapper,
-  ...other
-}: ProgressBarProps) => {
+function clampBN(value: BN, min: BN, max: BN): BN {
+  return BN.min(BN.max(value, min), max)
+}
+
+// @beta - This component was directly ported from stems and subject to change
+export const ProgressBar = (props: ProgressBarProps) => {
+  const {
+    className,
+    sliderClassName,
+    sliderBarClassName,
+    min = new BN(0),
+    max = new BN(100),
+    value,
+    showLabels = false,
+    minWrapper: MinWrapper,
+    maxWrapper: MaxWrapper,
+    ...other
+  } = props
   const [sliderWidth, setSliderWidth] = useState(0)
 
   const percentage = useMemo(() => {

packages/stems/src/components/Scrubber/Scrubber.module.css → packages/harmony/src/components/scrubber/Scrubber.module.css

@@ -4,11 +4,12 @@
   width: 100%;
 }
 
-.timestampStart, .timestampEnd {
-  color: var(--neutral);
-  font-size: var(--font-2xs);
+.timestampStart,
+.timestampEnd {
+  color: var(--harmony-neutral);
+  font-size: var(--harmony-font-2xs);
   line-height: 12px;
-  font-family: var(--font-family);
+  font-family: var(--harmony-font-family);
   min-width: 40px;
 }
 
@@ -22,5 +23,5 @@
 
 .scrubber.isMobile .timestampStart,
 .scrubber.isMobile .timestampEnd {
-  font-size: var(--font-xs);
+  font-size: var(--harmony-font-xs);
 }

packages/stems/src/components/Scrubber/Scrubber.tsx → packages/harmony/src/components/scrubber/Scrubber.tsx

@@ -24,6 +24,7 @@ const formatSeconds = (seconds: number) => {
 }
 
 /**
+ * @beta - This component was directly ported from stems and subject to change
  * Wraps the `<Slider />` component and provides timestamp indicators.
  */
 export const Scrubber = ({

packages/stems/src/components/Scrubber/Slider.module.css → packages/harmony/src/components/scrubber/Slider.module.css

@@ -4,23 +4,23 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  margin: 0 var(--unit-3);
+  margin: 0 var(--harmony-unit-3);
 }
 
 .slider.isMobile {
-  margin: 0 var(--unit-4);
+  margin: 0 var(--harmony-unit-4);
 }
 
 .slider.isDisabled {
-  cursor: default
+  cursor: default;
 }
 
 /* Use a psuedo-element to "increase" the clickable area of the scrubber. */
 .slider.expandedTargets:after {
   position: absolute;
   opacity: 0;
-  border-radius: var(--unit-half);;
-  content: "";
+  border-radius: var(--harmony-unit-half);
+  content: '';
   width: 100%;
   height: 500%;
   top: -300%;
@@ -30,9 +30,9 @@
 .rail {
   position: relative;
   width: 100%;
-  height: var(--unit);
-  border-radius: var(--unit-half);
-  background: var(--neutral-light-8);
+  height: var(--harmony-unit);
+  border-radius: var(--harmony-unit-half);
+  background: var(--harmony-n-100);
   overflow: hidden;
   /** Fixes Safari bug where overflow doesn't work with border radius during animation */
   mask-image: -webkit-radial-gradient(white, black);
@@ -51,14 +51,14 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background: var(--neutral);
+  background: var(--harmony-neutral);
 }
 
 .track:before {
-  content: "";
+  content: '';
   position: absolute;
-  border-radius: var(--unit-half);
-  background: var(--scrubber-hover);
+  border-radius: var(--harmony-unit-half);
+  background: var(--harmony-primary-gradient);
   width: 100%;
   height: 100%;
   left: 0;
@@ -85,24 +85,26 @@
 }
 
 .handle {
-  margin-left: var(--negative-unit);
-  height: var(--unit-2);
-  width: var(--unit-2);
+  margin-left: var(--harmony-negative-unit);
+  height: var(--harmony-unit-2);
+  width: var(--harmony-unit-2);
   border-radius: 50%;
-  background: var(--white);
-  box-shadow: 0 0 2px 0 rgba(133,129,153,0.5), 0 2px 5px -1px rgba(133,129,153,0.5);
+  background: var(--harmony-white);
+  box-shadow: 0 0 2px 0 rgba(133, 129, 153, 0.5),
+    0 2px 5px -1px rgba(133, 129, 153, 0.5);
   transition: transform 0.18s ease-in-out, opacity 0.18s ease-in-out;
   opacity: 0;
   transform: scale(0);
 }
 
 .slider.isMobile .handle {
-  height: var(--unit-4);
-  width: var(--unit-4);
-  margin-left: var(--negative-unit-2);
+  height: var(--harmony-unit-4);
+  width: var(--harmony-unit-4);
+  margin-left: calc(var(--harmony-negative-unit) * 2);
 }
 
-.showHandle .handle, .slider:not(.showHandle):hover .handle {
+.showHandle .handle,
+.slider:not(.showHandle):hover .handle {
   opacity: 1;
   transform: scale(1);
 }

packages/harmony/src/foundations/color/primitive.css

@@ -51,6 +51,7 @@
   --harmony-dark-red: #bb0218;
   --harmony-green: #0f9e48;
   --harmony-light-green: #13c65a;
+  --harmony-primary-gradient: linear-gradient(135deg, #ee00ed 0%, #c514e0 100%);
   --harmony-gradient: linear-gradient(315deg, #5b23e1 0%, #a22feb 100%);
 }