@dxc-technology/halstack-react 0.0.0-1021ecf → 0.0.0-10af1a2

package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx

@@ -1,23 +1,34 @@
 import React from "react";
 import DxcResultsetTable from "./ResultsetTable";
-import DxcButton from "../button/Button";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, within } from "@storybook/testing-library";
+import styled from "styled-components";
+import { HalstackProvider } from "../HalstackContext";
+import { disabledRules } from "../../test/accessibility/rules/specific/resultset-table/disabledRules";
+import preview from "../../.storybook/preview";
 
 export default {
   title: "Resultset Table",
   component: DxcResultsetTable,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...disabledRules.map((ruleId) => ({ id: ruleId, reviewOnFail: true })),
+          ...preview?.parameters?.a11y?.config?.rules,
+        ],
+      },
+    },
+  },
 };
 
-const deleteIcon = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-      <path 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>
-  );
-};
+const deleteIcon = (
+  <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>
+);
 
 const columns = [{ displayValue: "Id" }, { displayValue: "Name" }, { displayValue: "City" }];
 
@@ -30,17 +41,77 @@ const rows = [
   [{ displayValue: "006" }, { displayValue: "Cris" }, { displayValue: "Paris" }],
 ];
 
+const advancedTheme = {
+  table: {
+    actionIconColor: "#1B75BB",
+    hoverActionIconColor: "#1B75BB",
+    activeActionIconColor: "#1B75BB",
+    focusActionIconColor: "#1B75BB",
+    disabledActionIconColor: "#666666",
+    hoverButtonBackgroundColor: "#cccccc",
+  },
+};
+
+const actions = [
+  {
+    title: "icon",
+    onClick: (value?) => {
+      console.log(value);
+    },
+    options: [
+      {
+        value: "1",
+        label: "Amazon with a very long text",
+      },
+      {
+        value: "2",
+        label: "Ebay",
+      },
+      {
+        value: "3",
+        label: "Apple",
+      },
+    ],
+  },
+  {
+    icon: "filled_edit",
+    title: "icon",
+    onClick: () => {},
+  },
+  {
+    icon: deleteIcon,
+    title: "icon",
+    onClick: () => {},
+    disabled: true,
+  },
+  {
+    icon: deleteIcon,
+    title: "icon",
+    onClick: () => {},
+  },
+];
+
 const rowsIcon = [
   [
     { displayValue: "001", sortValue: "001" },
     { displayValue: "Peter" },
-    { displayValue: <DxcButton icon={deleteIcon} /> },
+    {
+      displayValue: <DxcResultsetTable.ActionsCell actions={actions} />,
+    },
+  ],
+  [
+    { displayValue: "002", sortValue: "002" },
+    { displayValue: "Louis" },
+    {
+      displayValue: <DxcResultsetTable.ActionsCell actions={actions} />,
+    },
   ],
-  [{ displayValue: "002", sortValue: "002" }, { displayValue: "Louis" }, { displayValue: "" }],
   [
     { displayValue: "003", sortValue: "003" },
     { displayValue: "Mark" },
-    { displayValue: <DxcButton icon={deleteIcon} /> },
+    {
+      displayValue: <DxcResultsetTable.ActionsCell actions={actions} />,
+    },
   ],
 ];
 
@@ -50,6 +121,24 @@ const columnsSortable = [
   { displayValue: "City", isSortable: false },
 ];
 
+const longValues = [
+  [
+    { displayValue: "000000000000000001", sortValue: "000000000000000001" },
+    { displayValue: "Peter Larsson González", sortValue: "Peter" },
+    { displayValue: "Miami: The city that never sleeps", sortValue: "Miami" },
+  ],
+  [
+    { displayValue: "002", sortValue: "002" },
+    { displayValue: "Louis", sortValue: "Louis" },
+    { displayValue: "London", sortValue: "London" },
+  ],
+  [
+    { displayValue: "003", sortValue: "003" },
+    { displayValue: "Aida", sortValue: "Aida" },
+    { displayValue: "Wroclaw", sortValue: "Wroclaw" },
+  ],
+];
+
 const rowsSortable = [
   [
     { displayValue: "001", sortValue: "001" },
@@ -169,89 +258,118 @@ export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Sortable table" theme="light" level={4} />
-      <DxcResultsetTable columns={columnsSortable} rows={rowsSortable}></DxcResultsetTable>
+      <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With action" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rowsIcon}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rowsIcon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With items per page option" theme="light" level={4} />
-      <DxcResultsetTable
-        columns={columns}
-        rows={rows}
-        itemsPerPage={2}
-        itemsPerPageOptions={[2, 3]}
-      ></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} itemsPerPageOptions={[2, 3]} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Scroll resultset table" theme="light" level={4} />
-      <DxcResultsetTable columns={longColumns} rows={longRows}></DxcResultsetTable>
+      <DxcResultsetTable columns={longColumns} rows={longRows} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Without paginator" theme="light" level={4} />
+      <DxcResultsetTable columns={columns} rows={rows} hidePaginator />
+    </ExampleContainer>
+    <ExampleContainer>
+      <SmallContainer>
+        <Title title="Small container and text overflow" theme="light" level={4} />
+        <DxcResultsetTable columns={columnsSortable} rows={longValues} />
+      </SmallContainer>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Reduced sortable table" theme="light" level={4} />
+      <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} mode="reduced" />
+    </ExampleContainer>
+    {/* PENDING SMALL ICON VERSION */}
+    <ExampleContainer>
+      <Title title="Reduced with items per page option" theme="light" level={4} />
+      <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} itemsPerPageOptions={[2, 3]} mode="reduced" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Reduced scroll resultset table" theme="light" level={4} />
+      <DxcResultsetTable columns={longColumns} rows={longRows} mode="reduced" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <SmallContainer>
+        <Title title="Reduced small container and text overflow" theme="light" level={4} />
+        <DxcResultsetTable columns={columnsSortable} rows={longValues} mode="reduced" />
+      </SmallContainer>
     </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"xxsmall"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"xxsmall"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"xsmall"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"xsmall"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"small"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"small"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"medium"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"medium"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"large"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"large"} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xlarge" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"xlarge"}></DxcResultsetTable>
