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-');

ui/components/progress-indicator/__tests__/__snapshots__/Base_Progress_Indicator_renders_a_base_progress_indicator.json

@@ -0,0 +1,71 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+/* eslint-env jest */
+
+import React from 'react';
+import createHelpers from '../../../../jest.setup';
+import { Progress as BaseProgress, Step as BaseStep } from '../base/example';
+import {
+  Progress as VerticalProgress,
+  Step as VerticalStep
+} from '../vertical/example';
+
+const { matchesMarkupAndStyle } = createHelpers(__dirname);
+
+describe('Base Progress Indicator', () => {
+  it('renders a base step', () =>
+    matchesMarkupAndStyle(<BaseStep>Step 1</BaseStep>));
+
+  it('renders an active base step', () =>
+    matchesMarkupAndStyle(<BaseStep active>Step 1</BaseStep>));
+
+  it('renders a done base step', () =>
+    matchesMarkupAndStyle(<BaseStep done>Step 1</BaseStep>));
+
+  it('renders an error base step', () =>
+    matchesMarkupAndStyle(<BaseStep error>Step 1</BaseStep>));
+
+  it('renders an active base step with aria-describedby', () =>
+    matchesMarkupAndStyle(
+      <BaseStep active aria-describedby="step-1-tooltip">
+        Step 1
+      </BaseStep>
+    ));
+
+  it('renders a base progress indicator', () =>
+    matchesMarkupAndStyle(
+      <BaseProgress>
+        <BaseStep active>Step 1</BaseStep>
+        <BaseStep>Step 2</BaseStep>
+      </BaseProgress>
+    ));
+});
+
+describe('Vertical Progress Indicator', () => {
+  it('renders a vertical step', () =>
+    matchesMarkupAndStyle(<VerticalStep>Step 1</VerticalStep>));
+
+  it('renders an active vertical step', () =>
+    matchesMarkupAndStyle(<VerticalStep active>Step 1</VerticalStep>));
+
+  it('renders a done vertical step', () =>
+    matchesMarkupAndStyle(<VerticalStep done>Step 1</VerticalStep>));
+
+  it('renders an error vertical step', () =>
+    matchesMarkupAndStyle(<VerticalStep error>Step 1</VerticalStep>));
+
+  it('renders a vertical progress indicator', () =>
+    matchesMarkupAndStyle(
+      <VerticalProgress>
+        <VerticalStep active>Step 1</VerticalStep>
+        <VerticalStep>Step 2</VerticalStep>
+      </VerticalProgress>
+    ));
+
+  it('renders a vertical step with green success check', () =>
+    matchesMarkupAndStyle(
+      <VerticalStep done is Success>
+        Step 1
+      </VerticalStep>
+    ));
+});

ui/components/progress-indicator/__tests__/__snapshots__/Base_Progress_Indicator_renders_a_base_step.json

@@ -167,7 +167,7 @@
  * Dot indicator for each step
  *
  * @selector .slds-progress__marker
- * @restrict .slds-progress ol li button
+ * @restrict .slds-progress ol li button, .slds-progress ol li div, .slds-progress ol li span
  * @required
  */
 .slds-progress__marker {