feat(clayui.com): Add documentation for Empty State

bryceosterhaus · May 21, 2020 · 6eedb36 · 6eedb36
1 parent 96dab75
commit 6eedb36
Show file tree

Hide file tree

Showing 3 changed files with 331 additions and 10 deletions.
diff --git a/clayui.com/content/docs/components/css-empty-state.md b/clayui.com/content/docs/components/css-empty-state.md
@@ -0,0 +1,235 @@
+---
+title: 'Empty State'
+description: 'Empty states provide users with feedback on the reasons behind the empty state and what they can do to move out of the empty state.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/empty-states/'
+---
+
+<div class="nav-toc-absolute">
+<div class="nav-toc">
+
+-   [Without Animation](#css-without-animation)
+-   [Empty State](#empty-state)
+-   [Search State](#search-state)
+-   [Success State](#success-state)
+-   [With imageProps](#with-imageprops)
+
+</div>
+</div>
+
+## Without Animation(#css-without-animation)
+
+<div class="sheet-example">
+	<div class="c-empty-state">
+		<div class="c-empty-state-title">
+			<span class="text-truncate-inline">
+				<span class="text-truncate">No results found</span>
+			</span>
+		</div>
+		<div class="c-empty-state-text">Sorry, there are no results found</div>
+		<div class="c-empty-state-footer">
+			<button class="btn btn-primary" type="button">Button</button>
+		</div>
+	</div>
+</div>
+
+```html
+<div class="c-empty-state">
+	<div class="c-empty-state-title">
+		<span class="text-truncate-inline">
+			<span class="text-truncate">No results found</span>
+		</span>
+	</div>
+	<div class="c-empty-state-text">Sorry, there are no results found</div>
+	<div class="c-empty-state-footer">
+		<button class="btn btn-primary" type="button">Button</button>
+	</div>
+</div>
+```
+
+## Empty State
+
+<div class="sheet-example">
+	<div class="c-empty-state c-empty-state-animation">
+		<div class="c-empty-state-image">
+			<div class="c-empty-state-aspect-ratio">
+				<img
+					alt="empty-state-image"
+					class="aspect-ratio-item aspect-ratio-item-fluid"
+					src="/images/empty_state.gif"
+				/>
+			</div>
+		</div>
+		<div class="c-empty-state-title">
+			<span class="text-truncate-inline"
+				><span class="text-truncate">No results found</span></span
+			>
+		</div>
+		<div class="c-empty-state-text">Sorry, there are no results found</div>
+		<div class="c-empty-state-footer">
+			<button class="btn btn-secondary" type="button">Button</button>
+		</div>
+	</div>
+</div>
+
+```html
+<div class="c-empty-state c-empty-state-animation">
+	<div class="c-empty-state-image">
+		<div class="c-empty-state-aspect-ratio">
+			<img
+				alt="empty-state-image"
+				class="aspect-ratio-item aspect-ratio-item-fluid"
+				src="/images/empty_state.gif"
+			/>
+		</div>
+	</div>
+	<div class="c-empty-state-title">
+		<span class="text-truncate-inline"
+			><span class="text-truncate">No results found</span></span
+		>
+	</div>
+	<div class="c-empty-state-text">Sorry, there are no results found</div>
+	<div class="c-empty-state-footer">
+		<button class="btn btn-secondary" type="button">Button</button>
+	</div>
+</div>
+```
+
+## Search State
+
+<div class="sheet-example">
+	<div class="c-empty-state c-empty-state-animation">
+		<div class="c-empty-state-image">
+			<div class="c-empty-state-aspect-ratio">
+				<img
+					alt="empty-state-image"
+					class="aspect-ratio-item aspect-ratio-item-fluid"
+					src="/images/search_state.gif"
+				/>
+			</div>
+		</div>
+		<div class="c-empty-state-title">
+			<span class="text-truncate-inline"
+				><span class="text-truncate">No content yet</span></span
+			>
+		</div>
+		<div class="c-empty-state-text">
+			This is a description of what the button will allow you to do
+		</div>
+	</div>
+</div>
+
+```html
+<div class="c-empty-state c-empty-state-animation">
+	<div class="c-empty-state-image">
+		<div class="c-empty-state-aspect-ratio">
+			<img
+				alt="empty-state-image"
+				class="aspect-ratio-item aspect-ratio-item-fluid"
+				src="/images/search_state.gif"
+			/>
+		</div>
+	</div>
+	<div class="c-empty-state-title">
+		<span class="text-truncate-inline"
+			><span class="text-truncate">No content yet</span></span
+		>
+	</div>
+	<div class="c-empty-state-text">
+		This is a description of what the button will allow you to do
+	</div>
+</div>
+```
+
+## Success State
+
+<div class="sheet-example">
+	<div class="c-empty-state c-empty-state-animation">
+		<div class="c-empty-state-image">
+			<div class="c-empty-state-aspect-ratio">
+				<img
+					alt="empty-state-image"
+					class="aspect-ratio-item aspect-ratio-item-fluid"
+					src="/images/success_state.gif"
+				/>
+			</div>
+		</div>
+		<div class="c-empty-state-title">
+			<span class="text-truncate-inline"
+				><span class="text-truncate">Hurray</span></span
+			>
+		</div>
+		<div class="c-empty-state-text">
+			You don't have more notifications to review
+		</div>
+	</div>
+</div>
+
+```html
+<div class="c-empty-state c-empty-state-animation">
+	<div class="c-empty-state-image">
+		<div class="c-empty-state-aspect-ratio">
+			<img
+				alt="empty-state-image"
+				class="aspect-ratio-item aspect-ratio-item-fluid"
+				src="/images/success_state.gif"
+			/>
+		</div>
+	</div>
+	<div class="c-empty-state-title">
+		<span class="text-truncate-inline"
+			><span class="text-truncate">Hurray</span></span
+		>
+	</div>
+	<div class="c-empty-state-text">
+		You don't have more notifications to review
+	</div>
+</div>
+```
+
+## With imageProps
+
+<div class="sheet-example">
+	<div class="c-empty-state c-empty-state-animation">
+		<div class="c-empty-state-image">
+			<div class="c-empty-state-aspect-ratio">
+				<img
+					alt="Alternative Text"
+					class="aspect-ratio-item aspect-ratio-item-fluid"
+					src="/images/success_state.gif"
+					title="Hello World!"
+				/>
+			</div>
+		</div>
+		<div class="c-empty-state-title">
+			<span class="text-truncate-inline"
+				><span class="text-truncate">Hurray</span></span
+			>
+		</div>
+		<div class="c-empty-state-text">
+			You don't have more notifications to review
+		</div>
+	</div>
+</div>
+
+```html
+<div class="c-empty-state c-empty-state-animation">
+	<div class="c-empty-state-image">
+		<div class="c-empty-state-aspect-ratio">
+			<img
+				alt="Alternative Text"
+				class="aspect-ratio-item aspect-ratio-item-fluid"
+				src="/images/success_state.gif"
+				title="Hello World!"
+			/>
+		</div>
+	</div>
+	<div class="c-empty-state-title">
+		<span class="text-truncate-inline"
+			><span class="text-truncate">Hurray</span></span
+		>
+	</div>
+	<div class="c-empty-state-text">
+		You don't have more notifications to review
+	</div>
+</div>
+```
diff --git a/packages/clay-empty-state/README.mdx b/packages/clay-empty-state/README.mdx
@@ -1,17 +1,39 @@
-# clay-empty-state
+---
+title: 'Empty State'
+description: 'Empty states provide users with feedback on the reasons behind the empty state and what they can do to move out of the empty state.'
+lexiconDefinition: 'https://liferay.design/lexicon/core-components/empty-states/'
+packageNpm: '@clayui/empty-state'
+sibling: 'docs/components/css-empty-state.html'
+---
 
-Empty states provide users with feedback on the reasons behind the empty state and what they can do to move out of the empty state.
+import {
+	EmptyState,
+	EmptyStateWithImage,
+} from '$packages/clay-empty-state/docs/index';
 
-## Setup
+<div class="nav-toc-absolute">
+<div class="nav-toc">
 
-1. Install `yarn`
+-   [Without Animation](#without-animation)
+-   [With Animation](#with-animation)
+-   [API](#api)
 
-2. Install local dependencies:
+</div>
+</div>
 
-```
-yarn
-```
+## Without Animation
 
-## Contribute
+By ommiting the `imgSrc` prop you will render a default Empty State component.
+Even without an animation you can still pass in `children` to the component as seen with the `ClayButton` component in this example.
 
-We'd love to get contributions from you! Please, check our [Contributing Guidelines](https://github.com/liferay/clay/blob/master/CONTRIBUTING.md) to see how you can help us improve.
+<EmptyState />
+
+## With Animation
+
+Adding an image to the component is easy, just point the `imgSrc` to the image you want to use
+
+<EmptyStateWithImage />
+
+## API
+
+<div>[APITable "clay-empty-state/src/index.tsx"]</div>
diff --git a/packages/clay-empty-state/docs/index.js b/packages/clay-empty-state/docs/index.js
@@ -0,0 +1,64 @@
+/**
+ * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// eslint-disable-next-line
+import Editor from '$clayui.com/src/components/Editor';
+import ClayButton from '@clayui/button';
+import ClayEmptyState from '@clayui/empty-state';
+import React from 'react';
+const successImage = require('@clayui/css/src/images/images/success_state.gif');
+
+const emptyStateImportsCode = `import ClayEmptyState from '@clayui/empty-state';
+import ClayButton from '@clayui/button';`;
+
+const emptyStateCode = `const Component = () => {
+	return (
+		<ClayEmptyState>
+			<ClayButton displayType="primary">{'Button'}</ClayButton>
+		</ClayEmptyState>
+	);
+}
+
+render(<Component />)`;
+
+export const EmptyState = () => {
+	const scope = {ClayButton, ClayEmptyState};
+
+	return (
+		<Editor
+			code={emptyStateCode}
+			imports={emptyStateImportsCode}
+			scope={scope}
+		/>
+	);
+};
+
+const emptyStateWithImageCodeImports = `const successImage = require('@clayui/css/src/images/images/success_state.gif');
+import ClayEmptyState from '@clayui/empty-state';`;
+
+const emptyStateWithImageCode = `const Component = () => {
+	return (
+		<ClayEmptyState
+			description="You don't have more notifications to review"
+			imgProps={{alt: 'Alternative Text', title: 'Hello World!'}}
+			imgSrc={successImage}
+			title="Hurray"
+		/>
+	);
+}
+
+render(<Component />)`;
+
+export const EmptyStateWithImage = () => {
+	const scope = {ClayEmptyState, successImage};
+
+	return (
+		<Editor
+			code={emptyStateWithImageCode}
+			imports={emptyStateWithImageCodeImports}
+			scope={scope}
+		/>
+	);
+};