Skip to content
Permalink
Browse files

feat(progress-bar): Add example with label and progress percentage ab…

…ove the bar (#3060)
  • Loading branch information...
Ayesha Mazumdar
Ayesha Mazumdar committed Feb 8, 2018
1 parent c336057 commit dbd0db18e2b99d02e3be6d775fa7250ba10d092b
Showing with 30 additions and 1 deletion.
  1. +30 −1 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" />
)
}
];

0 comments on commit dbd0db1

Please sign in to comment.
You can’t perform that action at this time.