Docs(web-react): Add documentation and demo for EmptyState component …

…#DS-1310
lmc-eu · Jun 26, 2024 · 501833e · 501833e
1 parent 542a98d
commit 501833e
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 15 deletions.
diff --git a/packages/web-react/src/components/UNSTABLE_EmptyState/README.md b/packages/web-react/src/components/UNSTABLE_EmptyState/README.md
@@ -2,3 +2,68 @@
 
 ⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
 Please use it with caution.
+
+EmptyState component should be included in the error pages or empty state pages as the carrier of information and links to elsewhere.
+
+EmptyState component is a composition of the following components:
+
+- [UNSTABLE_EmptyState](#unstable-emptystate)
+  - [UNSTABLE_EmptyStateSection](#unstable-emptystatesection)
+
+## UNSTABLE EmptyState
+
+The `UNSTABLE_EmptyState` component is a main container responsible for positioning the [UNSTABLE_EmptyStateSection](#unstable-emptystatesection) components or content.
+
+```jsx
+<UNSTABLE_EmptyState>
+  <!-- UNSTABLE_EmptyStateSection components or content go here -->
+</UNSTABLE_EmptyState>
+```
+
+### API
+
+The component is based on the [Stack][stack] component and accepts all its properties. For more information, see the [Stack component API][stack-api].
+
+## UNSTABLE EmptyStateSection
+
+The `UNSTABLE_EmptyStateSection` component is a container for the content of each section.
+
+```jsx
+<UNSTABLE_EmptyStateSection>
+  <!-- Content goes here -->
+</UNSTABLE_EmptyStateSection>
+```
+
+### API
+
+The component is based on the [Stack][stack] component and accepts all its properties. For more information, see the [Stack component API][stack-api].
+
+[stack]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Stack/README.md
+[stack-api]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Stack/README.md#api
+
+## Full Example
+
+```jsx
+<UNSTABLE_EmptyState spacing="space-700">
+  <UNSTABLE_EmptyStateSection>
+    <Icon name="search" isSymbol />
+  </UNSTABLE_EmptyStateSection>
+  <UNSTABLE_EmptyStateSection>
+    <Heading>Heading</Heading>
+    <Text>Description</Text>
+  </UNSTABLE_EmptyStateSection>
+  <UNSTABLE_EmptyStateSection>
+    <UNSTABLE_ActionLayout>
+      <ButtonLink href="#" color="primary">
+        Primary Action
+      </ButtonLink>
+      <ButtonLink href="#" color="secondary">
+        Secondary Action
+      </ButtonLink>
+    </UNSTABLE_ActionLayout>
+  </UNSTABLE_EmptyStateSection>
+  <UNSTABLE_EmptyStateSection>
+    <Link href="#">Link to something</Link>
+  </UNSTABLE_EmptyStateSection>
+</UNSTABLE_EmptyState>
+```
diff --git a/packages/web-react/src/components/UNSTABLE_EmptyState/demo/EmptyStateDefault.tsx b/packages/web-react/src/components/UNSTABLE_EmptyState/demo/EmptyStateDefault.tsx
@@ -10,20 +10,7 @@ import UNSTABLE_EmptyStateSection from '../UNSTABLE_EmptyStateSection';
 const EmptyStateDefault = () => (
   <UNSTABLE_EmptyState spacing="space-700">
     <UNSTABLE_EmptyStateSection>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          width: '400px',
-          padding: '48px 24px',
-          textAlign: 'center',
-          gap: '32px',
-          border: '1px dashed #3EAC98',
-          background: '#FFF',
-        }}
-      >
+      <div className="docs-Placeholder" style={{ maxWidth: '400px' }}>
         <svg xmlns="http://www.w3.org/2000/svg" width="82" height="40" viewBox="0 0 82 40" fill="none">
           <rect x="1.5" y="0.5" width="79" height="39" stroke="#3EAC98" strokeDasharray="4 4" />
           <path
@@ -33,7 +20,7 @@ const EmptyStateDefault = () => (
             strokeDasharray="4 4"
           />
         </svg>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', textAlign: 'center', color: '#3EAC98' }}>
+        <div className="docs-Placeholder__text">
           <Heading size="xsmall">Placeholder</Heading>
           <Text>Replace me with your own component</Text>
         </div>