Merge pull request #2034 from dxc-technology/Mil4n0r/tooltip_example

Added tooltip example to docs

Author: GomezIvann

.github/workflows/publish-next.yml

@@ -35,7 +35,7 @@ jobs:
         run: npm install
 
       - name: Build library and website
-        run: npm run build
+        run: SITE_VERSION=next npm run build
 
       - name: Test library
         run: npm run test

apps/website/screens/common/componentsList.json

@@ -123,7 +123,7 @@
   {
     "label": "Tooltip",
     "path": "/components/tooltip",
-    "status": "experimental"
+    "status": "new"
   },
   {
     "label": "Typography",

apps/website/screens/components/tooltip/code/TooltipCodePage.tsx

@@ -1,8 +1,10 @@
-import { DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
+import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import DocFooter from "@/common/DocFooter";
 import TableCode from "@/common/TableCode";
+import basicUsage from "./examples/basicUsage";
+import Example from "@/common/example/Example";
 
 const sections = [
   {
@@ -51,11 +53,12 @@ const sections = [
   },
   {
     title: "Examples",
-    content: (
-      <DxcParagraph>
-        The examples are under development and will be available soon.
-      </DxcParagraph>
-    ),
+    subSections: [
+      {
+        title: "Basic Usage",
+        content: <Example example={basicUsage} defaultIsVisible />,
+      },
+    ],
   },
 ];
 

apps/website/screens/components/tooltip/code/examples/basicUsage.ts

@@ -1,23 +1,23 @@
-// import {
-//   DxcTooltip,
-//   DxcButton,
-//   DxcInset,
-// } from "@dxc-technology/halstack-react";
+import {
+  DxcTooltip,
+  DxcButton,
+  DxcInset,
+} from "@dxc-technology/halstack-react";
 
-// const code = `() => {
-//     return (
-//       <DxcInset space="2rem">
-//         <DxcTooltip label="Tooltip Test" position="top">
-//           <DxcButton label="Hoverable button" />
-//         </DxcTooltip>
-//       </DxcInset>
-//     );
-//   }`;
+const code = `() => {
+    return (
+      <DxcInset space="2rem">
+        <DxcTooltip label="Tooltip Test" position="top">
+          <DxcButton label="Hoverable button" />
+        </DxcTooltip>
+      </DxcInset>
+    );
+  }`;
 
-// const scope = {
-//   DxcTooltip,
-//   DxcButton,
-//   DxcInset,
-// };
+const scope = {
+  DxcTooltip,
+  DxcButton,
+  DxcInset,
+};
 
-// export default { code, scope };
+export default { code, scope };