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

ui/components/_index.scss

@@ -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';

ui/components/buttons/base/example.jsx

@@ -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

ui/components/cards/base/_index.scss

@@ -12,7 +12,7 @@
 *
 * @name base
 * @selector .slds-card
-* @restrict article, div
+* @restrict article, div, section
 * @variant
 */
 .slds-card {

ui/components/checkbox-button-group/base/_index.scss

@@ -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
    */

ui/components/checkbox-toggle/base/example.jsx

@@ -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

ui/components/color-picker/index.jsx

@@ -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 />

ui/components/progress-bar/base/example.jsx

@@ -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>
   );
 };