dxc-technology · jsuarezgonz · Mar 7, 2024 · Feb 20, 2024 · Mar 6, 2024 · Mar 6, 2024
diff --git a/lib/src/divider/types.ts b/lib/src/divider/types.ts
@@ -12,7 +12,9 @@ type Props = {
    */
   color?: "lightGrey" | "mediumGrey" | "darkGrey";
   /**
-   * Indicates whether the divider is just a decorative resource or it works as a semantic separator of content.
+   * Specifies whether the divider serves a purely decorative purpose
+   * or functions as a semantic separator for content. Additionally, it
+   * determines whether the divider is accessible to screen readers.
    */
   decorative?: boolean;
 };

diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/pages/components/divider/index.tsx b/website/pages/components/divider/index.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import DividerCodePage from "../../../screens/components/divider/code/DividerCodePage";
+import DividerPageLayout from "../../../screens/components/divider/DividerPageLayout";
+
+const Index = () => {
+  return (
+    <>
+      <Head>
+        <title>Divider — Halstack Design System</title>
+      </Head>
+      <DividerCodePage></DividerCodePage>
+    </>
+  );
+};
+
+Index.getLayout = function getLayout(page: ReactElement) {
+  return <DividerPageLayout>{page}</DividerPageLayout>;
+};
+
+export default Index;
diff --git a/website/screens/common/componentList.js b/website/screens/common/componentList.js
@@ -25,6 +25,7 @@ exports.componentsList = [
   { label: "Container", path: "/components/container", status: "Experimental" },
   { label: "Date Input", path: "/components/date-input", status: "Ready" },
   { label: "Dialog", path: "/components/dialog", status: "Ready" },
+  { label: "Divider", path: "/components/divider", status: "Experimental" },
   { label: "Dropdown", path: "/components/dropdown", status: "Ready" },
   { label: "File Input", path: "/components/file-input", status: "Ready" },
   { label: "Flex", path: "/components/flex", status: "Ready" },

diff --git a/website/screens/components/divider/DividerPageLayout.tsx b/website/screens/components/divider/DividerPageLayout.tsx
@@ -0,0 +1,28 @@
+import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
+import PageHeading from "@/common/PageHeading";
+import TabsPageHeading from "@/common/TabsPageLayout";
+import ComponentHeading from "@/common/ComponentHeading";
+
+const DividerPageHeading = ({ children }: { children: React.ReactNode }) => {
+  const tabs = [{ label: "Code", path: "/components/divider" }];
+
+  return (
+    <DxcFlex direction="column" gap="3rem">
+      <PageHeading>
+        <DxcFlex direction="column" gap="2rem">
+          <ComponentHeading name="Divider" />
+          <DxcParagraph>
+            Dividers are horizontal or vertical lines used to visually separate
+            related content or serve as a semantic delimiter within interfaces,
+            enhancing readability and providing clear visual distinctions
+            between different sections or elements.
+          </DxcParagraph>
+          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+        </DxcFlex>
+      </PageHeading>
+      {children}
+    </DxcFlex>
+  );
+};
+
+export default DividerPageHeading;
diff --git a/website/screens/components/divider/code/DividerCodePage.tsx b/website/screens/components/divider/code/DividerCodePage.tsx
@@ -0,0 +1,113 @@
+import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+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";
+import vertical from "./examples/vertical";
+
+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>orientation</td>
+            <td>
+              <TableCode>'horizontal' | 'vertical'</TableCode>
+            </td>
+            <td>The divider can be showed in horizontal or vertical.</td>
+            <td>
+              <TableCode>'horizontal'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>weight</td>
+            <td>
+              <TableCode>'regular' | 'strong'</TableCode>
+            </td>
+            <td>Modifies the thickness of the divider.</td>
+            <td>
+              <TableCode>'regular'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>length</td>
+            <td>
+              <TableCode>
+                'fixed' | '30%' | '50%' | '80%' | 'fillParent'
+              </TableCode>
+            </td>
+            <td>Modifies the length of the divider.</td>
+            <td>
+              <TableCode>'fixed'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>color</td>
+            <td>
+              <TableCode>'lightGrey' | 'mediumGrey' | 'darkGrey'</TableCode>
+            </td>
+            <td>Modifies the color of the divider.</td>
+            <td>
+              <TableCode>'mediumGrey'</TableCode>
+            </td>
+          </tr>
+          <tr>
+            <td>decorative</td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>
+              Specifies whether the divider serves a purely decorative purpose
+              or functions as a semantic separator for content. Additionally, it
+              determines whether the divider is accessible to screen readers.
+            </td>
+            <td>
+              <TableCode>true</TableCode>
+            </td>
+          </tr>
+        </tbody>
+      </DxcTable>
+    ),
+  },
+  {
+    title: "Examples",
+    subSections: [
+      {
+        title: "Basic Usage",
+        content: <Example example={basicUsage} defaultIsVisible />,
+      },
+      {
+        title: "Vertical",
+        content: <Example example={vertical} defaultIsVisible />,
+      },
+    ],
+  },
+];
+
+const DividerCodePage = () => {
+  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/divider/code/DividerCodePage.tsx" />
+    </DxcFlex>
+  );
+};
+
+export default DividerCodePage;
diff --git a/website/screens/components/divider/code/examples/basicUsage.ts b/website/screens/components/divider/code/examples/basicUsage.ts
@@ -0,0 +1,32 @@
+import {
+  DxcDivider,
+  DxcFlex,
+  DxcInset,
+  DxcParagraph,
+} from "@dxc-technology/halstack-react";
+const code = `() => {
+    return (
+      <DxcInset space="2rem">
+        <DxcFlex gap="1rem" direction="column">
+          <DxcParagraph>
+            Lorem i psum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </DxcParagraph>
+          <DxcDivider />
+          <DxcParagraph>
+            Lorem i psum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </DxcParagraph>
+        </DxcFlex>
+      </DxcInset>
+    );
+  }`;
+
+const scope = {
+  DxcDivider,
+  DxcFlex,
+  DxcInset,
+  DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/website/screens/components/divider/code/examples/vertical.ts b/website/screens/components/divider/code/examples/vertical.ts
@@ -0,0 +1,32 @@
+import {
+  DxcDivider,
+  DxcFlex,
+  DxcInset,
+  DxcParagraph,
+} from "@dxc-technology/halstack-react";
+const code = `() => {
+    return (
+      <DxcInset space="2rem">
+        <DxcFlex gap="1rem" direction="row">
+          <DxcParagraph>
+            Lorem i psum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </DxcParagraph>
+          <DxcDivider orientation="vertical" />
+          <DxcParagraph>
+            Lorem i psum dolor sit amet, consectetur adipiscing elit.
+            Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+          </DxcParagraph>
+        </DxcFlex>
+      </DxcInset>
+    );
+  }`;
+
+const scope = {
+  DxcDivider,
+  DxcFlex,
+  DxcInset,
+  DxcParagraph,
+};
+
+export default { code, scope };