dxc-technology · Mil4n0r · Aug 16, 2024 · Jul 24, 2024 · Jul 25, 2024 · Jul 25, 2024
diff --git a/apps/website/pages/components/data-grid/index.tsx b/apps/website/pages/components/data-grid/index.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import DataGridCodePage from "screens/components/data-grid/code/DataGridCodePage";
+import DataGridPageLayout from "screens/components/data-grid/DatagridPageLayout";
+
+const Usage = () => {
+  return (
+    <>
+      <Head>
+        <title>Data Grid — Halstack Design System</title>
+      </Head>
+      <DataGridCodePage />
+    </>
+  );
+};
+
+Usage.getLayout = function getLayout(page: ReactElement) {
+  return <DataGridPageLayout>{page}</DataGridPageLayout>;
+};
+
+export default Usage;
diff --git a/apps/website/pages/components/data-grid/specifications.tsx b/apps/website/pages/components/data-grid/specifications.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import DataGridSpecsPage from "screens/components/data-grid/specs/DataGridSpecsPage";
+import DataGridPageLayout from "screens/components/data-grid/DatagridPageLayout";
+
+const Specifications = () => {
+  return (
+    <>
+      <Head>
+        <title>Data Grid Specs — Halstack Design System</title>
+      </Head>
+      <DataGridSpecsPage />
+    </>
+  );
+};
+
+Specifications.getLayout = function getLayout(page: ReactElement) {
+  return <DataGridPageLayout>{page}</DataGridPageLayout>;
+};
+
+export default Specifications;
diff --git a/apps/website/pages/components/data-grid/usage.tsx b/apps/website/pages/components/data-grid/usage.tsx
@@ -0,0 +1,21 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import DataGridUsagePage from "screens/components/data-grid/usage/DataGridUsagePage";
+import DataGridPageLayout from "../../../screens/components/data-grid/DatagridPageLayout";
+
+const Usage = () => {
+  return (
+    <>
+      <Head>
+        <title>Data Grid Usage — Halstack Design System</title>
+      </Head>
+      <DataGridUsagePage />
+    </>
+  );
+};
+
+Usage.getLayout = function getLayout(page: ReactElement) {
+  return <DataGridPageLayout>{page}</DataGridPageLayout>;
+};
+
+export default Usage;
diff --git a/apps/website/screens/common/componentsList.json b/apps/website/screens/common/componentsList.json
@@ -42,6 +42,11 @@
     "path": "/components/contextual-menu",
     "status": "new"
   },
+  {
+    "label": "Data Grid",
+    "path": "/components/data-grid",
+    "status": "experimental"
+  },
   {
     "label": "Date Input",
     "path": "/components/date-input",

diff --git a/apps/website/screens/common/themes/advanced-theme.json b/apps/website/screens/common/themes/advanced-theme.json
@@ -350,6 +350,43 @@
     "iconColor": "#333333",
     "iconSize": "16px"
   },
+  "dataGrid": {
+    "rowSeparatorThickness": "1px",
+    "rowSeparatorStyle": "solid",
+    "rowSeparatorColor": "#cccccc",
+    "dataBackgroundColor": "#ffffff",
+    "dataFontFamily": "Open Sans, sans-serif",
+    "dataFontSize": "0.875rem",
+    "dataFontStyle": "normal",
+    "dataFontWeight": "400",
+    "dataFontColor": "#000000",
+    "dataFontTextTransform": "none",
+    "dataPaddingRight": "0.5rem",
+    "dataPaddingLeft": "0.5rem",
+    "dataRowHeight": "36",
+    "dataTextLineHeight": "normal",
+    "headerBackgroundColor": "#5f249f",
+    "headerBorderRadius": "4px",
+    "headerFontFamily": "Open Sans, sans-serif",
+    "headerFontSize": "0.875rem",
+    "headerFontStyle": "normal",
+    "headerFontWeight": "bold",
+    "headerFontColor": "#ffffff",
+    "headerFontTextTransform": "none",
+    "headerPaddingRight": "0.5rem",
+    "headerPaddingLeft": "0.5rem",
+    "headerRowHeight": "36",
+    "headerTextLineHeight": "normal",
+    "headerCheckboxBackgroundColorChecked": "#ffffff",
+    "headerCheckboxHoverBackgroundColorChecked": "#e6e6e6",
+    "headerCheckboxBorderColor": "#ffffff",
+    "headerCheckboxHoverBorderColor": "#ffffff",
+    "headerCheckboxCheckColor": "#5f249f",
+    "summaryRowHeight": "36",
+    "focusColor": "#0095ff",
+    "scrollBarThumbColor": "#666666",
+    "scrollBarTrackColor": "#cccccc"
+  },
   "dateInput": {
     "pickerBackgroundColor": "#ffffff",
     "pickerFontColor": "#000000",

diff --git a/apps/website/screens/common/themes/opinionated-theme.json b/apps/website/screens/common/themes/opinionated-theme.json
@@ -33,6 +33,11 @@
     "fontColor": "#333333",
     "iconColor": "#333333"
   },