+      <DxcResultsetTable columns={columns} rows={rows} margin={"xlarge"} />
     </ExampleContainer>
-    <ExampleContainer>
+    <ExampleContainer expanded>
       <Title title="Xxlarge" theme="light" level={4} />
-      <DxcResultsetTable columns={columns} rows={rows} margin={"xxlarge"}></DxcResultsetTable>
-      <hr />
+      <DxcResultsetTable columns={columns} rows={rows} margin={"xxlarge"} />
     </ExampleContainer>
   </>
 );
 
+const SmallContainer = styled.div`
+  width: 500px;
+`;
+
 const ResultsetTableAsc = () => (
   <ExampleContainer>
     <Title title="Ascendant sorting" theme="light" level={4} />
-    <DxcResultsetTable columns={columnsSortable} rows={rowsSortable}></DxcResultsetTable>
+    <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
   </ExampleContainer>
 );
 
 export const AscendentSorting = ResultsetTableAsc.bind({});
 AscendentSorting.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.queryByText("Name"));
+  const idHeader = canvas.getAllByRole("button")[0];
+  await userEvent.click(idHeader);
 };
 
 const ResultsetTableDesc = () => (
   <ExampleContainer>
     <Title title="Descendant sorting" theme="light" level={4} />
-    <DxcResultsetTable columns={columnsSortable} rows={rowsSortable}></DxcResultsetTable>
+    <DxcResultsetTable columns={columnsSortable} rows={rowsSortable} />
   </ExampleContainer>
 );
 
 export const DescendantSorting = ResultsetTableDesc.bind({});
 DescendantSorting.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.queryByText("Name"));
-  await userEvent.click(canvas.queryByText("Name"));
+  const nameHeader = canvas.getAllByRole("button")[1];
+  await userEvent.click(nameHeader);
+  await userEvent.click(nameHeader);
 };
 
 const ResultsetTableMiddle = () => (
   <ExampleContainer>
     <Title title="Middle page" theme="light" level={4} />
-    <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2}></DxcResultsetTable>
+    <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} />
   </ExampleContainer>
 );
 
@@ -265,7 +383,7 @@ MiddlePage.play = async ({ canvasElement }) => {
 const ResultsetTableLast = () => (
   <ExampleContainer>
     <Title title="Last page" theme="light" level={4} />
-    <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2}></DxcResultsetTable>
+    <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={2} />
   </ExampleContainer>
 );
 
@@ -275,3 +393,21 @@ LastPage.play = async ({ canvasElement }) => {
   const nextButton = canvas.getAllByRole("button")[3];
   await userEvent.click(nextButton);
 };
+
+const ResultsetActionsCellDropdown = () => (
+  <ExampleContainer>
+    <Title title="Dropdown Action" theme="light" level={4} />
+    <DxcResultsetTable columns={columns} rows={rowsIcon} itemsPerPage={2} />
+    <Title title="Custom theme actions cell" theme="light" level={4} />
+    <HalstackProvider advancedTheme={advancedTheme}>
+      <DxcResultsetTable columns={columns} rows={rowsIcon} itemsPerPage={2} />
+    </HalstackProvider>
+  </ExampleContainer>
+);
+
+export const DropdownAction = ResultsetActionsCellDropdown.bind({});
+DropdownAction.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const dropdown = canvas.getAllByRole("button")[5];
+  await userEvent.click(dropdown);
+};