Feat(web): Stabilization of the EmptyState component #DS-1694

Author: curdaj

packages/web/src/scss/components/UNSTABLE_EmptyState/_UNSTABLE_EmptyState.scss renamed to packages/web/src/scss/components/EmptyState/EmptyState.scss

@@ -2,7 +2,7 @@
 @use 'theme' as theme;
 @use '../../tools/breakpoint';
 
-.UNSTABLE_EmptyState {
+.EmptyState {
     display: grid;
     justify-content: center;
     padding: theme.$root-padding;
@@ -13,7 +13,7 @@
     }
 }
 
-.UNSTABLE_EmptyState__section {
+.EmptyState__section {
     display: grid;
     width: 100%;
     max-width: 400px;

packages/web/src/scss/components/UNSTABLE_EmptyState/README.md renamed to packages/web/src/scss/components/EmptyState/README.md

@@ -1,36 +1,33 @@
-# UNSTABLE EmptyState
-
-⚠️ This component is UNSTABLE. It may significantly change at any point in the future.
-Please use it with caution.
+# EmptyState
 
 EmptyState component should be included at the error pages or empty state pages as the carrier of an information and links to elsewhere.
 
 EmptyState component is a composition of the following components:
 
-- [UNSTABLE_EmptyState](#unstable-emptystate)
-- [UNSTABLE_EmptyStateSection](#unstable-emptystatesection)
+- [EmptyState](#unstable-emptystate)
+- [EmptyStateSection](#unstable-emptystatesection)
 
 ## Component Composition
 
-### UNSTABLE_EmptyState
+### EmptyState
 
-The `UNSTABLE_EmptyState` component is a main container responsible for positioning the [UNSTABLE_EmptyStateSection](#unstable-emptystatesection) components or content.
+The `EmptyState` component is a main container responsible for positioning the [EmptyStateSection](#unstable-emptystatesection) components or content.
 
 ```html
-<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
-  <!-- UNSTABLE_EmptyStateSection components or content go here -->
+<div class="Stack Stack--hasSpacing EmptyState" style="--stack-spacing: var(--spirit-space-700);">
+  <!-- EmptyStateSection components or content go here -->
 </div>
 ```
 
 This component is based on the [Stack][stack] component and accepts all its variants. For more information about `Stack` usage options, see the [Stack documentation][stack].
 
-### UNSTABLE_EmptyStateSection
+### EmptyStateSection
 
-The `UNSTABLE_EmptyStateSection` component is a container for the content of each section.
+The `EmptyStateSection` component is a container for the content of each section.
 
 ```html
-<div class="Stack UNSTABLE_EmptyState__section">
-  <!-- UNSTABLE_EmptyStateSection content go here -->
+<div class="Stack EmptyState__section">
+  <!-- EmptyStateSection content go here -->
 </div>
 ```
 
@@ -39,21 +36,21 @@ This component is based on the [Stack][stack] component and accepts all its vari
 ### Full Example
 
 ```html
-<div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-700);">
-  <div class="Stack UNSTABLE_EmptyState__section">Placeholder</div>
-  <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section" style="--stack-spacing: var(--spirit-space-500);">
+<div class="Stack Stack--hasSpacing EmptyState" style="--stack-spacing: var(--spirit-space-700);">
+  <div class="Stack EmptyState__section">Placeholder</div>
+  <div class="Stack Stack--hasSpacing EmptyState__section" style="--stack-spacing: var(--spirit-space-500);">
     <h2 class="typography-heading-xsmall-bold">Headline</h2>
     <p color="secondary" class="typography-body-medium-text-regular">Description</p>
   </div>
-  <div class="Stack UNSTABLE_EmptyState__section">
+  <div class="Stack EmptyState__section">
     <div
       class="Flex Flex--noWrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch Flex--vertical Flex--tablet--horizontalReversed"
     >
       <a href="#" role="button" class="Button Button--primary Button--medium">Action</a>
       <a href="#" role="button" class="Button Button--secondary Button--medium">Action</a>
     </div>
   </div>
-  <div class="Stack UNSTABLE_EmptyState__section"><a href="#" class="link-primary">Link to something</a></div>
+  <div class="Stack EmptyState__section"><a href="#" class="link-primary">Link to something</a></div>
 </div>
 ```
 

packages/web/src/scss/components/UNSTABLE_EmptyState/_theme.scss renamed to packages/web/src/scss/components/EmptyState/_theme.scss

@@ -1,4 +1,4 @@
-{{#> web/layout/default title="Empty State" parentPageName="Components" isUnstable=true }}
+{{#> web/layout/default title="Empty State" parentPageName="Components" }}
 
 <section class="py-900 py-tablet-1000">
 
@@ -8,8 +8,8 @@ <h2 class="docs-Heading">Default</h2>
 
     <div class="docs-Stack docs-Stack--stretch">
 
-      <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState" style="--stack-spacing: var(--spirit-space-900);">
-        <div class="Stack UNSTABLE_EmptyState__section">
+      <div class="Stack Stack--hasSpacing EmptyState" style="--stack-spacing: var(--spirit-space-900);">
+        <div class="Stack EmptyState__section">
           <div class="docs-Placeholder" style="max-width: 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="#b9b9b9" stroke-dasharray="4 4"></rect>
@@ -21,20 +21,20 @@ <h2 class="docs-Heading">Default</h2>
               <p class="typography-body-small-regular text-secondary">Replace me with your own component</p></div>
           </div>
         </div>
-        <div class="Stack Stack--hasSpacing UNSTABLE_EmptyState__section"
+        <div class="Stack Stack--hasSpacing EmptyState__section"
              style="--stack-spacing: var(--spirit-space-600);">
           <h2 class="typography-heading-xsmall-bold">Headline</h2>
           <p class="typography-body-medium-regular">
             In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements
           </p>
         </div>
-        <div class="Stack UNSTABLE_EmptyState__section">
+        <div class="Stack EmptyState__section">
           <div class="Flex Flex--noWrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch Flex--vertical Flex--tablet--horizontalReversed">
             <a href="#" role="button" class="Button Button--primary Button--medium">Action</a>
             <a href="#" role="button" class="Button Button--secondary Button--medium">Action</a>
           </div>
         </div>
-        <div class="Stack UNSTABLE_EmptyState__section"><a href="#" class="link-primary">Link to something</a></div>
+        <div class="Stack EmptyState__section"><a href="#" class="link-primary">Link to something</a></div>
       </div>
 
     </div>

packages/web/src/scss/components/UNSTABLE_EmptyState/index.html renamed to packages/web/src/scss/components/EmptyState/index.html

@@ -0,0 +1 @@
+@forward 'EmptyState';

packages/web/src/scss/components/EmptyState/index.scss

@@ -11,6 +11,7 @@
 @forward 'Divider';
 @forward 'Drawer';
 @forward 'Dropdown';
+@forward 'EmptyState';
 @forward 'FieldGroup';
 @forward 'FileUploader';
 @forward 'Flex';
@@ -37,5 +38,4 @@
 @forward 'Toast';
 @forward 'Toggle';
 @forward 'Tooltip';
-@forward 'UNSTABLE_EmptyState';
 @forward 'UNSTABLE_Header';