+  "dataGrid": {
+    "baseColor": "#5f249f",
+    "headerFontColor": "#ffffff",
+    "cellFontColor": "#000000"
+  },
   "dateInput": {
     "baseColor": "#5f249f",
     "selectedFontColor": "#ffffff"

diff --git a/apps/website/screens/components/data-grid/DatagridPageLayout.tsx b/apps/website/screens/components/data-grid/DatagridPageLayout.tsx
@@ -0,0 +1,32 @@
+import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
+import PageHeading from "@/common/PageHeading";
+import TabsPageHeading from "@/common/TabsPageLayout";
+import ComponentHeading from "@/common/ComponentHeading";
+
+const DataGridPageHeading = ({ children }: { children: React.ReactNode }) => {
+  const tabs = [
+    { label: "Code", path: "/components/data-grid" },
+    // { label: "Usage", path: "/components/data-grid/usage" },
+    // { label: "Specifications", path: "/components/data-grid/specifications" },
+  ];
+
+  return (
+    <DxcFlex direction="column" gap="3rem">
+      <PageHeading>
+        <DxcFlex direction="column" gap="2rem">
+          <ComponentHeading name="Data Grid" />
+          <DxcParagraph>
+            A data grid is a component designed to display large volumes in a structured and organized manner. It
+            structures data into rows and columns, making it easy for users to visualize, analyze, and interact with the
+            information. The data grid also improves user experience by providing features like sorting, filtering, and
+            editing.
+          </DxcParagraph>
+          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+        </DxcFlex>
+      </PageHeading>
+      {children}
+    </DxcFlex>
+  );
+};
+
+export default DataGridPageHeading;
diff --git a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
@@ -0,0 +1,220 @@
+import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import DocFooter from "@/common/DocFooter";
+import Code from "@/common/Code";
+import Example from "@/common/example/Example";
+import TableCode, { ExtendedTableCode } from "@/common/TableCode";
+import StatusBadge from "@/common/StatusBadge";
+import basicUsage from "./examples/basicUsage";
+import selectable from "./examples/selectable";
+import expandable from "./examples/expandable";
+import hierarchical from "./examples/hierarchical";
+import hierarchicalSelectable from "./examples/hierarchicalSelectable";
+
+const columnsTypeString = `{
+  key: string;
+  label: string;
+  resizable?: boolean;
+  sortable?: boolean;
+  draggable?: boolean;
+  textEditable?: boolean;
+  summaryKey?: string;
+  alignment?: "left" | "right" | "center";
+}`;
+
+const GridRowTypeString = `{
+  [key: string]: React.ReactNode | undefined;
+}`;
+
+const HierarchyGridRowTypeString = `GridRow & {
+  childRows?: HierarchyGridRow[] | GridRow[];
+}`;
+
+const ExpandableGridRowTypeString = `GridRow & {
+  expandedContent?: React.ReactNode;
+  expandedContentHeight?: number;
+}`;
+
+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>
+              <StatusBadge status="required" />
+              columns
+            </td>
+            <td>
+              <p>
+                <Code>GridColumn[]</Code>
+                being <Code>GridColumn</Code>:
+              </p>
+              <ExtendedTableCode>{columnsTypeString}</ExtendedTableCode>
+            </td>
+            <td>
+              Each <Code>GridColumn</Code> object has the following properties:
+              <ul>
+                <li>
+                  <b>key</b>: Key that will be rendered from each row in <TableCode>rows</TableCode>.
+                </li>
+                <li>
+                  <b>label</b>: Label that will be used for the column header.
+                </li>
+                <li>
+                  <b>resizable</b>: Whether the column is resizable or not.
+                </li>
+                <li>
+                  <b>sortable</b>: Whether the column is sortable or not.
+                </li>
+                <li>
+                  <b>draggable</b>: Whether the column can be dragged or not to another position or not.
+                </li>
+                <li>
+                  <b>textEditable</b>: Whether the column cells are editable or not.
+                </li>
+                <li>
+                  <b>summaryKey</b>: Value that will be rendered from the <TableCode>summaryRow</TableCode>
+                </li>
+                <li>
+                  <b>alignment</b>: St sets the alignment inside the cells.
+                </li>
+              </ul>
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>
+              <StatusBadge status="required" />
+              rows
+            </td>
+            <td>
+              <TableCode>GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]</TableCode>
+              <p>Each one of them being in order:</p>
+              <p>
+                <ExtendedTableCode>{GridRowTypeString}</ExtendedTableCode>
+              </p>
+              <p>
+                <ExtendedTableCode>{HierarchyGridRowTypeString}</ExtendedTableCode>
+              </p>
+              <p>
+                <ExtendedTableCode>{ExpandableGridRowTypeString}</ExtendedTableCode>
+              </p>
+            </td>
+            <td>
+              List of rows that will be rendered in each cell based on the <Code>key</Code> in each column.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>expandable</td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>Whether the rows can expand or not.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>summaryRow</td>
+            <td>
+              <TableCode>GridRow</TableCode>
+            </td>
+            <td>Extra row that will be always visible.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>selectable</td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>Whether the rows are selectable or not.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>selectedRows</td>
+            <td>
+              <TableCode>{`Set<string | number>`}</TableCode>
+            </td>
+            <td>
+              Set of selected rows. This prop is mandatory if <Code>selectable</Code> is set to true. The{" "}
+              <Code>uniqueRowId</Code> key will be used to identify the each row.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>onSelectRows</td>
+            <td>
+              <TableCode>{`(selectedRows: Set<number | string>) => void`}</TableCode>
+            </td>
+            <td>
+              Function called whenever the selected values changes. This prop is mandatory if <Code>selectable</Code> is
+              set to true.The <Code>uniqueRowId</Code> key will be used to identify the rows.
+            </td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>uniqueRowId</td>
+            <td>
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              This prop indicates the unique key that can be used to identify each row. This prop is mandatory if{" "}
+              <Code>selectable</Code> is set to true, <Code>expandable</Code> is set to true or <Code>rows</Code> is of
+              type <Code>HierarchyGridRow[]</Code>.
+            </td>
+            <td>-</td>
+          </tr>
+        </tbody>
+      </DxcTable>
+    ),
+  },
+
+  {
+    title: "Examples",
+    subSections: [
+      {
+        title: "Basic usage",
+        content: <Example example={basicUsage} defaultIsVisible />,
+      },
+      {
+        title: "Selectable data grid",
+        content: <Example example={selectable} defaultIsVisible />,
+      },
+      {
+        title: "Expandable data grid",
+        content: <Example example={expandable} defaultIsVisible />,
+      },
+      {
+        title: "Hierarchical data grid",
+        content: <Example example={hierarchical} defaultIsVisible />,
+      },
+      {
+        title: "Hierarchical and selectable data grid",
+        content: <Example example={hierarchicalSelectable} defaultIsVisible />,
+      },
+    ],
+  },
+];
+
+const DataGridCodePage = () => {
+  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/data-grid/code/DataGridCodePage.tsx" />
+    </DxcFlex>
+  );
+};
+
+export default DataGridCodePage;