salesforce · tanhengyeow · Mar 4, 2019
diff --git a/components/index.js b/components/index.js
@@ -237,6 +237,9 @@ export SplitViewListbox from './split-view/listbox';
 export SLDSTextarea from './textarea';
 export Textarea from './textarea';
 
+export SLDSTiles from './tiles';
+export Tiles from './tiles';
+
 export SLDSTimepicker from './time-picker';
 export Timepicker from './time-picker';
 

diff --git a/components/site-stories.js b/components/site-stories.js
@@ -26,6 +26,7 @@ const documentationSiteLiveExamples = {
 	illustration: require('@salesforce/design-system-react/components/illustration/__docs__/site-stories.js'),
 	input: require('@salesforce/design-system-react/components/input/__docs__/site-stories.js'),
 	textarea: require('@salesforce/design-system-react/components/textarea/__docs__/site-stories.js'),
+	tiles: require('@salesforce/design-system-react/components/tiles/__docs__/site-stories.js'),
 	'global-header': require('@salesforce/design-system-react/components/global-header/__docs__/site-stories.js'),
 	'global-navigation-bar': require('@salesforce/design-system-react/components/global-navigation-bar/__docs__/site-stories.js'),
 	'icon-settings': require('@salesforce/design-system-react/components/icon-settings/__docs__/site-stories.js'),

diff --git a/components/storybook-stories.js b/components/storybook-stories.js
@@ -31,6 +31,7 @@ export Dropdown from '../components/menu-dropdown/__docs__/storybook-stories';
 export IconSettings from '../components/icon-settings/__docs__/storybook-stories';
 export Input from '../components/input/__docs__/storybook-stories';
 export Teaxtarea from '../components/textarea/__docs__/storybook-stories';
+export Tiles from '../components/tiles/__docs__/storybook-stories';
 export InlineInput from '../components/forms/input/__docs__/inline/storybook-stories';
 export Search from '../components/input/__docs__/search/storybook-stories';
 export GlobalHeader from '../components/global-header/__docs__/storybook-stories';

diff --git a/components/tiles/__docs__/site-stories.js b/components/tiles/__docs__/site-stories.js
@@ -0,0 +1,16 @@
+// This object is imported into the documentation site. An example for the documentation site should be part of the pull request for the component. The object key is the kabob case of the "URL folder". In the case of `http://localhost:8080/components/app-launcher/`, `app-launcher` is the `key`. The folder name is created by `components.component` value in `package.json`. The following uses webpack's raw-loader plugin to get "text files" that will be eval()'d by CodeMirror within the documentation site on page load.
+
+/* eslint-env node */
+/* eslint-disable global-require */
+
+const siteStories = [
+	require('raw-loader!@salesforce/design-system-react/components/tiles/__examples__/default.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/tiles/__examples__/defaultWithActions.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/tiles/__examples__/icon.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/tiles/__examples__/avatar.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/tiles/__examples__/task.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/tiles/__examples__/article.jsx'),
+	require('raw-loader!@salesforce/design-system-react/components/tiles/__examples__/board.jsx'),
+];
+
+module.exports = siteStories;
diff --git a/components/tiles/__docs__/storybook-stories.jsx b/components/tiles/__docs__/storybook-stories.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { TILES } from '../../../utilities/constants';
+import IconSettings from '../../icon-settings';
+
+import Default from '../__examples__/default';
+import DefaultWithActions from '../__examples__/defaultWithActions';
+import Icon from '../__examples__/icon';
+import Avatar from '../__examples__/avatar';
+import Task from '../__examples__/task';
+import Article from '../__examples__/article';
+import Board from '../__examples__/board';
+
+storiesOf(TILES, module)
+	.addDecorator((getStory) => (
+		<div className="slds-p-around_medium">
+			<IconSettings iconPath="/assets/icons">{getStory()}</IconSettings>
+		</div>
+	))
+	.add('Default', () => <Default />)
+	.add('DefaultWithActions', () => <DefaultWithActions />)
+	.add('Icon', () => <Icon />)
+	.add('Avatar', () => <Avatar />)
+	.add('Task', () => <Task />)
+	.add('Article', () => <Article />)
+	.add('Board', () => <Board />);
diff --git a/components/tiles/__examples__/article.jsx b/components/tiles/__examples__/article.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import IconSettings from '~/components/icon-settings';
+import Tiles from '~/components/tiles';
+import TileDetails from '../details';
+
+class Example extends React.Component {
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<div className="demo-only" style={{ width: '30rem' }}>
+					<Tiles title="Company One beats Company Two to the 200-mile affordable electric car">
+						<TileDetails>
+							<p>by Steve Author</p>
+							<ul className="slds-list_horizontal slds-has-dividers_right">
+								<li className="slds-item">Breaking News</li>
+								<li className="slds-item">1 day ago</li>
+							</ul>
+						</TileDetails>
+					</Tiles>
+				</div>
+			</IconSettings>
+		);
+	}
+}
+
+Example.displayName = 'ArticleExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
+export default Example;
diff --git a/components/tiles/__examples__/avatar.jsx b/components/tiles/__examples__/avatar.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import IconSettings from '~/components/icon-settings';
+import Tiles from '~/components/tiles';
+import Avatar from '~/components/avatar'; // `~` is replaced with design-system-react at runtime
+import TileDetails from '../details';
+import TileMediaFigure from '../mediaFigure';
+import TileMediaBody from '../mediaBody';
+
+class Example extends React.Component {
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<div className="demo-only" style={{ width: '30rem' }}>
+					<Tiles variant="media">
+						<TileMediaFigure
+							mediaFigure={
+								<Avatar
+									assistiveText={{ icon: 'Avatar icon avatar' }}
+									title="Avatar entity icon"
+									variant="entity"
+								/>
+							}
+						/>
+						<TileMediaBody title="Avatar entity icon">
+							<TileDetails>
+								<dl className="slds-list_horizontal slds-wrap">
+									<dt
+										className="slds-item_label slds-text-color_weak slds-truncate"
+										title="First Label"
+									>
+										First Label:
+									</dt>
+									<dd
+										className="slds-item_detail slds-truncate"
+										title="Description for first label"
+									>
+										Description for first label
+									</dd>
+									<dt
+										className="slds-item_label slds-text-color_weak slds-truncate"
+										title="Second Label"
+									>
+										Second Label:
+									</dt>
+									<dd
+										className="slds-item_detail slds-truncate"
+										title="Description for second label"
+									>
+										Description for second label
+									</dd>
+								</dl>
+							</TileDetails>
+						</TileMediaBody>
+					</Tiles>
+				</div>
+			</IconSettings>
+		);
+	}
+}
+
+Example.displayName = 'AvatarExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
+export default Example;
diff --git a/components/tiles/__examples__/board.jsx b/components/tiles/__examples__/board.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import IconSettings from '~/components/icon-settings';
+import Tiles from '~/components/tiles';
+import TileDetails from '../details';
+
+class Example extends React.Component {
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<div className="demo-only" style={{ width: '30rem' }}>
+					<ul className="slds-has-dividers_around-space">
+						<li className="slds-item">
+							<Tiles title="Anypoint Connectors">
+								<TileDetails>
+									<p className="slds-text-heading_medium">$500,000</p>
+									<p className="slds-truncate" title="Company One">
+										Company One
+									</p>
+									<p className="slds-truncate" title="Closing 9/30/2015">
+										Closing 9/30/2015
+									</p>
+								</TileDetails>
+							</Tiles>
+						</li>
+						<li className="slds-item">
+							<Tiles title="600 Widgets">
+								<TileDetails>
+									<p className="slds-text-heading_medium">$35,000</p>
+									<p className="slds-truncate" title="Company Three">
+										Company Three
+									</p>
+									<p className="slds-truncate" title="Closing 10/12/2015">
+										Closing 10/12/2015
+									</p>
+								</TileDetails>
+							</Tiles>
+						</li>
+					</ul>
+				</div>
+			</IconSettings>
+		);
+	}
+}
+
+Example.displayName = 'ArticleExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
+export default Example;
diff --git a/components/tiles/__examples__/default.jsx b/components/tiles/__examples__/default.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import IconSettings from '~/components/icon-settings';
+import Tiles from '~/components/tiles';
+import TileDetails from '../details';
+
+class Example extends React.Component {
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<div className="demo-only" style={{ width: '30rem' }}>
+					<Tiles title="Salesforce UX">
+						<TileDetails>
+							<dl className="slds-list_horizontal slds-wrap">
+								<dt
+									className="slds-item_label slds-text-color_weak slds-truncate"
+									title="First Label"
+								>
+									First Label:
+								</dt>
+								<dd
+									className="slds-item_detail slds-truncate"
+									title="Description for first label"
+								>
+									Description for first label
+								</dd>
+								<dt
+									className="slds-item_label slds-text-color_weak slds-truncate"
+									title="Second Label"
+								>
+									Second Label:
+								</dt>
+								<dd
+									className="slds-item_detail slds-truncate"
+									title="Description for second label"
+								>
+									Description for second label
+								</dd>
+							</dl>
+						</TileDetails>
+					</Tiles>
+				</div>
+			</IconSettings>
+		);
+	}
+}
+
+Example.displayName = 'DefaultExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
+export default Example;
diff --git a/components/tiles/__examples__/defaultWithActions.jsx b/components/tiles/__examples__/defaultWithActions.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import IconSettings from '~/components/icon-settings';
+import Tiles from '~/components/tiles';
+import Dropdown from '~/components/menu-dropdown';
+import TileDetails from '../details';
+
+class Example extends React.Component {
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<div className="demo-only" style={{ width: '30rem' }}>
+					<Tiles
+						title="Salesforce UX"
+						dropdownButton={
+							<Dropdown
+								assistiveText={{ icon: 'More Options' }}
+								iconCategory="utility"
+								iconName="down"
+								iconVariant="border-filled"
+								iconSize="x-small"
+								onSelect={(value) => {
+									console.log('selected: ', value);
+								}}
+								options={[
+									{ label: 'Menu Item One', value: 'A0' },
+									{ label: 'Menu Item Two', value: 'B0' },
+									{ label: 'Menu Item Three', value: 'C0' },
+									{ type: 'divider' },
+									{ label: 'Menu Item Four', value: 'D0' },
+								]}
+							/>
+						}
+					>
+						<TileDetails>
+							<dl className="slds-list_horizontal slds-wrap">
+								<dt
+									className="slds-item_label slds-text-color_weak slds-truncate"
+									title="First Label"
+								>
+									First Label:
+								</dt>
+								<dd
+									className="slds-item_detail slds-truncate"
+									title="Description for first label"
+								>
+									Description for first label
+								</dd>
+								<dt
+									className="slds-item_label slds-text-color_weak slds-truncate"
+									title="Second Label"
+								>
+									Second Label:
+								</dt>
+								<dd
+									className="slds-item_detail slds-truncate"
+									title="Description for second label"
+								>
+									Description for second label
+								</dd>
+							</dl>
+						</TileDetails>
+					</Tiles>
+				</div>
+			</IconSettings>
+		);
+	}
+}
+
+Example.displayName = 'DefaultWithActionsExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
+export default Example;
diff --git a/components/tiles/__examples__/icon.jsx b/components/tiles/__examples__/icon.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import IconSettings from '~/components/icon-settings';
+import Tiles from '~/components/tiles';
+import Icon from '~/components/icon'; // `~` is replaced with design-system-react at runtime
+import TileDetails from '../details';
+import TileMediaFigure from '../mediaFigure';
+import TileMediaBody from '../mediaBody';
+
+class Example extends React.Component {
+	render() {
+		return (
+			<IconSettings iconPath="/assets/icons">
+				<div className="demo-only" style={{ width: '30rem' }}>
+					<Tiles variant="media">
+						<TileMediaFigure
+							mediaFigure={
+								<Icon
+									assistiveText={{ label: 'Description of icon' }}
+									category="action"
+									name="description"
+									size="small"
+								/>
+							}
+						/>
+						<TileMediaBody title="Salesforce UX">
+							<TileDetails>
+								<dl className="slds-list_horizontal slds-wrap">
+									<dt
+										className="slds-item_label slds-text-color_weak slds-truncate"
+										title="First Label"
+									>
+										First Label:
+									</dt>
+									<dd
+										className="slds-item_detail slds-truncate"
+										title="Description for first label"
+									>
+										Description for first label
+									</dd>
+									<dt
+										className="slds-item_label slds-text-color_weak slds-truncate"
+										title="Second Label"
+									>
+										Second Label:
+									</dt>
+									<dd
+										className="slds-item_detail slds-truncate"
+										title="Description for second label"
+									>
+										Description for second label
+									</dd>
+								</dl>
+							</TileDetails>
+						</TileMediaBody>
+					</Tiles>
+				</div>
+			</IconSettings>
+		);
+	}
+}
+
+Example.displayName = 'IconExample'; // export is replaced with `ReactDOM.render(<Example />, mountNode);` at runtime
+export default Example;