Merge pull request #3076 from salesforce-ux/feature/welcome-mat

feat(welcome-mat): add welcome mat component, docs, and tests

Author: zahnster

assets/images/welcome-mat/[email protected]

@@ -239,4 +239,8 @@
   'regions/base/index',
 
   // Vertical Tabs
-  'vertical-tabs/base/index';
+  'vertical-tabs/base/index',
+
+  // Welcome Mat
+  'welcome-mat/base/index',
+  'welcome-mat/trailhead-connected/index';

assets/images/welcome-mat/[email protected]

@@ -10,30 +10,37 @@ import { UtilityIcon } from '../../icons/base/example';
 // Partial(s)
 /// ////////////////////////////////////////
 
-export let VisualPickerMediaObject = props => (
-  <a
-    href="javascript:void(0);"
-    className={classNames(
-      'slds-box slds-box_link slds-box_x-small slds-media',
-      props.className
-    )}
-  >
-    <div className="slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small">
-      <UtilityIcon className="slds-icon-text-default" symbol="knowledge_base" />
-    </div>
-    <div className="slds-media__body slds-border_left slds-p-around_small">
-      {props.children}
-    </div>
-  </a>
-);
+export let VisualPickerMediaObject = props => {
+  const symbol = props.symbol || 'knowledge_base';
+  const iconContent = props.icon || (
+    <UtilityIcon className="slds-icon-text-default" symbol={symbol} />
+  );
+
+  return (
+    <a
+      href="javascript:void(0);"
+      className={classNames(
+        'slds-box slds-box_link slds-box_x-small slds-media',
+        props.className
+      )}
+    >
+      <div className="slds-media__figure slds-media__figure_fixed-width slds-align_absolute-center slds-m-left_xx-small">
+        {iconContent}
+      </div>
+      <div className="slds-media__body slds-border_left slds-p-around_small">
+        {props.children}
+      </div>
+    </a>
+  );
+};
 
 /// ////////////////////////////////////////
 // Export
 /// ////////////////////////////////////////
 
 export default (
   <div className="demo-only" style={{ width: '24rem' }}>
-    <VisualPickerMediaObject symbol="user">
+    <VisualPickerMediaObject symbol="knowledge_base">
       <h2
         className="slds-truncate slds-text-heading_small"
         title="Share the knowledge"

test/__tests__/__snapshots__/Welcome_Mat_Base.json

@@ -0,0 +1,52 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ProgressBar } from '../progress-bar/base/example';
+
+class WelcomeMatContent extends React.Component {
+  render() {
+    const { complete, total, labelId } = this.props;
+    const completePercent = complete / total * 100;
+
+    return (
+      <div>
+        <h2 id={labelId} className="slds-welcome-mat__info-title">
+          Empower Your Agents with Service Cloud
+        </h2>
+        <p className="slds-welcome-mat__info-description">
+          Your 30-day trial is under way. Learn how easy it is to use and set up
+          Lightning Service Desk. You'll be your company's service expert by the
+          time you're done!
+        </p>
+
+        <div className="slds-welcome-mat__info-progress">
+          <p>
+            <strong>
+              {complete}/{total} Walkthroughs completed
+            </strong>
+          </p>
+        </div>
+        <ProgressBar
+          value={completePercent}
+          className="slds-progress-bar_circular"
+        />
+      </div>
+    );
+  }
+}
+
+WelcomeMatContent.propTypes = {
+  complete: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired,
+  labelId: PropTypes.string.isRequired
+};
+
+WelcomeMatContent.defaultProps = {
+  complete: 0,
+  total: 5,
+  labelId: 'welcome-mat-label-1'
+};
+
+export default WelcomeMatContent;

test/__tests__/__snapshots__/Welcome_Mat_Partially_Completed_Steps.json

@@ -0,0 +1,90 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ProgressBar } from '../progress-bar/base/example';
+import { Button } from '../buttons/base/example';
+import { ActionIcon } from '../icons/action/example';
+
+class WelcomeMatContentTrailhead extends React.Component {
+  render() {
+    const { complete, total, labelId } = this.props;
+    const completePercent = complete / total * 100;
+    const isComplete = completePercent === 100;
+
+    const badgeProgressMessage = isComplete ? (
+      <p>Cha-ching! You earned the badge.</p>
+    ) : (
+      <p>
+        {complete} of {total} modules completed
+      </p>
+    );
+
+    return (
+      <div>
+        <h2 id={labelId} className="slds-welcome-mat__info-title">
+          Hey there, Trailblazer!
+        </h2>
+        <p className="slds-welcome-mat__info-description">
+          Your 30-day trial is under way. Learn how easy it is to use and set up
+          Lightning Service Desk. You'll be your company's service expert by the
+          time you're done!
+        </p>
+
+        <div
+          className={classNames('slds-welcome-mat__info-progress', {
+            'slds-welcome-mat__info-progress_complete': isComplete
+          })}
+        >
+          <div className="slds-welcome-mat__info-badge-container">
+            <img
+              className="slds-welcome-mat__info-badge"
+              src="/assets/images/welcome-mat/[email protected]"
+              width="50"
+              height="50"
+              alt=""
+            />
+            <ActionIcon
+              title="Completed"
+              assistiveText="Completed"
+              className="slds-welcome-mat__icon-check slds-icon_xx-small"
+              symbol="check"
+            />
+          </div>
+          <p>
+            <strong>Essentials Explorer</strong>
+          </p>
+          {badgeProgressMessage}
+        </div>
+
+        {isComplete ? (
+          <Button className="slds-button slds-button_brand">
+            View on your Trailblazer Profile
+          </Button>
+        ) : (
+          <ProgressBar
+            value={completePercent}
+            className="slds-progress-bar_circular"
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+WelcomeMatContentTrailhead.propTypes = {
+  complete: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired,
+  labelId: PropTypes.string.isRequired
+};
+
+WelcomeMatContentTrailhead.defaultProps = {
+  complete: 0,
+  total: 5,
+  labelId: 'welcome-mat-label-1'
+};
+
+export default WelcomeMatContentTrailhead;