Skip to content
Permalink
Browse files

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
  • Loading branch information...
erlswtshrt committed Feb 15, 2018
1 parent 3b6f741 commit 118b5208cfd420c587b9a7a3e8f61736373f5c00
Showing with 786 additions and 17 deletions.
  1. +1 −0 shared/styles/doc.scss
  2. +1 −0 ui/components/_index.scss
  3. +28 −0 ui/components/progress-bar/base/_index.scss
  4. +24 −16 ui/components/progress-bar/base/example.jsx
  5. +18 −0 ...-indicator/__tests__/__snapshots__/Base_Progress_Indicator_renders_a_base_progress_indicator.json
  6. +10 −0 ...nents/progress-indicator/__tests__/__snapshots__/Base_Progress_Indicator_renders_a_base_step.json
  7. +12 −0 .../progress-indicator/__tests__/__snapshots__/Base_Progress_Indicator_renders_a_done_base_step.json
  8. +10 −0 ...ogress-indicator/__tests__/__snapshots__/Base_Progress_Indicator_renders_an_active_base_step.json
  9. +10 −0 ...ts__/__snapshots__/Base_Progress_Indicator_renders_an_active_base_step_with_aria_describedby.json
  10. +12 −0 ...rogress-indicator/__tests__/__snapshots__/Base_Progress_Indicator_renders_an_error_base_step.json
  11. +13 −0 ...s-indicator/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_a_done_vertical_step.json
  12. +21 −0 ...or/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_a_vertical_progress_indicator.json
  13. +11 −0 ...ogress-indicator/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_a_vertical_step.json
  14. +13 −0 ..._/__snapshots__/Vertical_Progress_Indicator_renders_a_vertical_step_with_green_success_check.json
  15. +11 −0 ...ndicator/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_an_active_vertical_step.json
  16. +13 −0 ...indicator/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_an_error_vertical_step.json
  17. +71 −0 ui/components/progress-indicator/__tests__/snapshot.spec.js
  18. +1 −1 ui/components/progress-indicator/base/_index.scss
  19. +243 −0 ui/components/progress-indicator/docs.mdx
  20. +77 −0 ui/components/progress-indicator/vertical/_index.scss
  21. +186 −0 ui/components/progress-indicator/vertical/example.jsx
@@ -13,6 +13,7 @@

.docs-codeblock-example {
overflow: auto;
transform: translate3d(0, 0, 0);
}

.docs-codeblock-source {
@@ -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
@@ -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);
}
}
@@ -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-');

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -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>
));
});
@@ -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 {
Oops, something went wrong.

0 comments on commit 118b520

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