diff --git a/apps/website/pages/components/resultset-table/code.tsx b/apps/website/pages/components/resultset-table/code.tsx
new file mode 100644
index 0000000000..499a1bbce4
--- /dev/null
+++ b/apps/website/pages/components/resultset-table/code.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import ResultsetTablePageLayout from "screens/components/resultset-table/ResultsetTablePageLayout";
+import ResultsetTableCodePage from "screens/components/resultset-table/code/ResultsetTableCodePage";
+
+const Code = () => (
+ <>
+
+ Resultset table code — Halstack Design System
+
+ {page} ;
+
+export default Code;
diff --git a/apps/website/pages/components/resultset-table/index.tsx b/apps/website/pages/components/resultset-table/index.tsx
index dbb38ce2dd..f6b056991c 100644
--- a/apps/website/pages/components/resultset-table/index.tsx
+++ b/apps/website/pages/components/resultset-table/index.tsx
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
-import ResultsetTableCodePage from "screens/components/resultset-table/code/ResultsetTableCodePage";
+import ResultsetTableOverviewPage from "screens/components/resultset-table/overview/ResultsetTableOverviewPage";
import ResultsetTablePageLayout from "screens/components/resultset-table/ResultsetTablePageLayout";
-const Usage = () => {
- return (
- <>
-
- Resultset Table — Halstack Design System
-
- Resultset table — Halstack Design System
+
+ {page} ;
-};
+Index.getLayout = (page: ReactElement) => {page} ;
-export default Usage;
+export default Index;
diff --git a/apps/website/pages/components/resultset-table/specifications.tsx b/apps/website/pages/components/resultset-table/specifications.tsx
deleted file mode 100644
index 3d2d52498c..0000000000
--- a/apps/website/pages/components/resultset-table/specifications.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import ResultsetTableSpecsPage from "screens/components/resultset-table/specs/ResultsetTableSpecsPage";
-import ResultsetTablePageLayout from "screens/components/resultset-table/ResultsetTablePageLayout";
-
-const Specifications = () => {
- return (
- <>
-
- Resultset Table Specs — Halstack Design System
-
- {page} ;
-};
-
-export default Specifications;
diff --git a/apps/website/pages/components/resultset-table/usage.tsx b/apps/website/pages/components/resultset-table/usage.tsx
deleted file mode 100644
index 0d8a55f660..0000000000
--- a/apps/website/pages/components/resultset-table/usage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import ResultsetTablePageLayout from "screens/components/resultset-table/ResultsetTablePageLayout";
-import ResultsetTableUsagePage from "screens/components/resultset-table/usage/ResultsetTableUsagePage";
-
-const Usage = () => {
- return (
- <>
-
- ResultsetTable Usage — Halstack Design System
-
- {page} ;
-};
-
-export default Usage;
diff --git a/apps/website/pages/components/table/code.tsx b/apps/website/pages/components/table/code.tsx
new file mode 100644
index 0000000000..ac6664cdd5
--- /dev/null
+++ b/apps/website/pages/components/table/code.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import TablePageLayout from "screens/components/table/TablePageLayout";
+import TableCodePage from "screens/components/table/code/TableCodePage";
+
+const Code = () => (
+ <>
+
+ Table code — Halstack Design System
+
+ {page} ;
+
+export default Code;
diff --git a/apps/website/pages/components/table/index.tsx b/apps/website/pages/components/table/index.tsx
index 0bb3762be3..3691744b9a 100644
--- a/apps/website/pages/components/table/index.tsx
+++ b/apps/website/pages/components/table/index.tsx
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
-import TableCodePage from "screens/components/table/code/TableCodePage";
+import TableOverviewPage from "screens/components/table/overview/TableOverviewPage";
import TablePageLayout from "screens/components/table/TablePageLayout";
-const Index = () => {
- return (
- <>
-
- Table — Halstack Design System
-
- Table — Halstack Design System
+
+ {page} ;
-};
+Index.getLayout = (page: ReactElement) => {page} ;
export default Index;
diff --git a/apps/website/pages/components/table/specifications.tsx b/apps/website/pages/components/table/specifications.tsx
deleted file mode 100644
index 76009695c5..0000000000
--- a/apps/website/pages/components/table/specifications.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import TableSpecsPage from "screens/components/table/specs/TableSpecsPage";
-import TablePageLayout from "screens/components/table/TablePageLayout";
-
-const Specifications = () => {
- return (
- <>
-
- Table Specs — Halstack Design System
-
- {page} ;
-};
-
-export default Specifications;
diff --git a/apps/website/pages/components/table/usage.tsx b/apps/website/pages/components/table/usage.tsx
deleted file mode 100644
index 41998e8dd3..0000000000
--- a/apps/website/pages/components/table/usage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import TablePageLayout from "screens/components/table/TablePageLayout";
-import TableUsagePage from "screens/components/table/usage/TableUsagePage";
-
-const Usage = () => {
- return (
- <>
-
- Table Usage — Halstack Design System
-
- {page} ;
-};
-
-export default Usage;
diff --git a/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx b/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx
index ad67ada1c5..e244a14d88 100644
--- a/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx
+++ b/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx
@@ -6,26 +6,22 @@ import { ReactNode } from "react";
const ResultsetTablePageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/resultset-table" },
- { label: "Usage", path: "/components/resultset-table/usage" },
- {
- label: "Specifications",
- path: "/components/resultset-table/specifications",
- },
+ { label: "Overview", path: "/components/resultset-table" },
+ { label: "Code", path: "/components/resultset-table/code" },
];
return (
-
Data table is a component with a high rate of usage within the applications. It allows to show the user a
big amount of information in a simple and simplified way. All the information contained in the table has a
grid structure, defining columns and rows to place the data and allow the users to scan, analyze, compare
and filter that information.
-
{children}
diff --git a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
index 0930fbc09e..546f4d2205 100644
--- a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
+++ b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
@@ -29,6 +29,7 @@ const cellTypeString = `{
displayValue: React.ReactNode;
sortValue?: string | number | Date;
}[]`;
+
const columnTypeString = `{
displayValue: React.ReactNode;
isSortable?: boolean;
@@ -290,15 +291,13 @@ const sections = [
},
];
-const ResultsetTableCodePage = () => {
- return (
-
-
-
-
- );
-};
+const ResultsetTableCodePage = () => (
+
+
+
+
+);
export default ResultsetTableCodePage;
diff --git a/apps/website/screens/components/table/usage/TableUsagePage.tsx b/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx
similarity index 57%
rename from apps/website/screens/components/table/usage/TableUsagePage.tsx
rename to apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx
index 7e086ed838..82f18c1e5c 100644
--- a/apps/website/screens/components/table/usage/TableUsagePage.tsx
+++ b/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx
@@ -5,13 +5,13 @@ import DocFooter from "@/common/DocFooter";
const sections = [
{
- title: "Usage",
+ title: "Introduction",
content: (
Use the table component to compare information in rows and columns.
Every table cell requires a logical column header/row header.
- Don't use the table to create visual layout of the content of a page.
+ Don't use the table for create visual layout of the content of a page.
Avoid truncating content, wrap instead.
@@ -19,15 +19,13 @@ const sections = [
},
];
-const TableUsagePage = () => {
- return (
-
-
-
-
- );
-};
+const ResultsetTableOverviewPage = () => (
+
+
+
+
+);
-export default TableUsagePage;
+export default ResultsetTableOverviewPage;
diff --git a/apps/website/screens/components/resultset-table/specs/ResultsetTableSpecsPage.tsx b/apps/website/screens/components/resultset-table/specs/ResultsetTableSpecsPage.tsx
deleted file mode 100644
index e9a9dd2061..0000000000
--- a/apps/website/screens/components/resultset-table/specs/ResultsetTableSpecsPage.tsx
+++ /dev/null
@@ -1,799 +0,0 @@
-import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import Link from "next/link";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-import anatomyImage from "./images/table_anatomy.png";
-import specsImage from "./images/table_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
- ),
- },
- {
- title: "States",
- content: (
-
- Some other components defined in the Design System are used in the table component as the{" "}
- checkbox
-
- ,{" "}
- button
- {" "}
- or{" "}
- select
-
- . For concrete specifications about states, please, consider to see the documentation of each component.
-
- ),
- },
-
- {
- title: "Anatomy",
- content: (
- <>
-
- Header
- Header title
- Sorting action
- Body
- Cell
- Cell value
- Paginator
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
- Component token
- Element
- Core token
- Value
-
-
-
-
-
- dataBackgroundColor
-
- Cell
-
- color-white
-
- #ffffff
-
-
-
- dataFontColor
-
- Cell value
-
- color-black
-
- #000000
-
-
-
- headerBackgroundColor
-
- Header
-
- color-purple-700
-
- #5f249f
-
-
-
- headerFontColor
-
- Header title
-
- color-white
-
- #ffffff
-
-
-
- scrollBarThumbColor
-
- Scroll bar
-
- color-grey-700
-
- #666666
-
-
-
- scrollBarTrackColor
-
- Scroll bar
-
- color-grey-300
-
- #cccccc
-
-
-
- sortIconColor
-
- Sort
-
- color-white
-
- #ffffff
-
-
-
- rowSeparatorColor
-
- Divider
-
- color-grey-300
-
- #cccccc
-
-
-
- actionIconColor
-
- Actions cell
-
- color-purple-700
-
- #5f249f
-
-
-
- disabledActionIconColor
-
- Actions cell
-
- color-grey-500
-
- #999999
-
-
-
- hoverActionIconColor
-
- Actions cell
-
- color-purple-700
-
- #5f249f
-
-
-
- focusActionIconColor
-
- Actions cell
-
- color-purple-700
-
- #5f249f
-
-
-
- activeActionIconColor
-
- Actions cell
-
- color-purple-700
-
- #5f249f
-
-
-
- actionBackgroundColor
-
- Actions cell
-
- color-transparent
-
- transparent
-
-
-
- disabledActionBackgroundColor
-
- Actions cell
-
- color-transparent
-
- transparent
-
-
-
- hoverActionBackgroundColor
-
- Actions cell
-
- color-grey-100
-
- #f2f2f2
-
-
-
- focusActionBorderColor
-
- Actions cell
-
- color-blue-600
-
- #0095ff
-
-
-
- activeActionBackgroundColor
-
- Actions cell
-
- color-grey-300
-
- #cccccc
-
-
-
- ),
- },
- {
- title: "Typography",
- content: (
-
-
-
- Component token
- Element
- Core token
- Value
-
-
-
-
-
- dataFontFamily
-
- Cell value
-
- font-family-sans
-
- 'Open Sans', sans-serif
-
-
-
- dataFontSize
-
- Cell value
-
- font-scale-02
-
- 0.875rem / 14px
-
-
-
- dataFontStyle
-
- Cell value
-
- font-style-normal
-
- normal
-
-
-
- dataFontWeight
-
- Cell value
-
- font-weight-regular
-
- 400
-
-
-
- dataFontTextTransform
-
- Cell value
- -
- none
-
-
-
- dataTextLineHeight
-
- Cell value
- -
- normal
-
-
-
- dataTextAlign
-
- Cell value
- -
- left
-
-
-
- headerFontFamily
-
- Header title
-
- font-family-sans
-
- 'Open Sans', sans-serif
-
-
-
- headerFontSize
-
- Header title
-
- font-scale-02
-
- 0.875rem / 14px
-
-
-
- headerFontStyle
-
- Header title
-
- font-style-normal
-
- normal
-
-
-
- headerFontWeight
-
- Header title
-
- font-weight-regular
-
- 400
-
-
-
- headerFontTextTransform
-
- Header title
- -
- none
-
-
-
- headerTextLineHeight
-
- Header title
- -
- normal
-
-
-
- headerTextAlign
-
- Header title
- -
- left
-
-
-
- ),
- },
- {
- title: "Border",
- content: (
-
-
-
- Component token
- Element
- Core token
- Value
-
-
-
-
-
- rowSeparatorThickness
-
- Divider
-
- border-width-1
-
- 1px
-
-
-
- rowSeparatorStyle
-
- Divider
-
- border-style-solid
-
- solid
-
-
-
- headerBorderRadius
-
- Header
-
- border-radius-medium
-
- 0.25rem / 4px
-
-
-
- ),
- },
- {
- title: "Spacing",
- content: (
-
-
-
- Component token
- Element
- Core token
- Value
-
-
-
-
-
- dataPaddingTop
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- dataPaddingBottom
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- dataPaddingRight
-
- Cell value
- -
- 20px
-
-
-
- dataPaddingLeft
-
- Cell value
- -
- 20px
-
-
-
- dataPaddingTopReduced
-
- Cell value
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- dataPaddingBottomReduced
-
- Cell value
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- dataPaddingRightReduced
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- dataPaddingLeftReduced
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- firstChildPaddingLeft
-
- Cell value
-
- spacing-24
-
- 1.5rem / 24px
-
-
-
- lastChildPaddingRight
-
- Cell value
-
- spacing-24
-
- 1.5rem / 24px
-
-
-
- firstChildPaddingLeftReduced
-
- Cell value
- -
- 20px
-
-
-
- lastChildPaddingRightReduced
-
- Cell value
- -
- 20px
-
-
-
- dataPaddingBottomReduced
-
- Cell value
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- dataPaddingRightReduced
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- headerPaddingTop
-
- Header title
-
- spacing-16
-
- 1rem / 16px
-
-
-
- headerPaddingBottom
-
- Header title
-
- spacing-16
-
- 1rem / 16px
-
-
-
- headerPaddingRight
-
- Header title
- -
- 20px
-
-
-
- headerPaddingLeft
-
- Header title
-
- spacing-40
-
- 2.5rem / 40px
-
-
-
- headerPaddingTopReduced
-
- Header title
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- headerPaddingBottomReduced
-
- Header title
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- headerPaddingRightReduced
-
- Header title
-
- spacing-16
-
- 1rem / 16px
-
-
-
- headerPaddingLeftReduced
-
- Header title
-
- spacing-16
-
- 1rem / 16px
-
-
-
- ),
- },
- {
- title: "Iconography",
- content: (
-
-
-
- Property
- Element
- Core token
- Value
-
-
-
-
-
- width
-
- Sorting action
- -
- 14px
-
-
-
- height
-
- Sorting action
- -
- 14px
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 1.3.1: Info and Relationships
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 1.3.2: Meaningful Sequence
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 2.1.1: Keyboard
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 2.4.3: Focus Order
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 2.4.6: Headings and Labels
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 2.4.7: Focus Visible
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 4.1.2: Name, Role, Value
-
-
-
- ),
- },
- {
- title: "WAI-ARIA",
- content: (
-
-
- WAI-ARIA Authoring Practices 1.2 -{" "}
-
- 3.23 Table
-
-
-
- WAI-ARIA Authoring Practices 1.2 -{" "}
-
- Sortable Table Example
-
-
-
- ),
- },
- ],
- },
-];
-
-const ResultsetTableSpecsPage = () => {
- return (
-
-
-
-
- );
-};
-
-export default ResultsetTableSpecsPage;
diff --git a/apps/website/screens/components/resultset-table/specs/images/table_anatomy.png b/apps/website/screens/components/resultset-table/specs/images/table_anatomy.png
deleted file mode 100644
index ed9aba8ca8..0000000000
Binary files a/apps/website/screens/components/resultset-table/specs/images/table_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/resultset-table/specs/images/table_specs.png b/apps/website/screens/components/resultset-table/specs/images/table_specs.png
deleted file mode 100644
index 6cb207fc24..0000000000
Binary files a/apps/website/screens/components/resultset-table/specs/images/table_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx b/apps/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx
deleted file mode 100644
index c65c3f5312..0000000000
--- a/apps/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- Use the table component to compare information in rows and columns.
- Every table cell requires a logical column header/row header.
-
- Don't use the table for create visual layout of the content of a page.
-
- Avoid truncating content, wrap instead.
-
- ),
- },
-];
-
-const ResultsetTableUsagePage = () => {
- return (
-
-
-
-
- );
-};
-
-export default ResultsetTableUsagePage;
diff --git a/apps/website/screens/components/table/TablePageLayout.tsx b/apps/website/screens/components/table/TablePageLayout.tsx
index 133db5ff4c..ca1e324913 100644
--- a/apps/website/screens/components/table/TablePageLayout.tsx
+++ b/apps/website/screens/components/table/TablePageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
const TablePageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/table" },
- { label: "Usage", path: "/components/table/usage" },
- { label: "Specifications", path: "/components/table/specifications" },
+ { label: "Overview", path: "/components/table" },
+ { label: "Code", path: "/components/table/code" },
];
return (
@@ -22,7 +21,7 @@ const TablePageHeading = ({ children }: { children: ReactNode }) => {
grid structure, defining columns and rows to place the data and allow the users to scan, analyze, compare
and filter that information.
-
{children}
diff --git a/apps/website/screens/components/table/code/TableCodePage.tsx b/apps/website/screens/components/table/code/TableCodePage.tsx
index f71d4da936..94f0ff48dd 100644
--- a/apps/website/screens/components/table/code/TableCodePage.tsx
+++ b/apps/website/screens/components/table/code/TableCodePage.tsx
@@ -51,6 +51,17 @@ const sections = [
The center section of the table. Can be used to render custom content in this area.
-
+
+ margin
+
+ 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
+
+
+ Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+ 'right' properties in order to specify different margin sizes.
+
+ -
+
@@ -76,17 +87,6 @@ const sections = [
'default'
-
- margin
-
- 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
-
-
- Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
- 'right' properties in order to specify different margin sizes.
-
- -
-
),
@@ -170,15 +170,13 @@ const sections = [
},
];
-const TableCodePage = () => {
- return (
-
-
-
-
- );
-};
+const TableCodePage = () => (
+
+
+
+
+);
export default TableCodePage;
diff --git a/apps/website/screens/components/table/overview/TableOverviewPage.tsx b/apps/website/screens/components/table/overview/TableOverviewPage.tsx
new file mode 100644
index 0000000000..f4c1f51066
--- /dev/null
+++ b/apps/website/screens/components/table/overview/TableOverviewPage.tsx
@@ -0,0 +1,27 @@
+import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import DocFooter from "@/common/DocFooter";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The Table component is a powerful and flexible tool for displaying tabular data in a structured format. It
+ allows users to present information in rows and columns, making it easy to read and analyze large datasets.
+
+ ),
+ },
+];
+
+const TableOverviewPage = () => (
+
+
+
+
+);
+
+export default TableOverviewPage;
diff --git a/apps/website/screens/components/table/specs/TableSpecsPage.tsx b/apps/website/screens/components/table/specs/TableSpecsPage.tsx
deleted file mode 100644
index a14bdc749b..0000000000
--- a/apps/website/screens/components/table/specs/TableSpecsPage.tsx
+++ /dev/null
@@ -1,800 +0,0 @@
-import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import Link from "next/link";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-import anatomyImage from "./images/table_anatomy.png";
-import specsImage from "./images/table_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- Some other components defined in the Design System are used in the table component as the{" "}
- checkbox
-
- ,{" "}
- button
- {" "}
- or{" "}
- select
-
- . For concrete specifications about states, please, consider to see the documentation of each component.
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
- Header
- Header title
- Sorting action
- Body
- Cell
- Cell value
- Paginator
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
- Component token
- Element
- Core token
- Value
-
-
-
-
-
- dataBackgroundColor
-
- Cell
-
- color-white
-
- #ffffff
-
-
-
- dataFontColor
-
- Cell value
-
- color-black
-
- #000000
-
-
-
- headerBackgroundColor
-
- Header
-
- color-purple-700
-
- #5f249f
-
-
-
- headerFontColor
-
- Header title
-
- color-white
-
- #ffffff
-
-
-
- scrollBarThumbColor
-
- Scroll bar
-
- color-grey-700
-
- #666666
-
-
-
- scrollBarTrackColor
-
- Scroll bar
-
- color-grey-300
-
- #cccccc
-
-
-
- sortIconColor
-
- Sort
-
- color-white
-
- #ffffff
-
-
-
- rowSeparatorColor
-
- Divider
-
- color-grey-300
-
- #cccccc
-
-
-
- actionIconColor
-
- Actions cell
-
- color-purple-700
-
- #5f249f
-
-
-
- disabledActionIconColor
-
- Actions cell
-
- color-grey-500
-
- #999999
-
-
-
- hoverActionIconColor
-
- Actions cell
-
- color-purple-700
-
- #5f249f
-
-
-
- focusActionIconColor
-
- Actions cell
-
- color-purple-700
-
- #5f249f
-
-
-
- activeActionIconColor
-
- Actions cell
-
- color-purple-700
-
- #5f249f
-
-
-
- actionBackgroundColor
-
- Actions cell
-
- color-transparent
-
- transparent
-
-
-
- disabledActionBackgroundColor
-
- Actions cell
-
- color-transparent
-
- transparent
-
-
-
- hoverActionBackgroundColor
-
- Actions cell
-
- color-grey-100
-
- #f2f2f2
-
-
-
- focusActionBorderColor
-
- Actions cell
-
- color-blue-600
-
- #0095ff
-
-
-
- activeActionBackgroundColor
-
- Actions cell
-
- color-grey-300
-
- #cccccc
-
-
-
- ),
- },
- {
- title: "Typography",
- content: (
-
-
-
- Component token
- Element
- Core token
- Value
-
-
-
-
-
- dataFontFamily
-
- Cell value
-
- font-family-sans
-
- 'Open Sans', sans-serif
-
-
-
- dataFontSize
-
- Cell value
-
- font-scale-02
-
- 0.875rem / 14px
-
-
-
- dataFontStyle
-
- Cell value
-
- font-style-normal
-
- normal
-
-
-
- dataFontWeight
-
- Cell value
-
- font-weight-regular
-
- 400
-
-
-
- dataFontTextTransform
-
- Cell value
- -
- none
-
-
-
- dataTextLineHeight
-
- Cell value
- -
- normal
-
-
-
- dataTextAlign
-
- Cell value
- -
- left
-
-
-
- headerFontFamily
-
- Header title
-
- font-family-sans
-
- 'Open Sans', sans-serif
-
-
-
- headerFontSize
-
- Header title
-
- font-scale-02
-
- 0.875rem / 14px
-
-
-
- headerFontStyle
-
- Header title
-
- font-style-normal
-
- normal
-
-
-
- headerFontWeight
-
- Header title
-
- font-weight-regular
-
- 400
-
-
-
- headerFontTextTransform
-
- Header title
- -
- none
-
-
-
- headerTextLineHeight
-
- Header title
- -
- normal
-
-
-
- headerTextAlign
-
- Header title
- -
- left
-
-
-
- ),
- },
- {
- title: "Border",
- content: (
-
-
-
- Component token
- Element
- Core token
- Value
-
-
-
-
-
- rowSeparatorThickness
-
- Divider
-
- border-width-1
-
- 1px
-
-
-
- rowSeparatorStyle
-
- Divider
-
- border-style-solid
-
- solid
-
-
-
- headerBorderRadius
-
- Header
-
- border-radius-medium
-
- 0.25rem / 4px
-
-
-
- ),
- },
- {
- title: "Spacing",
- content: (
-
-
-
- Component token
- Element
- Core token
- Value
-
-
-
-
-
- dataPaddingTop
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- dataPaddingBottom
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- dataPaddingRight
-
- Cell value
- -
- 20px
-
-
-
- dataPaddingLeft
-
- Cell value
- -
- 20px
-
-
-
- dataPaddingTopReduced
-
- Cell value
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- dataPaddingBottomReduced
-
- Cell value
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- dataPaddingRightReduced
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- dataPaddingLeftReduced
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- firstChildPaddingLeft
-
- Cell value
-
- spacing-24
-
- 1.5rem / 24px
-
-
-
- lastChildPaddingRight
-
- Cell value
-
- spacing-24
-
- 1.5rem / 24px
-
-
-
- firstChildPaddingLeftReduced
-
- Cell value
- -
- 20px
-
-
-
- lastChildPaddingRightReduced
-
- Cell value
- -
- 20px
-
-
-
- dataPaddingBottomReduced
-
- Cell value
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- dataPaddingRightReduced
-
- Cell value
-
- spacing-16
-
- 1rem / 16px
-
-
-
- headerPaddingTop
-
- Header title
-
- spacing-16
-
- 1rem / 16px
-
-
-
- headerPaddingBottom
-
- Header title
-
- spacing-16
-
- 1rem / 16px
-
-
-
- headerPaddingRight
-
- Header title
- -
- 20px
-
-
-
- headerPaddingLeft
-
- Header title
-
- spacing-40
-
- 2.5rem / 40px
-
-
-
- headerPaddingTopReduced
-
- Header title
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- headerPaddingBottomReduced
-
- Header title
-
- spacing-8
-
- 0.5rem / 8px
-
-
-
- headerPaddingRightReduced
-
- Header title
-
- spacing-16
-
- 1rem / 16px
-
-
-
- headerPaddingLeftReduced
-
- Header title
-
- spacing-16
-
- 1rem / 16px
-
-
-
- ),
- },
- {
- title: "Iconography",
- content: (
-
-
-
- Property
- Element
- Core token
- Value
-
-
-
-
-
- width
-
- Sorting action
- -
- 14px
-
-
-
- height
-
- Sorting action
- -
- 14px
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 1.3.1: Info and Relationships
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 1.3.2: Meaningful Sequence
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 2.1.1: Keyboard
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 2.4.3: Focus Order
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 2.4.6: Headings and Labels
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 2.4.7: Focus Visible
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- Success Criterion 4.1.2: Name, Role, Value
-
-
-
- ),
- },
- {
- title: "WAI-ARIA",
- content: (
-
-
- WAI-ARIA Authoring Practices 1.2 -{" "}
-
- 3.23 Table
-
-
-
- WAI-ARIA Authoring Practices 1.2 -{" "}
-
- Sortable Table Example
-
-
-
- ),
- },
- ],
- },
-];
-
-const TableSpecsPage = () => {
- return (
-
-
-
-
- );
-};
-
-export default TableSpecsPage;
diff --git a/apps/website/screens/components/table/specs/images/table_anatomy.png b/apps/website/screens/components/table/specs/images/table_anatomy.png
deleted file mode 100644
index ed9aba8ca8..0000000000
Binary files a/apps/website/screens/components/table/specs/images/table_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/table/specs/images/table_specs.png b/apps/website/screens/components/table/specs/images/table_specs.png
deleted file mode 100644
index 6cb207fc24..0000000000
Binary files a/apps/website/screens/components/table/specs/images/table_specs.png and /dev/null differ
diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx
index ed985e13ee..0b030632d2 100644
--- a/packages/lib/src/action-icon/ActionIcon.tsx
+++ b/packages/lib/src/action-icon/ActionIcon.tsx
@@ -6,36 +6,37 @@ import { Tooltip } from "../tooltip/Tooltip";
const ActionIcon = styled.button`
all: unset;
- display: flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
+ display: grid;
+ place-items: center;
border-radius: var(--border-radius-xs);
height: var(--height-s);
width: 24px;
- ${(props) => (props.disabled ? `cursor: not-allowed;` : `cursor: pointer;`)}
- color: ${(props) => (props.disabled ? "var(--color-fg-neutral-medium)" : "var(--color-fg-neutral-dark)")};
+ color: var(--color-fg-neutral-dark);
+ cursor: pointer;
- ${(props) =>
- !props.disabled &&
- `
- &:focus,
- &:focus-visible {
- outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
- }
- &:hover {
- background-color: var(--color-bg-alpha-light);
- }
- `}
+ /* Icon sizing */
font-size: var(--height-xxs);
> svg {
height: var(--height-xxs);
width: 16px;
}
+
+ &:disabled {
+ color: var(--color-fg-neutral-medium);
+ cursor: not-allowed;
+ }
+ &:focus:enabled,
+ &:focus-visible:enabled {
+ outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+ outline-offset: -2px;
+ }
+ &:hover:enabled {
+ background-color: var(--color-bg-alpha-light);
+ }
`;
export default forwardRef(
- ({ disabled = false, title, icon, onClick, tabIndex }, ref) => (
+ ({ disabled = false, icon, onClick, tabIndex, title }, ref) => (
;
-const actions: ActionsPropsType = [
+const actions: Action = [
{
title: "icon",
onClick: (value?) => {
diff --git a/packages/lib/src/icon/Icon.tsx b/packages/lib/src/icon/Icon.tsx
index cc2b977e6f..dc1e708fe2 100644
--- a/packages/lib/src/icon/Icon.tsx
+++ b/packages/lib/src/icon/Icon.tsx
@@ -1,14 +1,5 @@
import styled from "styled-components";
-const DxcIcon = ({ icon }: { icon: string }): JSX.Element => (
-
-
- ),
- arrowDown: (
-
-
- ),
- bothArrows: (
-
-
- ),
-};
-
-export default icons;
diff --git a/packages/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx b/packages/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx
index cd245c9e66..521062051a 100644
--- a/packages/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx
+++ b/packages/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx
@@ -4,7 +4,6 @@ import DxcResultsetTable from "./ResultsetTable";
// TODO: REMOVE
import { disabledRules as rules } from "../../test/accessibility/rules/specific/resultset-table/disabledRules";
-import { ActionCellsPropsType } from "../table/types";
const disabledRules = {
rules: formatRules(rules),
@@ -28,7 +27,7 @@ const deleteIcon = (
disconnect() {}
};
-const actions: ActionCellsPropsType["actions"] = [
+const actions = [
{
title: "icon",
onClick: () => {},
diff --git a/packages/lib/src/resultset-table/ResultsetTable.stories.tsx b/packages/lib/src/resultset-table/ResultsetTable.stories.tsx
index 2b2f77f5fa..e855b77db2 100644
--- a/packages/lib/src/resultset-table/ResultsetTable.stories.tsx
+++ b/packages/lib/src/resultset-table/ResultsetTable.stories.tsx
@@ -4,9 +4,7 @@ import ExampleContainer from "../../.storybook/components/ExampleContainer";
import Title from "../../.storybook/components/Title";
import preview from "../../.storybook/preview";
import { disabledRules } from "../../test/accessibility/rules/specific/resultset-table/disabledRules";
-import { HalstackProvider } from "../HalstackContext";
import DxcResultsetTable from "./ResultsetTable";
-import { ActionsPropsType } from "../table/types";
import { Meta, StoryObj } from "@storybook/react";
export default {
@@ -42,21 +40,10 @@ 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: ActionsPropsType = [
+const actions = [
{
title: "icon",
- onClick: (value?) => {
+ onClick: (value?: string) => {
console.log(value);
},
options: [
@@ -391,10 +378,6 @@ const ResultsetActionsCellDropdown = () => (
-
);
diff --git a/packages/lib/src/resultset-table/ResultsetTable.test.tsx b/packages/lib/src/resultset-table/ResultsetTable.test.tsx
index a55e05dd4e..7b0f9c37f9 100644
--- a/packages/lib/src/resultset-table/ResultsetTable.test.tsx
+++ b/packages/lib/src/resultset-table/ResultsetTable.test.tsx
@@ -1,7 +1,6 @@
import { act, fireEvent, render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import DxcCheckbox from "../checkbox/Checkbox";
-import { ActionCellsPropsType } from "../table/types";
import DxcResultsetTable from "./ResultsetTable";
// Mocking DOMRect for Radix Primitive Popover
@@ -492,7 +491,7 @@ describe("Resultset table component tests", () => {
test("Resultset table with ActionsCell", () => {
const onSelectOption = jest.fn();
const onClick = jest.fn();
- const actions: ActionCellsPropsType["actions"] = [
+ const actions = [
{
title: "icon1",
onClick: onSelectOption,
diff --git a/packages/lib/src/resultset-table/ResultsetTable.tsx b/packages/lib/src/resultset-table/ResultsetTable.tsx
index a4989a2eb9..7055d3709d 100644
--- a/packages/lib/src/resultset-table/ResultsetTable.tsx
+++ b/packages/lib/src/resultset-table/ResultsetTable.tsx
@@ -1,81 +1,66 @@
-import { ReactNode, useContext, useEffect, useMemo, useRef, useState } from "react";
-import styled, { ThemeProvider } from "styled-components";
-import CoreTokens from "../common/coreTokens";
-import { getMargin } from "../common/utils";
+import { useEffect, useMemo, useRef, useState } from "react";
+import styled from "styled-components";
import { spaces } from "../common/variables";
import DxcPaginator from "../paginator/Paginator";
import DxcTable, { DxcActionsCell } from "../table/Table";
-import HalstackContext from "../HalstackContext";
-import icons from "./Icons";
-import ResultsetTablePropsType, { Column, Row } from "./types";
+import ResultsetTablePropsType, { Column } from "./types";
+import { assignIdsToRows, calculateWidth, getMinItemsPerPageIndex, getMaxItemsPerPageIndex, sortArray } from "./utils";
+import DxcIcon from "../icon/Icon";
-const normalizeSortValue = (sortValue: string | Date | ReactNode) =>
- typeof sortValue === "string" ? sortValue.toUpperCase() : sortValue;
-
-const isDateType = (value: ReactNode | Date): boolean => value instanceof Date;
-
-const sortArray = (index: number, order: "ascending" | "descending", resultset: { id: string; cells: Row }[]) =>
- resultset.slice().sort((element1, element2) => {
- const sortValueA = normalizeSortValue(element1.cells[index]?.sortValue || element1.cells[index]?.displayValue);
- const sortValueB = normalizeSortValue(element2.cells[index]?.sortValue || element2.cells[index]?.displayValue);
- let comparison = 0;
- if (sortValueA != null && sortValueB != null) {
- if (typeof sortValueA === "object" && !isDateType(sortValueA)) {
- comparison = -1;
- } else if (typeof sortValueB === "object" && !isDateType(sortValueB)) {
- comparison = 1;
- } else if (sortValueA > sortValueB) {
- comparison = 1;
- } else if (sortValueA < sortValueB) {
- comparison = -1;
- }
- }
- return order === "descending" ? comparison * -1 : comparison;
- });
-
-const getMinItemsPerPageIndex = (currentPageInternal: number, itemsPerPage: number, page: number) =>
- currentPageInternal === 1 ? 0 : itemsPerPage * (page - 1);
+const ResultsetTableContainer = styled.div<{
+ margin: ResultsetTablePropsType["margin"];
+}>`
+ width: ${({ margin }) => calculateWidth(margin)};
+ margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "0px")};
+ margin-top: ${({ margin }) => (margin && typeof margin === "object" && margin.top ? spaces[margin.top] : "")};
+ margin-right: ${({ margin }) => (margin && typeof margin === "object" && margin.right ? spaces[margin.right] : "")};
+ margin-bottom: ${({ margin }) =>
+ margin && typeof margin === "object" && margin.bottom ? spaces[margin.bottom] : ""};
+ margin-left: ${({ margin }) => (margin && typeof margin === "object" && margin.left ? spaces[margin.left] : "")};
+`;
-const getMaxItemsPerPageIndex = (minItemsPerPageIndex: number, itemsPerPage: number, resultset: Row[], page: number) =>
- minItemsPerPageIndex + itemsPerPage > resultset.length ? resultset.length : itemsPerPage * page - 1;
+const SortingHeader = styled.span<{
+ isSortable: Column["isSortable"];
+ mode: ResultsetTablePropsType["mode"];
+}>`
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-gap-s);
+ height: var(--height-s);
+ width: fit-content;
-const assignIdsToRows = (resultset: Row[]) => {
- if (resultset.length > 0) {
- return resultset.map((row, index) => ({
- cells: row,
- id: `row_${index}`,
- }));
- }
- return [];
-};
+ ${({ isSortable }) =>
+ isSortable
+ ? `border-radius: var(--border-radius-xs);
+ cursor: pointer;
+ &:focus {
+ outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);s
+ }`
+ : "cursor: default;"}
+`;
const DxcResultsetTable = ({
columns,
- rows,
hidePaginator = false,
- showGoToPage = true,
itemsPerPage = 5,
- itemsPerPageOptions,
itemsPerPageFunction,
+ itemsPerPageOptions,
margin,
- tabIndex = 0,
mode = "default",
-}: ResultsetTablePropsType): JSX.Element => {
- const colorsTheme = useContext(HalstackContext);
- const [page, changePage] = useState(1);
+ rows,
+ showGoToPage = true,
+ tabIndex = 0,
+}: ResultsetTablePropsType) => {
+ const [page, setPage] = useState(1);
const [sortColumnIndex, changeSortColumnIndex] = useState(-1);
const [sortOrder, changeSortOrder] = useState<"ascending" | "descending">("ascending");
-
const prevRowCountRef = useRef(rows.length);
-
const rowsWithIds = useMemo(() => assignIdsToRows(rows), [rows]);
-
const minItemsPerPageIndex = useMemo(() => getMinItemsPerPageIndex(page, itemsPerPage, page), [itemsPerPage, page]);
const maxItemsPerPageIndex = useMemo(
() => getMaxItemsPerPageIndex(minItemsPerPageIndex, itemsPerPage, rows, page),
[itemsPerPage, minItemsPerPageIndex, page, rows]
);
-
const sortedResultset = useMemo(
() => (sortColumnIndex !== -1 ? sortArray(sortColumnIndex, sortOrder, rowsWithIds) : rowsWithIds),
[sortColumnIndex, sortOrder, rowsWithIds]
@@ -86,11 +71,11 @@ const DxcResultsetTable = ({
);
const goToPage = (newPage: number) => {
- changePage(newPage);
+ setPage(newPage);
};
const changeSorting = (columnIndex: number) => {
- changePage(1);
+ setPage(1);
changeSortColumnIndex(columnIndex);
changeSortOrder(
sortColumnIndex === -1 || sortColumnIndex !== columnIndex
@@ -103,141 +88,83 @@ const DxcResultsetTable = ({
useEffect(() => {
if (!hidePaginator) {
- if (rows.length === 0) {
- changePage(0);
- } else if (page === 0) {
- changePage(1);
- } else if (rows.length < prevRowCountRef.current) {
+ if (rows.length === 0) setPage(0);
+ else if (page === 0) setPage(1);
+ else if (rows.length < prevRowCountRef.current) {
const lastPage = Math.ceil(rows.length / itemsPerPage);
const prevLastPage = Math.ceil(prevRowCountRef.current / itemsPerPage);
if (lastPage < prevLastPage) {
- changePage(Math.min(lastPage, page));
+ setPage(Math.min(lastPage, page));
}
}
prevRowCountRef.current = rows.length;
}
- }, [rows.length]);
+ }, [hidePaginator, page, rows]);
return (
-
-
-
-
-
- {columns.map((column, index) => (
-
+
+
+
+ {columns.map((column, index) => (
+
+ {
+ if (column.isSortable) {
+ changeSorting(index);
+ }
+ }}
+ role={column.isSortable ? "button" : undefined}
+ tabIndex={column.isSortable ? tabIndex : -1}
>
- {
- if (column.isSortable) {
- changeSorting(index);
- }
- }}
- tabIndex={column.isSortable ? tabIndex : -1}
- isSortable={column.isSortable}
- mode={mode}
- aria-label={column.isSortable ? "Sort column" : undefined}
- >
- {column.displayValue}
- {column.isSortable && (
-
- {sortColumnIndex === index
+ {column.displayValue}
+ {column.isSortable && (
+
- )}
-
-
+ ? "arrow_upward"
+ : "arrow_downward"
+ : "unfold_more"
+ }
+ />
+ )}
+
+
+ ))}
+
+
+
+ {filteredResultset.map((row) => (
+
+ {row.cells.map((cellContent, cellIndex) => (
+ {cellContent.displayValue}
))}
-
-
- {filteredResultset.map((row) => (
-
- {row.cells.map((cellContent, cellIndex) => (
- {cellContent.displayValue}
- ))}
-
- ))}
-
-
- {!hidePaginator && rows.length > itemsPerPage && (
-
-
+ ))}
+
+
+ {!hidePaginator && rows.length > itemsPerPage && (
+ ;
-const opinionatedTheme = {
- table: {
- baseColor: "#5f249f",
- headerFontColor: "#ffffff",
- cellFontColor: "#000000",
- },
-};
-
-const advancedTheme = {
- table: {
- actionIconColor: "#1B75BB",
- hoverActionIconColor: "#1B75BB",
- activeActionIconColor: "#1B75BB",
- focusActionIconColor: "#1B75BB",
- hoverButtonBackgroundColor: "#cccccc",
- },
-};
-
-const actions: ActionsPropsType = [
+const actions = [
{
title: "icon",
- onClick: (value?) => {
+ onClick: (value?: string) => {
console.log(value);
},
options: [
@@ -64,7 +44,7 @@ const actions: ActionsPropsType = [
},
{
title: "icon",
- onClick: (value?) => {
+ onClick: (value?: string) => {
console.log(value);
},
options: [
@@ -85,7 +65,7 @@ const actions: ActionsPropsType = [
{
disabled: true,
title: "icon",
- onClick: (value?) => {
+ onClick: (value?: string) => {
console.log(value);
},
options: [
@@ -151,36 +131,34 @@ const Table = () => (
-
-
- header 1
- header 2
- actions
-
-
- cell 1
- cell 2
-
-
-
-
- cell 4
- cell 5
-
-
-
-
- cell 7
- cell 8
-
-
-
-
-
+
+
+ header 1
+ header 2
+ actions
+
+
+ cell 1
+ cell 2
+
+
+
+
+ cell 4
+ cell 5
+
+
+
+
+ cell 7
+ cell 8
+
+
+
+
-
-
-
-
-
- header
-
- header
-
- header
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua.
-
-
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
-
-
- cell data
- cell data
- cell data
-
-
- cell data
- cell data
- cell data
-
-
- cell data
- cell data
- cell data
-
-
- cell data
- cell data
- cell data
-
-
- cell data
- cell data
- cell data
-
-
- cell data
- cell data
- cell data
-
-
- cell data
- cell data
- cell data
-
-
- cell data
- cell data
- cell data
-
-
-
-
);
diff --git a/packages/lib/src/table/Table.test.tsx b/packages/lib/src/table/Table.test.tsx
index 874a7d9eae..b92c9bbb2a 100644
--- a/packages/lib/src/table/Table.test.tsx
+++ b/packages/lib/src/table/Table.test.tsx
@@ -1,7 +1,6 @@
import { act, render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import DxcTable from "./Table";
-import { ActionCellsPropsType } from "./types";
// Mocking DOMRect for Radix Primitive Popover
(global as any).globalThis = global;
@@ -59,7 +58,7 @@ describe("Table component tests", () => {
test("Table ActionsCell", async () => {
const onSelectOption = jest.fn();
const onClick = jest.fn();
- const actions: ActionCellsPropsType["actions"] = [
+ const actions = [
{
title: "icon1",
onClick: onSelectOption,
diff --git a/packages/lib/src/table/Table.tsx b/packages/lib/src/table/Table.tsx
index ab6cce0f02..15fdcfdd64 100644
--- a/packages/lib/src/table/Table.tsx
+++ b/packages/lib/src/table/Table.tsx
@@ -1,163 +1,125 @@
-import { useContext } from "react";
-import styled, { ThemeProvider } from "styled-components";
-import { spaces, AdvancedTheme } from "../common/variables";
+import styled from "styled-components";
+import { spaces } from "../common/variables";
import { getMargin } from "../common/utils";
import DxcDropdown from "../dropdown/Dropdown";
-import DxcFlex from "../flex/Flex";
-import HalstackContext, { DeepPartial, HalstackProvider } from "../HalstackContext";
-import dropdownTheme from "./dropdownTheme";
import DxcActionIcon from "../action-icon/ActionIcon";
-import TablePropsType, { ActionCellsPropsType } from "./types";
-
-const overwriteTheme = (theme: AdvancedTheme): DeepPartial => {
- const newTheme = dropdownTheme;
- newTheme.dropdown.buttonBackgroundColor = theme.table.actionBackgroundColor;
- newTheme.dropdown.hoverButtonBackgroundColor = theme.table.hoverActionBackgroundColor;
- newTheme.dropdown.activeButtonBackgroundColor = theme.table.activeActionBackgroundColor;
- newTheme.dropdown.buttonIconColor = theme.table.actionIconColor;
- newTheme.dropdown.disabledColor = theme.table.disabledActionIconColor;
- newTheme.dropdown.disabledButtonBackgroundColor = theme.table.disabledActionBackgroundColor;
- return newTheme;
-};
-
-export const DxcActionsCell = ({ actions }: ActionCellsPropsType): JSX.Element => {
- const actionIcons = actions.filter((action) => !action.options);
- const actionDropdown = actions.find((action) => action.options);
- const maxNumberOfActions = actionDropdown ? 2 : 3;
- const colorsTheme = useContext(HalstackContext);
-
- return (
-
- {actionIcons.map(
- (action, index) =>
- index < maxNumberOfActions && (
-
-
- )}
-
- );
-};
-
-const DxcTable = ({ children, margin, mode = "default" }: TablePropsType): JSX.Element => {
- const colorsTheme = useContext(HalstackContext);
-
- return (
-
-
- {children}
-
-
- );
-};
+import TablePropsType, { ActionsCellPropsType } from "./types";
+import { scrollbarStyles } from "../styles/scroll";
+import { useEffect, useMemo } from "react";
const calculateWidth = (margin: TablePropsType["margin"]) =>
`calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
-const DxcTableContainer = styled.div<{ margin: TablePropsType["margin"] }>`
- width: ${(props) => calculateWidth(props.margin)};
- margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
- margin-top: ${(props) =>
- props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
- margin-right: ${(props) =>
- props.margin && typeof props.margin === "object" && props.margin.right ? spaces[props.margin.right] : ""};
- margin-bottom: ${(props) =>
- props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
- margin-left: ${(props) =>
- props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
-
+const TableContainer = styled.div<{ margin: TablePropsType["margin"] }>`
+ width: ${({ margin }) => calculateWidth(margin)};
+ margin: ${({ margin }) => (margin && typeof margin !== "object" ? spaces[margin] : "0px")};
+ margin-top: ${({ margin }) => (margin && typeof margin === "object" && margin.top ? spaces[margin.top] : "")};
+ margin-right: ${({ margin }) => (margin && typeof margin === "object" && margin.right ? spaces[margin.right] : "")};
+ margin-bottom: ${({ margin }) =>
+ margin && typeof margin === "object" && margin.bottom ? spaces[margin.bottom] : ""};
+ margin-left: ${({ margin }) => (margin && typeof margin === "object" && margin.left ? spaces[margin.left] : "")};
overflow: auto;
- &::-webkit-scrollbar {
- width: 8px;
- height: 8px;
- }
- &::-webkit-scrollbar-thumb {
- background-color: ${(props) => props.theme.scrollBarThumbColor};
- border-radius: 6px;
- }
- &::-webkit-scrollbar-track {
- background-color: ${(props) => props.theme.scrollBarTrackColor};
- border-radius: 6px;
- }
+ ${scrollbarStyles}
`;
-const DxcTableContent = styled.table<{ mode: TablePropsType["mode"] }>`
+const Table = styled.table<{ mode: TablePropsType["mode"] }>`
border-collapse: collapse;
width: 100%;
& tr {
- border-bottom: ${(props) =>
- `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
- height: ${(props) => (props.mode === "default" ? "60px" : "36px")};
+ border-bottom: var(--border-width-s) solid var(--border-color-neutral-lighter);
+ height: ${({ mode }) => (mode === "default" ? "var(--height-xxl)" : "var(--height-l)")};
}
& td {
- background-color: ${(props) => props.theme.dataBackgroundColor};
- font-family: ${(props) => props.theme.dataFontFamily};
- font-size: ${(props) => props.theme.dataFontSize};
- font-style: ${(props) => props.theme.dataFontStyle};
- font-weight: ${(props) => props.theme.dataFontWeight};
- color: ${(props) => props.theme.dataFontColor};
- text-transform: ${(props) => props.theme.dataFontTextTransform};
- text-align: ${(props) => props.theme.dataTextAlign};
- line-height: ${(props) => props.theme.dataTextLineHeight};
- padding: ${(props) =>
- props.mode === "default"
- ? `${props.theme.dataPaddingTop} ${props.theme.dataPaddingRight} ${props.theme.dataPaddingBottom} ${props.theme.dataPaddingLeft}`
- : `${props.theme.dataPaddingTopReduced} ${props.theme.dataPaddingRightReduced} ${props.theme.dataPaddingBottomReduced} ${props.theme.dataPaddingLeftReduced}`};
+ background-color: var(--color-fg-neutral-bright);
+ color: var(--color-fg-neutral-dark);
+ font-family: var(--typography-font-family);
+ font-size: var(--typography-label-m);
+ font-style: normal;
+ font-weight: var(--typography-label-regular);
+ line-height: normal;
+ padding: var(--spacing-padding-s) var(--spacing-padding-m);
+ text-align: start;
}
& th {
- background-color: ${(props) => props.theme.headerBackgroundColor};
- font-family: ${(props) => props.theme.headerFontFamily};
- font-size: ${(props) => props.theme.headerFontSize};
- font-style: ${(props) => props.theme.headerFontStyle};
- font-weight: ${(props) => props.theme.headerFontWeight};
- color: ${(props) => props.theme.headerFontColor};
- text-transform: ${(props) => props.theme.headerFontTextTransform};
- text-align: ${(props) => props.theme.headerTextAlign};
- line-height: ${(props) => props.theme.headerTextLineHeight};
- padding: ${(props) =>
- props.mode === "default"
- ? `${props.theme.headerPaddingTop} ${props.theme.headerPaddingRight} ${props.theme.headerPaddingBottom} ${props.theme.headerPaddingLeft}`
- : `${props.theme.headerPaddingTopReduced} ${props.theme.headerPaddingRightReduced} ${props.theme.headerPaddingBottomReduced} ${props.theme.headerPaddingLeftReduced}`};
+ background-color: var(--color-fg-primary-strong);
+ color: var(--color-fg-neutral-bright);
+ font-family: var(--typography-font-family);
+ font-size: var(--typography-label-m);
+ font-style: normal;
+ font-weight: var(--typography-label-regular);
+ line-height: normal;
+ padding: var(--spacing-padding-s) var(--spacing-padding-m);
+ text-align: start;
}
& th:first-child {
- border-top-left-radius: ${(props) => props.theme.headerBorderRadius};
- padding-left: ${(props) =>
- props.mode === "default" ? props.theme.firstChildPaddingLeft : props.theme.firstChildPaddingLeftReduced};
+ border-top-left-radius: var(--border-radius-s);
+ padding-left: var(--spacing-padding-ml);
}
& th:last-child {
- border-top-right-radius: ${(props) => props.theme.headerBorderRadius};
- padding-right: ${(props) =>
- props.mode === "default" ? props.theme.lastChildPaddingRight : props.theme.lastChildPaddingRightReduced};
+ border-top-right-radius: var(--border-radius-s);
+ padding-right: var(--spacing-padding-ml);
}
& td:first-child {
- padding-left: ${(props) =>
- props.mode === "default" ? props.theme.firstChildPaddingLeft : props.theme.firstChildPaddingLeftReduced};
+ padding-left: var(--spacing-padding-ml);
}
& td:last-child {
- padding-right: ${(props) =>
- props.mode === "default" ? props.theme.lastChildPaddingRight : props.theme.lastChildPaddingRightReduced};
+ padding-right: var(--spacing-padding-ml);
}
`;
-DxcTable.ActionsCell = DxcActionsCell;
+const ActionsContainer = styled.div`
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-gap-s);
+
+ /* Action icons and dropdown trigger selector */
+ > button:enabled,
+ > div > button:enabled {
+ color: var(--color-fg-primary-strong);
+ }
+`;
+
+const DxcActionsCell = ({ actions }: ActionsCellPropsType) => {
+ const actionIcons = useMemo(() => actions.filter((action) => !action.options), [actions]);
+ const dropdownAction = useMemo(() => actions.find((action) => action.options), [actions]);
+
+ return (
+
+ {actionIcons.map(
+ (action, index) =>
+ index < (dropdownAction ? 2 : 3) && (
+
+ );
+};
+
+const DxcTable = ({ children, margin, mode = "default" }: TablePropsType) => (
+
+
+
+);
+DxcTable.ActionsCell = DxcActionsCell;
+export { DxcActionsCell };
export default DxcTable;
diff --git a/packages/lib/src/table/dropdownTheme.ts b/packages/lib/src/table/dropdownTheme.ts
deleted file mode 100644
index cef4ef7e76..0000000000
--- a/packages/lib/src/table/dropdownTheme.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { componentTokens } from "../common/variables";
-
-export default {
- dropdown: {
- // ActionIcon size tokens
- buttonIconSize: "16px",
- buttonPaddingTop: "4px",
- buttonPaddingBottom: "4px",
- buttonPaddingLeft: "4px",
- buttonPaddingRight: "4px",
- buttonHeight: "24px",
- buttonBorderRadius: "2px",
- buttonBorderStyle: "none",
- buttonBorderThickness: "0px",
- buttonBorderColor: "transparent",
- optionFontSize: "14px",
- optionPaddingTop: "0px",
- optionPaddingBottom: "0px",
- optionPaddingLeft: "16px",
- optionPaddingRight: "16px",
-
- // Table tokens
- buttonBackgroundColor: componentTokens.table.actionBackgroundColor,
- hoverButtonBackgroundColor: componentTokens.table.hoverActionBackgroundColor,
- activeButtonBackgroundColor: componentTokens.table.activeActionBackgroundColor,
- buttonIconColor: componentTokens.table.actionIconColor,
- disabledColor: componentTokens.table.disabledActionIconColor,
- disabledButtonBackgroundColor: componentTokens.table.disabledActionBackgroundColor,
- focusColor: componentTokens.table.focusActionBorderColor,
-
- // Dropdown tokens
- buttonFontFamily: componentTokens.dropdown.buttonFontFamily,
- buttonFontSize: componentTokens.dropdown.buttonFontSize,
- buttonFontStyle: componentTokens.dropdown.buttonFontStyle,
- buttonFontWeight: componentTokens.dropdown.buttonFontWeight,
- buttonFontColor: componentTokens.dropdown.buttonFontColor,
- buttonIconSpacing: componentTokens.dropdown.buttonIconSpacing,
- disabledButtonBorderColor: componentTokens.dropdown.disabledButtonBorderColor,
- optionBackgroundColor: componentTokens.dropdown.optionBackgroundColor,
- hoverOptionBackgroundColor: componentTokens.dropdown.hoverOptionBackgroundColor,
- activeOptionBackgroundColor: componentTokens.dropdown.activeOptionBackgroundColor,
- optionFontFamily: componentTokens.dropdown.optionFontFamily,
- optionFontStyle: componentTokens.dropdown.optionFontStyle,
- optionFontWeight: componentTokens.dropdown.optionFontWeight,
- optionFontColor: componentTokens.dropdown.optionFontColor,
- optionIconSize: componentTokens.dropdown.optionIconSize,
- optionIconSpacing: componentTokens.dropdown.optionIconSpacing,
- optionIconColor: componentTokens.dropdown.optionIconColor,
- caretIconSize: componentTokens.dropdown.caretIconSize,
- caretIconColor: componentTokens.dropdown.caretIconColor,
- caretIconSpacing: componentTokens.dropdown.caretIconSpacing,
- borderRadius: componentTokens.dropdown.borderRadius,
- borderStyle: componentTokens.dropdown.borderStyle,
- borderThickness: componentTokens.dropdown.borderThickness,
- borderColor: componentTokens.dropdown.borderColor,
- scrollBarThumbColor: componentTokens.dropdown.scrollBarThumbColor,
- scrollBarTrackColor: componentTokens.dropdown.scrollBarTrackColor,
- },
-};
diff --git a/packages/lib/src/table/types.ts b/packages/lib/src/table/types.ts
index 0c9350550b..4152ab4963 100644
--- a/packages/lib/src/table/types.ts
+++ b/packages/lib/src/table/types.ts
@@ -2,28 +2,35 @@ import { ReactNode } from "react";
import { Margin, SVG, Space } from "../common/utils";
import { Option } from "../dropdown/types";
-export type ActionCellsPropsType = {
- actions: ActionsPropsType;
+type BaseActionCell = {
+ disabled?: boolean;
+ tabIndex?: number;
+ title: string;
};
-export type ActionsPropsType = Array<
- | {
- icon: string | SVG;
- title: string;
- onClick: () => void;
- disabled?: boolean;
- tabIndex?: number;
- options?: never;
- }
- | {
- icon?: never;
- title: string;
- onClick: (value?: string) => void;
- disabled?: boolean;
- tabIndex?: number;
- options: Option[];
- }
->;
+type ActionCell = BaseActionCell &
+ (
+ | {
+ icon: string | SVG;
+ onClick: () => void;
+ options?: never;
+ }
+ | {
+ icon?: never;
+ onClick: (value?: string) => void;
+ options: Option[];
+ }
+ );
+
+export type ActionsCellPropsType = {
+ /**
+ * It represents a list of interactive elements that will work as buttons or as a dropdown. Those with an icon from Material Symbols
+ * or a SVG are treated as buttons. If any element lacks an icon and includes options, it is interpreted as a dropdown.
+ * Only the first action with options will be displayed and only up to 3 actions.
+ * In the case of the dropdown the click function will pass the value assigned to the option.
+ */
+ actions: ActionCell[];
+};
type Props = {
/**