Skip to content
Permalink
Browse files

feat(setup-assistant): Add new Setup Assistant component, new modifie…

…rs for progress ring and indicator (#3144)

Add 'slds-progress-ring_large' modifier to make a 32x32 ring
Add 'slds-progress-ring_active-step' to make progress ring blue
Add 'slds-progress__list-bordered' to add borders b/w vertical progress indicator steps
  • Loading branch information...
Ayesha Mazumdar
Ayesha Mazumdar committed Mar 16, 2018
1 parent e288bc9 commit 26be78c439d1a4ab7342bb39d0dddee727bbde33
Showing with 1,620 additions and 204 deletions.
  1. +4 −1 ui/components/_index.scss
  2. +13 −8 ui/components/buttons/base/example.jsx
  3. +1 −1 ui/components/cards/base/_index.scss
  4. +1 −1 ui/components/checkbox-button-group/base/_index.scss
  5. +47 −29 ui/components/checkbox-toggle/base/example.jsx
  6. +1 −1 ...ts/color-picker/__tests__/__snapshots__/renders_a_base_color_picker_with_custom_tab_selected.json
  7. +1 −1 .../__tests__/__snapshots__/renders_a_base_color_picker_with_custom_tab_selected_in_error_state.json
  8. +1 −1 ...mponents/color-picker/__tests__/__snapshots__/renders_a_base_color_picker_with_summary_error.json
  9. +1 −1 ui/components/color-picker/__tests__/__snapshots__/renders_a_custom_only_color_picker.json
  10. +1 −1 ui/components/color-picker/__tests__/__snapshots__/renders_a_default_base_color_picker.json
  11. +1 −1 ui/components/color-picker/__tests__/__snapshots__/renders_a_predefined_only_color_picker.json
  12. +1 −1 ui/components/color-picker/__tests__/__snapshots__/renders_an_opened_custom_only_color_picker.json
  13. +1 −1 ...s/color-picker/__tests__/__snapshots__/renders_an_opened_custom_only_color_picker_with_error.json
  14. +1 −1 ...mponents/color-picker/__tests__/__snapshots__/renders_an_opened_predefined_only_color_picker.json
  15. +0 −1 ui/components/color-picker/index.jsx
  16. +17 −5 ui/components/progress-bar/base/example.jsx
  17. +4 −3 ...s-indicator/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_a_done_vertical_step.json
  18. +11 −14 ...or/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_a_vertical_progress_indicator.json
  19. +25 −0 ...__snapshots__/Vertical_Progress_Indicator_renders_a_vertical_progress_indicator_with_borders.json
  20. +25 −0 ...snapshots__/Vertical_Progress_Indicator_renders_a_vertical_progress_indicator_with_green_bar.json
  21. +25 −0 ...shots__/Vertical_Progress_Indicator_renders_a_vertical_progress_indicator_with_some_progress.json
  22. +4 −4 ...ogress-indicator/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_a_vertical_step.json
  23. +4 −3 ..._/__snapshots__/Vertical_Progress_Indicator_renders_a_vertical_step_with_green_success_check.json
  24. +4 −3 ...ndicator/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_an_active_vertical_step.json
  25. +4 −3 ...indicator/__tests__/__snapshots__/Vertical_Progress_Indicator_renders_an_error_vertical_step.json
  26. +28 −1 ui/components/progress-indicator/__tests__/snapshot.spec.js
  27. +1 −1 ui/components/progress-indicator/docs.mdx
  28. +78 −17 ui/components/progress-indicator/vertical/_index.scss
  29. +106 −69 ui/components/progress-indicator/vertical/example.jsx
  30. +32 −0 ui/components/progress-ring/base/_index.scss
  31. +13 −3 ui/components/progress-ring/index.jsx
  32. +1 −1 ui/components/scoped-notifications/base/example.jsx
  33. +100 −0 ui/components/setup-assistant/SetupAssistantStepDetail.jsx
  34. +131 −0 ui/components/setup-assistant/SetupAssistantStepSummary.jsx
  35. +14 −0 .../setup-assistant/__tests__/__snapshots__/Setup_Assistant_renders_a_base_setup_assistant_step.json
  36. +26 −0 ...up-assistant/__tests__/__snapshots__/Setup_Assistant_renders_a_complete_setup_assistant_step.json
  37. +15 −0 ...stant/__tests__/__snapshots__/Setup_Assistant_renders_a_setup_assistant_step_with_a_duration.json
  38. +16 −0 ...__snapshots__/Setup_Assistant_renders_a_setup_assistant_step_with_a_link_action_and_duration.json
  39. +27 −0 ...ts__/__snapshots__/Setup_Assistant_renders_a_setup_assistant_step_with_the_title_as_a_button.json
  40. +27 −0 ...ts__/Setup_Assistant_renders_a_setup_assistant_step_with_title_button_and_aria_expanded_true.json
  41. +52 −0 ui/components/setup-assistant/__tests__/__snapshots__/Setup_Assistant_renders_a_step_detail.json
  42. +22 −0 ...assistant/__tests__/__snapshots__/Setup_Assistant_renders_an_in_progess_setup_assistant_step.json
  43. +22 −0 ...s__/Setup_Assistant_renders_an_in_progess_setup_assistant_step_with_progress_ring_percentage.json
  44. +22 −0 ...assistant/__tests__/__snapshots__/Setup_Assistant_renders_an_incomplete_setup_assistant_step.json
  45. +77 −0 ui/components/setup-assistant/__tests__/index.spec.js
  46. +15 −0 ui/components/setup-assistant/_doc.scss
  47. +86 −0 ui/components/setup-assistant/base/_index.scss
  48. +209 −0 ui/components/setup-assistant/base/example.jsx
  49. +74 −0 ui/components/setup-assistant/docs.mdx
  50. +175 −0 ui/components/setup-assistant/index.jsx
  51. +6 −4 ...summary-detail/__tests__/__snapshots__/Summary_Detail_renders_a_closed_summary_detail_action.json
  52. +6 −4 .../summary-detail/__tests__/__snapshots__/Summary_Detail_renders_an_open_summary_detail_action.json
  53. +3 −2 ...s/summary-detail/__tests__/__snapshots__/Summary_Detail_renders_the_detail_content_when_open.json
  54. +12 −3 ui/components/summary-detail/__tests__/index.spec.js
  55. +26 −14 ui/components/summary-detail/base/example.jsx
@@ -246,4 +246,7 @@
'welcome-mat/trailhead-connected/index',

// Summary Detail
'summary-detail/base/index';
'summary-detail/base/index',

// Setup Assistant
'setup-assistant/base/index';
@@ -5,14 +5,19 @@ import React from 'react';
import SvgIcon from '../../../shared/svg-icon';
import classNames from 'classnames';

export let Button = props => (
<button
className={classNames('slds-button', props.className)}
disabled={props.disabled}
>
{props.children}
</button>
);
export let Button = props => {
const { className, disabled, ...rest } = props;

return (
<button
className={classNames('slds-button', className)}
disabled={disabled}
{...rest}
>
{props.children}
</button>
);
};

/// ////////////////////////////////////////
// Export
@@ -12,7 +12,7 @@
*
* @name base
* @selector .slds-card
* @restrict article, div
* @restrict article, div, section
* @variant
*/
.slds-card {
@@ -35,7 +35,7 @@
/**
* Creates a custom styled checkbox
*
* @selector .slds-checkbox_faux
* @selector .slds-checkbox_button .slds-checkbox_faux
* @restrict .slds-checkbox__label span, .slds-checkbox_button__label span
* @required
*/
@@ -3,17 +3,12 @@

import React from 'react';
import classNames from 'classnames';
import _ from '../../../shared/helpers';

/// ////////////////////////////////////////
// Partial(s)
/// ////////////////////////////////////////

let Demo = props => (
<div className="demo-only slds-size_1-of-2" {...props}>
{props.children}
</div>
);

let Fieldset = props => (
<fieldset className={classNames('form--element', props.className)}>
<legend className="slds-form-element__legend slds-form-element__label">
@@ -41,24 +36,28 @@ export let Label = props => (
);

export let FauxLabel = props => (
<span className="slds-form-element__label slds-m-bottom_none">
<span
className={classNames('slds-form-element__label', 'slds-m-bottom_none', {
'slds-assistive-text': props.isBare
})}
>
{props.children}
</span>
);

export let Checkbox = props => (
<input
name="checkbox"
name={props.uniqueId}
type="checkbox"
disabled={props.disabled}
defaultChecked={props.checked}
aria-describedby="toggle-desc"
aria-describedby={props.uniqueId}
/>
);

export let Toggle = props => (
<span
id="toggle-desc"
id={props.uniqueId}
className={classNames('slds-checkbox_faux_container', props.className)}
aria-live="assertive"
>
@@ -75,41 +74,60 @@ export let Toggle = props => (
/// ////////////////////////////////////////
// State Constructor(s)
/// ////////////////////////////////////////
export let CheckboxToggle = props => (
<Demo>

export const Context = props => (
<div className="demo-only slds-size_1-of-2" {...props}>
{props.children}
</div>
);

export let CheckboxToggle = props => {
const uniqueId = _.uniqueId('checkbox-toggle-');

return (
<LabelWrapper>
<Label>
<FauxLabel>Toggle Label</FauxLabel>
<Checkbox />
<Toggle />
<FauxLabel isBare={props.isBare}>
{props.title || 'Toggle Label'}
</FauxLabel>
<Checkbox
uniqueId={uniqueId}
checked={props.checked}
disabled={props.disabled}
/>
<Toggle uniqueId={uniqueId} />
</Label>
</LabelWrapper>
</Demo>
);
);
};

export let CheckboxToggleChecked = props => {
const uniqueId = _.uniqueId('checkbox-toggle-');

export let CheckboxToggleChecked = props => (
<Demo>
return (
<LabelWrapper>
<Label>
<FauxLabel>Toggle Label</FauxLabel>
<Checkbox checked />
<Toggle />
<Checkbox uniqueId={uniqueId} checked />
<Toggle uniqueId={uniqueId} />
</Label>
</LabelWrapper>
</Demo>
);
);
};

export let CheckboxToggleDisabled = props => (
<Demo>
export let CheckboxToggleDisabled = props => {
const uniqueId = _.uniqueId('checkbox-toggle-');

return (
<LabelWrapper>
<Label>
<FauxLabel>Toggle Label</FauxLabel>
<Checkbox disabled />
<Toggle />
<Checkbox uniqueId={uniqueId} disabled />
<Toggle uniqueId={uniqueId} />
</Label>
</LabelWrapper>
</Demo>
);
);
};

/// ////////////////////////////////////////
// Export

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.
@@ -81,7 +81,6 @@ export const ColorPickerSummary = props => {

<Button
className="slds-color-picker__summary-button slds-button_icon slds-button_icon-more"
aria-haspopup
title="Choose Color"
>
<Swatch color="hsl(220, 46%, 55%)" suppressAssistiveText />
@@ -26,7 +26,12 @@ export const ProgressBar = props => {
aria-labelledby={props['aria-labelledby']}
role="progressbar"
>
<span className="slds-progress-bar__value" style={progressBarStyle}>
<span
className={classNames('slds-progress-bar__value', {
'slds-progress-bar__value_success': props.isSuccess
})}
style={progressBarStyle}
>
<span className="slds-assistive-text">
Progress: {`${props.value}%`}
</span>
@@ -39,15 +44,22 @@ export const ProgressBarDescriptive = props => {
const labelUniqueId = _.uniqueId('progress-bar-label-id-');

return (
<div className={classNames(props.className)}>
<div className={props.className}>
<div
className="slds-grid slds-grid_align-spread slds-text-color_weak slds-p-bottom_x-small"
className="slds-grid slds-grid_align-spread slds-p-bottom_x-small"
id={labelUniqueId}
>
<span>{props.label}</span>
<span aria-hidden="true">{`${props.value}%`}</span>
<span aria-hidden="true">
<strong>{`${props.value}% Complete`}</strong>
</span>
</div>
<ProgressBar value={props.value} aria-labelledby={labelUniqueId} />
<ProgressBar
className={classNames(props.barClassName)}
value={props.value}
aria-labelledby={labelUniqueId}
isSuccess={props.isSuccess}
/>
</div>
);
};
Oops, something went wrong.

0 comments on commit 26be78c

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