dxc-technology · GomezIvann · Jun 27, 2024 · Jun 24, 2024 · Jun 25, 2024 · Jun 25, 2024
diff --git a/website/pages/components/tooltip/index.tsx b/website/pages/components/tooltip/index.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import TooltipPageLayout from "../../../screens/components/tooltip/TooltipPageLayout";
+import TooltipCodePage from "../../../screens/components/tooltip/code/TooltipCodePage";
+
+const Index = () => {
+  return (
+    <>
+      <Head>
+        <title>Tooltip — Halstack Design System</title>
+      </Head>
+      <TooltipCodePage></TooltipCodePage>
+    </>
+  );
+};
+
+Index.getLayout = function getLayout(page: ReactElement) {
+  return <TooltipPageLayout>{page}</TooltipPageLayout>;
+};
+
+export default Index;
diff --git a/website/pages/components/tooltip/specifications.tsx b/website/pages/components/tooltip/specifications.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import TooltipPageLayout from "../../../screens/components/tooltip/TooltipPageLayout";
+import TooltipSpecsPage from "../../../screens/components/tooltip/specs/TooltipSpecsPage";
+
+const Specifications = () => {
+  return (
+    <>
+      <Head>
+        <title>Tooltip Specs — Halstack Design System</title>
+      </Head>
+      <TooltipSpecsPage></TooltipSpecsPage>
+    </>
+  );
+};
+
+Specifications.getLayout = function getLayout(page: ReactElement) {
+  return <TooltipPageLayout>{page}</TooltipPageLayout>;
+};
+
+export default Specifications;
diff --git a/website/pages/components/tooltip/usage.tsx b/website/pages/components/tooltip/usage.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import TooltipPageLayout from "../../../screens/components/tooltip/TooltipPageLayout";
+import TooltipUsagePage from "../../../screens/components/tooltip/usage/TooltipUsagePage";
+
+const Usage = () => {
+  return (
+    <>
+      <Head>
+        <title>Tooltip Usage — Halstack Design System</title>
+      </Head>
+      <TooltipUsagePage></TooltipUsagePage>
+    </>
+  );
+};
+
+Usage.getLayout = function getLayout(page: ReactElement) {
+  return <TooltipPageLayout>{page}</TooltipPageLayout>;
+};
+
+export default Usage;
diff --git a/website/screens/common/componentsList.json b/website/screens/common/componentsList.json
@@ -120,10 +120,15 @@
     "path": "/components/toggle-group",
     "status": "stable"
   },
+  {
+    "label": "Tooltip",
+    "path": "/components/tooltip",
+    "status": "experimental"
+  },
   {
     "label": "Typography",
     "path": "/components/typography",
     "status": "stable"
   },
   { "label": "Wizard", "path": "/components/wizard", "status": "stable" }
