Skip to content

Commit 3e94f26

Browse files
aswinshenoyaswinshenoy
committed
Add Progress Bar Entry in Component Docs
1 parent 3725d3b commit 3e94f26

File tree

2 files changed

+173
-6
lines changed

2 files changed

+173
-6
lines changed

‎components/component-docs.json

Lines changed: 162 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10615,7 +10615,166 @@
1061510615
"SLDS-component-path": "/components/progress-indicator",
1061610616
"dependencies": []
1061710617
},
10618-
"progress-ring": {
10618+
"progress-bar": {
10619+
"description": "A progress bar component communicates to the user the progress of a particular process.",
10620+
"methods": [
10621+
{
10622+
"name": "getId",
10623+
"docblock": "Get the progress bar's HTML id. Generate a new one if no ID present.",
10624+
"modifiers": [],
10625+
"params": [],
10626+
"returns": null,
10627+
"description": "Get the progress bars's HTML id. Generate a new one if no ID present."
10628+
},
10629+
{
10630+
"name": "getRadius",
10631+
"docblock": "Get the progress bar's border radius.",
10632+
"modifiers": [],
10633+
"params": [],
10634+
"returns": null,
10635+
"description": "Get the progress bar's border radius."
10636+
},
10637+
{
10638+
"name": "getColor",
10639+
"docblock": "Get the progress bar's fill color.",
10640+
"modifiers": [],
10641+
"params": [],
10642+
"returns": null,
10643+
"description": "Get the progress bar's fill color."
10644+
},
10645+
{
10646+
"name": "getThickness",
10647+
"docblock": "Get the progress bar's thickness.",
10648+
"modifiers": [],
10649+
"params": [],
10650+
"returns": null,
10651+
"description": "Get the progress bar's thickness."
10652+
},
10653+
{
10654+
"name": "getDescription",
10655+
"docblock": "Get the the description for progress bar. Doesn't show description if label is not given.",
10656+
"modifiers": [],
10657+
"params": [],
10658+
"returns": {
10659+
"description": "Progress Bar Description Container",
10660+
"type": {
10661+
"name": "string"
10662+
}
10663+
},
10664+
"description": "Get the the description for progress bar. Doesn't show description if label is not given."
10665+
},
10666+
{
10667+
"name": "progressPercent",
10668+
"docblock": "Progress Percentage as a string\n@returns {string} Percentage",
10669+
"modifiers": [],
10670+
"params": [],
10671+
"returns": {
10672+
"description": "Percentage",
10673+
"type": {
10674+
"name": "string"
10675+
}
10676+
},
10677+
"description": "Percentage as a string"
10678+
}
10679+
],
10680+
"props": {
10681+
"id": {
10682+
"type": {
10683+
"name": "string"
10684+
},
10685+
"required": false,
10686+
"description": "HTML id for component."
10687+
},
10688+
"className": {
10689+
"type": {
10690+
"name": "union",
10691+
"value": [
10692+
{
10693+
"name": "array"
10694+
},
10695+
{
10696+
"name": "object"
10697+
},
10698+
{
10699+
"name": "string"
10700+
}
10701+
]
10702+
},
10703+
"required": false,
10704+
"description": "CSS classes to be added to tag with `.slds-progress-bar`. Uses `classNames` [API](https://github.com/JedWatson/classnames)."
10705+
},
10706+
"label": {
10707+
"type": {
10708+
"name": "string"
10709+
},
10710+
"required": false,
10711+
"description": "Label for the progress bar."
10712+
},
10713+
"radius": {
10714+
"type": {
10715+
"name": "enum",
10716+
"value": [
10717+
{
10718+
"value": "'circular'",
10719+
"computed": false
10720+
}
10721+
]
10722+
},
10723+
"required": false,
10724+
"description": "Border radius of Progress Bar."
10725+
},
10726+
"color": {
10727+
"type": {
10728+
"name": "enum",
10729+
"value": [
10730+
{
10731+
"value": "'success'",
10732+
"computed": false
10733+
}
10734+
]
10735+
},
10736+
"required": false,
10737+
"description": "Color for filling the progress bar"
10738+
},
10739+
"thickness": {
10740+
"type": {
10741+
"name": "enum",
10742+
"value": [
10743+
{
10744+
"value": "'x-small'",
10745+
"computed": false
10746+
},
10747+
{
10748+
"value": "'small'",
10749+
"computed": false
10750+
},
10751+
{
10752+
"value": "'medium'",
10753+
"computed": false
10754+
},
10755+
{
10756+
"value": "'large'",
10757+
"computed": false
10758+
}
10759+
]
10760+
},
10761+
"required": false,
10762+
"description": "Thickness of the progress bar"
10763+
},
10764+
"value": {
10765+
"type": {
10766+
"name": "number"
10767+
},
10768+
"required": true,
10769+
"description": "Percentage of progress completion, ranging [0, 100]."
10770+
}
10771+
},
10772+
"route": "progress-bars",
10773+
"display-name": "Progress Bars",
10774+
"SLDS-component-path": "/components/progress-bar",
10775+
"dependencies": []
10776+
},
10777+
"progress-ring": {
1061910778
"description": "Customizable and configurable progress ring. Will display progress in a circular progress bar factor, and is capable of displaying iconography inside of the ring structure.",
1062010779
"methods": [
1062110780
{
@@ -10640,7 +10799,7 @@
1064010799
"description": "Percentage",
1064110800
"type": {
1064210801
"name": "decimal"
10643-
}
10802+
}null
1064410803
},
1064510804
"description": "Percentage as a decimal"
1064610805
},
@@ -13742,4 +13901,4 @@
1374213901
"SLDS-component-path": "/components/vertical-navigation",
1374313902
"dependencies": []
1374413903
}
13745-
}
13904+
}

‎components/progress-bar/index.jsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,13 @@ import React from 'react';
77
import PropTypes from 'prop-types';
88
import classNames from 'classnames';
99

10+
// ### shortid
11+
// [npmjs.com/package/shortid](https://www.npmjs.com/package/shortid)
12+
// shortid is a short, non-sequential, url-friendly, unique id generator
13+
import shortid from 'shortid';
1014
import { PROGRESS_BAR } from '../../utilities/constants';
1115

16+
1217
const propTypes = {
1318
/**
1419
* HTML id for component.
@@ -50,19 +55,22 @@ const defaultProps = {};
5055
* A progress bar component communicates to the user the progress of a particular process
5156
*/
5257
class ProgressBar extends React.Component {
58+
componentWillMount() {
59+
this.generatedId = shortid.generate();
60+
}
5361
/**
5462
* ID as a string
5563
* @returns {string} id
5664
*/
5765
getId() {
58-
return this.props.id;
66+
return this.props.id || this.generatedId;
5967
}
6068

6169
/**
6270
* Border Radius as String
6371
* @returns {string} Border
6472
*/
65-
getBorder() {
73+
getRadius() {
6674
if (this.props.radius) {
6775
return `slds-progress-bar_${this.props.radius}`;
6876
}
@@ -127,7 +135,7 @@ class ProgressBar extends React.Component {
127135
<div
128136
className={classNames(
129137
'slds-progress-bar',
130-
this.getBorder(),
138+
this.getRadius(),
131139
this.getThickness(),
132140
this.props.className
133141
)}

0 commit comments

Comments
 (0)