Merge pull request #1831 from dxc-technology/Mil4n0r/small_table_variant-doc

Added small table variant website doc

Author: raquelarrojo

lib/src/table/types.ts

@@ -57,8 +57,8 @@ type Props = {
   margin?: Space | Margin;
   /**
    * Determines the visual style and layout
-   * - "default": Table with big spacing, applicable to most cases.
-   * - "reduced": Smaller table with minimal spacing for high density information.
+   * - "default": Default table size.
+   * - "reduced": More compact table with less spacing for high density information.
    */
   mode?: "default" | "reduced";
 };

website/package-lock.json

@@ -8,6 +8,7 @@ import basicUsage from "./examples/basicUsage";
 import sortable from "./examples/sortable";
 import TableCode from "@/common/TableCode";
 import StatusTag from "@/common/StatusTag";
+import reduced from "./examples/reduced";
 
 const sections = [
   {
@@ -77,6 +78,30 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusTag status="Information">New</StatusTag>mode
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>'default' | 'reduced'</TableCode>
+            </td>
+            <td>
+              The available table modes:
+              <ul>
+              <li>
+                  <b>default</b>: Default table size.
+                </li>
+                <li>
+                  <b>reduced</b>: More compact table with less spacing for high density information.
+                </li>
+              </ul>
+            </td>
+            <td>
+              <TableCode>'default'</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>showGoToPage</td>
             <td>
@@ -160,6 +185,12 @@ const sections = [
         title: "Basic usage",
         content: <Example example={basicUsage} defaultIsVisible />,
       },
+      {
+        title: "Reduced usage",
+        content: (
+          <Example example={reduced} defaultIsVisible />
+        ),
+      },
       {
         title: "Sortable",
         content: <Example example={sortable} defaultIsVisible />,

website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx

@@ -1,14 +1,9 @@
 import React from "react";
 
 export const deleteIcon = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="24"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="white"
-  >
-    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
+  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+    <path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
     <path d="M0 0h24v24H0z" fill="none" />
   </svg>
 );
+

website/screens/components/resultset-table/code/examples/Icons.tsx

@@ -0,0 +1,79 @@
+import {
+  DxcResultsetTable,
+  DxcInset,
+} from "@dxc-technology/halstack-react";
+import { deleteIcon } from "./Icons";
+
+const code = `() => {
+  const columns = [
+    { displayValue: "Id"},
+    { displayValue: "Name"},
+    { displayValue: "City"},
+    { displayValue: "Actions"},
+  ];
+
+  const actions = [
+    {
+      icon: deleteIcon,
+      title: "icon",
+      onClick: () => {},
+    },
+  ];
+
+  const rows = [
+    [
+      { displayValue: "001"},
+      { displayValue: "Peter"},
+      { displayValue: "Miami"},
+      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
+    ],
+    [
+      { displayValue: "002"},
+      { displayValue: "Louis"},
+      { displayValue: "London"},
+      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
+    ],
+    [
+      { displayValue: "003"},
+      { displayValue: "Lana"},
+      { displayValue: "Amsterdam"},
+      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
+    ],
+    [
+      { displayValue: "004"},
+      { displayValue: "Rick"},
+      { displayValue: "London"},
+      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
+    ],
+    [
+      { displayValue: "005"},
+      { displayValue: "Mark"},
+      { displayValue: "Miami"},
+      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
+    ],
+    [
+      { displayValue: "006"},
+      { displayValue: "Cris"},
+      { displayValue: "Paris"},
+      { displayValue: <DxcResultsetTable.ActionsCell actions={actions} /> },
+    ],
+  ];
+
+  return (
+    <DxcInset space="2rem">
+      <DxcResultsetTable
+        columns={columns}
+        rows={rows}
+        mode="reduced"
+      ></DxcResultsetTable>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcResultsetTable,
+  DxcInset,
+  deleteIcon,
+};
+
+export default { code, scope };