-]
+]
diff --git a/website/screens/components/tooltip/TooltipPageLayout.tsx b/website/screens/components/tooltip/TooltipPageLayout.tsx
@@ -0,0 +1,36 @@
+import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
+import PageHeading from "@/common/PageHeading";
+import TabsPageHeading from "@/common/TabsPageLayout";
+import ComponentHeading from "@/common/ComponentHeading";
+
+const TooltipPageHeading = ({ children }: { children: React.ReactNode }) => {
+  const tabs = [
+    { label: "Code", path: "/components/tooltip" },
+    { label: "Usage", path: "/components/tooltip/usage" },
+    {
+      label: "Specifications",
+      path: "/components/tooltip/specifications",
+    },
+  ];
+
+  return (
+    <DxcFlex direction="column" gap="3rem">
+      <PageHeading>
+        <DxcFlex direction="column" gap="2rem">
+          <ComponentHeading name="Tooltip" />
+          <DxcParagraph>
+            A tooltip is a descriptive or supplementary element that is
+            displayed when an object is focused or hovered over. They are
+            typically employed to enhance user experience by offering brief and
+            helpful descriptions, instructions or tips without cluttering the
+            interface.
+          </DxcParagraph>
+          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+        </DxcFlex>
+      </PageHeading>
+      {children}
+    </DxcFlex>
+  );
+};
+
+export default TooltipPageHeading;
diff --git a/website/screens/components/tooltip/code/TooltipCodePage.tsx b/website/screens/components/tooltip/code/TooltipCodePage.tsx
@@ -0,0 +1,76 @@
+import { DxcFlex, DxcParagraph, 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";
+
+const sections = [
+  {
+    title: "Props",
+    content: (
+      <DxcTable>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+            <th>Default</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>position</td>
+            <td>
+              <TableCode>'bottom' | 'top' | 'left' | 'right'</TableCode>
+            </td>
+            <td>
+              Preferred position for displaying the tooltip. It may adjust
+              automatically based on available space.
+            </td>
+            <td>'bottom'</td>
+          </tr>
+          <tr>
+            <td>label</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>Text to be displayed inside the tooltip.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>children</td>
+            <td>
+              <TableCode>React.ReactNode</TableCode>
+            </td>
+            <td>Content in which the Tooltip will be displayed.</td>
+            <td>-</td>
+          </tr>
+        </tbody>
+      </DxcTable>
+    ),
+  },
+  {
+    title: "Examples",
+    content: (
+      <DxcParagraph>
+        The examples are under development and will be available soon.
+      </DxcParagraph>
+    ),
+  },
+];
+
+const TooltipCodePage = () => {
+  return (
+    <DxcFlex direction="column" gap="4rem">
+      <QuickNavContainerLayout>
+        <QuickNavContainer
+          sections={sections}
+          startHeadingLevel={2}
+        ></QuickNavContainer>
+      </QuickNavContainerLayout>
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/tooltip/code/TooltipCodePage.tsx" />
+    </DxcFlex>
+  );
+};
+
+export default TooltipCodePage;
diff --git a/website/screens/components/tooltip/code/examples/basicUsage.ts b/website/screens/components/tooltip/code/examples/basicUsage.ts
@@ -0,0 +1,23 @@
+// 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 scope = {
+//   DxcTooltip,
+//   DxcButton,
+//   DxcInset,
+// };
+
+// export default { code, scope };
diff --git a/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx b/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx
@@ -0,0 +1,62 @@
+import {
+  DxcParagraph,
+  DxcBulletedList,
+  DxcFlex,
+} from "@dxc-technology/halstack-react";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import Figure from "@/common/Figure";
+import DocFooter from "@/common/DocFooter";
+import tooltipAnatomy from "./images/tooltip_anatomy.png";
+import tooltipSpecs from "./images/tooltip_specs.png";
+
+const sections = [
+  {
+    title: "Specifications",
+    content: (
+      <Figure caption="Tooltip design specifications">
+        <Image src={tooltipSpecs} alt="Tooltip design specifications" />
+      </Figure>
+    ),
+  },
+  {
+    title: "Anatomy",
+    content: (
+      <>
+        <Image src={tooltipAnatomy} alt="Tooltip anatomy" />
+        <DxcBulletedList type="number">
+          <DxcBulletedList.Item>Container</DxcBulletedList.Item>
+          <DxcBulletedList.Item>Label</DxcBulletedList.Item>
+          <DxcBulletedList.Item>Chevron</DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
+  {
+    title: "Design tokens",
+    content: (
+      <>
+        <DxcParagraph>
+          This component currently has no design tokens.
+        </DxcParagraph>
+      </>
+    ),
+  },
+];
+
+const TooltipSpecsPage = () => {
+  return (
+    <DxcFlex direction="column" gap="4rem">
+      <QuickNavContainerLayout>
+        <QuickNavContainer
+          sections={sections}
+          startHeadingLevel={2}
+        ></QuickNavContainer>
+      </QuickNavContainerLayout>
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx" />
+    </DxcFlex>
+  );
+};
+
+export default TooltipSpecsPage;
diff --git a/website/screens/components/tooltip/specs/images/tooltip_anatomy.png b/website/screens/components/tooltip/specs/images/tooltip_anatomy.png
diff --git a/website/screens/components/tooltip/specs/images/tooltip_specs.png b/website/screens/components/tooltip/specs/images/tooltip_specs.png
diff --git a/website/screens/components/tooltip/usage/TooltipUsagePage.tsx b/website/screens/components/tooltip/usage/TooltipUsagePage.tsx
@@ -0,0 +1,100 @@
+import {
+  DxcParagraph,
+  DxcBulletedList,
+  DxcFlex,
+} from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import DocFooter from "@/common/DocFooter";
+import positions from "./images/tooltip_positions.png";
+import Figure from "@/common/Figure";
+import Image from "@/common/Image";
+
+const sections = [
+  {
+    title: "Usage",
+    subSections: [
+      {
+        title: "Do's",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              Use tooltips when sharing valuable information as clearly and
+              concisely as possible.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Describe icons by using tooltips. Tooltips effectively provide
+              context and clarity for components without labels, delivering
+              helpful information directly to the user when they hover over or
+              focus on an icon.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Maintain consistency in the positioning of tooltips throughout the
+              user interface.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Use clear and accurate phrasing when placing the text inside a
+              tooltip.
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+      {
+        title: "Don'ts",
+        content: (
+          <DxcBulletedList>
+            <DxcBulletedList.Item>
+              Avoid using tooltips to convey crucial information. This type of
+              information must always be present, not only when the user hovers
+              over or focuses on a component.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Don't place tooltips where they might cover or obscure important
+              information or critical areas of the interface that need to remain
+              visible at all times.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Don't use tooltips to communicate error messages.
+            </DxcBulletedList.Item>
+            <DxcBulletedList.Item>
+              Avoid using tooltips in interfaces where there is sufficient space
+              to display additional information directly, without the need for
+              hiding it.
+            </DxcBulletedList.Item>
+          </DxcBulletedList>
+        ),
+      },
+    ],
+  },
+  {
+    title: "Position",
+    content: (
+      <>
+        <DxcParagraph>
+          Depending on the tooltip's placement relative to the object it
+          describes, there are four possible configurations: top, right, bottom
+          and left.
+        </DxcParagraph>
+        <Figure caption="Tooltip positions">
+          <Image src={positions} alt="Tooltip positions" />
+        </Figure>
+      </>
+    ),
+  },
+];
+
+const TooltipUsagePage = () => {
+  return (
+    <DxcFlex direction="column" gap="4rem">
+      <QuickNavContainerLayout>
+        <QuickNavContainer
+          sections={sections}
+          startHeadingLevel={2}
+        ></QuickNavContainer>
+      </QuickNavContainerLayout>
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/tooltip/usage/TooltipUsagePage.tsx" />
+    </DxcFlex>
+  );
+};
+
+export default TooltipUsagePage;
diff --git a/website/screens/components/tooltip/usage/images/tooltip_positions.png b/website/screens/components/tooltip/usage/images/tooltip_positions.png