From 501833eb6a30e75c90c94257bf95836d94b4f9d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Mon, 24 Jun 2024 14:29:40 +0200
Subject: [PATCH] Docs(web-react): Add documentation and demo for EmptyState
 component #DS-1310

---
 .../components/UNSTABLE_EmptyState/README.md  | 65 +++++++++++++++++++
 .../demo/EmptyStateDefault.tsx                | 17 +----
 2 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/packages/web-react/src/components/UNSTABLE_EmptyState/README.md b/packages/web-react/src/components/UNSTABLE_EmptyState/README.md
index 585afa5856..262303f8d0 100644
--- 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
index ce5fb83ab7..a5a385be3d 100644
--- 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>