feat(progress-indicator): add new vertical variant with new class for green success (#3068)

* feat(progress-indicator): add new class annotations for slds-progress__marker_icon-success

Author: erlswtshrt

shared/styles/doc.scss

@@ -13,6 +13,7 @@
 
 .docs-codeblock-example {
   overflow: auto;
+  transform: translate3d(0, 0, 0);
 }
 
 .docs-codeblock-source {

ui/components/_index.scss

@@ -173,6 +173,7 @@
   // Progress Indicator
   'progress-bar/base/index',
   'progress-indicator/base/index',
+  'progress-indicator/vertical/index',
   'progress-ring/base/index',
 
   // Rich Text Editor

ui/components/progress-bar/base/_index.scss

@@ -109,3 +109,31 @@
 .slds-progress-bar__value_success {
   background: $progress-bar-color-background-fill-success;
 }
+
+/**
+ * @summary Create a vertical progress bar
+ *
+ * @selector .slds-progress-bar_vertical
+ * @restrict .slds-progress-bar
+ * @modifier
+ */
+.slds-progress-bar_vertical {
+  height: 100%;
+  width: ($progress-bar-height * 4);
+
+  &.slds-progress-bar_x-small {
+    width: $progress-bar-height;
+  }
+
+  &.slds-progress-bar_small {
+    width: ($progress-bar-height * 2);
+  }
+
+  &.slds-progress-bar_medium {
+    width: ($progress-bar-height * 4);
+  }
+
+  &.slds-progress-bar_large {
+    width: ($progress-bar-height * 6);
+  }
+}

ui/components/progress-bar/base/example.jsx

@@ -9,23 +9,31 @@ import _ from '../../../shared/helpers';
 // Partial(s)
 /// ///////////////////////////////////////////
 
-export const ProgressBar = props => (
-  <div
-    className={classNames('slds-progress-bar', props.className)}
-    aria-valuemin="0"
-    aria-valuemax="100"
-    aria-valuenow={props.value}
-    aria-labelledby={props['aria-labelledby']}
-    role="progressbar"
-  >
-    <span
-      className="slds-progress-bar__value"
-      style={{ width: `${props.value}%` }}
+export const ProgressBar = props => {
+  let progressBarStyle = props.isVertical
+    ? { height: `${props.value}%` }
+    : { width: `${props.value}%` };
+  return (
+    <div
+      className={classNames(
+        'slds-progress-bar',
+        { 'slds-progress-bar_vertical': props.isVertical },
+        props.className
+      )}
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow={props.value}
+      aria-labelledby={props['aria-labelledby']}
+      role="progressbar"
     >
-      <span className="slds-assistive-text">Progress: {`${props.value}%`}</span>
-    </span>
-  </div>
-);
+      <span className="slds-progress-bar__value" style={progressBarStyle}>
+        <span className="slds-assistive-text">
+          Progress: {`${props.value}%`}
+        </span>
+      </span>
+    </div>
+  );
+};
 
 export const ProgressBarDescriptive = props => {
   const labelUniqueId = _.uniqueId('progress-bar-label-id-');