From dbd0db18e2b99d02e3be6d775fa7250ba10d092b Mon Sep 17 00:00:00 2001
From: Ayesha Mazumdar <a.mazumdar@salesforce.com>
Date: Thu, 8 Feb 2018 14:23:12 -0800
Subject: [PATCH] feat(progress-bar): Add example with label and progress
 percentage above the bar (#3060)

---
 ui/components/progress-bar/base/example.jsx | 31 ++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/ui/components/progress-bar/base/example.jsx b/ui/components/progress-bar/base/example.jsx
index 4f5f54a928..3d25069dab 100644
--- a/ui/components/progress-bar/base/example.jsx
+++ b/ui/components/progress-bar/base/example.jsx
@@ -3,17 +3,19 @@
 
 import React from 'react';
 import classNames from 'classnames';
+import _ from '../../../shared/helpers';
 
 /// ///////////////////////////////////////////
 // Partial(s)
 /// ///////////////////////////////////////////
 
-export let ProgressBar = props => (
+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
@@ -25,6 +27,23 @@ export let ProgressBar = props => (
   </div>
 );
 
+export const ProgressBarDescriptive = props => {
+  const labelUniqueId = _.uniqueId('progress-bar-label-id-');
+
+  return (
+    <div className={classNames(props.className)}>
+      <div
+        className="slds-grid slds-grid_align-spread slds-text-color_weak slds-p-bottom_x-small"
+        id={labelUniqueId}
+      >
+        <span>{props.label}</span>
+        <span aria-hidden="true">{`${props.value}%`}</span>
+      </div>
+      <ProgressBar value={props.value} aria-labelledby={labelUniqueId} />
+    </div>
+  );
+};
+
 /// ///////////////////////////////////////////
 // Export
 /// ///////////////////////////////////////////
@@ -58,3 +77,13 @@ export let states = [
     element: <ProgressBar value="100" />
   }
 ];
+
+export let examples = [
+  {
+    id: 'progress-bar-descriptive',
+    label: 'Descriptive Progress Bar',
+    element: (
+      <ProgressBarDescriptive label="Einstein Setup Assistant" value="25" />
+    )
+  }
+];