Add Tiles component

[tanhengyeow]

Fixes #1363

Hi @interactivellama ! Feedback for the initial draft would be appreciated :)

Tiles:

const propTypes = {
	/**
	 * HTML title attribute. _Tested with snapshot testing._
	 */
	title: PropTypes.string,
	/**
	 * Action overflow menu dropdown for the tile.
	 */
	dropdownButton: PropTypes.node,
	/**
	 * Different types of tile formats.
	 */
	variant: PropTypes.oneOf(['media', 'board']),
	/**
	 * The content for the Tile component.
	 */
	children: PropTypes.node.isRequired,
};

TileMediaBody:

const propTypes = {
	/**
	 * HTML title attribute. _Tested with snapshot testing._
	 */
	title: PropTypes.string.isRequired,
	/**
	 * The children for the TileMediaBody component. _Tested with Mocha framework and snapshot testing._
	 */
	children: PropTypes.node.isRequired,
};

TileMediaFigure:

const propTypes = {
	/**
	 * The media figure for this tile. It can be an icon, avatar or a task.
	 */
	mediaFigure: PropTypes.node.isRequired,
};

An example that incorporates all the sub components can be seen here.

Some screenshots for reference below.

Default:

Default with actions:

Icon:

Avatar:

Task:

Article:

Board:

Additional description

---

CONTRIBUTOR checklist (do not remove)

Please complete for every pull request

• First-time contributors should sign the Contributor License Agreement. It's a fancy way of saying that you are giving away your contribution to this project. If you haven't before, wait a few minutes and a bot will comment on this pull request with instructions.
• npm run lint:fix has been run and linting passes.
• Mocha, Jest (Storyshots), and components/component-docs.json CI tests pass (npm test).
• Tests have been added for new props to prevent regressions in the future. See readme.
• Review the appropriate Storybook stories. Open http://localhost:9001/.
• The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
• Review tests are passing in the browser. Open http://localhost:8001/.
• Review markup conforms to SLDS by looking at DOM snapshot strings.

REVIEWER checklist (do not remove)

• TravisCI tests pass. This includes linting, Mocha, Jest, Storyshots, and components/component-docs.json tests.
• Tests have been added for new props to prevent regressions in the future. See readme.
• Review the appropriate Storybook stories. Open http://localhost:9001/.
• The Accessibility panel of each Storybook story has 0 violations (aXe). Open http://localhost:9001/.
• Review tests are passing in the browser. Open http://localhost:8001/.
• Review markup conforms to SLDS by looking at DOM snapshot strings.

Required only if there are markup / UX changes

• Add year-first date and commit SHA to last-slds-markup-review in package.json and push.
• Request a review of the deployed Heroku app by the Salesforce UX Accessibility Team.
• Add year-first review date, and commit SHA, last-accessibility-review, to package.json and push.
• While the contributor's branch is checked out, run npm run local-update within locally cloned site repo to confirm the site will function correctly at the next release.

[interactivellama]

Initial thoughts:

dropdownButton should take a full dropdown component.

There is an existing record detail label/content prop in PageHeader.

https://react.lightningdesignsystem.com/components/page-headers/

const details = [
			{
				label: 'Field 1',
				content:
					'Description that demonstrates truncation with content. Description that demonstrates truncation with content.',
			},
			{ label: 'Field 2', content: 'Multiple Values' },
			{
				label: 'Field 3',
				content: <a href="javascript:void(0);">Hyperlink</a>,
			},
			{
				label: 'Field 4',
				content: 'Description (2-line truncation)',
			},
		];

It's more of a collection/options array.

I will come back to this and look at it more later this week.

[interactivellama]

Re-use of Icon component in media figure is good. I'm open to use of children instead of a data collection (array of objects). We need to allow the consumer to write less classnames, since that's one of the goals of this project.

[interactivellama]

@tanhengyeow Based on our LinkedIn messaging, I'm going to close this pull request. Feel free to re-open at any time.