feat(setup-assistant): Add new Setup Assistant component, new modifiers 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

Author: Ayesha Mazumdar

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