Add Welcome Mat Component

[aswinshenoy]

Implement the Welcome Mat component according to spec: https://www.lightningdesignsystem.com/components/welcome-mat/

I am currently working on the same and will post an initial prop proposal soon.

[aswinshenoy]

Here is my initial prop proposal for the component, what do you think?

WelcomeMat

Name	Type	Description
ClassName	array/object/string	Additional Class Names
infoOnly	boolean	Whether the steps are informational rather than actionable. Defaults to false.
title	string	Title for the Welcome Mat. Required
description	string	Description for the Welcome Mat. Required
badgeName	string	Name of the badge to be won on completion. Optional
badgeIcon	string	URL to the image of the badge to be won on completion. Optional
children	Element[ ]	Welcome Mat steps
learnMoreURL	string	URL to learn more.

Step

Name	Type	Description
icon	string	Name of Icon to use for the step
title	string	Title for the Step
description	string	Description for the step
onClick	string	Link to the action
isCompleted	string	Whether the step is completed

Here is a basic example using these specs -

<WelcomeMat
    title="The Lightning Experience is here!"
    description="Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce."
>
    <Step 
            icon="animal_and_nature"
            title="Welcome to Salesforce!"
           description="Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."
            isCompleted
   />
    <Step 
            icon="call"
            title="Learn About OpenCTI"
            description="Lorem ipsum dolor sit amet, lorem ipsum dolor sit amet."
   />
</WelcomeMat>

[interactivellama]

I will try to get you prop feedback tomorrow.

[interactivellama]

This is what I'm thinking initially. I'll circle back again.

labels

• description
• doNotShowAgain
• title
  doNotShowAgainCheckbox= <Checkbox />
  onRenderInfoActions={() => (<Button variant=brand label="Learn more"/>)}
  infoBadge=<WelcomeMatInfoBadge />
  progressBar
  variant: splash, info-only, trailhead-connected,

children:
~ (maybe this is VisualPickerLink underneath?)~
(maybe this is VisualPickerLink underneath?)
<WelcomeMatTile complete: bool>

<WelcomeMatInfoBadge />

• assistiveText
  • completed
• image/icon?
• completed: bool
• children: <p><strong>Lightning Explorer</strong></p>