diff --git a/clayui.com/content/docs/components/css-empty-state.md b/clayui.com/content/docs/components/css-empty-state.md new file mode 100644 index 0000000000..c5a36c9cc1 --- /dev/null +++ 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/' +--- + +
+
+ +- [Without Animation](#css-without-animation) +- [Empty State](#empty-state) +- [Search State](#search-state) +- [Success State](#success-state) +- [With imageProps](#with-imageprops) + +
+
+ +## Without Animation(#css-without-animation) + +
+
+
+ + No results found + +
+
Sorry, there are no results found
+
+ +
+
+
+ +```html +
+
+ + No results found + +
+
Sorry, there are no results found
+
+ +
+
+``` + +## Empty State + +
+
+
+
+ empty-state-image +
+
+
+ No results found +
+
Sorry, there are no results found
+
+ +
+
+
+ +```html +
+
+
+ empty-state-image +
+
+
+ No results found +
+
Sorry, there are no results found
+
+ +
+
+``` + +## Search State + +
+
+
+
+ empty-state-image +
+
+
+ No content yet +
+
+ This is a description of what the button will allow you to do +
+
+
+ +```html +
+
+
+ empty-state-image +
+
+
+ No content yet +
+
+ This is a description of what the button will allow you to do +
+
+``` + +## Success State + +
+
+
+
+ empty-state-image +
+
+
+ Hurray +
+
+ You don't have more notifications to review +
+
+
+ +```html +
+
+
+ empty-state-image +
+
+
+ Hurray +
+
+ You don't have more notifications to review +
+
+``` + +## With imageProps + +
+
+
+
+ Alternative Text +
+
+
+ Hurray +
+
+ You don't have more notifications to review +
+
+
+ +```html +
+
+
+ Alternative Text +
+
+
+ Hurray +
+
+ You don't have more notifications to review +
+
+``` diff --git a/packages/clay-empty-state/README.mdx b/packages/clay-empty-state/README.mdx index 0b31717d02..04f8458f0a 100644 --- 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 +
+
-1. Install `yarn` +- [Without Animation](#without-animation) +- [With Animation](#with-animation) +- [API](#api) -2. Install local dependencies: +
+
-``` -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. + + +## With Animation + +Adding an image to the component is easy, just point the `imgSrc` to the image you want to use + + + +## API + +
[APITable "clay-empty-state/src/index.tsx"]
diff --git a/packages/clay-empty-state/docs/index.js b/packages/clay-empty-state/docs/index.js new file mode 100644 index 0000000000..5a343d34c9 --- /dev/null +++ b/packages/clay-empty-state/docs/index.js @@ -0,0 +1,64 @@ +/** + * SPDX-FileCopyrightText: © 2020 Liferay, Inc. + * 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 ( + + {'Button'} + + ); +} + +render()`; + +export const EmptyState = () => { + const scope = {ClayButton, ClayEmptyState}; + + return ( + + ); +}; + +const emptyStateWithImageCodeImports = `const successImage = require('@clayui/css/src/images/images/success_state.gif'); +import ClayEmptyState from '@clayui/empty-state';`; + +const emptyStateWithImageCode = `const Component = () => { + return ( + + ); +} + +render()`; + +export const EmptyStateWithImage = () => { + const scope = {ClayEmptyState, successImage}; + + return ( + + ); +};