docs(pie-docs): DSW-2333 update overview and code documentation (#1860)

* docs(pie-docs): DSW-2333 update overview and code documentation

* fix typo

Co-authored-by: Raouf <[email protected]>

* fix(pie-docs): DSW-2333 add paragraph decription

* fix after review

Co-authored-by: Xander Marjoram <[email protected]>

---------

Co-authored-by: Raouf <[email protected]>
Co-authored-by: Xander Marjoram <[email protected]>

Author: 3 people

.changeset/warm-mirrors-sell.md

@@ -0,0 +1,5 @@
+---
+"pie-docs": patch
+---
+
+[Changed] - updated `pie-divider` overview and code documentation

apps/pie-docs/src/assets/img/components/divider/anatomy.svg

@@ -1,25 +1,39 @@
 {
-  "headings": ["Prop", "Options", "Description", "Default"],
+  "headings": ["Prop", "Type", "Description", "Default"],
   "rows": [
       [
           "variant",
           {
               "type": "code",
               "item": ["\"default\"", "\"inverse\""]
           },
-          "Which variant of the divider to use.",
+          "Sets the variant of the divider.",
           {
               "type": "code",
               "item": ["\"default\""]
           }
       ],
+      [
+        "label",
+        {
+          "type": "code",
+          "item":  [
+            "string"
+          ]
+        },
+        "The label text for the divider. Label is only available for the horizontal variant.",
+        {
+          "type": "code",
+          "item": ["\"\""]
+        }
+      ],
       [
         "orientation",
         {
             "type": "code",
             "item": ["\"horizontal\"", "\"vertical\""]
         },
-        "Which orientation of the divider to use.",
+        "Sets the orientation of the divider.",
         {
             "type": "code",
             "item": ["\"horizontal\""]

apps/pie-docs/src/assets/img/components/divider/example-menu.svg

@@ -51,7 +51,8 @@ ___
 {% list {
     type: listTypes.ordered,
     items: [
-        "**Divider:** 1px line."
+        "**Divider:** 1px line.",
+        "**Label:** Text that describes the content split by the divider."
     ]
 } %}
 
@@ -103,11 +104,45 @@ ___
   {% endcontentItem %}
 {% endcontentLayout %}
 
+### Label
+
+Label is only available for the horizontal variant.
+
+{% contentLayout %}
+  {% contentItem %}
+    <h4>Without label</h4>
+    <p><br/></p>
+    {% contentPageImage {
+      src: "../../../assets/img/components/divider/modifier-type-default.svg",
+      width: 1,
+      alt: "A default divider without label."
+    } %}
+  {% endcontentItem %}
+  {% contentItem %}
+    <h4>With label</h4>
+    <p>Dividers on both sides have a minimum width of 16px.</p>
+    {% contentPageImage {
+      src: "../../../assets/img/components/divider/modifier-type-default-label.svg",
+      width: 1,
+      alt: "A default divider with label."
+    } %}
+  {% endcontentItem %}
+{% endcontentLayout %}
+
+---
+
+## Content
+
+- Ensure the label is clear and concise, giving users immediate understanding of the separated content.
+- Use sentence case.
+
 ---
 
 ## Examples
 
-Outlines the atomic level interactive elements for the component.
+### LTR examples
+
+Here are some examples of the component in a left-to-right context:
 
 {% contentLayout %}
   {% contentItem %}
@@ -126,15 +161,17 @@ Outlines the atomic level interactive elements for the component.
   {% endcontentItem %}
 {% endcontentLayout %}
 
----
-
-## Resources
+### RTL examples
 
 {% notification {
-  type: "warning",
-  message: "We’re currently working on updating our Divider documentation, please see the resources below."
+  type: "information",
+  message: "Divider stays the same in RTL."
 } %}
 
+---
+
+## Resources
+
 {% resourceTable {
     componentName: 'Divider'
 } %}