Merge pull request #1823 from dxc-technology/Mil4n0r/status-light-examples

Added StatusLight examples to Website

Author: Jialecl

website/screens/components/status-light/code/StatusLightCodePage.tsx

@@ -3,6 +3,8 @@ import QuickNavContainer from "@/common/QuickNavContainer";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import DocFooter from "@/common/DocFooter";
 import TableCode from "@/common/TableCode";
+import Example from "@/common/example/Example";
+import basicUsage from "./examples/basicUsage";
 
 const sections = [
   {
@@ -38,9 +40,7 @@ const sections = [
             <td>
               <TableCode>string</TableCode>
             </td>
-            <td>
-              An auxiliar text that will add some context to the status.
-            </td>
+            <td>An auxiliar text that will add some context to the status.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -52,7 +52,9 @@ const sections = [
               Size of the component. Should be defined based on its importance
               and/or available space.
             </td>
-            <td><TableCode>'medium'</TableCode></td>
+            <td>
+              <TableCode>'medium'</TableCode>
+            </td>
           </tr>
         </tbody>
       </DxcTable>
@@ -62,8 +64,8 @@ const sections = [
     title: "Examples",
     subSections: [
       {
-        title: "Basic Usage",
-        content: <p>Examples are not available yet, they will be added soon.</p>
+        title: "Basic usage",
+        content: <Example example={basicUsage} defaultIsVisible />,
       },
     ],
   },

website/screens/components/status-light/code/examples/basicUsage.ts

@@ -0,0 +1,19 @@
+import {
+  DxcStatusLight,
+  DxcInset,
+} from "@dxc-technology/halstack-react";
+
+const code = `() => {
+    return (
+      <DxcInset space="2rem">
+        <DxcStatusLight label="Accepted" mode="success" size="large" />
+      </DxcInset>
+    );
+  }`;
+
+const scope = {
+  DxcInset,
+  DxcStatusLight,
+};
+
+export default { code, scope };