- When true, limits the user to single-open section at a time. When false, multiple sections can be opened
- simultaneously.
+
+
+ children
+
- false
+ {`ReactElement[] | ReactElement`}
+
Contains one or more accordion items.
+
-
defaultIndexActive
@@ -52,25 +50,27 @@ const sections = [
-
-
indexActive
+
independent
- number | number[]
+ boolean
- The index of the active accordion. If undefined, the component will be uncontrolled and the active
- accordion will be managed internally by the component. If null, the component will be controlled and all
- accordions will be closed. If the accordion is not independent, several accordions can be activated.
+ When true, limits the user to single-open section at a time. When false, multiple sections can be opened
+ simultaneously.
+
+
+ false
-
-
-
onActiveChange
+
indexActive
- {`(index: number | number[]) => void`}
+ number | number[]
- This function will be called when the user clicks on an accordion. The index of the clicked accordion will
- be passed as a parameter.
+ The index of the active accordion. If undefined, the component will be uncontrolled and the active
+ accordion will be managed internally by the component. If null, the component will be controlled and all
+ accordions will be closed. If the accordion is not independent, several accordions can be activated.
-
@@ -86,16 +86,14 @@ const sections = [
-
+
onActiveChange
-
-
- children
-
+ {`(index: number | number[]) => void`}
- {`ReactElement[] | ReactElement`}
+ This function will be called when the user clicks on an accordion. The index of the clicked accordion will
+ be passed as a parameter.
-
Contains one or more accordion items.
-
@@ -120,56 +118,48 @@ const sections = [
-
-
-
- label
-
-
+
assistiveText
string
-
The panel label.
+
Assistive text to be placed on the right side of the panel.
Badge component to add extra value to the accordion.
+
The expanded panel of the accordion. This area can be used to render custom content.
-
+
disabled
-
-
- statusLight
-
+ boolean
+
If true, the component will be disabled.
- React.ReactNode
+ false
-
Status light component to add extra value to the accordion.
-
-
icon
@@ -187,34 +177,42 @@ const sections = [
-
-
assistiveText
+
+
+
+ label
+
+
string
-
Assistive text to be placed on the right side of the panel.
+
The panel label.
-
-
disabled
- boolean
+
+
+ statusLight
+
-
If true, the component will be disabled.
- false
+ React.ReactNode
+
Status light component to add extra value to the accordion.
+
-
-
-
- children
+
+
+ subLabel
- React.ReactNode
+ string
-
The expanded panel of the accordion. This area can be used to render custom content.
+
Additional info label positioned under the label.
-
@@ -266,15 +264,11 @@ const sections = [
},
];
-const AccordionUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const AccordionCodePage = () => (
+
+
+
+
+);
-export default AccordionUsagePage;
+export default AccordionCodePage;
diff --git a/apps/website/screens/components/accordion/code/examples/accordions.ts b/apps/website/screens/components/accordion/code/examples/accordions.ts
deleted file mode 100644
index 1e63a60206..0000000000
--- a/apps/website/screens/components/accordion/code/examples/accordions.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { DxcAccordion, DxcInset, DxcBadge, DxcStatusLight } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- return (
-
-
- }}
- statusLight={}
- >
-
- Person information
-
-
- }}
- defaultIsExpanded
- >
-
- Person creation information
-
-
- }}
- statusLight={}
- defaultIsExpanded
- >
-
- Interactions information
-
-
- }}
- >
-
- Deletion information
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcAccordion,
- DxcInset,
- DxcBadge,
- DxcStatusLight,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/accordions.tsx b/apps/website/screens/components/accordion/code/examples/accordions.tsx
new file mode 100644
index 0000000000..28fe9f6f47
--- /dev/null
+++ b/apps/website/screens/components/accordion/code/examples/accordions.tsx
@@ -0,0 +1,61 @@
+import { DxcAccordion, DxcInset, DxcBadge, DxcStatusLight, DxcParagraph } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ return (
+
+
+ }}
+ statusLight={}
+ >
+
+ Person information
+
+
+ }}
+ defaultIsExpanded
+ >
+
+ Person creation information
+
+
+ }}
+ statusLight={}
+ defaultIsExpanded
+ >
+
+ Interactions information
+
+
+ }}
+ >
+
+ Deletion information
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAccordion,
+ DxcInset,
+ DxcBadge,
+ DxcStatusLight,
+ DxcParagraph,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts
deleted file mode 100644
index 7e0668bd36..0000000000
--- a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { DxcInset, DxcAccordion, DxcBadge, DxcStatusLight } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
- }}
- statusLight={}
- >
-
- To edit your profile you need to go to Settings and click on Profile.
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcInset,
- DxcAccordion,
- DxcBadge,
- DxcStatusLight,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx
new file mode 100644
index 0000000000..cc09cdc7c8
--- /dev/null
+++ b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx
@@ -0,0 +1,30 @@
+import { DxcInset, DxcAccordion, DxcBadge, DxcStatusLight, DxcParagraph } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+ }}
+ statusLight={}
+ >
+
+ To edit your profile you need to go to Settings and click on Profile.
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcAccordion,
+ DxcBadge,
+ DxcStatusLight,
+ DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/basicUsage.ts b/apps/website/screens/components/accordion/code/examples/basicUsage.ts
deleted file mode 100644
index d0d34468aa..0000000000
--- a/apps/website/screens/components/accordion/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { DxcAccordion, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
- To edit your profile you need to go to Settings and click on Profile.
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcAccordion,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/basicUsage.tsx b/apps/website/screens/components/accordion/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..5f9f11bb9b
--- /dev/null
+++ b/apps/website/screens/components/accordion/code/examples/basicUsage.tsx
@@ -0,0 +1,24 @@
+import { DxcAccordion, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+ To edit your profile you need to go to Settings and click on Profile.
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAccordion,
+ DxcParagraph,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/controlled.ts b/apps/website/screens/components/accordion/code/examples/controlled.ts
deleted file mode 100644
index 67fffb686b..0000000000
--- a/apps/website/screens/components/accordion/code/examples/controlled.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { DxcAccordion, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [indexAccordion, setIndexAccordion] = useState(0);
- const onActiveChange = (index) => {
- setIndexAccordion((currentIndex) => (currentIndex === index ? -1 : index));
- };
-
- return (
-
-
-
-
- To edit your profile you need to go to Settings and click on Profile.
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcAccordion,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/controlled.tsx b/apps/website/screens/components/accordion/code/examples/controlled.tsx
new file mode 100644
index 0000000000..669c2a319c
--- /dev/null
+++ b/apps/website/screens/components/accordion/code/examples/controlled.tsx
@@ -0,0 +1,33 @@
+import { DxcAccordion, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [indexAccordion, setIndexAccordion] = useState(0);
+ const onActiveChange = (index) => {
+ setIndexAccordion((currentIndex) => (currentIndex === index ? -1 : index));
+ };
+
+ return (
+
+
+
+
+ To edit your profile you need to go to Settings and click on Profile.
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAccordion,
+ DxcInset,
+ DxcParagraph,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/icons.ts b/apps/website/screens/components/accordion/code/examples/icons.ts
deleted file mode 100644
index 75a85109df..0000000000
--- a/apps/website/screens/components/accordion/code/examples/icons.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DxcAccordion, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- return (
-
-
-
-
- To edit your profile you need to go to Settings and click on
- Profile.
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcAccordion,
- DxcInset,
- DxcFlex,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/icons.tsx b/apps/website/screens/components/accordion/code/examples/icons.tsx
new file mode 100644
index 0000000000..31e3424c19
--- /dev/null
+++ b/apps/website/screens/components/accordion/code/examples/icons.tsx
@@ -0,0 +1,28 @@
+import { DxcAccordion, DxcFlex, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ return (
+
+
+
+
+ To edit your profile you need to go to Settings and click on
+ Profile.
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAccordion,
+ DxcInset,
+ DxcFlex,
+ DxcParagraph,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/uncontrolled.ts b/apps/website/screens/components/accordion/code/examples/uncontrolled.ts
deleted file mode 100644
index c9b9fc4928..0000000000
--- a/apps/website/screens/components/accordion/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { DxcAccordion, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- return (
-
-
-
-
- To edit your profile you need to go to Settings and click on Profile.
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcAccordion,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx b/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..a7d3073df9
--- /dev/null
+++ b/apps/website/screens/components/accordion/code/examples/uncontrolled.tsx
@@ -0,0 +1,25 @@
+import { DxcAccordion, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ return (
+
+
+
+
+ To edit your profile you need to go to Settings and click on Profile.
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAccordion,
+ DxcInset,
+ DxcParagraph,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx
new file mode 100644
index 0000000000..7835c3baee
--- /dev/null
+++ b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx
@@ -0,0 +1,311 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import anatomy from "./images/accordion_anatomy.png";
+import Example from "@/common/example/Example";
+import basicExample from "./examples/basicExample";
+import nestedExample from "./examples/nestedExample";
+import placement from "./images/accordion_placement.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The accordion component is designed to present large amounts of content in a small space by leveraging
+ progressive disclosure. It helps improve the user experience by breaking down information into manageable
+ sections, allowing users to focus only on what they need.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Header: serves as the trigger for expanding or collapsing the section. It acts as a summary
+ of the content, allowing users to decide if they want to interact with it.
+
+
+ Content area: the expanded section where detailed information or functionality resides.
+
+
+ Title: a concise and descriptive label that summarizes the content of the accordion
+ section. It helps users understand what type of information they can expect to find inside.
+
+
+ Chevron icon(Expand/collapse): A visual indicator of the accordion's current
+ state (expanded or collapsed). It provides an affordance for interaction and ensures users can toggle the
+ accordion intuitively.
+
+
+ Left secondary element(Optional): Provides additional context or enhances the
+ user experience. Only one of the following can be used per accordion section to avoid
+ visual clutter:
+
+
+ Icon: Adds visual context or aids recognition by representing the content type or
+ purpose of the section.
+
+
+ Badge: Displays supplemental information, such as a notification count or status, to
+ give users a quick overview of the section.
+
+
+
+
+ Sublabel(Optional): Offers additional context or instruction.
+
+
+ Right secondary element(Optional): Also limited to one element
+ per section. May include:
+
+
+ Helper text: Offers supporting guidance or content summary.
+
+
+ Status light: A visual status indicator (e.g., completed, in progress, error).
+
+
+ Badge: Similar to the left badge, positioned right for layout flexibility.
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Using accordions",
+ subSections: [
+ {
+ title: "Behavior and interaction",
+ content: (
+
+ The accordion component has two main states: collapsed and expanded. The chevron icon at the end of the
+ accordion indicates which state the accordion is in. Accordions begin by default in the collapsed state with
+ all content panels closed. Starting in a collapsed state gives the user a high level overview of the
+ available information.
+
+ ),
+ },
+ {
+ title: "Content area",
+ content: (
+ <>
+
+ The content area can contain other components, images, tables, and every custom feature that can be
+ supported inside the element container.
+
+
+
+ ),
+ },
+ {
+ title: "Allowing multiple sections open vs single-open behavior",
+ content: (
+ <>
+
+ The accordion component can be configured to allow either multiple sections to be open
+ simultaneously or limit the user to a single-open section at a time. Each approach has
+ specific use cases, but it's important to prioritise user needs and content hierarchy when deciding which
+ behavior to implement.
+
+
+
+ Allow multiple sections open
+
+ This approach gives users full control over the visibility of content, allowing them to open or
+ collapse multiple sections at the same time. It's particularly useful when:
+
+
+
+ Users need to compare or reference information across different sections simultaneously.
+
+
+ The content in each section is independent and doesn't require strict linear navigation.
+
+
+ There is enough vertical space to accommodate multiple expanded sections without overwhelming the
+ layout.
+
+
+
+
+ Single-open behavior
+
+ Some implementations restrict the accordion to allow only one section to be open at a time. When a
+ user expands a new section, the previously expanded section collapses automatically. This pattern is
+ suitable when:
+
+
+
+ The content is closely related or mutually exclusive, making it logical to view only one section at
+ a time.
+
+
+ Vertical space is limited, and having multiple sections open could cause usability or layout issues.
+
+
+ A simplified and more guided user experience is desired, such as in wizards or step-by-step
+ processes.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Placement and alignment",
+ content: (
+ <>
+
+ Accordions can be placed with main page content or placed inside of a container such as a side panel or
+ tile.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Responsive behavior",
+ content: (
+ <>
+
+ In small devices, extremely long pages are detrimental to the user experience. Collapsing information
+ minimises excessive scrolling and gives an overview of the structure and content available on the page.
+
+
+ In mobile use 100% of the available screen width
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+ To ensure a clean, efficient, and user-friendly experience, follow these best practices when designing and
+ implementing accordion components:
+
+ ),
+ subSections: [
+ {
+ title: "Use accordions to manage space and structure",
+ content: (
+
+
+ Apply accordions when you need to organize large or secondary content into collapsible sections.
+
+
+ They are particularly useful for FAQs, optional content, or detailed information nested under high-level
+ summaries.
+
+
+ Collapsing content helps reduce scrolling and offers users control over what they choose to engage with.
+
+
+ ),
+ },
+ {
+ title: "Keep headers simple and informative",
+ content: (
+
+
+ Each accordion header must include a clear, concise title that describes the content inside.
+
+
+ Use a sublabel only when additional context is necessary — it should not overpower the title.
+
+
+ Avoid hiding essential or primary information inside an accordion panel.
+
+
+ ),
+ },
+ {
+ title: "Limit secondary elements for clarity",
+ content: (
+
+
+ Use only one secondary element per side of the header (left and right) to avoid clutter.
+
+
+ Choose either an icon or a badge for the left side, and a helper text, badge, or status light for the
+ right side —never more than one per side.
+
+
+ Avoid placing two elements of the same type in one header (e.g., two badges), as this reduces scannability
+ and can confuse users.
+
+
+ ),
+ },
+ {
+ title: "Respect visual hierarchy and semantic meaning",
+ content: (
+
+
+ Always prioritize the visibility of mandatory elements like the title over optional elements.
+
+
+ If both a badge and a status light are present, avoid applying semantic colors to the badge to prevent
+ visual conflict with the status indicator.
+
+
+ Maintain consistency in layout and alignment to support content scanning, especially when multiple
+ accordion sections are used together.
+
+
+ ),
+ },
+ {
+ title: "Choose the appropriate expand behavior",
+ content: (
+
+
+ Use single-open behavior when content is interdependent, linear, or when space is
+ limited.
+
+
+ Use multi-open behavior when content is independent or when users may need to view
+ multiple sections at once.
+
+
+ Consider the context of use and user goals when deciding which interaction pattern is most appropriate.
+
+
+ ),
+ },
+ {
+ title: "Design for mobile and accessibility",
+ content: (
+
+
+ Accordions should span the full width of the screen on smaller devices for easier interaction.
+
+
+ Ensure all interactive elements are large enough to be tapped comfortably on touchscreens.
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const AccordionOverviewPage = () => (
+
+
+
+
+);
+
+export default AccordionOverviewPage;
diff --git a/apps/website/screens/components/accordion/overview/examples/basicExample.tsx b/apps/website/screens/components/accordion/overview/examples/basicExample.tsx
new file mode 100644
index 0000000000..be7d6eb7ac
--- /dev/null
+++ b/apps/website/screens/components/accordion/overview/examples/basicExample.tsx
@@ -0,0 +1,86 @@
+import { DxcAccordion, DxcInset, DxcBadge, DxcStatusLight, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+ Details
+
+
+
+
+
+
+ Details
+
+
+
+
+ }
+ subLabel="Jan, 09 2025"
+ >
+
+ Details
+
+
+
+
+ }
+ >
+
+ Details
+
+
+
+
+ }}
+ label="Life Policy"
+ subLabel="Ref — 1236554546"
+ >
+
+ Details
+
+
+
+
+ }}
+ label="Life Policy"
+ statusLight={}
+ subLabel="Ref — 1236554546"
+ >
+
+ Details
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAccordion,
+ DxcInset,
+ DxcBadge,
+ DxcFlex,
+ DxcStatusLight,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/accordion/overview/examples/nestedExample.tsx b/apps/website/screens/components/accordion/overview/examples/nestedExample.tsx
new file mode 100644
index 0000000000..32651a4795
--- /dev/null
+++ b/apps/website/screens/components/accordion/overview/examples/nestedExample.tsx
@@ -0,0 +1,37 @@
+import { DxcAccordion, DxcInset, DxcBadge, DxcStatusLight, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+ Details
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAccordion,
+ DxcInset,
+ DxcBadge,
+ DxcFlex,
+ DxcStatusLight,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/accordion/overview/images/accordion_anatomy.png b/apps/website/screens/components/accordion/overview/images/accordion_anatomy.png
new file mode 100644
index 0000000000..a6d49b7f7a
Binary files /dev/null and b/apps/website/screens/components/accordion/overview/images/accordion_anatomy.png differ
diff --git a/apps/website/screens/components/accordion/overview/images/accordion_placement.png b/apps/website/screens/components/accordion/overview/images/accordion_placement.png
new file mode 100644
index 0000000000..f2e19cd4e5
Binary files /dev/null and b/apps/website/screens/components/accordion/overview/images/accordion_placement.png differ
diff --git a/apps/website/screens/components/accordion/specs/AccordionSpecsPage.tsx b/apps/website/screens/components/accordion/specs/AccordionSpecsPage.tsx
deleted file mode 100644
index 3430294597..0000000000
--- a/apps/website/screens/components/accordion/specs/AccordionSpecsPage.tsx
+++ /dev/null
@@ -1,611 +0,0 @@
-import { DxcFlex, DxcTable, DxcLink, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Code from "@/common/Code";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import Image from "@/common/Image";
-import accordionStates from "./images/accordion_states.png";
-import accordionAnatomy from "./images/accordion_anatomy.png";
-import accordionSpecs from "./images/accordion_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- The accordion header can get four different states based on user interaction. States: enabled
- , hover, focus and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Header
-
- Left secondary element (Optional)
-
- Title
- Sublabel
-
- Right secondary element (Optional)
-
-
- Caret icon (Expand/collapse)
-
- Content area
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- {
- title: "Margin",
- content: (
- <>
-
- Margin properties can be applied independently to top, right,{" "}
- bottom and left sides of the card container.
-
-
-
-
-
Margin
-
Value
-
-
-
-
-
- xxsmall
-
-
4px
-
-
-
- xsmall
-
-
8px
-
-
-
- small
-
-
12px
-
-
-
- medium
-
-
16px
-
-
-
- large
-
-
24px
-
-
-
- xlarge
-
-
32px
-
-
-
- xxlarge
-
-
48px
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG 2.2",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.1.1 Keyboard
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 4.1.2 Name, Role, Value
-
-
-
- ),
- },
- {
- title: "WAI-ARIA 1.2",
- content: (
-
-
- WAI-ARIA Authoring Practices 1.2 -{" "}
-
- 3.1 Accordion (Sections With Show/Hide Functionality)
-
-
-
- WAI-ARIA Authoring Practices 1.2 -{" "}
-
- Accordion Design Pattern
-
-
-
- ),
- },
- {
- title: "Usability known issues",
- subSections: [
- {
- title: "Printing",
- content: (
-
- Accordions are often not well suited for printing documents and require people to print snippets of
- content at a time.
-
- ),
- },
- ],
- },
- ],
- },
-];
-
-const AccordionSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default AccordionSpecsPage;
diff --git a/apps/website/screens/components/accordion/specs/images/accordion_anatomy.png b/apps/website/screens/components/accordion/specs/images/accordion_anatomy.png
deleted file mode 100644
index 62369e4b95..0000000000
Binary files a/apps/website/screens/components/accordion/specs/images/accordion_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/accordion/specs/images/accordion_specs.png b/apps/website/screens/components/accordion/specs/images/accordion_specs.png
deleted file mode 100644
index ca2d0df214..0000000000
Binary files a/apps/website/screens/components/accordion/specs/images/accordion_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/accordion/specs/images/accordion_states.png b/apps/website/screens/components/accordion/specs/images/accordion_states.png
deleted file mode 100644
index 6f503ddb48..0000000000
Binary files a/apps/website/screens/components/accordion/specs/images/accordion_states.png and /dev/null differ
diff --git a/apps/website/screens/components/accordion/usage/AccordionUsagePage.tsx b/apps/website/screens/components/accordion/usage/AccordionUsagePage.tsx
deleted file mode 100644
index 79b4410f13..0000000000
--- a/apps/website/screens/components/accordion/usage/AccordionUsagePage.tsx
+++ /dev/null
@@ -1,392 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import accordionMainParts from "./images/accordion_main_parts.png";
-import accordionElements from "./images/accordion_elements.png";
-import accordionExamples from "./images/accordion_examples.png";
-import accordionContent from "./images/accordion_content.png";
-import accordionPlacement from "./images/accordion_placement.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- The accordion component is designed to present large amounts of content in a small space by leveraging
- progressive disclosure. It helps improve the user experience by breaking down information into manageable
- sections, allowing users to focus only on what they need.
-
- ),
- subSections: [
- {
- title: "Main parts",
- content: (
- <>
- Each accordion section consists of two main parts:
-
-
-
-
-
- Header: Serves as the trigger for expanding or collapsing the section. It acts as a
- summary of the content, allowing users to decide if they want to interact with it.{" "}
-
-
- Content area: The expanded section where detailed information or functionality resides.{" "}
-
-
-
- ),
- subSections: [
- {
- title: "Header layout, primary and secondary elements",
- content: (
- <>
-
- The accordion header is divided into two sections: left and right, each of which can contain different
- UI elements. These elements are categorised as primary or secondary, based on their importance and
- role within the accordion's functionality.
-
-
-
- ),
- subSections: [
- {
- title: "Primary Elements",
- content: (
- <>
-
- The primary elements are mandatory and provide the basic functionality of the
- accordion. These ensure the component is functional and intuitive for users:
-
-
-
- Title: A concise and descriptive label that summarises the content of the
- accordion section. It helps users understand what type of information they can expect to find
- inside.
-
-
- Chevron Icon: A visual indicator of the accordion’s current state (expanded or
- collapsed). It provides an affordance for interaction and ensures users can toggle the accordion
- intuitively.
-
-
-
- Without these elements, the accordion cannot effectively communicate its purpose or provide a
- clear interaction model.
-
-
- ),
- },
- {
- title: "Secondary Elements",
- content: (
- <>
-
- The secondary elements are optional and provide additional context or enhance the
- user experience. While not essential for the accordion's functionality, they add useful details or
- visual hierarchy.
-
-
-
- Left secondary elements:
-
-
- Icon: Adds visual context or aids recognition by representing the content
- type or purpose of the section.
-
-
- Badge: Displays supplemental information, such as a notification count or
- status, to give users a quick overview of the section.
-
-
-
-
- Right secondary elements:
-
-
- Helper text: Provides additional context, such as brief instructions or a
- summary of the content within the section.
-
-
- Status light: Displays a visual indicator of the section’s status (e.g.,
- completed, in progress, or error).
-
-
- Badge: Similar to the left-side badge, but placed on the right for better
- alignment in specific layouts.
-
-
-
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Content area",
- content: (
- <>
-
- The content area can contain other components, images, tables, and every custom feature that can be
- supported inside the element container.
-
-
-
- Nesting is allowed and icons can be used as a complement to the header label.
-
-
- ),
- },
- ],
- },
- {
- title: "Placement and alignment",
- subSections: [
- {
- title: "Placement",
- content: (
- <>
-
- Accordions can be placed with main page content or placed inside of a container such as a side panel
- or tile.
-
-
-
-
-
- ),
- },
- {
- title: "Alignment",
- content: (
-
- By default the chevron icon is placed on the end side of the header. This allows for the title on the
- start side to align with other type elements in the layout.
-
- ),
- },
- ],
- },
- {
- title: "Behavior and interaction",
- content: (
- <>
-
- The accordion component has two main states: collapsed and expanded. The chevron icon at the end of the
- accordion indicates which state the accordion is in. Accordions begin by default in the collapsed state
- with all content panels closed. Starting in a collapsed state gives the user a high level overview of the
- available information.
-
-
-
- Trigger collapsed and expanded states when clicking on either the header or icon.
-
-
- Use icons and animation to easily reflect collapsed and expanded states.
-
-
-
- Use a chevron icon to indicate the expand/collapse behavior.
-
-
-
- When the panel expands, the chevron icon rotates 180 degrees counterclockwise.
-
-
- When the panel collapses, the chevron icon rotates 180 degrees clockwise.
-
-
-
-
-
- ),
- subSections: [
- {
- title: "Allowing multiple sections open vs single-open behavior",
- content: (
-
- The accordion component can be configured to allow either multiple sections to be open
- simultaneously or limit the user to a single-open section at a time. Each approach has
- specific use cases, but it’s important to prioritise user needs and content hierarchy when deciding
- which behavior to implement.
-
- ),
- subSections: [
- {
- title: "Allow multiple sections open",
- content: (
- <>
-
- This approach gives users full control over the visibility of content, allowing them to open or
- collapse multiple sections at the same time. It’s particularly useful when:
-
-
-
- Users need to compare or reference information across different sections simultaneously.
-
-
- The content in each section is independent and doesn’t require strict linear navigation.
-
-
- There is enough vertical space to accommodate multiple expanded sections without overwhelming
- the layout.
-
-
-
- ),
- },
- {
- title: "Single-open behavior",
- content: (
- <>
-
- Some implementations restrict the accordion to allow only one section to be open
- at a time. When a user expands a new section, the previously expanded section collapses
- automatically. This pattern is suitable when:
-
-
-
- The content is closely related or mutually exclusive, making it logical to view only one section
- at a time.
-
-
- Vertical space is limited, and having multiple sections open could cause usability or layout
- issues.
-
-
- A simplified and more guided user experience is desired, such as in wizards or step-by-step
- processes.
-
-
-
- ),
- },
- ],
- },
- ],
- },
- {
- title: "Best practices",
- content: (
- <>
-
-
- One element per side: Each side of the header (left and{" "}
- right) should only include one secondary element to maintain a clean
- and organised visual hierarchy.
-
-
- No duplicates: Avoid including multiple instances of the same type of element in the
- header (e.g., two badges or two status lights), as this can create visual clutter and confuse users.
-
-
- Semantic colors: If both a badge and a status light{" "}
- are included, avoid using semantic colors (e.g., red, green) for the badge to prevent it from competing
- visually with the status light.
-
-
- Growth priority: Mandatory and descriptive elements, such as the title, are prioritised
- over optional elements to ensure that essential information is always visible and accessible.
-
-
-
- ),
- subSections: [
- {
- title: "Mobile",
- content: (
- <>
-
- In small devices, extremely long pages are detrimental to the user experience. Collapsing information
- minimises excessive scrolling and gives an overview of the structure and content available on the
- page.
-
-
- In mobile use 100% of the available screen width.
-
-
- ),
- },
- {
- title: "Do's",
- content: (
- <>
- Use an accordion when:
-
-
- Displaying and grouping additional information that is related or supplemental to
- the primary content.
-
-
- Shortening pages and reducing scrolling, especially for optional or non-critical
- content.
-
-
- Providing users with granular control over the visibility of information, helping
- them interact with the page in a way that meets their specific needs.
-
-
- Organising FAQs or similar repeated structures, where content can be logically
- divided into expandable sections.
-
-
- Enhancing content hierarchy by nesting detailed or secondary content under a more
- general overview.
-
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
- <>
- Don’t use an accordion if:
-
-
- The majority of the content on the page is crucial for the user to see upfront, as
- hiding it may increase friction or confusion.
-
-
- You need to display a list of selectable options (e.g., navigation menus or
- filters)—a dropdown or other list pattern is more appropriate.
-
-
- Critical system information or actions (like alerts, confirmations, or primary
- buttons) need to be visible—these should remain prominent and accessible without requiring user
- interaction.
-
-
- The interaction of expanding and collapsing creates{" "}
- unnecessary complexity or extra clicks for the user.
-
-
-
- ),
- },
- ],
- },
- ],
- },
-];
-
-const AccordionUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default AccordionUsagePage;
diff --git a/apps/website/screens/components/accordion/usage/images/accordion_content.png b/apps/website/screens/components/accordion/usage/images/accordion_content.png
deleted file mode 100644
index bf02e664bd..0000000000
Binary files a/apps/website/screens/components/accordion/usage/images/accordion_content.png and /dev/null differ
diff --git a/apps/website/screens/components/accordion/usage/images/accordion_elements.png b/apps/website/screens/components/accordion/usage/images/accordion_elements.png
deleted file mode 100644
index b508c9908b..0000000000
Binary files a/apps/website/screens/components/accordion/usage/images/accordion_elements.png and /dev/null differ
diff --git a/apps/website/screens/components/accordion/usage/images/accordion_examples.png b/apps/website/screens/components/accordion/usage/images/accordion_examples.png
deleted file mode 100644
index d4c3afd9e2..0000000000
Binary files a/apps/website/screens/components/accordion/usage/images/accordion_examples.png and /dev/null differ
diff --git a/apps/website/screens/components/accordion/usage/images/accordion_main_parts.png b/apps/website/screens/components/accordion/usage/images/accordion_main_parts.png
deleted file mode 100644
index 4aee73941a..0000000000
Binary files a/apps/website/screens/components/accordion/usage/images/accordion_main_parts.png and /dev/null differ
diff --git a/apps/website/screens/components/accordion/usage/images/accordion_placement.png b/apps/website/screens/components/accordion/usage/images/accordion_placement.png
deleted file mode 100644
index d55759d6ec..0000000000
Binary files a/apps/website/screens/components/accordion/usage/images/accordion_placement.png and /dev/null differ
diff --git a/apps/website/screens/components/alert/AlertPageLayout.tsx b/apps/website/screens/components/alert/AlertPageLayout.tsx
index bdaf827c25..0bea78e302 100644
--- a/apps/website/screens/components/alert/AlertPageLayout.tsx
+++ b/apps/website/screens/components/alert/AlertPageLayout.tsx
@@ -6,22 +6,19 @@ import { ReactNode } from "react";
const AlertPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/alert" },
- { label: "Usage", path: "/components/alert/usage" },
- { label: "Specifications", path: "/components/alert/specifications" },
+ { label: "Overview", path: "/components/alert" },
+ { label: "Code", path: "/components/alert/code" },
];
return (
-
+
-
+
- Alert messages are meant to provide contextual feedback about important changes in the interface. They are
- used to convey essential information to the user, ensuring that critical updates or warnings are immediately
- noticeable.
+ Alert messages are meant to provide contextual feedback about important changes in the interface.
-
+
{children}
diff --git a/apps/website/screens/components/alert/code/AlertCodePage.tsx b/apps/website/screens/components/alert/code/AlertCodePage.tsx
index 4fcb17c975..9c86bf51d1 100644
--- a/apps/website/screens/components/alert/code/AlertCodePage.tsx
+++ b/apps/website/screens/components/alert/code/AlertCodePage.tsx
@@ -1,17 +1,15 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import basicUsage from "./examples/basicUsage";
import semantic from "./examples/semantic";
import severalMessages from "./examples/severalMessages";
import Example from "@/common/example/Example";
-import TableCode, { ExtendedTableCode } from "@/common/TableCode";
-import Code from "@/common/Code";
+import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
const actionTypeString = `{
- icon?: (React.ReactNode
+ icon?: string | (React.ReactNode
& React.SVGProps);
label: string;
onClick: () => void;
@@ -126,7 +124,7 @@ const sections = [
-
+
title
@@ -160,15 +158,11 @@ const sections = [
},
];
-const AlertCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const AlertCodePage = () => (
+
+
+
+
+);
export default AlertCodePage;
diff --git a/apps/website/screens/components/alert/code/examples/basicUsage.ts b/apps/website/screens/components/alert/code/examples/basicUsage.ts
deleted file mode 100644
index 6ed0e6778f..0000000000
--- a/apps/website/screens/components/alert/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DxcAlert, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcAlert,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/alert/code/examples/basicUsage.tsx b/apps/website/screens/components/alert/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..45039646b0
--- /dev/null
+++ b/apps/website/screens/components/alert/code/examples/basicUsage.tsx
@@ -0,0 +1,19 @@
+import { DxcAlert, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/code/examples/semantic.ts b/apps/website/screens/components/alert/code/examples/semantic.ts
deleted file mode 100644
index d64d4b4d48..0000000000
--- a/apps/website/screens/components/alert/code/examples/semantic.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DxcAlert, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcAlert,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/alert/code/examples/semantic.tsx b/apps/website/screens/components/alert/code/examples/semantic.tsx
new file mode 100644
index 0000000000..e00db25329
--- /dev/null
+++ b/apps/website/screens/components/alert/code/examples/semantic.tsx
@@ -0,0 +1,22 @@
+import { DxcAlert, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/code/examples/severalMessages.ts b/apps/website/screens/components/alert/code/examples/severalMessages.ts
deleted file mode 100644
index aae1e57a60..0000000000
--- a/apps/website/screens/components/alert/code/examples/severalMessages.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { DxcAlert, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const messages = [
- { text: "Your document as been auto-saved." },
- { text: "You can continue working without worrying, as all changes are automatically saved." },
- { text: "You can also go back to the previous version of the document." },
- ];
-
- return (
-
-
- {} }}
- secondaryAction={{ label: "Back", onClick: () => {} }}
- />
-
-
- );
-}`;
-
-const scope = {
- DxcAlert,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/alert/code/examples/severalMessages.tsx b/apps/website/screens/components/alert/code/examples/severalMessages.tsx
new file mode 100644
index 0000000000..550ef7f1ae
--- /dev/null
+++ b/apps/website/screens/components/alert/code/examples/severalMessages.tsx
@@ -0,0 +1,30 @@
+import { DxcAlert, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const messages = [
+ { text: "Your document as been auto-saved." },
+ { text: "You can continue working without worrying, as all changes are automatically saved." },
+ { text: "You can also go back to the previous version of the document." },
+ ];
+
+ return (
+
+
+ {} }}
+ secondaryAction={{ label: "Back", onClick: () => {} }}
+ />
+
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/overview/AlertOverviewPage.tsx b/apps/website/screens/components/alert/overview/AlertOverviewPage.tsx
new file mode 100644
index 0000000000..8000309b60
--- /dev/null
+++ b/apps/website/screens/components/alert/overview/AlertOverviewPage.tsx
@@ -0,0 +1,494 @@
+import {
+ DxcParagraph,
+ DxcBulletedList,
+ DxcFlex,
+ DxcTable,
+ DxcTypography,
+ DxcLink,
+} from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
+import Image from "@/common/Image";
+import anatomy from "./images/alert_anatomy.png";
+import banner from "./examples/banner";
+import dialog from "./examples/dialog";
+import inline from "./examples/inline";
+import Link from "next/link";
+import Code from "@/common/Code";
+import Example from "@/common/example/Example";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Halstack's Alert component is designed to provide clear and accessible feedback to users, ensuring important
+ messages stand out within an interface. It supports different variants — info, success, warning, and error —
+ allowing teams to communicate various levels of urgency effectively. With options for dismissibility and
+ customizable content, it adapts to different use cases while maintaining consistency. Its structured design
+ enhances readability and ensures a non-intrusive yet noticeable presence.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: the structural wrapper that holds all elements of the alert, defining its size,
+ background, and layout while ensuring proper visibility within the interface.
+
+
+ Icon: a visual indicator that reinforces the alert's purpose (e.g., info, success, warning,
+ error) and helps users quickly identify the type of message
+
+
+ Title: a short, bolded text that provides a concise summary of the alert's content, making
+ it easy for users to grasp its importance at a glance.
+
+
+ Pagination: a navigation element that allows users to browse multiple alerts within the
+ same container, useful for managing sequential or grouped notifications.
+
+
+ Divider: a subtle separator that visually organizes the alert's content, enhancing
+ readability and distinguishing the pagination element from the closable action.
+
+
+ Close action: an interactive button placed next to the pagination (if there's any) that
+ allows the user to dismiss the alert.
+
+
+ Actions: interactive buttons placed within the alert that enable users to take relevant
+ actions in response to the message, such as dismissing, acknowledging, or navigating to further details.
+
+
+ Description: the detailed text within the alert that provides context or additional
+ information about the message, ensuring clarity for the user.
+
+
+
+ ),
+ },
+ {
+ title: "Key interactions and features",
+ content: (
+ <>
+ The key characteristics of our alert component are the following:
+
+
+ Visibility: alerts should be positioned in a place where it can attract the user's eye
+ without too much effort, as it will convey critical messages about the system or important features.
+
+
+ Concise: alert messages should use clear and straight-to-the-point language that conveys
+ the message without unnecessary information, avoiding ambiguity or irrelevant details that could distract or
+ confuse the user.
+
+
+ Relevance: the content displayed on the alert must be directly relevant to the users task
+ or system state.
+
+
+ Actionability: the component provides clear and straightforward actions for the user to
+ take in response to it, such as retrying, seeing details or dismissing the alert.
+
+
+ Persistence: alerts should remain visible long enough for users to read and understand
+ them, but not so long as to become an annoyance. Allow users to dismiss alerts once they have acknowledged
+ them.
+
+
+ Sequential display: only one alert must be visible at a time. If multiple alerts are
+ triggered, subsequent alerts wait until the current alert is dismissed before appearing. This behavior
+ prevents alert stacking and ensures users address each alert individually.
+
+
+
+ ),
+ },
+ {
+ title: "Semantic modes",
+ content: (
+ <>
+
+ Depending on the message that the alert is showcasing, we can find four different semantic meanings of the
+ component:
+
+
+
+
+
Type
+ Description
+
+
+
+
+
+
+ Information
+
+
+
+ Informational messages are used exclusively to assist the user with directional or explanatory text
+ about a complex or seldom used process.
+
+
+
+
+
+ Warning
+
+
+
+ Alert or warning messages should be displayed when there is a potential obstacle in completing a process
+ as intended.
+
+
+
+
+
+ Error
+
+
+
+ Error messages convey a critical system problem that requires user and/or technical intervention to
+ correct.
+
+
+
+
+
+ Success
+
+
+
+ Success messages should be used to assure user that a system calculation or data submission was
+ completed correctly.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+
+ Alerts can appear in various scenarios within a product, making it crucial to select the most appropriate
+ variant for effectively conveying the message. Halstack offers three variants of its Alert component, each
+ specifically designed and tailored to address common use cases.
+
+
+ ),
+ subSections: [
+ {
+ title: "Alert banner",
+ content: (
+ <>
+
+ Displayed always bellow the header of the site, the Alert banner is used for critical system or
+ application messages. These alerts are actionable, meaning the user can interact with the message to
+ resolve the issue directly from the alert itself. However, closing the message is not considered an action
+ and is mandatory, as the message remains visible and cannot be dismissed until addressed. Additionally, if
+ there are multiple critical system messages, the Alert banner allows pagination between them, ensuring
+ that users can manage and resolve all critical issues systematically.
+
+
+ Use cases:
+
+
+
+ System disruption notification: informing users about a critical system disruption that
+ requires immediate attention, with an option to view more details or contact support.
+
+
+ Security breach alert: warning users of a potential security breach, with actions to
+ change passwords or review account activity.
+
+
+ Critical update required: notifying users that a crucial software update is available
+ and needs to be installed to continue using the application safely.
+
+
+ Payment failure notification: informing users that a recent payment has failed and
+ providing options to retry the payment or update billing information.
+
+
+
+
+ ),
+ },
+ {
+ title: "Alert dialog",
+ content: (
+ <>
+
+ The Alert dialog displays important information that demands immediate user attention. It is presented
+ with an overlay that blocks the rest of the interface, ensuring that the user addresses the alert before
+ proceeding. Similar to other variants, the Dialog Alert allows up to two actions, excluding the mandatory
+ close action. This variant ensures that critical information is not overlooked by requiring the user to
+ interact with the dialog to continue using the application.
+
+
+ Use cases:
+
+
+
+ Data loss warning: informing users that unsaved changes will be lost if they proceed
+ with an action, with options to save changes or discard them.
+
+
+ Permission request: requesting user permission for access to sensitive data or devide
+ features, with actions to grant or deny permission.
+
+
+ Policy renewal reminder: notifying users that a client's insurance policy is about to
+ expire, with options to renew the policy or contact support for assistance.
+
+
+ Important policy update: alerting users to important changes in the terms of service or
+ privacy policy, requiring them to acknowledge the update before continuing.
+
+
+
+
+ ),
+ },
+ {
+ title: "Inline alert",
+ content: (
+ <>
+
+ The Inline alert is displayed in a non-modal manner and is typically used within other components (such as
+ within a card, table, or container). These alerts Alert provide contextual feedback related to the
+ component they are embedded in, informing the user about the status of an action. Like other alert
+ variants, Inline alerts can include up to two actions, and the close action is optional. They also support
+ pagination for scenarios where multiple related alerts need to be managed.
+
+
+ Use cases:
+
+
+
+ Failed API: displaying an error message within a table indicating that there was an
+ error fetching data from the API.
+
+
+ Pending documents to be uploaded: informing the user that some documents are pending to
+ be uploaded, with action to cancel the upload.
+
+
+ Unsaved policy changes: warning users that the changes applied to a certain policy will
+ be lost if they proceed to the next page, with actions to save changes or continue.
+
+
+ Document upload reminder: alerting users within a policy details page that required
+ documents are missing, with actions to upload the documents or get assistance.
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Responsive behavior",
+ content: (
+ <>
+
+
+ Be sure to consider content length when designing for smaller screen sizes.
+
+ Alerts grow vertically to display the full content.
+
+ Keep in mind the screen size where the alert will appear, and take into account the length of the
+ description it contains.
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ subSections: [
+ {
+ title: "Be clear and concise",
+ content: (
+
+
+ Make sure that alert messages are brief and direct. Avoid overloading alert messages with unnecessary
+ information for the user, as they should be able to understand the message quickly and directly.
+
+
+ Use clear language that is easy for all users to understand. Avoid technical terms unless necessary.
+
+
+ ),
+ },
+ {
+ title: "Prioritize alerts",
+ content: (
+
+
+ Alerts cannot be displayed in a stacked manner. Make sure to prioritize alerts that compete at the same
+ level so the user will assess the most important one first
+
+
+ Only use alerts for critical messages that requires immediate attention from the user. Overusing the
+ component can desensitize users to their importance and increase the cognitive load.
+
+
+ ),
+ },
+ {
+ title: "Actionable feedback",
+ content: (
+
+
+ Whenever possible, include actions that users can take to address the alert. This help them resolve issues
+ directly from the alert.
+
+
+ Among the actions within an alert, try to give alternatives to solve the problem.
+
+
+ Visit our{" "}
+
+ Best practices for button labels
+ {" "}
+ section from our Button component to tailor the best label for each button to make labels consistent and
+ concise.
+
+
+ ),
+ },
+ {
+ title: "Semantic modes",
+ content: (
+
+
+ Select the appropriate alert type (success, error, warning, information) based on the nature and urgency
+ of the message. This will help users quickly understand the context and importance of the alert.
+
+
+ ),
+ },
+ {
+ title: "Only text in the message",
+ content: (
+
+
+ The only Halstack component allowed within the text of an alert is the Link component, and it
+ should be used exclusively to direct users to additional resources or relevant pages.{" "}
+ No other components are permitted within the content of an alert.
+
+
+ ),
+ },
+ {
+ title: "Variant-specific best practices",
+ subSections: [
+ {
+ title: "Alert banner",
+ content: (
+
+
+ Position and visibility: alert banners must always be placed on top of the interface,
+ right below the header of the application. This is particularly important for system-wide alerts that
+ impact the user's ability to interact with the application.
+
+
+ Navigation: if multiple critical alerts exist, enable the option to paginate them so
+ they can assess each message one by one, in priority order.
+
+
+ Persistence: keep the Alert banner visible until the issue is resolved. Users should
+ not be able to dismiss it without taking action. This ensures that critical issues are addressed and
+ not overlooked. The persistent nature of the banner reinforces the importance of the alert.
+
+
+ Clarity: use the description of the alert to briefly explain the issue, but avoid
+ overloading the user with unnecessary descriptions. If further details are needed to fully understand
+ or assess the alert, provide a button to see the details on a separate screen.
+
+
+ ),
+ },
+ {
+ title: "Alert dialog",
+ content: (
+ <>
+
+
+ Immediate action: use Alert dialog for issues that need the user's immediate
+ attention and action. Ensure they cannot proceed without addressing the alert. This prevents users
+ from ignoring critical messages and helps in timely resolution of issues.
+
+
+ Clear actions: if actions are needed (besides the close action), ensure these
+ actions are accurate to resolve the issue, such as "Save changes" or "View details". Actions should
+ be easy to understand and immediately executable, guiding the user through the necessary steps to
+ resolve the alert.
+
+
+ Accurate focus: each dialog alert must focus on a single important message to avoid
+ overwhelming the user. Avoid combining multiple issues in one alert, as it can cause confusion and
+ reduce the effectiveness of the alert.
+
+
+
+ ),
+ },
+ {
+ title: "Inline alert",
+ content: (
+ <>
+
+
+ Placement: place Inline alerts near the relevant content or component to provide
+ immediate and contextual feedback. This helps users associate the alert with the specific action or
+ data that it relates to, making it more intuitive to understand and act upon.
+
+
+ Non-intrusive: ensure Inline alerts do not disrupt the user's workflow but are
+ noticeable enough to provide the necessary feedback.
+
+
+ Dismissive alerts: allow users to close the Inline alert if it is not critical to
+ keep it visible at all times. This gives users control over their interface and prevents frustration
+ from persistent alerts.
+
+
+ Multiple alerts handling: if multiple Inline Alerts are necessary, allow users to
+ navigate through them. This can be achieved through the navigation option built within the
+ component.
+
+
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+];
+
+const AlertOverviewPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default AlertOverviewPage;
diff --git a/apps/website/screens/components/alert/overview/examples/banner.tsx b/apps/website/screens/components/alert/overview/examples/banner.tsx
new file mode 100644
index 0000000000..c326eb50ea
--- /dev/null
+++ b/apps/website/screens/components/alert/overview/examples/banner.tsx
@@ -0,0 +1,67 @@
+import { DxcAlert, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const messagesSuccess = [
+ { text: "Your document has been saved successfully." },
+ { text: "Second text." }
+ ];
+ const messagesInformation = [
+ { text: "Your document has been auto-saved." },
+ { text: "Second text." }
+ ];
+ const messagesWarning = [
+ { text: "You have unsaved changes in your document." },
+ { text: "Second text." }
+ ];
+ const messagesError = [
+ { text: "We encountered an issue while saving your file." },
+ { text: "Second text." }
+ ];
+
+ return (
+
+
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="success"
+ title="Success"
+ />
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="info"
+ title="Information"
+ />
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="warning"
+ title="Warning"
+ />
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="error"
+ title="Error"
+ />
+
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/overview/examples/dialog.tsx b/apps/website/screens/components/alert/overview/examples/dialog.tsx
new file mode 100644
index 0000000000..728abe7cb4
--- /dev/null
+++ b/apps/website/screens/components/alert/overview/examples/dialog.tsx
@@ -0,0 +1,88 @@
+import { DxcAlert, DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [loadDialog, setLoadDialog] = useState(0);
+
+ const messagesSuccess = [
+ { text: "Your document has been saved successfully.", onClose : () => {setLoadDialog(0)} },
+ { text: "You can continue editing your document or navigate to other sections.", onClose : () => {setLoadDialog(0)} }
+ ];
+ const messagesInformation = [
+ { text: "Your document has been auto-saved.", onClose : () => {setLoadDialog(0)} },
+ { text: "You can continue working without worry, as all changes are being saved automatically. This feature ensure that your progress is preserved even if your forget to save manually. Feel free to review the auto-save settings in your account preferences.", onClose : () => {setLoadDialog(0)} }
+ ];
+ const messagesWarning = [
+ { text: "You have unsaved changes in your document.", onClose : () => {setLoadDialog(0)} },
+ { text: "If you navigate away from this page, you will lose any changes you have made. Please save your work to avoid losing any progress. Consider reviewing your changes before saving.", onClose : () => {setLoadDialog(0)} }
+ ];
+ const messagesError = [
+ { text: "We encountered an issue while saving your file.", onClose : () => {setLoadDialog(0)} },
+ { text: "You have unsaved changes in your document. If you navigate away from this page, you will lose any changes you have made. Please save your work to avoid losing any progress. Consider reviewing your changes before saving.", onClose : () => {setLoadDialog(0)} }
+ ];
+
+ return (
+
+
+ setLoadDialog(1)} />
+ setLoadDialog(2)} />
+ setLoadDialog(3)} />
+ setLoadDialog(4)} />
+
+ {loadDialog !== 0 && (
+
+ {loadDialog === 1 && (
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="success"
+ title="Success"
+ />
+ )}
+ {loadDialog === 2 && (
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="info"
+ title="Information"
+ />
+ )}
+ {loadDialog === 3 && (
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="warning"
+ title="Warning"
+ />
+ )}
+ {loadDialog === 4 && (
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="error"
+ title="Error"
+ />
+ )}
+
+ )}
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+ DxcFlex,
+ DxcButton,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/overview/examples/inline.tsx b/apps/website/screens/components/alert/overview/examples/inline.tsx
new file mode 100644
index 0000000000..ff8aef7a1c
--- /dev/null
+++ b/apps/website/screens/components/alert/overview/examples/inline.tsx
@@ -0,0 +1,63 @@
+import { DxcAlert, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const messagesSuccess = [
+ { text: "You can continue editing your document or navigate to other sections. If yo need to do further changes, feel free to do so at any time. Remember your changes are saved automatically." },
+ { text: "Second text" }
+ ];
+ const messagesInformation = [
+ { text: "Your document has been auto-saved. You can continue working without worry, as all changes are being saved automatically. This feature ensure that your progress is preserved even if your forget to save manually. Feel free to review the auto-save settings in your account preferences." },
+ { text: "Second text" }
+ ];
+ const messagesWarning = [
+ { text: "You have unsaved changes in your document. If you navigate away from this page, you will lose any changes you have made. Please save your work to avoid losing any progress. Consider reviewing your changes before saving." },
+ { text: "Second text" }
+ ];
+ const messagesError = [
+ { text: "We encountered an issue while saving your file. You have unsaved changes in your document. If you navigate away from this page, you will lose any changes you have made. Please save your work to avoid losing any progress. Consider reviewing your changes before saving." },
+ { text: "Second text" }
+ ];
+
+ return (
+
+
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="success"
+ title="Success"
+ />
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="info"
+ title="Information"
+ />
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="warning"
+ title="Warning"
+ />
+ {} }}
+ secondaryAction={{ label: "Secondary action", onClick: () => {} }}
+ semantic="error"
+ title="Error"
+ />
+
+
+ );
+}`;
+
+const scope = {
+ DxcAlert,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/alert/overview/images/alert_anatomy.png b/apps/website/screens/components/alert/overview/images/alert_anatomy.png
new file mode 100644
index 0000000000..3bc0d1a41f
Binary files /dev/null and b/apps/website/screens/components/alert/overview/images/alert_anatomy.png differ
diff --git a/apps/website/screens/components/alert/specs/AlertSpecsPage.tsx b/apps/website/screens/components/alert/specs/AlertSpecsPage.tsx
deleted file mode 100644
index 6a087054e2..0000000000
--- a/apps/website/screens/components/alert/specs/AlertSpecsPage.tsx
+++ /dev/null
@@ -1,332 +0,0 @@
-import Image from "@/common/Image";
-import { DxcLink, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import AlertAnatomyImage from "./images/alert_anatomy.png";
-import BannerAlertSpecsImage from "./images/alert_banner_specs.png";
-import InlineAlertSpecsImage from "./images/alert_inline_specs.png";
-import ModalAlertSpecsImage from "./images/alert_modal_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
-
-
-
-
-
-
- ),
- },
-
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
- Icon
- Title
- Pagination
- Divider
- Close action icon
- Buttons
- Description
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WAI-ARIA",
- content: (
-
-
-
- Alert role
-
-
-
- ),
- subSections: [
- {
- title: "Authoring Practices Guide (APG)",
- content: (
-
-
-
- Alert pattern
-
-
-
-
- Alert and message dialogs pattern
-
-
-
- ),
- },
- ],
- },
- ],
- },
-];
-
-const AlertSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default AlertSpecsPage;
diff --git a/apps/website/screens/components/alert/specs/images/alert_anatomy.png b/apps/website/screens/components/alert/specs/images/alert_anatomy.png
deleted file mode 100644
index b968cc28aa..0000000000
Binary files a/apps/website/screens/components/alert/specs/images/alert_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/alert/specs/images/alert_banner_specs.png b/apps/website/screens/components/alert/specs/images/alert_banner_specs.png
deleted file mode 100644
index e984aa81bc..0000000000
Binary files a/apps/website/screens/components/alert/specs/images/alert_banner_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/alert/specs/images/alert_inline_specs.png b/apps/website/screens/components/alert/specs/images/alert_inline_specs.png
deleted file mode 100644
index 2578a6a0fb..0000000000
Binary files a/apps/website/screens/components/alert/specs/images/alert_inline_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/alert/specs/images/alert_modal_specs.png b/apps/website/screens/components/alert/specs/images/alert_modal_specs.png
deleted file mode 100644
index f49f039ebe..0000000000
Binary files a/apps/website/screens/components/alert/specs/images/alert_modal_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/alert/usage/AlertUsagePage.tsx b/apps/website/screens/components/alert/usage/AlertUsagePage.tsx
deleted file mode 100644
index 764f6a3d37..0000000000
--- a/apps/website/screens/components/alert/usage/AlertUsagePage.tsx
+++ /dev/null
@@ -1,425 +0,0 @@
-import {
- DxcParagraph,
- DxcBulletedList,
- DxcFlex,
- DxcTable,
- DxcTypography,
- DxcLink,
-} from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-import Image from "@/common/Image";
-import banner from "./images/alert_banner.png";
-import modal from "./images/alert_modal.png";
-import inline from "./images/alert_inline.png";
-import Link from "next/link";
-import Code from "@/common/Code";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
- The key characteristics of our alert component are the following:
-
-
- Visibility: alerts should be positioned in a place where it can attract the user's eye
- without too much effort, as it will convey critical messages about the system or important features.
-
-
- Concise: alert messages should use clear and straight-to-the-point language that conveys
- the message without unnecessary information, avoiding ambiguity or irrelevant details that could distract or
- confuse the user.
-
-
- Relevance: the content displayed on the alert must be directly relevant to the users task
- or system state.
-
-
- Actionability: the component provides clear and straightforward actions for the user to
- take in response to it, such as retrying, seeing details or dismissing the alert.
-
-
- Persistence: alerts should remain visible long enough for users to read and understand
- them, but not so long as to become an annoyance. Allow users to dismiss alerts once they have acknowledged
- them.
-
-
- Sequential display: only one alert must be visible at a time. If multiple alerts are
- triggered, subsequent alerts wait until the current alert is dismissed before appearing. This behavior
- prevents alert stacking and ensures users address each alert individually.
-
-
-
- ),
- subSections: [
- {
- title: "Semantic alerts",
- content: (
- <>
-
- Depending on the message that the alert is showcasing, we can find four different semantic meanings of the
- component:
-
-
-
-
-
Semantic
- Description
-
-
-
-
-
-
- Information
-
-
-
- Informational messages are used exclusively to assist the user with directional or explanatory text
- about a complex or seldom used process.
-
-
-
-
-
- Warning
-
-
-
- Alert or warning messages should be displayed when there is a potential obstacle in completing a
- process as intended.
-
-
-
-
-
- Error
-
-
-
- Error messages convey a critical system problem that requires user and/or technical intervention to
- correct.
-
-
-
-
-
- Success
-
-
-
- Success messages should be used to assure user that a system calculation or data submission was
- completed correctly.
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Variants",
- content: (
- <>
-
- Alerts can appear in various scenarios within a product, making it crucial to select the most appropriate
- variant for effectively conveying the message. Halstack offers three variants of its Alert component, each
- specifically designed and tailored to address common use cases.
-
-
- ),
- subSections: [
- {
- title: "Banner alert",
- content: (
- <>
-
- Displayed always below the header of the site, the banner alert is used for critical system or
- application messages. These alerts are actionable, meaning the user can interact with the message to
- resolve the issue directly from the alert itself. However, closing the message is not considered an action
- and is mandatory, as the message remains visible and cannot be dismissed until addressed. Additionally, if
- there are multiple critical system messages, the banner alert allows pagination between them, ensuring
- that users can manage and resolve all critical issues systematically.
-
-
- Use cases:
-
-
-
- System disruption notification: informing users about a critical system disruption that
- requires immediate attention, with an option to view more details or contact support.
-
-
- Security breach alert: warning users of a potential security breach, with actions to
- change passwords or review account activity.
-
-
- Critical update required: notifying users that a crucial software update is available
- and needs to be installed to continue using the application safely.
-
-
- Payment failure notification: informing users that a recent payment has failed and
- providing options to retry the payment or update billing information.
-
-
-
-
- ),
- },
- {
- title: "Modal alert",
- content: (
- <>
-
- The modal alert displays important information that demands immediate user attention. It is presented with
- an overlay that blocks the rest of the interface, ensuring that the user addresses the alert before
- proceeding. Similar to other variants, the modal alert allows up to two actions, excluding the mandatory
- close action. This variant ensures that critical information is not overlooked by requiring the user to
- interact with the modal to continue using the application.
-
-
- Use cases:
-
-
-
- Data loss warning: informing users that unsaved changes will be lost if they proceed
- with an action, with options to save changes or discard them.
-
-
- Permission request: requesting user permission for access to sensitive data or device
- features, with actions to grant or deny permission.
-
-
- Policy renewal reminder: notifying users that a client's insurance policy is about to
- expire, with options to renew the policy or contact support for assistance.
-
-
- Important policy update: alerting users to important changes in the terms of service or
- privacy policy, requiring them to acknowledge the update before continuing.
-
-
-
-
- ),
- },
- {
- title: "Inline alert",
- content: (
- <>
-
- The inline alert is displayed in a non-modal manner and is typically used within other components (such as
- within a card, table, or container). These alerts provide contextual feedback related to the component
- they are embedded in, informing the user about the status of an action. Like other alert variants, Inline
- alerts can include up to two actions, and the close action is optional. They also support pagination for
- scenarios where multiple related alerts need to be managed.
-
-
- Use cases:
-
-
-
- Failed API: displaying an error message within a table indicating that there was an
- error fetching data from the API.
-
-
- Pending documents to be uploaded: informing the user that some documents are pending to
- be uploaded, with action to cancel the upload.
-
-
- Unsaved policy changes: warning users that the changes applied to a certain policy will
- be lost if they proceed to the next page, with actions to save changes or continue.
-
-
- Document upload reminder: alerting users within a policy details page that required
- documents are missing, with actions to upload the documents or get assistance.
-
-
-
-
- ),
- },
- ],
- },
-
- {
- title: "Best practices",
- subSections: [
- {
- title: "Be clear and concise",
- content: (
-
-
- Make sure that alert messages are brief and direct. Avoid overloading alert messages with unnecessary
- information for the user, as they should be able to understand the message quickly and directly.
-
-
- Use clear language that is easy for all users to understand. Avoid technical terms unless necessary.
-
-
- ),
- },
- {
- title: "Prioritize alerts",
- content: (
-
-
- Alerts cannot be displayed in a stacked manner. Make sure to prioritize alerts that compete at the same
- level so the user will assess the most important one first.
-
-
- Only use alerts for critical messages that require immediate attention from the user. Overusing the
- component can desensitize users to their importance and increase the cognitive load.
-
-
- ),
- },
- {
- title: "Actionable feedback",
- content: (
-
-
- Whenever possible, include actions that users can take to address the alert. This help them resolve issues
- directly from the alert.
-
-
- Among the actions within an alert, try to give alternatives to solve the problem.
-
-
- Visit our{" "}
-
- Best practices for button labels
- {" "}
- section from our Button component to tailor the best label for each button to make labels consistent and
- concise.
-
-
- ),
- },
- {
- title: "Semantic modes",
- content: (
-
-
- Select the appropriate alert type (success, error, warning, information) based on the nature and urgency
- of the message. This will help users quickly understand the context and importance of the alert.
-
-
- ),
- },
- {
- title: "Only text in the message",
- content: (
-
-
- The only Halstack component allowed within the text of an alert is the Link component, and it
- should be used exclusively to direct users to additional resources or relevant pages.{" "}
- No other components are permitted within the content of an alert.
-
-
- ),
- },
- {
- title: "Best practices of each variant",
- subSections: [
- {
- title: "Banner alert",
- content: (
-
-
- Position and visibility: banner alerts must always be placed on top of the interface,
- right below the header of the application. This is particularly important for system-wide alerts that
- impact the user's ability to interact with the application.
-
-
- Navigation: if multiple critical alerts exist, enable the option to paginate them so
- they can assess each message one by one, in priority order.
-
-
- Persistence: keep the banner alert visible until the issue is resolved. Users should
- not be able to dismiss it without taking action. This ensures that critical issues are addressed and
- not overlooked. The persistent nature of the banner reinforces the importance of the alert.
-
-
- Clarity: use the description of the alert to briefly explain the issue, but avoid
- overloading the user with unnecessary descriptions. If further details are needed to fully understand
- or assess the alert, provide a button to see the details on a separate screen.
-
-
- ),
- },
- {
- title: "Modal alert",
- content: (
- <>
-
-
- Immediate action: use modal alert for issues that need the user’s immediate
- attention and action. Ensure they cannot proceed without addressing the alert. This prevents users
- from ignoring critical messages and helps in timely resolution of issues.
-
-
- Clear actions: if actions are needed (besides the close action), ensure these
- actions are accurate to resolve the issue, such as “Save changes” or “View details”. Actions should
- be easy to understand and immediately executable, guiding the user through the necessary steps to
- resolve the alert.
-
-
- Accurate focus: each modal alert must focus on a single important message to avoid
- overwhelming the user. Avoid combining multiple issues in one alert, as it can cause confusion and
- reduce the effectiveness of the alert.
-
-
-
- ),
- },
- {
- title: "Inline alert",
- content: (
- <>
-
-
- Placement: place inline alerts near the relevant content or component to provide
- immediate and contextual feedback. This helps users associate the alert with the specific action or
- data that it relates to, making it more intuitive to understand and act upon.
-
-
- Non-intrusive: ensure inline alerts do not disrupt the user’s workflow but are
- noticeable enough to provide the necessary feedback.
-
-
- Dismissive alerts: allow users to close the inline alert if it is not critical to
- keep it visible at all times. This gives users control over their interface and prevents frustration
- from persistent alerts.
-
-
- Multiple alerts handling: if multiple inline alerts are necessary, allow users to
- navigate through them. This can be achieved through the navigation option built within the
- component.
-
-
-
- ),
- },
- ],
- },
- ],
- },
-];
-
-const AlertUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default AlertUsagePage;
diff --git a/apps/website/screens/components/alert/usage/images/alert_banner.png b/apps/website/screens/components/alert/usage/images/alert_banner.png
deleted file mode 100644
index a9857ef33e..0000000000
Binary files a/apps/website/screens/components/alert/usage/images/alert_banner.png and /dev/null differ
diff --git a/apps/website/screens/components/alert/usage/images/alert_inline.png b/apps/website/screens/components/alert/usage/images/alert_inline.png
deleted file mode 100644
index 5c55e10da8..0000000000
Binary files a/apps/website/screens/components/alert/usage/images/alert_inline.png and /dev/null differ
diff --git a/apps/website/screens/components/alert/usage/images/alert_modal.png b/apps/website/screens/components/alert/usage/images/alert_modal.png
deleted file mode 100644
index eb6fb07c92..0000000000
Binary files a/apps/website/screens/components/alert/usage/images/alert_modal.png and /dev/null differ
diff --git a/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx b/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
index c420de33c3..591cef2d19 100644
--- a/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
+++ b/apps/website/screens/components/application-layout/ApplicationLayoutPageLayout.tsx
@@ -6,23 +6,20 @@ import { ReactNode } from "react";
const ApplicationLayoutPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/application-layout" },
- { label: "Usage", path: "/components/application-layout/usage" },
- {
- label: "Specifications",
- path: "/components/application-layout/specifications",
- },
+ { label: "Overview", path: "/components/application-layout" },
+ { label: "Code", path: "/components/application-layout/code" },
];
return (
-
+
-
+
- The application layout provides a base UI wrapper for any application built with Halstack.
+ The Application Layout is the foundational UI wrapper for any application built with Halstack. It ensures
+ structural consistency and integrates key layout.
-
+
{children}
diff --git a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
index 53aa472e2d..c06008ad6e 100644
--- a/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
+++ b/apps/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
@@ -1,11 +1,9 @@
import { DxcParagraph, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Link from "next/link";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
-import Code from "@/common/Code";
const ApplicationLayoutPropsTable = () => (
@@ -19,25 +17,17 @@ const ApplicationLayoutPropsTable = () => (
-
visibilityToggleLabel
- string
+
+
+ children
+
-
Text to be placed next to the hamburger button that toggles the visibility of the sidenav.
-
-
-
-
-
header
React.ReactNode
- Header of the application layout shown at the top of the screen. It is optional and if it is not specified,
- the default header will be shown. Please check the Header documentation{" "}
-
- here
-
- .
+ Use the DxcApplicationLayout.Main provided to render main content.
- Sidenav of the application layout shown at the left side of the screen. Please check the Sidenav documentation{" "}
-
+ Header of the application layout shown at the top of the screen. It is optional and if it is not specified,
+ the default header will be shown. Please check the Header documentation{" "}
+
here
.
@@ -71,17 +62,16 @@ const ApplicationLayoutPropsTable = () => (
-
-
-
-
- children
-
-
+
sidenav
React.ReactNode
- Use the DxcApplicationLayout.Main provided to render main content.
+ Sidenav of the application layout shown at the left side of the screen. Please check the Sidenav documentation{" "}
+
+ here
+
+ .
-
@@ -102,16 +92,6 @@ const sections = [
),
},
- {
- title: "DxcApplicationLayout.useResponsiveSidenavVisibility",
- content: (
-
- Custom hook that returns a function to manually change the visibility of the sidenav in responsive mode. This
- can be very useful for cases where a custom sidenav is being used and some of its inner elements can close it
- (for example, a navigation link).
-
- ),
- },
{
title: "Examples",
subSections: [
@@ -130,7 +110,7 @@ const sections = [
title="Basic usage"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- >
+ />
),
},
{
@@ -148,7 +128,7 @@ const sections = [
title="With sidenav"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- >
+ />
),
},
{
@@ -166,22 +146,18 @@ const sections = [
title="Custom footer and header"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- >
+ />
),
},
],
},
];
-const ApplicationLayoutCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const ApplicationLayoutCodePage = () => (
+
+
+
+
+);
export default ApplicationLayoutCodePage;
diff --git a/apps/website/screens/components/application-layout/overview/ApplicationLayoutOverviewPage.tsx b/apps/website/screens/components/application-layout/overview/ApplicationLayoutOverviewPage.tsx
new file mode 100644
index 0000000000..efb1c5da37
--- /dev/null
+++ b/apps/website/screens/components/application-layout/overview/ApplicationLayoutOverviewPage.tsx
@@ -0,0 +1,279 @@
+import { DxcParagraph, DxcFlex, DxcBulletedList, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Code from "@/common/Code";
+import Image from "@/common/Image";
+import DocFooter from "@/common/DocFooter";
+import layoutGrid from "./images/layout_grid.png";
+import layoutBreakpoints from "./images/layout_breakpoints.png";
+import layoutMargins from "./images/layout_margins.png";
+import Link from "next/link";
+import Figure from "@/common/Figure";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The Application Layout is the base scaffolding of any application built in Halstack, serving
+ as the structural and organizational framework for all UI components.
+
+
+ The following layout components are designed to work together, enabling flexible and consistent UI structures:
+
+
+
+
+
+ Flex
+
+ :
+ {" "}
+ For fluid, responsive content arrangements.
+
+
+
+
+ Bleed
+
+ :
+ {" "}
+ To extend content beyond container boundaries when needed.{" "}
+
+
+
+
+ Inset
+
+ :
+ {" "}
+ For controlled internal spacing within containers.
+
+
+
+ ),
+ },
+ {
+ title: "Grid system",
+ content: (
+ <>
+
+ The Halstack layout system is built on a rigorous 8px grid, which serves as the foundational framework for all
+ component placement and spacing. This geometric backbone ensures visual harmony by standardizing measurements,
+ alignments, and spatial relationships across every interface.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Breakpoints",
+ content: (
+ <>
+
+ Breakpoints are specific screen widths where a layout adapts to deliver an optimal experience across devices.
+
+
+ The Halstack system uses five carefully calibrated breakpoints based on:
+
+
+ Analysis of current device resolution trends
+ Overview patterns across mobile, tablet, and desktop
+
+
+
+
+
+
+
+
Breakpoint
+
px
+
rem
+
+
+
+
+
+ xsmall
+
+
320
+
20
+
+
+
+ small
+
+
480
+
30
+
+
+
+ medium
+
+
720
+
45
+
+
+
+ large
+
+
1056
+
66
+
+
+
+ xlarge
+
+
1440
+
90
+
+
+
+
+ ),
+ },
+ {
+ title: "Columns, gutters and margins",
+ content: (
+ <>
+
+ Columns, gutters, and margins make up the responsive layout grid following these breakpoints. Depending on
+ resolution and screen size of a device, column numbers and the values of the margins and gutters adjust to
+ accommodate all screen elements in the most optimal manner.
+
+
+
+
+ Columns: Content containers (increase with screen size)
+
+
+ Gutters: Spacing between columns (scale responsively)
+
+
+ Margins: Padding between content and viewport edges
+
+
+ All three elements should be recalibrated at each breakpoint to:
+
+ Maximize content legibility
+ Maintain proportional spacing
+ Ensure touch target accessibility
+
+
+ ),
+ subSections: [
+ {
+ title: "Recommended values",
+ content: (
+ <>
+
+
+
+
Breakpoint
+
Columns
+
Gutter (recomended) ¹
+
Margin (min) ²
+
+
+
+
+
+ xsmall
+
+
4
+
16 / small
+
24
+
+
+
+ small
+
+
4
+
16 / small
+
24
+
+
+
+ medium
+
+
4
+
24 / medium
+
48
+
+
+
+ large
+
+
8
+
16 / small
+
56
+
+
+
+ xlarge
+
+
8
+
24 / medium
+
56
+
+
+
+
+
+ Any value provided by the gutter prop in the layout components can be used (ideally multiples of 8)
+ although we recommend to stick to the values provided.
+
+
+ The margin value provided are the minimun recommended, any value from our spacing scale can be used or
+ even an auto value.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Enforce the 8px baseline grid: Align all measurements (spacing, sizing, positioning) to
+ multiples of 8px for visual harmony.
+
+
+ imit 4px adjustments: Reserve finer increments only for edge cases like icon alignment or
+ typography.
+
+
+ Test across all five breakpoints: Verify layouts adapt seamlessly from mobile (320px) to
+ desktop (1200px+).
+
+
+ Default to recommended values: Use predefined gutter/margin sizes unless justified by
+ specific use cases.
+
+
+ Scale columns proportionally: Increase column count with screen size while preserving
+ gutter/margin ratios.
+
+
+
+ ),
+ },
+];
+
+const ApplicationLayoutOverviewPage = () => (
+
+
+
+
+);
+
+export default ApplicationLayoutOverviewPage;
diff --git a/apps/website/screens/components/application-layout/overview/images/layout_breakpoints.png b/apps/website/screens/components/application-layout/overview/images/layout_breakpoints.png
new file mode 100644
index 0000000000..193c3a4f85
Binary files /dev/null and b/apps/website/screens/components/application-layout/overview/images/layout_breakpoints.png differ
diff --git a/apps/website/screens/components/application-layout/overview/images/layout_grid.png b/apps/website/screens/components/application-layout/overview/images/layout_grid.png
new file mode 100644
index 0000000000..aaf2142f4d
Binary files /dev/null and b/apps/website/screens/components/application-layout/overview/images/layout_grid.png differ
diff --git a/apps/website/screens/components/application-layout/overview/images/layout_margins.png b/apps/website/screens/components/application-layout/overview/images/layout_margins.png
new file mode 100644
index 0000000000..1d4506b853
Binary files /dev/null and b/apps/website/screens/components/application-layout/overview/images/layout_margins.png differ
diff --git a/apps/website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx b/apps/website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx
deleted file mode 100644
index 313b3a920c..0000000000
--- a/apps/website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { DxcBulletedList, DxcParagraph, 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 Image from "@/common/Image";
-import Figure from "@/common/Figure";
-import specsImage from "./images/appLayout_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
- Columns, gutters, and margins make up the responsive layout grid following these breakpoints. Depending on
- resolution and screen size of a device, column numbers and the values of the margins and gutters adjust to
- accommodate all screen elements in the most optimal manner.
-
-
- Columns are the areas of the screen where content is placed.
- A gutter is the space between columns used to separate content.
-
- Margins are the space between the edges of the screen and content.
-
-
-
- ),
- },
- {
- title: "Recommended values",
- content: (
- <>
-
- The following table describes the columns, margins, and gutter at each of the different breakpoints:
-
-
-
-
-
Breakpoint
-
Columns
-
- Gutter (recommended) 1
-
-
- Margin (min)2
-
-
-
-
-
-
- xsmall
-
-
4
-
16 / small
-
24
-
-
-
- small
-
-
4
-
16 / small
-
24
-
-
-
- medium
-
-
4
-
24 / medium
-
48
-
-
-
- large
-
-
8
-
16 / small
-
56
-
-
-
- xlarge
-
-
8
-
24/medium
-
56
-
-
-
-
-
- Any value provided by the gutter prop in the layout components can be used (ideally multiples of 8) although
- we recommend to stick to the values provided.
-
-
- The margin value provided are the minimun recommended, any value from our spacing scale can be used or even
- an auto value.
-
-
-
- ),
- },
-];
-
-const ApplicationLayoutSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ApplicationLayoutSpecsPage;
diff --git a/apps/website/screens/components/application-layout/specs/images/appLayout_specs.png b/apps/website/screens/components/application-layout/specs/images/appLayout_specs.png
deleted file mode 100644
index 707f39a70b..0000000000
Binary files a/apps/website/screens/components/application-layout/specs/images/appLayout_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx b/apps/website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx
deleted file mode 100644
index 52c1a27baa..0000000000
--- a/apps/website/screens/components/application-layout/usage/ApplicationLayoutUsagePage.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import { DxcParagraph, DxcFlex, DxcBulletedList, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
-import Image from "@/common/Image";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import layoutGrid from "./images/layout_grid.png";
-import layoutBreakpoints from "./images/layout_breakpoints.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- The application layout is the base component that wraps any application built with Halstack. In addition to
- this, all of the components listed below can be used within each other to create a wide variety of standard
- layouts:
-
-
- Flex
- Bleed
- Inset
-
-
- ),
- },
- {
- title: "Grid",
- content: (
- <>
-
- The grid provides the foundation for consistently positioning elements onscreen. The 8px Grid is the geometric
- foundation of all the visual elements of Halstack Design System components and spacing. It provides structure
- and guidance for all creative decision-making.
-
-
-
-
- Use multiples of 8px when defining measurements, spacing, and positioning elements.
-
- When necessary use 4px to make more fine tuned adjustments.
-
- Whenever possible, make sure that objects line up, both vertically and horizontally.
-
-
- Align your bounding box to the grid, not the baseline of your text.
-
-
-
- ),
- },
- {
- title: "Breakpoints",
- content: (
- <>
-
- Breakpoints define resolutions at which screen components adjust to offer an optimal user experience across
- screen sizes and devices. We've defined five different breakpoints to accommodate multiple web, tablet,
- and mobile screen resolutions:
-
-
-
-
-
Breakpoint
-
px
-
rem
-
-
-
-
-
- xsmall
-
-
320
-
20
-
-
-
- small
-
-
480
-
30
-
-
-
- medium
-
-
720
-
45
-
-
-
- large
-
-
1056
-
66
-
-
-
- xlarge
-
-
1440
-
90
-
-
-
-
- The image below illustrates how we've used data on the most popular screen resolutions by device over the
- past few years to help define each breakpoint.
-
-
-
- ),
- },
-];
-
-const ApplicationLayoutUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ApplicationLayoutUsagePage;
diff --git a/apps/website/screens/components/application-layout/usage/images/layout_breakpoints.png b/apps/website/screens/components/application-layout/usage/images/layout_breakpoints.png
deleted file mode 100644
index 9643a3491c..0000000000
Binary files a/apps/website/screens/components/application-layout/usage/images/layout_breakpoints.png and /dev/null differ
diff --git a/apps/website/screens/components/application-layout/usage/images/layout_grid.png b/apps/website/screens/components/application-layout/usage/images/layout_grid.png
deleted file mode 100644
index 2d2a9b019d..0000000000
Binary files a/apps/website/screens/components/application-layout/usage/images/layout_grid.png and /dev/null differ
diff --git a/apps/website/screens/components/avatar/AvatarPageLayout.tsx b/apps/website/screens/components/avatar/AvatarPageLayout.tsx
new file mode 100644
index 0000000000..d3d4ce42a5
--- /dev/null
+++ b/apps/website/screens/components/avatar/AvatarPageLayout.tsx
@@ -0,0 +1,31 @@
+import ComponentHeading from "@/common/ComponentHeading";
+import PageHeading from "@/common/PageHeading";
+import TabsPageHeading from "@/common/TabsPageLayout";
+import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import { ReactNode } from "react";
+
+const AvatarPageHeading = ({ children }: { children: ReactNode }) => {
+ const tabs = [
+ { label: "Overview", path: "/components/avatar" },
+ { label: "Code", path: "/components/avatar/code" },
+ ];
+
+ return (
+
+
+
+
+
+ The Avatar component is a key visual element used to identify users, teams, or entities across the
+ interface. It helps create a recognizable and consistent user experience by visually representing people or
+ objects through images, icons, or initials.
+
+
+
+
+ {children}
+
+ );
+};
+
+export default AvatarPageHeading;
diff --git a/apps/website/screens/components/avatar/code/AvatarCodePage.tsx b/apps/website/screens/components/avatar/code/AvatarCodePage.tsx
new file mode 100644
index 0000000000..1d55b83a54
--- /dev/null
+++ b/apps/website/screens/components/avatar/code/AvatarCodePage.tsx
@@ -0,0 +1,196 @@
+import { ExtendedTableCode, TableCode } from "@/common/Code";
+import Example from "@/common/example/Example";
+import DxcQuickNavContainer from "@/common/QuickNavContainer";
+import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import basicUsage from "./examples/basicUsage";
+import clickable from "./examples/clickable";
+import tooltip from "./examples/tooltip";
+import status from "./examples/status";
+
+const statusTypeString = `{
+ mode: 'default' | 'info' |
+ 'success' | 'warning' | 'error';
+ position: 'top' | 'bottom';
+}`;
+
+const sections = [
+ {
+ title: "Props",
+ content: (
+
+
+
+ Defines the color of the status indicator displayed on the avatar and where it will be placed. If not
+ provided, no indicator will be rendered.
+
+
-
+
+
+
tabIndex
+
+ number
+
+
+ Value of the tabindex attribute. It will only apply when the onClick or linkHref property is passed.
+
+
+ 0
+
+
+
+
title
+
+ string
+
+
Text to be displayed inside a tooltip when hovering the avatar.
+
-
+
+
+
+ ),
+ },
+ {
+ title: "Examples",
+ subSections: [
+ {
+ title: "Basic usage",
+ content: ,
+ },
+ {
+ title: "Clickable",
+ content: ,
+ },
+ {
+ title: "Status",
+ content: ,
+ },
+ {
+ title: "Tooltip",
+ content: ,
+ },
+ ],
+ },
+];
+
+const AvatarCodePage = () => (
+
+
+
+
+);
+
+export default AvatarCodePage;
diff --git a/apps/website/screens/components/avatar/code/examples/basicUsage.tsx b/apps/website/screens/components/avatar/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..73a8cb95df
--- /dev/null
+++ b/apps/website/screens/components/avatar/code/examples/basicUsage.tsx
@@ -0,0 +1,21 @@
+import { DxcAvatar, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAvatar,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/avatar/code/examples/clickable.tsx b/apps/website/screens/components/avatar/code/examples/clickable.tsx
new file mode 100644
index 0000000000..a72c07b00f
--- /dev/null
+++ b/apps/website/screens/components/avatar/code/examples/clickable.tsx
@@ -0,0 +1,19 @@
+import { DxcAvatar, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+ console.log("Hello")}
+ />
+
+ );
+}`;
+
+const scope = {
+ DxcAvatar,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/avatar/code/examples/status.tsx b/apps/website/screens/components/avatar/code/examples/status.tsx
new file mode 100644
index 0000000000..9fd0aaae76
--- /dev/null
+++ b/apps/website/screens/components/avatar/code/examples/status.tsx
@@ -0,0 +1,19 @@
+import { DxcAvatar, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAvatar,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/avatar/code/examples/tooltip.tsx b/apps/website/screens/components/avatar/code/examples/tooltip.tsx
new file mode 100644
index 0000000000..aea884a5f2
--- /dev/null
+++ b/apps/website/screens/components/avatar/code/examples/tooltip.tsx
@@ -0,0 +1,19 @@
+import { DxcAvatar, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcAvatar,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/avatar/overview/AvatarOverviewPage.tsx b/apps/website/screens/components/avatar/overview/AvatarOverviewPage.tsx
new file mode 100644
index 0000000000..c3c4b937a7
--- /dev/null
+++ b/apps/website/screens/components/avatar/overview/AvatarOverviewPage.tsx
@@ -0,0 +1,230 @@
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import DxcQuickNavContainer from "@/common/QuickNavContainer";
+import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
+import anatomy from "./images/avatar_anatomy.png";
+import shape from "./images/avatar_shape.png";
+import contentTypes from "./images/avatar_content_types.png";
+import colors from "./images/avatar_colors.png";
+import sizes from "./images/avatar_sizes.png";
+
+const sections = [
+ {
+ title: "Overview",
+ content: (
+ <>
+
+ The Avatar component represents users or entities using visual identifiers such as icons, initials, or images.
+
+
+ It ensures consistency across the interface and supports various states, color variants, and contextual
+ information like user roles or availability.
+
+
+ Avatars are typically used in headers, navigation bars, profile cards, chat interfaces, and user lists.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Base shape: defines the visual form of the avatar.
+
+
+ Content area: displays the main visual content.
+
+
+ Status indicator (Optional): a small color light that communicates user presence or status.
+
+
+ Label & sublabel (Optional): textual information placed next to or below the avatar,
+ providing context such as name, role, or email.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+
+ The Avatar component is designed to be highly versatile, adapting to a wide range of use cases and interface
+ needs.
+
+
+ Through its different shapes, content types, sizes, and color options, it can seamlessly
+ represent users, teams, or entities across various contexts, from compact tables to rich profile sections.
+
+
+ Each variant ensures visual consistency while providing the flexibility to match the tone and hierarchy of the
+ experience.
+
+
+ ),
+ },
+ {
+ title: "Shape",
+ content: (
+ <>
+
+
+
+ Round: the default option, best for personal profiles and chat contexts.
+
+
+ Square: ideal for products, organizations, or abstract entities.
+
+
+
+ ),
+ },
+ {
+ title: "Content types",
+ content: (
+ <>
+
+
+
+ Default icon: generic placeholder when no data is available.
+
+
+ Custom icon: allows brand-specific or role-specific icons.
+
+
+ Initials: displays user initials.
+
+
+ Image: uses a user or entity photo.
+
+
+
+ If an image or custom icon fails to load, a fallback (initials or default icon) is automatically displayed.
+
+
+ ),
+ },
+ {
+ title: "Colors",
+ content: (
+ <>
+
+
+ By default, the first avatar uses the primary brand color as its background. However, the
+ component supports multiple color variants, which is especially useful when{" "}
+ differentiating between several avatars displayed together on screen, such as in team lists,
+ conversation threads, or collaborative views.
+
+
+ ),
+ },
+ {
+ title: "Sizes",
+ content: (
+ <>
+
+ The Avatar component is available in six size variants, each designed to fit specific interface contexts, from
+ compact data tables to prominent profile headers. Choosing the right size ensures that avatars maintain visual
+ balance and hierarchy across different layouts and use cases.
+
+
+
+
+
+
Variant
+
Size (px)
+
Typical usage
+
+
+
+
+
+ xsmall
+
+
24px
+
Tables, dense lists.
+
+
+
+ small
+
+
32px
+
Headers, compact cards.
+
+
+
+ medium
+
+
40px
+
Sidenav bars, user previews, chat threads.
+
+
+
+ large
+
+
56px
+
Medium cards, profile sections...
+
+
+
+ xlarge
+
+
72px
+
Modals, profile headers, featured content.
+
+
+
+ xxlarge
+
+
80px
+
Large cards or highlight sections.
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use avatars to support recognition, not decoration: Place avatars where they help users
+ identify people, entities, or actions (such as in chat lists, comments, or team overviews) rather than as
+ purely decorative elements.
+
+
+ Keep visual hierarchy clear: Use avatar sizes consistently according to layout importance
+ (e.g., small in lists, large in profile headers). Avoid mixing different sizes in the same view unless
+ contextually justified.
+
+
+ Maintain alignment and spacing: Ensure consistent padding and alignment between avatars,
+ labels, and sublabels to preserve visual rhythm and readability.
+
+
+ Show status indicators only when relevant: Use status lights to communicate meaningful
+ information (e.g., online/offline) and avoid visual clutter in contexts where status is not needed.
+
+
+ Use color purposefully: Choose avatar background colors that align with brand or semantic
+ meaning, and avoid overusing color variants within a single view.
+
+
+ ),
+ },
+];
+
+const AvatarOverviewPage = () => (
+
+
+
+
+);
+
+export default AvatarOverviewPage;
diff --git a/apps/website/screens/components/avatar/overview/images/avatar_anatomy.png b/apps/website/screens/components/avatar/overview/images/avatar_anatomy.png
new file mode 100644
index 0000000000..52836fea0d
Binary files /dev/null and b/apps/website/screens/components/avatar/overview/images/avatar_anatomy.png differ
diff --git a/apps/website/screens/components/avatar/overview/images/avatar_colors.png b/apps/website/screens/components/avatar/overview/images/avatar_colors.png
new file mode 100644
index 0000000000..308df23735
Binary files /dev/null and b/apps/website/screens/components/avatar/overview/images/avatar_colors.png differ
diff --git a/apps/website/screens/components/avatar/overview/images/avatar_content_types.png b/apps/website/screens/components/avatar/overview/images/avatar_content_types.png
new file mode 100644
index 0000000000..66a8a09db4
Binary files /dev/null and b/apps/website/screens/components/avatar/overview/images/avatar_content_types.png differ
diff --git a/apps/website/screens/components/avatar/overview/images/avatar_shape.png b/apps/website/screens/components/avatar/overview/images/avatar_shape.png
new file mode 100644
index 0000000000..6442ef3eb6
Binary files /dev/null and b/apps/website/screens/components/avatar/overview/images/avatar_shape.png differ
diff --git a/apps/website/screens/components/avatar/overview/images/avatar_sizes.png b/apps/website/screens/components/avatar/overview/images/avatar_sizes.png
new file mode 100644
index 0000000000..f9fa805568
Binary files /dev/null and b/apps/website/screens/components/avatar/overview/images/avatar_sizes.png differ
diff --git a/apps/website/screens/components/badge/BadgePageLayout.tsx b/apps/website/screens/components/badge/BadgePageLayout.tsx
index b303876caf..f02d89f866 100644
--- a/apps/website/screens/components/badge/BadgePageLayout.tsx
+++ b/apps/website/screens/components/badge/BadgePageLayout.tsx
@@ -6,22 +6,21 @@ import { ReactNode } from "react";
const BadgePageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/badge" },
- { label: "Usage", path: "/components/badge/usage" },
- { label: "Specifications", path: "/components/badge/specifications" },
+ { label: "Overview", path: "/components/badge" },
+ { label: "Code", path: "/components/badge/code" },
];
return (
-
+
-
+
The badge component enables users to categorize content effectively and uniformly across their interfaces.
It offers a quick overview of a category or status and is frequently used to display numerical or status
data.
-
+
{children}
diff --git a/apps/website/screens/components/badge/code/BadgeCodePage.tsx b/apps/website/screens/components/badge/code/BadgeCodePage.tsx
index 0ca055c967..7c63d52a78 100644
--- a/apps/website/screens/components/badge/code/BadgeCodePage.tsx
+++ b/apps/website/screens/components/badge/code/BadgeCodePage.tsx
@@ -1,101 +1,112 @@
import { DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
-import TableCode from "@/common/TableCode";
+import { TableCode } from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import contextual from "./examples/contextual";
import notification from "./examples/notification";
import icons from "./examples/icons";
+import StatusBadge from "@/common/StatusBadge";
const sections = [
{
title: "Props",
content: (
-
-
Name
-
Type
-
Description
-
Default
-
-
-
label
-
- string | number
-
-
Text to be placed in the badge.
-
-
-
-
-
mode
-
- 'contextual' | 'notification'
-
-
The available badge modes.
-
- 'contextual'
-
-
-
-
notificationLimit
-
- number
-
-
- In notification mode, if the number entered as label is greater that this notification limit,{" "}
- +notificationLimit will be shown. If not, the entered text will be shown as label.
-
-
- 99
-
-
-
-
title
-
- string
-
-
- Text representing advisory information related to the badge. Under the hood, this prop also serves as an
- accessible label for the component.
-
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols,
- replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the symbol
- name with "filled_".
-
+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be placed next to the badge label. When using Material Symbols,
+ replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the
+ symbol name with "filled_".
+
+
-
+
+
+
label
+
+ string | number
+
+
Text to be placed in the badge.
+
-
+
+
+
mode
+
+ 'contextual' | 'notification'
+
+
The available badge modes.
+
+ 'contextual'
+
+
+
+
notificationLimit
+
+ number
+
+
+ In notification mode, if the number entered as label is greater that this notification limit,{" "}
+ +notificationLimit will be shown. If not, the entered text will be shown as label.
+
+
+ 99
+
+
+
+
size
+
+ 'small' | 'medium' | 'large'
+
+
Size of the component.
+
+ 'medium'
+
+
+
+
title
+
+ string
+
+
+ Text representing advisory information related to the badge. Under the hood, this prop also serves as an
+ accessible label for the component.
+
+
-
+
+
),
},
@@ -106,27 +117,25 @@ const sections = [
title: "Contextual",
content: ,
},
- {
- title: "Notification",
- content: ,
- },
{
title: "Icons",
content: ,
},
+ {
+ title: "Notification",
+ content: ,
+ },
],
},
];
-const BadgeTableCodePage = () => {
+const BadgeCodePage = () => {
return (
-
-
-
+
);
};
-export default BadgeTableCodePage;
+export default BadgeCodePage;
diff --git a/apps/website/screens/components/badge/code/examples/contextual.ts b/apps/website/screens/components/badge/code/examples/contextual.ts
deleted file mode 100644
index 59334d60cd..0000000000
--- a/apps/website/screens/components/badge/code/examples/contextual.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "@/common/Placeholder";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-};`;
-
-const scope = {
- DxcInset,
- DxcBadge,
- DxcFlex,
- Placeholder,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/badge/code/examples/contextual.tsx b/apps/website/screens/components/badge/code/examples/contextual.tsx
new file mode 100644
index 0000000000..b5d1120bc6
--- /dev/null
+++ b/apps/website/screens/components/badge/code/examples/contextual.tsx
@@ -0,0 +1,27 @@
+import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+};`;
+
+const scope = {
+ DxcInset,
+ DxcBadge,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/badge/code/examples/icons.ts b/apps/website/screens/components/badge/code/examples/icons.ts
deleted file mode 100644
index 1fa89d811f..0000000000
--- a/apps/website/screens/components/badge/code/examples/icons.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "@/common/Placeholder";
-
-const code = `() => {
- const icon = (
-
- );
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcInset,
- DxcBadge,
- DxcFlex,
- Placeholder,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/badge/code/examples/icons.tsx b/apps/website/screens/components/badge/code/examples/icons.tsx
new file mode 100644
index 0000000000..67a03ac109
--- /dev/null
+++ b/apps/website/screens/components/badge/code/examples/icons.tsx
@@ -0,0 +1,41 @@
+import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ const icon = (
+
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcBadge,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/badge/code/examples/notification.ts b/apps/website/screens/components/badge/code/examples/notification.ts
deleted file mode 100644
index e596d0ebab..0000000000
--- a/apps/website/screens/components/badge/code/examples/notification.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "@/common/Placeholder";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcInset,
- DxcBadge,
- DxcFlex,
- Placeholder,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/badge/code/examples/notification.tsx b/apps/website/screens/components/badge/code/examples/notification.tsx
new file mode 100644
index 0000000000..eb32a12e82
--- /dev/null
+++ b/apps/website/screens/components/badge/code/examples/notification.tsx
@@ -0,0 +1,23 @@
+import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcBadge,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx
new file mode 100644
index 0000000000..7874e9f6d7
--- /dev/null
+++ b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx
@@ -0,0 +1,172 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import notification from "./examples/notification";
+import contextual from "./examples/contextual";
+import anatomy from "./images/badge_anatomy.png";
+import Example from "@/common/example/Example";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Being a non-clickable UI element, the badge serves the purpose of highlighting status, categories or key
+ information within an interface. Designed for clarity and flexibility, the badge seamlessly integrates with
+ different layouts while maintaining consistency. It supports various styles to adapt to diverse use cases
+ without overwhelming the interface and it can be found in combination with other components, such as navtabs.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: it's the area that holds the badge's content, defining its shape, size and
+ background while ensuring proper visibility within the interface.
+
+
+ Semantic categorization: a visual element that complements the label, providing additional
+ meaning or enhancing recognition.
+
+
+ Label: displays the textual content of the badge, conveying status, category or key
+ information.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+
+ The Badge component has two distinct variants, each serving specific purposes within our interface.
+
+ ),
+ subSections: [
+ {
+ title: "Notification badge",
+ content: (
+ <>
+
+ The notification badge is a non-interactive component that serves as an informative indicator, typically
+ used to display counts or alerts, such as the number of unread messages or missed notifications.
+
+
+
+ This notification badge allows label, though it is not not mandatory to use it. You may want to use the
+ label to display the number of notifications missed, or just the empty badge to show that some changes
+ have been made to a certain section of the interface.
+
+
+ Only one color is allowed for this badge, which is the semantic error (generally red), and cannot be
+ changed by any means.
+
+
+ ),
+ },
+ {
+ title: "Contextual badge",
+ content: (
+ <>
+
+ Designed mainly for data visualization interfaces, the contextual variant of the Badge component's main
+ advantage lies in its ability to categorize content and represent specific information. It is
+ intentionally non-interactive and may contain icons strategically chosen to enhance the conveyed
+ information.
+
+
+
+ The contextual badge is available in 8 different colors from the Halstack palette. This flexibility allows
+ the user to adapt the tag smoothly to diverse contexts:
+
+
+
+ Non-semantic categorization: used in instances where the badge does not carry semantic
+ meaning, it can be employed in any color from the available palette.
+
+
+ Semantic categorization: when the badge conveys semantic information, specific semantic
+ colors are available:
+
+
+ Success: positive actions, such as approved, completed, success...
+
+ Info: informative actions, such as published, in use...
+
+ Warning: alert actions, such as pending or paused actions...
+
+
+ Error: negative actions, such as error, rejection, incomplete...
+
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Use badges to convey key information: notification badges are ideal for displaying counts,
+ such as unread messages or missed notifications, while contextual badges help indicate task statuses or
+ progress.
+
+
+ Leverage color for clarity: contextual badge colors can improve recognition and enhance the
+ user experience, especially in data-heavy interfaces with high cognitive load.
+
+
+ Keep labels short and meaningful: badge labels should be concise, ideally no more than
+ three words, to ensure quick comprehension.
+
+
+ Use badges to categorize content: contextual badges can help group-related elements, such
+ as team names, repositories, or file types, providing additional context.
+
+
+ Ensure consistent placement: establish clear guidelines for where badges appear in the
+ interface to maintain visual coherence and usability.
+
+
+ Avoid overuse: excessive badges can clutter the interface and reduce their effectiveness in
+ communicating key information.
+
+
+ Ensure clarity in data visualization: avoid mixing semantic and non-semantic contextual
+ badges within the same format to prevent confusion.
+
+
+ Avoid obstructing key content: badges should be placed thoughtfully to ensure they do not
+ interfere with essential information or interactions.
+
+
+ Use positive or neutral indicators: notification badges should typically display counts or
+ statuses without negative symbols to ensure clarity.
+
+
+
+ ),
+ },
+];
+
+const BadgeOverviewPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default BadgeOverviewPage;
diff --git a/apps/website/screens/components/badge/overview/examples/contextual.tsx b/apps/website/screens/components/badge/overview/examples/contextual.tsx
new file mode 100644
index 0000000000..5a2475e7e6
--- /dev/null
+++ b/apps/website/screens/components/badge/overview/examples/contextual.tsx
@@ -0,0 +1,38 @@
+import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcBadge,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/badge/overview/examples/notification.tsx b/apps/website/screens/components/badge/overview/examples/notification.tsx
new file mode 100644
index 0000000000..15f21b6a67
--- /dev/null
+++ b/apps/website/screens/components/badge/overview/examples/notification.tsx
@@ -0,0 +1,22 @@
+import { DxcInset, DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcBadge,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/badge/overview/images/badge_anatomy.png b/apps/website/screens/components/badge/overview/images/badge_anatomy.png
new file mode 100644
index 0000000000..a39764522d
Binary files /dev/null and b/apps/website/screens/components/badge/overview/images/badge_anatomy.png differ
diff --git a/apps/website/screens/components/badge/specs/BadgeSpecsPage.tsx b/apps/website/screens/components/badge/specs/BadgeSpecsPage.tsx
deleted file mode 100644
index d868a752df..0000000000
--- a/apps/website/screens/components/badge/specs/BadgeSpecsPage.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Figure from "@/common/Figure";
-import specsImage from "./images/badge_specs.jpg";
-import anatomyImage from "./images/badge_anatomy.jpg";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
- Icon
- Label
-
-
- ),
- },
- {
- title: "Design tokens",
- content: This component currently has no design tokens.,
- },
-];
-
-const BadgeSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BadgeSpecsPage;
diff --git a/apps/website/screens/components/badge/specs/images/badge_anatomy.jpg b/apps/website/screens/components/badge/specs/images/badge_anatomy.jpg
deleted file mode 100644
index 689a0277d5..0000000000
Binary files a/apps/website/screens/components/badge/specs/images/badge_anatomy.jpg and /dev/null differ
diff --git a/apps/website/screens/components/badge/specs/images/badge_specs.jpg b/apps/website/screens/components/badge/specs/images/badge_specs.jpg
deleted file mode 100644
index 42c390f0d2..0000000000
Binary files a/apps/website/screens/components/badge/specs/images/badge_specs.jpg and /dev/null differ
diff --git a/apps/website/screens/components/badge/usage/BadgeUsagePage.tsx b/apps/website/screens/components/badge/usage/BadgeUsagePage.tsx
deleted file mode 100644
index e1a58f3d29..0000000000
--- a/apps/website/screens/components/badge/usage/BadgeUsagePage.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import notificationVariants from "./images/badge_notification_variants.jpg";
-import contextualVariants from "./images/badge_contextual_variants.jpg";
-
-const sections = [
- {
- title: "Usage",
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Use a notification badge to display counts, such as the number of unread messages or missed notifications.
-
-
- Showcase the completion or status of tasks by using the contextual badge. Its different colors can help
- the user to identify quickly the status of a task and can improve significantly the overall user
- experience in data visualization screens with high cognitive load.
-
-
- Categorize pieces of information using the contextual label and its colors. It can provide additional
- context or information. For example, a badge can indicate the type or category of content (e.g., names of
- the teams involved in the task, repositories, folders…).
-
-
- Keep it concise. Comprehensively use badges, only displaying essential information that adds value to the
- user experience.
-
-
- The label of the badge component should never contain more than three words. Keeping it simple is the key
- to ensuring users understand the categorization quickly.
-
-
- Establish clear design guidelines within the interface for badges, specially when deciding its placement.
- Consistent use of badges enhances visual coherence and aids user comprehension.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Use both semantic and non-semantic contextual badges in the same data visualization format.
-
-
- Overuse badges, as an excessive use can saturate the interface and fail to communicate important
- information.
-
-
- Place badges in locations that may obstruct essential content or user interactions.
-
-
- Use excessively long sentences in labels. Remember to keep it simple, with a maximum of 3 words.
-
-
- Place the negative symbol (-) in badges, whether they are notification or contextual. Notification badges
- should typically indicate counts or statuses that are positive or neutral to insure clarity and
- comprehension.
-
-
- ),
- },
- ],
- },
- {
- title: "Variants",
- content: (
-
- The Badge component has two distinct variants, each serving specific purposes within our interface.
-
- ),
- subSections: [
- {
- title: "Notification badge",
- content: (
- <>
-
- The notification badge is a non-interactive component that serves as an informative indicator, typically
- used to display counts or alerts, such as the number of unread messages or missed notifications.
-
-
-
-
-
- This notification badge allows label, though it is not not mandatory to use it. You may want to use the
- label to display the number of notifications missed, or just the empty badge to show that some changes
- have been made to a certain section of the interface.
-
-
- Only one color is allowed for this badge, which is red, and cannot be changed by all means.
-
-
- ),
- },
- {
- title: "Contextual badge",
- content: (
- <>
-
- Designed mainly for data visualization interfaces, the contextual variant of the Badge component’s main
- advantage lies in its ability to categorize content and represent specific information. It is
- intentionally non-interactive and may contain icons strategically chosen to enhance the conveyed
- information.
-
-
-
-
-
- The contextual badge is available in 8 different colors from the Halstack palette. This flexibility allows
- the user to adapt the tag smoothly to diverse contexts:
-
-
-
- Non-semantic categorization: used in instances where the badge does not carry semantic
- meaning, it can be employed in any color from the available palette.
-
-
- Semantic categorization: when the badge conveys semantic information, specific semantic
- colors are available:
-
-
- Green: positive actions, such as approved, completed, success…
-
- Blue: informative actions, such as published, in use...
-
- Red: negative actions, such as error, rejection, incomplete...
-
-
- Orange: alert actions, such as pending or paused actions...
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const BadgeUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BadgeUsagePage;
diff --git a/apps/website/screens/components/badge/usage/images/badge_contextual_variants.jpg b/apps/website/screens/components/badge/usage/images/badge_contextual_variants.jpg
deleted file mode 100644
index d6b1474f8e..0000000000
Binary files a/apps/website/screens/components/badge/usage/images/badge_contextual_variants.jpg and /dev/null differ
diff --git a/apps/website/screens/components/badge/usage/images/badge_notification_variants.jpg b/apps/website/screens/components/badge/usage/images/badge_notification_variants.jpg
deleted file mode 100644
index 89875ddcaa..0000000000
Binary files a/apps/website/screens/components/badge/usage/images/badge_notification_variants.jpg and /dev/null differ
diff --git a/apps/website/screens/components/bleed/BleedPageLayout.tsx b/apps/website/screens/components/bleed/BleedPageLayout.tsx
index 60dab729e4..328d1a4287 100644
--- a/apps/website/screens/components/bleed/BleedPageLayout.tsx
+++ b/apps/website/screens/components/bleed/BleedPageLayout.tsx
@@ -6,18 +6,17 @@ import { ReactNode } from "react";
const BleedPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/bleed" },
- { label: "Usage", path: "/components/bleed/usage" },
- { label: "Specifications", path: "/components/bleed/specifications" },
+ { label: "Overview", path: "/components/bleed" },
+ { label: "Code", path: "/components/bleed/code" },
];
return (
-
+
-
+ Bleed layout applies negative spacing scale to its child nodes.
-
+
{children}
diff --git a/apps/website/screens/components/bleed/code/BleedCodePage.tsx b/apps/website/screens/components/bleed/code/BleedCodePage.tsx
index 7bac0816ee..5cdcda52b8 100644
--- a/apps/website/screens/components/bleed/code/BleedCodePage.tsx
+++ b/apps/website/screens/components/bleed/code/BleedCodePage.tsx
@@ -1,95 +1,96 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
-import TableCode from "@/common/TableCode";
+import { TableCode } from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import customSizes from "./examples/customSides";
import StatusBadge from "@/common/StatusBadge";
-const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;
-
const sections = [
{
title: "Props",
content: (
-
-
Name
-
Type
-
Description
-
Default
-
-
-
space
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to all sides.
-
-
-
-
-
horizontal
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the left and right sides.
-
-
-
-
-
vertical
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the top and bottom sides.
-
-
-
-
-
top
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the top side.
-
-
-
-
-
right
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the right side.
-
-
-
-
-
bottom
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the bottom side.
-
-
-
-
-
left
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the left side.
-
-
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
Custom content inside the bleed.
-
-
-
+
+
+
Name
+
Type
+
Description
+
Default
+
+
+
+
+
bottom
+
+ string
+
+
Applies the spacing scale to the bottom side.
+
-
+
+
+
+
+
+ children
+
+
+
+ React.ReactNode
+
+
Custom content inside the bleed.
+
-
+
+
+
horizontal
+
+ string
+
+
Applies the spacing scale to the left and right sides.
+
-
+
+
+
left
+
+ string
+
+
Applies the spacing scale to the left side.
+
-
+
+
+
right
+
+ string
+
+
Applies the spacing scale to the right side.
+
-
+
+
+
space
+
+ string
+
+
Applies the spacing scale to all sides.
+
-
+
+
+
top
+
+ string
+
+
Applies the spacing scale to the top side.
+
-
+
+
+
vertical
+
+ string
+
+
Applies the spacing scale to the top and bottom sides.
+
-
+
+
),
},
@@ -108,15 +109,11 @@ const sections = [
},
];
-const BleedTableCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const BleedCodePage = () => (
+
+
+
+
+);
-export default BleedTableCodePage;
+export default BleedCodePage;
diff --git a/apps/website/screens/components/bleed/code/examples/basicUsage.ts b/apps/website/screens/components/bleed/code/examples/basicUsage.ts
deleted file mode 100644
index 921900ac22..0000000000
--- a/apps/website/screens/components/bleed/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DxcBleed, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "@/common/Placeholder";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcBleed,
- DxcInset,
- DxcFlex,
- Placeholder,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/bleed/code/examples/basicUsage.tsx b/apps/website/screens/components/bleed/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..19d16497f3
--- /dev/null
+++ b/apps/website/screens/components/bleed/code/examples/basicUsage.tsx
@@ -0,0 +1,25 @@
+import { DxcBleed, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcBleed,
+ DxcInset,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/bleed/code/examples/customSides.ts b/apps/website/screens/components/bleed/code/examples/customSides.ts
deleted file mode 100644
index aeabadfbc9..0000000000
--- a/apps/website/screens/components/bleed/code/examples/customSides.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DxcBleed, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "@/common/Placeholder";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcBleed,
- DxcInset,
- DxcFlex,
- Placeholder,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/bleed/code/examples/customSides.tsx b/apps/website/screens/components/bleed/code/examples/customSides.tsx
new file mode 100644
index 0000000000..8d51480313
--- /dev/null
+++ b/apps/website/screens/components/bleed/code/examples/customSides.tsx
@@ -0,0 +1,30 @@
+import { DxcBleed, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcBleed,
+ DxcInset,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx
new file mode 100644
index 0000000000..138d9aa623
--- /dev/null
+++ b/apps/website/screens/components/bleed/overview/BleedOverviewPage.tsx
@@ -0,0 +1,64 @@
+import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The bleed component is a container that applies negative margins around its content, allowing elements to
+ extend beyond their usual boundaries. This can be useful for aligning content seamlessly and creating dynamic,
+ edge-to-edge layouts. It provides customizable spacing options, offering greater design flexibility while
+ maintaining visual coherence.
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Enhance visual flow: use the bleed component to create smooth transitions between sections,
+ removing unwanted spacing restrictions.
+
+
+ Maintain balance and aesthetics: choose appropriate spacing values to ensure a
+ well-proportioned and visually appealing design.
+
+
+ Avoid unnecessary clutter: excessive use of the Inset component may lead to a fragmented or
+ overcrowded layout.
+
+
+ Ensure consistency with design tokens: whenever possible, use the design tokens provided by
+ the Halstack Design System, to maintain visual and functional consistency across applications, even though the
+ component allows custom values.
+
+
+ Combine with other layout techniques: use this component alongside{" "}
+
+ flex
+ {" "}
+ and{" "}
+
+ grid
+ {" "}
+ components to create consistent and semantic layouts.
+
+
+ ),
+ },
+];
+
+const BleedOverviewPage = () => (
+
+
+
+
+);
+
+export default BleedOverviewPage;
diff --git a/apps/website/screens/components/bleed/specs/BleedSpecsPage.tsx b/apps/website/screens/components/bleed/specs/BleedSpecsPage.tsx
deleted file mode 100644
index 9a5a3a750f..0000000000
--- a/apps/website/screens/components/bleed/specs/BleedSpecsPage.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import bleedSpecsImage from "./images/bleed_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
- Negative space varies depending on the REM values and the approach to implementation.
-
-
- ),
- },
-];
-
-const BleedSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BleedSpecsPage;
diff --git a/apps/website/screens/components/bleed/specs/images/bleed_specs.png b/apps/website/screens/components/bleed/specs/images/bleed_specs.png
deleted file mode 100644
index 5583cb33cc..0000000000
Binary files a/apps/website/screens/components/bleed/specs/images/bleed_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/bleed/usage/BleedUsagePage.tsx b/apps/website/screens/components/bleed/usage/BleedUsagePage.tsx
deleted file mode 100644
index 74d918ce85..0000000000
--- a/apps/website/screens/components/bleed/usage/BleedUsagePage.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- Bleed properties refer to the scale of the spacing used outside a container. The unit commonly used for the
- bleed scale is REM, which is a measurement unit that refers to the font-size of the root element of a
- document.
-
-
- The following values of REM are commonly used in the design system: 0, 0.125,{" "}
- 0.25, 0.5, 1, 1.5, 2, 3,{" "}
- 4, and 5.
-
-
- ),
- },
-];
-
-const BleedUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BleedUsagePage;
diff --git a/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx b/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx
index a96d5c06b4..e732e0eec0 100644
--- a/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx
+++ b/apps/website/screens/components/breadcrumbs/BreadcrumbsPageLayout.tsx
@@ -6,21 +6,20 @@ import { ReactNode } from "react";
const BreadcrumbsPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/breadcrumbs" },
- { label: "Usage", path: "/components/breadcrumbs/usage" },
- { label: "Specifications", path: "/components/breadcrumbs/specifications" },
+ { label: "Overview", path: "/components/breadcrumbs" },
+ { label: "Code", path: "/components/breadcrumbs/code" },
];
return (
-
+
-
+
A breadcrumbs trail is a secondary form of navigation that allows users to keep track and maintain awareness
of their location as they move through a hierarchically structured web application.
-
+
{children}
diff --git a/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx b/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx
index 0fe08b8970..cb08c7512c 100644
--- a/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx
+++ b/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx
@@ -1,10 +1,8 @@
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
-import TableCode, { ExtendedTableCode } from "@/common/TableCode";
+import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
import basicUsage from "./examples/basicUsage";
import nextJS from "./examples/nextJS";
import StatusBadge from "@/common/StatusBadge";
@@ -40,7 +38,7 @@ const sections = [
-
+
items
@@ -124,15 +122,11 @@ const sections = [
},
];
-const BreadcrumbsCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const BreadcrumbsCodePage = () => (
+
+
+
+
+);
export default BreadcrumbsCodePage;
diff --git a/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.ts b/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.ts
deleted file mode 100644
index 4c1e3c5882..0000000000
--- a/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcBreadcrumbs, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const items = [
- {
- label: "Select component",
- href: "/components/select",
- },
- {
- label: "Specifications",
- href: "/components/select/specifications",
- },
- {
- label: "Design Tokens",
- href: "/components/select/specifications/#design-tokens",
- },
- {
- label: "Color",
- }
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcBreadcrumbs,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.tsx b/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..7bd4f7c115
--- /dev/null
+++ b/apps/website/screens/components/breadcrumbs/code/examples/basicUsage.tsx
@@ -0,0 +1,34 @@
+import { DxcBreadcrumbs, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const items = [
+ {
+ label: "Select component",
+ href: "/components/select",
+ },
+ {
+ label: "Code",
+ href: "/components/select/code",
+ },
+ {
+ label: "Examples",
+ href: "/components/select/code/#examples",
+ },
+ {
+ label: "Uncontrolled",
+ }
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcBreadcrumbs,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/breadcrumbs/code/examples/nextJS.ts b/apps/website/screens/components/breadcrumbs/code/examples/nextJS.ts
deleted file mode 100644
index 3786cc7efa..0000000000
--- a/apps/website/screens/components/breadcrumbs/code/examples/nextJS.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { DxcBreadcrumbs, DxcInset } from "@dxc-technology/halstack-react";
-import { useRouter } from "next/router";
-
-const code = `() => {
- const router = useRouter();
- const handleClick = (href) => {
- router.push(href);
- };
-
- const items = [
- {
- label: "Select component",
- href: "/components/select",
- },
- {
- label: "Specifications",
- href: "/components/select/specifications",
- },
- {
- label: "Design Tokens",
- href: "/components/select/specifications/#design-tokens",
- },
- {
- label: "Color",
- }
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcBreadcrumbs,
- DxcInset,
- useRouter,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/breadcrumbs/code/examples/nextJS.tsx b/apps/website/screens/components/breadcrumbs/code/examples/nextJS.tsx
new file mode 100644
index 0000000000..2ae913d3d1
--- /dev/null
+++ b/apps/website/screens/components/breadcrumbs/code/examples/nextJS.tsx
@@ -0,0 +1,41 @@
+import { DxcBreadcrumbs, DxcInset } from "@dxc-technology/halstack-react";
+import { useRouter } from "next/router";
+
+const code = `() => {
+ const router = useRouter();
+ const handleClick = (href) => {
+ router.push(href);
+ };
+
+ const items = [
+ {
+ label: "Select component",
+ href: "/components/select",
+ },
+ {
+ label: "Code",
+ href: "/components/select/code",
+ },
+ {
+ label: "Examples",
+ href: "/components/select/code/#examples",
+ },
+ {
+ label: "Uncontrolled",
+ }
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcBreadcrumbs,
+ DxcInset,
+ useRouter,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx b/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx
new file mode 100644
index 0000000000..008bd2a42b
--- /dev/null
+++ b/apps/website/screens/components/breadcrumbs/overview/BreadcrumbsOverviewPage.tsx
@@ -0,0 +1,115 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import collapsed from "./examples/collapsed";
+import noRoot from "./examples/noRoot";
+import Image from "@/common/Image";
+import anatomy from "./images/breadcrumbs_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Breadcrumbs are a navigational component used in user interfaces to improve the user experience by providing a{" "}
+ clear path to previous steps or navigational levels. They typically display the user's current
+ location within the hierarchical structure of an application, allowing for easy navigation and improved
+ orientation.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Unvisited item: these are links that represent the navigational path taken by the user but
+ are not the current page
+
+
+ Divider: a visual element that complements the label, providing additional meaning or
+ enhancing recognition.
+
+
+ Visited item: displays the textual action that the button is going to carry out.
+
+
+
+ ),
+ },
+ {
+ title: "Collapsed breadcrumbs",
+ content: (
+ <>
+
+ When there are more than four items in the breadcrumbs, the component will{" "}
+ collapse the items in a dropdown menu to avoid overloading the interface. Users can click on
+ the dropdown to view the hidden items and navigate to the desired level.
+
+
+ Although this can be configurable, we highly encourage our users to stick with the collapsing at five or more
+ items. This was not a random decision, we carefully selected it to ensure the component does not overload the
+ interface and remains an effective navigational aid.
+
+
+
+ Depending on the amount of available space, the collapsed breadcrumbs can be synthesized more{" "}
+ by removing the root element and displaying only the collapsed dropdown and the current page.
+
+
+ Be mindful of your user's cognitive load and collapse breadcrumbs appropriately.
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use breadcrumbs to support secondary navigation in hierarchical structures, helping users
+ understand where they are and how they got there.
+
+
+ Always include the full path from the homepage or root section to the current page to provide meaningful
+ context.
+
+
+ Display only one breadcrumb trail per page to avoid confusion and maintain a clear navigation
+ hierarchy.
+
+
+ Make all breadcrumb items navigable except for the last one, which should reflect the current page and remain
+ non-interactive.
+
+
+ Keep labels concise and consistent with the destination page titles to avoid ambiguity.
+
+
+ Place breadcrumbs at the top of the page, just below the main navigation or header, to follow
+ common UI patterns and user expectations.
+
+
+ Avoid using breadcrumbs as a replacement for primary navigation — they are meant to complement it, not replace
+ menus or sidebars.
+
+
+ When truncating breadcrumbs due to space constraints,{" "}
+ prioritize showing the first and last items while collapsing the middle items with a clear
+ overflow mechanism.
+
+
+ ),
+ },
+];
+
+const BreadcrumbsOverviewPage = () => (
+
+
+
+
+);
+
+export default BreadcrumbsOverviewPage;
diff --git a/apps/website/screens/components/breadcrumbs/usage/examples/collapsed.tsx b/apps/website/screens/components/breadcrumbs/overview/examples/collapsed.tsx
similarity index 89%
rename from apps/website/screens/components/breadcrumbs/usage/examples/collapsed.tsx
rename to apps/website/screens/components/breadcrumbs/overview/examples/collapsed.tsx
index 66581471ec..8b9b23c9ca 100644
--- a/apps/website/screens/components/breadcrumbs/usage/examples/collapsed.tsx
+++ b/apps/website/screens/components/breadcrumbs/overview/examples/collapsed.tsx
@@ -10,7 +10,7 @@ const code = `() => {
];
return (
-
+
);
diff --git a/apps/website/screens/components/breadcrumbs/usage/examples/noRoot.tsx b/apps/website/screens/components/breadcrumbs/overview/examples/noRoot.tsx
similarity index 89%
rename from apps/website/screens/components/breadcrumbs/usage/examples/noRoot.tsx
rename to apps/website/screens/components/breadcrumbs/overview/examples/noRoot.tsx
index 5822267662..69e62b606c 100644
--- a/apps/website/screens/components/breadcrumbs/usage/examples/noRoot.tsx
+++ b/apps/website/screens/components/breadcrumbs/overview/examples/noRoot.tsx
@@ -10,7 +10,7 @@ const code = `() => {
];
return (
-
+
);
diff --git a/apps/website/screens/components/breadcrumbs/overview/images/breadcrumbs_anatomy.png b/apps/website/screens/components/breadcrumbs/overview/images/breadcrumbs_anatomy.png
new file mode 100644
index 0000000000..8c0d1c9e08
Binary files /dev/null and b/apps/website/screens/components/breadcrumbs/overview/images/breadcrumbs_anatomy.png differ
diff --git a/apps/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx b/apps/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx
deleted file mode 100644
index ac1a756391..0000000000
--- a/apps/website/screens/components/breadcrumbs/specs/BreadcrumbsSpecsPage.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Figure from "@/common/Figure";
-import specs from "./images/breadcrumbs_specs.png";
-import anatomy from "./images/breadcrumbs_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Breadcrumbs item
- Divider
-
-
- ),
- },
- {
- title: "Design tokens",
- content: This component currently has no design tokens.,
- },
-];
-
-const BreadcrumbsSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BreadcrumbsSpecsPage;
diff --git a/apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_anatomy.png b/apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_anatomy.png
deleted file mode 100644
index 05f7782559..0000000000
Binary files a/apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_specs.png b/apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_specs.png
deleted file mode 100644
index 3696d820c9..0000000000
Binary files a/apps/website/screens/components/breadcrumbs/specs/images/breadcrumbs_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx b/apps/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx
deleted file mode 100644
index aefbb75888..0000000000
--- a/apps/website/screens/components/breadcrumbs/usage/BreadcrumbsUsagePage.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import collapsed from "./examples/collapsed";
-import noRoot from "./examples/noRoot";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- Breadcrumbs are a navigational component used in user interfaces to improve the user experience by providing a
- clear path to previous steps or navigational levels. They typically display the user's current location within
- the hierarchical structure of an application, allowing for easy navigation and improved orientation.
-
- ),
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Use breadcrumbs when there are more than two navigational levels within the same hierarchy to help users
- easily navigate and understand their position.
-
-
- Ensure each label of the Breadcrumbs items is informative yet brief, providing users with a clear
- understanding of where each link will take them without overwhelming them with too much text.
-
-
- Always position breadcrumbs in the top left corner of the interface.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Avoid overloading the component. Including too many items in the breadcrumbs increases the cognitive load
- of the interface and can confuse users. We recommend using the collapsed version of the component when
- there are more than four items.
-
-
- Don't use breadcrumbs to replace primary navigation or links, as they are intended to serve as a
- supplementary navigation aid.
-
-
- Refrain from using breadcrumbs to represent the sequence of steps to complete an action. Remember that it
- is a navigation component through levels with an established hierarchy.
-
-
- ),
- },
- ],
- },
- {
- title: "Collapsed Breadcrumbs",
- content: (
- <>
-
- When there are more than four items in the breadcrumbs, the component will collapse the items in a dropdown
- menu to avoid overloading the interface. Users can click on the dropdown to view the hidden items and navigate
- to the desired level.
-
-
- Although this can be configurable, we highly encourage our users to stick with the collapsing at five or more
- items. This was not a random decision, we carefully selected it to ensure the component does not overload the
- interface and remains an effective navigational aid.
-
-
-
- Depending on the amount of available space, the collapsed breadcrumbs can be synthesized more by removing the
- root element and displaying only the collapsed dropdown and the current page.
-
-
- Be mindful of your user's cognitive load and collapse breadcrumbs appropriately.
-
- ),
- },
-];
-
-const BreadcrumbsUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BreadcrumbsUsagePage;
diff --git a/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx b/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx
index bf5a3a8704..ab1c6dcac1 100644
--- a/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx
+++ b/apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx
@@ -6,20 +6,16 @@ import { ReactNode } from "react";
const BulletedListPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/bulleted-list" },
- { label: "Usage", path: "/components/bulleted-list/usage" },
- {
- label: "Specifications",
- path: "/components/bulleted-list/specifications",
- },
+ { label: "Overview", path: "/components/bulleted-list" },
+ { label: "Code", path: "/components/bulleted-list/code" },
];
return (
-
+
-
+ Bulleted list are used to display text items in a bulleted format.
-
+
{children}
diff --git a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx b/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
index cfbdf1bf5c..f1f092eefc 100644
--- a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
+++ b/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
@@ -1,12 +1,10 @@
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcParagraph, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
import basicUsage from "./examples/basicUsage";
import nestedList from "./examples/nestedList";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
const sections = [
@@ -24,14 +22,19 @@ const sections = [
Defines the style of the bullet point in the list.
- Contains one or more DxcBulletedList.Item.
+ 'disc'
-
-
@@ -86,7 +84,7 @@ const sections = [
-
+
children
@@ -118,15 +116,11 @@ const sections = [
},
];
-const BulletedListCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const BulletedListCodePage = () => (
+
+
+
+
+);
export default BulletedListCodePage;
diff --git a/apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts b/apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts
deleted file mode 100644
index 502a54fd02..0000000000
--- a/apps/website/screens/components/bulleted-list/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
-const code = `() => {
- return (
-
-
- Code
- Usage
- Specifications
-
-
- );
-}`;
-
-const scope = {
- DxcBulletedList,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/bulleted-list/code/examples/basicUsage.tsx b/apps/website/screens/components/bulleted-list/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..eb4b6c1b97
--- /dev/null
+++ b/apps/website/screens/components/bulleted-list/code/examples/basicUsage.tsx
@@ -0,0 +1,19 @@
+import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
+const code = `() => {
+ return (
+
+
+ Code
+ Usage
+ Specifications
+
+
+ );
+}`;
+
+const scope = {
+ DxcBulletedList,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/bulleted-list/code/examples/nestedList.ts b/apps/website/screens/components/bulleted-list/code/examples/nestedList.ts
deleted file mode 100644
index 7707738a26..0000000000
--- a/apps/website/screens/components/bulleted-list/code/examples/nestedList.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
-const code = `() => {
- return (
-
-
- Code
-
- Usage
-
- Usage for admins.
- Usage for non-admins.
-
-
- Specifications
-
-
- );
-}`;
-
-const scope = {
- DxcBulletedList,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/bulleted-list/code/examples/nestedList.tsx b/apps/website/screens/components/bulleted-list/code/examples/nestedList.tsx
new file mode 100644
index 0000000000..af6301653f
--- /dev/null
+++ b/apps/website/screens/components/bulleted-list/code/examples/nestedList.tsx
@@ -0,0 +1,25 @@
+import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
+const code = `() => {
+ return (
+
+
+ Code
+
+ Usage
+
+ Usage for admins.
+ Usage for non-admins.
+
+
+ Specifications
+
+
+ );
+}`;
+
+const scope = {
+ DxcBulletedList,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx b/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx
new file mode 100644
index 0000000000..23c59651ab
--- /dev/null
+++ b/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx
@@ -0,0 +1,172 @@
+import Code from "@/common/Code";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import { DxcFlex, DxcBulletedList, DxcParagraph, DxcAlert } from "@dxc-technology/halstack-react";
+import anatomy from "./images/bulleted_list_anatomy.png";
+import Example from "@/common/example/Example";
+import disc from "./examples/disc";
+import circle from "./examples/circle";
+import square from "./examples/square";
+import number from "./examples/number";
+import icon from "./examples/icon";
+import Image from "@/common/Image";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Bulleted lists are used to present grouped information in a clear, scannable format. They help users quickly
+ identify key points or related items without following a specific order. In Halstack, the bulleted list
+ component supports customizable icon variants, and nesting levels to adapt to different content needs while
+ maintaining consistency and readability across the interface. Use this component to enhance clarity and break
+ down complex information into digestible chunks.
+
+
+ Disclaimer — This component is not a 1-to-1 replacement of the ulol native
+ tags. These native tags have many different use-cases and the Bulleted List only covers one of them:
+ listing text items within a document.
+
+ ),
+ }}
+ closable={false}
+ />
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Bullet point: a small visual marker placed before each list item. It provides visual
+ separation and helps emphasize each individual entry within the list. The default style is a filled circle.
+
+
+ Label: the text content associated with each bullet point. It conveys the actual
+ information and should be clear, concise, and scannable for easy reading.
+
+
+
+ ),
+ },
+ {
+ title: "Types",
+ subSections: [
+ {
+ title: "Disc",
+ content: (
+ <>
+
+ Disc are the default type, represented by a filled circle. It is commonly used for the most standard lists
+ where content doesn't require special emphasis or categorization.
+
+
+
+ ),
+ },
+ {
+ title: "Circle",
+ content: (
+ <>
+
+ Showcased like an empty circle marker, they offer a lighter visual alternative. It is frequently used for
+ secondary or nested lists, or when a subtler design is preferred.
+
+
+
+ ),
+ },
+ {
+ title: "Square",
+ content: (
+ <>
+
+ Square types consist of a solid square marker that draws slightly more attention. This type is mostly used
+ for lists that need more visual weight, or for lists that need to be differentiated from standard content
+ blocks.
+
+
+
+ ),
+ },
+ {
+ title: "Number",
+ content: (
+ <>
+
+ This type of bulleted list display items in a numbered sequence. They are used for lists that contain
+ ordered steps, instructions, or any content where sequence or priority is important.
+
+
+
+ ),
+ },
+ {
+ title: "Icon",
+ content: (
+ <>
+
+ In this type of bulleted list, the visual marker is an icon instead of a standard one. They are commonly
+ used for lists that benefit from visual cues to reinforce meaning, such as warning icons, checkmarks or
+ status indicators.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Choose the appropriate bullet type for the context: use discs for standard lists, numbers
+ for sequences or steps, and icons when a visual cue adds clarity or emphasis.
+
+
+ Keep list items concise and scannable: lists should be easy to read at a glance. Use brief,
+ clear phrasing.
+
+
+ Maintain parallel structure: ensure that all list items follow a consistent grammatical
+ pattern to improve readability.
+
+
+ Avoid overusing nested lists: deeply nested lists can be hard to follow. Limit nesting to
+ one level if possible.
+
+
+ Use punctuation consistently: if one item ends in a period, all items should, unless
+ they're just short phrases or single words.
+
+
+ Use spacing to improve legibility: ensure there is enough vertical space between items,
+ especially in longer lists.
+
+
+
+ ),
+ },
+];
+
+const BulletedListOverviewPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default BulletedListOverviewPage;
diff --git a/apps/website/screens/components/bulleted-list/overview/examples/circle.tsx b/apps/website/screens/components/bulleted-list/overview/examples/circle.tsx
new file mode 100644
index 0000000000..82c38f81b1
--- /dev/null
+++ b/apps/website/screens/components/bulleted-list/overview/examples/circle.tsx
@@ -0,0 +1,17 @@
+import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
+const code = `() => {
+ return (
+
+
+ Circle
+
+
+ );
+}`;
+
+const scope = {
+ DxcBulletedList,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/bulleted-list/overview/examples/disc.tsx b/apps/website/screens/components/bulleted-list/overview/examples/disc.tsx
new file mode 100644
index 0000000000..746dd42877
--- /dev/null
+++ b/apps/website/screens/components/bulleted-list/overview/examples/disc.tsx
@@ -0,0 +1,17 @@
+import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
+const code = `() => {
+ return (
+
+
+ Disc
+
+
+ );
+}`;
+
+const scope = {
+ DxcBulletedList,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/bulleted-list/overview/examples/icon.tsx b/apps/website/screens/components/bulleted-list/overview/examples/icon.tsx
new file mode 100644
index 0000000000..a02d63b24a
--- /dev/null
+++ b/apps/website/screens/components/bulleted-list/overview/examples/icon.tsx
@@ -0,0 +1,24 @@
+import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
+const code = `() => {
+ const icon = (
+
+ );
+
+ return (
+
+
+ Icon
+
+
+ );
+}`;
+
+const scope = {
+ DxcBulletedList,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/bulleted-list/overview/examples/number.tsx b/apps/website/screens/components/bulleted-list/overview/examples/number.tsx
new file mode 100644
index 0000000000..bd7baf75b4
--- /dev/null
+++ b/apps/website/screens/components/bulleted-list/overview/examples/number.tsx
@@ -0,0 +1,17 @@
+import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
+const code = `() => {
+ return (
+
+
+ Number
+
+
+ );
+}`;
+
+const scope = {
+ DxcBulletedList,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/bulleted-list/overview/examples/square.tsx b/apps/website/screens/components/bulleted-list/overview/examples/square.tsx
new file mode 100644
index 0000000000..6b58c6ca20
--- /dev/null
+++ b/apps/website/screens/components/bulleted-list/overview/examples/square.tsx
@@ -0,0 +1,17 @@
+import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
+const code = `() => {
+ return (
+
+
+ Square
+
+
+ );
+}`;
+
+const scope = {
+ DxcBulletedList,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/bulleted-list/overview/images/bulleted_list_anatomy.png b/apps/website/screens/components/bulleted-list/overview/images/bulleted_list_anatomy.png
new file mode 100644
index 0000000000..fa1e20d40c
Binary files /dev/null and b/apps/website/screens/components/bulleted-list/overview/images/bulleted_list_anatomy.png differ
diff --git a/apps/website/screens/components/bulleted-list/specs/BulletedListSpecsPage.tsx b/apps/website/screens/components/bulleted-list/specs/BulletedListSpecsPage.tsx
deleted file mode 100644
index 0919a65fe4..0000000000
--- a/apps/website/screens/components/bulleted-list/specs/BulletedListSpecsPage.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { DxcTable, DxcFlex } 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";
-
-const sections = [
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Typography",
- content: (
- <>
-
-
-
-
Component token
-
Element
-
Core token
-
Value
-
-
-
-
-
- fontFamily
-
-
List item text
-
- font-family-sans
-
-
'Open Sans, sans-serif'
-
-
-
- fontSize
-
-
List item text
-
- font-scale-03
-
-
1rem
-
-
-
- fontWeight
-
-
List item text
-
- font-scale-03
-
-
400
-
-
-
- color
-
-
List item text
-
- color-black
-
-
#000000
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const BulletedListSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BulletedListSpecsPage;
diff --git a/apps/website/screens/components/bulleted-list/usage/BulletedListUsagePage.tsx b/apps/website/screens/components/bulleted-list/usage/BulletedListUsagePage.tsx
deleted file mode 100644
index 4da1f87934..0000000000
--- a/apps/website/screens/components/bulleted-list/usage/BulletedListUsagePage.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import { DxcFlex, DxcBulletedList, DxcParagraph } from "@dxc-technology/halstack-react";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- This component is not a 1-to-1 replacement of the ulol native tags. These native
- tags have many different use-cases and the Bulleted List only covers one of them: listing text items within a
- document.
-
-
- Lists can be ordered or unordered. If the order of the list items matters for context to the user, an ordered
- list should be used. If the meaning of the list is not changed based on the order of the items, an unordered
- list should be used.
-
-
- Ordered lists are displayed with a preceding number.
- Unordered lists are displayed with a preceding bullet point.
- Lists can be nested as deeply as needed.
-
-
- ),
- },
-];
-
-const BulletedListUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default BulletedListUsagePage;
diff --git a/apps/website/screens/components/button/ButtonPageLayout.tsx b/apps/website/screens/components/button/ButtonPageLayout.tsx
index 2c0a7a3f15..f0c7259c0b 100644
--- a/apps/website/screens/components/button/ButtonPageLayout.tsx
+++ b/apps/website/screens/components/button/ButtonPageLayout.tsx
@@ -6,24 +6,20 @@ import { ReactNode } from "react";
const ButtonPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/button" },
- { label: "Usage", path: "/components/button/usage" },
- { label: "Specifications", path: "/components/button/specifications" },
+ { label: "Overview", path: "/components/button" },
+ { label: "Code", path: "/components/button/code" },
];
return (
-
+
-
+
Buttons are basic interface elements that initialize an action or function when the user interacts with
- them. The appearance of the button should suggest the user takes an action that leads to different
- scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to
- Action) components, which basically are designed to capture user attention and improve the user experience
- within the application.
+ them.
-
+
{children}
diff --git a/apps/website/screens/components/button/code/ButtonCodePage.tsx b/apps/website/screens/components/button/code/ButtonCodePage.tsx
index a551b9a4a5..0e0217718c 100644
--- a/apps/website/screens/components/button/code/ButtonCodePage.tsx
+++ b/apps/website/screens/components/button/code/ButtonCodePage.tsx
@@ -1,15 +1,12 @@
import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import StatusBadge from "@/common/StatusBadge";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import semantic from "./examples/semantic";
import icons from "./examples/icons";
import sizes from "./examples/sizes";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -26,63 +23,13 @@ const sections = [
Specifies the semantic meaning of the buttons, which determines its color.
-
- 'default'
-
-
-
-
title
-
- string
-
-
- Text representing advisory information related to the button's action. Under the hood, this prop also
- serves as an accessible label for the component.
-
-
-
-
-
-
type
-
- 'button' | 'reset' | 'submit'
-
+
disabled
- Sets the type attribute of the HTML button element. See{" "}
-
- MDN
- {" "}
- for further information.
+ boolean
+ 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.
+
Specifies the semantic meaning of the buttons, which determines its color.
- 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.
+ 'default'
-
-
-
-
-
- size
-
-
+
size
{
@@ -170,6 +130,33 @@ const sections = [
0
+
+
title
+
+ string
+
+
+ Text representing advisory information related to the button's action. Under the hood, this prop also
+ serves as an accessible label for the component.
+
+
-
+
+
+
type
+
+ 'button' | 'reset' | 'submit'
+
+
+ Sets the type attribute of the HTML button element. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'button'
+
+
),
@@ -181,14 +168,14 @@ const sections = [
title: "Basic usage",
content: ,
},
- {
- title: "Semantic",
- content: ,
- },
{
title: "Icons",
content: ,
},
+ {
+ title: "Semantic",
+ content: ,
+ },
{
title: "Size",
content: ,
@@ -197,15 +184,11 @@ const sections = [
},
];
-const ButtonCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const ButtonCodePage = () => (
+
+
+
+
+);
export default ButtonCodePage;
diff --git a/apps/website/screens/components/button/code/examples/basicUsage.ts b/apps/website/screens/components/button/code/examples/basicUsage.ts
deleted file mode 100644
index ca89f4dcb2..0000000000
--- a/apps/website/screens/components/button/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DxcButton, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/button/code/examples/basicUsage.tsx b/apps/website/screens/components/button/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..a997c854ab
--- /dev/null
+++ b/apps/website/screens/components/button/code/examples/basicUsage.tsx
@@ -0,0 +1,16 @@
+import { DxcButton, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/button/code/examples/icons.ts b/apps/website/screens/components/button/code/examples/icons.ts
deleted file mode 100644
index a96738a2fd..0000000000
--- a/apps/website/screens/components/button/code/examples/icons.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/button/code/examples/icons.tsx b/apps/website/screens/components/button/code/examples/icons.tsx
new file mode 100644
index 0000000000..716ad2ef66
--- /dev/null
+++ b/apps/website/screens/components/button/code/examples/icons.tsx
@@ -0,0 +1,20 @@
+import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/button/code/examples/semantic.ts b/apps/website/screens/components/button/code/examples/semantic.ts
deleted file mode 100644
index 16ab6332e7..0000000000
--- a/apps/website/screens/components/button/code/examples/semantic.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/button/code/examples/semantic.tsx b/apps/website/screens/components/button/code/examples/semantic.tsx
new file mode 100644
index 0000000000..d6a0f121f4
--- /dev/null
+++ b/apps/website/screens/components/button/code/examples/semantic.tsx
@@ -0,0 +1,23 @@
+import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/button/code/examples/sizes.ts b/apps/website/screens/components/button/code/examples/sizes.ts
deleted file mode 100644
index 889e21ee7c..0000000000
--- a/apps/website/screens/components/button/code/examples/sizes.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/button/code/examples/sizes.tsx b/apps/website/screens/components/button/code/examples/sizes.tsx
new file mode 100644
index 0000000000..edbde9d595
--- /dev/null
+++ b/apps/website/screens/components/button/code/examples/sizes.tsx
@@ -0,0 +1,39 @@
+import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx b/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx
new file mode 100644
index 0000000000..5eca38f50e
--- /dev/null
+++ b/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx
@@ -0,0 +1,440 @@
+import {
+ DxcBulletedList,
+ DxcFlex,
+ DxcTable,
+ DxcParagraph,
+ DxcTypography,
+ DxcAlert,
+} from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import icons from "./examples/iconUsage";
+import semantics from "./examples/semantics";
+import variants from "./examples/variants";
+import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
+import Code from "@/common/Code";
+import Image from "@/common/Image";
+import anatomy from "./images/button_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The Halstack button component is a versatile and accessible UI element designed to trigger user actions across
+ applications. It supports multiple variants, including primary, secondary, and text buttons, ensuring
+ flexibility in different use cases. The button's appearance suggests the user takes an action that leads to
+ different scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to
+ Action) components, which basically are designed to capture user attention and improve the user experience
+ within the application.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: the interactive/clickable area of the button.
+
+
+ Icon: a visual element that complements the label, providing additional meaning or
+ enhancing recognition.
+
+
+ Label: displays the textual action that the button is going to carry out.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+
+ We can identify three different variants that imply some visual changes according to color and border
+ attributes.
+
+
+
+
+
+
Variant
+ Description
+
+
+
+
+
+ Primary
+
+
+ For the principal call to action on the page; primary buttons should only appear once per screen (not
+ including the application header or in a modal dialog).
+
+
+
+
+ Secondary
+
+
+ For less prominent actions; secondary buttons can be used in isolation or paired with a primary button
+ when there are multiple calls to action.
+
+
+
+
+ Text
+
+
+ For the least pronounced actions; often used in conjunction with a primary button (e.g. cancel in a
+ modal dialog).
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Icon usage",
+ content: (
+ <>
+
+ Any icon can be used in Halstack Design System, so it is up to the user to choose which one suits its use case
+ better. But, it is recommended to use the same library of icons throughout the application to keep
+ consistency.
+
+
+
+ The icon can go before or after the text with a separation of 8 pixels respecting the main button's text.
+
+
+ Do not use icons mainly for visual interest, the glyph must add information and clarification to the action
+ that would be performed in the context of the button.
+
+
+ A button with an icon and no text is also allowed in the design system. In such a situation and in order to
+ preserve the accessibility of the button, the use of the title prop is mandatory.
+
+
+ The title prop offers a contextual bubble with missing information necessary to clarify the
+ action performed by the button. It also provides an accessible gateway when no regular label can be
+ specified.
+
+
+ Try to limit the use of icon-only buttons. Whenever possible, the icon should be accompanied by a label.
+
+
+
+
+ ),
+ },
+ {
+ title: "Semantic buttons",
+ content: (
+ <>
+
+ Semantic buttons use specific colors to convey the nature of the action they trigger. They provide immediate
+ context about the action's significance or the feedback it represents.
+
+
+
+
+
Semantic
+ Description
+
+
+
+
+
+
+ Default
+
+
+
+ Neutral action with no specific context. Typically used for general actions. Shown in the brand's
+ primary color. Use for neutral actions such as "Submit", "Save" or "Continue.".
+
+
+
+
+
+ Error
+
+
+
+ Indicates a destructive action or highlights a critical issue. Use for actions like "Delete", "Remove"
+ or "Cancel Subscription.".
+
+
+
+
+
+ Info
+
+
+
+ Provides additional information or context. Use for actions like "More Info", "Details" or "Learn
+ More.".
+
+
+
+
+
+ Success
+
+
+
+ Represents a positive action or confirms the completion of a task. Use for actions like "Confirm",
+ "Complete" or "Approve.".
+
+
+
+
+
+ Warning
+
+
+
+ Alerts the user to potential issues or actions that need caution. Use for actions like "Warning" or
+ "Attention Needed.".
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Sizes",
+ content: (
+ <>
+
+ The context in which a button is used often dictates its size. Halstack provides buttons in different sizes to
+ help create interfaces that are not only functional but also intuitive and accessible, catering to a wide
+ range of user needs and interaction scenarios.
+
+
+ Varying button sizes help establish a clear visual hierarchy, guiding users towards the most critical actions.
+ Primary actions are made more prominent with larger buttons, while secondary actions use smaller buttons to
+ avoid distraction.
+
+
+
+ ),
+ subSections: [
+ {
+ title: "Height",
+ subSections: [
+ {
+ title: "Small",
+ content: (
+ <>
+
+ Small buttons help to maintain a clean and uncluttered interface, especially in dense layouts. They
+ are suitable for scenarios where precise actions are needed, often accompanied by icons for quick
+ recognition.
+
+ Use cases:
+
+
+ Compact spaces: Small buttons are ideal for areas with limited space, such as
+ tables, forms, and other components.
+
+
+ Secondary actions: They can be used for less prominent actions that are not the
+ primary focus of the user's interaction.
+
+
+
+ ),
+ },
+ {
+ title: "Medium",
+ content: (
+ <>
+
+ Medium buttons provide a good balance between visibility and space usage, making them versatile for
+ various design contexts.
+
+ Use cases:
+
+
+ General use: Medium buttons are the standard size for most button interactions
+ across web and mobile applications.
+
+
+ Primary actions: They are often used for primary actions on forms, dialogs, and
+ other key interaction points.
+
+
+ Consistency: Using medium buttons as the default ensures a consistent look and feel
+ across the application, aiding user familiarity and navigation.
+
+
+
+ ),
+ },
+ {
+ title: "Large",
+ content: (
+ <>
+
+ Large buttons draw attention and encourage interaction, which is vital for important actions. They
+ create a visual hierarchy, emphasizing the most important actions and guiding users towards them.
+
+ Use cases:
+
+
+ Prominent actions: Large buttons are used for primary or critical actions that
+ require high visibility, such as "Submit", "Save" or "Purchase".
+
+
+ Call to action (CTA): They are often employed in call-to-action sections where user
+ engagement is crucial, like landing pages.
+
+
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: "Best practices for button labels",
+ subSections: [
+ {
+ title: "Be clear and concise",
+ content: (
+
+
+ Use actionable language: Start with a verb that clearly describes the action. Examples:
+ "Submit", "Save" or "Delete".
+
+
+ Keep it short: Aim for one or two words. Longer text can make buttons harder to read and
+ understand quickly.
+
+
+ ),
+ },
+ {
+ title: "Ensure clarity",
+ content: (
+
+
+ Avoid ambiguity: Make sure the button's purpose is immediately clear. Avoid vague labels
+ like "Click here" or "Go".
+
+
+ Use specific nouns: If necessary, include a noun to provide more context. Examples: "Add
+ item", "View details".
+
+
+ ),
+ },
+ {
+ title: "Maintain consistency",
+ content: (
+
+
+ Consistent terminology: Use the same terms for similar actions across your interface to
+ avoid confusion. For example, always use "Submit" for form submissions.
+
+
+ Sentence case: Use sentence-style capitalization — only capitalize the first word. This
+ improves readability and looks more approachable.
+
+
+ ),
+ },
+ {
+ title: "Focus on the user",
+ content: (
+
+
+ User-centric language: Write from the user's perspective. For actions that the user
+ performs, consider using first-person pronouns (e.g., "My profile").
+
+
+ Positive tone: Where possible, frame actions positively to encourage interaction. For
+ example, use "Continue" instead of "Next".
+
+
+ ),
+ },
+ {
+ title: "Accessibility",
+ content: (
+
+
+ Descriptive labels: Ensure that the button copy makes sense out of context for screen
+ reader users. Avoid labels like "More" without additional context.
+
+
+ Avoid jargon: Use plain language that is easily understood by all users, including those
+ who may not be familiar with technical terms.
+
+
+ ),
+ },
+ {
+ title: "Visual hierarchy",
+ content: (
+
+
+ Primary action first: Ensure the primary action stands out with a prominent position and
+ styling.
+
+
+ Avoid redundant text: Do not include unnecessary words that do not add value to the
+ action.
+
+
+ ),
+ },
+ {
+ title: "Tips",
+ content: (
+
+
+ Test for clarity: Show your button text to others without context to see if they
+ understand the action.
+
+
+ Iterate based on feedback: Be open to changing your button copy based on user feedback
+ and testing results.
+
+
+ Avoid punctuation: Do not use end punctuation in button labels unless absolutely
+ necessary.
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const ButtonOverviewPage = () => (
+
+
+
+
+);
+
+export default ButtonOverviewPage;
diff --git a/apps/website/screens/components/button/overview/examples/iconUsage.tsx b/apps/website/screens/components/button/overview/examples/iconUsage.tsx
new file mode 100644
index 0000000000..fde79505ce
--- /dev/null
+++ b/apps/website/screens/components/button/overview/examples/iconUsage.tsx
@@ -0,0 +1,45 @@
+import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/button/overview/examples/semantics.tsx b/apps/website/screens/components/button/overview/examples/semantics.tsx
new file mode 100644
index 0000000000..40d74e89a3
--- /dev/null
+++ b/apps/website/screens/components/button/overview/examples/semantics.tsx
@@ -0,0 +1,23 @@
+import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/button/overview/examples/variants.tsx b/apps/website/screens/components/button/overview/examples/variants.tsx
new file mode 100644
index 0000000000..34d84f5d0f
--- /dev/null
+++ b/apps/website/screens/components/button/overview/examples/variants.tsx
@@ -0,0 +1,21 @@
+import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/button/overview/images/button_anatomy.png b/apps/website/screens/components/button/overview/images/button_anatomy.png
new file mode 100644
index 0000000000..2b55662daa
Binary files /dev/null and b/apps/website/screens/components/button/overview/images/button_anatomy.png differ
diff --git a/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx b/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx
deleted file mode 100644
index a6c4a5969a..0000000000
--- a/apps/website/screens/components/button/specs/ButtonSpecsPage.tsx
+++ /dev/null
@@ -1,2015 +0,0 @@
-import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import buttonSpecsImage from "./images/button_specs.png";
-import buttonStatesImage from "./images/button_states.png";
-import buttonAnatomyImage from "./images/button_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States and semantics",
- content: (
- <>
-
- The states are the different behaviors of the button component based on the interaction of the user. For the
- desktop version, we contemplate five different states by which can pass.
-
-
- States: enabled, hover, focus, active and{" "}
- disabled.
-
-
- Semantics: default, error, warning,{" "}
- success and info.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
- Icon
- Label
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "General",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
-
- These values can be applied independently to each side of the component: top,{" "}
- bottom, left,right.
-
-
- ),
- },
- {
- title: "Typography",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
- ],
- },
- {
- title: "Accessibility",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- 2.4.7: Focus Visible
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 3.2.2: On Input
-
-
-
- WAI-ARIA Authoring Practices Guide (APG) -{" "}
-
- Button Pattern
-
-
-
- ),
- },
-];
-
-const ButtonSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ButtonSpecsPage;
diff --git a/apps/website/screens/components/button/specs/images/button_anatomy.png b/apps/website/screens/components/button/specs/images/button_anatomy.png
deleted file mode 100644
index 954e2df9e0..0000000000
Binary files a/apps/website/screens/components/button/specs/images/button_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/button/specs/images/button_specs.png b/apps/website/screens/components/button/specs/images/button_specs.png
deleted file mode 100644
index fd267c630a..0000000000
Binary files a/apps/website/screens/components/button/specs/images/button_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/button/specs/images/button_states.png b/apps/website/screens/components/button/specs/images/button_states.png
deleted file mode 100644
index d8faa623e1..0000000000
Binary files a/apps/website/screens/components/button/specs/images/button_states.png and /dev/null differ
diff --git a/apps/website/screens/components/button/usage/ButtonUsagePage.tsx b/apps/website/screens/components/button/usage/ButtonUsagePage.tsx
deleted file mode 100644
index c101c6c266..0000000000
--- a/apps/website/screens/components/button/usage/ButtonUsagePage.tsx
+++ /dev/null
@@ -1,429 +0,0 @@
-import {
- DxcBulletedList,
- DxcFlex,
- DxcTable,
- DxcParagraph,
- DxcTypography,
- DxcAlert,
-} from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import variants from "./examples/variants";
-import icons from "./examples/iconUsage";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-import Code from "@/common/Code";
-import Image from "@/common/Image";
-import semanticButtons from "./images/semantic_buttons.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- In instances where buttons are vertically stacked, buttons should be the same length.
-
-
- Horizontally displayed buttons are dependent on the amount of text, so button lengths may vary, always
- considering the minimum and maximum established sizes.
-
- Text or icon on a button should always be centered.
-
- There must be 8 pixels of space between horizontally displayed buttons.
-
-
- ),
- },
- {
- title: "Variants",
- content: (
- <>
-
- We can identify three different variants that imply some visual changes according to color and border
- attributes.
-
-
-
-
-
-
Variant
- Description
-
-
-
-
-
- Primary
-
-
- For the principal call to action on the page; primary buttons should only appear once per screen (not
- including the application header or in a modal dialog).
-
-
-
-
- Secondary
-
-
- For less prominent actions; secondary buttons can be used in isolation or paired with a primary button
- when there are multiple calls to action.
-
-
-
-
- Text
-
-
- For the least pronounced actions; often used in conjunction with a primary button (e.g. cancel in a
- modal dialog).
-
-
-
-
-
- ),
- },
- {
- title: "Icon usage",
- content: (
- <>
-
- Any icon can be used in Halstack Design System, so it is up to the user to choose which one suits its use case
- better. But, it is recommended to use the same library of icons throughout the application to keep
- consistency.
-
-
-
- The icon can go before or after the text with a separation of 8 pixels respecting the main button's text.
-
-
- Do not use icons mainly for visual interest, the glyph must add information and clarification to the action
- that would be performed in the context of the button.
-
-
- A button with an icon and no text is also allowed in the design system. In such a situation and in order to
- preserve the accessibility of the button, the use of the title prop is mandatory.
-
-
- The title prop offers a contextual bubble with missing information necessary to clarify the
- action performed by the button. It also provides an accessible gateway when no regular label can be
- specified.
-
-
- Try to limit the use of icon-only buttons. Whenever possible, the icon should be accompanied by a label.
-
-
-
-
- ),
- },
- {
- title: "Semantic buttons",
- content: (
- <>
-
- Semantic buttons use specific colors to convey the nature of the action they trigger. They provide immediate
- context about the action's significance or the feedback it represents.
-
-
-
-
-
Semantic
- Description
-
-
-
-
-
-
- Default
-
-
-
- Neutral action with no specific context. Typically used for general actions. Shown in the brand's
- primary color. Use for neutral actions such as "Submit", "Save" or "Continue.”.
-
-
-
-
-
- Error
-
-
-
- Indicates a destructive action or highlights a critical issue. Styled in red. Use for actions like
- "Delete", "Remove" or "Cancel Subscription.”.
-
-
-
-
-
- Info
-
-
-
- Provides additional information or context. Shown in blue, the brand's secondary color. Use for actions
- like "More Info", "Details" or "Learn More.”.
-
-
-
-
-
- Success
-
-
-
- Represents a positive action or confirms the completion of a task. Styled in green. Use for actions like
- "Confirm", "Complete" or "Approve.”.
-
-
-
-
-
- Warning
-
-
-
- Alerts the user to potential issues or actions that need caution. Styled in orange. Use for actions like
- "Warning" or "Attention Needed.”.
-
-
-
-
-
-
- ),
- },
- {
- title: "Sizes",
- content: (
- <>
-
- The context in which a button is used often dictates its size. Halstack provides buttons in different sizes to
- help create interfaces that are not only functional but also intuitive and accessible, catering to a wide
- range of user needs and interaction scenarios.
-
-
- Varying button sizes help establish a clear visual hierarchy, guiding users towards the most critical actions.
- Primary actions are made more prominent with larger buttons, while secondary actions use smaller buttons to
- avoid distraction.
-
-
-
- ),
- subSections: [
- {
- title: "Height",
- subSections: [
- {
- title: "Small",
- content: (
- <>
-
- Small buttons help to maintain a clean and uncluttered interface, especially in dense layouts. They
- are suitable for scenarios where precise actions are needed, often accompanied by icons for quick
- recognition.
-
- Use cases:
-
-
- Compact spaces: Small buttons are ideal for areas with limited space, such as
- tables, forms, and other components.
-
-
- Secondary actions: They can be used for less prominent actions that are not the
- primary focus of the user’s interaction.
-
-
-
- ),
- },
- {
- title: "Medium",
- content: (
- <>
-
- Medium buttons provide a good balance between visibility and space usage, making them versatile for
- various design contexts.
-
- Use cases:
-
-
- General use: Medium buttons are the standard size for most button interactions
- across web and mobile applications.
-
-
- Primary actions: They are often used for primary actions on forms, dialogs, and
- other key interaction points.
-
-
- Consistency: Using medium buttons as the default ensures a consistent look and feel
- across the application, aiding user familiarity and navigation.
-
-
-
- ),
- },
- {
- title: "Large",
- content: (
- <>
-
- Large buttons draw attention and encourage interaction, which is vital for important actions. They
- create a visual hierarchy, emphasizing the most important actions and guiding users towards them.
-
- Use cases:
-
-
- Prominent actions: Large buttons are used for primary or critical actions that
- require high visibility, such as "Submit", "Save" or "Purchase".
-
-
- Call to action (CTA): They are often employed in call-to-action sections where user
- engagement is crucial, like landing pages.
-
-
-
- ),
- },
- ],
- },
- ],
- },
- {
- title: "Best practices for button labels",
- subSections: [
- {
- title: "Be clear and concise",
- content: (
-
-
- Use actionable language: Start with a verb that clearly describes the action. Examples:
- "Submit", "Save" or "Delete".
-
-
- Keep it short: Aim for one or two words. Longer text can make buttons harder to read and
- understand quickly.
-
-
- ),
- },
- {
- title: "Ensure clarity",
- content: (
-
-
- Avoid ambiguity: Make sure the button’s purpose is immediately clear. Avoid vague labels
- like "Click here" or "Go".
-
-
- Use specific nouns: If necessary, include a noun to provide more context. Examples: "Add
- item", "View details".
-
-
- ),
- },
- {
- title: "Maintain consistency",
- content: (
-
-
- Consistent terminology: Use the same terms for similar actions across your interface to
- avoid confusion. For example, always use "Submit" for form submissions.
-
-
- Sentence case: Use sentence-style capitalization—only capitalize the first word. This
- improves readability and looks more approachable.
-
-
- ),
- },
- {
- title: "Focus on the user",
- content: (
-
-
- User-centric language: Write from the user’s perspective. For actions that the user
- performs, consider using first-person pronouns (e.g., "My profile").
-
-
- Positive tone: Where possible, frame actions positively to encourage interaction. For
- example, use "Continue" instead of "Next".
-
-
- ),
- },
- {
- title: "Accessibility",
- content: (
-
-
- Descriptive labels: Ensure that the button copy makes sense out of context for screen
- reader users. Avoid labels like "More" without additional context.
-
-
- Avoid jargon: Use plain language that is easily understood by all users, including those
- who may not be familiar with technical terms.
-
-
- ),
- },
- {
- title: "Visual hierarchy",
- content: (
-
-
- Primary action first: Ensure the primary action stands out with a prominent position and
- styling.
-
-
- Avoid redundant text: Do not include unnecessary words that do not add value to the
- action.
-
-
- ),
- },
- {
- title: "Tips",
- content: (
-
-
- Test for clarity: Show your button text to others without context to see if they
- understand the action.
-
-
- Iterate based on feedback: Be open to changing your button copy based on user feedback
- and testing results.
-
-
- Avoid punctuation: Do not use end punctuation in button labels unless absolutely
- necessary.
-
-
- ),
- },
- ],
- },
-];
-
-const ButtonUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ButtonUsagePage;
diff --git a/apps/website/screens/components/button/usage/examples/iconUsage.ts b/apps/website/screens/components/button/usage/examples/iconUsage.ts
deleted file mode 100644
index 08b9634d21..0000000000
--- a/apps/website/screens/components/button/usage/examples/iconUsage.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/button/usage/examples/variants.ts b/apps/website/screens/components/button/usage/examples/variants.ts
deleted file mode 100644
index 979a376fba..0000000000
--- a/apps/website/screens/components/button/usage/examples/variants.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/button/usage/images/semantic_buttons.png b/apps/website/screens/components/button/usage/images/semantic_buttons.png
deleted file mode 100644
index 102018d9b6..0000000000
Binary files a/apps/website/screens/components/button/usage/images/semantic_buttons.png and /dev/null differ
diff --git a/apps/website/screens/components/card/CardPageLayout.tsx b/apps/website/screens/components/card/CardPageLayout.tsx
index 41ec875fe5..d9a6dadf42 100644
--- a/apps/website/screens/components/card/CardPageLayout.tsx
+++ b/apps/website/screens/components/card/CardPageLayout.tsx
@@ -6,24 +6,20 @@ import { ReactNode } from "react";
const CardPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/card" },
- { label: "Usage", path: "/components/card/usage" },
- { label: "Specifications", path: "/components/card/specifications" },
+ { label: "Overview", path: "/components/card" },
+ { label: "Code", path: "/components/card/code" },
];
return (
-
+
-
+
- Cards are a container of information, actions and data with a hierarchy to make easy scanning the content. A
- card can be defined as a unit, so it has all the information within it, making the component useful to show
- images, text, and interactive elements. The structure of the card can be seen as blocks, each block is
- optional to be displayed but the overall element should make a cohesive design, even if it includes text,
- images or other elements.
+ A card is a flexible, modular UI components used to group related information and actions within a
+ contained, clean and visually distinct layout.
-
+
{children}
diff --git a/apps/website/screens/components/card/code/CardCodePage.tsx b/apps/website/screens/components/card/code/CardCodePage.tsx
index 054f24ec96..f64c6b0673 100644
--- a/apps/website/screens/components/card/code/CardCodePage.tsx
+++ b/apps/website/screens/components/card/code/CardCodePage.tsx
@@ -1,11 +1,9 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
-import Code from "@/common/Code";
import basicUsage from "./examples/basicUsage";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -22,14 +20,11 @@ const sections = [
-
imageSrc
-
- string
-
+
children
- URL of the image that will be placed in the card component. In case of omission, the image container will
- not appear and the content will occupy its space.
+ React.ReactNode
+
Custom content that will be placed inside the component.
-
@@ -42,6 +37,16 @@ const sections = [
'black'
+
+
imageCover
+
+ boolean
+
+
Whether the image must cover the its whole area of the card.
+
+ false
+
+
imagePadding
@@ -66,66 +71,58 @@ const sections = [
-
linkHref
+
imageSrc
string
- If defined, the card will be displayed as an anchor, using this prop as href. The component
- will display visual information on mouse-over.
+ URL of the image that will be placed in the card component. In case of omission, the image container will
+ not appear and the content will occupy its space.
-
-
onClick
+
linkHref
- {"() => void"}
+ string
- This function will be called when the user clicks the card. Component will show some visual feedback on
- hover.
+ If defined, the card will be displayed as an anchor, using this prop as href. The component
+ will display visual information on mouse-over.
Whether the image must cover the its whole area of the card.
- false
+ 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.
+
-
-
-
outlined
+
onClick
- boolean
+ {"() => void"}
-
Determines whether or not the component should have an outline.
- true
-
-
-
-
children
-
- React.ReactNode
+ This function will be called when the user clicks the card. Component will show some visual feedback on
+ hover.
-
Custom content that will be placed inside the component.
Determines whether or not the component should have an outline.
- 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.
+ true
-
-
tabIndex
@@ -154,15 +151,11 @@ const sections = [
},
];
-const SelectCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const CardCodePage = () => (
+
+
+
+
+);
-export default SelectCodePage;
+export default CardCodePage;
diff --git a/apps/website/screens/components/card/code/examples/basicUsage.ts b/apps/website/screens/components/card/code/examples/basicUsage.ts
index a4d10a367c..534d09bb13 100644
--- a/apps/website/screens/components/card/code/examples/basicUsage.ts
+++ b/apps/website/screens/components/card/code/examples/basicUsage.ts
@@ -1,10 +1,12 @@
-import { DxcInset, DxcCard } from "@dxc-technology/halstack-react";
+import { DxcInset, DxcCard, DxcParagraph } from "@dxc-technology/halstack-react";
const code = `() => {
return (
-
+
- Personal information
+
+ Personal information
+
);
@@ -13,6 +15,7 @@ const code = `() => {
const scope = {
DxcCard,
DxcInset,
+ DxcParagraph,
};
export default { code, scope };
diff --git a/apps/website/screens/components/card/overview/CardOverviewPage.tsx b/apps/website/screens/components/card/overview/CardOverviewPage.tsx
new file mode 100644
index 0000000000..e1e64119ad
--- /dev/null
+++ b/apps/website/screens/components/card/overview/CardOverviewPage.tsx
@@ -0,0 +1,146 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import anatomy from "./images/card_anatomy.png";
+import Image from "@/common/Image";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Cards are versatile UI components used to group related content and actions within a contained layout. They help
+ organize information into digestible sections, making it easier for users to scan, compare, and interact with
+ individual items. Cards enhance readability and visual hierarchy and are commonly used in dashboards, product
+ listings, user profiles, and content previews to support structured and engaging user experiences.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: the main structural wrapper that ensures padding, spacing, and alignment across
+ all card elements.
+
+
+ Custom content area: flexible space where text, icons, buttons, and other UI elements can
+ be placed. It adapts to different use cases while maintaining visual consistency.
+
+
+ Image(Optional): visual element that enhances the card's content. By default it
+ can be placed either on the left or right side of the card depending on layout needs.
+
+
+ Interactive elements(Optional): components such as buttons or icons that allow
+ users to take actions related to the card's content.
+
+
+
+
+ ** Please note that while these elements are not included by default in the component's configuration, they
+ are the common components in a card. While cards support optional elements like images and actions, it's
+ essential that the overall composition remains visually balanced and aligned with the design system's
+ structure.
+
+
+
+ ),
+ },
+ {
+ title: "Placing content in a Card",
+ content: (
+ <>
+
+ Cards are designed to accommodate flexible layouts and diverse content types. You can include any combination
+ of media and interactive elements, but it's important to follow consistent design patterns for usability and
+ clarity.
+
+
+
+ Image placement: cards support placing the image either on the left or the right side of
+ the layout. The image should maintain a fixed ratio and size for visual harmony. By default, the component
+ provides layout options where the image can appear on the left or right side of the content. However,
+ alternative layouts — such as vertical image placements — can be achieved by placing the image directly
+ within the custom content area. This allows for more flexibility while still adhering to spacing and
+ alignment guidelines.
+
+
+ Text content: titles, descriptions, metadata, or status labels are typically placed in the
+ content area with a clear hierarchy — starting with a bold title, followed by supporting text.
+
+
+ Interactive elements: place buttons, links, or icons in the lower section of the content
+ area or aligned to the end of the card to support related user actions.
+
+
+ Avoid overloading: keep the content concise to prevent visual clutter. A well-structured
+ card should be easy to scan and act upon.
+
+
+ {/* */}
+
+ ),
+ },
+ {
+ title: "Responsive behavior",
+ content: (
+ <>
+ The card component will adjust to the size of its parent container.
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Use a consistent layout: when displaying a collection of cards, maintain the same layout
+ and style across all instances. Avoid mixing card variants within the same set.
+
+
+ Support scanning: structure content so users can quickly identify what the card is about —
+ use visual hierarchy, spacing, and clear typography.
+
+
+ Use cards as independent units: each card should contain all the relevant information and
+ actions within it. It should make sense on its own, even if removed from the rest of the collection.
+
+
+ Minimize interaction complexity: don't overload the card with too many clickable areas.
+ Define clear action zones, and prioritize the most important interactions.
+
+
+ Respect spacing: ensure consistent padding and margins within and between cards to maintain
+ visual rhythm in the layout.
+
+
+ Use of white space: avoid cramming content. White space improves readability and prevents
+ cards from feeling cluttered.
+
+
+ Avoid over-design: too many effects, decorations, or inconsistent imagery can reduce
+ clarity and hurt the overall user experience.
+
+
+ Responsiveness: cards should adapt gracefully to different screen sizes and grid layouts,
+ maintaining structure and readability.
+
+
+
+ ),
+ },
+];
+
+const CardOverviewPage = () => (
+
+
+
+
+);
+
+export default CardOverviewPage;
diff --git a/apps/website/screens/components/card/overview/images/card_anatomy.png b/apps/website/screens/components/card/overview/images/card_anatomy.png
new file mode 100644
index 0000000000..05d74dc1ce
Binary files /dev/null and b/apps/website/screens/components/card/overview/images/card_anatomy.png differ
diff --git a/apps/website/screens/components/card/overview/images/card_example.png b/apps/website/screens/components/card/overview/images/card_example.png
new file mode 100644
index 0000000000..476bfd7249
Binary files /dev/null and b/apps/website/screens/components/card/overview/images/card_example.png differ
diff --git a/apps/website/screens/components/card/specs/CardSpecsPage.tsx b/apps/website/screens/components/card/specs/CardSpecsPage.tsx
deleted file mode 100644
index 9d853326af..0000000000
--- a/apps/website/screens/components/card/specs/CardSpecsPage.tsx
+++ /dev/null
@@ -1,344 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import specsImage from "./images/card_specs.png";
-import statesImage from "./images/card_states.png";
-import anatomyImage from "./images/card_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- Component states: enabled, hover and focus.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Card image
- Custom content
- Container
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
- <>
-
-
-
-
-
-
- ),
- },
- {
- title: "Margin",
- content: (
- <>
-
- Margin properties can be applied independently to top, right,{" "}
- bottom and left sides of the card container.
-
-
-
-
-
Margin
-
Value
-
-
-
-
-
- xxsmall
-
-
6px
-
-
-
- xsmall
-
-
16px
-
-
-
- small
-
-
24px
-
-
-
- medium
-
-
36px
-
-
-
- large
-
-
48px
-
-
-
- xlarge
-
-
64px
-
-
-
- xxlarge
-
-
100px
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const CardSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default CardSpecsPage;
diff --git a/apps/website/screens/components/card/specs/images/card_anatomy.png b/apps/website/screens/components/card/specs/images/card_anatomy.png
deleted file mode 100644
index f372121855..0000000000
Binary files a/apps/website/screens/components/card/specs/images/card_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/card/specs/images/card_specs.png b/apps/website/screens/components/card/specs/images/card_specs.png
deleted file mode 100644
index 23c76ab4a2..0000000000
Binary files a/apps/website/screens/components/card/specs/images/card_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/card/specs/images/card_states.png b/apps/website/screens/components/card/specs/images/card_states.png
deleted file mode 100644
index d9a57ffd79..0000000000
Binary files a/apps/website/screens/components/card/specs/images/card_states.png and /dev/null differ
diff --git a/apps/website/screens/components/card/usage/CardUsagePage.tsx b/apps/website/screens/components/card/usage/CardUsagePage.tsx
deleted file mode 100644
index 23c6835d6b..0000000000
--- a/apps/website/screens/components/card/usage/CardUsagePage.tsx
+++ /dev/null
@@ -1,34 +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: (
-
-
- Organize the card collection so thery are easy to use, take a layout that presents the information in a clear
- way and apply the same styles for every card.
-
-
- If a collection want be create, won't use different card styles, use the same to keep consistency.
-
-
- ),
- },
-];
-
-const CardUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default CardUsagePage;
diff --git a/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx b/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx
index 7044bc1192..4e1b71191a 100644
--- a/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx
+++ b/apps/website/screens/components/checkbox/CheckboxPageLayout.tsx
@@ -6,21 +6,19 @@ import { ReactNode } from "react";
const CheckboxPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/checkbox" },
- { label: "Usage", path: "/components/checkbox/usage" },
- { label: "Specifications", path: "/components/checkbox/specifications" },
+ { label: "Overview", path: "/components/checkbox" },
+ { label: "Code", path: "/components/checkbox/code" },
];
return (
-
+
-
+
- Checkboxes are inputs that offer to the user the possibility to select one or more options from a range of
- attributes.
+ Checkboxes are inputs that allow the user to select one or more options from a range of attributes.
-
+
{children}
diff --git a/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx b/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx
index 71d37db836..582a83f998 100644
--- a/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx
+++ b/apps/website/screens/components/checkbox/code/CheckboxCodePage.tsx
@@ -1,12 +1,10 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
-import TableCode from "@/common/TableCode";
-import Code from "@/common/Code";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -23,13 +21,15 @@ const sections = [
-
defaultChecked
+
ariaLabel
- boolean
+ string
-
Initial state of the checkbox, only when it is uncontrolled.
- false
+ Specifies a string to be used as the name for the checkbox element when no label is provided.
+
+
+ 'Checkbox'
@@ -41,20 +41,27 @@ const sections = [
If true, the component is checked. If undefined the component will be uncontrolled and the value will be
managed internally by the component.
+
-
+
+
+
defaultChecked
+
+ boolean
+
+
Initial state of the checkbox, only when it is uncontrolled.
- -
+ false
-
value
+
disabled
- string
+ boolean
+
If true, the component will be disabled.
- Will be passed to the value attribute of the HTML input element. When inside a form, this
- value will be only submitted if the checkbox is checked.
+ false
+ 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.
+
+
-
+
name
@@ -83,14 +101,15 @@ const sections = [
-
-
disabled
+
onChange
- boolean
+ {"(value: boolean) => void"}
-
If true, the component will be disabled.
- false
+ This function will be called when the user clicks the checkbox. The new value will be passed as a
+ parameter.
+
-
optional
@@ -113,25 +132,11 @@ const sections = [
-
onChange
-
- {"(value: boolean) => void"}
-
-
- This function will be called when the user clicks the checkbox. The new value will be passed as a
- parameter.
-
- 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.
+ {"React.Ref"}
+
Reference to the component.
-
@@ -157,22 +162,15 @@ const sections = [
-
ref
-
- {"React.Ref"}
-
-
Reference to the component.
-
-
-
-
-
ariaLabel
+
value
string
- Specifies a string to be used as the name for the checkbox element when no label is provided.
+ Will be passed to the value attribute of the HTML input element. When inside a form, this
+ value will be only submitted if the checkbox is checked.
-
'Checkbox'
+
-
@@ -193,15 +191,11 @@ const sections = [
},
];
-const CheckboxCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const CheckboxCodePage = () => (
+
+
+
+
+);
export default CheckboxCodePage;
diff --git a/apps/website/screens/components/checkbox/code/examples/controlled.ts b/apps/website/screens/components/checkbox/code/examples/controlled.ts
deleted file mode 100644
index 6196c6cc0d..0000000000
--- a/apps/website/screens/components/checkbox/code/examples/controlled.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { DxcCheckbox, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [checked, changeChecked] = useState(false);
- const onChange = (newValue) => {
- changeChecked(newValue);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcCheckbox,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/checkbox/code/examples/controlled.tsx b/apps/website/screens/components/checkbox/code/examples/controlled.tsx
new file mode 100644
index 0000000000..7c428ba6ec
--- /dev/null
+++ b/apps/website/screens/components/checkbox/code/examples/controlled.tsx
@@ -0,0 +1,23 @@
+import { DxcCheckbox, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [checked, changeChecked] = useState(false);
+ const onChange = (newValue) => {
+ changeChecked(newValue);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcCheckbox,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/checkbox/code/examples/uncontrolled.ts b/apps/website/screens/components/checkbox/code/examples/uncontrolled.ts
deleted file mode 100644
index 626fc7eaf9..0000000000
--- a/apps/website/screens/components/checkbox/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { DxcCheckbox, DxcInset, DxcButton, DxcFlex } from "@dxc-technology/halstack-react";
-import { useRef } from "react";
-
-const code = `() => {
- const checkboxRef = useRef();
-
- const handleSubmit = () => {
- const checkbox = checkboxRef.current.getElementsByTagName("input")[0];
- console.log(checkbox.checked ? checkbox.value : "");
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcCheckbox,
- DxcInset,
- DxcButton,
- DxcFlex,
- useRef,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/checkbox/code/examples/uncontrolled.tsx b/apps/website/screens/components/checkbox/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..940102161a
--- /dev/null
+++ b/apps/website/screens/components/checkbox/code/examples/uncontrolled.tsx
@@ -0,0 +1,39 @@
+import { DxcCheckbox, DxcInset, DxcButton, DxcFlex } from "@dxc-technology/halstack-react";
+import { useRef } from "react";
+
+const code = `() => {
+ const checkboxRef = useRef();
+
+ const handleSubmit = () => {
+ const checkbox = checkboxRef.current.getElementsByTagName("input")[0];
+ console.log(checkbox.checked ? checkbox.value : "");
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcCheckbox,
+ DxcInset,
+ DxcButton,
+ DxcFlex,
+ useRef,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx b/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx
new file mode 100644
index 0000000000..5246ee5fd3
--- /dev/null
+++ b/apps/website/screens/components/checkbox/overview/CheckboxOverviewPage.tsx
@@ -0,0 +1,204 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import stacking from "./examples/stacking";
+import Image from "@/common/Image";
+import anatomy from "./images/checkbox_anatomy.png";
+import Link from "next/link";
+import labelPosition from "./examples/labelPosition";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Checkboxes support different states, including checked, unchecked, and indeterminate, providing clear visual
+ feedback. Checkboxes should be used when multiple selections are needed, unlike radio
+ buttons, which are for single-choice scenarios. Proper spacing and alignment help maintain clarity, and labels
+ should be concise and descriptive to enhance usability.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Checkbox input: the interactive element that allows users to toggle between checked,
+ unchecked, and indeterminate states. It provides visual feedback based on user selection and supports
+ accessibility attributes for better usability.
+
+
+ Label: descriptive text associated with the checkbox, helping users understand the option
+ they select. It should be concise and placed close to the checkbox for clear association.
+
+
+
+ ),
+ },
+ {
+ title: "Stacking checkboxes",
+ content: (
+ <>
+ Checkboxes can be stacked vertically or horizontally, depending on the use case.
+
+
+ ),
+ subSections: [
+ {
+ title: "Vertical stacking",
+ content: (
+ <>
+
+ To improve readability and scalability, checkboxes can be stacked vertically, especially
+ in forms or settings panels, allowing users to process options more efficiently without excessive eye
+ movement.
+
+ Leave minimum 4px of spacing between vertically stacked checkboxes.
+
+ ),
+ },
+ {
+ title: "Horizontal stacking",
+ content: (
+ <>
+
+ Used in scenarios with limited vertical space, checkboxes can be stacked horizontally, along with a
+ consistent spacing and alignment, to maintain a structured and organized layout. If a set of checkboxes is
+ related to a single category, consider using a group label to provide context as this will enhance
+ usability and help users make informed selections.
+
+ Horizontally stacked checkboxes maintain a separation of, minimum, 24px.
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Label position",
+ content: (
+ <>
+
+ By default, the label is placed to the left of the checkbox, but it can also be positioned{" "}
+ to the right when needed. Choose the label position that best fits your layout and ensures
+ clear readability and alignment with surrounding elements.
+
+
+ We recommend selecting a label placement that maintains a strong visual connection between the checkbox and
+ its description, without disrupting the overall flow of the interface.
+
+
+
+ ),
+ },
+ {
+ title: "Checkbox vs. radio group vs. switch",
+ content: (
+ <>
+
+ Although checkboxes,{" "}
+
+ radio groups
+
+ , and{" "}
+
+ switches
+ {" "}
+ may appear as selection controls, they serve distinct purposes in a user interface:
+
+
+
+
+
Component
+
Use case
+
+
+
+
+
+ Checkbox
+
+
+ Use when users can select multiple options independently. Each checkbox represents an
+ on/off decision, making them suitable for filters, preference settings, or multi-select tasks. A group
+ may allow none, some, or all options to be selected.
+
+
+
+
+ Radio group
+
+
+ Use when the user must select only one option from a list of predefined, mutually
+ exclusive choices. Ideal for short, static lists where all options should be visible at once to support
+ decision-making.
+
+
+
+
+ Switch
+
+
+ Use for a single, immediate toggle between two states, like on/off or enabled/disabled.
+ Switches should act instantly and are best for system or UI-level settings.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Use for multiple selections: checkboxes should be used when users can select multiple
+ options independently. If only one selection is allowed, use radio buttons instead.
+
+
+ Ensure clear labels: each checkbox should have a clear, concise label that accurately
+ describes the option. Avoid ambiguous wording that might confuse users.
+
+
+ Group related options: when checkboxes are part of a related set, use a group label to
+ provide context. This improves readability and helps users understand the available choices.
+
+
+ Prioritize vertical stacking: for better readability and usability, stack checkboxes
+ vertically, especially when dealing with multiple options. Horizontal stacking should be reserved for short
+ lists with clear, non-wrapping labels.
+
+
+ Use the indeterminate state properly: the indeterminate state should only be used when a
+ parent checkbox controls multiple sub-options. This visually indicates that some but not all child options
+ are selected.
+
+
+ Maintain sufficient spacing: provide adequate spacing between checkboxes to prevent
+ misclicks and ensure a clean, organized layout.
+
+
+ Ensure accessibility: make checkboxes large enough to be easily clickable and ensure they
+ are keyboard-navigable. Labels should be linked correctly for screen readers to interpret them properly.
+
+
+
+ ),
+ },
+];
+
+const CheckboxInputOverviewPage = () => (
+
+
+
+
+);
+
+export default CheckboxInputOverviewPage;
diff --git a/apps/website/screens/components/checkbox/overview/examples/labelPosition.tsx b/apps/website/screens/components/checkbox/overview/examples/labelPosition.tsx
new file mode 100644
index 0000000000..14d85a4544
--- /dev/null
+++ b/apps/website/screens/components/checkbox/overview/examples/labelPosition.tsx
@@ -0,0 +1,20 @@
+import { DxcCheckbox, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcCheckbox,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/checkbox/overview/examples/stacking.tsx b/apps/website/screens/components/checkbox/overview/examples/stacking.tsx
new file mode 100644
index 0000000000..0a345453f5
--- /dev/null
+++ b/apps/website/screens/components/checkbox/overview/examples/stacking.tsx
@@ -0,0 +1,45 @@
+import { DxcCheckbox, DxcInset, DxcFlex, DxcTypography } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+ Vertical
+
+
+
+
+
+
+
+ Horizontal
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcCheckbox,
+ DxcInset,
+ DxcFlex,
+ DxcTypography,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/checkbox/overview/images/checkbox_anatomy.png b/apps/website/screens/components/checkbox/overview/images/checkbox_anatomy.png
new file mode 100644
index 0000000000..d3a73f9739
Binary files /dev/null and b/apps/website/screens/components/checkbox/overview/images/checkbox_anatomy.png differ
diff --git a/apps/website/screens/components/checkbox/specs/CheckboxSpecsPage.tsx b/apps/website/screens/components/checkbox/specs/CheckboxSpecsPage.tsx
deleted file mode 100644
index 120d96e76f..0000000000
--- a/apps/website/screens/components/checkbox/specs/CheckboxSpecsPage.tsx
+++ /dev/null
@@ -1,497 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-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 checkboxAnatomy from "./images/checkbox_anatomy.png";
-import checkboxSpecs from "./images/checkbox_specs.png";
-import checkboxStates from "./images/checkbox_states.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- The following states are defined in the life cycle of the component: unselected enabled,{" "}
- unselected hover, unselected focus, unselected disabled,{" "}
- selected enabled, selected hover, selected focus and{" "}
- selected disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Checkbox input
- Label
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be placed before the chip label. When using Material Symbols,
- replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
- symbol name with "filled_".
+ string
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be placed after the chip label. When using Material Symbols,
- replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
- symbol name with "filled_".
+ 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.
- false
+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be placed before the chip label. When using Material Symbols,
+ replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
+ symbol name with "filled_".
- 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.
+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be placed after the chip label. When using Material Symbols,
+ replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
+ symbol name with "filled_".
-
@@ -142,9 +140,7 @@ const sections = [
const ChipCodePage = () => {
return (
-
-
-
+
);
diff --git a/apps/website/screens/components/chip/code/examples/basicUsage.ts b/apps/website/screens/components/chip/code/examples/basicUsage.ts
deleted file mode 100644
index 201ca9d85d..0000000000
--- a/apps/website/screens/components/chip/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DxcChip, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcChip,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/chip/code/examples/basicUsage.tsx b/apps/website/screens/components/chip/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..49227dccd3
--- /dev/null
+++ b/apps/website/screens/components/chip/code/examples/basicUsage.tsx
@@ -0,0 +1,16 @@
+import { DxcChip, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcChip,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/chip/code/examples/icons.ts b/apps/website/screens/components/chip/code/examples/icons.ts
deleted file mode 100644
index 6085ec42f5..0000000000
--- a/apps/website/screens/components/chip/code/examples/icons.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DxcChip, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const icon = (
-
- );
- const onClickSuffix = () => {
- console.log("Delete.");
- };
- const onClickPrefix = () => {
- console.log("Favorite.");
- };
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcChip,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/chip/code/examples/icons.tsx b/apps/website/screens/components/chip/code/examples/icons.tsx
new file mode 100644
index 0000000000..c49a98a497
--- /dev/null
+++ b/apps/website/screens/components/chip/code/examples/icons.tsx
@@ -0,0 +1,37 @@
+import { DxcChip, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const icon = (
+
+ );
+ const onClickSuffix = () => {
+ console.log("Delete.");
+ };
+ const onClickPrefix = () => {
+ console.log("Favorite.");
+ };
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcChip,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx b/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
new file mode 100644
index 0000000000..406df4d571
--- /dev/null
+++ b/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
@@ -0,0 +1,211 @@
+import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import anatomy from "./images/chip-anatomy.png";
+import Example from "@/common/example/Example";
+import categorization from "./examples/categorization";
+import filter from "./examples/filter";
+import spacing from "./images/chip-spacing.png";
+import Image from "@/common/Image";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Chips are versatile components that allow users to display and manage information in a compact format. They are
+ commonly used to represent selected options, tags, filters, or interactive elements within an interface. Their
+ lightweight and flexible design makes them ideal for enhancing user experience by enabling quick and organized
+ interactions.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Prefix(Optional): the prefix can be an icon or an action icon that provides
+ additional context or functionality.
+
+
+ Label: the primary text that conveys the chip's meaning, such as a tag name or a selected
+ option. It should be concise, clear, and relevant to the chip's function.
+
+
+ Suffix(Optional): the suffix can be an icon or an action icon that enhances
+ interactivity.
+
+
+
+ ),
+ },
+ {
+ title: "Using chips",
+ subSections: [
+ {
+ title: "Categorization",
+ content: (
+ <>
+
+ Chips are commonly used to organize content by grouping related topics, products, or subjects. They often
+ serve as a summary of the page's content. When using chips for categorization, ensure that they are
+ relevant to the displayed information to maintain clarity and usability.
+
+
+
+ ),
+ },
+ {
+ title: "Faceted search filters",
+ content: (
+ <>
+
+ When used alongside the select component, chips serve as effective filter facets, allowing users to refine
+ search results by choosing and removing specific attributes. This combination enables users to include or
+ exclude preferences directly from their queries. For faceted filtering, chips should be dismissible,
+ ensuring effortless adjustments and a more intuitive selection experience.
+
+
+
+ ),
+ },
+ {
+ title: "Chips vs. Badges",
+ content: (
+ <>
+
+ While{" "}
+
+ badges
+ {" "}
+ and chips share a similar visual style, they serve different purposes in a user interface:{" "}
+ chips are interactive, while badges are static indicators.
+
+
+
+
+
Component
+
Use case
+
+
+
+
+
+ Chip
+
+
+ Chips help users categorize, filter, or organize information. They often include keywords or
+ metadata, providing quick access to related content and aiding navigation.
+
+
+
+
+ Badge
+
+
+ Badges function as visual indicators, displaying status or contextual information. They are
+ non-interactive and rely on color and text to communicate meaning.
+
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ subSections: [
+ {
+ title: "Keep labels concise and meaningful",
+ content: (
+
+
+ Labels should be short and clear, ideally one or two words.
+
+
+ Avoid long text that may cause truncation or wrapping issues.
+
+
+ Use sentence case for readability (e.g., "New York" instead of "NEW YORK").
+
+
+ ),
+ },
+ {
+ title: "Avoid overloading the UI with too many chips",
+ content: (
+ <>
+
+
+ Use chips only when necessary to avoid clutter.
+
+
+ Group related chips logically and consider collapsible chip groups if the list becomes
+ too long.
+
+
+
+
+ ),
+ },
+ {
+ title: "Ensure icons are contextually relevant and avoid redundancy",
+ content: (
+ <>
+
+ While the component configuration is flexible enough to allow multiple icons or action icons, it is{" "}
+ not recommended to use two icons or two action icons within the same chip. Instead, a{" "}
+ balanced approach should be followed: pairing one icon (to provide
+ context) with one action icon (to enable an interaction).
+
+
+
+ Icons should add value to the chip, not just be decorative.
+
+
+ Ensure that icons are easy to recognize and understand within the chip's context. The
+ selected icon should accurately represent the chip's purpose, while the action icon should clearly
+ indicate the interaction it triggers.
+
+
+ Icons should not compete for attention or convey conflicting messages. Instead, they
+ should complement each other to enhance usability.
+
+
+ Follow the guideline: one informational icon + one action icon (if needed) — avoid
+ using two icons of the same type.
+
+
+
+ ),
+ },
+ {
+ title: "Manage chip overflow gracefully",
+ content: (
+
+
+ If there are too many chips in a row, consider horizontal scrolling or wrapping.
+
+
+ For dynamic content, provide a "Show more" option to avoid overwhelming the user.
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const ChipOverviewPage = () => (
+
+
+
+
+);
+export default ChipOverviewPage;
diff --git a/apps/website/screens/components/chip/overview/examples/categorization.tsx b/apps/website/screens/components/chip/overview/examples/categorization.tsx
new file mode 100644
index 0000000000..d63816d13d
--- /dev/null
+++ b/apps/website/screens/components/chip/overview/examples/categorization.tsx
@@ -0,0 +1,21 @@
+import { DxcChip, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+ {}} />
+ {}} />
+ {}} />
+
+
+ );
+}`;
+
+const scope = {
+ DxcChip,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/chip/overview/examples/filter.tsx b/apps/website/screens/components/chip/overview/examples/filter.tsx
new file mode 100644
index 0000000000..218efcdfcf
--- /dev/null
+++ b/apps/website/screens/components/chip/overview/examples/filter.tsx
@@ -0,0 +1,54 @@
+import { DxcChip, DxcInset, DxcFlex, DxcSelect, DxcHeading } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+const roles = ["Admin", "Security Analyst", "Auditor", "Read-Only User"];
+ const [selectedRoles, setSelectedRoles] = useState([roles[0]]);
+
+ const handleSelectChange = ({value}) => {
+ setSelectedRoles(value);
+ };
+ const handleRemoveRole = (roleToRemove) => {
+ setSelectedRoles(selectedRoles.filter((role) => role !== roleToRemove));
+ };
+
+ return (
+
+
+ ({ label: role, value: role }))}
+ onChange={handleSelectChange}
+ value={selectedRoles}
+ multiple
+ />
+
+
+
+ {selectedRoles.map((role) => (
+ handleRemoveRole(role)}
+ />
+ ))}
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcChip,
+ DxcFlex,
+ DxcHeading,
+ DxcInset,
+ DxcSelect,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/chip/overview/images/chip-anatomy.png b/apps/website/screens/components/chip/overview/images/chip-anatomy.png
new file mode 100644
index 0000000000..ef136349cb
Binary files /dev/null and b/apps/website/screens/components/chip/overview/images/chip-anatomy.png differ
diff --git a/apps/website/screens/components/chip/overview/images/chip-spacing.png b/apps/website/screens/components/chip/overview/images/chip-spacing.png
new file mode 100644
index 0000000000..960982e926
Binary files /dev/null and b/apps/website/screens/components/chip/overview/images/chip-spacing.png differ
diff --git a/apps/website/screens/components/chip/specs/ChipSpecsPage.tsx b/apps/website/screens/components/chip/specs/ChipSpecsPage.tsx
deleted file mode 100644
index c82afaf2b0..0000000000
--- a/apps/website/screens/components/chip/specs/ChipSpecsPage.tsx
+++ /dev/null
@@ -1,423 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import specsImage from "./images/chip_specs.png";
-import statesImage from "./images/chip_states_container.png";
-import prefixSuffixStatesImage from "./images/chip_states_action.png";
-import anatomyImage from "./images/chip_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- The chip component container states are enabled and disabled:
-
-
-
-
-
- The chip action item has the following states: enabled, hover,{" "}
- focus, active and disabled:
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
-
- Prefix (Optional)
-
- Label
-
- Suffix (Optional)
-
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const ChipSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ChipSpecsPage;
diff --git a/apps/website/screens/components/chip/specs/images/chip_anatomy.png b/apps/website/screens/components/chip/specs/images/chip_anatomy.png
deleted file mode 100644
index 33ababa249..0000000000
Binary files a/apps/website/screens/components/chip/specs/images/chip_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/chip/specs/images/chip_specs.png b/apps/website/screens/components/chip/specs/images/chip_specs.png
deleted file mode 100644
index eb805bc760..0000000000
Binary files a/apps/website/screens/components/chip/specs/images/chip_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/chip/specs/images/chip_states_action.png b/apps/website/screens/components/chip/specs/images/chip_states_action.png
deleted file mode 100644
index 6e37083ab4..0000000000
Binary files a/apps/website/screens/components/chip/specs/images/chip_states_action.png and /dev/null differ
diff --git a/apps/website/screens/components/chip/specs/images/chip_states_container.png b/apps/website/screens/components/chip/specs/images/chip_states_container.png
deleted file mode 100644
index 961986709c..0000000000
Binary files a/apps/website/screens/components/chip/specs/images/chip_states_container.png and /dev/null differ
diff --git a/apps/website/screens/components/chip/usage/ChipUsagePage.tsx b/apps/website/screens/components/chip/usage/ChipUsagePage.tsx
deleted file mode 100644
index eadf79c656..0000000000
--- a/apps/website/screens/components/chip/usage/ChipUsagePage.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import DocFooter from "@/common/DocFooter";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- Do not use chips instead of buttons since they have a total different aim in the UI.
-
- Make the content of the label clear and simple.
- Use chips to make tasks easier for the user.
-
- ),
- },
-];
-
-const ChipUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ChipUsagePage;
diff --git a/apps/website/screens/components/container/ContainerPageLayout.tsx b/apps/website/screens/components/container/ContainerPageLayout.tsx
index 71e015cc1b..ef59447ea3 100644
--- a/apps/website/screens/components/container/ContainerPageLayout.tsx
+++ b/apps/website/screens/components/container/ContainerPageLayout.tsx
@@ -6,21 +6,19 @@ import { ReactNode } from "react";
const ContainerPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/container" },
- { label: "Usage", path: "/components/container/usage" },
+ { label: "Overview", path: "/components/container" },
+ { label: "Code", path: "/components/container/code" },
];
return (
-
+
-
+
- The container component represents the box model inside the Halstack Design System. Is a general-purpose
- container that allows for controlled use of our design tokens. Being generic in nature can be "over-used",
- so it's important to consider situations where more specific and expressive components could be used.
+ The container component represents the box model inside the Halstack Design System.
-
+
{children}
diff --git a/apps/website/screens/components/container/code/ContainerCodePage.tsx b/apps/website/screens/components/container/code/ContainerCodePage.tsx
index bb35e7b28b..e3ec95970c 100644
--- a/apps/website/screens/components/container/code/ContainerCodePage.tsx
+++ b/apps/website/screens/components/container/code/ContainerCodePage.tsx
@@ -1,397 +1,399 @@
import { DxcFlex, DxcTable, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import StatusBadge from "@/common/StatusBadge";
-import TableCode, { ExtendedTableCode } from "@/common/TableCode";
+import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import listbox from "./examples/listbox";
-import Link from "next/link";
const backgroundTypeString = `{
attachment?: string;
clip?: string;
- color?: CoreColorTokens;
+ color?: string;
image?: string;
origin?: string;
position?: string;
repeat?: string;
size?: string;
}`;
+
const borderTypeString = `BorderProperties | {
top?: BorderProperties;
right?: BorderProperties;
bottom?: BorderProperties;
left?: BorderProperties;
}`;
+
const borderPropertiesTypeString = `{
width?: string;
style?: LineStyleValues;
- color?: CoreColorTokens;
+ color?: string;
}`;
+
const insetTypeString = `{
top?: string;
right?: string;
bottom?: string;
left?: string;
}`;
+
const outlineTypeString = `{
width?: string;
style?: LineStyleValues;
- color?: CoreColorTokens;
+ color?: string;
offset?: string;
}`;
+
const overflowTypeString = `OverflowValues |
{
x?: OverflowValues;
y?: OverflowValues;
}`;
+const spaceTypeString = `{
+ top?: string;
+ right?: string;
+ bottom?: string;
+ left?: string;
+}`;
+
const sections = [
{
title: "Props",
content: (
-
-
Name
-
Type
-
Description
-
Default
-
-
-
background
-
- {backgroundTypeString}
-
- being CoreColorTokens the color tokens provided by Halstack Design System. See our{" "}
-
- Color palette
- {" "}
- for further knowledge.
-
-
-
- Based on the CSS property background allows configuring all properties related to the
- background of a container. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
-
-
-
-
border
-
-
- {borderTypeString}
+
+
+
Name
+
Type
+
Description
+
Default
+
+
+
+
+
background
+
+ {backgroundTypeString}
+
+
+ Based on the CSS property background allows configuring all properties related to the
+ background of a container. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
-
+
+
+
border
+
+
+ {borderTypeString}
+
+ being BorderProperties an object with the following properties:
+
+ {borderPropertiesTypeString}
+
+ and LineStyleValues an enum with the following possible values:
+
+ Based on the CSS property border allows configuring all properties related to the border of a
+ container.
+
+
-
+
+
+
borderRadius
+
+ string
+
+
+ Sets the border-radius CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
-
+
+
+
boxShadow
+
+ string
+
+
+ Sets the box-shadow CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'none'
+
+
+
+
boxSizing
+
+ 'content-box' | 'border-box'
+
+
+ Sets the box-sizing CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'content-box'
+
+
+
+
children
+
+ React.ReactNode
+
+
Custom content inside the container.
+
-
+
+
+
display
+
+ 'block' | 'inline-block' | 'inline' | 'none'
+
+
+ Sets the display CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information. The set of values is limited to the ones related to the outer display type. If
+ you want to apply any pattern from the inner box and how the children are laid out, we recommend you to
+ use the Flex and Grid components.
+
+
+ 'block'
+
+
+
+
float
+
+ 'left' | 'right' | 'none'
+
+
+ Sets the float CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'none'
+
+
+
+
height
+
+ string
+
+
+ Sets the height CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'auto'
+
+
+
+
inset
+
+ {insetTypeString}
+
+
+ Based on the CSS property inset this prop is a shorthand that corresponds to the{" "}
+ top, right, bottom, and/or left properties.
+
+
+ 'auto'
+
+
+
+
margin
+
+ string | Space
+
+ being Space an object with the following properties:
+
+ {spaceTypeString}
+
+
Size of the margin to be applied to the container.
+
-
+
+
+
maxHeight
+
+ string
+
+
+ Sets the max-height CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'none'
+
+
+
+
maxWidth
+
+ string
+
+
+ Sets the max-width CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'none'
+
+
+
+
minHeight
+
+ string
+
+
+ Sets the min-height CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'auto'
+
+
+
+
minWidth
+
+ string
+
+
+ Sets the min-width CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'auto'
+
+
+
+
outline
+
+ {outlineTypeString}
+
+
+ Based on the CSS property outline allows configuring all properties related to the outline of
+ a container.
+
+
-
+
+
+
overflow
+
+ {overflowTypeString}
- being BorderProperties an object with the following properties:
+ being OverflowValues an enum with the following possible values:
- Based on the CSS property border allows configuring all properties related to the border of a
- container.
-
-
-
-
-
-
borderRadius
-
- string
-
-
- Sets the border-radius CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
-
-
-
-
boxShadow
-
- string
-
-
- Sets the box-shadow CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'none'
-
-
-
-
boxSizing
-
- 'content-box' | 'border-box'
-
-
- Sets the box-sizing CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'content-box'
-
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
Custom content inside the container.
-
-
-
-
-
display
-
- 'block' | 'inline-block' | 'inline' | 'none'
-
-
- Sets the display CSS property. See{" "}
-
- MDN
- {" "}
- for further information. The set of values is limited to the ones related to the outer display type. If you
- want to apply any pattern from the inner box and how the children are laid out, we recommend you to use the
- Flex and Grid components.
-
-
- 'block'
-
-
-
-
float
-
- 'left' | 'right' | 'none'
-
-
- Sets the float CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'none'
-
-
-
-
height
-
- string
-
-
- Sets the height CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'auto'
-
-
-
-
inset
-
- {insetTypeString}
-
-
- Based on the CSS property inset this prop is a shorthand that corresponds to the{" "}
- top, right, bottom, and/or left properties.
-
- 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.
-
-
-
-
-
-
maxHeight
-
- string
-
-
- Sets the max-height CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'none'
-
-
-
-
maxWidth
-
- string
-
-
- Sets the max-width CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'none'
-
-
-
-
minHeight
-
- string
-
-
- Sets the min-height CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'auto'
-
-
-
-
minWidth
-
- string
-
-
- Sets the min-width CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'auto'
-
-
-
-
outline
-
- {outlineTypeString}
-
-
- Based on the CSS property outline allows configuring all properties related to the outline of a
- container.
-
-
-
-
-
-
overflow
-
- {overflowTypeString}
-
- being OverflowValues an enum with the following possible values:
-
- 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.
-
+ Sets the position CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'static'
+
+
+
+
width
+
+ string
+
+
+ Sets the width CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'auto'
+
+
+
+
zIndex
+
+ 'auto' | number
+
+
+ Sets the z-index CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'auto'
+
+
+
),
},
@@ -408,8 +410,8 @@ const sections = [
<>
This code provides an illustration of a custom component created exclusively with the{" "}
- DxcContainer. You should not copy this code, but use instead our{" "}
- DxcSelect.
+ DxcContainer. You should not copy this code, use our DxcSelect{" "}
+ instead.
It is imperative to exclusively utilize Halstack components for optimal compatibility and adherence to our
@@ -417,7 +419,7 @@ const sections = [
reach out to our development team
{" "}
- first to discuss your particular situation.
+ first to discuss your particular scenario.
@@ -427,15 +429,11 @@ const sections = [
},
];
-const ContainerCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const ContainerCodePage = () => (
+
+
+
+
+);
export default ContainerCodePage;
diff --git a/apps/website/screens/components/container/code/examples/basicUsage.ts b/apps/website/screens/components/container/code/examples/basicUsage.ts
deleted file mode 100644
index a0c582d7ad..0000000000
--- a/apps/website/screens/components/container/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { DxcContainer, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
- Example text
-
-
- );
-}`;
-
-const scope = {
- DxcContainer,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/container/code/examples/basicUsage.tsx b/apps/website/screens/components/container/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..cd80fea8cd
--- /dev/null
+++ b/apps/website/screens/components/container/code/examples/basicUsage.tsx
@@ -0,0 +1,28 @@
+import { DxcContainer, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+ Example text
+
+
+ );
+}`;
+
+const scope = {
+ DxcContainer,
+ DxcInset,
+ DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/container/code/examples/listbox.ts b/apps/website/screens/components/container/code/examples/listbox.ts
deleted file mode 100644
index 07a861df6d..0000000000
--- a/apps/website/screens/components/container/code/examples/listbox.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { DxcContainer, DxcInset, DxcTypography } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const suggestions = ["Option 1", "Option 2", "Option 3", "Option 4"];
-
- return (
-
-
- {suggestions.map((suggestion, index) => (
-
-
-
- {suggestion}
-
-
-
- ))}
-
-
- );
-}`;
-
-const scope = {
- DxcContainer,
- DxcInset,
- DxcTypography,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/container/code/examples/listbox.tsx b/apps/website/screens/components/container/code/examples/listbox.tsx
new file mode 100644
index 0000000000..1b490b42b1
--- /dev/null
+++ b/apps/website/screens/components/container/code/examples/listbox.tsx
@@ -0,0 +1,57 @@
+import { DxcContainer, DxcInset, DxcTypography } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const suggestions = ["Option 1", "Option 2", "Option 3", "Option 4"];
+
+ return (
+
+
+ {suggestions.map((suggestion, index) => (
+
+
+
+ {suggestion}
+
+
+
+ ))}
+
+
+ );
+}`;
+
+const scope = {
+ DxcContainer,
+ DxcInset,
+ DxcTypography,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx
new file mode 100644
index 0000000000..1dcf180838
--- /dev/null
+++ b/apps/website/screens/components/container/overview/ContainerOverviewPage.tsx
@@ -0,0 +1,135 @@
+import { DxcParagraph, DxcFlex, DxcBulletedList, DxcLink, DxcInset } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The Halstack's container component provides a structured way to manage layout and spacing within the Halstack
+ Design System. It allows for controlled use of design tokens such as spacing, borders, and shadows, ensuring
+ consistency across the UI.
+
+
+ Being generic in nature, it can be overused, so it's important to consider situations where more specific and
+ expressive components could be used.
+
+
+ ),
+ },
+ {
+ title: "The box model",
+ content: (
+ <>
+
+ Everything in CSS has a box around it. Understanding these boxes is key to being able to create more complex
+ layouts for your application.
+
+
+ Below, we share a series of essential links to help you understand and use the container component correctly.
+ If you are not acquainted with these concepts, we strongly recommend taking a moment to review them:
+
+
+
+
+ MDN web docs: CSS box model
+
+
+
+
+
+ Backgrounds and borders
+
+
+
+
+ Overflowing content
+
+
+
+
+ Sizing items in CSS
+
+
+
+
+ Positioning
+
+
+
+
+
+
+
+ Google web.dev: Box model
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use a container to group and organize related content within a specific section of a page or layout.
+
+
+ Set size, spacing, and margins that are consistent by applying the box model properties.
+
+
+ Control the depth of the different elements of your UI by customizing the container's box shadow.
+
+
+ Customize border styles of the container to match the rest of your interface design.
+
+
+
+ Don't use the container to build components without first ensuring that there isn't a more specific,
+ semantic Halstack component that could be used instead.
+
+
+
+
+ Don't use the container to create complex layouts when more suitable components are available.
+ {" "}
+ Use the{" "}
+
+ flex
+ {" "}
+ and{" "}
+
+ grid
+ {" "}
+ components to create those layouts.
+
+
+ Whenever possible, try to use the design tokens provided by the Halstack Design System, even
+ though the component allows any value.
+
+
+ ),
+ },
+];
+
+const ContainerOverviewPage = () => (
+
+
+
+
+);
+
+export default ContainerOverviewPage;
diff --git a/apps/website/screens/components/container/usage/ContainerUsagePage.tsx b/apps/website/screens/components/container/usage/ContainerUsagePage.tsx
deleted file mode 100644
index 727d27acf4..0000000000
--- a/apps/website/screens/components/container/usage/ContainerUsagePage.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import { DxcParagraph, DxcFlex, DxcBulletedList, DxcLink } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- The primary function of a container is to structure and group other components or contents that are related to
- each other, allowing certain styles of customization to obtain more cohesive and consistent interfaces.
-
- ),
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Use a container to group and organize related content within a specific section of a page or layout.
-
-
- Set size, spacing, and margins that are consistent by applying the box model properties.
-
-
- Control the depth of the different elements of your UI by customizing the container's box shadow.
-
-
- Change and custom border styles of the container to match the rest of your interface design.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Use the container to build components without first making sure that there is no other, more semantic,
- component in Halstack that you can use instead.
-
-
- ),
- },
- ],
- },
- {
- title: "The Box Model",
- content: (
- <>
-
- Everything in CSS has a box around it. Understanding these boxes is key to being able to create more complex
- layouts for your application.
-
-
- Below, we share a series of links that we consider essential to understand and use the Container component
- correctly. If you are not acquainted with these concepts, we strongly recommend taking a moment to review
- them:
-
-
-
- The CSS Box Model
-
-
-
- MDN
-
-
-
-
- web.dev
-
- , by Google.
-
-
-
-
-
- Backgrounds and borders
-
-
-
-
- Overflowing content
-
-
-
-
- Sizing items in CSS
-
-
-
-
- Mastering margin collapsing
-
-
-
-
- Positioning
-
-
-
-
- ),
- },
-];
-
-const ContainerUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ContainerUsagePage;
diff --git a/apps/website/screens/components/container/usage/examples/alternateBoxModel.ts b/apps/website/screens/components/container/usage/examples/alternateBoxModel.ts
deleted file mode 100644
index c06ccf534c..0000000000
--- a/apps/website/screens/components/container/usage/examples/alternateBoxModel.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DxcContainer, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const ContextualMenuSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ContextualMenuSpecsPage;
diff --git a/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_anatomy.png b/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_anatomy.png
deleted file mode 100644
index 82e7d1d5a8..0000000000
Binary files a/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_item_specs.png b/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_item_specs.png
deleted file mode 100644
index 13344874e7..0000000000
Binary files a/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_item_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_item_states.png b/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_item_states.png
deleted file mode 100644
index c02d0814f3..0000000000
Binary files a/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_item_states.png and /dev/null differ
diff --git a/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_specs.png b/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_specs.png
deleted file mode 100644
index 265559bab4..0000000000
Binary files a/apps/website/screens/components/contextual-menu/specs/images/contextual_menu_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/contextual-menu/usage/ContextualMenuUsagePage.tsx b/apps/website/screens/components/contextual-menu/usage/ContextualMenuUsagePage.tsx
deleted file mode 100644
index 013b2eba16..0000000000
--- a/apps/website/screens/components/contextual-menu/usage/ContextualMenuUsagePage.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { DxcParagraph, DxcFlex, DxcBulletedList } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import contextualMenuElements from "./images/contextual_menu_elements.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- This component allows a wide range of possibilities when it comes to placing content cohesively and
- comprehensively. To achieve this, it's important to understand how the items in our Contextual menu behave and
- interact with each other.
-
- ),
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Choose icons based on their relevance to the items they represent, ensuring accurate and clear
- descriptions.
-
-
- Place the Contextual menu aligned to the left or right, but never in the center of the interface. This
- component is a complement to navigate within the page, but it should never obstruct the main content.
-
-
- Use different navigation levels to structure the elements logically.
-
-
- Use our Badge component as a complement to the menu items to show the status of any navigable section.
-
-
- We strongly recommend only selecting by default the first option of the menu. Any other option may become
- unintuitive for the user.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Use icons on items that don't belong to the first level of navigation. Keep in mind that icons are limited
- to the first level of navigation, as having icons in the subsequent elements can interfere with the user's
- reading of the content.
-
-
- Use an excessive amount of icons. While they can enhance the visual appeal and usability of a menu,
- overusing them can lead to confusion and clutter.
-
-
- Use more than three levels of navigation, as excessive indentation can be confusing and distracting for
- the user.
-
-
- ),
- },
- ],
- },
- {
- title: "Elements of the Contextual menu",
- content: (
- <>
-
- The Contextual menu is composed of different elements that allow the user to navigate through the interface.
- Each of these elements has a different criteria and behaviour, and they are as follows:
-
-
-
- Sections: they have a title and are a collection of group and single items within the menu
- that share a certain relationship.
-
-
- Group items: they are nests of other group items or individual items that are related to
- each other and show indentation as they are unfolded.
-
-
- Single items: they are items that carry on a specific change to the interface and don't
- contain any type of nesting.
-
-
- Divider: its purpose is to separate sections within the Contextual menu. They only appear
- at the end of one section and right before the following one.
-
-
- Scrollbar: only present when the scrollable function is available.
-
-
-
-
-
-
- ),
- },
- {
- title: "Contextual menu and Sidenav",
- content: (
- <>
-
- Although visually similar, the Sidenav component and the Contextual menu differ significantly in
- functionality. Our Sidenav is designed to provide a consistent and persistent navigation structure throughout
- the application, allowing users to easily switch between different sections or pages within the app.
-
-
- On the other hand, the Contextual menu is more context-sensitive, and appears in response to specific user
- actions, offering a set of relevant options or actions that can be performed on the current page. This means
- that it operates on a page level, so the component may appear or not depending on the specific needs and
- requirements for each screen or interaction.
-
-
- ),
- },
-];
-
-const ContextualMenuUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ContextualMenuUsagePage;
diff --git a/apps/website/screens/components/contextual-menu/usage/images/contextual_menu_elements.png b/apps/website/screens/components/contextual-menu/usage/images/contextual_menu_elements.png
deleted file mode 100644
index 5c576ca7f0..0000000000
Binary files a/apps/website/screens/components/contextual-menu/usage/images/contextual_menu_elements.png and /dev/null differ
diff --git a/apps/website/screens/components/data-grid/DataGridPageLayout.tsx b/apps/website/screens/components/data-grid/DataGridPageLayout.tsx
index 119c920258..0568681527 100644
--- a/apps/website/screens/components/data-grid/DataGridPageLayout.tsx
+++ b/apps/website/screens/components/data-grid/DataGridPageLayout.tsx
@@ -1,4 +1,4 @@
-import { DxcParagraph, DxcFlex, DxcAlert } from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
import PageHeading from "@/common/PageHeading";
import TabsPageHeading from "@/common/TabsPageLayout";
import ComponentHeading from "@/common/ComponentHeading";
@@ -6,29 +6,20 @@ import { ReactNode } from "react";
const DataGridPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/data-grid" },
- { label: "Usage", path: "/components/data-grid/usage" },
- { label: "Specifications", path: "/components/data-grid/specifications" },
+ { label: "Overview", path: "/components/data-grid" },
+ { label: "Code", path: "/components/data-grid/code" },
];
return (
-
+
-
+
-
- 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.
+ The datagrid component is used to display and manage large sets of data in a tabular format, allowing users
+ to sort, filter, and interact with the data efficiently.
-
+
{children}
diff --git a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
index 3a6eed6ff9..fda3d6c0f9 100644
--- a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
+++ b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
@@ -1,10 +1,8 @@
import { DxcFlex, DxcLink, DxcParagraph, 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 Code, { TableCode, ExtendedTableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
import basicUsage from "./examples/basicUsage";
import selectable from "./examples/selectable";
@@ -21,7 +19,8 @@ const columnsTypeString = `{
label: string;
resizable?: boolean;
sortable?: boolean;
- sortFn?: (a: ReactNode, b: ReactNode) => number;
+ sortFn?: (a: ReactNode, b: ReactNode) =>
+ number;
draggable?: boolean;
textEditable?: boolean;
summaryKey?: string;
@@ -34,14 +33,20 @@ const GridRowTypeString = `{
const HierarchyGridRowTypeString = `GridRow & {
childRows?: HierarchyGridRow[] | GridRow[];
+ childrenTrigger?: (
+ open: boolean,
+ triggerRow: HierarchyGridRow
+ ) => (HierarchyGridRow[] | GridRow[])
+ | Promise;
}`;
const ExpandableGridRowTypeString = `GridRow & {
expandedContent?: React.ReactNode;
expandedContentHeight?: number;
+ contentIsExpanded?: boolean;
}`;
-const actionsType = `{
+const actionsTypeString = `{
icon: string | SVG;
title: string;
onClick: () => void;
@@ -55,6 +60,10 @@ const actionsType = `{
options: Option[];
}[]`;
+const childrenTriggerTypeString = `(open: boolean, triggerRow: HierarchyGridRow) =>
+(HierarchyGridRow[] | GridRow[])
+| Promise`;
+
const sections = [
{
title: "Props",
@@ -116,26 +125,11 @@ const sections = [
- List of rows that will be rendered in each cell based on the key in each column.
+ number
+
Default page in which the datagrid is rendered.
-
@@ -147,61 +141,74 @@ const sections = [
-
-
summaryRow
+
itemsPerPage
- GridRow
+ number
-
Extra row that will be always visible.
-
-
+
Number of items per page.
+
5
-
selectable
+
itemsPerPageFunction
- boolean
+ {`(value: number) => void`}
+
+
+ This function will be called when the user selects an item per page option. The value selected will be
+ passed as a parameter.
-
Whether the rows are selectable or not.
-
-
selectedRows
-
- {`Set`}
-
+
itemsPerPageOptions
- Set of selected rows. This prop is mandatory if selectable is set to true. The{" "}
- uniqueRowId key will be used to identify the each row.
+ number[]
+
An array of numbers representing the items per page options.
- Function called whenever the selected values changes. This prop is mandatory if selectable is
- set to true.The uniqueRowId key will be used to identify the rows.
+ {childrenTriggerTypeString}
+
+
+ Function called whenever a cell with children (HierarchyGridRow) is expanded or collapsed
+ (based on the value of open). Returns (or resolves to) the array of child rows nested under
+ this row to display when expanded.
- This prop indicates the unique key that can be used to identify each row. The value of that key can be
- either a number or a string. This prop is mandatory if selectable is set to true,{" "}
- expandable is set to true or rows is of type HierarchyGridRow[].
+ {`(page: number) => void`}
+
Function called whenever the current page is changed.
+ Function called whenever the selected values changes. This prop is mandatory if selectable is
+ set to true.The uniqueRowId key will be used to identify the rows.
+ List of rows that will be rendered in each cell based on the key in each column.
-
Function called whenever the current page is changed.
-
-
showPaginator
+
selectable
boolean
-
If true, paginator will be displayed.
-
false
+
Whether the rows are selectable or not.
+
-
-
totalItems
+
selectedRows
- number
+ {`Set`}
+
+
+ Set of selected rows. This prop is mandatory if selectable is set to true. The{" "}
+ uniqueRowId key will be used to identify the each row.
-
Number of total items.
-
@@ -248,29 +273,38 @@ const sections = [
true
-
itemsPerPage
+
showPaginator
- number
+ boolean
-
Number of items per page.
-
5
+
If true, paginator will be displayed.
+
false
-
itemsPerPageOptions
+
summaryRow
- number[]
+ GridRow
-
An array of numbers representing the items per page options.
+
Extra row that will be always visible.
-
-
itemsPerPageFunction
+
totalItems
- {`(value: number) => void`}
+ number
+
Number of total items.
+
-
+
+
+
uniqueRowId
- This function will be called when the user selects an item per page option. The value selected will be
- passed as a parameter.
+ string
+
+
+ This prop indicates the unique key that can be used to identify each row. The value of that key can be
+ either a number or a string. This prop is mandatory if selectable is set to true,{" "}
+ expandable is set to true or rows is of type HierarchyGridRow[].
-
@@ -301,13 +335,13 @@ const sections = [
-
+
actions
- {actionsType}
+ {actionsTypeString}
@@ -376,9 +410,7 @@ const sections = [
const DataGridCodePage = () => {
return (
-
-
-
+
);
diff --git a/apps/website/screens/components/data-grid/code/examples/actionsCell.ts b/apps/website/screens/components/data-grid/code/examples/actionsCell.ts
deleted file mode 100644
index 69c52a51a8..0000000000
--- a/apps/website/screens/components/data-grid/code/examples/actionsCell.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
-const actions = [
- {
- icon: "delete",
- title: "Delete",
- onClick: () => {},
- },
- {
- title: "edit",
- onClick: (value) => {},
- options:[
- {
- value: "1",
- label: "Edit",
- },
- {
- value: "2",
- label: "Mark as selected",
- },
- ]
- },
- ];
- const columns = [
- {
- key: "id",
- label: "ID",
- resizable: true,
- draggable: true,
- },
- {
- key: "complete",
- label: "% Complete",
- resizable: true,
- draggable: true,
- alignment: "right",
- },
- {
- key: "actions",
- label: "Actions",
- alignment: "center",
- },
- ];
-
- const rows = [
- {
- id: "Row 1",
- complete: 46,
- actions: ,
- },
- {
- id: "Row 2",
- complete: 51,
- actions: ,
- },
- {
- id: "Row 3",
- complete: 40,
- actions: ,
- },
- {
- id: "Row 4",
- complete: 10,
- actions: ,
- },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/actionsCell.tsx b/apps/website/screens/components/data-grid/code/examples/actionsCell.tsx
new file mode 100644
index 0000000000..71fbd63831
--- /dev/null
+++ b/apps/website/screens/components/data-grid/code/examples/actionsCell.tsx
@@ -0,0 +1,81 @@
+import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+const actions = [
+ {
+ icon: "delete",
+ title: "Delete",
+ onClick: () => {},
+ },
+ {
+ title: "edit",
+ onClick: (value) => {},
+ options:[
+ {
+ value: "1",
+ label: "Edit",
+ },
+ {
+ value: "2",
+ label: "Mark as selected",
+ },
+ ]
+ },
+ ];
+ const columns = [
+ {
+ key: "id",
+ label: "ID",
+ resizable: true,
+ draggable: true,
+ },
+ {
+ key: "complete",
+ label: "% Complete",
+ resizable: true,
+ draggable: true,
+ alignment: "right",
+ },
+ {
+ key: "actions",
+ label: "Actions",
+ alignment: "center",
+ },
+ ];
+
+ const rows = [
+ {
+ id: "Row 1",
+ complete: 46,
+ actions: ,
+ },
+ {
+ id: "Row 2",
+ complete: 51,
+ actions: ,
+ },
+ {
+ id: "Row 3",
+ complete: 40,
+ actions: ,
+ },
+ {
+ id: "Row 4",
+ complete: 10,
+ actions: ,
+ },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDataGrid,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/basicUsage.ts b/apps/website/screens/components/data-grid/code/examples/basicUsage.ts
deleted file mode 100644
index 4cd9274304..0000000000
--- a/apps/website/screens/components/data-grid/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const columns = [
- {
- key: "id",
- label: "ID",
- resizable: true,
- draggable: true,
- },
- {
- key: "complete",
- label: "% Complete",
- resizable: true,
- draggable: true,
- alignment: "right",
- },
- ];
-
- const rows = [
- {
- id: "Row 1",
- complete: 46,
- },
- {
- id: "Row 2",
- complete: 51,
- },
- {
- id: "Row 3",
- complete: 40,
- },
- {
- id: "Row 4",
- complete: 10,
- },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/basicUsage.tsx b/apps/website/screens/components/data-grid/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..9fafedbe72
--- /dev/null
+++ b/apps/website/screens/components/data-grid/code/examples/basicUsage.tsx
@@ -0,0 +1,51 @@
+import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const columns = [
+ {
+ key: "id",
+ label: "ID",
+ resizable: true,
+ draggable: true,
+ },
+ {
+ key: "complete",
+ label: "% Complete",
+ resizable: true,
+ draggable: true,
+ alignment: "right",
+ },
+ ];
+
+ const rows = [
+ {
+ id: "Row 1",
+ complete: 46,
+ },
+ {
+ id: "Row 2",
+ complete: 51,
+ },
+ {
+ id: "Row 3",
+ complete: 40,
+ },
+ {
+ id: "Row 4",
+ complete: 10,
+ },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDataGrid,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/customSort.ts b/apps/website/screens/components/data-grid/code/examples/customSort.ts
deleted file mode 100644
index 8115e22efb..0000000000
--- a/apps/website/screens/components/data-grid/code/examples/customSort.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const columns = [
- {
- key: "id",
- label: "ID",
- resizable: true,
- draggable: true,
- sortable: true,
- },
- {
- key: "complete",
- label: "% Complete",
- resizable: true,
- draggable: true,
- sortable: true,
- alignment: "right",
- },
- ];
-
- const rows = [
- {
- id: "Row 1",
- complete: 46,
- },
- {
- id: "Row 2",
- complete: 51,
- },
- {
- id: "Row 3",
- complete: 40,
- },
- {
- id: "Row 4",
- complete: 10,
- },
- ];
-
-
- const [itemsPerPage, setItemsPerPage] = useState(2);
- const [rowsControlled, setRowsControlled] = useState(rows.slice(0, itemsPerPage));
- const [page, setPage] = useState(0);
-
- return (
-
- {
- if (sortColumn) {
- const { columnKey, direction } = sortColumn;
- console.log("Sorting the column " + columnKey + " by " + direction);
- setRowsControlled((currentRows) => {
- return currentRows.sort((a, b) => {
- if (direction === "ASC") {
- return a[columnKey] < b[columnKey] ? -1 : a[columnKey] > b[columnKey] ? 1 : 0;
- } else {
- return a[columnKey] < b[columnKey] ? 1 : a[columnKey] > b[columnKey] ? -1 : 0;
- }
- });
- });
- } else {
- console.log("Removed sorting criteria")
- setRowsControlled(rows.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage));
- }
- }}
- onPageChange={(page) => {
- const internalPage = page - 1;
- setPage(internalPage);
- setRowsControlled(rows.slice(internalPage * itemsPerPage, internalPage * itemsPerPage + itemsPerPage));
- }}
- showPaginator
- itemsPerPage={itemsPerPage}
- itemsPerPageOptions={[2, 4]}
- itemsPerPageFunction={(n) =>
- {
- setItemsPerPage(n);
- setRowsControlled(rows.slice(0, n));
- }
- }
- totalItems={rows.length}
- />
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/customSort.tsx b/apps/website/screens/components/data-grid/code/examples/customSort.tsx
new file mode 100644
index 0000000000..ca964447a5
--- /dev/null
+++ b/apps/website/screens/components/data-grid/code/examples/customSort.tsx
@@ -0,0 +1,97 @@
+import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const columns = [
+ {
+ key: "id",
+ label: "ID",
+ resizable: true,
+ draggable: true,
+ sortable: true,
+ },
+ {
+ key: "complete",
+ label: "% Complete",
+ resizable: true,
+ draggable: true,
+ sortable: true,
+ alignment: "right",
+ },
+ ];
+
+ const rows = [
+ {
+ id: "Row 1",
+ complete: 46,
+ },
+ {
+ id: "Row 2",
+ complete: 51,
+ },
+ {
+ id: "Row 3",
+ complete: 40,
+ },
+ {
+ id: "Row 4",
+ complete: 10,
+ },
+ ];
+
+
+ const [itemsPerPage, setItemsPerPage] = useState(2);
+ const [rowsControlled, setRowsControlled] = useState(rows.slice(0, itemsPerPage));
+ const [page, setPage] = useState(0);
+
+ return (
+
+ {
+ if (sortColumn) {
+ const { columnKey, direction } = sortColumn;
+ console.log("Sorting the column " + columnKey + " by " + direction);
+ setRowsControlled((currentRows) => {
+ return currentRows.sort((a, b) => {
+ if (direction === "ASC") {
+ return a[columnKey] < b[columnKey] ? -1 : a[columnKey] > b[columnKey] ? 1 : 0;
+ } else {
+ return a[columnKey] < b[columnKey] ? 1 : a[columnKey] > b[columnKey] ? -1 : 0;
+ }
+ });
+ });
+ } else {
+ console.log("Removed sorting criteria")
+ setRowsControlled(rows.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage));
+ }
+ }}
+ onPageChange={(page) => {
+ const internalPage = page - 1;
+ setPage(internalPage);
+ setRowsControlled(rows.slice(internalPage * itemsPerPage, internalPage * itemsPerPage + itemsPerPage));
+ }}
+ showPaginator
+ itemsPerPage={itemsPerPage}
+ itemsPerPageOptions={[2, 4]}
+ itemsPerPageFunction={(n) =>
+ {
+ setItemsPerPage(n);
+ setRowsControlled(rows.slice(0, n));
+ }
+ }
+ totalItems={rows.length}
+ />
+
+ );
+}`;
+
+const scope = {
+ DxcDataGrid,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/expandable.ts b/apps/website/screens/components/data-grid/code/examples/expandable.ts
deleted file mode 100644
index 5afec0df79..0000000000
--- a/apps/website/screens/components/data-grid/code/examples/expandable.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const columns = [
- {
- key: "id",
- label: "ID",
- resizable: true,
- draggable: true,
- },
- {
- key: "complete",
- label: "% Complete",
- resizable: true,
- draggable: true,
- alignment: "right",
- },
- ];
-
- const rows = [
- {
- id: "Row 1",
- complete: 46,
- expandedContent: "Expanded content"
- },
- {
- id: "Row 2",
- complete: 51,
- expandedContent: "Expanded content",
- expandedContentHeight: 100
- },
- {
- id: "Row 3",
- complete: 40,
- },
- {
- id: "Row 4",
- complete: 10,
- },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/expandable.tsx b/apps/website/screens/components/data-grid/code/examples/expandable.tsx
new file mode 100644
index 0000000000..acb869c681
--- /dev/null
+++ b/apps/website/screens/components/data-grid/code/examples/expandable.tsx
@@ -0,0 +1,54 @@
+import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const columns = [
+ {
+ key: "id",
+ label: "ID",
+ resizable: true,
+ draggable: true,
+ },
+ {
+ key: "complete",
+ label: "% Complete",
+ resizable: true,
+ draggable: true,
+ alignment: "right",
+ },
+ ];
+
+ const rows = [
+ {
+ id: "Row 1",
+ complete: 46,
+ expandedContent: "Expanded content"
+ },
+ {
+ id: "Row 2",
+ complete: 51,
+ expandedContent: "Expanded content",
+ expandedContentHeight: 100
+ },
+ {
+ id: "Row 3",
+ complete: 40,
+ },
+ {
+ id: "Row 4",
+ complete: 10,
+ },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDataGrid,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchical.ts b/apps/website/screens/components/data-grid/code/examples/hierarchical.ts
deleted file mode 100644
index 1c23d38422..0000000000
--- a/apps/website/screens/components/data-grid/code/examples/hierarchical.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const columns = [
- {
- key: "name",
- label: "Label",
- summaryKey: "label"
- },
- {
- key: "value",
- label: "Value",
- alignment: "right",
- summaryKey: "total"
- },
- ];
-
- const rows = [
- {
- name: "Root Node 1",
- value: "1",
- id: "a",
- childRows: [
- {
- name: "Child Node 1.1",
- value: "1.1",
- id: "aa",
- childRows: [
- {
- name: "Grandchild Node 1.1.1",
- value: "1.1.1",
- id: "aaa",
- },
- {
- name: "Grandchild Node 1.1.2",
- value: "1.1.2",
- id: "aab",
- },
- ],
- },
- {
- name: "Child Node 1.2",
- value: "1.2",
- id: "ab",
- },
- ],
- },
- {
- name: "Root Node 2",
- value: "2",
- id: "b",
- childRows: [
- {
- name: "Child Node 2.1",
- value: "2.1",
- id: "ba",
- childRows: [
- {
- name: "Grandchild Node 2.1.1",
- value: "2.1.1",
- id: "baa",
- },
- ],
- },
- {
- name: "Child Node 2.2",
- value: "2.2",
- id: "bb",
- },
- {
- name: "Child Node 2.3",
- value: "2.3",
- id: "bc",
- },
- ],
- },
- ];
-
- const summaryRow = { label: "Total", total: 100, id: "summary" }
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchical.tsx b/apps/website/screens/components/data-grid/code/examples/hierarchical.tsx
new file mode 100644
index 0000000000..a15c7f3078
--- /dev/null
+++ b/apps/website/screens/components/data-grid/code/examples/hierarchical.tsx
@@ -0,0 +1,93 @@
+import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const columns = [
+ {
+ key: "name",
+ label: "Label",
+ summaryKey: "label"
+ },
+ {
+ key: "value",
+ label: "Value",
+ alignment: "right",
+ summaryKey: "total"
+ },
+ ];
+
+ const rows = [
+ {
+ name: "Root Node 1",
+ value: "1",
+ id: "a",
+ childRows: [
+ {
+ name: "Child Node 1.1",
+ value: "1.1",
+ id: "aa",
+ childRows: [
+ {
+ name: "Grandchild Node 1.1.1",
+ value: "1.1.1",
+ id: "aaa",
+ },
+ {
+ name: "Grandchild Node 1.1.2",
+ value: "1.1.2",
+ id: "aab",
+ },
+ ],
+ },
+ {
+ name: "Child Node 1.2",
+ value: "1.2",
+ id: "ab",
+ },
+ ],
+ },
+ {
+ name: "Root Node 2",
+ value: "2",
+ id: "b",
+ childRows: [
+ {
+ name: "Child Node 2.1",
+ value: "2.1",
+ id: "ba",
+ childRows: [
+ {
+ name: "Grandchild Node 2.1.1",
+ value: "2.1.1",
+ id: "baa",
+ },
+ ],
+ },
+ {
+ name: "Child Node 2.2",
+ value: "2.2",
+ id: "bb",
+ },
+ {
+ name: "Child Node 2.3",
+ value: "2.3",
+ id: "bc",
+ },
+ ],
+ },
+ ];
+
+ const summaryRow = { label: "Total", total: 100, id: "summary" }
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDataGrid,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts b/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts
deleted file mode 100644
index 230fd49314..0000000000
--- a/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const columns = [
- {
- key: "name",
- label: "Label",
- summaryKey: "label"
- },
- {
- key: "value",
- label: "Value",
- alignment: "right",
- summaryKey: "total"
- },
- ];
-
- const rows = [
- {
- name: "Root Node 1",
- value: "1",
- id: "a",
- childRows: [
- {
- name: "Child Node 1.1",
- value: "1.1",
- id: "aa",
- childRows: [
- {
- name: "Grandchild Node 1.1.1",
- value: "1.1.1",
- id: "aaa",
- },
- {
- name: "Grandchild Node 1.1.2",
- value: "1.1.2",
- id: "aab",
- },
- ],
- },
- {
- name: "Child Node 1.2",
- value: "1.2",
- id: "ab",
- },
- ],
- },
- {
- name: "Root Node 2",
- value: "2",
- id: "b",
- childRows: [
- {
- name: "Child Node 2.1",
- value: "2.1",
- id: "ba",
- childRows: [
- {
- name: "Grandchild Node 2.1.1",
- value: "2.1.1",
- id: "baa",
- },
- ],
- },
- {
- name: "Child Node 2.2",
- value: "2.2",
- id: "bb",
- },
- {
- name: "Child Node 2.3",
- value: "2.3",
- id: "bc",
- },
- ],
- },
- ];
-
- const [selectedRows, setSelectedRows] = useState(new Set());
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.tsx b/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.tsx
new file mode 100644
index 0000000000..8847aa7dda
--- /dev/null
+++ b/apps/website/screens/components/data-grid/code/examples/hierarchicalSelectable.tsx
@@ -0,0 +1,101 @@
+import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [columns] = useState([
+ {
+ key: "name",
+ label: "Label",
+ summaryKey: "label"
+ },
+ {
+ key: "value",
+ label: "Value",
+ alignment: "right",
+ summaryKey: "total"
+ },
+ ]);
+
+ const [rows] = useState([
+ {
+ name: "Root Node 1",
+ value: "1",
+ id: "a",
+ childRows: [
+ {
+ name: "Child Node 1.1",
+ value: "1.1",
+ id: "aa",
+ childRows: [
+ {
+ name: "Grandchild Node 1.1.1",
+ value: "1.1.1",
+ id: "aaa",
+ },
+ {
+ name: "Grandchild Node 1.1.2",
+ value: "1.1.2",
+ id: "aab",
+ },
+ ],
+ },
+ {
+ name: "Child Node 1.2",
+ value: "1.2",
+ id: "ab",
+ },
+ ],
+ },
+ {
+ name: "Root Node 2",
+ value: "2",
+ id: "b",
+ childRows: [
+ {
+ name: "Child Node 2.1",
+ value: "2.1",
+ id: "ba",
+ childRows: [
+ {
+ name: "Grandchild Node 2.1.1",
+ value: "2.1.1",
+ id: "baa",
+ },
+ ],
+ },
+ {
+ name: "Child Node 2.2",
+ value: "2.2",
+ id: "bb",
+ },
+ {
+ name: "Child Node 2.3",
+ value: "2.3",
+ id: "bc",
+ },
+ ],
+ },
+ ]);
+
+ const [selectedRows, setSelectedRows] = useState(new Set());
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDataGrid,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/paginator.ts b/apps/website/screens/components/data-grid/code/examples/paginator.ts
deleted file mode 100644
index 273f00a2ef..0000000000
--- a/apps/website/screens/components/data-grid/code/examples/paginator.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const columns = [
- {
- key: "id",
- label: "ID",
- resizable: true,
- draggable: true,
- },
- {
- key: "complete",
- label: "% Complete",
- resizable: true,
- draggable: true,
- alignment: "right",
- },
- ];
-
- const rows = [
- {
- id: "Row 1",
- complete: 46,
- },
- {
- id: "Row 2",
- complete: 51,
- },
- {
- id: "Row 3",
- complete: 40,
- },
- {
- id: "Row 4",
- complete: 10,
- },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/paginator.tsx b/apps/website/screens/components/data-grid/code/examples/paginator.tsx
new file mode 100644
index 0000000000..ee061c75a7
--- /dev/null
+++ b/apps/website/screens/components/data-grid/code/examples/paginator.tsx
@@ -0,0 +1,51 @@
+import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const columns = [
+ {
+ key: "id",
+ label: "ID",
+ resizable: true,
+ draggable: true,
+ },
+ {
+ key: "complete",
+ label: "% Complete",
+ resizable: true,
+ draggable: true,
+ alignment: "right",
+ },
+ ];
+
+ const rows = [
+ {
+ id: "Row 1",
+ complete: 46,
+ },
+ {
+ id: "Row 2",
+ complete: 51,
+ },
+ {
+ id: "Row 3",
+ complete: 40,
+ },
+ {
+ id: "Row 4",
+ complete: 10,
+ },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDataGrid,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/selectable.ts b/apps/website/screens/components/data-grid/code/examples/selectable.ts
deleted file mode 100644
index 17493981bc..0000000000
--- a/apps/website/screens/components/data-grid/code/examples/selectable.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const columns = [
- {
- key: "id",
- label: "ID",
- resizable: true,
- draggable: true,
- },
- {
- key: "complete",
- label: "% Complete",
- resizable: true,
- draggable: true,
- alignment: "right",
- },
- ];
-
- const rows = [
- {
- id: "Row 1",
- complete: 46,
- },
- {
- id: "Row 2",
- complete: 51,
- },
- {
- id: "Row 3",
- complete: 40,
- },
- {
- id: "Row 4",
- complete: 10,
- },
- ];
-
- const [selectedRows, setSelectedRows] = useState(new Set());
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/code/examples/selectable.tsx b/apps/website/screens/components/data-grid/code/examples/selectable.tsx
new file mode 100644
index 0000000000..560511e26f
--- /dev/null
+++ b/apps/website/screens/components/data-grid/code/examples/selectable.tsx
@@ -0,0 +1,61 @@
+import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const columns = [
+ {
+ key: "id",
+ label: "ID",
+ resizable: true,
+ draggable: true,
+ },
+ {
+ key: "complete",
+ label: "% Complete",
+ resizable: true,
+ draggable: true,
+ alignment: "right",
+ },
+ ];
+
+ const rows = [
+ {
+ id: "Row 1",
+ complete: 46,
+ },
+ {
+ id: "Row 2",
+ complete: 51,
+ },
+ {
+ id: "Row 3",
+ complete: 40,
+ },
+ {
+ id: "Row 4",
+ complete: 10,
+ },
+ ];
+
+ const [selectedRows, setSelectedRows] = useState(new Set());
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDataGrid,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx b/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx
new file mode 100644
index 0000000000..d6602ac3d8
--- /dev/null
+++ b/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx
@@ -0,0 +1,314 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import anatomy from "./images/datagrid-anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The datagrid component offers a robust solution for displaying and managing tabular data. It supports essential
+ features such as sorting, allowing users to organize and refine data easily. With{" "}
+ multi-selection capabilities, users can perform bulk actions like deleting or exporting records
+ efficiently. The component also includes in-line editing for quick data modifications directly
+ within the grid, and expandable rows for showcasing additional details without cluttering the
+ main view. Additionally, users can reorder columns to customize their data layout, ensuring an
+ intuitive and flexible user experience tailored to their specific needs.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Header row: it's the top section of the datagrid that displays the column titles and can
+ support actions like sorting or filtering.
+
+
+ Cell: basic unit of the datagrid where individual pieces of data are displayed and aligned
+ with the column.
+
+
+ Summary row(Optional): row at the bottom that shows summarized or aggregated data
+ for one or multiple columns.
+
+
+ Selectable row(Optional): a data row that users can click to select, usually for
+ performing actions like editing or deleting.
+
+
+ Expanded row(Optional): a row that, when expanded, reveals additional contextual
+ information related to that entry.
+
+
+ Expandable indicator(Optional): an icon or control that shows users a row can be
+ expanded to access more detailed content.
+
+
+
+ ),
+ },
+ {
+ title: "Key interactions and features",
+ subSections: [
+ {
+ title: "Row selection",
+ content: (
+ <>
+
+
+ Users can select one or multiple rows for bulk actions. It's recommended to include
+ checkboxes for multiple row selection, or else radio buttons for single-row selection.
+
+
+ Row selection can persist across pages when pagination is used in the datagrid,
+ ensuring users can perform bulk actions on rows even if they navigate away from the current view.
+
+
+ Users can set a default selected row on initial load, useful for pre-populating forms or automatically
+ highlighting the most relevant data for their specific use case.
+
+
+ Users can easily undo multiple selections at once using the select/deselect all feature
+ located in the datagrid's header, streamlining bulk actions.
+
+
+
+ ),
+ },
+ {
+ title: "Sorting and filtering",
+ content: (
+ <>
+
+
+ Users can apply sorting to multiple columns simultaneously, enabling more complex data
+ analysis by arranging data based on different criteria.
+
+
+ Filtering in our datagrid is enabled through integrated Halstack components, such as dropdowns, and is
+ applied at the row level for precise data refinement.
+
+
+
+ ),
+ },
+ {
+ title: "In-line editing",
+ content: (
+ <>
+
+
+ Users can modify data directly within the grid cells, allowing for quick and intuitive updates without
+ navigating away from the grid. This feature is particularly valuable for large datasets, where edits
+ need to be made directly within the data source for efficiency and real-time updates.
+
+
+ Changes made through in-line editing are immediately reflected in the datagrid, giving
+ users real-time feedback on their edits.
+
+
+ Built-in validation ensures that only correct and acceptable values are submitted, reducing errors and
+ improving data accuracy.
+
+
+ Additionally, when editing permissions are required, the datagrid can be configured with other Halstack
+ components, such as the button, to enable editing only after the button is activated.
+
+
+
+ ),
+ },
+ {
+ title: "Expandable rows",
+ content: (
+ <>
+
+
+ The datagrid component allows users to{" "}
+ reveal additional information for specific rows without cluttering the main view. This
+ optimizes space efficiency and improves user experience by offering access to in-depth information when
+ needed, all while maintaining a clean and organized grid layout.
+
+
+ When a row is expanded, it displays supplementary details, such as extra data fields, images, or action
+ buttons, providing context and enhancing data exploration.
+
+
+ The expanded area can display various content types, such as additional data fields, images, or action
+ buttons, enhancing the data presentation.
+
+
+
+ ),
+ },
+ {
+ title: "Column reordering",
+ content: (
+ <>
+
+
+ The re-ordering feature of our datagrid allows users to rearrange columns according to
+ their preferences by dragging and dropping them, enhancing the personalized data
+ viewing experience.
+
+
+ By letting users prioritize the most relevant columns, this feature helps them access and analyze data
+ more efficiently. It is also designed to be user-friendly, enabling quick adjustments with minimal
+ effort.
+
+
+ As users drag columns, visual indicators guide them, making it clear where the column will be placed
+ when dropped.
+
+
+
+ ),
+ },
+ {
+ title: "Hierarchical data",
+ content: (
+ <>
+
+
+ The datagrid supports hierarchical or tree-structured data, allowing users to explore
+ nested information within expandable rows. This is especially useful when working with parent-child
+ relationships, such as organizational structures, grouped datasets, or categories with subcategories.
+
+
+ Rows can be expanded to reveal child rows, enabling users to{" "}
+ view and interact with multi-level data in context, without navigating away or loading
+ separate tables.
+
+
+ This feature improves clarity and usability for complex datasets by letting users{" "}
+ drill down into relevant sections while keeping the rest of the grid collapsed and
+ clean.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Responsive behavior",
+ content: (
+ <>
+ The datagrid's size adjusts to the available space.
+
+
+ When placing a datagrid inside a parent component, adjusting the parent component's width also
+ correspondingly adjusts datagrid width up to a certain extent. A datagrid's minimum width based on the
+ content of the column headers and the number of columns it has.
+
+
+ The Datagrid will adjust its own scroll based on the content and the avalaible space. Careful planning for
+ structuring large datagrids (such as using a combination of managing column counts, using expandable
+ content, or even resizeable columns) can help minimize over reliance on scrollbars to display a lot of
+ information.
+
+
+ For smaller screen sizes, managing information density becomes even more important because of limited space.
+ Leveraging features such as allowing for expandable rows or managing the number of columns during initial
+ display can go a long way towards maintaining a clean and manageable datagrid.
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Data contextualization: provide context within the grid by labeling columns clearly,
+ ensuring users understand the significance of the data they are viewing.
+
+
+ Column alignment: although data can be aligned in columns however the user chooses, it must
+ be aligned consistently across columns to enhance readability:
+
+
+ Text: aligned to the left for natural reading flow.
+
+
+ Numbers and currencies: align numbers, currencies, and other quantitative data to the{" "}
+ right for clear comparison, especially when dealing with decimals or aligning figures
+ by their numerical place value.
+
+
+ Dates and times: aligned to the left for readability, as users generally read these
+ like text, but consider right-aligning if dates need to be compared sequentially.
+
+
+ Actions: align action buttons or interactive elements (such as "Edit" or "Delete") to the{" "}
+ center or right, depending on layout consistency. Centering actions
+ can make them more accessible and distinguishable from data fields.
+
+
+ Booleans: align checkboxes or toggles to the center to visually separate them from text
+ or data and create a clear, interactive area.
+
+
+ Icons: aligned to the center or next to their corresponding text, with spacing, to
+ maintain clarity and improve the user interface.
+
+
+
+
+ Column sizing: make sure that columns are sized appropriately for the type of data they
+ display (e.g. dates should not take up too much space, neither do numerical values, which must take only the
+ minimal space it requires for them to be shown without truncation).
+
+
+ Clear default sorting: set a sensible default sorting order for columns to help users
+ quickly access the most relevant data when they first interact with the grid.
+
+
+ Clear filters option: when filtering data, include a button to clear all filters at once,
+ allowing users to quickly reset their views and return to the unfiltered dataset.
+
+
+ Accessible bulk actions: ensure that bulk actions, such as "Delete" or "Export", are easily
+ accessible once rows are selected, facilitating efficient data management. Consider also implementing
+ confirmation prompts for bulk actions to prevent accidental data loss and ensure users are intentional with
+ their actions.
+
+
+ Use of expandable rows: use expandable rows to display additional information that isn't
+ crucial for immediate viewing, but avoid overusing this feature to prevent increased cognitive load on
+ users.
+
+
+ Limit expandable content: use expandable rows sparingly to avoid overwhelming users,
+ ensuring that only essential supplementary information is included.
+
+
+ Scrolling: the datagrid supports both horizontal and vertical scrolling to handle extensive
+ data sets, ensuring all rows and columns are accessible without cluttering the UI. While the component
+ supports scrolling, it is designed to prioritize displaying the most essential data upfront, minimizing the
+ need for scrolling to reduce potential user confusion and enhance accessibility.
+
+
+
+ ),
+ },
+];
+
+const DataGridOverviewPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default DataGridOverviewPage;
diff --git a/apps/website/screens/components/data-grid/overview/images/datagrid-anatomy.png b/apps/website/screens/components/data-grid/overview/images/datagrid-anatomy.png
new file mode 100644
index 0000000000..55b7b5a115
Binary files /dev/null and b/apps/website/screens/components/data-grid/overview/images/datagrid-anatomy.png differ
diff --git a/apps/website/screens/components/data-grid/overview/images/datagrid_fullWidth.png b/apps/website/screens/components/data-grid/overview/images/datagrid_fullWidth.png
new file mode 100644
index 0000000000..72bf10bad6
Binary files /dev/null and b/apps/website/screens/components/data-grid/overview/images/datagrid_fullWidth.png differ
diff --git a/apps/website/screens/components/data-grid/overview/images/datagrid_reduced.png b/apps/website/screens/components/data-grid/overview/images/datagrid_reduced.png
new file mode 100644
index 0000000000..b29a2a6d05
Binary files /dev/null and b/apps/website/screens/components/data-grid/overview/images/datagrid_reduced.png differ
diff --git a/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx b/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx
deleted file mode 100644
index 9e85b4dbc4..0000000000
--- a/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx
+++ /dev/null
@@ -1,576 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcTable, 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 DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-
-const sections = [
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WAI-ARIA",
- content: (
- <>
-
-
- WAI-ARIA authoring practices -{" "}
-
- Data Grid Examples
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const DataGridSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DataGridSpecsPage;
diff --git a/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx b/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx
deleted file mode 100644
index 448d641343..0000000000
--- a/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx
+++ /dev/null
@@ -1,247 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import expandedContent from "./examples/expandedContent";
-import selectable from "./examples/selectable";
-import filterable from "./examples/filterable";
-import draggable from "./examples/draggable";
-
-const sections = [
- {
- title: "Overview",
- content: (
-
- The Datagrid component offers a robust solution for displaying and managing tabular data. It supports essential
- features such as sorting and filtering, allowing users to organize and refine data easily. With multi-selection
- capabilities, users can perform bulk actions like deleting or exporting records efficiently. The component also
- includes in-line editing for quick data modifications directly within the grid, and expandable rows for
- showcasing additional details without cluttering the main view. Additionally, users can reorder columns to
- customize their data layout, ensuring an intuitive and flexible user experience tailored to their specific
- needs.
-
- ),
- },
- {
- title: "Key interactions and features",
- subSections: [
- {
- title: "Row selection",
- content: (
- <>
-
- Users can select one or multiple rows for bulk actions.
-
- Row selection can persist across pages when pagination is used in the Datagrid, ensuring users can
- perform bulk actions on rows even if they navigate away from the current view.
-
-
- Users can set a default selected row on initial load, useful for pre-populating forms or automatically
- highlighting the most relevant data for their specific use case.
-
-
- Users can easily undo multiple selections at once using the select/deselect all feature located in the
- Datagrid’s header, streamlining bulk actions.
-
-
-
- ),
- subSections: [
- {
- title: "Example",
- content: ,
- },
- ],
- },
- {
- title: "Sorting and filtering",
- content: (
- <>
-
-
- Users can apply sorting to multiple columns simultaneously, enabling more complex data analysis by
- arranging data based on different criteria.
-
-
- Filtering in our Datagrid is enabled through integrated Halstack components, such as Dropdowns, and is
- applied at the row level for precise data refinement.
-
-
-
- ),
- subSections: [
- {
- title: "Example",
- content: ,
- },
- ],
- },
- {
- title: "In-line editing",
- content: (
- <>
-
-
- Users can modify data directly within the grid cells, allowing for quick and intuitive updates without
- navigating away from the grid. This feature is particularly valuable for large datasets, where edits
- need to be made directly within the data source for efficiency and real-time updates.
-
-
- Changes made through in-line editing are immediately reflected in the Datagrid, giving users real-time
- feedback on their edits.
-
-
- Additionally, when editing permissions are required, the Datagrid can be configured with other Halstack
- components, such as the Button, to enable editing only after the button is activated.
-
-
-
- ),
- },
- {
- title: "Expandable rows",
- content: (
- <>
-
-
- The Datagrid component allows users to reveal additional information for specific rows without
- cluttering the main view. This optimizes space efficiency and improves user experience by offering
- access to in-depth information when needed, all while maintaining a clean and organized grid layout.
-
-
- The expanded area can display various content types, such as additional data fields, images, or action
- buttons, enhancing the data presentation.
-
-
-
- ),
- subSections: [
- {
- title: "Example",
- content: ,
- },
- ],
- },
- {
- title: "Column reordering",
- content: (
- <>
-
-
- The re-ordering feature of our Datagrid allows users to rearrange columns according to their preferences
- by dragging and dropping them, enhancing the personalized data viewing experience.
-
-
- By letting users prioritize the most relevant columns, this feature helps them access and analyze data
- more efficiently. It is also designed to be user-friendly, enabling quick adjustments with minimal
- effort.
-
-
- As users drag columns, visual indicators guide them, making it clear where the column will be placed
- when dropped.
-
-
-
- ),
- subSections: [
- {
- title: "Example",
- content: ,
- },
- ],
- },
- ],
- },
- {
- title: "Best practices",
- content: (
- <>
-
-
- Data contextualization: provide context within the grid by labeling columns clearly,
- ensuring users understand the significance of the data they are viewing.
-
-
- Column alignment: although data can be aligned in columns however the user chooses, it must
- be aligned consistently across columns to enhance readability:
-
-
- Text: aligned to the left for natural reading flow.
-
-
- Numbers and currencies: align numbers, currencies, and other quantitative data to the
- right for clear comparison, especially when dealing with decimals or aligning figures by their numerical
- place value.
-
-
- Dates and times: aligned to the left for readability, as users generally read these
- like text, but consider right-aligning if dates need to be compared sequentially.
-
-
- Actions: align action buttons or interactive elements (such as "Edit" or "Delete") to
- the center or right, depending on layout consistency. Centering actions can make them more accessible
- and distinguishable from data fields.
-
-
- Booleans: align checkboxes or toggles to the center to visually separate them from text
- or data and create a clear, interactive area.
-
-
- Icons: aligned to the center or next to their corresponding text, with spacing, to
- maintain clarity and improve the user interface.
-
-
-
-
- Column sizing: make sure that columns are sized appropriately for the type of data they
- display (e.g. dates should not take up too much space, neither do numerical values, which must take only the
- minimal space it requires for them to be shown without truncation).
-
-
- Clear default sorting: Set a sensible default sorting order for columns to help users
- quickly access the most relevant data when they first interact with the grid.
-
-
- Clear filters option: when filtering data, include a button to clear all filters at once,
- allowing users to quickly reset their views and return to the unfiltered dataset.
-
-
- Accessible bulk actions: ensure that bulk actions, such as “Delete” or “Export,” are easily
- accessible once rows are selected, facilitating efficient data management. Consider also implementing
- confirmation prompts for bulk actions to prevent accidental data loss and ensure users are intentional with
- their actions.
-
-
- Use of expandable rows: use expandable rows to display additional information that isn’t
- crucial for immediate viewing, but avoid overusing this feature to prevent increased cognitive load on
- users.
-
-
- Limit expandable content: use expandable rows sparingly to avoid overwhelming users,
- ensuring that only essential supplementary information is included.
-
-
- Scrolling: the Datagrid supports both horizontal and vertical scrolling to handle extensive
- data sets, ensuring all rows and columns are accessible without cluttering the UI. While the component
- supports scrolling, it is designed to prioritize displaying the most essential data upfront, minimizing the
- need for scrolling to reduce potential user confusion and enhance accessibility.
-
-
-
- ),
- },
-];
-
-const DataGridUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DataGridUsagePage;
diff --git a/apps/website/screens/components/data-grid/usage/examples/draggable.ts b/apps/website/screens/components/data-grid/usage/examples/draggable.ts
deleted file mode 100644
index 6a9f52d69c..0000000000
--- a/apps/website/screens/components/data-grid/usage/examples/draggable.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const columns = [
- {
- key: "label",
- label: "Name",
- draggable: true,
- },
- {
- key: "id",
- label: "ID",
- draggable: true,
- },
- {
- key: "complete",
- label: "% Complete",
- draggable: true,
- alignment: "right",
- },
- ];
-
- const rows = [
- {
- label: "Task 1",
- id: "ID-1",
- complete: 46,
- },
- {
- label: "Task 2",
- id: "ID-2",
- complete: 51,
- },
- {
- label: "Task 3",
- id: "ID-3",
- complete: 40,
- },
- {
- label: "Task 4",
- id: "ID-4",
- complete: 10,
- },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts b/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts
deleted file mode 100644
index 7c7bdbb6a6..0000000000
--- a/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { DxcContainer, DxcDataGrid, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const columns = [
- {
- key: "id",
- label: "ID",
- },
- {
- key: "complete",
- label: "% Complete",
- alignment: "right",
- },
- ];
-
- const rows = [
- {
- id: "Row 1",
- complete: 46,
- expandedContent: "Expanded content"
- },
- {
- id: "Row 2",
- complete: 51,
- expandedContent:
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet vulputate augue, non cursus justo eleifend non.
- Nam ante erat, finibus at tincidunt ut, convallis sed tortor. Proin commodo vestibulum sagittis.
- Nunc elit lorem, lobortis quis est in, tempus feugiat velit. Donec commodo hendrerit augue non suscipit.
- Nam facilisis leo at est auctor, a faucibus diam lacinia.
- In finibus urna id felis dictum blandit.
- Praesent pharetra sapien ac purus fringilla, ac molestie metus ullamcorper.
- Phasellus aliquet lobortis bibendum. Fusce convallis nulla at mauris tincidunt hendrerit sed sit amet est.
- Fusce aliquam quam id efficitur convallis. Vivamus mattis ex in nisi aliquet, et volutpat nulla rhoncus.
- Integer dui mauris, fringilla eu vulputate vel, ullamcorper ut orci.
-
-
- In hac habitasse platea dictumst.
- Sed velit arcu, consectetur pharetra hendrerit id, convallis id erat.
- Quisque eu ante sed ligula blandit placerat ac vitae purus.
- Proin ullamcorper dapibus erat.
- Vestibulum hendrerit iaculis ipsum, sit amet aliquam enim ornare vitae.
- Nullam molestie malesuada cursus.
- Maecenas et blandit eros, at posuere urna.
- Ut enim neque, volutpat sit amet scelerisque id, hendrerit vitae mi.
- Morbi sit amet laoreet ante, eget gravida leo. Sed eu dolor at leo vestibulum imperdiet.
- Aenean fringilla lorem et condimentum sollicitudin.
-
- ,
- expandedContentHeight: 200
- },
- {
- id: "Row 3",
- complete: 40,
- },
- {
- id: "Row 4",
- complete: 10,
- },
-
- ];
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcContainer,
- DxcInset,
- DxcParagraph,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/usage/examples/filterable.ts b/apps/website/screens/components/data-grid/usage/examples/filterable.ts
deleted file mode 100644
index c9c1f1c19a..0000000000
--- a/apps/website/screens/components/data-grid/usage/examples/filterable.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { DxcDataGrid, DxcFlex, DxcInset, DxcSelect } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const columns = [
- {
- key: "id",
- label: "ID",
- },
- {
- key: "complete",
- label: "% Complete",
- alignment: "right",
- },
- ];
-
- const rows1 = [
- {
- id: "Row 1",
- complete: 46,
- },
- {
- id: "Row 2",
- complete: 51,
- },
- {
- id: "Row 3",
- complete: 40,
- },
- {
- id: "Row 4",
- complete: 10,
- },
- ];
-
- const rows2 = [
- {
- id: "Row 11",
- complete: 20,
- },
- {
- id: "Row 12",
- complete: 1,
- },
- {
- id: "Row 13",
- complete: 67,
- },
- {
- id: "Row 14",
- complete: 47,
- },
- ];
-
- const options = [
- { label: "Data set 1", value: "rows1" },
- { label: "Data set 2", value: "rows2" },
- ];
-
- const [rows, setRows]= useState(rows1);
- const onChange = ({ value }) => {
- value === "rows1" ? setRows(rows1) : setRows(rows2);
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcSelect,
- DxcInset,
- DxcFlex,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/data-grid/usage/examples/selectable.ts b/apps/website/screens/components/data-grid/usage/examples/selectable.ts
deleted file mode 100644
index a321c70447..0000000000
--- a/apps/website/screens/components/data-grid/usage/examples/selectable.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const columns = [
- {
- key: "id",
- label: "ID",
- },
- {
- key: "complete",
- label: "% Complete",
- alignment: "right",
- },
- ];
-
- const rows = [
- {
- id: "Row 1",
- complete: 46,
- },
- {
- id: "Row 2",
- complete: 51,
- },
- {
- id: "Row 3",
- complete: 40,
- },
- {
- id: "Row 4",
- complete: 10,
- },
- ];
-
- const [selectedRows, setSelectedRows] = useState(new Set([1, 2]));
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDataGrid,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/date-input/DateInputPageLayout.tsx b/apps/website/screens/components/date-input/DateInputPageLayout.tsx
index 2e72577cdf..1d36b3eba8 100644
--- a/apps/website/screens/components/date-input/DateInputPageLayout.tsx
+++ b/apps/website/screens/components/date-input/DateInputPageLayout.tsx
@@ -6,20 +6,17 @@ import { ReactNode } from "react";
const DateInputPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/date-input" },
- { label: "Usage", path: "/components/date-input/usage" },
- { label: "Specifications", path: "/components/date-input/specifications" },
+ { label: "Overview", path: "/components/date-input" },
+ { label: "Code", path: "/components/date-input/code" },
];
return (
-
+
-
+
-
- A date input is a user interface element where the user can type or select a date in a predefined format.
-
-
+ Date inputs enable users to type or select a date in a predefined format.
+
{children}
diff --git a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
index de5c5361df..6dc0c0d3a6 100644
--- a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
+++ b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
@@ -1,14 +1,12 @@
import { DxcFlex, DxcTable, DxcParagraph, DxcLink } 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 basicUsage from "./examples/basicUsage";
import errorHandling from "./examples/errorHandling";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -25,58 +23,73 @@ const sections = [
-
defaultValue
+
ariaLabel
string
-
Initial value of the input element, only when it is uncontrolled.
-
-
+
+ Specifies a string to be used as the name for the date input element when no label is
+ provided.
+
+
'Date input'
-
value
+
autocomplete
string
- Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
- internally by the component.
+ HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
+ provide automated assistance in filling out the input value. Its value must be one of all the possible
+ values of the HTML autocomplete attribute. See{" "}
+ MDN{" "}
+ for further information.
-
-
-
-
-
label
- string
+ 'off'
-
Text to be placed above the date input.
-
-
-
name
+
clearable
- string
+ boolean
+
+
If true, the date input will have an action to clear the entered value.
+
+ false
-
Name attribute of the input element.
-
-
-
helperText
+
defaultValue
string
-
Helper text to be placed above the date.
+
Initial value of the input element, only when it is uncontrolled.
-
-
placeholder
+
disabled
boolean
-
If true, the date format will appear as placeholder in the field.
+
If true, the component will be disabled.
false
+
+
error
+
+ string
+
+
+ If it is a defined value and also a truthy string, the component will change its appearance, showing the
+ error below the date input component. If the defined value is an empty string, it will reserve a space
+ below the component for a future error, but it would not change its look. In case of being undefined or
+ null, both the appearance and the space for the error message would not be modified.
+
+
-
+
format
@@ -93,52 +106,52 @@ const sections = [
-
clearable
-
- boolean
-
-
If true, the date input will have an action to clear the entered value.
+
helperText
- false
+ string
+
Helper text to be placed above the date.
+
-
-
disabled
-
- boolean
-
-
If true, the component will be disabled.
+
label
- false
+ string
+
Text to be placed above the date input.
+
-
-
optional
-
- boolean
-
+
margin
- If true, the date will be optional, showing the text '(Optional)' next to the label. Otherwise, the field
- will be considered required and an error will be passed as a parameter to the onBlur and{" "}
- onChange functions when it has not been filled.
+ 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
- false
+ 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.
+
-
-
readOnly
+
name
- boolean
+ string
+
Name attribute of the input element.
+
-
+
+
+
onBlur
- If true, the component will not be mutable, meaning the user can not edit the control. The date picker
- cannot be opened either. In addition, the clear action will not be displayed even if the flag is set to
- true.
+ {"(val: { value: string; error?: string; date?: Date }) => void"}
- false
+ This function will be called when the input element loses the focus. An object including the string value,
+ the error and the date value will be passed to this function. If the string value is a valid date,{" "}
+ error will be undefined. Also, if the string value is not a valid date, date{" "}
+ will be undefined.
- This function will be called when the input element loses the focus. An object including the string value,
- the error and the date value will be passed to this function. If the string value is a valid date,{" "}
- error will be undefined. Also, if the string value is not a valid date, date{" "}
- will be undefined.
+ If true, the date will be optional, showing the text '(Optional)' next to the label. Otherwise, the field
+ will be considered required and an error will be passed as a parameter to the onBlur and{" "}
+ onChange functions when it has not been filled.
+
+
+ false
-
-
-
error
+
placeholder
- string
+ boolean
+
If true, the date format will appear as placeholder in the field.
- If it is a defined value and also a truthy string, the component will change its appearance, showing the
- error below the date input component. If the defined value is an empty string, it will reserve a space
- below the component for a future error, but it would not change its look. In case of being undefined or
- null, both the appearance and the space for the error message would not be modified.
+ false
-
-
-
autocomplete
+
readOnly
- string
+ boolean
- HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
- provide automated assistance in filling out the input value. Its value must be one of all the possible
- values of the HTML autocomplete attribute. See{" "}
- MDN{" "}
- for further information.
+ If true, the component will not be mutable, meaning the user can not edit the control. The date picker
+ cannot be opened either. In addition, the clear action will not be displayed even if the flag is set to
+ true.
- 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.
+ {"React.Ref"}
+
Reference to the component.
-
@@ -229,23 +235,15 @@ const sections = [
-
ref
-
- {"React.Ref"}
-
-
Reference to the component.
-
-
-
-
-
ariaLabel
+
value
string
- Specifies a string to be used as the name for the date input element when no label is
- provided.
+ Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
+ internally by the component.
-
'Date input'
+
-
@@ -286,9 +284,7 @@ const sections = [
const DateInputCodePage = () => {
return (
-
-
-
+
);
diff --git a/apps/website/screens/components/date-input/code/examples/basicUsage.ts b/apps/website/screens/components/date-input/code/examples/basicUsage.ts
deleted file mode 100644
index 6cf60d99eb..0000000000
--- a/apps/website/screens/components/date-input/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DxcDateInput, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDateInput,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/date-input/code/examples/basicUsage.tsx b/apps/website/screens/components/date-input/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..4c8b15fc41
--- /dev/null
+++ b/apps/website/screens/components/date-input/code/examples/basicUsage.tsx
@@ -0,0 +1,16 @@
+import { DxcDateInput, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDateInput,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/date-input/code/examples/controlled.ts b/apps/website/screens/components/date-input/code/examples/controlled.ts
deleted file mode 100644
index dec302019f..0000000000
--- a/apps/website/screens/components/date-input/code/examples/controlled.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcDateInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const onChange = ({ value }) => {
- setValue(value);
- };
- const onBlur = ({ value }) => {
- setValue(value);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDateInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/date-input/code/examples/controlled.tsx b/apps/website/screens/components/date-input/code/examples/controlled.tsx
new file mode 100644
index 0000000000..a99c6cfd07
--- /dev/null
+++ b/apps/website/screens/components/date-input/code/examples/controlled.tsx
@@ -0,0 +1,34 @@
+import { DxcDateInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+ const onBlur = ({ value }) => {
+ setValue(value);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDateInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/date-input/code/examples/errorHandling.ts b/apps/website/screens/components/date-input/code/examples/errorHandling.ts
deleted file mode 100644
index 4657acc343..0000000000
--- a/apps/website/screens/components/date-input/code/examples/errorHandling.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { DxcDateInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const [error, setError] = useState("");
- const onChange = ({ value }) => {
- setValue(value);
- };
-
- const onBlur = ({ value, error }) => {
- setValue(value);
- setError(error);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDateInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/date-input/code/examples/errorHandling.tsx b/apps/website/screens/components/date-input/code/examples/errorHandling.tsx
new file mode 100644
index 0000000000..a2939a21ad
--- /dev/null
+++ b/apps/website/screens/components/date-input/code/examples/errorHandling.tsx
@@ -0,0 +1,39 @@
+import { DxcDateInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const [error, setError] = useState("");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+
+ const onBlur = ({ value, error }) => {
+ setValue(value);
+ setError(error);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDateInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/date-input/code/examples/uncontrolled.ts b/apps/website/screens/components/date-input/code/examples/uncontrolled.ts
deleted file mode 100644
index 675c30e9da..0000000000
--- a/apps/website/screens/components/date-input/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { DxcDateInput, DxcInset, DxcButton, DxcFlex } from "@dxc-technology/halstack-react";
-import { useRef } from "react";
-
-const code = `() => {
- const inputRef = useRef();
- const handleSubmit = () => {
- const input = inputRef.current.getElementsByTagName("input")[0];
- console.log(input.value);
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcDateInput,
- DxcInset,
- DxcFlex,
- DxcButton,
- useRef,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/date-input/code/examples/uncontrolled.tsx b/apps/website/screens/components/date-input/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..92b2cd2437
--- /dev/null
+++ b/apps/website/screens/components/date-input/code/examples/uncontrolled.tsx
@@ -0,0 +1,36 @@
+import { DxcDateInput, DxcInset, DxcButton, DxcFlex } from "@dxc-technology/halstack-react";
+import { useRef } from "react";
+
+const code = `() => {
+ const inputRef = useRef();
+ const handleSubmit = () => {
+ const input = inputRef.current.getElementsByTagName("input")[0];
+ console.log(input.value);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDateInput,
+ DxcInset,
+ DxcFlex,
+ DxcButton,
+ useRef,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx b/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx
new file mode 100644
index 0000000000..82a91f6955
--- /dev/null
+++ b/apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx
@@ -0,0 +1,287 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import anatomy from "./images/date_input-anatomy.png";
+import clearContent from "./images/date_input-clearcontent.png";
+import datePicker from "./images/date_input-datepicker.png";
+import Image from "@/common/Image";
+import Figure from "@/common/Figure";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Date inputs allow users to enter or select a specific date using a calendar picker or manual text entry.
+ Designed to support a wide range of use cases, from booking systems to form submissions, it ensures clarity and
+ consistency in date formats, helps prevent input errors, and adapts to different locale and accessibility
+ requirements. Its combination of manual input and guided selection provides flexibility while maintaining a
+ streamlined user experience.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label(Optional): a descriptive text that helps users understand what information
+ is expected in the input field. It should be clear, concise, and placed near the input for better
+ readability.
+
+
+ Optional indicator(Optional): a small indicator that signals the input field is
+ not mandatory. It helps users know they can leave the field empty without causing validation errors.
+
+
+ Date button: an interactive element inside the input field that triggers the date picker of
+ the component, where the user can select a date based on the day, month and year.
+
+
+ Clear action(Optional): a small button, usually represented by an "X" icon, that
+ allows users to clear the date selected or introduced quickly without manually deleting it.
+
+
+ Helper text(Optional): additional text placed below the input field that provides
+ guidance, examples, or explanations to assist users in filling out the field correctly.
+
+
+ Container: the visual wrapper around the input field that provides structure, ensures
+ accessibility, and helps differentiate the input from other UI elements.
+
+
+ Value: displays the selected or manually entered date in the input field, following the
+ specified format.
+
+
+
+ ),
+ },
+ {
+ title: "Form Inputs",
+ content: (
+ <>
+
+ Form inputs are essential UI elements that allow users to interact with digital products by{" "}
+ entering or selecting data. Choosing the right input type and structure is key to designing
+ efficient, user-friendly forms that support task completion and data accuracy.
+
+
+ A form input (also known as a form field) is used to capture user data. Common input types include text
+ fields, date pickers, number fields, radio buttons, checkboxes, toggles, and dropdowns. Forms should always
+ include a submission method, such as a submit button, link, or keyboard trigger, to complete the interaction.
+
+
+ ),
+ subSections: [
+ {
+ title: "Shared input characteristics",
+ content: (
+ <>
+
+ Although input fields vary in type and purpose, they often share a common set of features:
+
+
+
+ Placeholder: a short hint displayed inside the input field that describes its expected
+ value or purpose.
+
+
+ Helper text: additional information displayed below the field to guide the user in
+ providing the correct input.
+
+
+ Optional label: inputs that are not mandatory can be marked with an "Optional" tag to
+ set clear expectations.
+
+
+
+ ),
+ },
+ {
+ title: "Common input states",
+ content: (
+ <>
+ Most inputs can also present standard interactive or informative states:
+
+
+ Disabled: This state prevents users from interacting with the field. It's typically
+ used when a value is not applicable or editable under certain conditions or roles.
+
+
+ Error: When a user enters invalid or incomplete data, the input shows an error state,
+ often accompanied by a helpful message to guide corrections.
+
+
+ Read-only: The input is visible, focusable, and hoverable, but not editable. This is
+ ideal for fields with auto-calculated values. Unlike disabled fields, read-only inputs can still be
+ submitted with the form and are part of the form data.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Using date inputs",
+ content: (
+ <>
+
+ Date inputs are designed to help users provide valid, well-formatted dates with minimal friction. Unlike
+ standard text fields, they combine manual input with an interactive date picker, making them
+ ideal for scenarios like bookings, forms, or scheduling events. They are particularly useful for reducing
+ input errors and ensuring consistent formatting across different regions and use cases.
+
+
+ ),
+ subSections: [
+ {
+ title: "Clear action",
+ content: (
+ <>
+
+ As most of our form inputs, the date input includes a clear (close) icon that allows users to quickly
+ remove the selected or typed date with a single click. This is especially helpful when correcting mistakes
+ or resetting the field during form completion. The icon is only visible when a value is present, keeping
+ the interface clean and focused.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Date picker dialog",
+ content: (
+ <>
+
+ The component features a built-in date picker dialog that can be opened via the calendar icon. This dialog
+ allows users to select a date visually from a calendar, reducing the likelihood of
+ formatting errors. The picker includes navigational controls to switch between months and years, ensuring
+ users can easily access both past and future dates.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Internationalization",
+ content: (
+
+ Our date input supports internationalization by adapting to locale-specific formats (e.g.,
+ DD/MM/YYYY vs. MM/DD/YYYY) and calendar language. This ensures that users across different regions
+ understand the input format and interact with the component comfortably. It's especially important to align
+ the expected format with the user's regional settings or provide format guidance with placeholders and
+ helper text.
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ subSections: [
+ {
+ title: "General",
+ content: (
+
+
+ Always use the date input when a valid date format is required. This helps ensure consistency and prevents
+ user error.
+
+
+ Display date formats clearly and consistently across your application, especially if users from multiple
+ locales are expected.
+
+
+ Include a clear label that describes the context or purpose of the date (e.g., "Date of birth" or "Start
+ date").
+
+
+ Avoid setting default dates unless the context explicitly calls for it, such as pre-filling today's date
+ for quick scheduling.
+
+
+ ),
+ },
+ {
+ title: "Formatting and validation",
+ content: (
+
+
+ Match the date format to the user's regional settings (DD/MM/YYYY or MM/DD/YYYY), and consider using
+ placeholder text to guide formatting.
+
+
+ Provide clear feedback if the user types an invalid date manually.
+
+
+ Avoid using text inputs with custom formatting masks in place of the date input component — this can
+ confuse users and complicate validation.
+
+
+ ),
+ },
+ {
+ title: "Clear action",
+ content: (
+
+
+ Use the clear (close) icon to let users easily remove an already selected date. This improves usability
+ for forms where the date might not be required.
+
+
+ Ensure the clear icon is only visible when a value is present, keeping the interface clean.
+
+
+ ),
+ },
+ {
+ title: "Date picker dialog",
+ content: (
+
+
+ Include the date picker to reduce formatting errors and speed up date selection, especially for less
+ tech-savvy users or on mobile.
+
+
+ For workflows that involve selecting a wide range of dates (e.g., historical records), make sure the date
+ picker supports quick navigation between months and years.
+
+
+ ),
+ },
+ {
+ title: "Accessibility and internationalization",
+ content: (
+
+
+ Support multiple locales to accommodate different date formats and calendar languages, and update labels
+ accordingly.
+
+
+ Use ISO 8601 format internally (YYYY-MM-DD) to prevent errors during submission or back-end processing.
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const DateInputOverviewPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default DateInputOverviewPage;
diff --git a/apps/website/screens/components/date-input/overview/images/date_input-anatomy.png b/apps/website/screens/components/date-input/overview/images/date_input-anatomy.png
new file mode 100644
index 0000000000..ef421a65e7
Binary files /dev/null and b/apps/website/screens/components/date-input/overview/images/date_input-anatomy.png differ
diff --git a/apps/website/screens/components/date-input/overview/images/date_input-clearcontent.png b/apps/website/screens/components/date-input/overview/images/date_input-clearcontent.png
new file mode 100644
index 0000000000..7391ca16de
Binary files /dev/null and b/apps/website/screens/components/date-input/overview/images/date_input-clearcontent.png differ
diff --git a/apps/website/screens/components/date-input/overview/images/date_input-datepicker.png b/apps/website/screens/components/date-input/overview/images/date_input-datepicker.png
new file mode 100644
index 0000000000..d618ee1d5e
Binary files /dev/null and b/apps/website/screens/components/date-input/overview/images/date_input-datepicker.png differ
diff --git a/apps/website/screens/components/date-input/specs/DateInputSpecsPage.tsx b/apps/website/screens/components/date-input/specs/DateInputSpecsPage.tsx
deleted file mode 100644
index 902509e233..0000000000
--- a/apps/website/screens/components/date-input/specs/DateInputSpecsPage.tsx
+++ /dev/null
@@ -1,525 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcTable, 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 DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import dateSpecsStates from "./images/input_date_states.png";
-import dateSpecsPopup from "./images/date_popup.png";
-import dateSpecsAnatomy from "./images/input_date_anatomy.png";
-import dateSpecs from "./images/input_date_specs.png";
-import datePopupSpecs from "./images/date_popup_specs.png";
-
-const sections = [
- {
- title: "Date input",
- content: (
- <>
-
-
-
-
- The date input color, typography, border, spacing,{" "}
- width and margin specifications are inherited from the text input, for reference
- check{" "}
-
- text input
- {" "}
- documentation .
-
-
- The date input doesn't have the following text input elements or properties, therefore, their listed
- styles don't apply:
-
-
- Prefix / Suffix
-
- The size small is not available
-
-
-
- ),
- },
- {
- title: "Date picker dialog",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- subSections: [
- {
- title: "Date input",
- content: (
- <>
-
- States: enabled, hover, focus, error,
- and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Date picker dialog",
- content: (
- <>
-
- States: default, hover, focus, active,{" "}
- selected, today and disabled.
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
-
- Helper text (Optional)
-
- Input container
- Date button
- Clear action
- Error indicator
- Error message
- Placeholder / value
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG 2.2",
- content: (
- <>
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.1.1: Keyboard
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.1.2: No keyboard trap
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.4.6: Headings and labels
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.4.7: Focus Visible
-
-
-
-
- ),
- },
- {
- title: "WAI-ARIA 1.2",
- content: (
-
-
- WAI-ARIA authoring practices 1.2 -{" "}
-
- 3.9 Dialog modal
-
-
-
- WAI-ARIA authoring practices 1.2 -{" "}
-
- Date picker design pattern
-
-
-
- ),
- },
- ],
- },
-];
-
-const DateInputSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DateInputSpecsPage;
diff --git a/apps/website/screens/components/date-input/specs/images/date_popup.png b/apps/website/screens/components/date-input/specs/images/date_popup.png
deleted file mode 100644
index 9142dac930..0000000000
Binary files a/apps/website/screens/components/date-input/specs/images/date_popup.png and /dev/null differ
diff --git a/apps/website/screens/components/date-input/specs/images/date_popup_specs.png b/apps/website/screens/components/date-input/specs/images/date_popup_specs.png
deleted file mode 100644
index 3d14a79060..0000000000
Binary files a/apps/website/screens/components/date-input/specs/images/date_popup_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/date-input/specs/images/input_date_anatomy.png b/apps/website/screens/components/date-input/specs/images/input_date_anatomy.png
deleted file mode 100644
index 223fd62ba0..0000000000
Binary files a/apps/website/screens/components/date-input/specs/images/input_date_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/date-input/specs/images/input_date_specs.png b/apps/website/screens/components/date-input/specs/images/input_date_specs.png
deleted file mode 100644
index a4933aae7a..0000000000
Binary files a/apps/website/screens/components/date-input/specs/images/input_date_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/date-input/specs/images/input_date_states.png b/apps/website/screens/components/date-input/specs/images/input_date_states.png
deleted file mode 100644
index f7c4d36d33..0000000000
Binary files a/apps/website/screens/components/date-input/specs/images/input_date_states.png and /dev/null differ
diff --git a/apps/website/screens/components/date-input/usage/DateInputUsagePage.tsx b/apps/website/screens/components/date-input/usage/DateInputUsagePage.tsx
deleted file mode 100644
index 2092df5cc2..0000000000
--- a/apps/website/screens/components/date-input/usage/DateInputUsagePage.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } 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";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- Use the date input component when asking for a past, present, or future date.
-
- Provide a hint with the date format expected in the placeholder.
- Use a concise label to indicate what the date selection refers to.
-
- ),
- },
-
- {
- title: "Internationalization",
- content: (
- <>
-
- The date format depends on an ISO definition for each country and the preference of use within the
- application.
-
-
- The format of the date may vary depending on language, region, country or customer. It is a good practice to
- give to the user some type of hint about the date format and in many cases.
-
-
-
- The default format for the United States is mm/dd/yyyy.
-
-
- The default format for Australia, Europe, Africa, South America most countries of Asia is{" "}
- dd/mm/yyyy.
-
-
- The default format in China is yyyy/mm/dd.
-
-
-
- ),
- },
-];
-
-const DateInputUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DateInputUsagePage;
diff --git a/apps/website/screens/components/dialog/DialogPageLayout.tsx b/apps/website/screens/components/dialog/DialogPageLayout.tsx
index ef53a736fb..2392605520 100644
--- a/apps/website/screens/components/dialog/DialogPageLayout.tsx
+++ b/apps/website/screens/components/dialog/DialogPageLayout.tsx
@@ -6,22 +6,20 @@ import { ReactNode } from "react";
const DialogPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/dialog" },
- { label: "Usage", path: "/components/dialog/usage" },
- { label: "Specifications", path: "/components/dialog/specifications" },
+ { label: "Overview", path: "/components/dialog" },
+ { label: "Code", path: "/components/dialog/code" },
];
return (
-
+
-
+
A modal dialog is a message box or child window that requires user interaction before returning to the
- parent window. These boxes appear on top of the open parent window that is currently displayed on the
- screen.
+ parent window.
-
+
{children}
diff --git a/apps/website/screens/components/dialog/code/DialogCodePage.tsx b/apps/website/screens/components/dialog/code/DialogCodePage.tsx
index 45f4e3bf50..dad1b764b7 100644
--- a/apps/website/screens/components/dialog/code/DialogCodePage.tsx
+++ b/apps/website/screens/components/dialog/code/DialogCodePage.tsx
@@ -1,13 +1,11 @@
import { DxcParagraph, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import withContent from "./examples/withContent";
import backgroundClick from "./examples/backgroundClick";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
const sections = [
@@ -24,6 +22,23 @@ const sections = [
+
+
+
+
+ children
+
+
+
+ React.ReactNode
+
+
+ Area within the dialog that can be used to render custom content. We strongly encourage users to not
+ change the tabindex of the inner components or elements. This can lead to unpredictable
+ behaviour for keyboard users, affecting the order of focus and focus locking within the dialog.
+
+
-
+
closable
@@ -35,23 +50,23 @@ const sections = [
-
onCloseClick
+
onBackgroundClick
{"() => void"}
- This function will be called when the user clicks the close button. The responsibility of hiding the
- dialog lies with the user.
+ This function will be called when the user clicks on the background of the modal. The responsibility of
+ hiding the dialog lies with the user.
-
-
onBackgroundClick
+
onCloseClick
{"() => void"}
- This function will be called when the on the background of the modal. The responsibility of hiding the
+ This function will be called when the user clicks the close button. The responsibility of hiding the
dialog lies with the user.
-
@@ -66,23 +81,6 @@ const sections = [
true
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
- Area within the dialog that can be used to render custom content. We strongly encourage users to not
- change the tabindex of the inner components or elements. This can lead to unpredictable
- behaviour for keyboard users, affecting the order of focus and focus locking within the dialog.
-
-
-
-
tabIndex
@@ -134,9 +132,7 @@ const sections = [
const DialogCodePage = () => {
return (
-
-
-
+
);
diff --git a/apps/website/screens/components/dialog/code/examples/backgroundClick.ts b/apps/website/screens/components/dialog/code/examples/backgroundClick.ts
deleted file mode 100644
index c3cc1e3e18..0000000000
--- a/apps/website/screens/components/dialog/code/examples/backgroundClick.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DxcDialog, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [isDialogVisible, setDialogVisible] = useState(false);
- const handleClick = () => {
- setDialogVisible(!isDialogVisible);
- };
-
- return (
-
-
- {isDialogVisible && (
-
-
- Please enter your personal information.
-
-
- )}
-
- );
-}`;
-
-const scope = {
- useState,
- DxcButton,
- DxcDialog,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/dialog/code/examples/backgroundClick.tsx b/apps/website/screens/components/dialog/code/examples/backgroundClick.tsx
new file mode 100644
index 0000000000..c425125163
--- /dev/null
+++ b/apps/website/screens/components/dialog/code/examples/backgroundClick.tsx
@@ -0,0 +1,32 @@
+import { DxcDialog, DxcButton, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [isDialogVisible, setDialogVisible] = useState(false);
+ const handleClick = () => {
+ setDialogVisible(!isDialogVisible);
+ };
+
+ return (
+
+
+ {isDialogVisible && (
+
+
+ Please enter your personal information.
+
+
+ )}
+
+ );
+}`;
+
+const scope = {
+ useState,
+ DxcButton,
+ DxcDialog,
+ DxcInset,
+ DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/dialog/code/examples/basicUsage.ts b/apps/website/screens/components/dialog/code/examples/basicUsage.ts
deleted file mode 100644
index 60ea21c3bc..0000000000
--- a/apps/website/screens/components/dialog/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DxcDialog, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [isDialogVisible, setDialogVisible] = useState(false);
- const handleClick = () => {
- setDialogVisible(!isDialogVisible);
- };
-
- return (
-
-
- {isDialogVisible && (
-
-
- Please enter your personal information.
-
-
- )}
-
- );
-}`;
-
-const scope = {
- useState,
- DxcButton,
- DxcDialog,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/dialog/code/examples/basicUsage.tsx b/apps/website/screens/components/dialog/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..86311975a6
--- /dev/null
+++ b/apps/website/screens/components/dialog/code/examples/basicUsage.tsx
@@ -0,0 +1,32 @@
+import { DxcDialog, DxcButton, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [isDialogVisible, setDialogVisible] = useState(false);
+ const handleClick = () => {
+ setDialogVisible(!isDialogVisible);
+ };
+
+ return (
+
+
+ {isDialogVisible && (
+
+
+ Please enter your personal information.
+
+
+ )}
+
+ );
+}`;
+
+const scope = {
+ useState,
+ DxcButton,
+ DxcDialog,
+ DxcInset,
+ DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/dialog/code/examples/withContent.ts b/apps/website/screens/components/dialog/code/examples/withContent.ts
deleted file mode 100644
index c002921d09..0000000000
--- a/apps/website/screens/components/dialog/code/examples/withContent.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
- DxcDialog,
- DxcButton,
- DxcTextInput,
- DxcInset,
- DxcFlex,
- DxcGrid,
- DxcHeading,
-} from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [isDialogVisible, setDialogVisible] = useState(false);
- const handleClick = () => {
- setDialogVisible(!isDialogVisible);
- };
- return (
-
-
- {isDialogVisible && (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
- );
-}`;
-
-const scope = {
- useState,
- DxcButton,
- DxcDialog,
- DxcTextInput,
- DxcInset,
- DxcFlex,
- DxcGrid,
- DxcHeading,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/dialog/code/examples/withContent.tsx b/apps/website/screens/components/dialog/code/examples/withContent.tsx
new file mode 100644
index 0000000000..b4e34f37b5
--- /dev/null
+++ b/apps/website/screens/components/dialog/code/examples/withContent.tsx
@@ -0,0 +1,55 @@
+import {
+ DxcDialog,
+ DxcButton,
+ DxcTextInput,
+ DxcInset,
+ DxcFlex,
+ DxcGrid,
+ DxcHeading,
+} from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [isDialogVisible, setDialogVisible] = useState(false);
+ const handleClick = () => {
+ setDialogVisible(!isDialogVisible);
+ };
+ return (
+
+
+ {isDialogVisible && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}`;
+
+const scope = {
+ useState,
+ DxcButton,
+ DxcDialog,
+ DxcTextInput,
+ DxcInset,
+ DxcFlex,
+ DxcGrid,
+ DxcHeading,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/dialog/overview/DialogOverviewPage.tsx b/apps/website/screens/components/dialog/overview/DialogOverviewPage.tsx
new file mode 100644
index 0000000000..a6a14ed54b
--- /dev/null
+++ b/apps/website/screens/components/dialog/overview/DialogOverviewPage.tsx
@@ -0,0 +1,148 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Figure from "@/common/Figure";
+import Image from "@/common/Image";
+import content from "./images/dialog_content.png";
+import overlay from "./images/dialog_overlay.png";
+import anatomy from "./images/dialog_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The dialog component is a modal window that{" "}
+ captures user attention for critical interactions, such as confirmations, alerts, or form
+ inputs. It appears above the main content and requires user action before continuing. To maintain usability,
+ dialogs should be concise, focused on a single task, and provide clear actions like confirmation or dismissal.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Title: displays the main heading of the dialog, providing users with a clear and immediate
+ understanding of its purpose
+
+
+ Container: the structural wrapper that holds all dialog elements, ensuring proper
+ alignment, spacing, and responsiveness.
+
+
+ Close action: an optional button, usually represented by an "X" icon, allowing users to
+ dismiss the dialog without completing an action.
+
+
+ Content: the main area where relevant information, messages, or interactive elements (e.g.,
+ forms) are displayed.
+
+
+ Actions: a set of buttons at the bottom of the dialog that guide users toward completing or
+ cancelling the intended action.
+
+
+
+
+ * Please note that while these elements are not included by default in the component's configuration, they
+ are the expected components in a dialog.
+
+
+
+ ),
+ },
+ {
+ title: "Placing content in a dialog",
+ content: (
+ <>
+
+
+
+
+ Any content (Halstack components or custom) can be placed inside the dialog component. Dialog tasks should be
+ direct and easy to complete. However, to ensure that the component is used as intended and to prevent it from
+ becoming unusable, please consider the following aspects:
+
+
+
+ Avoid placing complex or large amounts of data, as it will increase the cognitive load and
+ users will struggle when processing information.
+
+
+ As much as possible, avoid scrolling in a dialog, as it disrupts focus and usability,
+ especially for modal interactions that require immediate attention. It can also make critical actions harder
+ to access, forcing users to scroll to find the key information or buttons. Instead, keep dialogs concise or
+ consider alternative patterns to display the information.
+
+
+
+ ),
+ },
+ {
+ title: "Overlay in dialogs",
+ content: (
+ <>
+
+ The overlay element helps focus the user's attention on the dialog by creating a
+ semi-transparent layer between the main application and the modal content. This visual separation reduces
+ distractions, ensures the dialog stands out, and reinforces the need for user action before returning to the
+ underlying interface. Additionally, it enhances accessibility by preventing unintended interactions with
+ background elements.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Use dialogs for critical interactions: reserve dialogs for important decisions that require
+ user confirmation or input.
+
+
+ Ensure clarity: titles and messages should be direct, with clear descriptions of the
+ action's consequences.
+
+
+ Provide easy dismissal: always include a way to close the dialog, whether through a cancel
+ button or a close icon.
+
+
+ Maintain focus: keep the user's attention within the dialog by managing focus and
+ preventing background interactions.
+
+
+ Provide clear actions: use distinct primary and secondary buttons for confirmation and
+ cancellation.
+
+
+ Keep it focused: dialogs should be concise and address a single task to avoid overwhelming
+ users.
+
+
+ Avoid scrolling: keep content brief to prevent excessive scrolling; use alternative
+ patterns for complex interactions.
+
+
+
+ ),
+ },
+];
+
+const DialogOverviewPage = () => (
+
+
+
+
+);
+
+export default DialogOverviewPage;
diff --git a/apps/website/screens/components/dialog/overview/images/dialog_anatomy.png b/apps/website/screens/components/dialog/overview/images/dialog_anatomy.png
new file mode 100644
index 0000000000..1a8247ba7f
Binary files /dev/null and b/apps/website/screens/components/dialog/overview/images/dialog_anatomy.png differ
diff --git a/apps/website/screens/components/dialog/overview/images/dialog_content.png b/apps/website/screens/components/dialog/overview/images/dialog_content.png
new file mode 100644
index 0000000000..8d16455454
Binary files /dev/null and b/apps/website/screens/components/dialog/overview/images/dialog_content.png differ
diff --git a/apps/website/screens/components/dialog/overview/images/dialog_overlay.png b/apps/website/screens/components/dialog/overview/images/dialog_overlay.png
new file mode 100644
index 0000000000..66f5c47143
Binary files /dev/null and b/apps/website/screens/components/dialog/overview/images/dialog_overlay.png differ
diff --git a/apps/website/screens/components/dialog/specs/DialogSpecsPage.tsx b/apps/website/screens/components/dialog/specs/DialogSpecsPage.tsx
deleted file mode 100644
index 0ea5c60f56..0000000000
--- a/apps/website/screens/components/dialog/specs/DialogSpecsPage.tsx
+++ /dev/null
@@ -1,347 +0,0 @@
-import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import dialogAnatomyImage from "./images/dialog_anatomy.png";
-import dialogSpecsImage from "./images/dialog_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Dialog container
- Title
- Close action
- Dialog actions
- Content
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG",
- content: (
- <>
-
-
- Understanding WCAG 2.2 -{" "}
-
- 2.1.2 No Keyboard Trap
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 2.4.3 Focus Order
-
-
-
-
- ),
- },
- {
- title: "WAI-ARIA",
- content: (
-
-
- WAI-ARIA Authoring practices 1.2 -{" "}
-
- 3.9 Dialog (Modal)
-
-
-
- WAI-ARIA Authoring practices 1.2 -{" "}
-
- Modal Dialog Example
-
-
-
- ),
- },
- ],
- },
-];
-
-const DialogSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DialogSpecsPage;
diff --git a/apps/website/screens/components/dialog/specs/images/dialog_anatomy.png b/apps/website/screens/components/dialog/specs/images/dialog_anatomy.png
deleted file mode 100644
index 36b882bece..0000000000
Binary files a/apps/website/screens/components/dialog/specs/images/dialog_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/dialog/specs/images/dialog_specs.png b/apps/website/screens/components/dialog/specs/images/dialog_specs.png
deleted file mode 100644
index 10b0bbc67f..0000000000
Binary files a/apps/website/screens/components/dialog/specs/images/dialog_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/dialog/usage/DialogUsagePage.tsx b/apps/website/screens/components/dialog/usage/DialogUsagePage.tsx
deleted file mode 100644
index 451c1b38d2..0000000000
--- a/apps/website/screens/components/dialog/usage/DialogUsagePage.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import dialogContent from "./images/dialog_content.png";
-import dialogOverlay from "./images/dialog_overlay.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- The dialog always should have a title to introduce the actions or information that will get displayed on the
- screen.
-
-
- Can contain a descriptive text or a phrase related to the action that triggered the dialog.
-
-
- Can have some combinations of actions, like buttons to accept/cancel the action. There can be one, two or more
- buttons.
-
-
- If the dialog is not including a cancel action, provide a way to close it.
-
-
- Modal dialog boxes should overlay only a portion of the underlying page to keep the user oriented within the
- workflow.
-
-
- In a dialog, the focus should remain within the modal box until the user completes the required action (if
- any) or closes it. In addition, and as a general rule, the focus should appear on the first focusable child
- when the dialog is opened.
-
-
- ),
- },
-
- {
- title: "Content",
- content: (
- <>
-
-
-
-
- Any content (Halstack components or custom) can be placed inside the dialog component. Dialog tasks should be
- direct and easy to complete.
-
-
- Do not use to display complex or large amounts of data.
- Do not recreate a full app or page in a dialog.
- Try always to avoid scrolling.
-
-
- ),
- },
- {
- title: "Overlay",
- content: (
- <>
-
-
-
-
- The overlay element makes possible to get the user attention into the dialog creating a layer between the
- actual application and the modal information shown in the user interface.
-
-
- ),
- },
-];
-
-const DialogUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DialogUsagePage;
diff --git a/apps/website/screens/components/dialog/usage/images/dialog_content.png b/apps/website/screens/components/dialog/usage/images/dialog_content.png
deleted file mode 100644
index 70d24206a0..0000000000
Binary files a/apps/website/screens/components/dialog/usage/images/dialog_content.png and /dev/null differ
diff --git a/apps/website/screens/components/dialog/usage/images/dialog_overlay.png b/apps/website/screens/components/dialog/usage/images/dialog_overlay.png
deleted file mode 100644
index c2cf8075a5..0000000000
Binary files a/apps/website/screens/components/dialog/usage/images/dialog_overlay.png and /dev/null differ
diff --git a/apps/website/screens/components/divider/DividerPageLayout.tsx b/apps/website/screens/components/divider/DividerPageLayout.tsx
index a51ed8d4ec..4abfd9d089 100644
--- a/apps/website/screens/components/divider/DividerPageLayout.tsx
+++ b/apps/website/screens/components/divider/DividerPageLayout.tsx
@@ -6,20 +6,19 @@ import { ReactNode } from "react";
const DividerPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/divider" },
- { label: "Usage", path: "/components/divider/usage" },
- { label: "Specifications", path: "/components/divider/specifications" },
+ { label: "Overview", path: "/components/divider" },
+ { label: "Code", path: "/components/divider/code" },
];
return (
-
+
-
+
A divider is a thin line that visually separates groups of content within a specific area of an application.
-
+
{children}
diff --git a/apps/website/screens/components/divider/code/DividerCodePage.tsx b/apps/website/screens/components/divider/code/DividerCodePage.tsx
index 587b845e45..8c23eac885 100644
--- a/apps/website/screens/components/divider/code/DividerCodePage.tsx
+++ b/apps/website/screens/components/divider/code/DividerCodePage.tsx
@@ -1,8 +1,7 @@
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 { TableCode } from "@/common/Code";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import vertical from "./examples/vertical";
@@ -22,46 +21,46 @@ const sections = [
The divider can be showed in horizontal or vertical.
+
Modifies the color of the divider.
- 'horizontal'
+ 'mediumGrey'
-
weight
+
decorative
- 'regular' | 'strong'
+ boolean
-
Modifies the thickness of the divider.
- 'regular'
+ 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.
+
The divider can be showed in horizontal or vertical.
- 'mediumGrey'
+ 'horizontal'
-
decorative
-
- boolean
-
+
weight
- 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.
+ 'regular' | 'strong'
+
Modifies the thickness of the divider.
- true
+ 'regular'
@@ -83,15 +82,11 @@ const sections = [
},
];
-const DividerCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const DividerCodePage = () => (
+
+
+
+
+);
export default DividerCodePage;
diff --git a/apps/website/screens/components/divider/code/examples/basicUsage.ts b/apps/website/screens/components/divider/code/examples/basicUsage.ts
deleted file mode 100644
index f7a84e0c61..0000000000
--- a/apps/website/screens/components/divider/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DxcDivider, DxcFlex, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
-const code = `() => {
- return (
-
-
-
- Lorem i psum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-
-
-
- Lorem i psum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-
-
-
- );
- }`;
-
-const scope = {
- DxcDivider,
- DxcFlex,
- DxcInset,
- DxcParagraph,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/divider/code/examples/basicUsage.tsx b/apps/website/screens/components/divider/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..637158188a
--- /dev/null
+++ b/apps/website/screens/components/divider/code/examples/basicUsage.tsx
@@ -0,0 +1,27 @@
+import { DxcDivider, DxcFlex, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+const code = `() => {
+ return (
+
+
+
+ Lorem i psum dolor sit amet, consectetur adipiscing elit.
+ Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+
+
+
+ Lorem i psum dolor sit amet, consectetur adipiscing elit.
+ Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+
+
+
+ );
+ }`;
+
+const scope = {
+ DxcDivider,
+ DxcFlex,
+ DxcInset,
+ DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/divider/code/examples/vertical.ts b/apps/website/screens/components/divider/code/examples/vertical.ts
deleted file mode 100644
index 01b9b806c2..0000000000
--- a/apps/website/screens/components/divider/code/examples/vertical.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DxcDivider, DxcFlex, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
-const code = `() => {
- return (
-
-
-
- Lorem i psum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-
-
-
- Lorem i psum dolor sit amet, consectetur adipiscing elit.
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-
-
-
- );
- }`;
-
-const scope = {
- DxcDivider,
- DxcFlex,
- DxcInset,
- DxcParagraph,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/divider/code/examples/vertical.tsx b/apps/website/screens/components/divider/code/examples/vertical.tsx
new file mode 100644
index 0000000000..db1272bbd1
--- /dev/null
+++ b/apps/website/screens/components/divider/code/examples/vertical.tsx
@@ -0,0 +1,27 @@
+import { DxcDivider, DxcFlex, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+const code = `() => {
+ return (
+
+
+
+ Lorem i psum dolor sit amet, consectetur adipiscing elit.
+ Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+
+
+
+ Lorem i psum dolor sit amet, consectetur adipiscing elit.
+ Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
+
+
+
+ );
+ }`;
+
+const scope = {
+ DxcDivider,
+ DxcFlex,
+ DxcInset,
+ DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx
new file mode 100644
index 0000000000..e1dc0594da
--- /dev/null
+++ b/apps/website/screens/components/divider/overview/DividerOverviewPage.tsx
@@ -0,0 +1,117 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Image from "@/common/Image";
+import anatomy from "./images/divider_anatomy.png";
+import weight from "./images/divider_weight.png";
+import color from "./images/divider_color.png";
+import orientation from "./images/divider_orientation.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The divider component is a simple yet effective element for visually separating content within an interface. It
+ helps improve readability and organization by creating clear distinctions between sections or groups of
+ information. Our divider also has different weights and colors, allowing it to structure different layouts,
+ enhance hierarchy, and guide users through content seamlessly without adding visual clutter.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Divider: a thin, horizontal or vertical rule that visually separates content sections.
+
+
+
+ ),
+ },
+ {
+ title: "Configuring a divider",
+ content: (
+ <>
+
+ Depending on the context in which it is used, the divider can have different weights, colors, and orientations
+ to better suit the content it separates.
+
+
+ ),
+ subSections: [
+ {
+ title: "Weight",
+ content: (
+ <>
+
+
+
+ Regular (1px of weight): ideal for subtle divisions within the same section,
+ maintaining a clean structure without being intrusive. It is used in layouts with related content or in
+ lists where a light separation is needed.
+
+
+ Divider (2px of weight): useful for creating a more noticeable separation between
+ sections or distinct content groups, reinforcing visual organization. It can be applied to significant
+ context changes within a page or as a separator for grouped information headers.
+
+
+
+ ),
+ },
+ {
+ title: "Color",
+ content: (
+ <>
+
+
+
+ Light: best suited for dark backgrounds, providing a subtle yet clear separation
+ without overwhelming the interface.
+
+
+ Medium: a balanced option that works well in most cases, offering a neutral and
+ adaptable separation that maintains readability.
+
+
+ Dark: ideal for light backgrounds or when a stronger visual distinction is needed to
+ emphasize section breaks.
+
+
+
+ ),
+ },
+ {
+ title: "Orientation",
+ content: (
+ <>
+
+
+
+ Horizontal: used to separate sections within a page, creating clear distinctions
+ between content blocks, lists, or form fields. It helps establish a visual flow and hierarchy.
+
+
+ Vertical: useful for dividing content side by side, such as in multi-column layouts,
+ toolbars, or menus. It helps guide the user's eye and structure information efficiently.
+
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const DividerOverviewPage = () => (
+
+
+
+
+);
+
+export default DividerOverviewPage;
diff --git a/apps/website/screens/components/divider/overview/images/divider_anatomy.png b/apps/website/screens/components/divider/overview/images/divider_anatomy.png
new file mode 100644
index 0000000000..22bc64977e
Binary files /dev/null and b/apps/website/screens/components/divider/overview/images/divider_anatomy.png differ
diff --git a/apps/website/screens/components/divider/overview/images/divider_color.png b/apps/website/screens/components/divider/overview/images/divider_color.png
new file mode 100644
index 0000000000..0445c7ff05
Binary files /dev/null and b/apps/website/screens/components/divider/overview/images/divider_color.png differ
diff --git a/apps/website/screens/components/divider/overview/images/divider_orientation.png b/apps/website/screens/components/divider/overview/images/divider_orientation.png
new file mode 100644
index 0000000000..245a3bd95c
Binary files /dev/null and b/apps/website/screens/components/divider/overview/images/divider_orientation.png differ
diff --git a/apps/website/screens/components/divider/overview/images/divider_weight.png b/apps/website/screens/components/divider/overview/images/divider_weight.png
new file mode 100644
index 0000000000..9d4a991f80
Binary files /dev/null and b/apps/website/screens/components/divider/overview/images/divider_weight.png differ
diff --git a/apps/website/screens/components/divider/specs/DividerSpecsPage.tsx b/apps/website/screens/components/divider/specs/DividerSpecsPage.tsx
deleted file mode 100644
index 6358848107..0000000000
--- a/apps/website/screens/components/divider/specs/DividerSpecsPage.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import orientationSpecs from "./images/divider_orientation.png";
-import colorsSpecs from "./images/divider_colors.png";
-import weightSpecs from "./images/divider_weight.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
-
-
-
-
-
-
- ),
- },
- {
- title: "Design tokens",
- content: (
- <>
- This component currently has no design tokens.
-
- ),
- },
-];
-
-const DividerSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DividerSpecsPage;
diff --git a/apps/website/screens/components/divider/specs/images/divider_colors.png b/apps/website/screens/components/divider/specs/images/divider_colors.png
deleted file mode 100644
index 17afceffd4..0000000000
Binary files a/apps/website/screens/components/divider/specs/images/divider_colors.png and /dev/null differ
diff --git a/apps/website/screens/components/divider/specs/images/divider_orientation.png b/apps/website/screens/components/divider/specs/images/divider_orientation.png
deleted file mode 100644
index 369bab514f..0000000000
Binary files a/apps/website/screens/components/divider/specs/images/divider_orientation.png and /dev/null differ
diff --git a/apps/website/screens/components/divider/specs/images/divider_weight.png b/apps/website/screens/components/divider/specs/images/divider_weight.png
deleted file mode 100644
index c86271dada..0000000000
Binary files a/apps/website/screens/components/divider/specs/images/divider_weight.png and /dev/null differ
diff --git a/apps/website/screens/components/divider/usage/DividerUsagePage.tsx b/apps/website/screens/components/divider/usage/DividerUsagePage.tsx
deleted file mode 100644
index 2f3bcd27e6..0000000000
--- a/apps/website/screens/components/divider/usage/DividerUsagePage.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- Use dividers to separate content into distinct groups.
-
- A divider should be visibly noticeable enough to divide a section but should not be so distinct that it
- attracts attention away from the content.
-
- Use dividers to create groups, not individual items.
-
- Apply the use of dividers in the right context. Determine when it is appropriate to use white space and when
- it is better to use a divider to separate content.
-
-
- ),
- },
-];
-
-const DividerUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DividerUsagePage;
diff --git a/apps/website/screens/components/dropdown/DropdownPageLayout.tsx b/apps/website/screens/components/dropdown/DropdownPageLayout.tsx
index 2c62cf8ee1..24681e5e1a 100644
--- a/apps/website/screens/components/dropdown/DropdownPageLayout.tsx
+++ b/apps/website/screens/components/dropdown/DropdownPageLayout.tsx
@@ -6,23 +6,20 @@ import { ReactNode } from "react";
const DropdownPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/dropdown" },
- { label: "Usage", path: "/components/dropdown/usage" },
- { label: "Specifications", path: "/components/dropdown/specifications" },
+ { label: "Overview", path: "/components/dropdown" },
+ { label: "Code", path: "/components/dropdown/code" },
];
return (
-
+
-
+
- The use of dropdowns has its advantages but it depends on the screen support. Dropdowns are a standard
- widget, so the users know how to interact with them. The options available in a dropdown component are
- static, preventing erroneous data entered by the user since it only shows a range of correct values for that
- input.
+ The dropdown component is a compact, interactive element that allows users to select from a list of options,
+ reducing clutter in the interface.
-
+
{children}
diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx
index 02163b429c..b6fc5a5c9a 100644
--- a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx
+++ b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx
@@ -1,12 +1,10 @@
import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Code from "@/common/Code";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import icons from "./examples/icons";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
const sections = [
@@ -25,49 +23,33 @@ const sections = [
+
caretHidden
-
-
- options
-
+ boolean
+
Whether the arrow next to the label must be displayed or not.
- An array of objects representing the options. Each object has the following properties:
-
-
- label: Option display value.
-
-
- icon:{" "}
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be placed next to the option label. When using Material
- Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled
- prefix the symbol name with "filled_".
-
-
- value: Option inner value.
-
-
+ boolean
+
+
If true, the component will be disabled.
+
+ false
-
-
-
optionsIconPosition
+
expandOnHover
- 'before' | 'after'
+ boolean
-
In case options include icons, whether the icon should appear after or before the label.
+
If true, the options are shown when the dropdown is hovered.
Whether the arrow next to the label must be displayed or not.
- false
+ 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.
+
-
-
disabled
-
- boolean
-
-
If true, the component will be disabled.
- false
+
+
+ onSelectOption
+
-
-
-
expandOnHover
- boolean
+ {"(value: string) => void"}
-
If true, the options are shown when the dropdown is hovered.
- false
+ This function will be called every time the selection changes. The value of the selected option will be
+ passed as a parameter.
- This function will be called every time the selection changes. The value of the selected option will be
- passed as a parameter.
+ An array of objects representing the options. Each object has the following properties:
+
+
+ label: Option display value.
+
+
+ icon:{" "}
+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be placed next to the option label. When using Material
+ Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled
+ prefix the symbol name with "filled_".
+
In case options include icons, whether the icon should appear after or before the label.
- 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.
+ 'before'
-
-
size
@@ -223,15 +221,11 @@ const sections = [
},
];
-const DropdownCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const DropdownCodePage = () => (
+
+
+
+
+);
export default DropdownCodePage;
diff --git a/apps/website/screens/components/dropdown/code/examples/basicUsage.ts b/apps/website/screens/components/dropdown/code/examples/basicUsage.ts
deleted file mode 100644
index dea47116e4..0000000000
--- a/apps/website/screens/components/dropdown/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DxcDropdown, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const selectOption = (value) => {
- console.log(value);
- };
- const options = [
- {
- value: 1,
- label: "Android",
- },
- {
- value: 2,
- label: "Windows",
- },
- {
- value: 3,
- label: "IOS",
- },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDropdown,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/dropdown/code/examples/basicUsage.tsx b/apps/website/screens/components/dropdown/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..f774cda510
--- /dev/null
+++ b/apps/website/screens/components/dropdown/code/examples/basicUsage.tsx
@@ -0,0 +1,38 @@
+import { DxcDropdown, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const selectOption = (value) => {
+ console.log(value);
+ };
+ const options = [
+ {
+ value: 1,
+ label: "Android",
+ },
+ {
+ value: 2,
+ label: "Windows",
+ },
+ {
+ value: 3,
+ label: "IOS",
+ },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDropdown,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/dropdown/code/examples/icons.ts b/apps/website/screens/components/dropdown/code/examples/icons.ts
deleted file mode 100644
index 2709ffba12..0000000000
--- a/apps/website/screens/components/dropdown/code/examples/icons.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { DxcDropdown, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const selectOption = (value) => {
- console.log(value);
- };
- const options = [
- {
- value: 1,
- label: "Android",
- icon: "filled_phone_android",
- },
- {
- value: 2,
- label: "Windows",
- icon: "desktop_windows",
- },
- {
- value: 3,
- label: "IOS",
- icon: "filled_phone_iphone",
- },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcDropdown,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/dropdown/code/examples/icons.tsx b/apps/website/screens/components/dropdown/code/examples/icons.tsx
new file mode 100644
index 0000000000..938c6de8bc
--- /dev/null
+++ b/apps/website/screens/components/dropdown/code/examples/icons.tsx
@@ -0,0 +1,42 @@
+import { DxcDropdown, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const selectOption = (value) => {
+ console.log(value);
+ };
+ const options = [
+ {
+ value: 1,
+ label: "Android",
+ icon: "filled_phone_android",
+ },
+ {
+ value: 2,
+ label: "Windows",
+ icon: "desktop_windows",
+ },
+ {
+ value: 3,
+ label: "IOS",
+ icon: "filled_phone_iphone",
+ },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDropdown,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx
new file mode 100644
index 0000000000..ff2bfba1de
--- /dev/null
+++ b/apps/website/screens/components/dropdown/overview/DropdownOverviewPage.tsx
@@ -0,0 +1,146 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Example from "@/common/example/Example";
+import iconUsage from "./examples/iconUsage";
+import Image from "@/common/Image";
+import anatomy from "./images/dropdown_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The dropdown enhances usability by displaying a list of choices in a collapsible menu, optimizing space while
+ keeping options easily accessible. It supports icons, sections, and different selection behaviors to adapt to
+ various use cases. Designed for efficiency, it ensures keyboard navigation, accessibility, and proper contrast
+ for readability.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Dropdown: the main container that triggers the list of options when clicked, allowing users
+ to select an item.
+
+
+ Listbox: the expanded panel displaying all available options for selection.
+
+
+ Icon: a visual aid that can accompany the selected option, helping users quickly recognize
+ the category or purpose.
+
+
+ Label: the textual representation of the selected option, ensuring clarity in the user's
+ choice.
+
+
+ Expand/collapse icon: an indicator that shows whether the dropdown is expanded or
+ collapsed.
+
+
+ List item: an individual option within the dropdown list, which users can click to make a
+ selection.
+
+
+
+ ),
+ },
+ {
+ title: "Using dropdowns",
+ content: (
+ <>
+
+ Dropdowns have a similar look and behavior to select components, the difference is that while select is only
+ to collect user's data into a form, dropdown can be used in various scenarios.
+
+
+
+ Dropdowns display a list of options that appear when the user clicks or hovers over the parent element,
+ providing a compact and efficient way to make selections.
+
+
+ The arrow linked to the dropdown label indicates to the user that more options are available but currently
+ hidden.
+
+
+ By default, a dropdown expands below its main container if there is enough screen space to accommodate the
+ full size of the pop-up.
+
+
+
+ If displaying the dropdown below the selector hides important information, reducing discoverability and
+ scanability, consider alternative ways to present the content or adjust the pop-up's position to better fit
+ the application's needs.
+
+
+ ),
+ subSections: [
+ {
+ title: "Icon usage",
+ content: (
+ <>
+
+ Icons can be used within the dropdown component in various configurations. They can be placed before or
+ after the label or serve as the sole content of the dropdown placeholder and options. This maintains
+ consistency with other components in our Design System, such as buttons and selects, which follow the same
+ behavior.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ User clear and concise labels: ensure dropdown labels are descriptive and easily understood,
+ helping users quickly grasp their choices. Avoid vague terms like "Select an option."
+
+
+ Prioritize logical ordering: arrange options in a meaningful order — alphabetically for
+ lists, by frequency of use for common selections, or categorically when grouping similar items.
+
+
+ Keep the list of options manageable: avoid overwhelming users with too many options. If the
+ list is long, consider using grouped sections or an alternative selection method like autocomplete.
+
+
+ Ensure accessibility: provide sufficient contrast, keyboard navigation, and screen reader
+ support. Icons should always have accessible labels to maintain clarity.
+
+
+ Avoid nesting too deep: multi-level dropdowns can be hard to navigate. If multiple selection
+ levels are required, consider using a different component, like a sidebar or tree structure.
+
+
+ Be mindful of placement and screen space: ensure the dropdown appears in a location where it
+ doesn't obscure critical content. If needed, adjust its position dynamically to fit within the viewport.
+
+
+ Use icons thoughtfully: icons can enhance usability but should only be added when they add
+ clarity. Overloading the dropdown with icons can create visual clutter.
+
+
+ ),
+ },
+];
+
+const DropdownOverviewPage = () => (
+
+
+
+
+);
+
+export default DropdownOverviewPage;
diff --git a/apps/website/screens/components/dropdown/overview/examples/iconUsage.tsx b/apps/website/screens/components/dropdown/overview/examples/iconUsage.tsx
new file mode 100644
index 0000000000..b85156dfd7
--- /dev/null
+++ b/apps/website/screens/components/dropdown/overview/examples/iconUsage.tsx
@@ -0,0 +1,42 @@
+import { DxcDropdown, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+
+ const selectOption = (value) => {
+ console.log(value);
+ };
+ const options = [
+ {
+ value: 1,
+ label: "Option 1",
+ },
+ {
+ value: 2,
+ label: "Option 2",
+ },
+ {
+ value: 3,
+ label: "Option 3",
+ },
+ ];
+
+ return (
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcDropdown,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/dropdown/overview/images/dropdown_anatomy.png b/apps/website/screens/components/dropdown/overview/images/dropdown_anatomy.png
new file mode 100644
index 0000000000..d76d897b90
Binary files /dev/null and b/apps/website/screens/components/dropdown/overview/images/dropdown_anatomy.png differ
diff --git a/apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx b/apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx
deleted file mode 100644
index 563745d180..0000000000
--- a/apps/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx
+++ /dev/null
@@ -1,585 +0,0 @@
-import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import specsImage from "./images/dropdown_specs.png";
-import statesImage from "./images/dropdown_states.png";
-import optionListStatesImage from "./images/dropdown_option_list_states.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- subSections: [
- {
- title: "Dropdown button",
- content: (
- <>
-
- States: enabled, hover, focus, active{" "}
- and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Option list",
- content: (
- <>
-
- States: Enabled, hover, focus and{" "}
- selected.
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG 2.2",
- content: (
- <>
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 1.4.13: Content on Hover or Focus
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 3.2.2: On Input
-
-
-
-
- ),
- },
- {
- title: "WAI-ARIA 1.2",
- content: (
-
-
- WAI-ARIA Authoring Practices 1.2 -{" "}
-
- 3.16 Menu button
-
-
-
- ),
- },
- ],
- },
-];
-
-const DropdownSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DropdownSpecsPage;
diff --git a/apps/website/screens/components/dropdown/specs/images/dropdown_option_list_states.png b/apps/website/screens/components/dropdown/specs/images/dropdown_option_list_states.png
deleted file mode 100644
index c1adacf3f5..0000000000
Binary files a/apps/website/screens/components/dropdown/specs/images/dropdown_option_list_states.png and /dev/null differ
diff --git a/apps/website/screens/components/dropdown/specs/images/dropdown_specs.png b/apps/website/screens/components/dropdown/specs/images/dropdown_specs.png
deleted file mode 100644
index 4322b675e9..0000000000
Binary files a/apps/website/screens/components/dropdown/specs/images/dropdown_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/dropdown/specs/images/dropdown_states.png b/apps/website/screens/components/dropdown/specs/images/dropdown_states.png
deleted file mode 100644
index 3ab10031cc..0000000000
Binary files a/apps/website/screens/components/dropdown/specs/images/dropdown_states.png and /dev/null differ
diff --git a/apps/website/screens/components/dropdown/usage/DropdownUsagePage.tsx b/apps/website/screens/components/dropdown/usage/DropdownUsagePage.tsx
deleted file mode 100644
index f529e424c1..0000000000
--- a/apps/website/screens/components/dropdown/usage/DropdownUsagePage.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Example from "@/common/example/Example";
-import iconUsage from "./examples/iconUsage";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- Dropdowns have a similar look and behavior to select components, the difference is that while select is only
- to collect user's data into a form, dropdown can be used in a variety of scenarios.
-
-
-
- Dropdowns can be useful as a list of items that will be shown when the user clicks or hovers their main
- parent that will trigger the pop up with the options.
-
-
- An arrow linked with the label of the dropdown should be shown to indicate the user that more options are
- available but are currently hidden.
-
-
- By default, every dropdown will be extending underneath his main container if the space in the screen is
- enough to contain all the size declared for the pop-up.
-
-
-
- If there is a special case when the dropdown couldn't be displayed below the selector because it is hiding
- important information reducing discoverability and scanability in the website then consider using other
- options to display the information or customize the position of the pop-up to fitting the necessities of the
- application.
-
-
- ),
- },
- {
- title: "Icon usage",
- content: (
- <>
-
- It is allowed the use of icons within the dropdown component. There are several options of configuration, the
- icon can be placed before or after the label, also the icon can be the unique content of the dropdown
- placeholder and options, so the final goal of this is to keep consistency with the rest of the components of
- the Design System such as buttons or selects, that have the same behavior.
-
-
-
- ),
- },
- {
- title: "User Interface Design Considerations",
- content: (
-
-
- Consider the number of options (binary decisions or a few items) to decide to implement one component that
- represent in a better way the data, i.e. switch toggle.
-
-
- For a large number of well specified options, consider using an autocomplete field to filter the number of
- options while typing.
-
-
- Consider the input, might be that a text input would fit better than a dropdown.
-
-
- ),
- },
-];
-
-const DropdownUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default DropdownUsagePage;
diff --git a/apps/website/screens/components/dropdown/usage/examples/iconUsage.ts b/apps/website/screens/components/dropdown/usage/examples/iconUsage.ts
deleted file mode 100644
index b198a0f21f..0000000000
--- a/apps/website/screens/components/dropdown/usage/examples/iconUsage.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { DxcDropdown, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
-
- const selectOption = (value) => {
- console.log(value);
- };
- const options = [
- {
- value: 1,
- label: "Option 1",
- },
- {
- value: 2,
- label: "Option 2",
- },
- {
- value: 3,
- label: "Option 3",
- },
- ];
-
- return (
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcDropdown,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/dropdown/usage/images/dropdown_icon_usage.png b/apps/website/screens/components/dropdown/usage/images/dropdown_icon_usage.png
deleted file mode 100644
index 53c2a2541f..0000000000
Binary files a/apps/website/screens/components/dropdown/usage/images/dropdown_icon_usage.png and /dev/null differ
diff --git a/apps/website/screens/components/file-input/FileInputPageLayout.tsx b/apps/website/screens/components/file-input/FileInputPageLayout.tsx
index 01012df243..a5849abbbf 100644
--- a/apps/website/screens/components/file-input/FileInputPageLayout.tsx
+++ b/apps/website/screens/components/file-input/FileInputPageLayout.tsx
@@ -6,25 +6,20 @@ import { ReactNode } from "react";
const FileInputPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/file-input" },
- { label: "Usage", path: "/components/file-input/usage" },
- {
- label: "Specifications",
- path: "/components/file-input/specifications",
- },
+ { label: "Overview", path: "/components/file-input" },
+ { label: "Code", path: "/components/file-input/code" },
];
return (
-
+
-
+
- The file input component is used to choose files from any location in the local machine and update those
- files to the server where the application is hosted. It is a common procedure in applications where files
- are required, like documents, images, or other information in digital formats.
+ File inputs are used to allow users to upload one or more files from their local device to an application in
+ a structured and accessible way.
-
+
{children}
diff --git a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
index 17791fb21f..2a9cf2176d 100644
--- a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
+++ b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
@@ -1,14 +1,12 @@
import { DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import errorHandling from "./examples/errorHandling";
import formFileInput from "./examples/formFileInput";
import StatusBadge from "@/common/StatusBadge";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -25,31 +23,54 @@ const sections = [
-
mode
+
accept
- 'file' | 'filedrop' | 'dropzone'
+ string
-
Available modes of the component.
- 'file'
+ The file types that the component accepts. Its value must be one of all the possible values of the HTML
+ file input's accept attribute. Please check the documentation{" "}
+ here.
+ This function will be called when the user adds or deletes a file. That is, when the file input's inner
+ value is modified. The list of files will be sent as a parameter. In this function, the files can be
+ updated or returned as they come. These files must be passed to the value in order to be shown.
-
Text to be placed inside the button.
-
+
+
disabled
+
+ boolean
+
+
If true, the component will be disabled.
+
+ false
+
+
dropAreaLabel
@@ -67,25 +88,21 @@ const sections = [
-
-
accept
+
label
string
-
- The file types that the component accepts. Its value must be one of all the possible values of the HTML
- file input's accept attribute. Please check the documentation{" "}
- here.
-
- The minimum file size (in bytes) allowed. If the size of the file does not comply this value, the file
- will have an error.
+ 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.
- An array of files representing the selected files. Each file has the following properties:
-
-
- file: Selected file.
-
-
- error: Error of the file. If it is defined, it will be shown and the file item will be mark as
- invalid.
-
-
- preview: Preview of the file.
-
-
+ The minimum file size (in bytes) allowed. If the size of the file does not comply this value, the file
+ will have an error.
-
-
showPreview
-
- boolean
-
+
mode
- If true, if the file is an image, a preview of it will be shown. If not, an icon referring to the file
- type will be shown.
+ 'file' | 'filedrop' | 'dropzone'
+
Available modes of the component.
- false
+ 'file'
@@ -155,42 +153,40 @@ const sections = [
-
disabled
+
+
+
+ optional
+
+
boolean
-
If true, the component will be disabled.
+
If true, the input will be optional, showing '(Optional)' next to the label.
- This function will be called when the user adds or deletes a file. That is, when the file input's inner
- value is modified. The list of files will be sent as a parameter. In this function, the files can be
- updated or returned as they come. These files must be passed to the value in order to be shown.
+ {"React.Ref"}
- 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.
+ If true, if the file is an image, a preview of it will be shown. If not, an icon referring to the file
+ type will be shown.
+
+ An array of files representing the selected files. Each file has the following properties:
+
+
+ file: Selected file.
+
+
+ error: Error of the file. If it is defined, it will be shown and the file item will be mark as
+ invalid.
+
+
+ preview: Preview of the file.
+
+
-
Reference to the component.
-
@@ -238,9 +253,7 @@ const sections = [
const FileInputCodePage = () => {
return (
-
-
-
+
);
diff --git a/apps/website/screens/components/file-input/code/examples/basicUsage.ts b/apps/website/screens/components/file-input/code/examples/basicUsage.ts
deleted file mode 100644
index 10aa249a4b..0000000000
--- a/apps/website/screens/components/file-input/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DxcFileInput, DxcInset, DxcButton, DxcFlex } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [files, setFiles] = useState([]);
-
- const handleSubmit = () => {
- console.log(files.map((file) => file.file.name));
- };
-
- const callbackFile = (files) => {
- setFiles(files);
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcFileInput,
- DxcButton,
- DxcInset,
- DxcFlex,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/file-input/code/examples/basicUsage.tsx b/apps/website/screens/components/file-input/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..ed70433e29
--- /dev/null
+++ b/apps/website/screens/components/file-input/code/examples/basicUsage.tsx
@@ -0,0 +1,37 @@
+import { DxcFileInput, DxcInset, DxcButton, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [files, setFiles] = useState([]);
+
+ const handleSubmit = () => {
+ console.log(files.map((file) => file.file.name));
+ };
+
+ const callbackFile = (files) => {
+ setFiles(files);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcFileInput,
+ DxcButton,
+ DxcInset,
+ DxcFlex,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/file-input/code/examples/errorHandling.ts b/apps/website/screens/components/file-input/code/examples/errorHandling.ts
deleted file mode 100644
index 47ff3ae370..0000000000
--- a/apps/website/screens/components/file-input/code/examples/errorHandling.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcFileInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [files, setFiles] = useState([]);
- const callbackFile = (files) => {
- const updatedFiles = files.map((file) => {
- if (file.error)
- return { ...file, error: "Please select a file with valid size." };
- return { ...file };
- });
- setFiles(updatedFiles);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcFileInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/file-input/code/examples/errorHandling.tsx b/apps/website/screens/components/file-input/code/examples/errorHandling.tsx
new file mode 100644
index 0000000000..e0ee28b3ae
--- /dev/null
+++ b/apps/website/screens/components/file-input/code/examples/errorHandling.tsx
@@ -0,0 +1,34 @@
+import { DxcFileInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [files, setFiles] = useState([]);
+ const callbackFile = (files) => {
+ const updatedFiles = files.map((file) => {
+ if (file.error)
+ return { ...file, error: "Please select a file with valid size." };
+ return { ...file };
+ });
+ setFiles(updatedFiles);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcFileInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/file-input/code/examples/formFileInput.ts b/apps/website/screens/components/file-input/code/examples/formFileInput.ts
deleted file mode 100644
index c212f5361c..0000000000
--- a/apps/website/screens/components/file-input/code/examples/formFileInput.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DxcFileInput, DxcInset, DxcButton, DxcFlex } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [files, setFiles] = useState([]);
-
- const handleSubmit = (event) => {
- event.preventDefault();
- console.log(files.map((file) => file.file.name));
- };
-
- const callbackFile = (files) => {
- setFiles(files);
- };
-
- return (
-
- );
-}`;
-
-const scope = {
- DxcFileInput,
- DxcButton,
- DxcInset,
- DxcFlex,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/file-input/code/examples/formFileInput.tsx b/apps/website/screens/components/file-input/code/examples/formFileInput.tsx
new file mode 100644
index 0000000000..13ced3b42a
--- /dev/null
+++ b/apps/website/screens/components/file-input/code/examples/formFileInput.tsx
@@ -0,0 +1,40 @@
+import { DxcFileInput, DxcInset, DxcButton, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [files, setFiles] = useState([]);
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ console.log(files.map((file) => file.file.name));
+ };
+
+ const callbackFile = (files) => {
+ setFiles(files);
+ };
+
+ return (
+
+ );
+}`;
+
+const scope = {
+ DxcFileInput,
+ DxcButton,
+ DxcInset,
+ DxcFlex,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/file-input/overview/FileInputOverviewPage.tsx b/apps/website/screens/components/file-input/overview/FileInputOverviewPage.tsx
new file mode 100644
index 0000000000..51fcf5e163
--- /dev/null
+++ b/apps/website/screens/components/file-input/overview/FileInputOverviewPage.tsx
@@ -0,0 +1,279 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import Code from "@/common/Code";
+import anatomy from "./images/file_input_anatomy.png";
+import Example from "@/common/example/Example";
+import variants from "./examples/variants";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The file input component is a key UI element for collecting digital files such as documents,
+ images, videos or other media types. It plays a critical role in workflows where users must provide
+ supplemental information — like uploading resumes, profile pictures, supporting documents or media
+ attachments.
+
+
+ Unlike text or number inputs, file inputs trigger system-level dialogs and are limited in how their visual
+ appearance can be customized. However, they provide built-in functionality for browsing, selecting and
+ preparing files for upload. Developers can also configure constraints such as file type (e.g.,{" "}
+ .jpg, .pdf) or maximum file size to ensure data quality and improve server-side
+ processing.
+
+
+ Clear instructions, visual feedback and validation help users understand what types of files are accepted,
+ whether multiple files are allowed, and if an upload was successful. Proper labeling and accessibility support
+ — including keyboard navigation and screen reader compatibility — are essential to providing an inclusive
+ experience.
+
+
+ File inputs enhance functionality in forms by enabling richer user interactions and expanding the types of
+ data an application can accept.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label(Optional): a descriptive text that helps users understand what information
+ is expected in the input field. It should be clear, concise and placed near the input for better
+ readability.
+
+
+ Optional indicator(Optional): a small indicator that signals the input field is
+ not mandatory. It helps users know they can leave the field empty without causing validation errors.
+
+
+ Helper text(Optional): additional text placed below the input label that provides
+ guidance, examples or explanations to assist users in filling out the field correctly.
+
+
+ Container: the visual boundary that encloses the file input area. It helps define the drop
+ zone and clickable area and should visually reflect interaction states such as focus, hover or error.
+
+
+ File input button: instructional or informative text inside the drop area (e.g., "Select
+ files or drop files here") that helps orient users and encourage interaction.
+
+
+ File item container: displays the name of the file(s) selected or dropped.
+
+
+ Uploaded file preview(Optional): a visual element placed before the file input
+ area, often used to display a file icon or category label to reinforce the expected content.
+
+
+ Error message: appears below the input field when validation fails (e.g., unsupported file
+ type or size). The message should clearly explain the issue and how to fix it.
+
+
+ Remove action: allows users to delete a selected file before submission.
+
+
+
+ ),
+ },
+ {
+ title: "Form inputs",
+ content: (
+ <>
+
+ Form inputs are essential UI elements that allow users to interact with digital products by{" "}
+ entering or selecting data. Choosing the right input type and structure is key to designing
+ efficient, user-friendly forms that support task completion and data accuracy.
+
+
+ A form input (also known as a form field) is used to capture user data. Common input types include text
+ fields, date pickers, number fields, radio buttons, checkboxes, toggles and dropdowns. Forms should always
+ include a submission method, such as a submit button, link or keyboard trigger, to complete the interaction.
+
+
+ ),
+ subSections: [
+ {
+ title: "Shared input characteristics",
+ content: (
+ <>
+
+ Although input fields vary in type and purpose, they often share a common set of features:
+
+
+
+ Helper text: additional information displayed below the field to guide the user in
+ providing the correct input.
+
+
+ Optional label: inputs that are not mandatory can be marked with an "Optional" tag to
+ set clear expectations.
+
+
+
+ ),
+ },
+ {
+ title: "Common input states",
+ content: (
+ <>
+ Most inputs can also present standard interactive or informative states:
+
+
+ Disabled: this state prevents users from interacting with the field. It's typically
+ used when a value is not applicable or editable under certain conditions or roles.
+
+
+ Error: when a user enters invalid or incomplete data, the input shows an error state,
+ often accompanied by a helpful message to guide corrections.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Using file inputs",
+ content: (
+ <>
+
+ File inputs are commonly used in applications and forms where users are required to upload documents, images,
+ or other digital files. Our file input component is designed to be flexible and accessible, supporting both
+ drag-and-drop interactions and traditional file browsing. It enables designers and developers to handle a
+ variety of file-based use cases while maintaining usability, clarity and strong user feedback.
+
+
+ In this section, we will explore the key characteristics and behaviors of our file input component to help you
+ understand how to use it effectively and accessibly in your product.
+
+
+ ),
+ subSections: [
+ {
+ title: "Uploading files",
+ content: (
+ <>
+
+ Uploading files is the core interaction of the file input component. Users can either click to open the
+ file picker or drag-and-drop files directly into the designated area. The component supports single and
+ multiple file uploads, provides visual feedback once a file is selected and often includes the ability to
+ remove files before submission.
+
+
+ Clear affordances, immediate validation (e.g., for file type or size) and the option to undo or remove
+ uploads help users remain in control and confident in the submission process.
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+
+ The file input component is available in multiple variants to support a wide range of use cases and
+ interaction patterns. Each variant adapts to different interface needs, whether it's a compact
+ multi-device form or a file-intensive desktop experience. Designers and developers should select the most
+ appropriate variant based on context, layout constraints and user expectations.
+
+
+
+ Below is a summary of the available file input variants and their recommended use cases:
+
+
+
+
+
Name
+
Use case
+
+
+
+
+
+ File
+
+
+ Use the file variant when designing for multi-device compatibility. It offers a
+ minimal, straightforward interface ideal for responsive layouts and mobile-first designs.
+
+
+
+
+ Filedrop
+
+
+ Use in large or complex forms when designing only for desktop. It
+ combines both click-to-upload and drag-and-drop functionality in a compact inline layout.
+
+
+
+
+ Dropzone
+
+
+ Choose the dropzone when the primary goal is file uploading — such as media
+ galleries or document submission tools. It provides a large, visually prominent area optimized for
+ dragging and dropping files.
+
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Always use clear labels: provide descriptive and specific labels that indicate the type of
+ file expected (e.g., "Upload profile picture" or "Attach supporting document"). Avoid generic terms like
+ "Upload."
+
+
+ Use helper text to guide users: add helper text below the label when users need more
+ context about accepted file types (e.g., PDF, PNG), maximum file size or quantity limitations. This reduces
+ the likelihood of upload errors.
+
+
+ Display file previews when useful: for visual content like images, enabling preview
+ thumbnails can improve user confidence by providing a direct visual confirmation rather than just a file
+ name. This is especially helpful when uploading multiple similar images.
+
+
+ Use single-line layout for compact spaces: when working with constrained or dense layouts,
+ the single-file file input variant keeps the selected file inline with the field, avoiding vertical
+ expansion and keeping the form tidy.
+
+
+ Validate early and clearly: display error messages immediately if a file does not meet
+ requirements (e.g., incorrect format or file too large). Use clear, concise language that explains how to
+ fix the issue.
+
+
+
+ ),
+ },
+];
+
+const FileInputOverviewPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default FileInputOverviewPage;
diff --git a/apps/website/screens/components/file-input/overview/examples/variants.tsx b/apps/website/screens/components/file-input/overview/examples/variants.tsx
new file mode 100644
index 0000000000..41d4c87f2e
--- /dev/null
+++ b/apps/website/screens/components/file-input/overview/examples/variants.tsx
@@ -0,0 +1,21 @@
+import { DxcFileInput, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcFileInput,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/file-input/overview/images/file_input_anatomy.png b/apps/website/screens/components/file-input/overview/images/file_input_anatomy.png
new file mode 100644
index 0000000000..3c60479fe9
Binary files /dev/null and b/apps/website/screens/components/file-input/overview/images/file_input_anatomy.png differ
diff --git a/apps/website/screens/components/file-input/specs/FileInputSpecsPage.tsx b/apps/website/screens/components/file-input/specs/FileInputSpecsPage.tsx
deleted file mode 100644
index adb8cfbe8d..0000000000
--- a/apps/website/screens/components/file-input/specs/FileInputSpecsPage.tsx
+++ /dev/null
@@ -1,725 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import fileInputStatesFile from "./images/input_file_states_file.png";
-import fileInputStatesFiledrop from "./images/input_file_states_filedrop.png";
-import fileInputStatesDropzone from "./images/input_file_states_dropzone.png";
-import fileInputStatesFileItem from "./images/input_file_states_fileitem.png";
-import fileInputAnatomy from "./images/input_file_anatomy.png";
-import fileInputFileFileItemPreview from "./images/input_file_fileitem_preview.png";
-import fileInputFileSingleFile from "./images/input_file_single_file.png";
-import fileInputSpecs from "./images/input_file_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- The component file input is made-up of an input (type: file) and a file-item(s).
- ),
- subSections: [
- {
- title: "File",
- content: (
- <>
-
- The element has the following states: enabled, hover,{" "}
- focus, active and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Filedrop",
- content: (
- <>
-
- The element has the following states: enabled, hover,{" "}
- focus, active, dragover and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Dropzone",
- content: (
- <>
-
- The element has the following states: enabled, hover,{" "}
- focus, active, dragover and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "File items",
- content: (
- <>
-
- The element has the following states: enabled, hover,{" "}
- focus, active, loading and error.
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
- Drag and drop area
- Error message
- Error indicator
- Action - Remove file
- Helper text
- file input button
- File preview
- File name
- File item container
-
-
- ),
- },
- {
- title: "File item with preview",
- content: (
- <>
-
- When the files to upload are mainly images, the preview can provide more feedback to the user rather than the
- name of the file, preventing errors loading content.
-
-
-
-
-
- ),
- },
- {
- title: "Single-file file input",
- content: (
- <>
-
- In order to provide a compact version of the file input component to accommodate any layout restriction, the
- variant file displays the file name in the same row instead of growing vertically.
-
-
-
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- subSections: [
- {
- title: "Base",
- content: (
-
-
-
- Sets align-self CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'auto'
-
-
-
-
wrap
-
- 'nowrap' | 'wrap' | 'wrap-reverse'
-
-
- Sets flex-wrap CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'nowrap'
-
-
-
-
gap
-
- {coreSpacingTokensTypeString} | Gap
-
-
- Sets gap CSS property. See{" "}
-
- MDN
- {" "}
- for further information. It can be either a value from the range or an object with the following properties:
-
-
- rowGap: gutter between rows.
-
-
- columnGap: gutter between columns.
-
-
-
-
-
-
-
-
grow
-
- number
-
-
- Sets flex-grow CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 0
-
-
-
-
shrink
-
- number
-
-
- Sets flex-shrink CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 1
-
-
-
-
order
-
- number
-
-
- Sets order CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 0
-
-
-
-
basis
-
- string
-
-
- Sets flex-basis CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
+ Sets justify-content CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'normal'
+
+
+
+
order
+
+ number
+
+
+ Sets order CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 0
+
+
+
+
shrink
+
+ number
+
+
+ Sets flex-shrink CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 1
+
+
+
+
wrap
+
+ 'nowrap' | 'wrap' | 'wrap-reverse'
+
+
+ Sets flex-wrap CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'nowrap'
+
+
+
),
},
@@ -254,15 +255,11 @@ const sections = [
},
];
-const FlexCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const FlexCodePage = () => (
+
+
+
+
+);
export default FlexCodePage;
diff --git a/apps/website/screens/components/flex/code/examples/directionAlignment.ts b/apps/website/screens/components/flex/code/examples/directionAlignment.ts
deleted file mode 100644
index c81fef8f0c..0000000000
--- a/apps/website/screens/components/flex/code/examples/directionAlignment.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "@/common/Placeholder";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcInset,
- DxcFlex,
- Placeholder,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/flex/code/examples/directionAlignment.tsx b/apps/website/screens/components/flex/code/examples/directionAlignment.tsx
new file mode 100644
index 0000000000..901886d25e
--- /dev/null
+++ b/apps/website/screens/components/flex/code/examples/directionAlignment.tsx
@@ -0,0 +1,25 @@
+import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts b/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts
deleted file mode 100644
index 9ff679dcca..0000000000
--- a/apps/website/screens/components/flex/code/examples/gapOrderGrow.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "@/common/Placeholder";
-
-const code = `() => {
- return (
-
-
-
- 3
-
-
- 2
-
-
- 1
-
-
- 5
-
-
- 4
-
-
-
- );
-}`;
-
-const scope = {
- DxcInset,
- DxcFlex,
- Placeholder,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/flex/code/examples/gapOrderGrow.tsx b/apps/website/screens/components/flex/code/examples/gapOrderGrow.tsx
new file mode 100644
index 0000000000..7e696291f7
--- /dev/null
+++ b/apps/website/screens/components/flex/code/examples/gapOrderGrow.tsx
@@ -0,0 +1,34 @@
+import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+ 3
+
+
+ 2
+
+
+ 1
+
+
+ 5
+
+
+ 4
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx
new file mode 100644
index 0000000000..8d965c709e
--- /dev/null
+++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx
@@ -0,0 +1,101 @@
+import { DxcFlex, DxcParagraph, DxcBulletedList, DxcLink } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Code from "@/common/Code";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The flex component simplifies the creation of flexible and responsive layouts by abstracting the complexity of
+ CSS flexbox. Instead of manually handling flex properties, developers can use this component to build
+ structured and adaptable designs with improved readability and maintainability.
+
+
+ By leveraging flex, layouts can automatically adjust to different screen sizes and content variations,
+ ensuring a seamless user experience. This documentation covers its functionality, best practices, and key
+ concepts to help you use it effectively.
+
+
+ ),
+ },
+ {
+ title: "The flexible box layout",
+ content: (
+ <>
+
+ The flexible box layout module (usually referred to as flexbox) is a CSS layout model that
+ provides a more efficient way to organize, align, and distribute space among items within a container, even
+ when their size is unknown or dynamic.
+
+
+ Below, we share a series of essential links to help you understand and use the flex component correctly. If
+ you are not acquainted with these concepts, we strongly recommend taking a moment to review them:
+
+
+
+
+ MDN web docs: CSS flexible box layout
+
+
+
+
+ Google web.dev: Flexbox
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use flex for responsive layouts: use the flex component to create layouts that adapt to
+ different screen sizes and content variations.
+
+
+ Prioritize fluidity over fixed sizes: avoid using fixed widths or heights when possible, as
+ they can lead to layout issues on different devices. Instead, leverage flex properties like grow,
+ shrink, and basis to create scalable designs.
+
+
+ Leverage alignment and justification: use justifyContent and{" "}
+ alignItems strategically to control content positioning within the flex container, ensuring a
+ well-structured and visually balanced layout.
+
+
+ Optimize nested flex containers: while nesting flex containers is sometimes necessary,
+ excessive nesting can reduce readability and maintainability. Consider alternative layout strategies when
+ appropriate.
+
+
+ Ensure consistency with design tokens: whenever possible, use the design tokens provided by
+ the Halstack Design System to maintain visual and functional consistency across applications, even though the
+ component allows custom values.
+
+
+ Combine with other layout techniques: flexbox is powerful but not always the best tool for
+ every scenario. Consider using the{" "}
+
+ grid
+ {" "}
+ component for complex two-dimensional layouts or stacked components for simpler structures.
+
+
+ ),
+ },
+];
+
+const FlexOverviewPage = () => (
+
+
+
+
+);
+
+export default FlexOverviewPage;
diff --git a/apps/website/screens/components/flex/specs/FlexSpecsPage.tsx b/apps/website/screens/components/flex/specs/FlexSpecsPage.tsx
deleted file mode 100644
index bcfd3e765c..0000000000
--- a/apps/website/screens/components/flex/specs/FlexSpecsPage.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DxcFlex } from "@dxc-technology/halstack-react";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import flexColumnSpecs from "./images/flex_column_specs.png";
-import flexRowSpecs from "./images/flex_row_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
-
-
-
- ),
- },
-];
-
-const FlexSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default FlexSpecsPage;
diff --git a/apps/website/screens/components/flex/specs/images/flex_column_specs.png b/apps/website/screens/components/flex/specs/images/flex_column_specs.png
deleted file mode 100644
index a3df2a460e..0000000000
Binary files a/apps/website/screens/components/flex/specs/images/flex_column_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/flex/specs/images/flex_row_specs.png b/apps/website/screens/components/flex/specs/images/flex_row_specs.png
deleted file mode 100644
index cd07e8c660..0000000000
Binary files a/apps/website/screens/components/flex/specs/images/flex_row_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/flex/usage/FlexUsagePage.tsx b/apps/website/screens/components/flex/usage/FlexUsagePage.tsx
deleted file mode 100644
index 45f4de8540..0000000000
--- a/apps/website/screens/components/flex/usage/FlexUsagePage.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { DxcFlex, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-
-const sections = [
- {
- title: "Overview",
- content: (
- <>
-
- The Flex component is designed to provide a more efficient way to organize, align, and distribute space among
- items within a container, even when their size is unknown or dynamic (hence the term 'flex').
-
-
- By leveraging the capabilities of the Flex component, developers can create more flexible and responsive
- layouts that adapt to different screen sizes and device types. This powerful tool enables the creation of
- complex structures that can be easily adjusted to accommodate various content types and user interactions.
-
-
- In the sections that follow, we'll explore the core concepts and best practices for using the Flex component.
- By understanding these principles, you can optimize the layout of your application, enhance the user experience,
- and create more engaging and visually appealing interfaces.
-
-
- ),
- },
- {
- title: "Axes",
- content: (
- <>
-
- Flexboxes are comprised mainly of two axes: the main axis and the cross axis. The main axis is defined by the
- flex-direction property, and the cross axis runs perpendicular to it.
-
-
-
- The main axis is defined by flex-direction, which has four possible values: row,{" "}
- row-reverse, column and column-reverse.
-
-
- The cross axis runs perpendicular to the main axis.
-
-
- If the flex-direction (main axis) is set to row or row-reverse the cross axis
- runs down the columns.
-
-
- If the flex-direction is set to column or column-reverse, the cross axis runs
- down the rows.
-
-
-
-
-
- ),
- },
- {
- title: "Start and end",
- content: (
- <>
-
- The flexbox makes no assumption about the writing mode of the document. Left to right or right to left can be
- used depending, for example, on the language used. A start and end edge is used to refer to the direction of
- the placement of elements.
-
-
- For example, If the flex-direction is row and the language is English, then the start edge of the main axis
- will be on the left, the end edge on the right.
-
-
- ),
- },
- {
- title: "Flexbox container",
- content: (
- <>
- An area of a document laid out using flexbox is called a flex container.
-
-
- The items display in a row (the flex-direction property's default is row).
-
- The items start from the start edge of the main axis.
- The items do not stretch on the main dimension, but can shrink.
- The items will stretch to fill the size of the cross axis.
-
-
- ),
- },
-];
-
-const FlexUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default FlexUsagePage;
diff --git a/apps/website/screens/components/footer/FooterPageLayout.tsx b/apps/website/screens/components/footer/FooterPageLayout.tsx
index dc32eaa4ad..412bde097f 100644
--- a/apps/website/screens/components/footer/FooterPageLayout.tsx
+++ b/apps/website/screens/components/footer/FooterPageLayout.tsx
@@ -7,22 +7,18 @@ import { ReactNode } from "react";
const FooterPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/footer" },
- { label: "Usage", path: "/components/footer/usage" },
- { label: "Specifications", path: "/components/footer/specifications" },
+ { label: "Overview", path: "/components/footer" },
+ { label: "Code", path: "/components/footer/code" },
];
return (
-
+
-
+
- Footers are a secondary element in a web page because they usually appear at the bottom and it is the last
- thing that the user interacts with. But the presence of the footer must be designed in every application and
- be part of it (consumer or back-office) as it is a key layout element to the overall experience. It is a
- choice of the designer to either leave the footer visible by default or push it down, depending on the use
- case.
+ The footer is a UI component placed at the bottom of the page, providing informational context, secondary
+ navigation, and legal or support links.
The footer is part of the application layout, so it can only be used inside of it. Please check the{" "}
@@ -31,7 +27,7 @@ const FooterPageHeading = ({ children }: { children: ReactNode }) => {
{" "}
documentation.
-
+
{children}
diff --git a/apps/website/screens/components/footer/code/FooterCodePage.tsx b/apps/website/screens/components/footer/code/FooterCodePage.tsx
index f7b8f23aaf..0de8bdbb3d 100644
--- a/apps/website/screens/components/footer/code/FooterCodePage.tsx
+++ b/apps/website/screens/components/footer/code/FooterCodePage.tsx
@@ -1,10 +1,14 @@
import { DxcFlex, DxcTable, DxcLink } 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 StatusBadge from "@/common/StatusBadge";
-import TableCode from "@/common/TableCode";
+import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
+
+const logoTypeString = `{
+ href?: string;
+ src: string;
+ title?: string;
+}`;
const sections = [
{
@@ -20,9 +24,71 @@ const sections = [
+
+
bottomLinks
+
+ {"{ href: string; text: string; }[]"}
+
+
+ An array of objects representing the links that will be rendered at the bottom part of the footer. Each
+ object has the following properties:
+
+
+ text: Text for the link.
+
+
+ href: URL of the page the link goes to.
+
+
+
+
-
+
+
+
children
+
+ React.ReactNode
+
+
The center section of the footer. Can be used to render custom content in this area.
+
-
+
+
+
copyright
+
+ string
+
+
The text that will be displayed as copyright disclaimer.
+
-
+
+
+
+
+
+ logo
+
+
+
+
+ {"Logo"}
+
+ being Logo an object with the following properties:
+
Size of the top margin to be applied to the footer.
-
-
-
tabIndex
@@ -153,7 +176,7 @@ const sections = [
title="Footer and header"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- >
+ />
),
},
],
@@ -163,9 +186,7 @@ const sections = [
const FooterCodePage = () => {
return (
-
-
-
+
);
diff --git a/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx b/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx
new file mode 100644
index 0000000000..4b901c89e5
--- /dev/null
+++ b/apps/website/screens/components/footer/overview/FooterOverviewPage.tsx
@@ -0,0 +1,128 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import anatomy from "./images/footer_anatomy.png";
+import variants from "./images/footer_variants.png";
+import Image from "@/common/Image";
+import Figure from "@/common/Figure";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The footer is used as the final section of a page to display utility elements such as legal disclaimers,
+ secondary links, copyright information, or the brand logo. Its purpose is to reinforce brand identity and
+ provide consistent access across digital experiences without disrupting the main user flow.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: The outer wrapper that defines the overall layout, padding, and alignment of all
+ footer content. Ensures consistency across screen sizes.
+
+
+ Logo: Represents the brand identity visually. Positioned on the left side, it helps
+ reinforce company recognition across all pages.
+
+
+ Social icons: A set of clickable icons linking to the company's social media platforms
+ (e.g., LinkedIn, Facebook). Placed on the right side for easy visibility and access.
+
+
+ Copyright: Text displaying legal ownership of the content. Ensures users know the site is
+ officially owned.
+
+
+ Company links: A horizontal list of navigational hyperlinks such as Privacy Policy, Terms &
+ Conditions, etc. Offers users access to important legal or informational resources.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+
+ To maintain consistency in layout flexibility and brand presentation, the footer offers three primary
+ variants: Default, With Navigation, and Small.
+
+
+
+ Default: provides a balanced layout with branding and essential legal links. It offers a
+ clean, uncluttered appearance suitable for most standard applications.
+
+
+ With Navigation: includes additional navigational sections, enabling users to quickly
+ access key areas of the site. This layout is ideal for content-heavy pages or enterprise-level applications
+ requiring enhanced footer functionality.
+
+
+ Small: offers a compact version of the footer, typically limited to branding and minimal
+ legal text. It's best suited for lightweight experiences, login pages, or environments with constrained
+ vertical space.
+
+
+
+
+
+
+ Choosing between these variants helps tailor the footer to a wide range of contexts, whether prioritizing
+ simplicity, providing extended navigation, or optimizing for space efficiency.
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Dock the footer to the bottom of the page: the footer should remain fixed at the bottom
+ edge of the viewport and not scroll with the page content to maintain visibility and separation from dynamic
+ areas.
+
+
+ Ensure full-width alignment: the footer container should always span the full width of the
+ screen to create a clean, structured boundary and support responsive behavior across breakpoints.
+
+
+ Display copyright information on the right: consistently place legal disclaimers or
+ copyright text aligned to the right edge of the footer to support predictable user expectations.
+
+
+ Use a simplified or alternate logo: consider using a smaller or alternative version of the
+ brand logo (isotype, imagotype, or monochrome variant) rather than duplicating the main header image to
+ reduce visual redundancy.
+
+
+ Limit the number of links: include only the most essential company links (e.g., Terms,
+ Privacy, Accessibility) to avoid overwhelming users with excessive options.
+
+
+ Select the most appropriate variant for context: choose the footer variant that best fits
+ the content density and user goals of the page.
+
+
+
+ ),
+ },
+];
+
+const FooterOverviewPage = () => (
+
+
+
+
+);
+
+export default FooterOverviewPage;
diff --git a/apps/website/screens/components/footer/overview/images/footer_anatomy.png b/apps/website/screens/components/footer/overview/images/footer_anatomy.png
new file mode 100644
index 0000000000..ff389c8552
Binary files /dev/null and b/apps/website/screens/components/footer/overview/images/footer_anatomy.png differ
diff --git a/apps/website/screens/components/footer/overview/images/footer_variants.png b/apps/website/screens/components/footer/overview/images/footer_variants.png
new file mode 100644
index 0000000000..91dcef94b9
Binary files /dev/null and b/apps/website/screens/components/footer/overview/images/footer_variants.png differ
diff --git a/apps/website/screens/components/footer/specs/FooterSpecsPage.tsx b/apps/website/screens/components/footer/specs/FooterSpecsPage.tsx
deleted file mode 100644
index d3c8889a38..0000000000
--- a/apps/website/screens/components/footer/specs/FooterSpecsPage.tsx
+++ /dev/null
@@ -1,458 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Image from "@/common/Image";
-import footerAnatomy from "./images/footer_anatomy.png";
-import footerSpecs from "./images/footer_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
- Logo
- Social icons
- Copyright
- Company links
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
-
- The content of the footer should be adapt to the space available depending on the screen device.
-
-
- ),
- },
- ],
- },
- {
- title: "Responsive version for mobile and tablet",
- content: (
- <>
-
- The same content in the footer will be displayed for the responsive versions and the only modification will be
- the width of it. With less space available to display the content, some of the items will be relocated to fit
- well in the screen.
-
-
- Regarding his behavior, the footer must be pushed down always so it is not visible by default after page load,
- even when the content is smaller than the device screen size. This includes the splash screen, which must push
- the footer down. Of course, if the content is larger than the device screen size, the footer will be pushed
- down anyway.
-
-
- On the mobile version, first we have the logo. Below it the links to privacy and terms to let a space for
- custom component and at the bottom the copyright terms, centered. At this stage, the custom content and the
- disposition is responsability of the user, the same way as it is in the desktop and tablet version.
-
-
- ),
- },
-];
-
-const FooterSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default FooterSpecsPage;
diff --git a/apps/website/screens/components/footer/specs/images/footer_anatomy.png b/apps/website/screens/components/footer/specs/images/footer_anatomy.png
deleted file mode 100644
index 4f51b6b4eb..0000000000
Binary files a/apps/website/screens/components/footer/specs/images/footer_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/footer/specs/images/footer_specs.png b/apps/website/screens/components/footer/specs/images/footer_specs.png
deleted file mode 100644
index 58896e27ca..0000000000
Binary files a/apps/website/screens/components/footer/specs/images/footer_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/footer/usage/FooterUsagePage.tsx b/apps/website/screens/components/footer/usage/FooterUsagePage.tsx
deleted file mode 100644
index 74682d2d96..0000000000
--- a/apps/website/screens/components/footer/usage/FooterUsagePage.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
- {/* */}
-
-
- The footer frame should be docked at the bottom of the page and should not scroll with any of the data
- within working section of the screen.
-
- The footer frame should span the entire screen width.
-
- The footer frame should display the copyright information at the right margin.
-
-
- We recommend uploading either an alternate version or a smaller brand image than the used in the header. If
- the company has an alternate version of the logo, isotype, imagotype or isologo available, we encourage to
- use it. In the opposite case a smaller version of the main brand image can be used.
-
-
-
- ),
- },
- {
- title: "Content",
- content: (
- <>
- {/* */}
-
- The footer component has a custom area where many kinds of content can be placed, some of them are
- contemplated in the following list:
-
-
-
- Plain text or content
-
- Informational purpose text
-
-
-
- Menu links
-
- Global navigation
- Sitemap
- Useful links or resources
-
-
-
- Forms
-
- Select language
- Login / Sing up
- Provide email adress / Subscribe
-
-
-
- Actions
-
- Ask for help / Support
- Business related actions / Call to action
- Search
-
-
-
-
- ),
- },
-];
-
-const FooterUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default FooterUsagePage;
diff --git a/apps/website/screens/components/grid/GridPageLayout.tsx b/apps/website/screens/components/grid/GridPageLayout.tsx
index 5e9f243492..25e405a6d4 100644
--- a/apps/website/screens/components/grid/GridPageLayout.tsx
+++ b/apps/website/screens/components/grid/GridPageLayout.tsx
@@ -1,4 +1,4 @@
-import { DxcParagraph, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
import PageHeading from "@/common/PageHeading";
import TabsPageHeading from "@/common/TabsPageLayout";
import ComponentHeading from "@/common/ComponentHeading";
@@ -6,25 +6,21 @@ import { ReactNode } from "react";
const GridPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/grid" },
- { label: "Usage", path: "/components/grid/usage" },
- { label: "Specifications", path: "/components/grid/specifications" },
+ { label: "Overview", path: "/components/grid" },
+ { label: "Code", path: "/components/grid/code" },
];
return (
-
+
-
+
- Grid allows users to build applications based on{" "}
-
- CSS Grid Layout
-
- . It is a technical component that abstracts users from working directly with CSS Grid properties and allows
- them to write more consistent and semantic layouts.
+ The grid component allows building applications based on the CSS grid layout module. It is a technical
+ component that abstracts users from working directly with grid properties and allows them to write more
+ consistent and semantic layouts.
-
+
{children}
diff --git a/apps/website/screens/components/grid/code/GridCodePage.tsx b/apps/website/screens/components/grid/code/GridCodePage.tsx
index 962ff77387..b54030a9f2 100644
--- a/apps/website/screens/components/grid/code/GridCodePage.tsx
+++ b/apps/website/screens/components/grid/code/GridCodePage.tsx
@@ -1,215 +1,227 @@
import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Example from "@/common/example/Example";
import basic from "./examples/basic";
import layout from "./examples/layout";
-import TableCode from "@/common/TableCode";
+import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
-const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;
+const gapTypeString = `{
+ columnGap: string;
+ rowGap: string;
+}`;
const sections = [
{
title: "Props",
content: (
-
-
Name
-
Type
-
Description
-
Default
-
-
-
autoColumns
-
- string
-
-
- Sets the grid-auto-columns CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
- Sets the grid-auto-flow CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'row'
-
-
-
-
autoRows
-
- string
-
-
- Sets the grid-auto-rows CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'auto'
-
-
-
-
gap
-
- {coreSpacingTokensTypeString} | Gap
-
-
- Sets the gap CSS property. See{" "}
-
- MDN
- {" "}
- for further information. It can be either a value from the range or an object with the following properties:
-
- Sets the place-content CSS property. See{" "}
-
- MDN
- {" "}
- for further information. It can be either a value from the range or an object with the following properties:
-
-
- justifyContent: aligns the grid along the inline (row) axis.
-
-
- alignContent: aligns the grid along the block (column) axis.
-
- Sets the place-items CSS property. See{" "}
-
- MDN
- {" "}
- for further information. It can be either a value from the range or an object with the following properties:
-
-
- justifyItems: aligns grid items along the inline (row) axis.
-
-
- alignItems: aligns grid items along the block (column) axis.
-
-
-
-
- 'normal'
-
-
-
-
templateAreas
-
- string[]
-
-
- Sets the grid-template-areas CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
-
-
-
-
templateColumns
-
- string[]
-
-
- Sets the grid-template-columns CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
-
-
-
-
templateRows
-
- string[]
-
-
- Sets the grid-template-rows CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
-
-
-
-
as
-
- keyof HTMLElementTagNameMap
-
-
Sets a custom HTML tag.
-
- 'div'
-
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
Custom content inside the grid container.
-
-
-
+
+
+
Name
+
Type
+
Description
+
Default
+
+
+
+
+
as
+
+ keyof HTMLElementTagNameMap
+
+
Sets a custom HTML tag.
+
+ 'div'
+
+
+
+
autoColumns
+
+ string
+
+
+ Sets the grid-auto-columns CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+ Sets the grid-auto-flow CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'row'
+
+
+
+
autoRows
+
+ string
+
+
+ Sets the grid-auto-rows CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'auto'
+
+
+
+
+
+
+ children
+
+
+
+ React.ReactNode
+
+
Custom content inside the grid container.
+
-
+
+
+
gap
+
+ Gap
+
+ being Message an object with the following properties:
+
+ {gapTypeString}
+
+
+ Sets the gap CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information. It can be either a value from the range or an object with the following
+ properties:
+
+ Sets the place-content CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information. It can be either a value from the range or an object with the following
+ properties:
+
+
+ justifyContent: aligns the grid along the inline (row) axis.
+
+
+ alignContent: aligns the grid along the block (column) axis.
+
+ Sets the place-items CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information. It can be either a value from the range or an object with the following
+ properties:
+
+
+ justifyItems: aligns grid items along the inline (row) axis.
+
+
+ alignItems: aligns grid items along the block (column) axis.
+
+
+
+
+ 'normal'
+
+
+
+
templateAreas
+
+ string[]
+
+
+ Sets the grid-template-areas CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
-
+
+
+
templateColumns
+
+ string[]
+
+
+ Sets the grid-template-columns CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
-
+
+
+
templateRows
+
+ string[]
+
+
+ Sets the grid-template-rows CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
- Sets the name of an item so that it can be referenced by a template created with the{" "}
- grid-template-areas property.
-
-
-
-
-
-
column
-
- number | string | GridCell
-
-
- Sets the grid-column CSS property. See{" "}
-
- MDN
- {" "}
- for further information. It can be either a value from the range or an object with the following
- properties:
-
-
- start: starting position within the grid column.
-
-
- end: ending position within the grid column.
-
-
-
-
-
-
-
-
row
-
- number | string | GridCell
-
-
- Sets the grid-row CSS property. See{" "}
-
- MDN
- {" "}
- for further information. It can be either a value from the range or an object with the following
- properties:
-
- Sets the place-self CSS property. See{" "}
-
- MDN
- {" "}
- for further information. It can be either a value from the range or an object with the following
- properties:
-
-
- justifySelf: aligns a grid item inside a cell along the inline (row) axis.
-
-
- alignSelf: aligns a grid item inside a cell along the block (column) axis.
-
-
-
-
- 'auto'
-
-
-
-
as
-
- keyof HTMLElementTagNameMap
-
-
Sets a custom HTML tag.
-
- 'div'
-
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
Custom content inside the grid item container.
-
-
-
+
+
+
Name
+
Type
+
Description
+
Default
+
+
+
+
+
areaName
+
+ string
+
+
+ Sets the name of an item so that it can be referenced by a template created with the{" "}
+ grid-template-areas property.
+
+
-
+
+
+
as
+
+ keyof HTMLElementTagNameMap
+
+
Sets a custom HTML tag.
+
+ 'div'
+
+
+
+
+
+
+ children
+
+
+
+ React.ReactNode
+
+
Custom content inside the grid item container.
+
-
+
+
+
column
+
+ number | string | GridCell
+
+
+ Sets the grid-column CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information. It can be either a value from the range or an object with the following
+ properties:
+
+
+ start: starting position within the grid column.
+
+ Sets the place-self CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information. It can be either a value from the range or an object with the following
+ properties:
+
+
+ justifySelf: aligns a grid item inside a cell along the inline (row) axis.
+
+
+ alignSelf: aligns a grid item inside a cell along the block (column) axis.
+
+
+
+
+ 'auto'
+
+
+
+
row
+
+ number | string | GridCell
+
+
+ Sets the grid-row CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information. It can be either a value from the range or an object with the following
+ properties:
+
+
+ start: starting position within the grid row.
+
+
+ end: ending position within the grid row.
+
+
+
+
-
+
+
),
},
@@ -365,15 +381,11 @@ const sections = [
},
];
-const GridCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const GridCodePage = () => (
+
+
+
+
+);
export default GridCodePage;
diff --git a/apps/website/screens/components/grid/code/examples/basic.tsx b/apps/website/screens/components/grid/code/examples/basic.tsx
index e7acc87938..78ff3e0bd5 100644
--- a/apps/website/screens/components/grid/code/examples/basic.tsx
+++ b/apps/website/screens/components/grid/code/examples/basic.tsx
@@ -3,7 +3,7 @@ import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
+
diff --git a/apps/website/screens/components/grid/code/examples/layout.tsx b/apps/website/screens/components/grid/code/examples/layout.tsx
index b6906c1f40..3c1db3ed8e 100644
--- a/apps/website/screens/components/grid/code/examples/layout.tsx
+++ b/apps/website/screens/components/grid/code/examples/layout.tsx
@@ -3,11 +3,11 @@ import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
+ {
-
+
diff --git a/apps/website/screens/components/grid/overview/GridOverviewPage.tsx b/apps/website/screens/components/grid/overview/GridOverviewPage.tsx
new file mode 100644
index 0000000000..fced48c7b7
--- /dev/null
+++ b/apps/website/screens/components/grid/overview/GridOverviewPage.tsx
@@ -0,0 +1,108 @@
+import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Code from "@/common/Code";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The grid component is a powerful layout tool that simplifies the creation of complex and responsive designs.
+ It allows developers to create structured layouts using rows and columns, making it easier to manage spacing
+ and alignment within a design.
+
+
+ ),
+ },
+ {
+ title: "The grid layout",
+ content: (
+ <>
+
+ The grid layout module is a two-dimensional layout system for the web. It allows you to create complex layouts
+ using rows and columns, making it easier to design responsive web pages. The grid layout provides a more
+ efficient way to align and distribute space among items in a container, even when their size is unknown or
+ dynamic.
+
+
+ Below, we share a series of essential links to help you understand and use the grid component correctly. If
+ you are not acquainted with these concepts, we strongly recommend taking a moment to review them:
+
+
+
+
+ MDN web docs: CSS grid layout
+
+
+
+
+ Google web.dev: Grid
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use grid for complex layouts: the grid component is ideal for creating complex layouts with
+ multiple rows and columns. It allows you to create responsive designs that adapt to different screen sizes.
+
+
+ Keep it simple: while the grid component is powerful, it's essential to keep your layouts as
+ simple as possible. Avoid overcomplicating your designs with too many nested grids or complex structures,
+ which can reduce the readability and maintainability of your code.
+
+
+ Use grid items correctly: they are represented by the DxcGrid.Item tag and
+ should be used when the decision to follow the Grid layout pattern is assumed only by the parent container.
+ Ensure that you use the grid items correctly within the grid container. The grid items should be direct
+ descendants of the grid container to ensure proper alignment and spacing.
+
+
+ Prioritize fluidity over fixed sizes: avoid using fixed widths or heights when possible, as
+ they can lead to layout issues on different devices. Instead, leverage grid properties like{" "}
+ templateColumns, templateRows, and templateAreas to create scalable
+ designs.
+
+
+ Use grid gaps wisely: the grid component provides a gap property to control spacing between
+ items. Use this property to create consistent spacing between items and avoid excessive margins or padding.
+
+
+ Leverage alignment and justification: use placeContent and{" "}
+ placeItems strategically to control content positioning within the grid container, ensuring a
+ well-structured and visually balanced layout.
+
+
+ Ensure consistency with design tokens: whenever possible, use the design tokens provided by
+ the Halstack Design System to maintain visual and functional consistency across applications, even though the
+ component allows custom values.
+
+
+ Combine with other layout techniques: grid is powerful but not always the best tool for every
+ scenario. Consider using the{" "}
+
+ flex
+ {" "}
+ component instead for one-dimensional layouts or stacked components with simpler structures.
+
+
+ ),
+ },
+];
+
+const GridOverviewPage = () => (
+
+
+
+
+);
+
+export default GridOverviewPage;
diff --git a/apps/website/screens/components/grid/specs/GridSpecsPage.tsx b/apps/website/screens/components/grid/specs/GridSpecsPage.tsx
deleted file mode 100644
index aebaf99389..0000000000
--- a/apps/website/screens/components/grid/specs/GridSpecsPage.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DxcFlex } from "@dxc-technology/halstack-react";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import gridAutoFlowSpecs from "./images/grid-autoFlow-specs.png";
-import gridTemplateSpecs from "./images/grid-templates-specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
-
-
-
- ),
- },
-];
-
-const GridSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default GridSpecsPage;
diff --git a/apps/website/screens/components/grid/specs/images/grid-autoFlow-specs.png b/apps/website/screens/components/grid/specs/images/grid-autoFlow-specs.png
deleted file mode 100644
index c07d81e70e..0000000000
Binary files a/apps/website/screens/components/grid/specs/images/grid-autoFlow-specs.png and /dev/null differ
diff --git a/apps/website/screens/components/grid/specs/images/grid-templates-specs.png b/apps/website/screens/components/grid/specs/images/grid-templates-specs.png
deleted file mode 100644
index 0c3dc0fb40..0000000000
Binary files a/apps/website/screens/components/grid/specs/images/grid-templates-specs.png and /dev/null differ
diff --git a/apps/website/screens/components/grid/usage/GridUsagePage.tsx b/apps/website/screens/components/grid/usage/GridUsagePage.tsx
deleted file mode 100644
index 28259f9678..0000000000
--- a/apps/website/screens/components/grid/usage/GridUsagePage.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Code from "@/common/Code";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- The Grid component allows for both row and column layouts while allowing for a lot of flexibility of item
- placement within the grid itself.
-
-
- ),
- },
- {
- title: "Layout, Spacing, and Placement",
- content: (
- <>
-
- The layout type can be specified using the grid-auto-flow property. This property lets you
- control how the auto-placement algorithm works, determining exactly how auto-placed items get flowed into the
- grid. Use the gap property to set the space between items and the placement properties{" "}
- placeContent and placeItems for more specific controls of how individual items stack
- or align within the grid.
-
-
- ),
- },
- {
- title: "Grid Templates",
- content: (
- <>
-
- You can use templates to define grid areas, columns, and rows. The grid-template-areas property
- is used to establish cells within a grid and assign them names. grid-template-columns defines the
- line names and track sizing functions of the grid columns while grid-template-rows defines the
- line names and track sizing functions of the grid columns.
-
-
- ),
- },
- {
- title: "Grid Items",
- content: (
- <>
-
- The Grid items are direct descendants of a grid container. They are represented by the{" "}
- DxcGrid.Item tag and should be used when the decision to follow the Grid layout pattern is
- assumed only by the parent container.
-
-
- In case you are building a complex Grid layout with several nested grid containers, DxcGrid.Item{" "}
- becomes very limited and therefore, you will have to wrap the children with DxcGrid.
-
-
- ),
- },
-];
-
-const GridUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default GridUsagePage;
diff --git a/apps/website/screens/components/header/HeaderPageLayout.tsx b/apps/website/screens/components/header/HeaderPageLayout.tsx
index e4e463d0df..4f26a06796 100644
--- a/apps/website/screens/components/header/HeaderPageLayout.tsx
+++ b/apps/website/screens/components/header/HeaderPageLayout.tsx
@@ -7,20 +7,18 @@ import { ReactNode } from "react";
const HeaderPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/header" },
- { label: "Usage", path: "/components/header/usage" },
- { label: "Specifications", path: "/components/header/specifications" },
+ { label: "Overview", path: "/components/header" },
+ { label: "Code", path: "/components/header/code" },
];
return (
-
+
-
+
- The header is an important component in the interface, it is the area dedicated for the navigation across
- the application and helps users understand what the content of the page is about. They appear at the top of
- a page, above the main content.
+ A horizontal bar located at the top of the application, providing branding, primary navigation, and user
+ account controls.
The header is part of the application layout, so it can only be used inside of it. Please check the{" "}
@@ -29,7 +27,7 @@ const HeaderPageHeading = ({ children }: { children: ReactNode }) => {
{" "}
documentation.
-
+
{children}
diff --git a/apps/website/screens/components/header/code/HeaderCodePage.tsx b/apps/website/screens/components/header/code/HeaderCodePage.tsx
index 246e592048..30eddc65c8 100644
--- a/apps/website/screens/components/header/code/HeaderCodePage.tsx
+++ b/apps/website/screens/components/header/code/HeaderCodePage.tsx
@@ -1,10 +1,15 @@
import { DxcFlex, DxcTable, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Link from "next/link";
-import TableCode from "@/common/TableCode";
-import Code from "@/common/Code";
+import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
+import StatusBadge from "@/common/StatusBadge";
+
+const logoTypeString = `{
+ href?: string;
+ src: string;
+ title?: string;
+}`;
const sections = [
{
@@ -20,16 +25,6 @@ const sections = [
-
-
underlined
-
- boolean
-
-
Whether a contrast line should appear at the bottom of the header.
+ Content shown in responsive version. It receives the close menu handler that can be used to add that
+ functionality when a element is clicked.
-
Size of the bottom margin to be applied to the header.
-
@@ -79,6 +93,16 @@ const sections = [
0
+
+
underlined
+
+ boolean
+
+
Whether a contrast line should appear at the bottom of the header.
+
+ false
+
+
),
@@ -114,7 +138,7 @@ const sections = [
title="Footer and header"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- >
+ />
),
},
],
@@ -124,9 +148,7 @@ const sections = [
const HeaderCodePage = () => {
return (
-
-
-
+
);
diff --git a/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx b/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx
new file mode 100644
index 0000000000..1558e31f01
--- /dev/null
+++ b/apps/website/screens/components/header/overview/HeaderOverviewPage.tsx
@@ -0,0 +1,135 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import Figure from "@/common/Figure";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import anatomy from "./images/header_anatomy.png";
+import variants from "./images/header_variants.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The Header serves as the primary navigation and identity element for an application. It includes branding, quick
+ access to key sections via navigation links, and a user account menu. Its consistent presence reinforces brand
+ recognition and improves usability by offering easy navigation and access to user-related actions.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: a layout structure that wraps all Header elements, ensuring consistent
+ alignment, spacing, and maximum width limits. The container helps keep the header properly aligned across
+ different screen sizes.
+
+
+ Brand Image: a clear, balanced logo that fits well within the header without overpowering
+ other elements.
+
+
+ Application Name(Optional): a short, recognizable application name placed next to
+ the logo to reinforce brand identity.
+
+
+ Navigation Links(Optional): key links to main sections of the application.
+
+
+ Header Dropdown(Optional): a dropdown menu for user-specific actions such as
+ profile, settings, or logout, triggered by click or keyboard focus.
+
+
+ Divider(Optional): horizontal line that visually separates the Header from the
+ page content below, enhancing layout clarity.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+
+ To maintain consistency with the way variants are structured across components, the Header offers two primary
+ styles: default and underlined.
+
+
+
+ The default variant features a clean header without a visual separation from the page
+ content, ideal for minimalistic or immersive layouts.
+
+
+ The underlined variant includes a subtle bottom divider, creating a clear visual boundary
+ between the header and the rest of the page content, enhancing structure and clarity.
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Responsive version",
+ content: (
+ <>
+
+ Applications are accessed on a wide range of devices, including laptops, tablets, and smartphones. To support
+ this, the header must be designed to scale responsively across screen sizes. The responsive header should
+ preserve the structural layout and visual hierarchy of the desktop version, ensuring consistency and usability
+ across all platforms.
+
+
+ "On smaller screens, the header content is replaced by a button. Triggering this button opens a menu that
+ displays custom content."
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Keep the Header minimal and functional: include only essential elements.
+
+
+ Select the correct variant according to visual needs: Use the default{" "}
+ variant for simple pages and underlined variant to visually separate the Header from the content when
+ necessary.
+
+
+ Use dropdowns correctly for complex navigation: Only use Header dropdowns when necessary to
+ organize multiple links logically without overwhelming the top navigation.
+
+
+ Avoid overcrowding the Header: Limit the number of top-level navigation links. Group
+ secondary links inside dropdowns if needed to maintain a clean and user-friendly interface.
+
+
+ Display the application name clearly and concisely: The application name should be readable,
+ short, and not overpower the brand logo. It reinforces brand identity and provides immediate context to users.
+
+
+ Design the Header to respond gracefully to smaller screens: When adapting the Header to
+ mobile or tablet layouts, restructure the content to preserve both visual clarity and functional hierarchy.
+
+
+ ),
+ },
+];
+
+const HeaderOverviewPage = () => (
+
+
+
+
+);
+
+export default HeaderOverviewPage;
diff --git a/apps/website/screens/components/header/overview/images/header_anatomy.png b/apps/website/screens/components/header/overview/images/header_anatomy.png
new file mode 100644
index 0000000000..fc6fd66c30
Binary files /dev/null and b/apps/website/screens/components/header/overview/images/header_anatomy.png differ
diff --git a/apps/website/screens/components/header/overview/images/header_responsive.png b/apps/website/screens/components/header/overview/images/header_responsive.png
new file mode 100644
index 0000000000..ed3509d98d
Binary files /dev/null and b/apps/website/screens/components/header/overview/images/header_responsive.png differ
diff --git a/apps/website/screens/components/header/overview/images/header_responsive_details.png b/apps/website/screens/components/header/overview/images/header_responsive_details.png
new file mode 100644
index 0000000000..6cf81b7d25
Binary files /dev/null and b/apps/website/screens/components/header/overview/images/header_responsive_details.png differ
diff --git a/apps/website/screens/components/header/overview/images/header_variants.png b/apps/website/screens/components/header/overview/images/header_variants.png
new file mode 100644
index 0000000000..8bc6f3d234
Binary files /dev/null and b/apps/website/screens/components/header/overview/images/header_variants.png differ
diff --git a/apps/website/screens/components/header/specs/HeaderSpecsPage.tsx b/apps/website/screens/components/header/specs/HeaderSpecsPage.tsx
deleted file mode 100644
index 9414807ee6..0000000000
--- a/apps/website/screens/components/header/specs/HeaderSpecsPage.tsx
+++ /dev/null
@@ -1,349 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Code from "@/common/Code";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import Image from "@/common/Image";
-import headerSpecs from "./images/header_specs.png";
-import headerAnatomy from "./images/header_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Brand image
- Application name
- Navigation links
- Header dropdown
- Container
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- {
- title: "Margin",
- content: (
- <>
-
- The margin only applies to the margin-bottom of the header component.
-
-
-
-
-
Margin
-
Value
-
-
-
-
-
- xxsmall
-
-
6px
-
-
-
- xsmall
-
-
16px
-
-
-
- small
-
-
24px
-
-
-
- medium
-
-
36px
-
-
-
- large
-
-
48px
-
-
-
- xlarge
-
-
64px
-
-
-
- xxlarge
-
-
100px
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const HeaderSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default HeaderSpecsPage;
diff --git a/apps/website/screens/components/header/specs/images/header_anatomy.png b/apps/website/screens/components/header/specs/images/header_anatomy.png
deleted file mode 100644
index 503e7f420c..0000000000
Binary files a/apps/website/screens/components/header/specs/images/header_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/header/specs/images/header_specs.png b/apps/website/screens/components/header/specs/images/header_specs.png
deleted file mode 100644
index 6540b894d9..0000000000
Binary files a/apps/website/screens/components/header/specs/images/header_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/header/usage/HeaderUsagePage.tsx b/apps/website/screens/components/header/usage/HeaderUsagePage.tsx
deleted file mode 100644
index a095da12ea..0000000000
--- a/apps/website/screens/components/header/usage/HeaderUsagePage.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import headerResponsive from "./images/header_responsive.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- Try to avoid to place a large number of items inside the content area.
-
- Avoid increasing the header height.
-
- Halstack components placed as a children should follow their respective guidelines.
-
-
- ),
- },
- {
- title: "Variants",
- content: (
- <>
- {/* */}
-
- Following the convention of the variants that can be found in a component, two main variants are defined for
- the header. Variants: default and underlined.
-
-
- ),
- },
- {
- title: "Custom content",
- content: (
-
-
- Application name: If the application has a specific name, can be placed following the brand
- image.
-
-
- Primary navigation: The links and dropdowns with a navigational purpose.
-
-
- Site options: Language selector, settings, or other any option that applies.
-
-
- Account: In the case that the application manages accounts, the element for the login and
- register options should be positioned on the far right except in the tablet and mobile version that will be
- covered in the following sections.
-
-
- ),
- },
- {
- title: "Responsive version for mobile and tablet",
- content: (
- <>
-
- Due to the applications are accessible from a laptop, tablet and mobile it is necessary to think and design a
- header version for the corresponding device. The design for smaller devices tries to keep the consistency
- respect to the other versions, allowing the user experiences a similar interaction although the space
- available is less.
-
-
-
-
-
- ),
- },
-];
-
-const HeaderUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default HeaderUsagePage;
diff --git a/apps/website/screens/components/header/usage/images/header_responsive.png b/apps/website/screens/components/header/usage/images/header_responsive.png
deleted file mode 100644
index c0d5e3371c..0000000000
Binary files a/apps/website/screens/components/header/usage/images/header_responsive.png and /dev/null differ
diff --git a/apps/website/screens/components/heading/HeadingPageLayout.tsx b/apps/website/screens/components/heading/HeadingPageLayout.tsx
index 1487acdea0..32a340a940 100644
--- a/apps/website/screens/components/heading/HeadingPageLayout.tsx
+++ b/apps/website/screens/components/heading/HeadingPageLayout.tsx
@@ -6,22 +6,20 @@ import { ReactNode } from "react";
const HeadingPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/heading" },
- { label: "Usage", path: "/components/heading/usage" },
- { label: "Specifications", path: "/components/heading/specifications" },
+ { label: "Overview", path: "/components/heading" },
+ { label: "Code", path: "/components/heading/code" },
];
return (
-
+
-
+
- Heading component is an essential element that contributes to define a great hierarchy within the
- application. It helps to give semantic meaning to the content as well as contributing to define a good
- structure for SEO (search engine optimization). The implementation will rely on the use of HTML tags.
+ A component used to establish clear content hierarchy and structure, ensuring both visual and semantic
+ clarity across interfaces.
-
+
{children}
diff --git a/apps/website/screens/components/heading/code/HeadingCodePage.tsx b/apps/website/screens/components/heading/code/HeadingCodePage.tsx
index a40a17a4a8..a4e2a54ada 100644
--- a/apps/website/screens/components/heading/code/HeadingCodePage.tsx
+++ b/apps/website/screens/components/heading/code/HeadingCodePage.tsx
@@ -1,12 +1,10 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
-import Code from "@/common/Code";
const sections = [
{
@@ -23,13 +21,21 @@ const sections = [
+
+
as
+
+ 'h1' | 'h2' | 'h3' | 'h4'| 'h5' | 'h6'
+
+
Specifies the HTML tag of the heading.
+
-
+
level
- 1 | 2 | 3 | 4 | 5
+ 1 | 2 | 3 | 4 | 5 | 6
- Defines the heading level from 1 to 5. The styles of the heading are applied according to the level. The
+ Defines the heading level from 1 to 6. The styles of the heading are applied according to the level. The
HTML tag of the heading will be the one specified in the as prop. If no as{" "}
prop is provided, the tag of the heading is the the one corresponding to the value of the{" "}
level prop (for example, level 1 will render an h1 tag).
@@ -39,46 +45,40 @@ const sections = [
- string
+ 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.
- 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.
+ 'default'
-
-
@@ -96,15 +96,11 @@ const sections = [
},
];
-const HeadingCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const HeadingCodePage = () => (
+
+
+
+
+);
export default HeadingCodePage;
diff --git a/apps/website/screens/components/heading/code/examples/basicUsage.ts b/apps/website/screens/components/heading/code/examples/basicUsage.ts
deleted file mode 100644
index 322d244c3c..0000000000
--- a/apps/website/screens/components/heading/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DxcHeading, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcHeading,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/heading/code/examples/basicUsage.tsx b/apps/website/screens/components/heading/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..fa3b8be97e
--- /dev/null
+++ b/apps/website/screens/components/heading/code/examples/basicUsage.tsx
@@ -0,0 +1,24 @@
+import { DxcHeading, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcHeading,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/heading/overview/HeadingOverviewPage.tsx b/apps/website/screens/components/heading/overview/HeadingOverviewPage.tsx
new file mode 100644
index 0000000000..f87a8d83e3
--- /dev/null
+++ b/apps/website/screens/components/heading/overview/HeadingOverviewPage.tsx
@@ -0,0 +1,174 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Code from "@/common/Code";
+import Figure from "@/common/Figure";
+import Image from "@/common/Image";
+import headingSizes from "./images/heading_sizes.png";
+import headingWeights from "./images/heading_weights.png";
+import { DxcLink } from "@dxc-technology/halstack-react";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The heading component provides consistent typographic structure for titles and section headers within the UI. It
+ enforces semantic hierarchy through HTML tags (h1 through h6), supports visual
+ distinction via styles and weights, and plays a key role in SEO and accessibility. The component is flexible in
+ use, allowing control over styling and structure without breaking the logical order of information.
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+
+ The Open Sans typeface has 5 different weights, from light to extra-bold but Halstack use three variations,
+ light, regular and bold (default). The font size goes from 40 pixels for the h1 heading to 12
+ pixels for the h6 level.
+
+
+
+
+
+
+
+
+
+
+
Variant
+
Purpose
+
+
+
+
+
+ H1
+
+
Page title. Used once per page for the main heading.
Sub-section titles. Used inside sections to separate content.
+
+
+
+ H4
+
+
Nested subsections, often in detail-heavy contexts.
+
+
+
+ H5-H6
+
+
Minor subsections, used for fine-grained grouping or labels.
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use headings to define page and section titles: start each page with an h1,
+ followed by h2-h6 for content hierarchy and structure.
+
+
+ Organize subsections with appropriate heading levels: use h3, h4,{" "}
+ h5, h6 to title content within larger sections for better scannability.
+
+
+ Apply headings to group content semantically in UI elements: use headings inside, cards, or
+ other containers to establish clear structure.
+
+
+ Support accessibility and SEO with semantic heading structure: proper use of heading tags
+ enhances screen reader navigation and search engine indexing.
+
+
+ Always use the Heading component for structural content: don't manually style text to look
+ like a heading. Use the component to maintain consistency and semantics.
+
+
+ Maintain proper heading order: avoid skipping levels (e.g., going from h1 to{" "}
+ h4) unless there's a clear content structure that justifies it.
+
+
+ Avoid stacking headings without content: every heading should introduce related content.
+ Don't chain multiple headings together without context
+
+
+
+ Use the level prop to set visual style, and as to control the semantic tag:
+ {" "}
+ while we recommend following the defined levels and styles to maintain consistency, we understand that certain
+ interfaces may require customization. Use these props to adapt the component as needed and ensure semantic
+ meaning and structural clarity are preserved.
+
+
+ ),
+ },
+ {
+ title: "Accessibility",
+ content: (
+
+
+ Heading components should be in order. That means an Headings-H1 is followed by an{" "}
+ Headings-H2, an Headings-H2 is followed by a Headings-H2 or{" "}
+ Headings-H3 and so on.
+
+
+ Keep heading tags consistent. Inconsistently implementing headings can create confusion and frustration for
+ users using assistive technologies.
+
+
+ Headings are not interactive elements and therefore have no keyboard or pointer interaction.
+
+
+ ),
+ subSections: [
+ {
+ title: "WCAG 2.1 Related Success Criterion",
+ content: (
+
+
+
+ SC 1.3.1 — Info and relationships:
+ {" "}
+ Information, structure, and relationships conveyed through presentation can be programmatically determined
+ or are available in text.
+
+
+
+ SC 2.4.6 — Headings and Labels:
+ {" "}
+ Headings and labels describe the topic or purpose.
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const HeadingOverviewPage = () => (
+
+
+
+
+);
+
+export default HeadingOverviewPage;
diff --git a/apps/website/screens/components/heading/overview/images/heading_sizes.png b/apps/website/screens/components/heading/overview/images/heading_sizes.png
new file mode 100644
index 0000000000..8913d610d2
Binary files /dev/null and b/apps/website/screens/components/heading/overview/images/heading_sizes.png differ
diff --git a/apps/website/screens/components/heading/overview/images/heading_weights.png b/apps/website/screens/components/heading/overview/images/heading_weights.png
new file mode 100644
index 0000000000..2b60b1c562
Binary files /dev/null and b/apps/website/screens/components/heading/overview/images/heading_weights.png differ
diff --git a/apps/website/screens/components/heading/specs/HeadingSpecsPage.tsx b/apps/website/screens/components/heading/specs/HeadingSpecsPage.tsx
deleted file mode 100644
index 2a04c46b98..0000000000
--- a/apps/website/screens/components/heading/specs/HeadingSpecsPage.tsx
+++ /dev/null
@@ -1,385 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-
-const sections = [
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
- An inherit color from the definition of the application is received, so the component could change his color
- based on that parameter. There is no specific color tokens for this component.
-
- ),
- },
- {
- title: "Typography",
- subSections: [
- {
- title: "Headings H1",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
- ],
- },
- {
- title: "Accessibility",
- content: (
-
-
- Heading components should be in order. That means an Headings-H1 is followed by an{" "}
- Headings-H2, an Headings-H2 is followed by a Headings-H2 or{" "}
- Headings-H3 and so on.
-
-
- Keep heading tags consistent. Inconsistently implementing headings can create confusion and frustration for
- users using assistive technologies.
-
-
- Headings are not interactive elements and therefore have no keyboard or pointer interaction.
-
-
- ),
- subSections: [
- {
- title: "WCAG 2.1 Related Success Criterion",
- content: (
-
-
- SC 1.3.1 -{" "}
-
- Info and relationships
-
-
-
- SC 2.4.6 -{" "}
-
- Headings and labels
-
-
-
- ),
- },
- ],
- },
-];
-
-const HeadingSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default HeadingSpecsPage;
diff --git a/apps/website/screens/components/heading/specs/images/header_anatomy.png b/apps/website/screens/components/heading/specs/images/header_anatomy.png
deleted file mode 100644
index ea981ee5ee..0000000000
Binary files a/apps/website/screens/components/heading/specs/images/header_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/heading/specs/images/header_responsive.png b/apps/website/screens/components/heading/specs/images/header_responsive.png
deleted file mode 100644
index 8ec1843fca..0000000000
Binary files a/apps/website/screens/components/heading/specs/images/header_responsive.png and /dev/null differ
diff --git a/apps/website/screens/components/heading/specs/images/header_specs.png b/apps/website/screens/components/heading/specs/images/header_specs.png
deleted file mode 100644
index ce405ace7d..0000000000
Binary files a/apps/website/screens/components/heading/specs/images/header_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/heading/usage/HeadingUsagePage.tsx b/apps/website/screens/components/heading/usage/HeadingUsagePage.tsx
deleted file mode 100644
index c5736d33d6..0000000000
--- a/apps/website/screens/components/heading/usage/HeadingUsagePage.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Code from "@/common/Code";
-import headingScale from "./images/heading_scale.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- Navigating through the Headings-H1 and Headings-H3 give a user an overview of a page
- and how its content is structured. The Headings-H4 and Headings-H5 elements provide
- a quick understanding of the details in each section.
-
-
- The Open Sans typeface has 5 different weights, from light to extra-bold but Halstack use three variations,
- light, regular and bold. The font size goes from 32 pixels for the <h1> heading to 14
- pixels for the <h5> level.
-
-
-
-
-
- There are several scenarios where the use of heading is just right when we are talking about the title for a
- section, header of a table, a definition of the elements that will appear below the title or an introduction
- for a paragraph.
-
-
- ),
- subSections: [
- {
- title: "Do's",
- content: (
- <>
-
-
- Use Heading components from H1 to H5 when creating content
- hierarchy in the page.
-
-
- Use headings for page headings and for specific sections of content.
-
- Use purposeful words to summarize the content that follows.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
- Do not style text to give the visual appearance of headings.
-
- Avoid "stacking" headings without any body content in between.
-
-
- ),
- },
- ],
- },
-];
-
-const HeadingUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default HeadingUsagePage;
diff --git a/apps/website/screens/components/heading/usage/images/heading_scale.png b/apps/website/screens/components/heading/usage/images/heading_scale.png
deleted file mode 100644
index f8fac37a0a..0000000000
Binary files a/apps/website/screens/components/heading/usage/images/heading_scale.png and /dev/null differ
diff --git a/apps/website/screens/components/image/ImagePageLayout.tsx b/apps/website/screens/components/image/ImagePageLayout.tsx
index 8935daceba..465cd00c6e 100644
--- a/apps/website/screens/components/image/ImagePageLayout.tsx
+++ b/apps/website/screens/components/image/ImagePageLayout.tsx
@@ -6,17 +6,17 @@ import { ReactNode } from "react";
const ImagePageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/image" },
- { label: "Usage", path: "/components/image/usage" },
+ { label: "Overview", path: "/components/image" },
+ { label: "Code", path: "/components/image/code" },
];
return (
-
+
-
+
- The Image component is used to embed images in Halstack-based user interfaces.
-
+ The image component is used to embed images in Halstack-based user interfaces.
+
{children}
diff --git a/apps/website/screens/components/image/code/ImageCodePage.tsx b/apps/website/screens/components/image/code/ImageCodePage.tsx
index 3a5adb2ddf..8355027ca5 100644
--- a/apps/website/screens/components/image/code/ImageCodePage.tsx
+++ b/apps/website/screens/components/image/code/ImageCodePage.tsx
@@ -1,178 +1,180 @@
import { DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Example from "@/common/example/Example";
import basic from "./examples/basicUsage";
import StatusBadge from "@/common/StatusBadge";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
title: "Props",
content: (
-
-
Name
-
Type
-
Description
-
Default
-
-
-
-
-
- alt
-
-
-
- string
-
-
- Alternative text description displayed when the specified image is not loaded. See{" "}
-
- MDN
- {" "}
- and the{" "}
-
- alt decision tree
- {" "}
- of W3C for further information.
-
-
-
-
-
-
caption
-
- string
-
-
- Image legend with a descriptive purpose. It is placed below the image and is complementary to the{" "}
- alt attribute, which is required regardless of the presence of the caption or not.
-
-
-
-
-
-
lazyLoading
-
- boolean
-
-
- If true, the image will be loaded only when it is visible on the screen (lazy loading). Otherwise and by
- default, the image will be loaded as soon as the component is mounted (eager loading).
-
-
- false
-
-
-
-
-
-
- src
-
-
-
- string
-
-
URL of the image.
-
-
-
-
-
srcSet
-
- string
-
-
- List of one or more strings separated by commas indicating a set of possible images for the user agent to
- use. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
-
-
-
-
sizes
-
- string
-
-
- One or more strings separated by commas, indicating a set of source sizes. If the srcSet{" "}
- attribute is absent or contains no values with a width descriptor, then this attribute has no effect. See{" "}
-
- MDN
- {" "}
- for further information.
-
- Sets the object-fit CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- 'fill'
-
-
-
-
objectPosition
-
- string
-
-
- Sets the object-position CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
-
-
- '50% 50%'
-
-
-
-
onLoad
-
- {"React.ReactEventHandler "}
-
-
This function will be called when the image is loaded.
-
-
-
-
-
onError
-
- {"React.ReactEventHandler "}
-
-
This function will be called when the image fails to load.
-
-
-
+
+
+
Name
+
Type
+
Description
+
Default
+
+
+
+
+
+
+
+ alt
+
+
+
+ string
+
+
+ Alternative text description displayed when the specified image is not loaded. See{" "}
+
+ MDN
+ {" "}
+ and the{" "}
+
+ alt decision tree
+ {" "}
+ of W3C for further information.
+
+
-
+
+
+
caption
+
+ string
+
+
+ Image legend with a descriptive purpose. It is placed below the image and is complementary to the{" "}
+ alt attribute, which is required regardless of the presence of the caption or not.
+
+
-
+
+
+
height
+
+ string
+
+
Sets the rendered height of the image.
+
-
+
+
+
lazyLoading
+
+ boolean
+
+
+ If true, the image will be loaded only when it is visible on the screen (lazy loading). Otherwise and by
+ default, the image will be loaded as soon as the component is mounted (eager loading).
+
+ Sets the object-fit CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'fill'
+
+
+
+
objectPosition
+
+ string
+
+
+ Sets the object-position CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ '50% 50%'
+
+
+
+
onError
+
+ {"React.ReactEventHandler "}
+
+
This function will be called when the image fails to load.
+
-
+
+
+
onLoad
+
+ {"React.ReactEventHandler "}
+
+
This function will be called when the image is loaded.
+
-
+
+
+
sizes
+
+ string
+
+
+ One or more strings separated by commas, indicating a set of source sizes. If the srcSet{" "}
+ attribute is absent or contains no values with a width descriptor, then this attribute has no effect. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
-
+
+
+
+
+
+ src
+
+
+
+ string
+
+
URL of the image.
+
-
+
+
+
srcSet
+
+ string
+
+
+ List of one or more strings separated by commas indicating a set of possible images for the user agent to
+ use. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
-
+
+
+
width
+
+ string
+
+
Sets the rendered width of the image.
+
-
+
+
),
},
@@ -187,15 +189,11 @@ const sections = [
},
];
-const ImageCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const ImageCodePage = () => (
+
+
+
+
+);
export default ImageCodePage;
diff --git a/apps/website/screens/components/image/code/examples/basicUsage.ts b/apps/website/screens/components/image/code/examples/basicUsage.ts
deleted file mode 100644
index 7b31f43eb0..0000000000
--- a/apps/website/screens/components/image/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { DxcImage, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcImage,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/image/code/examples/basicUsage.tsx b/apps/website/screens/components/image/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..b4b7a2fe69
--- /dev/null
+++ b/apps/website/screens/components/image/code/examples/basicUsage.tsx
@@ -0,0 +1,21 @@
+import { DxcImage, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcImage,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/image/overview/ImageOverviewPage.tsx b/apps/website/screens/components/image/overview/ImageOverviewPage.tsx
new file mode 100644
index 0000000000..07e016a89d
--- /dev/null
+++ b/apps/website/screens/components/image/overview/ImageOverviewPage.tsx
@@ -0,0 +1,173 @@
+import { DxcParagraph, DxcFlex, DxcBulletedList } from "@dxc-technology/halstack-react";
+import Code from "@/common/Code";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Image from "@/common/Image";
+import anatomy from "./images/image_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The image component serves as a versatile tool for efficiently loading and displaying visual content across
+ diverse contexts within your application. This powerful component is designed to optimize performance while
+ enhancing the overall user experience. By leveraging its capabilities, developers can seamlessly integrate
+ images into their projects, ensuring smooth rendering and responsive behavior.
+
+
+ To maximize the potential of the Image component and create visually appealing, high-performing applications,
+ it's crucial to adhere to certain best practices and usage guidelines. These recommendations encompass various
+ aspects of image implementation, from technical considerations to user-centric design principles. By following
+ these guidelines, you can ensure that your images not only load quickly and efficiently but also contribute
+ positively to the user's interaction with your application.
+
+
+ In the sections that follow, we'll delve into a comprehensive set of best practices and usage guidelines.
+ These insights will help you optimize performance, enhance accessibility, and create a more engaging visual
+ experience for your users across different devices and contexts.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Image: a visual element used to illustrate content, provide context, or support
+ storytelling. It should be relevant and meaningful, helping users better understand the subject or message
+ being conveyed.
+
+
+ Caption(Optional): a short piece of descriptive text placed below the image. It
+ provides context, credits, or additional explanation for the image, improving accessibility and user
+ comprehension.
+
+
+
+ ),
+ },
+ {
+ title: "Accessibility",
+ content: (
+ <>
+
+ The Image component should always include an alt property to describe the content of the image.
+ This is important for users who rely on screen readers to understand the content of the page. The alt text
+ should be a short description of the image content.
+
+
+ If an image is purely decorative, use an empty value (alt="") to indicate this to screen readers,
+ preventing unnecessary noise. Also, include captions when the image is an integral part of the content,
+ providing users with additional context.
+
+
+ ),
+ },
+ {
+ title: "Aspect ratio and cropping",
+ content: (
+
+
+ Preserve aspect ratio. The aspect ratio of an image should generally be preserved, unless
+ explicitly specified otherwise by the design.
+
+
+ Avoid distortion. When resizing images, avoid stretching or squashing them to prevent
+ distortion. Instead, use object-fit to set how the image is displayed or control the dimensions
+ through the container.
+
+
+ Thumbnails and zoom. When displaying thumbnails or zoomed images, ensure that the image is
+ cropped appropriately to focus on the most relevant content.
+
+
+ ),
+ },
+ {
+ title: "Considerations for background images",
+ content: (
+
+
+ Image as content vs. background. If the image is essential content, use the Image component.
+ For decorative backgrounds, consider using CSS background images to keep content and design separate.
+
+
+ Contrast and readability. Ensure sufficient contrast between background images and overlaid
+ text. This may require applying filters or overlays to the image.
+
+
+ ),
+ },
+ {
+ title: "Responsiveness",
+ content: (
+
+ An image should always adapt fluidly to the size of its container, ensuring that it maintains its aspect ratio
+ unless otherwise specified. To achieve this, it's important to define the width and height properties to ensure
+ images are loaded with known dimensions, which helps maintain layout stability and reduces cumulative layout
+ shifts. When designing for multiple devices, leveraging responsive image techniques, such as the{" "}
+ srcset and
+ sizes props, ensures that the appropriate resolution is served based on the user's screen size and
+ the layout's space allocation. This not only improves performance but also optimizes the experience across
+ different viewports.
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use high-quality images: always use high-resolution images to deliver a crisp and clear
+ display, especially on high-density (retina) screens. This ensures a professional look and prevents
+ pixelation.
+
+
+ Optimize images: compress and optimize images for the web to minimize file sizes. Reducing
+ load times and bandwidth consumption is crucial for performance, especially on mobile devices.
+
+
+ Leverage modern formats: whenever possible, use newer image formats like WebP for improved
+ compression without sacrificing quality. Be sure to provide fallback formats for browsers that don't support
+ them.
+
+
+ Allow lazy loading: implement lazy loading (loading="lazy") for images that
+ appear later on the page (below the fold). This helps speed up initial page loads and improve overall
+ performance.
+
+
+ Use responsive image techniques: make use of srcset and sizes props
+ to serve images that adapt to different screen resolutions and sizes, ensuring the best display quality across
+ devices.
+
+
+ Avoid using images for text content: text embedded within images reduces accessibility and
+ harms SEO. Always use HTML text to ensure readability by screen readers and search engines.
+
+
+ Limit decorative images: avoid overloading pages with unnecessary decorative images. This not
+ only reduces performance but can also distract users from the main content.
+
+
+ Avoid images for icons: use scalable vector graphics (SVGs) instead of images for icons. SVGs
+ offer better performance, scalability, and accessibility across various screen sizes.
+
+
+ ),
+ },
+];
+
+const ImageOverviewPage = () => (
+
+
+
+
+);
+
+export default ImageOverviewPage;
diff --git a/apps/website/screens/components/image/overview/images/image_anatomy.png b/apps/website/screens/components/image/overview/images/image_anatomy.png
new file mode 100644
index 0000000000..87e669238e
Binary files /dev/null and b/apps/website/screens/components/image/overview/images/image_anatomy.png differ
diff --git a/apps/website/screens/components/image/usage/ImageUsagePage.tsx b/apps/website/screens/components/image/usage/ImageUsagePage.tsx
deleted file mode 100644
index cdb24b8e7d..0000000000
--- a/apps/website/screens/components/image/usage/ImageUsagePage.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { DxcImage, DxcParagraph, DxcFlex, DxcBulletedList } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-
-const sections = [
- {
- title: "Overview",
- content: (
- <>
-
- The Image component serves as a versatile tool for efficiently loading and displaying visual content across
- diverse contexts within your application. This powerful component is designed to optimize performance while
- enhancing the overall user experience. By leveraging its capabilities, developers can seamlessly integrate
- images into their projects, ensuring smooth rendering and responsive behavior.
-
-
- To maximize the potential of the Image component and create visually appealing, high-performing applications,
- it's crucial to adhere to certain best practices and usage guidelines. These recommendations encompass various
- aspects of image implementation, from technical considerations to user-centric design principles. By following
- these guidelines, you can ensure that your images not only load quickly and efficiently but also contribute
- positively to the user's interaction with your application.
-
-
- In the sections that follow, we'll delve into a comprehensive set of best practices and usage guidelines.
- These insights will help you optimize performance, enhance accessibility, and create a more engaging visual
- experience for your users across different devices and contexts.
-
-
- ),
- },
- {
- title: "Accessibility",
- content: (
- <>
-
- The Image component should always include an alt property to describe the content of the image.
- This is important for users who rely on screen readers to understand the content of the page. The alt text
- should be a short description of the image content.
-
-
- If an image is purely decorative, use an empty value (alt="") to indicate this to screen readers,
- preventing unnecessary noise. Also, include captions when the image is an integral part of the content,
- providing users with additional context.
-
-
- ),
- },
- {
- title: "Aspect ratio and cropping",
- content: (
-
-
- Preserve aspect ratio. The aspect ratio of an image should generally be preserved, unless
- explicitly specified otherwise by the design.
-
-
- Avoid distortion. When resizing images, avoid stretching or squashing them to prevent
- distortion. Instead, use object-fit to set how the image is displayed or control the dimensions
- through the container.
-
-
- Thumbnails and zoom. When displaying thumbnails or zoomed images, ensure that the image is
- cropped appropriately to focus on the most relevant content.
-
-
- ),
- },
- {
- title: "Considerations for background images",
- content: (
-
-
- Image as content vs. background. If the image is essential content, use the Image component.
- For decorative backgrounds, consider using CSS background images to keep content and design separate.
-
-
- Contrast and readability. Ensure sufficient contrast between background images and overlaid
- text. This may require applying filters or overlays to the image.
-
-
- ),
- },
- {
- title: "Responsiveness",
- content: (
-
- An image should always adapt fluidly to the size of its container, ensuring that it maintains its aspect ratio
- unless otherwise specified. To achieve this, it's important to define the width and height properties to ensure
- images are loaded with known dimensions, which helps maintain layout stability and reduces cumulative layout
- shifts. When designing for multiple devices, leveraging responsive image techniques, such as the{" "}
- srcset and
- sizes props, ensures that the appropriate resolution is served based on the user's screen size and
- the layout's space allocation. This not only improves performance but also optimizes the experience across
- different viewports.
-
- ),
- },
- {
- title: "Best practices",
- content: (
-
-
- Use high-quality images. Always use high-resolution images to deliver a crisp and clear
- display, especially on high-density (retina) screens. This ensures a professional look and prevents
- pixelation.
-
-
- Optimize images. Compress and optimize images for the web to minimize file sizes. Reducing
- load times and bandwidth consumption is crucial for performance, especially on mobile devices.
-
-
- Leverage modern formats. Whenever possible, use newer image formats like WebP for improved
- compression without sacrificing quality. Be sure to provide fallback formats for browsers that don't support
- them.
-
-
- Allow lazy loading. Implement lazy loading (loading="lazy") for images that
- appear later on the page (below the fold). This helps speed up initial page loads and improve overall
- performance.
-
-
- Use responsive image techniques. Make use of srcset and sizes props
- to serve images that adapt to different screen resolutions and sizes, ensuring the best display quality across
- devices.
-
-
- Avoid using images for text content. Text embedded within images reduces accessibility and
- harms SEO. Always use HTML text to ensure readability by screen readers and search engines.
-
-
- Limit decorative images. Avoid overloading pages with unnecessary decorative images. This not
- only reduces performance but can also distract users from the main content.
-
-
- Avoid images for icons. Use scalable vector graphics (SVGs) instead of images for icons. SVGs
- offer better performance, scalability, and accessibility across various screen sizes.
-
-
- ),
- },
-];
-
-const ImageUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ImageUsagePage;
diff --git a/apps/website/screens/components/inset/InsetPageLayout.tsx b/apps/website/screens/components/inset/InsetPageLayout.tsx
index 4e97fae4e0..b247b18e6a 100644
--- a/apps/website/screens/components/inset/InsetPageLayout.tsx
+++ b/apps/website/screens/components/inset/InsetPageLayout.tsx
@@ -6,18 +6,17 @@ import { ReactNode } from "react";
const InsetPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/inset" },
- { label: "Usage", path: "/components/inset/usage" },
- { label: "Specifications", path: "/components/inset/specifications" },
+ { label: "Overview", path: "/components/inset" },
+ { label: "Code", path: "/components/inset/code" },
];
return (
-
+
-
+ Inset layout applies positive spacing scale to its child nodes.
-
+
{children}
diff --git a/apps/website/screens/components/inset/code/InsetCodePage.tsx b/apps/website/screens/components/inset/code/InsetCodePage.tsx
index a4771d553a..9cf2c9e324 100644
--- a/apps/website/screens/components/inset/code/InsetCodePage.tsx
+++ b/apps/website/screens/components/inset/code/InsetCodePage.tsx
@@ -1,96 +1,96 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import customSides from "./examples/customSides";
-import TableCode from "@/common/TableCode";
+import { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
-const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;
-
const sections = [
{
title: "Props",
content: (
-
-
Name
-
Type
-
Description
-
Default
-
-
-
space
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to all sides.
-
-
-
-
-
horizontal
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the left and right sides.
-
-
-
-
-
vertical
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the top and bottom sides.
-
-
-
-
-
top
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the top side.
-
-
-
-
-
right
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the right side.
-
-
-
-
-
bottom
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the bottom side.
-
-
-
-
-
-
left
-
- {coreSpacingTokensTypeString}
-
-
Applies the spacing scale to the left side.
-
-
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
Custom content inside the inset.
-
-
-
+
+
+
Name
+
Type
+
Description
+
Default
+
+
+
+
+
bottom
+
+ string
+
+
Applies the spacing scale to the bottom side.
+
-
+
+
+
+
+
+ children
+
+
+
+ React.ReactNode
+
+
Custom content inside the inset.
+
-
+
+
+
horizontal
+
+ string
+
+
Applies the spacing scale to the left and right sides.
+
-
+
+
+
left
+
+ string
+
+
Applies the spacing scale to the left side.
+
-
+
+
+
right
+
+ string
+
+
Applies the spacing scale to the right side.
+
-
+
+
+
space
+
+ string
+
+
Applies the spacing scale to all sides.
+
-
+
+
+
top
+
+ string
+
+
Applies the spacing scale to the top side.
+
-
+
+
+
vertical
+
+ string
+
+
Applies the spacing scale to the top and bottom sides.
+
-
+
+
),
},
@@ -109,15 +109,11 @@ const sections = [
},
];
-const InsetCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const InsetCodePage = () => (
+
+
+
+
+);
export default InsetCodePage;
diff --git a/apps/website/screens/components/inset/code/examples/basicUsage.ts b/apps/website/screens/components/inset/code/examples/basicUsage.ts
deleted file mode 100644
index 7ceb8e705e..0000000000
--- a/apps/website/screens/components/inset/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "@/common/Placeholder";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcInset,
- DxcFlex,
- Placeholder,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/inset/code/examples/basicUsage.tsx b/apps/website/screens/components/inset/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..3d46c84331
--- /dev/null
+++ b/apps/website/screens/components/inset/code/examples/basicUsage.tsx
@@ -0,0 +1,24 @@
+import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/inset/code/examples/customSides.ts b/apps/website/screens/components/inset/code/examples/customSides.ts
deleted file mode 100644
index 8c5a252f9a..0000000000
--- a/apps/website/screens/components/inset/code/examples/customSides.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import Placeholder from "@/common/Placeholder";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcInset,
- DxcFlex,
- Placeholder,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/inset/code/examples/customSides.tsx b/apps/website/screens/components/inset/code/examples/customSides.tsx
new file mode 100644
index 0000000000..b870d743cb
--- /dev/null
+++ b/apps/website/screens/components/inset/code/examples/customSides.tsx
@@ -0,0 +1,29 @@
+import { DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import Placeholder from "@/common/Placeholder";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcFlex,
+ Placeholder,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/inset/overview/InsetOverviewPage.tsx b/apps/website/screens/components/inset/overview/InsetOverviewPage.tsx
new file mode 100644
index 0000000000..894a872b36
--- /dev/null
+++ b/apps/website/screens/components/inset/overview/InsetOverviewPage.tsx
@@ -0,0 +1,63 @@
+import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The inset component is a container that adds spacing around its content, enhancing visual separation between
+ elements in a layout. It offers customizable spacing options, allowing for greater design flexibility.
+ Typically, it is used alongside other components to create a cohesive and well-structured layout.
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Enhance visual hierarchy: use the inset component to create clear separation between elements
+ in a layout.
+
+
+ Maintain balance and aesthetics: choose appropriate spacing values to ensure a
+ well-proportioned and visually appealing design.
+
+
+ Avoid unnecessary clutter: excessive use of the Inset component may lead to a fragmented or
+ overcrowded layout.
+
+
+ Ensure consistency with design tokens: whenever possible, use the design tokens provided by
+ the Halstack Design System, to maintain visual and functional consistency across applications, even though the
+ component allows custom values.
+
+
+ Combine with other layout techniques: use this component alongside{" "}
+
+ flex
+ {" "}
+ and{" "}
+
+ grid
+ {" "}
+ components to create consistent and semantic layouts.
+
+
+ ),
+ },
+];
+
+const InsetOverviewPage = () => (
+
+
+
+
+);
+
+export default InsetOverviewPage;
diff --git a/apps/website/screens/components/inset/specs/InsetSpecsPage.tsx b/apps/website/screens/components/inset/specs/InsetSpecsPage.tsx
deleted file mode 100644
index 2777ef89c8..0000000000
--- a/apps/website/screens/components/inset/specs/InsetSpecsPage.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import insetSpecs from "./images/inset_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
- Positive space varies depending on the REM values and the approach to implementation.
-
-
- ),
- },
-];
-
-const InsetSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default InsetSpecsPage;
diff --git a/apps/website/screens/components/inset/specs/images/inset_specs.png b/apps/website/screens/components/inset/specs/images/inset_specs.png
deleted file mode 100644
index 5583cb33cc..0000000000
Binary files a/apps/website/screens/components/inset/specs/images/inset_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/inset/usage/InsetUsagePage.tsx b/apps/website/screens/components/inset/usage/InsetUsagePage.tsx
deleted file mode 100644
index 6ee979d9cc..0000000000
--- a/apps/website/screens/components/inset/usage/InsetUsagePage.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- Inset properties refer to the scale of the spacing used outside a container. The unit commonly used for the
- inset scale is REM, which is a measurement unit that refers to the font-size of the root element of a
- document.
-
-
- The following values of REM are commonly used in the design system: 0, 0.125,{" "}
- 0.25, 0.5, 1, 1.5, 2, 3,{" "}
- 4, and 5.
-
-
- ),
- },
-];
-
-const InsetUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default InsetUsagePage;
diff --git a/apps/website/screens/components/link/LinkPageLayout.tsx b/apps/website/screens/components/link/LinkPageLayout.tsx
index 3a2c17a655..7181dc4ac3 100644
--- a/apps/website/screens/components/link/LinkPageLayout.tsx
+++ b/apps/website/screens/components/link/LinkPageLayout.tsx
@@ -6,21 +6,21 @@ import { ReactNode } from "react";
const LinkPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/link" },
- { label: "Usage", path: "/components/link/usage" },
- { label: "Specifications", path: "/components/link/specifications" },
+ { label: "Overview", path: "/components/link" },
+ { label: "Code", path: "/components/link/code" },
];
return (
-
+
-
+
- Links are used as navigational elements. They may appear isolated, inside a sentence or paragraph or
- following the content.
+ Links serve as navigational elements, allowing users to move between pages or access related content. They
+ can appear independently, be embedded within text, or follow a section to provide additional information or
+ actions.
-
+
{children}
diff --git a/apps/website/screens/components/link/code/LinkCodePage.tsx b/apps/website/screens/components/link/code/LinkCodePage.tsx
index 3c3cfefd01..a3ba4610af 100644
--- a/apps/website/screens/components/link/code/LinkCodePage.tsx
+++ b/apps/website/screens/components/link/code/LinkCodePage.tsx
@@ -1,15 +1,13 @@
import { DxcTable, DxcParagraph, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Code from "@/common/Code";
import Example from "@/common/example/Example";
import nextLink from "./examples/nextLink";
import basicUsage from "./examples/basicUsage";
import routerLink from "./examples/routerLink";
import routerLink6 from "./examples/routerLink6";
import icons from "./examples/icons";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
const sections = [
@@ -27,25 +25,36 @@ const sections = [
-
disabled
- boolean
+
+
+ children
+
-
If true, the link is disabled.
- false
+ string
+
Text of the link.
+
-
-
inheritColor
+
disabled
boolean
-
If true, the color is inherited from parent.
+
If true, the link will be disabled.
false
+
+
href
+
+ string
+
+
Page to be opened when the user clicks on the link.
+
-
+
icon
@@ -59,7 +68,6 @@ const sections = [
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
symbol name with "filled_".
-
-
@@ -73,55 +81,44 @@ const sections = [
-
href
-
- string
-
-
Page to be opened when the user clicks on the link.
- If defined, the link will be displayed as a button. This function will be called when the user clicks the
- link.
+ 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.
- 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.
+ If defined, the link will be displayed as a button. This function will be called when the user clicks the
+ link.
-
@@ -188,20 +185,21 @@ const sections = [
),
},
{
- title: "React router v6",
+ title: "React router v6+",
content: (
<>
In{" "}
React Router v6
{" "}
- the prop component is no longer available so it is necessary to use hooks provided by{" "}
-
- React Router v6
+ and higher, the prop component is no longer available so it is necessary to use hooks
+ provided by the newer versions of{" "}
+
+ React Router
.
@@ -240,9 +238,7 @@ const sections = [
const LinkCodePage = () => {
return (
-
-
-
+
);
diff --git a/apps/website/screens/components/link/code/examples/basicUsage.ts b/apps/website/screens/components/link/code/examples/basicUsage.ts
deleted file mode 100644
index c2af158ea6..0000000000
--- a/apps/website/screens/components/link/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DxcLink, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
- This is a text with a Link to another page.
-
- );
-}`;
-
-const scope = {
- DxcLink,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/link/code/examples/basicUsage.tsx b/apps/website/screens/components/link/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..459c87c30e
--- /dev/null
+++ b/apps/website/screens/components/link/code/examples/basicUsage.tsx
@@ -0,0 +1,16 @@
+import { DxcLink, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+ This is a text with a Link to another page.
+
+ );
+}`;
+
+const scope = {
+ DxcLink,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/link/code/examples/icons.ts b/apps/website/screens/components/link/code/examples/icons.ts
deleted file mode 100644
index db9540937c..0000000000
--- a/apps/website/screens/components/link/code/examples/icons.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DxcLink, DxcInset, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const icon = (
-
- );
-
- return (
-
-
-
- This is a text with a Link with icon.
-
-
- This is a text with a Link with icon.
-
-
-
- );
-}`;
-
-const scope = {
- DxcLink,
- DxcParagraph,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/link/code/examples/icons.tsx b/apps/website/screens/components/link/code/examples/icons.tsx
new file mode 100644
index 0000000000..de2b256842
--- /dev/null
+++ b/apps/website/screens/components/link/code/examples/icons.tsx
@@ -0,0 +1,38 @@
+import { DxcLink, DxcInset, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const icon = (
+
+ );
+
+ return (
+
+
+
+ This is a text with a Link with icon.
+
+
+ This is a text with a Link with icon.
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcLink,
+ DxcParagraph,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/link/code/examples/nextLink.ts b/apps/website/screens/components/link/code/examples/nextLink.ts
deleted file mode 100644
index 24bf29fc86..0000000000
--- a/apps/website/screens/components/link/code/examples/nextLink.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { DxcLink, DxcInset } from "@dxc-technology/halstack-react";
-import Link from "next/link";
-import { forwardRef } from "react";
-
-const code = `() => {
- const CustomLink = forwardRef(
- ({ onClick, href, children, ...other }, ref) => {
- return (
-
- {children}
-
- );
- }
- );
- return (
-
- This is a text with a
-
- next
- {" "}
- link.
-
- );
-}`;
-
-const scope = {
- DxcLink,
- Link,
- forwardRef,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/link/code/examples/nextLink.tsx b/apps/website/screens/components/link/code/examples/nextLink.tsx
new file mode 100644
index 0000000000..24c0a2c56b
--- /dev/null
+++ b/apps/website/screens/components/link/code/examples/nextLink.tsx
@@ -0,0 +1,33 @@
+import { DxcLink, DxcInset } from "@dxc-technology/halstack-react";
+import Link from "next/link";
+import { forwardRef } from "react";
+
+const code = `() => {
+ const CustomLink = forwardRef(
+ ({ onClick, href, children, ...other }, ref) => {
+ return (
+
+ {children}
+
+ );
+ }
+ );
+ return (
+
+ This is a text with a
+
+ next
+ {" "}
+ link.
+
+ );
+}`;
+
+const scope = {
+ DxcLink,
+ Link,
+ forwardRef,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/link/code/examples/routerLink.tsx b/apps/website/screens/components/link/code/examples/routerLink.tsx
index d10c01b037..16adc550ed 100644
--- a/apps/website/screens/components/link/code/examples/routerLink.tsx
+++ b/apps/website/screens/components/link/code/examples/routerLink.tsx
@@ -1,19 +1,23 @@
import { DxcLink, DxcInset } from "@dxc-technology/halstack-react";
-import { ReactNode } from "react";
+import { ElementType } from "react";
-type routerProps = {
+type RouterLinkProps = {
to: string;
- component: ReactNode;
+ component?: ElementType;
children: string;
-};
+} & React.ComponentProps;
-const RouterLink = ({ to, component, children }: routerProps) => {
- return {children};
+const RouterLink = ({ to, component: Component = DxcLink, children, ...other }: RouterLinkProps) => {
+ return (
+
+ {children}
+
+ );
};
const code = `() => {
return (
-
+
This is a text with a
React Router v5
{" "}link.
diff --git a/apps/website/screens/components/link/code/examples/routerLink6.tsx b/apps/website/screens/components/link/code/examples/routerLink6.tsx
index e0949ff9bc..7c8630f0ff 100644
--- a/apps/website/screens/components/link/code/examples/routerLink6.tsx
+++ b/apps/website/screens/components/link/code/examples/routerLink6.tsx
@@ -1,47 +1,38 @@
import { DxcLink, DxcInset } from "@dxc-technology/halstack-react";
+import { forwardRef } from "react";
const useHref = (to: string) => {
console.log(to);
};
-type routerProps = {
- replace: string;
- state: string;
- target: string;
-};
-
-const useLinkClickHandler = (to: string, { replace, state, target }: routerProps) => {
- console.log("useClickHandler");
+const useNavigate = () => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ return (to: string, options?: { replace?: boolean; state?: any }) => {
+ console.log(`Use navigate mock function called "${to}"`, options);
+ };
};
const code = `() => {
- const CustomLink = React.forwardRef(
- ({ onClick, replace = false, state, target, to, ...rest }, ref) => {
- let href = useHref(to);
- let handleClick = () => (useLinkClickHandler(to, {
- replace,
- state,
- target,
- }));
+ const CustomLink = forwardRef(
+ ({ children, to, replace = false, state, ...rest }, ref) => {
+ const navigate = useNavigate();
+
+ const handleClick = () => {
+ navigate(to, { replace, state });
+ };
return (
- {
- handleClick(event);
- }}
- ref={ref}
- target={target}
- />
+
+ {children}
+
);
}
);
return (
-
+
This is a text with a
- React Router v6
+ React Router v6+
{" "}
link.
@@ -49,10 +40,11 @@ const code = `() => {
}`;
const scope = {
+ DxcInset,
DxcLink,
+ forwardRef,
useHref,
- useLinkClickHandler,
- DxcInset,
+ useNavigate,
};
export default { code, scope };
diff --git a/apps/website/screens/components/link/overview/LinkOverviewPage.tsx b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx
new file mode 100644
index 0000000000..d7e2195621
--- /dev/null
+++ b/apps/website/screens/components/link/overview/LinkOverviewPage.tsx
@@ -0,0 +1,78 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Image from "@/common/Image";
+import linkAnatomy from "./images/link-anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Links are essential interactive elements that enable users to navigate between pages, access
+ external resources, or explore related content. They can be placed within text, used as standalone elements, or
+ positioned after sections to provide additional actions or information. Links enhance usability by clearly
+ indicating their purpose and destination, ensuring a seamless and intuitive browsing experience. Proper usage of
+ links helps maintain accessibility and improves content discoverability across digital products.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Icon: an optional visual element that can be used to represent more graphically the purpose
+ of the link. It can be placed before or after the link it's representing.
+
+
+ Label: displays the textual content of the link, conveying where exactly it's going to
+ navigate the component.
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Use clear and descriptive labels: link labels should clearly indicate what users can expect
+ when they click. Avoid generic labels like "click here".
+
+
+ Indicate external links appropriately: If a link directs users to an external site or opens
+ a new tab, provide an appropriate icon to set expectations.
+
+
+ Avoid excessive linking: too many links within a paragraph can overwhelm users and make
+ content harder to read. Use links strategically.
+
+
+ Use appropriate link placement: position links logically within content, either integrated
+ into sentences or placed at the end of a section for additional navigation.
+
+
+ Differentiate links from buttons: links are primarily for navigation, while buttons trigger
+ actions like form submissions or modal openings. Use each element correctly.
+
+
+
+ ),
+ },
+];
+
+const LinkOverviewPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default LinkOverviewPage;
diff --git a/apps/website/screens/components/link/overview/images/link-anatomy.png b/apps/website/screens/components/link/overview/images/link-anatomy.png
new file mode 100644
index 0000000000..09a8e27af0
Binary files /dev/null and b/apps/website/screens/components/link/overview/images/link-anatomy.png differ
diff --git a/apps/website/screens/components/link/specs/LinkSpecsPage.tsx b/apps/website/screens/components/link/specs/LinkSpecsPage.tsx
deleted file mode 100644
index b9ae6b4490..0000000000
--- a/apps/website/screens/components/link/specs/LinkSpecsPage.tsx
+++ /dev/null
@@ -1,347 +0,0 @@
-import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import linkSpecs from "./images/link_specs.png";
-import linkStates from "./images/link_states.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- States: enabled, hover, focus, active,{" "}
- visited and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const NavTabsSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default NavTabsSpecsPage;
diff --git a/apps/website/screens/components/nav-tabs/specs/images/navTabs_anatomy.png b/apps/website/screens/components/nav-tabs/specs/images/navTabs_anatomy.png
deleted file mode 100644
index 3f03145c9b..0000000000
Binary files a/apps/website/screens/components/nav-tabs/specs/images/navTabs_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/nav-tabs/usage/NavTabsUsagePage.tsx b/apps/website/screens/components/nav-tabs/usage/NavTabsUsagePage.tsx
deleted file mode 100644
index bd9704ed79..0000000000
--- a/apps/website/screens/components/nav-tabs/usage/NavTabsUsagePage.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import navTabsNavigation from "./images/navTabs_navigation.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- Nav tabs organize and allow navigation across different pages of content that are related and at the same
- level of hierarchy. They are commonly used in the header of a page.
-
-
-
- Use nav tabs for page or site navigation when dividing content into different pages. Please take into
- account the site navigation as the main difference between nav tabs and regular tabs in order to use them.
-
- The content should follow an organized structure and hierarchy.
- Text labels should be brief and clearly related to the content.
-
-
- For general tabs usage, refer to the{" "}
- tabs usage section.
-
-
- ),
- },
- {
- title: "Navigation",
- content: (
- <>
-
- Nav tabs can be used both to navigate within a page as well as to external pages and links.
-
-
-
-
-
- ),
- },
-];
-
-const NavTabsUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default NavTabsUsagePage;
diff --git a/apps/website/screens/components/nav-tabs/usage/images/navTabs_navigation.png b/apps/website/screens/components/nav-tabs/usage/images/navTabs_navigation.png
deleted file mode 100644
index 287765788d..0000000000
Binary files a/apps/website/screens/components/nav-tabs/usage/images/navTabs_navigation.png and /dev/null differ
diff --git a/apps/website/screens/components/number-input/NumberInputPageLayout.tsx b/apps/website/screens/components/number-input/NumberInputPageLayout.tsx
index dabcadd6b2..c26a0eed84 100644
--- a/apps/website/screens/components/number-input/NumberInputPageLayout.tsx
+++ b/apps/website/screens/components/number-input/NumberInputPageLayout.tsx
@@ -6,24 +6,20 @@ import { ReactNode } from "react";
const NumberInputPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/number-input" },
- { label: "Usage", path: "/components/number-input/usage" },
- {
- label: "Specifications",
- path: "/components/number-input/specifications",
- },
+ { label: "Overview", path: "/components/number-input" },
+ { label: "Code", path: "/components/number-input/code" },
];
return (
-
+
-
-
+
+
- The number input is a text input component that only allows numerical values and it has controls for
- incrementing or decrementing them.
+ Number inputs are fields specifically used to capture numeric user input in a structured and accessible
+ format.
-
+
{children}
diff --git a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx
index 9536cda0a0..dc25c8b21a 100644
--- a/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx
+++ b/apps/website/screens/components/number-input/code/NumberInputCodePage.tsx
@@ -1,13 +1,11 @@
import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import errorUsage from "./examples/errorHandling";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
const sections = [
@@ -25,54 +23,40 @@ const sections = [
-
defaultValue
+
ariaLabel
string
-
Initial value of the input element, only when it is uncontrolled.
-
-
-
-
-
value
- string
+ Specifies a string to be used as the name for the number input element when no label is
+ provided.
- Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
- internally by the component.
+ 'Number input'
-
-
-
label
+
autocomplete
string
-
Text to be placed above the number input.
-
-
-
-
-
name
- string
+ HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
+ provide automated assistance in filling out the input value. Its value must be one of all the possible
+ values of the HTML autocomplete attribute. See{" "}
+ MDN{" "}
+ for further information.
-
Name attribute of the input element.
-
-
-
-
-
helperText
- string
+ 'off'
-
Helper text to be placed above the number.
-
-
-
placeholder
+
defaultValue
string
-
Text to be put as placeholder of the number.
+
Initial value of the input element, only when it is uncontrolled.
-
@@ -86,55 +70,52 @@ const sections = [
-
optional
-
- boolean
-
+
error
- If true, the number will be optional, showing the text '(Optional)' next to the label. Otherwise, the
- field will be considered required and an error will be passed as a parameter to the onBlur{" "}
- and onChange functions when it has not been filled.
+ string
- false
+ If it is a defined value and also a truthy string, the component will change its appearance, showing the
+ error below the input component. If the defined value is an empty string, it will reserve a space below
+ the component for a future error, but it would not change its look. In case of being undefined or null,
+ both the appearance and the space for the error message would not be modified.
+
-
-
readOnly
-
- boolean
-
-
- If true, the component will not be mutable, meaning the user can not edit the control. The value won't
- change when pressing on the up or down arrows and neither on the spin buttons.
-
+ 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.
-
Suffix to be placed after the number value.
-
-
min
+
max
number
- Minimum value allowed by the number input. If the typed value by the user is lower than min, the{" "}
+ Maximum value allowed by the number input. If the typed value by the user surpasses max, the{" "}
onBlur and onChange functions will be called with the current value and an
internal error informing that the current value is not correct. If a valid state is reached, the error
parameter will not be defined in both events.
@@ -142,12 +123,12 @@ const sections = [
-
-
max
+
min
number
- Maximum value allowed by the number input. If the typed value by the user surpasses max, the{" "}
+ Minimum value allowed by the number input. If the typed value by the user is lower than min, the{" "}
onBlur and onChange functions will be called with the current value and an
internal error informing that the current value is not correct. If a valid state is reached, the error
parameter will not be defined in both events.
@@ -155,14 +136,24 @@ const sections = [
-
-
step
+
name
- number
+ string
-
The step interval to use when using the up and down arrows to adjust the value.
+ This function will be called when the input element loses the focus. An object including the input value
+ and the error (if the value entered is not valid) will be passed to this function. If there is no error,{" "}
+ error will not be defined.
- This function will be called when the input element loses the focus. An object including the input value
- and the error (if the value entered is not valid) will be passed to this function. If there is no error,{" "}
- error will not be defined.
+ If true, the number will be optional, showing the text '(Optional)' next to the label. Otherwise, the
+ field will be considered required and an error will be passed as a parameter to the onBlur{" "}
+ and onChange functions when it has not been filled.
+
+
+ false
-
-
-
error
+
placeholder
string
+
Text to be put as placeholder of the number.
+
-
+
+
+
prefix
- If it is a defined value and also a truthy string, the component will change its appearance, showing the
- error below the input component. If the defined value is an empty string, it will reserve a space below
- the component for a future error, but it would not change its look. In case of being undefined or null,
- both the appearance and the space for the error message would not be modified.
+ string
+
Prefix to be placed before the number value.
-
-
autocomplete
+
readOnly
- string
+ boolean
- HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
- provide automated assistance in filling out the input value. Its value must be one of all the possible
- values of the HTML autocomplete attribute. See{" "}
- MDN{" "}
- for further information.
+ If true, the component will not be mutable, meaning the user can not edit the control. The value won't
+ change when pressing on the up or down arrows and neither on the spin buttons.
- 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.
+
+
+ showControls
+
+
+
+ boolean
+
+
Decides whether the number input displays or not the spin buttons to adjust the value.
+
+ true
-
-
size
@@ -239,55 +244,45 @@ const sections = [
-
tabIndex
+
step
number
+
The step interval to use when using the spin buttons to adjust the value.
- Value of the tabindex attribute.
-
-
- 0
+ 1
-
ref
+
suffix
- {"React.Ref"}
+ string
-
Reference to the component.
+
Suffix to be placed after the number value.
-
-
ariaLabel
+
tabIndex
- string
+ number
- Specifies a string to be used as the name for the number input element when no label is
- provided.
+ Value of the tabindex attribute.
- 'Number input'
+ 0
+
value
-
-
- showControls
-
-
-
- boolean
-
-
- Decides whether the number input has actions to increase or decrease the value, following the defined
- step.
+ string
- true
+ Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
+ internally by the component.
+
-
@@ -312,15 +307,11 @@ const sections = [
},
];
-const NumberInputCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const NumberInputCodePage = () => (
+
+
+
+
+);
export default NumberInputCodePage;
diff --git a/apps/website/screens/components/number-input/code/examples/controlled.ts b/apps/website/screens/components/number-input/code/examples/controlled.ts
deleted file mode 100644
index 25af369279..0000000000
--- a/apps/website/screens/components/number-input/code/examples/controlled.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DxcNumberInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const onChange = ({ value }) => {
- setValue(value);
- };
- const onBlur = ({ value }) => {
- setValue(value);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcNumberInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/number-input/code/examples/controlled.tsx b/apps/website/screens/components/number-input/code/examples/controlled.tsx
new file mode 100644
index 0000000000..4be172c271
--- /dev/null
+++ b/apps/website/screens/components/number-input/code/examples/controlled.tsx
@@ -0,0 +1,31 @@
+import { DxcNumberInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+ const onBlur = ({ value }) => {
+ setValue(value);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcNumberInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/number-input/code/examples/errorHandling.ts b/apps/website/screens/components/number-input/code/examples/errorHandling.ts
deleted file mode 100644
index 3082ace2c8..0000000000
--- a/apps/website/screens/components/number-input/code/examples/errorHandling.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DxcNumberInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const [errorMessage, setErrorMessage] = useState();
- const onChange = ({ value, error }) => {
- setValue(value);
- setErrorMessage(error == undefined ? "" : "Error onChange");
- };
- const onBlur = ({ value, error }) => {
- setValue(value);
- setErrorMessage(error == undefined ? "" : "Error onBlur");
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcNumberInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/number-input/code/examples/errorHandling.tsx b/apps/website/screens/components/number-input/code/examples/errorHandling.tsx
new file mode 100644
index 0000000000..05bfd4f2cb
--- /dev/null
+++ b/apps/website/screens/components/number-input/code/examples/errorHandling.tsx
@@ -0,0 +1,37 @@
+import { DxcNumberInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const [errorMessage, setErrorMessage] = useState();
+ const onChange = ({ value, error }) => {
+ setValue(value);
+ setErrorMessage(error == undefined ? "" : "Error onChange");
+ };
+ const onBlur = ({ value, error }) => {
+ setValue(value);
+ setErrorMessage(error == undefined ? "" : "Error onBlur");
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcNumberInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/number-input/code/examples/uncontrolled.ts b/apps/website/screens/components/number-input/code/examples/uncontrolled.ts
deleted file mode 100644
index b044d4b650..0000000000
--- a/apps/website/screens/components/number-input/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcNumberInput, DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import { useState, useRef } from "react";
-
-const code = `() => {
- const inputRef = useRef();
- const handleSubmit = () => {
- const input = inputRef.current.getElementsByTagName("input")[0];
- console.log(input.value);
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcNumberInput,
- DxcButton,
- DxcInset,
- DxcFlex,
- useState,
- useRef,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/number-input/code/examples/uncontrolled.tsx b/apps/website/screens/components/number-input/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..b7fab79b1c
--- /dev/null
+++ b/apps/website/screens/components/number-input/code/examples/uncontrolled.tsx
@@ -0,0 +1,34 @@
+import { DxcNumberInput, DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState, useRef } from "react";
+
+const code = `() => {
+ const inputRef = useRef();
+ const handleSubmit = () => {
+ const input = inputRef.current.getElementsByTagName("input")[0];
+ console.log(input.value);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcNumberInput,
+ DxcButton,
+ DxcInset,
+ DxcFlex,
+ useState,
+ useRef,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/number-input/overview/NumberInputOverviewPage.tsx b/apps/website/screens/components/number-input/overview/NumberInputOverviewPage.tsx
new file mode 100644
index 0000000000..c944f23e77
--- /dev/null
+++ b/apps/website/screens/components/number-input/overview/NumberInputOverviewPage.tsx
@@ -0,0 +1,286 @@
+import { DxcFlex, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import anatomy from "./images/number_anatomy.png";
+import spinButtons from "./images/number_spin_buttons.png";
+import Example from "@/common/example/Example";
+import Figure from "@/common/Figure";
+import prefixSuffix from "./examples/prefixSuffix";
+import Code from "@/common/Code";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Number inputs are essential UI elements for collecting quantitative data from users. They are
+ designed to handle numerical values such as quantities, prices, percentages, or any input that requires
+ mathematical validation or calculations. Common use cases include forms involving payment amounts, product
+ quantities, ages, measurements, or ratings.
+
+
+ Unlike text inputs, number inputs offer built-in constraints like minimum and maximum values, step intervals,
+ and automatic validation of non-numeric entries. These features help reduce errors, guide users toward valid
+ entries, and ensure consistent data formatting.
+
+
+ Proper labeling, error messaging, and the use of increment/decrement controls can further enhance usability
+ and accessibility, leading to a more efficient and user-friendly experience.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label(Optional): a descriptive text that helps users understand what information
+ is expected in the input field. It should be clear, concise, and placed near the input for better
+ readability.
+
+
+ Optional indicator(Optional): a small indicator that signals the input field is
+ not mandatory. It helps users know they can leave the field empty without causing validation errors.
+
+
+ Spin buttons increase/decrease(Optional): small interactive controls, displayed
+ as plus (+) and minus (-) icons, that allow users to increment or decrement the numeric value using mouse
+ clicks or keyboard input. These buttons improve usability by offering an alternative to manual typing, help
+ prevent entry errors, and support accessibility for users who may prefer step-based adjustments.
+
+
+ Helper text(Optional): additional text placed below the input label that provides
+ guidance, examples, or explanations to assist users in filling out the field correctly.
+
+
+ Container: the visual wrapper around the input field that provides structure, ensures
+ accessibility, and helps differentiate the input from other UI elements.
+
+
+ Placeholder/Value: a short hint displayed inside the input field before any text is
+ entered, offering a brief example or instruction on what type of data is expected. It disappears when the
+ user starts typing. The value represents the actual content entered by the user. Unlike the placeholder, the
+ value persists during interaction and is what gets submitted with the form.
+
+
+ Prefix(Optional): a visual element placed before or after the user input, like
+ currency symbols or units, to help clarify the expected data.
+
+
+
+ ),
+ },
+ {
+ title: "Form inputs",
+ content: (
+ <>
+
+ Form inputs are essential UI elements that allow users to interact with digital products by{" "}
+ entering or selecting data. Choosing the right input type and structure is key to designing
+ efficient, user-friendly forms that support task completion and data accuracy.
+
+
+ A form input (also known as a form field) is used to capture user data. Common input types include text
+ fields, date pickers, number fields, radio buttons, checkboxes, toggles, and dropdowns. Forms should always
+ include a submission method, such as a submit button, link, or keyboard trigger, to complete the interaction.
+
+
+ ),
+ subSections: [
+ {
+ title: "Shared input characteristics",
+ content: (
+ <>
+
+ Although input fields vary in type and purpose, they often share a common set of features:
+
+
+
+ Placeholder: a short hint displayed inside the input field that describes its expected
+ value or purpose.
+
+
+ Size and max length: inputs can have both a visual size (width of the field) and a
+ character limit that defines how much text can be entered.
+
+
+ Prefix or suffix: some inputs include a visual element before or after the user input,
+ like currency symbols or units, to help clarify the expected data.
+
+
+ Helper text: additional information displayed below the field to guide the user in
+ providing the correct input.
+
+
+ Optional label: inputs that are not mandatory can be marked with an "Optional" tag to
+ set clear expectations.
+
+
+
+ ),
+ },
+ {
+ title: "Common input states",
+ content: (
+ <>
+ Most inputs can also present standard interactive or informative states:
+
+
+ Disabled: this state prevents users from interacting with the field. It's typically
+ used when a value is not applicable or editable under certain conditions or roles.
+
+
+ Error: when a user enters invalid or incomplete data, the input shows an error state,
+ often accompanied by a helpful message to guide corrections.
+
+
+ Read-only: the input is visible, focusable, and hoverable, but not editable. This is
+ ideal for fields with auto-calculated values. Unlike disabled fields, read-only inputs can still be
+ submitted with the form and are part of the form data.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Using number inputs",
+ content: (
+
+ Number inputs are commonly used in forms and interfaces where users are required to provide numeric values such
+ as quantities, prices, percentages, or other measurable data. Our number input component is highly configurable,
+ allowing designers and developers to tailor it to a wide range of use cases while ensuring consistency,
+ usability, and accessibility. In this section, we will highlight the key characteristics and behaviors of our
+ number input, helping you understand how and when to use it effectively.
+
+ ),
+ subSections: [
+ {
+ title: "Actions",
+ subSections: [
+ {
+ title: "Using spin buttons",
+ content: (
+ <>
+
+ Spin buttons are one of the key interaction features of the number input. They allow users to{" "}
+ increment or decrement the value using simple clicks, rather than typing manually.
+ This is especially useful when working with step-based inputs, such as quantities or percentages, as
+ it ensures more accurate entries and improves overall efficiency for both keyboard and mouse users.
+
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Prefix and suffix",
+ content: (
+ <>
+
+ Halstack number inputs also support the use of prefixes and suffixes, which are visual elements that help
+ users quickly understand the format or context of the numeric value being entered. These
+ elements clarify what type of number is expected, such as currency, units, or percentages, and ensure
+ greater consistency in data entry.
+
+
+ This added context is especially helpful in forms with multiple numeric fields, allowing users to scan and
+ comprehend each field's purpose at a glance, ultimately improving the overall experience and reducing
+ entry errors.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ subSections: [
+ {
+ title: "General",
+ content: (
+
+
+ Always use clear labels: provide a clear and concise label to describe the expected
+ numeric input. Avoid relying solely on the placeholder to communicate the field's purpose.
+
+
+ Use helper text for additional guidance: if the expected input range, format, or units
+ might be unclear, add helper text to avoid confusion and input errors.
+
+
+ Indicate when the field is optional: use an "Optional" label when applicable to reduce
+ user hesitation or over-input.
+
+
+ Ensure consistent visual states: clearly differentiate between focus, error, disabled,
+ and read-only states using accessible visual cues and messages.
+
+
+ Set valid constraints: always define min, max, or{" "}
+ step values when the input must fall within a numeric range to improve accuracy and prevent
+ invalid entries.
+
+
+ ),
+ },
+ {
+ title: "Actions",
+ content: (
+
+
+ Enable keyboard and button control: users should be able to input values manually or use
+ the spin buttons to increment/decrement the value.
+
+
+ Avoid aggressive auto-corrections: do not override user input instantly or without
+ warning; let users control their interaction unless invalid input requires immediate correction.
+
+
+ Validate on interaction: validate values when the user finishes interacting with the
+ field, not while they're typing, to prevent frustration.
+
+
+ Allow incremental control: use appropriate step values to help users input
+ valid values more efficiently when using spin buttons.
+
+
+ ),
+ },
+ {
+ title: "Prefix/suffix",
+ content: (
+
+
+ Use prefixes and suffixes for context: clearly indicate units (e.g., kg, cm), currency
+ (e.g., USD, EUR), or domain-specific values to help users understand what's expected.
+
+
+ Avoid clutter: only use prefixes or suffixes when they add value and improve clarity.
+ Don't overload the field with unnecessary UI elements.
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const NumberInputOverviewPage = () => (
+
+
+
+
+);
+
+export default NumberInputOverviewPage;
diff --git a/apps/website/screens/components/number-input/overview/examples/prefixSuffix.tsx b/apps/website/screens/components/number-input/overview/examples/prefixSuffix.tsx
new file mode 100644
index 0000000000..a599aa6738
--- /dev/null
+++ b/apps/website/screens/components/number-input/overview/examples/prefixSuffix.tsx
@@ -0,0 +1,20 @@
+import { DxcNumberInput, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+ }`;
+
+const scope = {
+ DxcNumberInput,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/number-input/overview/images/number_anatomy.png b/apps/website/screens/components/number-input/overview/images/number_anatomy.png
new file mode 100644
index 0000000000..de0b8a3769
Binary files /dev/null and b/apps/website/screens/components/number-input/overview/images/number_anatomy.png differ
diff --git a/apps/website/screens/components/number-input/overview/images/number_spin_buttons.png b/apps/website/screens/components/number-input/overview/images/number_spin_buttons.png
new file mode 100644
index 0000000000..8eff3a50bd
Binary files /dev/null and b/apps/website/screens/components/number-input/overview/images/number_spin_buttons.png differ
diff --git a/apps/website/screens/components/number-input/specs/NumberInputSpecsPage.tsx b/apps/website/screens/components/number-input/specs/NumberInputSpecsPage.tsx
deleted file mode 100644
index 46cd403b83..0000000000
--- a/apps/website/screens/components/number-input/specs/NumberInputSpecsPage.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { DxcParagraph, DxcFlex, DxcLink, DxcBulletedList } from "@dxc-technology/halstack-react";
-import Link from "next/link";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import numberSpecs from "./images/number_specs.png";
-import numberInputSpecs from "./images/number_input_states.png";
-import numberInputStates from "./images/number_action_states.png";
-import numberAnatomy from "./images/number_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
- The number input color, typography, border, spacing,{" "}
- width and margin specifications are inherited from the text input, for reference
- check the{" "}
-
- text input
- {" "}
- component documentation.
-
-
- ),
- },
- {
- title: "States",
- subSections: [
- {
- title: "Input",
- content: (
- <>
-
- States: enabled, hover, focus, error{" "}
- and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Spin button",
- content: (
- <>
-
- States: enabled, hover, focus, active{" "}
- and disabled.
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
-
- Helper text (Optional)
-
-
- Suffix (Optional)
-
- Container
- Spin button increase
- Spin button decrease
- Error indicator
- Error message
- Value
-
-
- ),
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WAI-ARIA",
- content: (
-
-
- WAI-ARIA Authoring practices 1.2 -{" "}
-
- 3.21 Spinbutton
-
-
-
- WAI-ARIA Authoring practices 1.2 -{" "}
-
- "Date Picker Spin Button" design pattern
-
-
-
- ),
- },
- ],
- },
-];
-
-const NumberInputSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default NumberInputSpecsPage;
diff --git a/apps/website/screens/components/number-input/specs/images/number_action_states.png b/apps/website/screens/components/number-input/specs/images/number_action_states.png
deleted file mode 100644
index 8e6369dff7..0000000000
Binary files a/apps/website/screens/components/number-input/specs/images/number_action_states.png and /dev/null differ
diff --git a/apps/website/screens/components/number-input/specs/images/number_anatomy.png b/apps/website/screens/components/number-input/specs/images/number_anatomy.png
deleted file mode 100644
index 0f6da22448..0000000000
Binary files a/apps/website/screens/components/number-input/specs/images/number_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/number-input/specs/images/number_input_states.png b/apps/website/screens/components/number-input/specs/images/number_input_states.png
deleted file mode 100644
index 15d33dfd4e..0000000000
Binary files a/apps/website/screens/components/number-input/specs/images/number_input_states.png and /dev/null differ
diff --git a/apps/website/screens/components/number-input/specs/images/number_specs.png b/apps/website/screens/components/number-input/specs/images/number_specs.png
deleted file mode 100644
index 18c0b242f7..0000000000
Binary files a/apps/website/screens/components/number-input/specs/images/number_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/number-input/usage/NumberInputUsagePage.tsx b/apps/website/screens/components/number-input/usage/NumberInputUsagePage.tsx
deleted file mode 100644
index 3130586445..0000000000
--- a/apps/website/screens/components/number-input/usage/NumberInputUsagePage.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DxcFlex, DxcParagraph, DxcBulletedList } 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: (
- <>
- Considerations for the use of the number input component:
-
-
- Don't use the number input component for amounts. Use a text input instead.
-
- Always enable typing in the input field.
- Avoid using the component when large values are expected.
-
-
- ),
- },
-];
-
-const NumberInputUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default NumberInputUsagePage;
diff --git a/apps/website/screens/components/paginator/PaginatorPageLayout.tsx b/apps/website/screens/components/paginator/PaginatorPageLayout.tsx
index 00ae9636b8..11e9557179 100644
--- a/apps/website/screens/components/paginator/PaginatorPageLayout.tsx
+++ b/apps/website/screens/components/paginator/PaginatorPageLayout.tsx
@@ -6,20 +6,19 @@ import { ReactNode } from "react";
const PaginatorPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/paginator" },
- { label: "Usage", path: "/components/paginator/usage" },
- { label: "Specifications", path: "/components/paginator/specifications" },
+ { label: "Overview", path: "/components/paginator" },
+ { label: "Code", path: "/components/paginator/code" },
];
return (
-
+
-
+
The paginator component allows dividing large amounts of content into multiple pages.
-
+
{children}
diff --git a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx
index 16572b8f8d..9ffcfacbb5 100644
--- a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx
+++ b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx
@@ -1,11 +1,9 @@
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
import itemsPerPage from "./examples/itemsPerPage";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -48,7 +46,8 @@ const sections = [
An array of numbers representing the items per page options. If undefined, the select with items per page
- options will not be displayed.
+ options will not be displayed. If there are 100 or more options, the select will be virtualized for better
+ performance.
-
@@ -129,15 +128,11 @@ const sections = [
},
];
-const PaginatorCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const PaginatorCodePage = () => (
+
+
+
+
+);
export default PaginatorCodePage;
diff --git a/apps/website/screens/components/paginator/code/examples/itemsPerPage.ts b/apps/website/screens/components/paginator/code/examples/itemsPerPage.ts
deleted file mode 100644
index ce221d98e3..0000000000
--- a/apps/website/screens/components/paginator/code/examples/itemsPerPage.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { DxcPaginator, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [page, changePage] = useState(1);
- const [items, changeItems] = useState(10);
- const itemsPerPageClick = (value) => {
- changeItems(value);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcPaginator,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/paginator/code/examples/itemsPerPage.tsx b/apps/website/screens/components/paginator/code/examples/itemsPerPage.tsx
new file mode 100644
index 0000000000..835a46cd02
--- /dev/null
+++ b/apps/website/screens/components/paginator/code/examples/itemsPerPage.tsx
@@ -0,0 +1,30 @@
+import { DxcPaginator, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [page, changePage] = useState(1);
+ const [items, changeItems] = useState(10);
+ const itemsPerPageClick = (value) => {
+ changeItems(value);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcPaginator,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx
new file mode 100644
index 0000000000..aa80d04b52
--- /dev/null
+++ b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx
@@ -0,0 +1,167 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import paginatorAnatomy from "./images/paginator_anatomy.png";
+import Example from "@/common/example/Example";
+import flexibleConfiguration from "./examples/flexibleConfiguration";
+import scrollable from "./examples/scrollable";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The paginator component allows users to navigate through large sets of data by breaking content into multiple
+ pages. It provides controls to move between pages efficiently, ensuring a seamless browsing experience. Ideal
+ for tables, lists and search results, the paginator improves usability by reducing load times and making content
+ more manageable.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: the structural wrapper that holds all the elements of the paginator, ensuring
+ proper spacing, alignment and responsiveness within the interface.
+
+
+ Items per page: a control that allows users to adjust the number of items displayed per
+ page, providing flexibility in data viewing.
+
+
+ Items indicator: displays the current range of items being viewed and the total number of
+ items, helping users understand their position within the dataset.
+
+
+ Page actions: navigation buttons that let users move between pages, typically including
+ "Next", "Previous", "First" and "Last" controls.
+
+
+ Page selector: a dropdown or input that enables users to jump directly to a specific page,
+ improving efficiency when navigating large datasets.
+
+
+
+ ),
+ },
+ {
+ title: "Using paginators",
+ subSections: [
+ {
+ title: "Reducing cognitive load",
+ content: (
+
+ Paginators are essential for managing large amounts of content by dividing it into smaller, more digestible
+ sections. They help maintain a clean and organized interface, ensuring that users can navigate through
+ information efficiently without feeling overwhelmed. By breaking content into separate views, paginators
+ reduce cognitive load, improve readability, and enhance the overall user experience. This approach is
+ particularly useful in data-heavy applications, tables, or multi-page lists where presenting all information
+ simultaneously would be impractical.
+
+ ),
+ },
+ {
+ title: "Flexible configuration",
+ content: (
+ <>
+
+ Our paginator component offers different configurations to accommodate various use cases. Take the time to
+ explore these options and identify the best fit for your specific needs — whether it's simple navigation,
+ dynamic content loading, or more advanced pagination controls. Choosing the right configuration ensures a
+ seamless experience for users.
+
+
+
+ ),
+ },
+ {
+ title: "Pagination and scrolling",
+ content: (
+ <>
+
+ Pagination does not eliminate the need for scrolling; in fact, both can work together to improve
+ usability. For instance, a table with many rows might require vertical scrolling to display more content
+ within a single page while still using pagination to divide data into manageable sections. This approach
+ provides a more intuitive way to navigate large datasets without losing context.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Responsive behavior",
+ content: (
+
+ Selecting the right type of paginator is important — particularly for applications that may be displayed in
+ smaller screen sizes. Configurations with a simple navigation can go a long way towards reducing cognitive load
+ and visual clutter (ex. simply show what page the user is on or limit interactive elements to the page selection
+ dropdown for navigation).
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use pagination when necessary
+
+ Implement a paginator when the number of elements affects system performance or when displaying all content
+ at once would significantly impact usability, especially on larger screens.
+
+
+
+ Positioning matters
+
+ Always place the paginator at the bottom of the content it divides. This ensures users encounter all
+ relevant information before deciding to navigate to another page.
+
+
+
+ Clearly indicate current status
+
+ Display the current page number and the total number of items being shown. This helps users understand their
+ position within the dataset and manage expectations when navigating.
+
+
+
+ Ensure intuitive navigation
+
+ Provide clear, accessible controls for moving between pages, including next/previous buttons and, when
+ applicable, direct page selection for quicker access to specific sections.
+
+
+
+ Consider different configurations
+
+ Adapt the paginator's design to fit different scenarios, such as adding an option to adjust the number
+ of items displayed per page or offering compact versions for space-constrained layouts.
+
+
+
+ Combine with scrolling when needed
+
+ In some cases, pagination and scrolling can work together. For example, tables with many rows may use a
+ paginator to divide content into sections while allowing vertical scrolling within each page.
+
+
+
+ ),
+ },
+];
+
+const PaginatorOverviewPage = () => (
+
+
+
+
+);
+
+export default PaginatorOverviewPage;
diff --git a/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.tsx b/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.tsx
new file mode 100644
index 0000000000..3f2ef713af
--- /dev/null
+++ b/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.tsx
@@ -0,0 +1,46 @@
+import { DxcPaginator, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+
+ return (
+
+
+
+
+
+ {}}
+ />
+ {}}
+ />
+ {}}
+ />
+
+
+ );
+}`;
+
+const scope = {
+ DxcPaginator,
+ DxcFlex,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/paginator/overview/examples/scrollable.tsx b/apps/website/screens/components/paginator/overview/examples/scrollable.tsx
new file mode 100644
index 0000000000..1da4ef8349
--- /dev/null
+++ b/apps/website/screens/components/paginator/overview/examples/scrollable.tsx
@@ -0,0 +1,135 @@
+import { DxcPaginator, DxcInset, DxcDataGrid, DxcContainer } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const columns = [
+ {
+ key: "id",
+ label: "ID",
+ resizable: true,
+ sortable: true,
+ draggable: false,
+ alignment: "left",
+ },
+ {
+ key: "task",
+ label: "Title",
+ resizable: true,
+ sortable: true,
+ draggable: true,
+ textEditable: true,
+ alignment: "left",
+ },
+ {
+ key: "complete",
+ label: " % Complete",
+ resizable: true,
+ sortable: true,
+ draggable: true,
+ alignment: "right",
+ summaryKey: "label",
+ },
+ {
+ key: "priority",
+ label: "Priority",
+ resizable: true,
+ draggable: true,
+ alignment: "center",
+ summaryKey: "total",
+ }
+ ];
+
+ const expandableRows = [
+ {
+ id: 1,
+ task: "Task 1",
+ complete: 46,
+ priority: "High",
+ issueType: "Bug",
+ expandedContent: Custom content 1,
+ expandedContentHeight: 470
+ },
+ {
+ id: 2,
+ task: "Task 2",
+ complete: 51,
+ priority: "High",
+ issueType: "Epic",
+ expandedContent: Custom content 1
+ },
+ {
+ id: 3,
+ task: "Task 3",
+ complete: 40,
+ priority: "High",
+ issueType: "Improvement",
+ expandedContent: Custom content 1
+ },
+ {
+ id: 4,
+ task: "Task 4",
+ complete: 10,
+ priority: "High",
+ issueType: "Improvement",
+ expandedContent: Custom content 1
+ },
+ {
+ id: 5,
+ task: "Task 5",
+ complete: 68,
+ priority: "High",
+ issueType: "Improvement",
+ expandedContent: Custom content 1
+ },
+ {
+ id: 6,
+ task: "Task 6",
+ complete: 37,
+ priority: "High",
+ issueType: "Improvement",
+ expandedContent: Custom content 1
+ },
+ {
+ id: 7,
+ task: "Task 7",
+ complete: 73,
+ priority: "Medium",
+ issueType: "Story",
+ expandedContent: Custom content 1
+ },
+ {
+ id: 8,
+ task: "Task 8",
+ complete: 27,
+ priority: "Medium",
+ issueType: "Story",
+ expandedContent: Custom content 1
+ },
+ {
+ id: 9,
+ task: "Task 9",
+ complete: 36,
+ priority: "Critical",
+ issueType: "Epic",
+ expandedContent: Custom content 1
+ },
+ ];
+
+ return (
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcContainer,
+ DxcDataGrid,
+ DxcPaginator,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/paginator/overview/images/paginator_anatomy.png b/apps/website/screens/components/paginator/overview/images/paginator_anatomy.png
new file mode 100644
index 0000000000..e9142731a5
Binary files /dev/null and b/apps/website/screens/components/paginator/overview/images/paginator_anatomy.png differ
diff --git a/apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx b/apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx
deleted file mode 100644
index 6f1b3ff046..0000000000
--- a/apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx
+++ /dev/null
@@ -1,285 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import Figure from "@/common/Figure";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import paginatorAnatomy from "./images/paginator_anatomy.png";
-import paginatorSpecs from "./images/paginator_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
- Items per page
- Items indicator
- Page actions
- Page selector
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const PaginatorSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default PaginatorSpecsPage;
diff --git a/apps/website/screens/components/paginator/specs/images/paginator_anatomy.png b/apps/website/screens/components/paginator/specs/images/paginator_anatomy.png
deleted file mode 100644
index d77134074a..0000000000
Binary files a/apps/website/screens/components/paginator/specs/images/paginator_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/paginator/specs/images/paginator_specs.png b/apps/website/screens/components/paginator/specs/images/paginator_specs.png
deleted file mode 100644
index 536096ece2..0000000000
Binary files a/apps/website/screens/components/paginator/specs/images/paginator_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx b/apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx
deleted file mode 100644
index 4e87e625ec..0000000000
--- a/apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
- Usage considerations about the paginator component:
-
-
- Use the paginator when the number of elements is affecting the system load, or when the screen size grows
- considerably.
-
-
- Always place the paginator at the bottom of the data that is being divided.
-
-
- Identify the current page and the number of elements that are being displayed.
-
-
-
- ),
- },
-];
-
-const PaginatorUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default PaginatorUsagePage;
diff --git a/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx b/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx
index 65063328ca..47f1eea0e4 100644
--- a/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx
+++ b/apps/website/screens/components/paragraph/ParagraphPageLayout.tsx
@@ -6,18 +6,19 @@ import { ReactNode } from "react";
const ParagraphPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/paragraph" },
- { label: "Usage", path: "/components/paragraph/usage" },
- { label: "Specifications", path: "/components/paragraph/specifications" },
+ { label: "Overview", path: "/components/paragraph" },
+ { label: "Code", path: "/components/paragraph/code" },
];
return (
-
+
-
+
- Paragraph is a block of text.
-
+
+ A text container component designed for displaying blocks of body content in a consistent, readable format.
+
+
{children}
diff --git a/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx b/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx
index 248687be1a..5361df7c6d 100644
--- a/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx
+++ b/apps/website/screens/components/paragraph/code/ParagraphCodePage.tsx
@@ -1,11 +1,10 @@
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import basicUsage from "./examples/basicUsage";
import multipleParagraphs from "./examples/multipleParagraphs";
-import TableCode from "@/common/TableCode";
+import { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
const sections = [
@@ -13,25 +12,29 @@ const sections = [
title: "Props",
content: (
-
-
Name
-
Type
-
Description
-
Default
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
Text to be displayed in the paragraph.
-
-
-
+
+
+
Name
+
Type
+
Description
+
Default
+
+
+
+
+
+
+
+ children
+
+
+
+ React.ReactNode
+
+
Text to be displayed in the paragraph.
+
-
+
+
),
},
@@ -50,15 +53,11 @@ const sections = [
},
];
-const ParagraphCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const ParagraphCodePage = () => (
+
+
+
+
+);
export default ParagraphCodePage;
diff --git a/apps/website/screens/components/paragraph/code/examples/basicUsage.tsx b/apps/website/screens/components/paragraph/code/examples/basicUsage.tsx
index 44980720af..ec6e74920d 100644
--- a/apps/website/screens/components/paragraph/code/examples/basicUsage.tsx
+++ b/apps/website/screens/components/paragraph/code/examples/basicUsage.tsx
@@ -2,7 +2,7 @@ import { DxcParagraph, DxcInset, DxcTypography } from "@dxc-technology/halstack-
const code = `() => {
return (
-
+
Lorem ipsum dolor sit amet,{" "}
diff --git a/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx b/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx
index 897ee7b293..084d759856 100644
--- a/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx
+++ b/apps/website/screens/components/paragraph/code/examples/multipleParagraphs.tsx
@@ -2,8 +2,8 @@ import { DxcParagraph, DxcInset, DxcTypography, DxcFlex } from "@dxc-technology/
const code = `() => {
return (
-
-
+
+
Lorem ipsum dolor sit amet,{" "}
diff --git a/apps/website/screens/components/paragraph/overview/ParagraphOverviewPage.tsx b/apps/website/screens/components/paragraph/overview/ParagraphOverviewPage.tsx
new file mode 100644
index 0000000000..318571b326
--- /dev/null
+++ b/apps/website/screens/components/paragraph/overview/ParagraphOverviewPage.tsx
@@ -0,0 +1,87 @@
+import Code from "@/common/Code";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import { DxcFlex, DxcBulletedList, DxcParagraph } from "@dxc-technology/halstack-react";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The Paragraph component is used to present text content in well-structured, readable blocks across the UI.
+
+
+ It is designed to render blocks of text with predefined typography styles, including consistent{" "}
+ font-size, font-weight and color. It displays content as
+ text blocks separated by line breaks and follows the visual language of the design system.
+
+
+ However, by default, it does not add spacing between itself and other elements — for managing
+ layout and spacing between Paragraphs or other components, use it in combination with layout components like{" "}
+ DxcFlex.
+
+
+ ),
+ },
+ {
+ title: "Usage",
+ content: (
+
+
+ Ideal for body content such as descriptions, instructions, explanations, or legal text.
+
+
+ Automatically handles line height and text alignment but relies on layout components for external spacing.
+
+
+ Use Paragraphs to group related sentences and divide longer content into manageable, readable chunks.
+
+
+ Avoid using Paragraph as a layout or structural element — it is intended strictly for text content.
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use Paragraph for blocks of text only: This component is designed to present readable text
+ content. Avoid using it for non-text elements like buttons or images.
+
+
+ Keep paragraphs short and scannable: Dense blocks of text can be intimidating and hard to
+ scan. Break content into shorter sections whenever possible. Break content into smaller paragraphs to make it
+ easier for users to read and for screen readers to navigate.
+
+
+ Don't nest paragraphs inside each other: Paragraph tags (<p>) cannot be nested in valid
+ HTML. Instead, use separate Paragraph components for each block of text.
+
+
+ Use layout components for spacing: Paragraph does not include spacing between itself and
+ surrounding elements. Use layout wrappers like DxcFlex to manage spacing between components.
+
+
+ Support accessibility: Clear separation of paragraphs and appropriate structure improves
+ screen reader support and makes content easier to digest for all users.
+
+
+ Ensure visual and semantic clarity: Paragraphs should support the overall information
+ hierarchy. Use headings for titles and Paragraphs for descriptive or supporting text.
+
+
+ ),
+ },
+];
+
+const ParagraphOverviewPage = () => (
+
+
+
+
+);
+
+export default ParagraphOverviewPage;
diff --git a/apps/website/screens/components/paragraph/specs/ParagraphSpecsPage.tsx b/apps/website/screens/components/paragraph/specs/ParagraphSpecsPage.tsx
deleted file mode 100644
index 051a30f404..0000000000
--- a/apps/website/screens/components/paragraph/specs/ParagraphSpecsPage.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-
-const sections = [
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Typography",
- content: (
- <>
-
-
-
Component token
-
Element
-
Core token
-
Value
-
-
-
- fontSize
-
-
Paragraph
-
- font-scale-03
-
-
1rem
-
-
-
- fontWeight
-
-
Paragraph
-
- font-scale-03
-
-
400
-
-
-
- fontColor
-
-
Paragraph
-
- color-black
-
-
#000000
-
-
-
- ),
- },
- ],
- },
-];
-
-const ParagraphSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ParagraphSpecsPage;
diff --git a/apps/website/screens/components/paragraph/usage/ParagraphUsagePage.tsx b/apps/website/screens/components/paragraph/usage/ParagraphUsagePage.tsx
deleted file mode 100644
index fce8ab12b9..0000000000
--- a/apps/website/screens/components/paragraph/usage/ParagraphUsagePage.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import { DxcFlex, DxcBulletedList, DxcParagraph } from "@dxc-technology/halstack-react";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- Paragraphs display blocks of text separated by a line break with some configuration in terms of font-size,
- font-weight and color. It does not add any spacing with respect to any other element and should be used to
- structure text blocks only.
-
-
- To space different paragraphs from each other or a paragraph with other elements we must include them in a
- DxcFlex.
-
-
- ),
- subSections: [
- {
- title: "Do's",
- content: (
- <>
-
- Use paragraphs for text blocks.
-
- Break text into paragraphs to help screen readers provide shortcuts to the user.
-
-
- Split content into small paragraphs to make it easier to read.
-
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Use paragraphs that are too long and make it difficult to find information within the text.
-
- Nest paragraphs inside each other.
-
- Use paragraph for anything other than text. Paragraphs are for text blocks and not for any other thing.
-
-
- ),
- },
- ],
- },
-];
-
-const ParagraphUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ParagraphUsagePage;
diff --git a/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx b/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx
index 8a3c6208e9..2f98224de6 100644
--- a/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx
+++ b/apps/website/screens/components/password-input/PasswordInputPageLayout.tsx
@@ -6,25 +6,21 @@ import { ReactNode } from "react";
const PasswordInputPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/password-input" },
- { label: "Usage", path: "/components/password-input/usage" },
- {
- label: "Specifications",
- path: "/components/password-input/specifications",
- },
+ { label: "Overview", path: "/components/password-input" },
+ { label: "Code", path: "/components/password-input/code" },
];
return (
-
+
-
-
+
+
- The password input component is very much like the text input, with the difference that their value is
- obscured by default (by replacing its characters with dot symbol ("•"), and the mask can be toggled on/off
- using the show and hide component action.
+ Password inputs provide a way for users to securely enter a password. Its value is obscured by default by
+ replacing its characters with dot symbol ("•"), and the mask can be toggled on/off using the show and hide
+ component action.
-
+
{children}
diff --git a/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx b/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx
index 40c81df14d..511b78a1fb 100644
--- a/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx
+++ b/apps/website/screens/components/password-input/code/PasswordInputCodePage.tsx
@@ -1,13 +1,11 @@
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
import controlled from "./examples/controlled";
import errorHandling from "./examples/errorHandling";
import uncontrolled from "./examples/uncontrolled";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -24,39 +22,33 @@ const sections = [
-
value
+
ariaLabel
string
- Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
- internally by the component.
+ Specifies a string to be used as the name for the password input element when no label is
+ provided.
-
-
-
-
-
label
- string
+ 'Password input'
-
Text to be placed above the password input.
-
-
-
name
+
autocomplete
string
-
Name attribute of the input element.
-
-
-
-
-
helperText
- string
+ HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
+ provide automated assistance in filling out the input value. Its value must be one of all the possible
+ values of the HTML autocomplete attribute. See{" "}
+ MDN{" "}
+ for further information.
+
- This function will be called when the user types within the input element of the component. An object
- including the current value and the error (if the value entered is not valid) will be passed to this
- function. If there is no error, error will not be defined.
+ If it is a defined value and also a truthy string, the component will change its appearance, showing the
+ error below the password input component. If the defined value is an empty string, it will reserve a space
+ below the component for a future error, but it would not change its look. In case of being undefined or
+ null, both the appearance and the space for the error message would not be modified.
- This function will be called when the input element loses the focus. An object including the input value
- and the error (if the value entered is not valid) will be passed to this function. If there is no error,{" "}
- error will not be defined.
+ string
+
Helper text to be placed above the password.
-
-
error
+
label
string
-
- If it is a defined value and also a truthy string, the component will change its appearance, showing the
- error below the password input component. If the defined value is an empty string, it will reserve a space
- below the component for a future error, but it would not change its look. In case of being undefined or
- null, both the appearance and the space for the error message would not be modified.
-
- Regular expression that defines the valid format allowed by the password input. This will be checked both
- when the input element loses the focus and while typing within it. If the string entered does not match
- the pattern, the onBlur and onChange functions will be called with the current
- value and an internal error informing that this value does not match the pattern. If the pattern is met,
- the error parameter of both events will not be defined.
+ 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.
-
-
minLength
+
maxLength
number
- Specifies the minimum length allowed by the input. This will be checked both when the input element loses
- the focus and while typing within it. If the string entered does not comply the minimum length, the{" "}
+ Specifies the maximum length allowed by the input. This will be checked both when the input element loses
+ the focus and while typing within it. If the string entered does not comply the maximum length, the{" "}
onBlur and onChange functions will be called with the current value and an
internal error informing that the value length does not comply the specified range. If a valid length is
reached, the error parameter of both events will not be defined.
@@ -134,13 +115,13 @@ const sections = [
-
-
maxLength
+
minLength
number
- Specifies the maximum length allowed by the input. This will be checked both when the input element loses
- the focus and while typing within it. If the string entered does not comply the maximum length, the{" "}
+ Specifies the minimum length allowed by the input. This will be checked both when the input element loses
+ the focus and while typing within it. If the string entered does not comply the minimum length, the{" "}
onBlur and onChange functions will be called with the current value and an
internal error informing that the value length does not comply the specified range. If a valid length is
reached, the error parameter of both events will not be defined.
@@ -148,32 +129,59 @@ const sections = [
-
-
autocomplete
+
name
string
+
Name attribute of the input element.
+
-
+
+
+
onBlur
- HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
- provide automated assistance in filling out the input value. Its value must be one of all the possible
- values of the HTML autocomplete attribute. See{" "}
- MDN{" "}
- for further information.
+ {"(val: { value: string; error?: string }) => void"}
- 'off'
+ This function will be called when the input element loses the focus. An object including the input value
+ and the error (if the value entered is not valid) will be passed to this function. If there is no error,{" "}
+ error will not be defined.
- 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.
+ This function will be called when the user types within the input element of the component. An object
+ including the current value and the error (if the value entered is not valid) will be passed to this
+ function. If there is no error, error will not be defined.
-
+
+
pattern
+
+ string
+
+
+ Regular expression that defines the valid format allowed by the password input. This will be checked both
+ when the input element loses the focus and while typing within it. If the string entered does not match
+ the pattern, the onBlur and onChange functions will be called with the current
+ value and an internal error informing that this value does not match the pattern. If the pattern is met,
+ the error parameter of both events will not be defined.
+
+
-
+
+
+
ref
+
+ {"React.Ref"}
+
+
Reference to the component.
+
-
+
size
@@ -197,23 +205,15 @@ const sections = [
-
ref
-
- {"React.Ref"}
-
-
Reference to the component.
-
-
-
-
-
ariaLabel
+
value
string
- Specifies a string to be used as the name for the password input element when no label is
- provided.
+ Value of the input element. If undefined, the component will be uncontrolled and the value will be managed
+ internally by the component.
-
'Password input'
+
-
@@ -238,15 +238,11 @@ const sections = [
},
];
-const PasswordInputCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const PasswordInputCodePage = () => (
+
+
+
+
+);
export default PasswordInputCodePage;
diff --git a/apps/website/screens/components/password-input/code/examples/controlled.ts b/apps/website/screens/components/password-input/code/examples/controlled.ts
deleted file mode 100644
index 8d96da4cc6..0000000000
--- a/apps/website/screens/components/password-input/code/examples/controlled.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { DxcInset, DxcPasswordInput } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const onChange = ({ value }) => {
- setValue(value);
- };
-
- const onBlur = ({ value }) => {
- setValue(value);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- useState,
- DxcPasswordInput,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/password-input/code/examples/controlled.tsx b/apps/website/screens/components/password-input/code/examples/controlled.tsx
new file mode 100644
index 0000000000..879d4c70f8
--- /dev/null
+++ b/apps/website/screens/components/password-input/code/examples/controlled.tsx
@@ -0,0 +1,32 @@
+import { DxcInset, DxcPasswordInput } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+
+ const onBlur = ({ value }) => {
+ setValue(value);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ useState,
+ DxcPasswordInput,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/password-input/code/examples/errorHandling.ts b/apps/website/screens/components/password-input/code/examples/errorHandling.ts
deleted file mode 100644
index e3d2611884..0000000000
--- a/apps/website/screens/components/password-input/code/examples/errorHandling.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DxcPasswordInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const [errorMessage, setErrorMessage] = useState();
- const onChange = ({ value, error }) => {
- setValue(value);
- setErrorMessage(error == undefined ? "" : "Error onChange");
- };
-
- const onBlur = ({ value, error }) => {
- setValue(value);
- setErrorMessage(error == undefined ? "" : "Error onBlur");
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcPasswordInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/password-input/code/examples/errorHandling.tsx b/apps/website/screens/components/password-input/code/examples/errorHandling.tsx
new file mode 100644
index 0000000000..742163d610
--- /dev/null
+++ b/apps/website/screens/components/password-input/code/examples/errorHandling.tsx
@@ -0,0 +1,38 @@
+import { DxcPasswordInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const [errorMessage, setErrorMessage] = useState();
+ const onChange = ({ value, error }) => {
+ setValue(value);
+ setErrorMessage(error == undefined ? "" : "Error onChange");
+ };
+
+ const onBlur = ({ value, error }) => {
+ setValue(value);
+ setErrorMessage(error == undefined ? "" : "Error onBlur");
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcPasswordInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/password-input/code/examples/uncontrolled.ts b/apps/website/screens/components/password-input/code/examples/uncontrolled.ts
deleted file mode 100644
index c4c812433e..0000000000
--- a/apps/website/screens/components/password-input/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { DxcInset, DxcPasswordInput, DxcButton } from "@dxc-technology/halstack-react";
-import { useState, useRef } from "react";
-
-const code = `() => {
- const inputRef = useRef();
-
- const handleSubmit = () => {
- const input = inputRef.current.getElementsByTagName("input")[0];
- console.log(input.value);
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- useState,
- useRef,
- DxcPasswordInput,
- DxcButton,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/password-input/code/examples/uncontrolled.tsx b/apps/website/screens/components/password-input/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..08c13178c8
--- /dev/null
+++ b/apps/website/screens/components/password-input/code/examples/uncontrolled.tsx
@@ -0,0 +1,30 @@
+import { DxcInset, DxcPasswordInput, DxcButton } from "@dxc-technology/halstack-react";
+import { useState, useRef } from "react";
+
+const code = `() => {
+ const inputRef = useRef();
+
+ const handleSubmit = () => {
+ const input = inputRef.current.getElementsByTagName("input")[0];
+ console.log(input.value);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ useState,
+ useRef,
+ DxcPasswordInput,
+ DxcButton,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/password-input/overview/PasswordInputOverviewPage.tsx b/apps/website/screens/components/password-input/overview/PasswordInputOverviewPage.tsx
new file mode 100644
index 0000000000..6383b78a9d
--- /dev/null
+++ b/apps/website/screens/components/password-input/overview/PasswordInputOverviewPage.tsx
@@ -0,0 +1,267 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import anatomy from "./images/password_anatomy.png";
+import clearContent from "./images/password_clear_content.png";
+import Figure from "@/common/Figure";
+import Example from "@/common/example/Example";
+import showHide from "./examples/showHide";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The password input component allows users to securely enter and manage sensitive data such as
+ credentials or authentication codes. It behaves similarly to a standard text input but masks the content to
+ protect the user's privacy. This component also includes functionality to toggle visibility, making it easier
+ for users to verify their input when needed.
+
+
+ Password inputs are essential in authentication forms, account settings, and any interaction where users need
+ to enter or confirm confidential information. Ensuring both usability and security is key to providing a
+ reliable password entry experience.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label(Optional): a descriptive text that helps users understand what information
+ is expected in the input field. It should be clear, concise, and placed near the input for better
+ readability.
+
+
+ Optional indicator(Optional): a small indicator that signals the input field is
+ not mandatory. It helps users know they can leave the field empty without causing validation errors.
+
+
+ Input action(Optional): an interactive element, inside the input field that
+ triggers the action of revealing the password.
+
+
+ Clear action(Optional): a small button, usually represented by an "X" icon, that
+ allows users to clear the entered password quickly without manually deleting it.
+
+
+ Helper text(Optional): additional text placed below the input field that provides
+ guidance, examples, or explanations to assist users in filling out the field correctly.
+
+
+ Container: the visual wrapper around the input field that provides structure, ensures
+ accessibility, and helps differentiate the input from other UI elements.
+
+
+ Value: displays the selected or manually entered date in the input field, following the
+ specified format.
+
+
+
+ ),
+ },
+ {
+ title: "Form inputs",
+ content: (
+ <>
+
+ Form inputs are essential UI elements that allow users to interact with digital products by{" "}
+ entering or selecting data. Choosing the right input type and structure is key to designing
+ efficient, user-friendly forms that support task completion and data accuracy.
+
+
+ A form input (also known as a form field) is used to capture user data. Common input types include text
+ fields, date pickers, number fields, radio buttons, checkboxes, toggles, and dropdowns. Forms should always
+ include a submission method, such as a submit button, link, or keyboard trigger, to complete the interaction.
+
+
+ ),
+ subSections: [
+ {
+ title: "Shared input characteristics",
+ content: (
+ <>
+
+ Although input fields vary in type and purpose, they often share a common set of features:
+
+
+
+ Placeholder: a short hint displayed inside the input field that describes its expected
+ value or purpose.
+
+
+ Size and max length: inputs can have both a visual size (width of the field) and a
+ character limit that defines how much text can be entered.
+
+
+ Prefix or suffix: some inputs include a visual element before or after the user input,
+ like currency symbols or units, to help clarify the expected data.
+
+
+ Helper text: additional information displayed below the field to guide the user in
+ providing the correct input.
+
+
+ Optional label: inputs that are not mandatory can be marked with an "Optional" tag to
+ set clear expectations.
+
+
+
+ ),
+ },
+ {
+ title: "Common input states",
+ content: (
+ <>
+ Most inputs can also present standard interactive or informative states:
+
+
+ Disabled: this state prevents users from interacting with the field. It's typically
+ used when a value is not applicable or editable under certain conditions or roles.
+
+
+ Error: when a user enters invalid or incomplete data, the input shows an error state,
+ often accompanied by a helpful message to guide corrections.
+
+
+ Read-only: the input is visible, focusable, and hoverable, but not editable. This is
+ ideal for fields with auto-calculated values. Unlike disabled fields, read-only inputs can still be
+ submitted with the form and are part of the form data.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Using password inputs",
+ content: (
+
+ Password inputs are designed to handle sensitive information securely by masking the characters typed by the
+ user. Unlike regular text inputs, they include specific features to enhance privacy and usability, such as the
+ ability to toggle visibility and optionally clear the field. These inputs are commonly used for login forms,
+ account creation, and any scenario requiring authentication data.
+
+ ),
+ subSections: [
+ {
+ title: "Actions",
+ subSections: [
+ {
+ title: "Clearing content",
+ content: (
+ <>
+
+ Password inputs can include a clear action icon, typically displayed when the field contains text.
+ This allows users to quickly remove the entire content of the input with a single
+ click or tap, making it easier to retype the password if necessary. This action enhances user
+ experience, particularly when correcting mistakes or switching between input attempts.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Show/hide action",
+ content: (
+ <>
+
+ To improve usability without compromising security, our password input include a show/hide action
+ icon. This control allows users to reveal the password temporarily, helping prevent
+ input errors, especially on small screens or when dealing with complex passwords. By default,
+ passwords are hidden and masked with dots, and toggling the visibility should be a clearly labeled and
+ accessible action.
+
+
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ subSections: [
+ {
+ title: "General",
+ content: (
+
+
+ Use password inputs exclusively for sensitive or private data, such as account
+ credentials or security codes.
+
+
+ Always provide proper labeling and helper text if needed, especially when specifying
+ password requirements (e.g., minimum length, special characters).
+
+
+ ),
+ },
+ {
+ title: "Show/hide action",
+ content: (
+
+
+ Use clear, accessible labels for the action action (e.g., "Show password" / "Hide password") and ensure
+ they update dynamically based on the current state.
+
+
+ Avoid auto-enabling password visibility — keep the initial state masked for privacy.
+
+
+ ),
+ },
+ {
+ title: "Clear action",
+ content: (
+
+
+ Use a clear (close) icon to help users quickly delete the entered password if needed.
+
+
+ Display the clear icon only when the field is not empty to avoid unnecessary
+ distractions.
+
+
+ ),
+ },
+ {
+ title: "Security considerations",
+ content: (
+
+
+ Never store passwords in local storage or pre-fill them without explicit user action.
+
+
+ Do not rely solely on masking or toggle visibility for security — always combine with backend encryption
+ and secure handling.
+
+
+ Prevent clipboard access via double-click or right-click when appropriate, depending on the app's security
+ level.
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const PasswordInputOverviewPage = () => (
+
+
+
+
+);
+
+export default PasswordInputOverviewPage;
diff --git a/apps/website/screens/components/password-input/overview/examples/showHide.tsx b/apps/website/screens/components/password-input/overview/examples/showHide.tsx
new file mode 100644
index 0000000000..9539b1fe20
--- /dev/null
+++ b/apps/website/screens/components/password-input/overview/examples/showHide.tsx
@@ -0,0 +1,30 @@
+import { DxcInset, DxcPasswordInput, DxcButton } from "@dxc-technology/halstack-react";
+import { useState, useRef } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("J.Smith1961");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ useState,
+ useRef,
+ DxcPasswordInput,
+ DxcButton,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/password-input/overview/images/password_anatomy.png b/apps/website/screens/components/password-input/overview/images/password_anatomy.png
new file mode 100644
index 0000000000..cbc15ca132
Binary files /dev/null and b/apps/website/screens/components/password-input/overview/images/password_anatomy.png differ
diff --git a/apps/website/screens/components/password-input/overview/images/password_clear_content.png b/apps/website/screens/components/password-input/overview/images/password_clear_content.png
new file mode 100644
index 0000000000..48a5641ddc
Binary files /dev/null and b/apps/website/screens/components/password-input/overview/images/password_clear_content.png differ
diff --git a/apps/website/screens/components/password-input/specs/PasswordInputSpecsPage.tsx b/apps/website/screens/components/password-input/specs/PasswordInputSpecsPage.tsx
deleted file mode 100644
index 120f9a5bd1..0000000000
--- a/apps/website/screens/components/password-input/specs/PasswordInputSpecsPage.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { DxcParagraph, DxcFlex, DxcLink, DxcBulletedList } from "@dxc-technology/halstack-react";
-import Link from "next/link";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import passwordInputActions from "./images/password_actions.png";
-import passwordInputAnatomy from "./images/password_anatomy.png";
-import passwordInputSpecs from "./images/password_specs.png";
-import passworsInputStates from "./images/password_states.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
- The password input color, typography, border, spacing,{" "}
- width and margin specifications are inherited from the text input, for reference
- check the{" "}
-
- text input
- {" "}
- component documentation.
-
-
- The password input doesn't have the following text input elements, therefore their listed styles don't
- apply:
-
-
- Placeholder
- Prefix / Suffix
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
- The component password has the following states:
-
- States: enabled, hover, focus, error and{" "}
- disabled.
-
-
-
-
-
- ),
- },
-
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
-
- Helper text (Optional)
-
- Input container
- Show/Hide action
- Clear action
- Error icon
- Error message
- Input value
-
-
- ),
- },
- {
- title: "Actions",
- content: (
- <>
-
-
-
-
- The value of the input can be toggled on or off using the default action the component provides. The password
- input can also be clearable.
-
-
-
- The toggle indicates the action that will be performed when clicked, tapped, or pressing keyboard{" "}
- Enter key.
-
-
- The toggle has a title with a textual cue for the resulting action.
-
-
-
- ),
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 1.3.5 Identify Input Purpose
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 3.3.3 Error Suggestion
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 3.3.7 Accessible Authentication
-
-
-
- ),
- },
- {
- title: "WAI Web Accessibility Tutorials",
- content: (
-
-
- Forms -{" "}
-
- Full Password Example
-
-
-
- ),
- },
- ],
- },
-];
-
-const PasswordInputSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default PasswordInputSpecsPage;
diff --git a/apps/website/screens/components/password-input/specs/images/password_actions.png b/apps/website/screens/components/password-input/specs/images/password_actions.png
deleted file mode 100644
index a1c42a4c28..0000000000
Binary files a/apps/website/screens/components/password-input/specs/images/password_actions.png and /dev/null differ
diff --git a/apps/website/screens/components/password-input/specs/images/password_anatomy.png b/apps/website/screens/components/password-input/specs/images/password_anatomy.png
deleted file mode 100644
index fafab8427a..0000000000
Binary files a/apps/website/screens/components/password-input/specs/images/password_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/password-input/specs/images/password_specs.png b/apps/website/screens/components/password-input/specs/images/password_specs.png
deleted file mode 100644
index 22cf69b69d..0000000000
Binary files a/apps/website/screens/components/password-input/specs/images/password_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/password-input/specs/images/password_states.png b/apps/website/screens/components/password-input/specs/images/password_states.png
deleted file mode 100644
index e30241c947..0000000000
Binary files a/apps/website/screens/components/password-input/specs/images/password_states.png and /dev/null differ
diff --git a/apps/website/screens/components/password-input/usage/PasswordInputUsagePage.tsx b/apps/website/screens/components/password-input/usage/PasswordInputUsagePage.tsx
deleted file mode 100644
index 08bbd5f704..0000000000
--- a/apps/website/screens/components/password-input/usage/PasswordInputUsagePage.tsx
+++ /dev/null
@@ -1,47 +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",
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Use the component password input when the value expected is a password and need to be secured.
-
- Provide the requirements in the helper text.
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Show the validation of the password input until the component loses the focus.
-
- Disable the copy/paste input functionality.
-
- ),
- },
- ],
- },
-];
-
-const PasswordInputUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default PasswordInputUsagePage;
diff --git a/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx b/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx
index 231fd62ee8..b05275b5bf 100644
--- a/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx
+++ b/apps/website/screens/components/progress-bar/ProgressBarPageLayout.tsx
@@ -6,27 +6,17 @@ import { ReactNode } from "react";
const ProgressBarPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/progress-bar" },
- { label: "Usage", path: "/components/progress-bar/usage" },
- {
- label: "Specifications",
- path: "/components/progress-bar/specifications",
- },
+ { label: "Overview", path: "/components/progress-bar" },
+ { label: "Code", path: "/components/progress-bar/code" },
];
return (
-
+
-
-
-
- Progress indicators offer visibility of system status to the user, giving feedback to indicate that the
- application is taking some time to processing data. The main aim of these components is to reduce the
- user's uncertainty about offering something to look at while the user is waiting for the end. A progress
- bar should be used in any scenario that will take more than 1 second in performing the action, for anything
- that takes less than that time, it will be distracting for the user.
-
-
+
+
+ A progress bar visually indicates the completion status of a task or process.
+
{children}
diff --git a/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx b/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx
index 52c1910f63..62738ba966 100644
--- a/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx
+++ b/apps/website/screens/components/progress-bar/code/ProgressBarCodePage.tsx
@@ -1,12 +1,10 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basic from "./examples/basicUsage";
import overlay from "./examples/overlay";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -23,12 +21,17 @@ const sections = [
-
label
+
ariaLabel
string
-
Text to be placed above the progress bar.
-
-
+
+ Specifies a string to be used as the name for the progress bar element when no label is
+ provided.
+
+
+ 'Progress bar'
+
helperText
@@ -39,57 +42,54 @@ const sections = [
-
-
overlay
-
- boolean
-
-
If true, the progress bar will be displayed as a modal.
- The value of the progress indicator. If it's received the component is determinate otherwise is
- indeterminate.
+ 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.
-
-
showValue
+
overlay
boolean
-
If true, the determined value is displayed above the progress bar.
+
If true, the progress bar will be displayed as a modal.
If true, the determined value is displayed above the progress bar.
- 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.
+ false
-
-
-
ariaLabel
+
value
- string
+ number
- Specifies a string to be used as the name for the progress bar element when no label is
- provided.
+ The value of the progress indicator. If it's received the component is determinate otherwise is
+ indeterminate.
-
'Progress bar'
+
-
@@ -110,15 +110,11 @@ const sections = [
},
];
-const ProgressBarCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const ProgressBarCodePage = () => (
+
+
+
+
+);
export default ProgressBarCodePage;
diff --git a/apps/website/screens/components/progress-bar/code/examples/basicUsage.ts b/apps/website/screens/components/progress-bar/code/examples/basicUsage.ts
deleted file mode 100644
index 42284bf65b..0000000000
--- a/apps/website/screens/components/progress-bar/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { DxcProgressBar, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => (
-
-
-
-);`;
-
-const scope = {
- DxcProgressBar,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/progress-bar/code/examples/basicUsage.tsx b/apps/website/screens/components/progress-bar/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..78fe32e7a2
--- /dev/null
+++ b/apps/website/screens/components/progress-bar/code/examples/basicUsage.tsx
@@ -0,0 +1,14 @@
+import { DxcProgressBar, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => (
+
+
+
+);`;
+
+const scope = {
+ DxcProgressBar,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/progress-bar/code/examples/overlay.ts b/apps/website/screens/components/progress-bar/code/examples/overlay.ts
deleted file mode 100644
index 0cdd0be6f2..0000000000
--- a/apps/website/screens/components/progress-bar/code/examples/overlay.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { DxcProgressBar, DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [isVisible, changeIsVisible] = useState(false);
- const showModal = () => {
- changeIsVisible(true);
- fetchData().then(() => {
- changeIsVisible(false);
- });
- };
-
- const fetchData = () => {
- return new Promise((resolve) => {
- setTimeout(() => {
- resolve();
- }, 3000);
- });
- };
-
- return (
-
-
-
- {isVisible && (
-
- )}
-
-
- );
-}`;
-
-const scope = {
- DxcProgressBar,
- DxcButton,
- DxcInset,
- DxcFlex,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/progress-bar/code/examples/overlay.tsx b/apps/website/screens/components/progress-bar/code/examples/overlay.tsx
new file mode 100644
index 0000000000..cc7d8dced3
--- /dev/null
+++ b/apps/website/screens/components/progress-bar/code/examples/overlay.tsx
@@ -0,0 +1,47 @@
+import { DxcProgressBar, DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [isVisible, changeIsVisible] = useState(false);
+ const showModal = () => {
+ changeIsVisible(true);
+ fetchData().then(() => {
+ changeIsVisible(false);
+ });
+ };
+
+ const fetchData = () => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve();
+ }, 3000);
+ });
+ };
+
+ return (
+
+
+
+ {isVisible && (
+
+ )}
+
+
+ );
+}`;
+
+const scope = {
+ DxcProgressBar,
+ DxcButton,
+ DxcInset,
+ DxcFlex,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx b/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx
new file mode 100644
index 0000000000..30bd60fbd0
--- /dev/null
+++ b/apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx
@@ -0,0 +1,143 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import Example from "@/common/example/Example";
+import default_overlay from "./images/default_overlay.png";
+import anatomy from "./images/progress_bar_anatomy.png";
+import determinate_undeterminate from "./examples/determinate_undeterminate";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Progress bars are used to show the progression of a task over time. They provide users with immediate visual
+ feedback about the current state of an operation, such as loading content, uploading a file, or completing a
+ form.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label(Optional): text element that describes the purpose or context of the
+ progress bar (e.g., "Uploading file...").
+
+
+ Helper text(Optional): provides additional information or clarification related
+ to the progress, such as status messages or expected duration.
+
+
+ Progress track line: the filled portion of the bar showing completed progress.
+
+
+ Progress total line: the background bar representing the total task to be completed.
+
+
+ Progress indicator(Optional): highlights the current progress value within the
+ bar.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+ Progress bars come in different styles based on task nature and UI context.
+
+ ),
+ subSections: [
+ {
+ title: "Default or overlay",
+ content: (
+ <>
+
+
+ Default: displays the progress bar inline, directly within the page or component
+ layout. This is the most commonly used style, suitable for non-blocking tasks that allow the user to
+ continue interacting with the UI.
+
+
+ Overlay: displays the progress with a background overlay, temporarily blocking
+ interaction with the UI. It's used for tasks that require user attention or when interaction must be
+ paused until the task is complete.
+
+
+
+
+ ),
+ },
+ {
+ title: "Determinate or indeterminate",
+ content: (
+ <>
+
+
+ Determinate: are used when the system can calculate the percentage of work completed.
+
+
+ Indeterminate: are used when the duration of the task is unknown or unpredictable.
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Provide clear feedback: always display a progress bar when the task takes longer than a few
+ seconds. This reassures users that the system is processing and gives them a sense of control. If possible,
+ include a label or percentage to indicate how much of the task is completed.
+
+
+ Avoid overuse: don't show a progress bar for tasks shorter than 1 second — use a spinner or
+ no feedback instead. Don't use a progress bar just for decoration; it should always reflect a real process.
+
+
+ Provide contextual information: whenever possible, provide additional information like
+ "Starting," "Halfway," or "Almost Done" to help users gauge the task status. If applicable, show what the
+ task involves, especially when the user is waiting for something critical (e.g., "Updating to the latest
+ version...").
+
+
+ Use the right variant: use determinate when the completion percentage is known (e.g., file
+ uploads, task completion). Use indeterminate when the system can't predict the time or progress (e.g.,
+ loading content, waiting for server responses).
+
+
+ Avoid blocking the UI: when progress is happening in the background, place the progress bar
+ in a non-intrusive area, like near the top of the page or inside a specific section. Use overlay variant
+ only when necessary, as it blocks user interaction. Make sure to include a clear indication of what the user
+ is waiting for and an estimated time if possible.
+
+
+ Combine with other feedback: pair with success, warning, or info toasts or alerts when
+ appropriate to give users closure after completion.
+
+
+
+ ),
+ },
+];
+
+const ProgressBarOverviewPage = () => (
+
+
+
+
+);
+
+export default ProgressBarOverviewPage;
diff --git a/apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.tsx b/apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.tsx
new file mode 100644
index 0000000000..2502a0d1d7
--- /dev/null
+++ b/apps/website/screens/components/progress-bar/overview/examples/determinate_undeterminate.tsx
@@ -0,0 +1,28 @@
+import { DxcProgressBar, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcProgressBar,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/progress-bar/overview/images/default_overlay.png b/apps/website/screens/components/progress-bar/overview/images/default_overlay.png
new file mode 100644
index 0000000000..e15db544ad
Binary files /dev/null and b/apps/website/screens/components/progress-bar/overview/images/default_overlay.png differ
diff --git a/apps/website/screens/components/progress-bar/overview/images/progress_bar_anatomy.png b/apps/website/screens/components/progress-bar/overview/images/progress_bar_anatomy.png
new file mode 100644
index 0000000000..f4cf39ca28
Binary files /dev/null and b/apps/website/screens/components/progress-bar/overview/images/progress_bar_anatomy.png differ
diff --git a/apps/website/screens/components/progress-bar/specs/ProgressBarSpecsPage.tsx b/apps/website/screens/components/progress-bar/specs/ProgressBarSpecsPage.tsx
deleted file mode 100644
index 0bc16ce496..0000000000
--- a/apps/website/screens/components/progress-bar/specs/ProgressBarSpecsPage.tsx
+++ /dev/null
@@ -1,436 +0,0 @@
-import { DxcTable, DxcBulletedList, DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import specsImage from "./images/progress_specs.png";
-import anatomyImage from "./images/progress_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
-
- {
- title: "Anatomy",
- content: (
- <>
-
-
-
- Label (Optional)
-
- Progress track line
-
- Helper text (Optional)
-
- Progress total line
-
- Progress indicator (Optional){" "}
-
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
-
- And also apply different values to each side of the component:
- top, bottom, left, right.
-
-
- ),
- },
- {
- title: "Typography",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const ProgressBarSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ProgressBarSpecsPage;
diff --git a/apps/website/screens/components/progress-bar/specs/images/progress_anatomy.png b/apps/website/screens/components/progress-bar/specs/images/progress_anatomy.png
deleted file mode 100644
index 090493057d..0000000000
Binary files a/apps/website/screens/components/progress-bar/specs/images/progress_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/progress-bar/specs/images/progress_specs.png b/apps/website/screens/components/progress-bar/specs/images/progress_specs.png
deleted file mode 100644
index d87d412bd4..0000000000
Binary files a/apps/website/screens/components/progress-bar/specs/images/progress_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/progress-bar/usage/ProgressBarUsagePage.tsx b/apps/website/screens/components/progress-bar/usage/ProgressBarUsagePage.tsx
deleted file mode 100644
index 05fb4cf7d3..0000000000
--- a/apps/website/screens/components/progress-bar/usage/ProgressBarUsagePage.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import Example from "@/common/example/Example";
-import determinate_indeterminate from "./examples/determinate_undeterminate";
-import variants from "./images/progress_variants.png";
-
-const sections = [
- {
- title: "Usage",
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Use a progress bar when it needs to give feedback in a long-running process with continuous values.
-
-
- Add additional information to clarify the user about the action it is waiting ("Sending
- documents...").
-
-
- Use the determinate type whenever possible, the user can have an estimation on how long it is going take.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- For an unknown amount of time/progress, consider using a loading spinner instead.
-
-
- Do not use this type of component in actions that will take less than 1 minute of processing.
-
-
- ),
- },
- ],
- },
- {
- title: "Variants",
- content: (
- <>
-
- The component progress-bar has two variants: default and overlay.
-
-
-
-
-
- ),
- },
- {
- title: "Determinate or indeterminate",
- content: (
- <>
-
-
-
- Determinate indicators display how long a process will take. They should be used in longer processes.
-
-
-
- Indeterminate indicators express an unspecified amount of wait time. They should be used when:
-
-
- The processing time is unknown.
-
- The wait time is expected to be short enough that it's not necessary to display.
-
-
-
-
-
- ),
- },
-];
-
-const ProgressBarUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ProgressBarUsagePage;
diff --git a/apps/website/screens/components/progress-bar/usage/examples/determinate_undeterminate.ts b/apps/website/screens/components/progress-bar/usage/examples/determinate_undeterminate.ts
deleted file mode 100644
index 39346dd8c8..0000000000
--- a/apps/website/screens/components/progress-bar/usage/examples/determinate_undeterminate.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { DxcProgressBar, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcProgressBar,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/progress-bar/usage/images/progress_variants.png b/apps/website/screens/components/progress-bar/usage/images/progress_variants.png
deleted file mode 100644
index 3d60e7328f..0000000000
Binary files a/apps/website/screens/components/progress-bar/usage/images/progress_variants.png and /dev/null differ
diff --git a/apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx b/apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx
index 78ccea72d3..ca0085e452 100644
--- a/apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx
+++ b/apps/website/screens/components/quick-nav/QuickNavPageLayout.tsx
@@ -2,26 +2,27 @@ import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
import PageHeading from "@/common/PageHeading";
import TabsPageHeading from "@/common/TabsPageLayout";
import ComponentHeading from "@/common/ComponentHeading";
+import Code from "@/common/Code";
import { ReactNode } from "react";
const QuickNavPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/quick-nav" },
- { label: "Usage", path: "/components/quick-nav/usage" },
- { label: "Specifications", path: "/components/quick-nav/specifications" },
+ { label: "Overview", path: "/components/quick-nav" },
+ { label: "Code", path: "/components/quick-nav/code" },
];
return (
-
+
-
-
+
+
- The quick nav component allows navigation inside a page. It renders the links according to the headings of
- the content in order to navigate to each section. The navigation is done using the link label or the link
- label plus sublink label when it is a sublink. If there is any space, it will be replaced by '-'.
+ The quick nav component allows navigation inside a page. It renders links according to the headings of the
+ content structure, enabling users to jump to specific sections. The navigation label is based on the section
+ title or a combination of section and sub-section titles (for nested links). If a heading includes spaces,
+ they are replaced with hyphens (-) in the URL.
-
+
{children}
diff --git a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
index a9ba99a767..1c89ea016a 100644
--- a/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
+++ b/apps/website/screens/components/quick-nav/code/QuickNavCodePage.tsx
@@ -1,11 +1,10 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import quickNav from "./examples/quickNav";
import withContent from "./examples/withContent";
-import TableCode from "@/common/TableCode";
+import { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
const sections = [
@@ -22,17 +21,9 @@ const sections = [
-
-
title
-
- string
-
-
Title of the quick nav component.
-
-
-
-
+
links
@@ -42,7 +33,8 @@ const sections = [
Links of the quick nav component. Only first and second level links will be shown in the quick nav, due to
- design restrictions. Each link has the following properties:
+ design restrictions. The component automatically detects HashRouter usage and enables smooth scrolling
+ navigation when appropriate. Each link has the following properties:
label: Text to be shown in the link. The content must be wrapped with an id equal to the
@@ -56,6 +48,14 @@ const sections = [
-
-
-
- Accordions are used to group similar content and hide or
- show it depending on user needs or preferences. Accordions
- give users more granular control over the interface and help
- digest content in stages, rather than all at once.
-
-
-
-
-
-
-
- The accordion component delivers large amounts of content in
- a small space through progressive disclosure.
-
-
-
-
-
-
-
-
-
-
-
-
- Alert messages are meant to provide contextual feedback
- about important changes in the interface.
-
-
-
+
+
+
+ Accordions are used to group similar content and hide or
+ show it depending on user needs or preferences. Accordions
+ give users more granular control over the interface and help
+ digest content in stages, rather than all at once.
+
+
+
+
+
+
+
+ The accordion component delivers large amounts of content in
+ a small space through progressive disclosure.
+
+
+
+
+
+
+
+
+
+
+
+
+ Alert messages are meant to provide contextual feedback
+ about important changes in the interface.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcQuickNav,
+ DxcFlex,
+ DxcHeading,
+ DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx b/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx
new file mode 100644
index 0000000000..ec86c0878f
--- /dev/null
+++ b/apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx
@@ -0,0 +1,99 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import anatomyImage from "./images/quickNav_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Quick nav is used to improve in-page navigation by listing content sections and subsections based on the heading
+ hierarchy. This helps users understand the page structure at a glance and jump directly to the content they're
+ interested in. It's especially useful on documentation pages, dashboards and long-form content.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Divider: a thin vertical line that visually separates the quick nav from the main content
+ area. Its purpose is to create a clear boundary between navigation and content, improving readability and
+ layout organization.
+
+
+ Title(Optional): a short descriptive title such as "Contents" or "On this page"
+ that provides context for the navigation list.
+
+
+ Links: the main navigation items, each representing a primary section on the page. These
+ are generated from top-level headings and are clickable.
+
+
+ Sublinks(Optional): secondary navigation items, generated from subheadings nested
+ under the main sections. These allow finer-grain navigation within a specific topic.
+
+
+
+ ),
+ },
+ {
+ title: "Responsive behavior",
+ content: (
+ <>
+
+ When designing applications that contain a quick nav for smaller screens, make sure to set a minimum width for
+ the main content so that the quick nav does not overwhelm the main content.
+
+
+ Also consider hiding this component once a specific breakpoint has been reached to allow users to focus on the
+ primary content.
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Provide a clear title: use a meaningful title like "On this page" to help users understand
+ the context of the links.
+
+
+ Show structure clearly: use quick nav to mirror the hierarchy of your content, making it
+ easier to follow and navigate. Keep headings descriptive and consistent so link labels are meaningful when
+ rendered.
+
+
+ Avoid clutter: avoid rendering quick nav on pages with very little content; it can feel
+ redundant.
+
+
+ Maintain visual separation from main content: always allow sufficient spacing between the
+ quick nav and the main content area. This helps users visually distinguish navigation from content and avoids
+ overwhelming the layout. Use padding or margins to ensure the quick nav doesn't feel cramped or interfere with
+ readability, especially on larger screens or dense layouts.
+
+
+ Pair with other navigational tools: combine quick nav with tabs or breadcrumbs for a
+ comprehensive navigation experience across and within pages.
+
+
+ ),
+ },
+];
+
+const QuickNavOverviewPage = () => (
+
+
+
+
+);
+
+export default QuickNavOverviewPage;
diff --git a/apps/website/screens/components/quick-nav/overview/images/quickNav_anatomy.png b/apps/website/screens/components/quick-nav/overview/images/quickNav_anatomy.png
new file mode 100644
index 0000000000..c4fff8511a
Binary files /dev/null and b/apps/website/screens/components/quick-nav/overview/images/quickNav_anatomy.png differ
diff --git a/apps/website/screens/components/quick-nav/specs/QuickNavSpecsPage.tsx b/apps/website/screens/components/quick-nav/specs/QuickNavSpecsPage.tsx
deleted file mode 100644
index ce2dce75e9..0000000000
--- a/apps/website/screens/components/quick-nav/specs/QuickNavSpecsPage.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import { DxcTable, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import specsImage from "./images/quickNav_specs.png";
-import anatomyImage from "./images/quickNav_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
-
- Title (Optional)
-
- Links
-
- Sublinks (Optional)
-
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const QuickNavSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default QuickNavSpecsPage;
diff --git a/apps/website/screens/components/quick-nav/specs/images/quickNav_anatomy.png b/apps/website/screens/components/quick-nav/specs/images/quickNav_anatomy.png
deleted file mode 100644
index 36c280634c..0000000000
Binary files a/apps/website/screens/components/quick-nav/specs/images/quickNav_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/quick-nav/specs/images/quickNav_specs.png b/apps/website/screens/components/quick-nav/specs/images/quickNav_specs.png
deleted file mode 100644
index de9fe101ef..0000000000
Binary files a/apps/website/screens/components/quick-nav/specs/images/quickNav_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/quick-nav/usage/QuickNavUsagePage.tsx b/apps/website/screens/components/quick-nav/usage/QuickNavUsagePage.tsx
deleted file mode 100644
index b3cd152c30..0000000000
--- a/apps/website/screens/components/quick-nav/usage/QuickNavUsagePage.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { DxcParagraph, 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: (
- <>
-
- The quick nav displays the content of a page or section by order of hierarchy and headings.
-
-
-
- Use quick nav to show users an overview of a page or section's content and allow them to navigate
- directly to it.
-
-
- Quick nav is particularly useful for pages with long sections of content.
-
-
- Quick nav works well with tabs when organizing and presenting easily navigable content in terms of main and
- sub-sections.
-
-
-
- ),
- },
-];
-
-const QuickNavUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default QuickNavUsagePage;
diff --git a/apps/website/screens/components/radio-group/RadioGroupPageLayout.tsx b/apps/website/screens/components/radio-group/RadioGroupPageLayout.tsx
index 961904f34e..378833cea3 100644
--- a/apps/website/screens/components/radio-group/RadioGroupPageLayout.tsx
+++ b/apps/website/screens/components/radio-group/RadioGroupPageLayout.tsx
@@ -6,20 +6,19 @@ import { ReactNode } from "react";
const RadioGroupPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/radio-group" },
- { label: "Usage", path: "/components/radio-group/usage" },
- { label: "Specifications", path: "/components/radio-group/specifications" },
+ { label: "Overview", path: "/components/radio-group" },
+ { label: "Code", path: "/components/radio-group/code" },
];
return (
-
+
-
-
+
+
- A radio group let the user make a mutually exclusive selection from a group of options.
+ A radio group allows users to select one option from a set of related, mutually exclusive choices.
-
+
{children}
diff --git a/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx b/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
index 20541fdb37..2b5ec74c47 100644
--- a/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
+++ b/apps/website/screens/components/radio-group/code/RadioGroupCodePage.tsx
@@ -1,13 +1,11 @@
import { DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import errorHandling from "./examples/errorHandling";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
const sections = [
@@ -24,6 +22,16 @@ const sections = [
+
+
ariaLabel
+
+ string
+
+
Specifies a string to be used as the name for the radio group when no `label` is provided.
+
+ 'Radio group'
+
+
defaultValue
@@ -33,14 +41,34 @@ const sections = [
-
-
value
+
disabled
+
+ boolean
+
+
If true, the component will be disabled.
+
+ false
+
+
+
+
error
string
- Value of the radio group. If undefined, the component will be uncontrolled and the value will be managed
- internally by the component.
+ If it is a defined value and also a truthy string, the component will change its appearance, showing the
+ error below the radio group. If the defined value is an empty string, it will reserve a space below the
+ component for a future error, but it would not change its look. In case of being undefined or null, both
+ the appearance and the space for the error message would not be modified.
+
- An array of objects representing the selectable options. Each object Option has the following properties:
-
-
- label: Label of the option placed next to the radio input.
-
-
- value: Value of the option. It should be unique and not an empty string, which is reserved to
- the optional item added by the optional prop.
-
-
- disabled: disables the option.
-
-
+ This function will be called when the radio group loses the focus. An object including the value and the
+ error will be passed to this function. If there is no error, error will not be defined.
-
-
disabled
+
onChange
- boolean
+ {"(value: string) => void"}
-
If true, the component will be disabled.
- false
+ This function will be called when the user chooses an option. The new value will be passed to this
+ function.
+
-
optional
@@ -132,59 +137,59 @@ const sections = [
-
readOnly
- boolean
+
+
+ options
+
-
If true, the component will not be mutable, meaning the user can not edit the control.
- This function will be called when the radio group loses the focus. An object including the value and the
- error will be passed to this function. If there is no error, error will not be defined.
+ {"React.Ref"}
+
Reference to the component.
-
-
error
+
stacking
- string
+ 'row' | 'column'
+
Sets the orientation of the options within the radio group.
- If it is a defined value and also a truthy string, the component will change its appearance, showing the
- error below the radio group. If the defined value is an empty string, it will reserve a space below the
- component for a future error, but it would not change its look. In case of being undefined or null, both
- the appearance and the space for the error message would not be modified.
+ 'column'
-
-
tabIndex
@@ -199,20 +204,15 @@ const sections = [
-
ref
+
value
- {"React.Ref"}
+ string
-
Reference to the component.
-
-
-
-
-
ariaLabel
- string
+ Value of the radio group. If undefined, the component will be uncontrolled and the value will be managed
+ internally by the component.
-
Specifies a string to be used as the name for the radio group when no `label` is provided.
-
'Radio group'
+
-
@@ -247,15 +247,11 @@ const sections = [
},
];
-const RadioGroupCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const RadioGroupCodePage = () => (
+
+
+
+
+);
export default RadioGroupCodePage;
diff --git a/apps/website/screens/components/radio-group/code/examples/controlled.ts b/apps/website/screens/components/radio-group/code/examples/controlled.ts
deleted file mode 100644
index 8bf2bc9059..0000000000
--- a/apps/website/screens/components/radio-group/code/examples/controlled.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { DxcRadioGroup, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const onChange = (value) => {
- setValue(value);
- };
- const onBlur = ({ value }) => {
- setValue(value);
- };
-
- const options = [
- { label: "Female", value: "female" },
- { label: "Male", value: "male" },
- { label: "Non-binary", value: "non-binary" },
- { label: "Other", value: "other" },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcRadioGroup,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/radio-group/code/examples/controlled.tsx b/apps/website/screens/components/radio-group/code/examples/controlled.tsx
new file mode 100644
index 0000000000..98456ee3ca
--- /dev/null
+++ b/apps/website/screens/components/radio-group/code/examples/controlled.tsx
@@ -0,0 +1,39 @@
+import { DxcRadioGroup, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const onChange = (value) => {
+ setValue(value);
+ };
+ const onBlur = ({ value }) => {
+ setValue(value);
+ };
+
+ const options = [
+ { label: "Female", value: "female" },
+ { label: "Male", value: "male" },
+ { label: "Non-binary", value: "non-binary" },
+ { label: "Other", value: "other" },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcRadioGroup,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/radio-group/code/examples/errorHandling.ts b/apps/website/screens/components/radio-group/code/examples/errorHandling.ts
deleted file mode 100644
index 0004551930..0000000000
--- a/apps/website/screens/components/radio-group/code/examples/errorHandling.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcRadioGroup, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [error, setError] = useState("");
- const onBlur = ({ error }) => {
- setError(error);
- };
-
- const options = [
- { label: "Pasta", value: "pasta" },
- { label: "Fish", value: "fish" },
- { label: "Meat", value: "Meat" },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcRadioGroup,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/radio-group/code/examples/errorHandling.tsx b/apps/website/screens/components/radio-group/code/examples/errorHandling.tsx
new file mode 100644
index 0000000000..f52616841f
--- /dev/null
+++ b/apps/website/screens/components/radio-group/code/examples/errorHandling.tsx
@@ -0,0 +1,34 @@
+import { DxcRadioGroup, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [error, setError] = useState("");
+ const onBlur = ({ error }) => {
+ setError(error);
+ };
+
+ const options = [
+ { label: "Pasta", value: "pasta" },
+ { label: "Fish", value: "fish" },
+ { label: "Meat", value: "Meat" },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcRadioGroup,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/radio-group/code/examples/uncontrolled.ts b/apps/website/screens/components/radio-group/code/examples/uncontrolled.ts
deleted file mode 100644
index c936d8e9a5..0000000000
--- a/apps/website/screens/components/radio-group/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { DxcRadioGroup, DxcInset, DxcFlex, DxcButton } from "@dxc-technology/halstack-react";
-import { useRef } from "react";
-
-const code = `() => {
- const radioGroupRef = useRef();
-
- const handleSubmit = () => {
- const radioGroup =
- radioGroupRef.current.getElementsByTagName("input")[0];
- console.log(radioGroup.value);
- };
-
- const options = [
- { label: "Orange", value: "orange" },
- { label: "Apple", value: "apple" },
- { label: "Pear", value: "pear" },
- ];
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcRadioGroup,
- DxcInset,
- DxcFlex,
- DxcButton,
- useRef,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/radio-group/code/examples/uncontrolled.tsx b/apps/website/screens/components/radio-group/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..79a12b479d
--- /dev/null
+++ b/apps/website/screens/components/radio-group/code/examples/uncontrolled.tsx
@@ -0,0 +1,42 @@
+import { DxcRadioGroup, DxcInset, DxcFlex, DxcButton } from "@dxc-technology/halstack-react";
+import { useRef } from "react";
+
+const code = `() => {
+ const radioGroupRef = useRef();
+
+ const handleSubmit = () => {
+ const radioGroup =
+ radioGroupRef.current.getElementsByTagName("input")[0];
+ console.log(radioGroup.value);
+ };
+
+ const options = [
+ { label: "Orange", value: "orange" },
+ { label: "Apple", value: "apple" },
+ { label: "Pear", value: "pear" },
+ ];
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcRadioGroup,
+ DxcInset,
+ DxcFlex,
+ DxcButton,
+ useRef,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/radio-group/overview/RadioGroupOverviewPage.tsx b/apps/website/screens/components/radio-group/overview/RadioGroupOverviewPage.tsx
new file mode 100644
index 0000000000..9a417f6535
--- /dev/null
+++ b/apps/website/screens/components/radio-group/overview/RadioGroupOverviewPage.tsx
@@ -0,0 +1,186 @@
+import { DxcBulletedList, DxcParagraph, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import stacking from "./examples/stacking";
+import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
+import Image from "@/common/Image";
+import anatomy from "./images/radio_group_anatomy.png";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The radio group component allows users to select a single option from a predefined set of
+ choices. Each option is represented by a radio button, ensuring clear and mutually exclusive selection within
+ the group. This component is commonly used in forms, surveys, and settings where users need to make a definitive
+ choice. By organizing options in a structured manner, the radio group enhances usability and readability,
+ guiding users toward a straightforward decision-making process.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label(Optional): the main heading for the radio group. It clearly communicates
+ what decision the user is being asked to make.
+
+
+ Helper text(Optional): optional supporting text that provides additional context
+ or instructions to guide the user's choice.
+
+
+ Radio input: the circular selection control representing each option. Only one radio input
+ can be selected within the group at a time.
+
+
+ Radio input label: the descriptive text placed next to each radio input. It communicates
+ the meaning of the option and is always visible for clarity.
+
+
+ Error message: displayed below the group when validation fails. It explains what went wrong
+ and helps users correct their input.
+
+
+
+ ),
+ },
+ {
+ title: "Stacking radio buttons",
+ content: (
+ <>
+
+ Radio buttons can be arranged vertically or horizontally depending on the context, layout constraints, and
+ user experience considerations.
+
+
+
+ ),
+ subSections: [
+ {
+ title: "Vertical stacking",
+ content: (
+
+ Vertical stacking is the preferred layout for radio groups, especially in forms or when presenting more than
+ two options. It enhances readability by allowing users to scan and compare choices with
+ minimal cognitive load. This format supports accessibility and scales well with longer option labels.
+
+ ),
+ },
+ {
+ title: "Horizontal stacking",
+ content: (
+
+ Horizontal stacking is suitable when screen space is limited or when options are short and easily
+ distinguishable. This layout can reduce vertical scroll but should only be used when it
+ doesn't compromise readability. Always maintain visual grouping and alignment, and ensure that labels remain
+ clear and unambiguous.
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Radio group vs. checkbox vs. switch",
+ content: (
+ <>
+
+ Although radio groups,{" "}
+
+ checkboxes
+
+ , and{" "}
+
+ switches
+ {" "}
+ may appear as selection controls, they serve distinct purposes in a user interface:
+
+
+
+
+
Component
+ Use case
+
+
+
+
+
+ Radio group
+
+
+ Use when the user must select only one option from a list of predefined, mutually
+ exclusive choices. Ideal for short, static lists where all options should be visible at once to support
+ decision-making.
+
+
+
+
+ Checkbox
+
+
+ Use when users can select multiple options independently. Each checkbox represents an
+ on/off decision, making them suitable for filters, preference settings, or multi-select tasks. A group
+ may allow none, some, or all options to be selected.
+
+
+
+
+ Switch
+
+
+ Use for a single, immediate toggle between two states, like on/off or enabled/disabled.
+ Switches should act instantly and are best for system or UI-level settings.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use for mutually exclusive choices: radio groups are best suited when users need to select{" "}
+ only one option from a predefined list. Avoid using them for multiple selections — checkboxes
+ are more appropriate in that case.
+
+
+ Keep option labels short and clear: use concise, descriptive labels so users can quickly
+ understand each choice. Avoid using long sentences or technical jargon, which can overwhelm the layout and
+ slow down decision-making.
+
+
+ Default to vertical layout for clarity: stacking options vertically improves readability and
+ makes scanning easier, especially when there are more than two options. Use horizontal layout only when space
+ is limited or options are very short and simple.
+
+
+ Group related options together: ensure all radio buttons in a group are logically related and
+ fall under the same question or decision point. Never separate radio buttons from their group label or helper
+ text — they should feel like a cohesive unit.
+
+
+ Handle errors gracefully: use validation to prevent submission without a selection if
+ required, and display clear, specific error messages.
+
+
+ ),
+ },
+];
+
+const RadioGroupOverviewPage = () => (
+
+
+
+
+);
+
+export default RadioGroupOverviewPage;
diff --git a/apps/website/screens/components/radio-group/overview/examples/stacking.tsx b/apps/website/screens/components/radio-group/overview/examples/stacking.tsx
new file mode 100644
index 0000000000..89e69a2469
--- /dev/null
+++ b/apps/website/screens/components/radio-group/overview/examples/stacking.tsx
@@ -0,0 +1,35 @@
+import { DxcRadioGroup, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ { label: "Red", value: "red" },
+ { label: "Blue", value: "blue" },
+ { label: "Green", value: "green" },
+ ];
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcRadioGroup,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/radio-group/overview/images/radio_group_anatomy.png b/apps/website/screens/components/radio-group/overview/images/radio_group_anatomy.png
new file mode 100644
index 0000000000..e2f09b8c0d
Binary files /dev/null and b/apps/website/screens/components/radio-group/overview/images/radio_group_anatomy.png differ
diff --git a/apps/website/screens/components/radio-group/specs/RadioGroupSpecsPage.tsx b/apps/website/screens/components/radio-group/specs/RadioGroupSpecsPage.tsx
deleted file mode 100644
index 2bd61eaeb6..0000000000
--- a/apps/website/screens/components/radio-group/specs/RadioGroupSpecsPage.tsx
+++ /dev/null
@@ -1,733 +0,0 @@
-import { DxcBulletedList, DxcParagraph, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import radioGroupBaseStates from "./images/radio_group_base_states.png";
-import radioGroupStates from "./images/radio_group_states.png";
-import radioGroupAnatomy from "./images/radio_group_anatomy.png";
-import radioGroupSpecs from "./images/radio_group_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- The following states are defined in the life cycle of the component: unselected enabled,{" "}
- unselected hover, unselected focus, unselected disabled,{" "}
- selected enabled, selected hover, selected focus and{" "}
- selected disabled.
-
-
-
-
-
- The following states are defined in the life cycle of the component: enabled,{" "}
- error, readOnly and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
- Helper text
- Radio input
- Radio input label
- Error message
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- (*) Radio item = Radio input + Radio label
-
- ),
- },
- {
- title: "Size",
- content: (
-
-
-
-
Property
-
Element
-
Value
-
-
-
-
-
- width
-
-
Radio input
-
18px
-
-
-
- width
-
-
focus outline
-
24px
-
-
-
- height
-
-
Radio input
-
18px
-
-
-
- height
-
-
focus outline
-
24px
-
-
-
- ),
- },
- {
- title: "Margin",
- content: (
- <>
-
- Margin can be set independently for top, right, bottom, and{" "}
- left.
-
-
-
-
-
Margin
-
Value
-
-
-
-
-
- xxsmall
-
-
6px
-
-
-
- xsmall
-
-
16px
-
-
-
- small
-
-
24px
-
-
-
- medium
-
-
36px
-
-
-
- large
-
-
48px
-
-
-
- xlarge
-
-
64px
-
-
-
- xxlarge
-
-
100px
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG 2.2",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 1.3.1: Info and Relationships
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 3.3.2: Labels or Instructions
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.4.6: Headings and Labels
-
-
-
- ),
- },
- {
- title: "WAI-ARIA 1.2",
- content: (
-
-
- WAI-ARIA Authoring Practices 1.2 -{" "}
-
- 3.12 Radio group
-
-
-
- ),
- },
- ],
- },
-];
-
-const RadioGroupSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default RadioGroupSpecsPage;
diff --git a/apps/website/screens/components/radio-group/specs/images/radio_group_anatomy.png b/apps/website/screens/components/radio-group/specs/images/radio_group_anatomy.png
deleted file mode 100644
index 418fc6265b..0000000000
Binary files a/apps/website/screens/components/radio-group/specs/images/radio_group_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/radio-group/specs/images/radio_group_base_states.png b/apps/website/screens/components/radio-group/specs/images/radio_group_base_states.png
deleted file mode 100644
index 093b4d1568..0000000000
Binary files a/apps/website/screens/components/radio-group/specs/images/radio_group_base_states.png and /dev/null differ
diff --git a/apps/website/screens/components/radio-group/specs/images/radio_group_specs.png b/apps/website/screens/components/radio-group/specs/images/radio_group_specs.png
deleted file mode 100644
index 432ff4efc7..0000000000
Binary files a/apps/website/screens/components/radio-group/specs/images/radio_group_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/radio-group/specs/images/radio_group_states.png b/apps/website/screens/components/radio-group/specs/images/radio_group_states.png
deleted file mode 100644
index f0fb9ec003..0000000000
Binary files a/apps/website/screens/components/radio-group/specs/images/radio_group_states.png and /dev/null differ
diff --git a/apps/website/screens/components/radio-group/usage/RadioGroupUsagePage.tsx b/apps/website/screens/components/radio-group/usage/RadioGroupUsagePage.tsx
deleted file mode 100644
index 86b36de0d7..0000000000
--- a/apps/website/screens/components/radio-group/usage/RadioGroupUsagePage.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { DxcBulletedList, DxcParagraph, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import stacking from "./examples/stacking";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- Labelling should be concise and clearly differentiated from other options.
-
-
- One option of the radio group can be pre-selected. Select the safest or convenient option.
-
- Single radio button should not be used.
-
- If the question that the user needs to respond is as easier as yes/no, it is recommended to use a checkbox
- instead of radio group.
-
-
- ),
- },
- {
- title: "Stacking",
- content: (
- <>
-
-
-
-
-
Name
- Description
-
-
-
-
-
- Vertical
-
-
- Short lists of radio buttons should be stacked vertically below a descriptive label to better associate
- the group. Options that are listed vertically are easier to read.
-
-
-
-
- Horizontal
-
-
- Multiple radio buttons may be displayed horizontally across the page while keeping them aligned within
- their respective columns. Here, it is needed to have in consideration that the linear radio buttons
- represent some challenge, because it's difficult to scan and localize.
-
-
-
-
-
- *In any case, in the specification it is specified the ideal distance between component with label in the same
- horizontal edge to avoid the problem of pairing and scalability.
-
-
- ),
- },
-];
-
-const RadioGroupUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default RadioGroupUsagePage;
diff --git a/apps/website/screens/components/radio-group/usage/examples/stacking.ts b/apps/website/screens/components/radio-group/usage/examples/stacking.ts
deleted file mode 100644
index f9690beb5b..0000000000
--- a/apps/website/screens/components/radio-group/usage/examples/stacking.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DxcRadioGroup, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const options = [
- { label: "Red", value: "red" },
- { label: "Blue", value: "blue" },
- { label: "Green", value: "gree" },
- ];
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcRadioGroup,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx b/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx
index 7ef2e6c3d7..d860d0b72e 100644
--- a/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx
+++ b/apps/website/screens/components/resultset-table/ResultsetTablePageLayout.tsx
@@ -6,26 +6,20 @@ 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.
+ The resultset table is a data-rich component designed for displaying large sets of information with built-in
+ features like sorting, pagination, and scroll behavior to support efficient exploration and comparison.
-
+
{children}
diff --git a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
index 842b4a1c08..387af74e89 100644
--- a/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
+++ b/apps/website/screens/components/resultset-table/code/ResultsetTableCodePage.tsx
@@ -1,16 +1,15 @@
import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import sortable from "./examples/sortable";
-import TableCode, { ExtendedTableCode } from "@/common/TableCode";
+import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
import reduced from "./examples/reduced";
import Link from "next/link";
import paginatorHidden from "./examples/paginatorHidden";
+import virtualized from "./examples/virtualized";
const actionsType = `{
icon: string | SVG;
@@ -30,6 +29,7 @@ const cellTypeString = `{
displayValue: React.ReactNode;
sortValue?: string | number | Date;
}[]`;
+
const columnTypeString = `{
displayValue: React.ReactNode;
isSortable?: boolean;
@@ -51,7 +51,7 @@ const sections = [
- being Row a Cell[] and being Cell an object with the following
- properties:
-
- {cellTypeString}
+ boolean
+
If true, paginator will not be displayed.
- An array of objects representing the rows of the table, you will have as many objects as columns in the
- table. Each row is a set of cells that have the following properties:
-
-
- displayValue: Value to be displayed in the cell.
-
-
- sortValue: Value to be used when sorting the table by that column. If not indicated
- displayValue will be used for sorting.
-
-
+ false
+
+
+
+
itemsPerPage
+
+ number
+
+
Number of items per page.
+
+ 5
+
+
+
+
itemsPerPageFunction
+
+ {"(value: number) => void"}
+
+
+ This function will be called when the user selects an item per page option. The value selected will be
+ passed as a parameter.
+
+
-
+
+
+
itemsPerPageOptions
+
+ number[]
+
+
An array of numbers representing the items per page options.
+ 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.
-
-
+
mode
@@ -133,18 +158,33 @@ const sections = [
-
-
- hidePaginator
+
+
+ rows
- boolean
+ Row[]
+
+ being Row a Cell[] and being Cell an object with the following
+ properties:
+
+ {cellTypeString}
-
If true, paginator will not be displayed.
- false
+ An array of objects representing the rows of the table, you will have as many objects as columns in the
+ table. Each row is a set of cells that have the following properties:
+
+
+ displayValue: Value to be displayed in the cell.
+
+
+ sortValue: Value to be used when sorting the table by that column. If not indicated
+ displayValue will be used for sorting.
+
+
+
-
showGoToPage
@@ -157,55 +197,33 @@ const sections = [
-
itemsPerPage
+
tabIndex
number
-
Number of items per page.
-
- 5
-
-
-
-
itemsPerPageOptions
-
- number[]
-
-
An array of numbers representing the items per page options.
-
-
-
-
-
itemsPerPageFunction
- {"(value: number) => void"}
+ Value of the tabindex attribute applied to the sortable icon.
- This function will be called when the user selects an item per page option. The value selected will be
- passed as a parameter.
+ 0
- 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.
+
+
+ virtualizedHeight
+
-
-
-
-
-
tabIndex
- number
+ string
- Value of the tabindex attribute applied to the sortable icon.
+ A fixed height must be set to enable virtualization. If no height is provided, the table will
+ automatically adjust to the height of its content, and virtualization will not be applied.
- 0
+
-
@@ -235,7 +253,7 @@ const sections = [
-
+
actions
@@ -287,19 +305,19 @@ const sections = [
title: "No paginator",
content: ,
},
+ {
+ title: "Virtualized",
+ content: ,
+ },
],
},
];
-const ResultsetTableCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const ResultsetTableCodePage = () => (
+
+
+
+
+);
export default ResultsetTableCodePage;
diff --git a/apps/website/screens/components/resultset-table/code/examples/basicUsage.ts b/apps/website/screens/components/resultset-table/code/examples/basicUsage.ts
deleted file mode 100644
index 6595122755..0000000000
--- a/apps/website/screens/components/resultset-table/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { DxcResultsetTable, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const columns = [
- { displayValue: "Id"},
- { displayValue: "Name"},
- { displayValue: "City"},
- { displayValue: "Actions"},
- ];
-
- const rows = [
- [
- { displayValue: "001"},
- { displayValue: "Peter"},
- { displayValue: "Miami"},
- { displayValue: },
- ],
- [
- { displayValue: "002"},
- { displayValue: "Louis"},
- { displayValue: "London"},
- { displayValue: },
- ],
- [
- { displayValue: "003"},
- { displayValue: "Lana"},
- { displayValue: "Amsterdam"},
- { displayValue: },
- ],
- [
- { displayValue: "004"},
- { displayValue: "Rick"},
- { displayValue: "London"},
- { displayValue: },
- ],
- [
- { displayValue: "005"},
- { displayValue: "Mark"},
- { displayValue: "Miami"},
- { displayValue: },
- ],
- [
- { displayValue: "006"},
- { displayValue: "Cris"},
- { displayValue: "Paris"},
- { displayValue: },
- ],
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcResultsetTable,
- DxcButton,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/code/examples/basicUsage.tsx b/apps/website/screens/components/resultset-table/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..cde769d42e
--- /dev/null
+++ b/apps/website/screens/components/resultset-table/code/examples/basicUsage.tsx
@@ -0,0 +1,66 @@
+import { DxcResultsetTable, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const columns = [
+ { displayValue: "Id"},
+ { displayValue: "Name"},
+ { displayValue: "City"},
+ { displayValue: "Actions"},
+ ];
+
+ const rows = [
+ [
+ { displayValue: "001"},
+ { displayValue: "Peter"},
+ { displayValue: "Miami"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "002"},
+ { displayValue: "Louis"},
+ { displayValue: "London"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "003"},
+ { displayValue: "Lana"},
+ { displayValue: "Amsterdam"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "004"},
+ { displayValue: "Rick"},
+ { displayValue: "London"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "005"},
+ { displayValue: "Mark"},
+ { displayValue: "Miami"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "006"},
+ { displayValue: "Cris"},
+ { displayValue: "Paris"},
+ { displayValue: },
+ ],
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcResultsetTable,
+ DxcButton,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/code/examples/paginatorHidden.ts b/apps/website/screens/components/resultset-table/code/examples/paginatorHidden.ts
deleted file mode 100644
index 68f731707f..0000000000
--- a/apps/website/screens/components/resultset-table/code/examples/paginatorHidden.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { DxcResultsetTable, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const columns = [
- { displayValue: "Id"},
- { displayValue: "Name"},
- { displayValue: "City"},
- { displayValue: "Actions"},
- ];
-
- const actions = [
- {
- icon: "filled_delete",
- title: "Delete",
- onClick: () => {},
- },
- {
- title: "edit",
- onClick: (value) => {},
- options:[
- {
- value: "1",
- label: "Edit",
- },
- {
- value: "2",
- label: "Mark as selected",
- },
- ]
- },
- ];
-
- const rows = [
- [
- { displayValue: "001"},
- { displayValue: "Peter"},
- { displayValue: "Miami"},
- { displayValue: },
- ],
- [
- { displayValue: "002"},
- { displayValue: "Louis"},
- { displayValue: "London"},
- { displayValue: },
- ],
- [
- { displayValue: "003"},
- { displayValue: "Lana"},
- { displayValue: "Amsterdam"},
- { displayValue: },
- ],
- [
- { displayValue: "004"},
- { displayValue: "Rick"},
- { displayValue: "London"},
- { displayValue: },
- ],
- [
- { displayValue: "005"},
- { displayValue: "Mark"},
- { displayValue: "Miami"},
- { displayValue: },
- ],
- [
- { displayValue: "006"},
- { displayValue: "Cris"},
- { displayValue: "Paris"},
- { displayValue: },
- ],
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcResultsetTable,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/code/examples/paginatorHidden.tsx b/apps/website/screens/components/resultset-table/code/examples/paginatorHidden.tsx
new file mode 100644
index 0000000000..44ec11e86e
--- /dev/null
+++ b/apps/website/screens/components/resultset-table/code/examples/paginatorHidden.tsx
@@ -0,0 +1,88 @@
+import { DxcResultsetTable, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const columns = [
+ { displayValue: "Id"},
+ { displayValue: "Name"},
+ { displayValue: "City"},
+ { displayValue: "Actions"},
+ ];
+
+ const actions = [
+ {
+ icon: "filled_delete",
+ title: "Delete",
+ onClick: () => {},
+ },
+ {
+ title: "edit",
+ onClick: (value) => {},
+ options:[
+ {
+ value: "1",
+ label: "Edit",
+ },
+ {
+ value: "2",
+ label: "Mark as selected",
+ },
+ ]
+ },
+ ];
+
+ const rows = [
+ [
+ { displayValue: "001"},
+ { displayValue: "Peter"},
+ { displayValue: "Miami"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "002"},
+ { displayValue: "Louis"},
+ { displayValue: "London"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "003"},
+ { displayValue: "Lana"},
+ { displayValue: "Amsterdam"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "004"},
+ { displayValue: "Rick"},
+ { displayValue: "London"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "005"},
+ { displayValue: "Mark"},
+ { displayValue: "Miami"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "006"},
+ { displayValue: "Cris"},
+ { displayValue: "Paris"},
+ { displayValue: },
+ ],
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcResultsetTable,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/code/examples/reduced.ts b/apps/website/screens/components/resultset-table/code/examples/reduced.ts
deleted file mode 100644
index 76908387bd..0000000000
--- a/apps/website/screens/components/resultset-table/code/examples/reduced.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { DxcResultsetTable, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const columns = [
- { displayValue: "Id"},
- { displayValue: "Name"},
- { displayValue: "City"},
- { displayValue: "Actions"},
- ];
-
- const actions = [
- {
- icon: "delete",
- title: "Delete",
- onClick: () => {},
- },
- {
- title: "edit",
- onClick: (value) => {},
- options:[
- {
- value: "1",
- label: "Edit",
- },
- {
- value: "2",
- label: "Mark as selected",
- },
- ]
- },
- ];
-
- const rows = [
- [
- { displayValue: "001"},
- { displayValue: "Peter"},
- { displayValue: "Miami"},
- { displayValue: },
- ],
- [
- { displayValue: "002"},
- { displayValue: "Louis"},
- { displayValue: "London"},
- { displayValue: },
- ],
- [
- { displayValue: "003"},
- { displayValue: "Lana"},
- { displayValue: "Amsterdam"},
- { displayValue: },
- ],
- [
- { displayValue: "004"},
- { displayValue: "Rick"},
- { displayValue: "London"},
- { displayValue: },
- ],
- [
- { displayValue: "005"},
- { displayValue: "Mark"},
- { displayValue: "Miami"},
- { displayValue: },
- ],
- [
- { displayValue: "006"},
- { displayValue: "Cris"},
- { displayValue: "Paris"},
- { displayValue: },
- ],
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcResultsetTable,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/code/examples/reduced.tsx b/apps/website/screens/components/resultset-table/code/examples/reduced.tsx
new file mode 100644
index 0000000000..069d4406f3
--- /dev/null
+++ b/apps/website/screens/components/resultset-table/code/examples/reduced.tsx
@@ -0,0 +1,88 @@
+import { DxcResultsetTable, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const columns = [
+ { displayValue: "Id"},
+ { displayValue: "Name"},
+ { displayValue: "City"},
+ { displayValue: "Actions"},
+ ];
+
+ const actions = [
+ {
+ icon: "delete",
+ title: "Delete",
+ onClick: () => {},
+ },
+ {
+ title: "edit",
+ onClick: (value) => {},
+ options:[
+ {
+ value: "1",
+ label: "Edit",
+ },
+ {
+ value: "2",
+ label: "Mark as selected",
+ },
+ ]
+ },
+ ];
+
+ const rows = [
+ [
+ { displayValue: "001"},
+ { displayValue: "Peter"},
+ { displayValue: "Miami"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "002"},
+ { displayValue: "Louis"},
+ { displayValue: "London"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "003"},
+ { displayValue: "Lana"},
+ { displayValue: "Amsterdam"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "004"},
+ { displayValue: "Rick"},
+ { displayValue: "London"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "005"},
+ { displayValue: "Mark"},
+ { displayValue: "Miami"},
+ { displayValue: },
+ ],
+ [
+ { displayValue: "006"},
+ { displayValue: "Cris"},
+ { displayValue: "Paris"},
+ { displayValue: },
+ ],
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcResultsetTable,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/code/examples/rows.tsx b/apps/website/screens/components/resultset-table/code/examples/rows.tsx
new file mode 100644
index 0000000000..4355d8f92d
--- /dev/null
+++ b/apps/website/screens/components/resultset-table/code/examples/rows.tsx
@@ -0,0 +1,15 @@
+import { DxcButton } from "@dxc-technology/halstack-react";
+
+const cities = ["London", "New York", "Madrid", "Berlin", "Paris", "Tokyo"];
+const names = ["Alice", "Bob", "Charlie", "Diana", "Evan", "Fiona"];
+export const rows = Array.from({ length: 100000 }, (_, index) => {
+ const id = String(index + 1).padStart(6, "0");
+ const name = names[index % names.length];
+ const city = cities[index % cities.length];
+ return [
+ { displayValue: id, sortValue: id },
+ { displayValue: name, sortValue: name },
+ { displayValue: city, sortValue: city },
+ { displayValue: },
+ ];
+});
diff --git a/apps/website/screens/components/resultset-table/code/examples/sortable.ts b/apps/website/screens/components/resultset-table/code/examples/sortable.ts
deleted file mode 100644
index 796b5bf3bb..0000000000
--- a/apps/website/screens/components/resultset-table/code/examples/sortable.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { DxcResultsetTable, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const showName = () => {
- return "Peter Smith";
- };
- const sortName = () => {
- return "Smith, Peter";
- };
- const columns = [
- { displayValue: "Id", isSortable: false },
- { displayValue: "Name", isSortable: true },
- { displayValue: "City", isSortable: false },
- { displayValue: "Actions", isSortable: false },
- ];
-
- const rows = [
- [
- { displayValue: "001", sortValue: "001" },
- { displayValue: showName(), sortValue: sortName() },
- { displayValue: "Miami", sortValue: "Miami" },
- { displayValue: },
- ],
- [
- { displayValue: "002", sortValue: "002" },
- { displayValue: "Louis", sortValue: "Louis" },
- { displayValue: "London", sortValue: "London" },
- { displayValue: },
- ],
- [
- { displayValue: "003", sortValue: "003" },
- { displayValue: "Lana", sortValue: "Lana" },
- { displayValue: "Amsterdam", sortValue: "Amsterdam" },
- { displayValue: },
- ],
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcResultsetTable,
- DxcButton,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/code/examples/sortable.tsx b/apps/website/screens/components/resultset-table/code/examples/sortable.tsx
new file mode 100644
index 0000000000..575e468fe4
--- /dev/null
+++ b/apps/website/screens/components/resultset-table/code/examples/sortable.tsx
@@ -0,0 +1,51 @@
+import { DxcResultsetTable, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const showName = () => {
+ return "Peter Smith";
+ };
+ const sortName = () => {
+ return "Smith, Peter";
+ };
+ const columns = [
+ { displayValue: "Id", isSortable: false },
+ { displayValue: "Name", isSortable: true },
+ { displayValue: "City", isSortable: false },
+ { displayValue: "Actions", isSortable: false },
+ ];
+
+ const rows = [
+ [
+ { displayValue: "001", sortValue: "001" },
+ { displayValue: showName(), sortValue: sortName() },
+ { displayValue: "Miami", sortValue: "Miami" },
+ { displayValue: },
+ ],
+ [
+ { displayValue: "002", sortValue: "002" },
+ { displayValue: "Louis", sortValue: "Louis" },
+ { displayValue: "London", sortValue: "London" },
+ { displayValue: },
+ ],
+ [
+ { displayValue: "003", sortValue: "003" },
+ { displayValue: "Lana", sortValue: "Lana" },
+ { displayValue: "Amsterdam", sortValue: "Amsterdam" },
+ { displayValue: },
+ ],
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcResultsetTable,
+ DxcButton,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/code/examples/virtualized.ts b/apps/website/screens/components/resultset-table/code/examples/virtualized.ts
new file mode 100644
index 0000000000..0eb37d70f8
--- /dev/null
+++ b/apps/website/screens/components/resultset-table/code/examples/virtualized.ts
@@ -0,0 +1,26 @@
+import { DxcResultsetTable, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
+import { rows } from "./rows";
+
+const code = `() => {
+ const columns = [
+ { displayValue: "Id", isSortable: true },
+ { displayValue: "Name", isSortable: true },
+ { displayValue: "City", isSortable: true },
+ { displayValue: "Actions", isSortable: false },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcResultsetTable,
+ DxcButton,
+ DxcInset,
+ rows,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx b/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx
new file mode 100644
index 0000000000..90b1bfc69b
--- /dev/null
+++ b/apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx
@@ -0,0 +1,210 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Code from "@/common/Code";
+import anatomy from "./images/resultset_table_anatomy.png";
+import resultsetTableOverflow from "./images/resultset_table_overflow.png";
+import resultsetTableResponsive from "./images/resultset_table_responsive.png";
+import Image from "@/common/Image";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The resultset table component is designed for displaying large datasets with interactive features such as
+ sorting, pagination, and selection. Unlike the basic table component, this one offers built-in functionality
+ that allows users to explore and manipulate data efficiently, making it ideal for use cases like search results,
+ reports, or management dashboards.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Header row: displays the column titles and defines the data categories for the table. It
+ also includes optional sorting icons to help users organize content.
+
+
+ Cell: represents an individual data point within the table. Cells are aligned with the
+ header columns and typically show text, numbers, or icons.
+
+
+ Sorting icon: indicates whether a column is sortable and shows the current sorting
+ direction (ascending or descending). Appears next to the header label when sorting is enabled.
+
+
+ Row: Represents a single entry in the dataset. Each row groups related cells and can
+ respond to user interactions like selection or hover.
+
+
+ Scrollbar: allows horizontal and vertical navigation when the table's content exceeds the
+ visible area. It ensures accessibility for large datasets.
+
+
+ Paginator: provides controls to navigate through multiple pages of results. It helps manage
+ large sets of data by splitting them into manageable views.
+
+
+
+ ),
+ },
+ {
+ title: "Using resultset tables",
+ content: (
+
+ The resultset table is intended for scenarios where users need to work with dynamic or high-volume data. Here
+ are key aspects to keep in mind:
+
+ ),
+ subSections: [
+ {
+ title: "Sorting and filtering",
+ content: (
+
+ Resultset tables support client-side or server-side sorting, which allows users to reorganize the data by
+ column. Use this feature to improve discoverability and simplify decision-making.
+
+ ),
+ },
+ {
+ title: "Pagination",
+ content: (
+
+ Built-in pagination controls prevent overwhelming the user with too much data at once and help maintain
+ performance. Choose the pagination strategy depending on your backend setup.
+
+ ),
+ },
+ {
+ title: "Row selection",
+ content: (
+
+ Users can select one or multiple rows to perform bulk actions. Use checkboxes for multi-selection and radio
+ buttons for single-selection. Selected rows can persist across pages if needed.
+
+ ),
+ },
+ {
+ title: "Action column",
+ content: (
+
+ Resultset tables can include an action column where users can perform row-level actions (e.g., edit, delete,
+ view details). This column should remain consistent across rows to maintain usability.
+
+ ),
+ },
+ {
+ title: "Custom content and responsiveness",
+ content: (
+
+ Cells can contain more than just text: icons, buttons, or status indicators are supported. However, maintain
+ clarity and avoid overloading. The layout can adapt to different screen sizes with horizontal scroll if
+ necessary.
+
+ ),
+ },
+ {
+ title: "Virtualization",
+ content: (
+
+ For very large datasets, virtualization improves performance by rendering only the visible rows within the
+ viewport, significantly reducing DOM load and enabling smooth scrolling. To enable virtualization, the{" "}
+ virtualizedHeight prop must be set to a valid value on the resultset table. This defines the
+ scrollable area and allows the table to calculate which rows should be rendered dynamically.
+
+ ),
+ },
+ {
+ title: "Accessibility",
+ content: (
+
+ The resultset table is fully keyboard navigable and screen-reader friendly. Ensure all custom content also
+ follows accessibility guidelines.
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Responsive behavior",
+ content: (
+ <>
+
+ Changes to the screen size affects tables based on the default behavior of their parent components (ex.
+ container, flexbox, grid).
+
+
+
+ When placing a table inside a container component that adjusts based on screen width, the table's width also
+ correspondingly adjusts up to a certain minimum value based on its content and the number of columns.
+
+
+
+ Using the overflow property of the container (to account for both horizontal and vertical adjustments) is
+ one way to preserve the size of the display of the table while using scrollbars for the adjustments needed
+ in place of continuous resizing.
+
+
+
+ Consider using the reduced mode for tables that are information dense and need to minimize the spacing in
+ between table cells. This can help accommodate more information as the screen size is reduced up to a
+ certain extent.
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use the resultset table when displaying large sets of interactive data: it is ideal for
+ workflows where users need to search, sort, or take action on rows.
+
+
+ Limit the number of columns to what is strictly necessary. Too many columns can make the
+ table hard to read and navigate.
+
+
+ Keep cell content focused: if you need to include actions or visuals, make sure they serve a
+ purpose and don't clutter the interface.
+
+
+ Do not place more than one or two actions per row. If additional actions are needed, consider
+ using a dropdown or context menu.
+
+
+ Label all interactive elements inside the table properly. This improves accessibility and
+ helps users understand the functionality.
+
+
+ Use consistent patterns across all rows. Keep the structure and interaction model predictable
+ to support learnability.
+
+
+ Optimize performance by using pagination, enabling virtualization and minimizing real-time
+ rendering when working with large datasets.
+
+
+ Adapt for responsiveness. If the table is used in narrow viewports, allow horizontal
+ scrolling or collapse less relevant columns.
+
+
+ ),
+ },
+];
+
+const ResultsetTableOverviewPage = () => (
+
+
+
+
+);
+
+export default ResultsetTableOverviewPage;
diff --git a/apps/website/screens/components/resultset-table/overview/images/resultset_table_anatomy.png b/apps/website/screens/components/resultset-table/overview/images/resultset_table_anatomy.png
new file mode 100644
index 0000000000..4ad897af54
Binary files /dev/null and b/apps/website/screens/components/resultset-table/overview/images/resultset_table_anatomy.png differ
diff --git a/apps/website/screens/components/resultset-table/overview/images/resultset_table_overflow.png b/apps/website/screens/components/resultset-table/overview/images/resultset_table_overflow.png
new file mode 100644
index 0000000000..2b8f1ba7c5
Binary files /dev/null and b/apps/website/screens/components/resultset-table/overview/images/resultset_table_overflow.png differ
diff --git a/apps/website/screens/components/resultset-table/overview/images/resultset_table_responsive.png b/apps/website/screens/components/resultset-table/overview/images/resultset_table_responsive.png
new file mode 100644
index 0000000000..3292203c39
Binary files /dev/null and b/apps/website/screens/components/resultset-table/overview/images/resultset_table_responsive.png differ
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: (
-
-
-
-
-
- ),
- },
- ],
- },
- {
- 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/select/SelectPageLayout.tsx b/apps/website/screens/components/select/SelectPageLayout.tsx
index c8fbe8d076..7bda78575e 100644
--- a/apps/website/screens/components/select/SelectPageLayout.tsx
+++ b/apps/website/screens/components/select/SelectPageLayout.tsx
@@ -6,20 +6,19 @@ import { ReactNode } from "react";
const SelectPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/select" },
- { label: "Usage", path: "/components/select/usage" },
- { label: "Specifications", path: "/components/select/specifications" },
+ { label: "Overview", path: "/components/select" },
+ { label: "Code", path: "/components/select/code" },
];
return (
-
+
-
+
The select component allows users to make single or multiple selections from a pre-defined list of options.
-
+
{children}
diff --git a/apps/website/screens/components/select/code/SelectCodePage.tsx b/apps/website/screens/components/select/code/SelectCodePage.tsx
index cdeba01db9..8116e12297 100644
--- a/apps/website/screens/components/select/code/SelectCodePage.tsx
+++ b/apps/website/screens/components/select/code/SelectCodePage.tsx
@@ -1,16 +1,15 @@
import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import errorHandling from "./examples/errorHandling";
import groups from "./examples/groupedOptions";
import icons from "./examples/icons";
-import TableCode, { ExtendedTableCode } from "@/common/TableCode";
+import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
+import virtualized from "./examples/virtualized";
const optionsType = `{
label: string;
@@ -32,6 +31,18 @@ const sections = [
+
+
ariaLabel
+
+ string
+
+
+ Specifies a string to be used as the name for the select element when no label is provided.
+
+
+ 'Select'
+
+
defaultValue
@@ -41,14 +52,49 @@ const sections = [
-
-
value
+
disabled
- string | string[]
+ boolean
+
If true, the component will be disabled.
- Value of the select. If undefined, the component will be uncontrolled and the value will be managed
- internally by the component.
+ false
+
+
+
+
+
+
+ enableSelectAll
+
+
+ boolean
+
+
Enables users to select multiple items from the list.
+
+ false
+
+
+
+
error
+
+ string
+
+
+ If it is a defined value and also a truthy string, the component will change its appearance, showing the
+ error below the select component. If the defined value is an empty string, it will reserve a space below
+ the component for a future error, but it would not change its look. In case of being undefined or null,
+ both the appearance and the space for the error message would not be modified.
+
+ 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.
+
+
-
+
+
+
multiple
+
+ boolean
+
+
+ If true, the select component will support multiple selected options. In that case, value will be an array
+ of strings with each selected option value.
+
+ This function will be called when the select loses the focus. An object including the value (or values)
+ and the error (if the value selected is not valid) will be passed to this function. If there is no error,{" "}
+ error will not be defined.
+
+ This function will be called when the user selects an option. An object including the new value (or
+ values) and the error (if the value selected is not valid) will be passed to this function. If there is no
+ error, error will not be defined.
+
+
-
+
+
+
optional
+
+ boolean
+
+
+ If true, the select will be optional, showing '(Optional)' next to the label and adding a default first
+ option with an empty string as value and the placeholder (if defined) as its label. Otherwise, the field
+ will be considered required and an error will be passed as a parameter to the onBlur and{" "}
+ onChange functions if an option wasn't selected.
+
+
+ false
+
+
+
+
+
options
@@ -123,17 +232,11 @@ const sections = [
options: List of Option instances.
+
+ You can't mix single and grouped options in the same array.
-
-
-
helperText
-
- string
-
-
Helper text to be placed above the select.
-
-
-
placeholder
@@ -152,92 +255,6 @@ const sections = [
false
-
-
multiple
-
- boolean
-
-
- If true, the select component will support multiple selected options. In that case, value will be an array
- of strings with each selected option value.
-
-
- false
-
-
-
-
disabled
-
- boolean
-
-
If true, the component will be disabled.
-
- false
-
-
-
-
optional
-
- boolean
-
-
- If true, the select will be optional, showing '(Optional)' next to the label and adding a default first
- option with an empty string as value and the placeholder (if defined) as its label. Otherwise, the field
- will be considered required and an error will be passed as a parameter to the onBlur and{" "}
- onChange functions if an option wasn't selected.
-
- This function will be called when the user selects an option. An object including the new value (or
- values) and the error (if the value selected is not valid) will be passed to this function. If there is no
- error, error will not be defined.
-
- This function will be called when the select loses the focus. An object including the value (or values)
- and the error (if the value selected is not valid) will be passed to this function. If there is no error,{" "}
- error will not be defined.
-
-
-
-
-
-
error
-
- string
-
-
- If it is a defined value and also a truthy string, the component will change its appearance, showing the
- error below the select component. If the defined value is an empty string, it will reserve a space below
- the component for a future error, but it would not change its look. In case of being undefined or null,
- both the appearance and the space for the error message would not be modified.
-
- 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.
-
-
-
-
size
@@ -269,14 +286,33 @@ const sections = [
-
-
ariaLabel
+
value
+
+ string | string[]
+
+
+ Value of the select. If undefined, the component will be uncontrolled and the value will be managed
+ internally by the component.
+
+
-
+
+
+
+
+
+ virtualizedHeight
+
+
string
- Specifies a string to be used as the name for the select element when no label is provided.
+ A fixed height must be set to enable virtualization. If no height is provided, the select will
+ automatically adjust to the height of its content, and virtualization will not be applied.
+
+
+
-
-
'Select'
@@ -293,6 +329,10 @@ const sections = [
title: "Uncontrolled",
content: ,
},
+ {
+ title: "Virtualized",
+ content: ,
+ },
{
title: "Error handling",
content: ,
@@ -302,22 +342,18 @@ const sections = [
content: ,
},
{
- title: "Icons",
+ title: "Icon usage",
content: ,
},
],
},
];
-const SelectCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const SelectCodePage = () => (
+
+
+
+
+);
export default SelectCodePage;
diff --git a/apps/website/screens/components/select/code/examples/controlled.ts b/apps/website/screens/components/select/code/examples/controlled.ts
deleted file mode 100644
index 24be862ba0..0000000000
--- a/apps/website/screens/components/select/code/examples/controlled.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const onChange = ({ value }) => {
- setValue(value);
- };
- const onBlur = ({ value, error }) => {
- setValue(value);
- };
-
- const options = [
- { label: "Madrid", value: "madrid" },
- { label: "Melbourne", value: "melbourne" },
- { label: "London", value: "london" },
- { label: "Roma", value: "roma" },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcSelect,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/controlled.tsx b/apps/website/screens/components/select/code/examples/controlled.tsx
new file mode 100644
index 0000000000..53665961fd
--- /dev/null
+++ b/apps/website/screens/components/select/code/examples/controlled.tsx
@@ -0,0 +1,40 @@
+import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+ const onBlur = ({ value, error }) => {
+ setValue(value);
+ };
+
+ const options = [
+ { label: "Madrid", value: "madrid" },
+ { label: "Melbourne", value: "melbourne" },
+ { label: "London", value: "london" },
+ { label: "Roma", value: "roma" },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/errorHandling.ts b/apps/website/screens/components/select/code/examples/errorHandling.ts
deleted file mode 100644
index cb9a022bc7..0000000000
--- a/apps/website/screens/components/select/code/examples/errorHandling.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const [error, setError] = useState();
- const onChange = ({ value }) => {
- setValue(value);
- };
- const onBlur = ({ value, error }) => {
- setValue(value);
- setError(error);
- };
-
- const options = [
- { label: "Madrid", value: "madrid" },
- { label: "Melbourne", value: "melbourne" },
- { label: "London", value: "london" },
- { label: "Roma", value: "roma" },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcSelect,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/errorHandling.tsx b/apps/website/screens/components/select/code/examples/errorHandling.tsx
new file mode 100644
index 0000000000..fb248f3f84
--- /dev/null
+++ b/apps/website/screens/components/select/code/examples/errorHandling.tsx
@@ -0,0 +1,43 @@
+import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const [error, setError] = useState();
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+ const onBlur = ({ value, error }) => {
+ setValue(value);
+ setError(error);
+ };
+
+ const options = [
+ { label: "Madrid", value: "madrid" },
+ { label: "Melbourne", value: "melbourne" },
+ { label: "London", value: "london" },
+ { label: "Roma", value: "roma" },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/groupedOptions.ts b/apps/website/screens/components/select/code/examples/groupedOptions.ts
deleted file mode 100644
index ec95f9febb..0000000000
--- a/apps/website/screens/components/select/code/examples/groupedOptions.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const options = [
- {
- label: "Managers",
- options: [
- { label: "Pablo", value: "pablo" },
- { label: "Marcos", value: "marcos" },
- { label: "Rachel", value: "rachel" },
- { label: "Margaret", value: "margaret" },
- ],
- },
- {
- label: "Engineers",
- options: [
- { label: "Yiminghe", value: "yiminghe" },
- { label: "Manuel", value: "manuel" },
- { label: "Bryan", value: "bryan" },
- { label: "Anand", value: "anand" },
- { label: "Jiale", value: "jiale" },
- ],
- },
- {
- label: "Designers",
- options: [
- { label: "Alex", value: "alex" },
- { label: "Tim", value: "tim" },
- { label: "Jairo", value: "Jairo" },
- ],
- },
- ];
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcSelect,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/groupedOptions.tsx b/apps/website/screens/components/select/code/examples/groupedOptions.tsx
new file mode 100644
index 0000000000..5959da8a3c
--- /dev/null
+++ b/apps/website/screens/components/select/code/examples/groupedOptions.tsx
@@ -0,0 +1,47 @@
+import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ {
+ label: "Designers",
+ options: [
+ { label: "Lara", value: "lara" },
+ { label: "Irene", value: "irene" }
+ ],
+ },
+ {
+ label: "Developers",
+ options: [
+ { label: "Jairo", value: "jairo" },
+ { label: "Enrique", value: "enrique" },
+ { label: "Jiale", value: "jiale" },
+ { label: "Iván", value: "ivan" }
+ ],
+ },
+ {
+ label: "Managers",
+ options: [
+ { label: "Aitor", value: "aitor" },
+ { label: "Raquel", value: "Raquel" }
+ ],
+ },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/icons.ts b/apps/website/screens/components/select/code/examples/icons.ts
deleted file mode 100644
index fcaf73d3b3..0000000000
--- a/apps/website/screens/components/select/code/examples/icons.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const options_material = [
- {
- label: "Transport",
- options: [
- {
- label: "Electric Car",
- value: "car",
- icon: "electric_car",
- },
- {
- label: "Motorcycle",
- value: "motorcycle",
- icon: "Motorcycle",
- },
- {
- label: "Train",
- value: "train",
- icon: "train",
- },
- {
- label: "Bike",
- value: "bike",
- icon: "pedal_bike",
- },
- ],
- },
- {
- label: "Entertainment",
- options: [
- {
- label: "Movie",
- value: "movie",
- icon: "movie",
- },
- {
- label: "Music",
- value: "music",
- icon: "music_note",
- },
- {
- label: "Games",
- value: "games",
- icon: "joystick",
- },
- ],
- },
- ];
-
-
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcSelect,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/icons.tsx b/apps/website/screens/components/select/code/examples/icons.tsx
new file mode 100644
index 0000000000..6fcbf9f830
--- /dev/null
+++ b/apps/website/screens/components/select/code/examples/icons.tsx
@@ -0,0 +1,72 @@
+import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options_material = [
+ {
+ label: "Transport",
+ options: [
+ {
+ label: "Electric Car",
+ value: "car",
+ icon: "electric_car",
+ },
+ {
+ label: "Motorcycle",
+ value: "motorcycle",
+ icon: "Motorcycle",
+ },
+ {
+ label: "Train",
+ value: "train",
+ icon: "train",
+ },
+ {
+ label: "Bike",
+ value: "bike",
+ icon: "pedal_bike",
+ },
+ ],
+ },
+ {
+ label: "Entertainment",
+ options: [
+ {
+ label: "Movie",
+ value: "movie",
+ icon: "movie",
+ },
+ {
+ label: "Music",
+ value: "music",
+ icon: "music_note",
+ },
+ {
+ label: "Games",
+ value: "games",
+ icon: "joystick",
+ },
+ ],
+ },
+ ];
+
+
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/uncontrolled.ts b/apps/website/screens/components/select/code/examples/uncontrolled.ts
deleted file mode 100644
index 0d21cc2897..0000000000
--- a/apps/website/screens/components/select/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { DxcSelect, DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-import { useRef } from "react";
-
-const code = `() => {
- const selectRef = useRef();
- const handleSubmit = () => {
- const select = selectRef.current.getElementsByTagName("input")[0];
- console.log(select.value);
- };
- const options = [
- { label: "Madrid", value: "madrid" },
- { label: "Melbourne", value: "melbourne" },
- { label: "London", value: "london" },
- { label: "Roma", value: "roma" },
- ];
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSelect,
- DxcFlex,
- DxcInset,
- DxcButton,
- useRef,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/uncontrolled.tsx b/apps/website/screens/components/select/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..fb3aefd1c0
--- /dev/null
+++ b/apps/website/screens/components/select/code/examples/uncontrolled.tsx
@@ -0,0 +1,41 @@
+import { DxcSelect, DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+import { useRef } from "react";
+
+const code = `() => {
+ const selectRef = useRef();
+ const handleSubmit = () => {
+ const select = selectRef.current.getElementsByTagName("input")[0];
+ console.log(select.value);
+ };
+ const options = [
+ { label: "Madrid", value: "madrid" },
+ { label: "Melbourne", value: "melbourne" },
+ { label: "London", value: "london" },
+ { label: "Roma", value: "roma" },
+ ];
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcFlex,
+ DxcInset,
+ DxcButton,
+ useRef,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/code/examples/virtualized.ts b/apps/website/screens/components/select/code/examples/virtualized.ts
new file mode 100644
index 0000000000..9afea2cfd4
--- /dev/null
+++ b/apps/website/screens/components/select/code/examples/virtualized.ts
@@ -0,0 +1,27 @@
+import { DxcSelect, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ ...Array.from({ length: 10000 }, (_, i) => ({
+ label: \`Option \${String(i + 1).padStart(2, "0")}\`,
+ value: \`\${i + 1}\`,
+ })),
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/overview/SelectOverviewPage.tsx b/apps/website/screens/components/select/overview/SelectOverviewPage.tsx
new file mode 100644
index 0000000000..52b5b69258
--- /dev/null
+++ b/apps/website/screens/components/select/overview/SelectOverviewPage.tsx
@@ -0,0 +1,310 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import single from "./examples/single";
+import multiple from "./examples/multiple";
+import filterable from "./examples/filterable";
+import Image from "@/common/Image";
+import anatomy from "./images/select_anatomy.png";
+import Code from "@/common/Code";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The select component provides a structured way for users to{" "}
+ choose from a predefined list of options, streamlining decision-making in forms and interfaces.
+ It supports various configurations, including placeholder text, grouped options, and icons, allowing for better
+ usability and alignment with design needs. Designed for clarity and efficiency, it helps maintain a clean UI
+ while offering an intuitive selection process.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Selection indicator (multiple): a visual marker, typically a checkmark, that shows which
+ items have been selected in the multi-select variant of the component.
+
+
+ Select all item: an option that allows users to select or deselect all available choices in
+ the multi-select variant of the component for efficiency.
+
+
+ List option: an individual selectable item within the dropdown list, representing a choice
+ available to the user.
+
+
+ List option checkbox: a checkbox placed next to each list option in a multi-select
+ dropdown, allowing users to select multiple items.
+
+
+ Icon: a small graphic or symbol that visually represents the list option, aiding quick
+ recognition of choices.
+
+
+ List option label: the text displayed next to an option in the listbox, providing a clear
+ description of the choice.
+
+
+ Label: a descriptive title for the select component, helping users understand its purpose
+ and context.
+
+
+ Helper text: additional guidance placed below the label to clarify how the user should
+ interact with the select component.
+
+
+ Select value(s): displays the currently selected options within the input area, allowing
+ users to see their selections at a glance.
+
+
+ Expand/collapse icon: a visual indicator that signals whether the dropdown list can be
+ expanded or collapsed.
+
+
+ Select container: the outer structure enclosing the select component, ensuring proper
+ spacing and alignment within the UI.
+
+
+ Select listbox: the dropdown box that appears when the select is expanded, containing all
+ available options.
+
+
+ List item selected indicator (single): a checkmark or highlight used to indicate which
+ option is currently selected in a single-selection dropdown.
+
+
+ List item (single): an individual selectable option in a single-selection dropdown,
+ allowing users to pick only one choice at a time.
+
+
+
+ ),
+ },
+ {
+ title: "Using selects",
+ content: (
+
+ The select component allows users to choose from a predefined list of options, making it a valuable input method
+ for collecting user-provided information. It is particularly useful in forms where users need
+ to submit structured data efficiently. Designed to handle more than four options, the select
+ component improves usability by reducing clutter and keeping the interface clean compared to radio buttons or
+ other selection methods. Depending on the use case, it can support both single and multiple selections, enabling
+ flexibility in data input.
+
+ ),
+ subSections: [
+ {
+ title: "Filtering",
+ content: (
+ <>
+
+ Filtering features are present in all variants of the select component, and it's a very useful attribute
+ of the component when dealing with long lists of options.
+
+
+ As the user types, the list dynamically narrows down to display only the matching results
+ , improving efficiency and ease of selection. The value updates when the user either types a string that
+ matches an existing option or manually selects one from the list. If no matches are found, a "No matches
+ found" message is displayed, providing clear feedback.
+
+
+
+ ),
+ },
+ {
+ title: "Required and optional",
+ content: (
+
+ The select component can be either optional or required, depending on the
+ context. When marked as optional, it includes a placeholder-like option that allows users
+ to leave the field empty if no selection is needed. On the other hand, if no optional label is present, the
+ field is considered required, meaning users must choose an option before proceeding. If a
+ required select is left empty, an error message stating "This field cannot be empty" should
+ appear when the component loses focus, ensuring users provide the necessary input before submitting a form.
+
+ ),
+ },
+ {
+ title: "Select vs dropdown",
+ content: (
+ <>
+
+ While both the select and dropdown components present a list of options,
+ they serve distinct purposes within an interface. The select component is primarily used
+ in forms to collect user input, allowing either single or multiple selections from a predefined set of
+ options. It is designed to replace traditional radio buttons or checkboxes when space efficiency is
+ needed, especially when dealing with long lists. Additionally, the select component can include a
+ filtering mechanism to help users find their desired option more easily.
+
+
+ On the other hand, the dropdown component is not meant for form inputs but rather for
+ displaying contextual actions or navigation links. It typically triggers a menu that offers options such
+ as commands, shortcuts, or external links, often enhancing interaction within a UI. Unlike the select,
+ dropdowns do not retain selected values within the component itself but instead execute an action upon
+ selection.
+
+
+ When deciding between the two, consider whether the component needs to collect and retain user input
+ (select) or provide quick access to actions and links (dropdown).
+
+
+ ),
+ },
+ {
+ title: "Select all and grouped selection",
+ content: (
+
+ Select all and grouped selection options provide users with efficient ways
+ to manage large sets of checkable items within a list, dropdown, or multi-select component. These options
+ help reduce interaction costs and minimize repetitive actions, especially when dealing with categorized data
+ or bulk selection scenarios.
+
+ ),
+ subSections: [
+ {
+ title: "Select all",
+ content: (
+ <>
+
+ The select all option (enableSelectAll) allows users to quickly select
+ or deselect all items in a list with a single action.
+
+
+ When the flag is set to true, a checkbox labelled with "Select all" text is placed at the top
+ of the list or above grouped items. It should visually reflect the current state:
+
+
+ Unselected when no items are selected.
+ Selected when all items are selected.
+ Indeterminate when only some items are selected.
+
+
+ ),
+ },
+ {
+ title: "Grouped selection",
+ content: (
+ <>
+
+ Grouped selection enables users to manage selections within categorized sections of a
+ list. Each group has its own header with a group-level checkbox. This allows users to:
+
+
+ Quickly select all items within a specific group.
+ Understand how items are organized.
+
+ Maintain more granular control over selection without losing the efficiency of bulk actions.
+
+
+
+ Just like the global select all, group checkboxes also reflect the selection state (selected,
+ unselected, indeterminate) based on the individual items in that group.
+
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: "Variants",
+ content: (
+
+ Depending on the number of items the user is able to select, our component can allow multiple or single
+ selection.
+
+ ),
+ subSections: [
+ {
+ title: "Single selection",
+ content: (
+ <>
+
+ Ideal for scenarios where a single, definitive choice is required, the single-selection allows users to
+ choose only one option from a predefined list. This variant is commonly used in forms
+ where users need to specify categories, pick a location, select a status, or choose from mutually
+ exclusive options like gender, payment methods, or subscription plans. It simplifies decision-making by
+ preventing multiple selections, ensuring clarity and accuracy in user inputs.
+
+
+
+ ),
+ },
+ {
+ title: "Multiple selection",
+ content: (
+ <>
+
+ The multiple-selection allows users to choose more than one option from a list, making it
+ perfect for scenarios where multiple selections are necessary. This variant is commonly used in filters,
+ permission settings, tag selection, and cases where users need to customize their choices, such as
+ selecting multiple product categories, preferred communication channels, or applicable document types.
+
+
+ To enhance usability, this variant includes a "Select all" feature within the listbox,
+ allowing users to quickly select all options at once. This functionality is especially useful in forms
+ with long lists, where multiple selections are likely to be valid, reducing the time and effort needed to
+ choose items individually.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use select for more than four options: if the number of choices is fewer, consider using
+ radio buttons (for single selection) or checkboxes (for multiple selection) to reduce user interaction effort.
+
+
+ Enable filtering for long lists: if the option list is extensive (around 15 or more items),
+ use the filterable variant to help users quickly find relevant choices.
+
+
+ Label optional fields clearly: when the select field is optional, ensure a placeholder option
+ is available to indicate that the field can be left empty. If it's required, provide an error message when
+ left unselected.
+
+
+ Choose the right selection mode: use the single-selection variant when users need to pick
+ only one option. If multiple selections are needed, enable the multi-selection variant and consider including
+ the "select all" feature for better usability.
+
+
+ Keep option labels clear and concise: avoid overly long or ambiguous option labels. Each
+ choice should be easily scannable and self-explanatory.
+
+
+ Use placeholders wisely: a placeholder should provide guidance but not be mistaken for a
+ default selection. Be clear and concise when deciding which placeholder to set into the select.
+
+
+ Prevent excessive nesting: when grouping options into categories, keep the hierarchy simple
+ and easy to navigate to avoid overwhelming the user.
+
+
+ ),
+ },
+];
+
+const SelectOverviewPage = () => (
+
+
+
+
+);
+
+export default SelectOverviewPage;
diff --git a/apps/website/screens/components/select/overview/examples/filterable.tsx b/apps/website/screens/components/select/overview/examples/filterable.tsx
new file mode 100644
index 0000000000..f49f8af8a0
--- /dev/null
+++ b/apps/website/screens/components/select/overview/examples/filterable.tsx
@@ -0,0 +1,61 @@
+import { DxcSelect, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ { label: "Option 01", value: "1" },
+ { label: "Option 02", value: "2" },
+ { label: "Option 03", value: "3" },
+ { label: "Option 04", value: "4" },
+ { label: "Option 05", value: "5" },
+ { label: "Option 06", value: "6" },
+ { label: "Option 07", value: "7" },
+ { label: "Option 08", value: "8" },
+ { label: "Option 09", value: "9" },
+ { label: "Option 10", value: "10" },
+ { label: "Option 11", value: "11" },
+ { label: "Option 12", value: "12" },
+ { label: "Option 13", value: "13" },
+ { label: "Option 14", value: "14" },
+ { label: "Option 15", value: "15" },
+ { label: "Option 16", value: "16" },
+ { label: "Option 17", value: "17" },
+ { label: "Option 18", value: "18" },
+ { label: "Option 19", value: "19" },
+ { label: "Option 20", value: "20" },
+ { label: "Option 21", value: "21" },
+ { label: "Option 22", value: "22" },
+ { label: "Option 23", value: "23" },
+ { label: "Option 24", value: "24" },
+ { label: "Option 25", value: "25" },
+ ];
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/overview/examples/multiple.tsx b/apps/website/screens/components/select/overview/examples/multiple.tsx
new file mode 100644
index 0000000000..e18535c397
--- /dev/null
+++ b/apps/website/screens/components/select/overview/examples/multiple.tsx
@@ -0,0 +1,32 @@
+import { DxcSelect, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ { label: "Option 01", value: "1" },
+ { label: "Option 02", value: "2" },
+ { label: "Option 03", value: "3" },
+ { label: "Option 04", value: "4" },
+ ];
+
+ return (
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/overview/examples/requiredOptional.tsx b/apps/website/screens/components/select/overview/examples/requiredOptional.tsx
new file mode 100644
index 0000000000..542977bf9c
--- /dev/null
+++ b/apps/website/screens/components/select/overview/examples/requiredOptional.tsx
@@ -0,0 +1,39 @@
+import { DxcSelect, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ { label: "Option 01", value: "1" },
+ { label: "Option 02", value: "2" },
+ { label: "Option 03", value: "3" },
+ { label: "Option 04", value: "4" },
+ ];
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/overview/examples/single.tsx b/apps/website/screens/components/select/overview/examples/single.tsx
new file mode 100644
index 0000000000..3246f4df0e
--- /dev/null
+++ b/apps/website/screens/components/select/overview/examples/single.tsx
@@ -0,0 +1,31 @@
+import { DxcSelect, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ { label: "Option 01", value: "1" },
+ { label: "Option 02", value: "2" },
+ { label: "Option 03", value: "3" },
+ { label: "Option 04", value: "4" },
+ ];
+
+ return (
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/select/overview/images/select_anatomy.png b/apps/website/screens/components/select/overview/images/select_anatomy.png
new file mode 100644
index 0000000000..74f2a933d7
Binary files /dev/null and b/apps/website/screens/components/select/overview/images/select_anatomy.png differ
diff --git a/apps/website/screens/components/select/specs/SelectSpecsPage.tsx b/apps/website/screens/components/select/specs/SelectSpecsPage.tsx
deleted file mode 100644
index f4097973b6..0000000000
--- a/apps/website/screens/components/select/specs/SelectSpecsPage.tsx
+++ /dev/null
@@ -1,1158 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcTable, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
-import Link from "next/link";
-import Image from "@/common/Image";
-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 selectSingleSpecsStates from "./images/select_input_states_single.png";
-import selectMultipleSpecsStates from "./images/select_input_states_multiple.png";
-import selectSingleOptionState from "./images/option_item_states_single.png";
-import selectMultipleOptionState from "./images/option_item_states_multiple.png";
-import selectAnatomy from "./images/select_anatomy.png";
-import selectSpecs from "./images/select_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- subSections: [
- {
- title: "Select input",
- content: (
- <>
-
- States are defined for select component based on the interactions that the user can reproduce. The states
- are: enabled, hover, focus, active,{" "}
- error and disabled:
-
-
-
-
-
- ),
- },
- {
- title: "Multiple selection",
- content: (
- <>
- Allows the user to select more than one option from the list.
-
-
-
-
- ),
- },
- {
- title: "List options",
- content: (
-
- To indicate which items are selected and which not, the select-multiple variant integrates a checkbox
- pairing with each option from the dropdown.
-
- ),
- subSections: [
- {
- title: "Single",
- content: (
-
-
-
- ),
- },
- {
- title: "Multiple",
- content: (
-
-
-
- ),
- },
- ],
- },
- ],
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
- Helper text
- Selection indicator (multiple)
- List dialog
- Action - Clear
- Collapse indicator
- List option
- Divider
- List option label
- List option icon
- List option checkbox (multiple)
- Select value
- List item selected indicator
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
-
- These values can be applied independently to each side of the component: top,{" "}
- bottom, left and right.
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG 2.2",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 3.2.2: On Input
-
-
-
- ),
- },
- {
- title: "WAI-ARIA 1.2",
- content: (
-
-
- WAI-ARIA practices 1.2 -{" "}
-
- 3.8 Combobox
-
-
-
- WAI-ARIA practices 1.2 -{" "}
-
- 3.14 Listbox
-
-
-
- WAI-ARIA examples 1.2 -{" "}
-
- Editable Combobox without Autocomplete Example
-
-
-
- ),
- },
- ],
- },
-];
-
-const SelectSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SelectSpecsPage;
diff --git a/apps/website/screens/components/select/specs/images/option_item_states_multiple.png b/apps/website/screens/components/select/specs/images/option_item_states_multiple.png
deleted file mode 100644
index ae0253f65b..0000000000
Binary files a/apps/website/screens/components/select/specs/images/option_item_states_multiple.png and /dev/null differ
diff --git a/apps/website/screens/components/select/specs/images/option_item_states_single.png b/apps/website/screens/components/select/specs/images/option_item_states_single.png
deleted file mode 100644
index 2c0fa9592f..0000000000
Binary files a/apps/website/screens/components/select/specs/images/option_item_states_single.png and /dev/null differ
diff --git a/apps/website/screens/components/select/specs/images/select_anatomy.png b/apps/website/screens/components/select/specs/images/select_anatomy.png
deleted file mode 100644
index db5c78bd7b..0000000000
Binary files a/apps/website/screens/components/select/specs/images/select_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/select/specs/images/select_input_states_multiple.png b/apps/website/screens/components/select/specs/images/select_input_states_multiple.png
deleted file mode 100644
index 18168558bf..0000000000
Binary files a/apps/website/screens/components/select/specs/images/select_input_states_multiple.png and /dev/null differ
diff --git a/apps/website/screens/components/select/specs/images/select_input_states_single.png b/apps/website/screens/components/select/specs/images/select_input_states_single.png
deleted file mode 100644
index 642545add6..0000000000
Binary files a/apps/website/screens/components/select/specs/images/select_input_states_single.png and /dev/null differ
diff --git a/apps/website/screens/components/select/specs/images/select_specs.png b/apps/website/screens/components/select/specs/images/select_specs.png
deleted file mode 100644
index ae1f21aff5..0000000000
Binary files a/apps/website/screens/components/select/specs/images/select_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/select/usage/SelectUsagePage.tsx b/apps/website/screens/components/select/usage/SelectUsagePage.tsx
deleted file mode 100644
index 164adfed99..0000000000
--- a/apps/website/screens/components/select/usage/SelectUsagePage.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import variants from "./examples/variants";
-import requiredOptional from "./examples/requiredOptional";
-import filterable from "./examples/filterable";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
- Considerations about the select usage:
-
-
- A dialog element should allow the user to select one option from a list.
-
-
- If the list of options is short (4 or less), use checkboxes instead of the select component.
-
-
- The select component should always display a label different from any name in the option list.
-
- Use a pre-selected good default where possible.
- Use progressive disclosure between linked select components.
-
- If more than one option is applicable, use the multi-select variant.
-
-
-
- ),
- },
- {
- title: "Variants",
- content: (
- <>
-
-
-
-
-
Variant
- Description
-
-
-
-
-
- Single
-
-
Allows the user to select one option from a list
-
-
-
- Multiple
-
-
Allows the user to select multiple options from a list
-
-
-
-
- ),
- },
- {
- title: "Filter",
- content: (
- <>
-
-
- Both select variants can be filterable.
-
- Use the filter when the number of items in the optionList is extremely long (± 15 elements).
-
-
- This list will be reduced to show only the matches as the user types.
-
-
- The value will change when the user types a string that matches an option from the list or pick one
- manually.
-
-
- When the search does not match any result, a "No matches found" message will be displayed.
-
-
-
- ),
- },
- {
- title: "Required and optional",
- content: (
- <>
-
-
-
- When labeled as optional, the select will display an option matching the placeholder to allow leaving it
- empty.
-
- When no optional label appears, the select is required.
-
- If the select was left empty, the required should display the error "This field can not be empty" when the
- select loses the focus.
-
-
-
- ),
- },
-];
-
-const SelectUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SelectUsagePage;
diff --git a/apps/website/screens/components/select/usage/examples/filterable.ts b/apps/website/screens/components/select/usage/examples/filterable.ts
deleted file mode 100644
index 087d57891b..0000000000
--- a/apps/website/screens/components/select/usage/examples/filterable.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { DxcSelect, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const options = [
- { label: "Option 01", value: "1" },
- { label: "Option 02", value: "2" },
- { label: "Option 03", value: "3" },
- { label: "Option 04", value: "4" },
- { label: "Option 05", value: "5" },
- { label: "Option 06", value: "6" },
- { label: "Option 07", value: "7" },
- { label: "Option 08", value: "8" },
- { label: "Option 09", value: "9" },
- { label: "Option 10", value: "10" },
- { label: "Option 11", value: "11" },
- { label: "Option 12", value: "12" },
- { label: "Option 13", value: "13" },
- { label: "Option 14", value: "14" },
- { label: "Option 15", value: "15" },
- { label: "Option 16", value: "16" },
- { label: "Option 17", value: "17" },
- { label: "Option 18", value: "18" },
- { label: "Option 19", value: "19" },
- { label: "Option 20", value: "20" },
- { label: "Option 21", value: "21" },
- { label: "Option 22", value: "22" },
- { label: "Option 23", value: "23" },
- { label: "Option 24", value: "24" },
- { label: "Option 25", value: "25" },
- ];
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSelect,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/select/usage/examples/requiredOptional.ts b/apps/website/screens/components/select/usage/examples/requiredOptional.ts
deleted file mode 100644
index 803e2a9215..0000000000
--- a/apps/website/screens/components/select/usage/examples/requiredOptional.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { DxcSelect, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const options = [
- { label: "Option 01", value: "1" },
- { label: "Option 02", value: "2" },
- { label: "Option 03", value: "3" },
- { label: "Option 04", value: "4" },
- ];
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSelect,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/select/usage/examples/variants.ts b/apps/website/screens/components/select/usage/examples/variants.ts
deleted file mode 100644
index 02e77e65e6..0000000000
--- a/apps/website/screens/components/select/usage/examples/variants.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DxcSelect, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const options = [
- { label: "Option 01", value: "1" },
- { label: "Option 02", value: "2" },
- { label: "Option 03", value: "3" },
- { label: "Option 04", value: "4" },
- ];
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSelect,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/sidenav/SidenavPageLayout.tsx b/apps/website/screens/components/sidenav/SidenavPageLayout.tsx
index 0629ad362f..fb56162709 100644
--- a/apps/website/screens/components/sidenav/SidenavPageLayout.tsx
+++ b/apps/website/screens/components/sidenav/SidenavPageLayout.tsx
@@ -7,20 +7,18 @@ import { ReactNode } from "react";
const SidenavPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
+ // { label: "Overview", path: "/components/sidenav" },
+ // { label: "Code", path: "/components/sidenav/code" },
{ label: "Code", path: "/components/sidenav" },
- { label: "Usage", path: "/components/sidenav/usage" },
- { label: "Specifications", path: "/components/sidenav/specifications" },
];
-
+ // TODO: UPDATE DESCRIPTION WHEN OVERVIEW IS ADDED
return (
-
+
-
+
- The sidenav component is part of the layout of the application and it makes easier to divide the main screen
- into two different areas. The main area will have all the content and the sidenav as a secondary element as
- an index, including links to different resources on the web page.
+ The sidenav component provides a vertical navigation structure placed on the left side of the interface.
The sidenav is part of the application layout, so it can only be used inside of it. Please check the{" "}
@@ -29,7 +27,7 @@ const SidenavPageHeading = ({ children }: { children: ReactNode }) => {
{" "}
documentation.
-
+
{children}
diff --git a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
index 3974bad91a..1cb2135c1f 100644
--- a/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
+++ b/apps/website/screens/components/sidenav/code/SidenavCodePage.tsx
@@ -1,308 +1,153 @@
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import StatusBadge from "@/common/StatusBadge";
-import TableCode from "@/common/TableCode";
-import { DxcLink, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import Link from "next/link";
+import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
+import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+
+const brandingTypeString = `{
+ logo?: Logo;
+ appTitle?: string;
+}`;
+
+const logoTypeString = `{
+ alt: string;
+ href?: string;
+ onClick?: (event: MouseEvent) => void;
+ src: string;
+}`;
+
+const commonItemTypeString = `{
+ badge?: ReactElement;
+ icon?: string | SVG;
+ label: string;
+}`;
+
+const itemTypeString = `{
+ ${commonItemTypeString}
+ onSelect?: () => void;
+ selected?: boolean;
+}`;
+
+const groupItemTypeString = `{
+ ${commonItemTypeString}
+ items: (Item | GroupItem)[];
+}`;
+
+const sectionTypeString = `{
+ items: (Item | GroupItem)[];
+ title?: string };
+}`;
const sections = [
{
title: "Props",
content: (
-
-
Name
-
Type
-
Description
-
Default
-
-
-
title
-
- React.ReactNode
-
-
The area assigned to render the title. It is highly recommended to use the sidenav title.
-
-
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
The area inside the sidenav.
-
-
-
+
+
+
Name
+
Type
+
Description
+
Default
+
+
+
+
+
bottomContent
+
+ React.ReactNode
+
+
The content rendered in the bottom part of the sidenav, under the navigation menu.
+
-
+
+
+
branding
+
+ {"Logo | ReactNode"}
+
+ being Message an object with the following properties:
+
+ {brandingTypeString}
+
+ and Logo an object with the following properties:
+
+ {logoTypeString}
+
+
Object with the properties of the branding placed at the top of the sidenav.
+
-
+
+
+
defaultExpanded
+
+ boolean
+
+
Initial state of the expansion of the sidenav, only when it is uncontrolled.
+
-
+
+
+
displayGroupLines
+
+ boolean
+
+
If true the nav menu will have lines marking the groups.
+
-
+
+
+
expanded
+
+ boolean
+
+
+ If true, the sidenav is expanded. If undefined the component will be uncontrolled and the value will be
+ managed internally by the component.
+
+
-
+
+
+
navItems
+
+ {"(Item | GroupItem)[] | Section[]"}
+
+ being Item an object with the following properties:
+
+ {itemTypeString}
+
+ , GroupItem an object with the following properties:
+
+ {groupItemTypeString}
+
+ and Section an object with the following properties:
+
+ {sectionTypeString}
+
+
+ Array of items to be displayed in the navigation menu. Each item can be a single/simple item, a group item
+ or a section.
+
+
-
+
+
+
onExpandedChange
+
+ {"(value: boolean) => void"}
+
+
Function called when the expansion state of the sidenav changes.
+
-
+
+
+
topContent
+
+ React.ReactNode
+
+
The content rendered in the upper part of the sidenav, under the branding.
+
-
+
+
),
},
- {
- title: "DxcSidenav.Title",
- content: (
-
- This compound component should only be used inside the title prop.
-
- ),
- subSections: [
- {
- title: "Props",
- content: (
-
-
-
Name
-
Type
-
Description
-
Default
-
-
-
- {" "}
-
-
- children
-
-
-
- React.ReactNode
-
-
The area inside the sidenav title. This area can be used to render custom content.
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "DxcSidenav.Section",
- content: (
-
- Sections must be defined as direct children of the DxcSidenav and serve to group links, groups
- and/or custom content into different and distinguishable parts of the component. Consecutive sections are
- separated by a divider.
-
- ),
- subSections: [
- {
- title: "Props",
- content: (
-
-
-
Name
-
Type
-
Description
-
Default
-
-
-
- {" "}
-
-
- children
-
-
-
- React.ReactNode
-
-
The area inside the sidenav section. Child items will be stacked inside a flex container.
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "DxcSidenav.Group",
- content: (
-
- Even though any children are accepted in a group, we recommend using only the DxcSidenav.Link or
- any React-based router, complemented with this one, as links to the different pages.
-
- ),
- subSections: [
- {
- title: "Props",
- content: (
-
-
-
Name
-
Type
-
Description
-
Default
-
-
-
title
-
- string
-
-
The title of the sidenav group.
-
-
-
-
-
collapsable
-
- boolean
-
-
- If true, the sidenav group will be a button that will allow you to collapse the links contained within
- it. In addition, if it's collapsed and contains the currently selected link, the group title will also
- be marked as selected.
-
- A{" "}
-
- Material Symbol
- {" "}
- or a SVG element to be displayed next to the title of the group as an icon.
-
-
-
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
The area inside the sidenav group. This area can be used to render sidenav links.
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "DxcSidenav.Link",
- content: (
-
- As with the DxcLink component, we decided to make our Sidenav link component a styled HTML anchor
- that can be used with any React-based router. You can check the{" "}
-
- Link
- {" "}
- for more information regarding this.
-
- ),
- subSections: [
- {
- title: "Props",
- content: (
-
-
-
Name
-
Type
-
Description
-
Default
-
-
-
href
-
- string
-
-
Page to be opened when the user clicks on the link.
- A{" "}
-
- Material Symbol
- {" "}
- or a SVG element to be displayed left to the link as an icon.
-
-
-
-
-
-
selected
-
- boolean
-
-
- If true, the link will be marked as selected. Moreover, in that same case, if it is contained within a
- collapsed group, and consequently, the currently selected link is not visible, the group title will
- appear as selected too.
-
-
- false
-
-
-
-
onClick
-
- {"(event: React.MouseEvent ) => void"}
-
-
- This function will be called when the user clicks the link and the event will be passed to this
- function.
-
-
-
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
The area inside the sidenav link.
-
-
-
-
-
tabIndex
-
- number
-
-
- Value of the tabindex attribute.
-
-
- 0
-
-
-
- ),
- },
- ],
- },
{
title: "Examples",
+ // TODO: Update the sandbox link
subSections: [
{
title: "Application layout with sidenav",
@@ -319,22 +164,18 @@ const sections = [
title="Application layout with sidenav"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
- >
+ />
),
},
],
},
];
-const SidenavCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const SidenavCodePage = () => (
+
+
+
+
+);
export default SidenavCodePage;
diff --git a/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx b/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx
new file mode 100644
index 0000000000..7e28f0a8fb
--- /dev/null
+++ b/apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx
@@ -0,0 +1,195 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import anatomy from "./images/sidenav_anatomy.png";
+import responsive from "./images/sidenav_responsive.png";
+
+// TODO: UPDATE WHEN DOC IS READY
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The sidenav component is designed to support efficient and intuitive navigation across the main sections of an
+ application. Its vertical layout provides persistent access to navigation links, improving discoverability and
+ reducing the steps needed to move between pages. It supports nested groups, collapsible sections, and the
+ ability to highlight the active route, making it especially useful for applications with deep or complex
+ navigation structures.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Title: the main label displayed at the top of the sidenav, typically used to indicate the
+ name of the product or section.
+
+
+ Group title: a label that groups related links together, providing visual structure and
+ context within the navigation.
+
+
+ Page or section link: the navigational element that redirects users to a specific view or
+ section of the application.
+
+
+ Single group: a container that holds a set of related links that are always visible and not
+ collapsible.
+
+
+ Collapsible group: a group of links that can be expanded or collapsed, helping reduce
+ visual noise and support progressive disclosure.
+
+
+ Divider: a horizontal line used to visually separate groups or sections within the sidenav
+ for better readability.
+
+
+ Single link: an individual navigational item not grouped with others, typically used for
+ stand-alone destinations.
+
+
+ Icon: an optional visual element placed before the link label, used to reinforce meaning or
+ improve scannability.
+
+
+
+ ),
+ },
+
+ {
+ title: "Key interactions and features",
+ subSections: [
+ {
+ title: "Hierarchical navigation",
+ content: (
+
+ The sidenav supports hierarchical structures,{" "}
+ organizing navigation links into nested groups. Though it only supports one level of
+ nesting, this helps users quickly understand the content structure and navigate between related pages or
+ sections more efficiently.
+
+ ),
+ },
+ {
+ title: "Collapsible groups",
+ content: (
+
+ Groups can be expanded or collapsed, allowing users to control the visibility of nested
+ navigation links. This feature is particularly useful for reducing visual noise and keeping the interface
+ tidy, especially when dealing with large or complex structures.
+
+ ),
+ },
+ {
+ title: "Active link highlighting",
+ content: (
+
+ The currently active link is visually highlighted in the sidenav. This gives users clear feedback about
+ where they are within the application, improving orientation and navigation consistency.
+
+ ),
+ },
+ {
+ title: "Persistent visibility",
+ content: (
+
+ The sidenav remains visible and accessible while the user navigates through the product.
+ This persistent placement makes it easy to switch sections quickly, supporting efficient multitasking and
+ exploration.
+
+ ),
+ },
+ {
+ title: "Icon support",
+ content: (
+
+ Each navigation link can include an icon that visually represents the content or
+ functionality it leads to. Icons enhance scannability and make the navigation more intuitive, especially
+ when combined with meaningful labels.
+
+ ),
+ },
+ {
+ title: "Dividers for visual grouping",
+ content: (
+
+ The sidenav allows the inclusion of visual dividers between groups or links, making it easier to identify
+ content categories and improving the overall readability of the menu.
+
+ ),
+ },
+ {
+ title: "Responsive behavior",
+ content: (
+ <>
+
+ In smaller screens, the sidenav is collapsed into a single row at the top of the page with an expandable
+ icon to show the full list of sidenav content when triggered.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Use the sidenav component to improve discoverability: make navigation links easy to find
+ and access, helping users understand the structure of the application.
+
+
+ Keep in mind the type of devices you're developing for: ensure the sidenav behaves in a way
+ that doesn't block or reduce the space available for the main content, especially on smaller screens.
+
+
+ Follow a clear structure and hierarchy: organize the content using group titles, dividers,
+ and indentation to visually differentiate between sections, titles, and individual links.
+
+
+ Use clear and concise labels: navigation items should use simple, intuitive wording that
+ clearly describes their destination or action.
+
+
+ Organize links into logical groups: related navigation items should be grouped together
+ under meaningful group titles for easier scanning.
+
+
+ Use icons to reinforce meaning: include icons where relevant to improve visual recognition
+ and support faster navigation.
+
+
+ Use collapsible groups for long menus: when there are many links, collapsible groups help
+ keep the sidenav organized and reduce visual clutter.
+
+
+ Use dividers to separate sections: visual separators make different content areas more
+ distinct and improve readability.
+
+
+
+ ),
+ },
+];
+
+const SidenavOverviewPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default SidenavOverviewPage;
diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png b/apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png
new file mode 100644
index 0000000000..c091445a89
Binary files /dev/null and b/apps/website/screens/components/sidenav/overview/images/sidenav_anatomy.png differ
diff --git a/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png b/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png
new file mode 100644
index 0000000000..6e1c121e35
Binary files /dev/null and b/apps/website/screens/components/sidenav/overview/images/sidenav_responsive.png differ
diff --git a/apps/website/screens/components/sidenav/specs/SidenavSpecsPage.tsx b/apps/website/screens/components/sidenav/specs/SidenavSpecsPage.tsx
deleted file mode 100644
index 76c5eb72c5..0000000000
--- a/apps/website/screens/components/sidenav/specs/SidenavSpecsPage.tsx
+++ /dev/null
@@ -1,460 +0,0 @@
-import { DxcBulletedList, DxcTable, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-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 sidenavAnatomy from "./images/sidenav_anatomy.png";
-import sidenavSpecs from "./images/sidenav_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
-
- Title (Optional)
-
-
- Group Title (Optional)
-
- Page or Section Link
- Divider
- Current Page or Section
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const SidenavSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SidenavSpecsPage;
diff --git a/apps/website/screens/components/sidenav/specs/images/sidenav_anatomy.png b/apps/website/screens/components/sidenav/specs/images/sidenav_anatomy.png
deleted file mode 100644
index 5378a3a036..0000000000
Binary files a/apps/website/screens/components/sidenav/specs/images/sidenav_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/sidenav/specs/images/sidenav_specs.png b/apps/website/screens/components/sidenav/specs/images/sidenav_specs.png
deleted file mode 100644
index 280c480163..0000000000
Binary files a/apps/website/screens/components/sidenav/specs/images/sidenav_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/sidenav/usage/SidenavUsagePage.tsx b/apps/website/screens/components/sidenav/usage/SidenavUsagePage.tsx
deleted file mode 100644
index 2dcd877dfc..0000000000
--- a/apps/website/screens/components/sidenav/usage/SidenavUsagePage.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import sidenavResponsive from "./images/sidenav_responsive.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
-
- Use the sidenav component to improve the discoverability of the application, making the navigation links
- accessible to the users.
-
-
- Keep in mind the type of the devices that you are developing for, and handle the behavior in a way that
- doesn't block or reduce the available space of the main area in the application.
-
-
- Try to follow and order for the Sidenav content and make use of hierarchy to differentiate between a title
- and a link.
-
-
-
- ),
- },
- {
- title: "Responsive version for mobile and tablet",
- content: (
- <>
-
- The responsive version of the component for mobile and tablet works a little bit different compared to the
- version for desktop. As the size of the screen in those devices is reduced and once the breakpoint has been
- reached (720px), the sidenav is displayed in mobile responsive view.
-
-
-
-
-
- ),
- },
-];
-
-const SidenavUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SidenavUsagePage;
diff --git a/apps/website/screens/components/sidenav/usage/images/sidenav_responsive.png b/apps/website/screens/components/sidenav/usage/images/sidenav_responsive.png
deleted file mode 100644
index 9a0545c702..0000000000
Binary files a/apps/website/screens/components/sidenav/usage/images/sidenav_responsive.png and /dev/null differ
diff --git a/apps/website/screens/components/slider/SliderPageLayout.tsx b/apps/website/screens/components/slider/SliderPageLayout.tsx
index fe27cda196..f3ec6afee0 100644
--- a/apps/website/screens/components/slider/SliderPageLayout.tsx
+++ b/apps/website/screens/components/slider/SliderPageLayout.tsx
@@ -6,22 +6,20 @@ import { ReactNode } from "react";
const SliderPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/slider" },
- { label: "Usage", path: "/components/slider/usage" },
- { label: "Specifications", path: "/components/slider/specifications" },
+ { label: "Overview", path: "/components/slider" },
+ { label: "Code", path: "/components/slider/code" },
];
return (
-
+
-
+
- Slider control allows users to select a specific value or a range of values from a set. Usually, slider
- presents a relatively large dataset and the way that the user interacts with it is helpful to explore the
- multiple options swiftly.
+ Slider control enables users to select a specific value from a predefined set by dragging a thumb along a
+ track.
-
+
{children}
diff --git a/apps/website/screens/components/slider/code/SliderCodePage.tsx b/apps/website/screens/components/slider/code/SliderCodePage.tsx
index c063cb414a..1435e6c2f5 100644
--- a/apps/website/screens/components/slider/code/SliderCodePage.tsx
+++ b/apps/website/screens/components/slider/code/SliderCodePage.tsx
@@ -1,13 +1,12 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
-import Code from "@/common/Code";
+import complex from "./examples/complex";
import controlled from "./examples/controlled";
-import uncontrolled from "./examples/uncontrolled";
import formatLabel from "./examples/formatLabel";
-import TableCode from "@/common/TableCode";
+import uncontrolled from "./examples/uncontrolled";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -24,39 +23,36 @@ const sections = [
-
defaultValue
+
ariaLabel
- number
+ string
+
+
+ Specifies a string to be used as the name for the slider element when no label is provided.
+
+
+ 'Slider'
-
Initial value of the slider, only when it is uncontrolled.
-
-
-
value
+
defaultValue
number
+
Initial value of the slider, only when it is uncontrolled.
- The selected value. If undefined, the component will be uncontrolled and the value will be managed
- internally by the component.
+ 0
-
-
-
label
+
disabled
- string
+ boolean
-
Text to be placed above the slider.
-
-
-
-
-
name
+
If true, the component will be disabled.
- string
+ false
-
Name attribute of the input element.
-
-
helperText
@@ -67,76 +63,71 @@ const sections = [
-
-
minValue
-
- number
-
-
The minimum value available for selection.
+
label
- 0
+ string
+
Text to be placed above the slider.
+
-
-
maxValue
+
labelFormatCallback
- number
+ {"(value: number) => string"}
-
The maximum value available for selection.
- 100
+ This function will be used to format the labels displayed next to the slider. The value will be passed as
+ parameter and the function must return the formatted value.
+
-
-
step
-
- number
-
-
The step interval between values available for selection.
Whether the min/max value labels should be displayed next to the slider.
- false
+ 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.
+
-
-
showInput
+
marks
boolean
-
- Whether the input element for displaying/controlling the slider value should be displayed next to the
- slider.
-
+
Whether the marks between each step should be shown or not.
false
-
disabled
+
maxValue
- boolean
+ number
-
If true, the component will be disabled.
+
The maximum value available for selection.
- false
+ 100
-
marks
+
minValue
- boolean
+ number
-
Whether the marks between each step should be shown or not.
+
The minimum value available for selection.
- false
+ 0
@@ -162,26 +153,35 @@ const sections = [
-
-
labelFormatCallback
+
ref
- {"(value: number) => string"}
+ {"React.Ref"}
+
Reference to the component.
+
-
+
+
+
showInput
- This function will be used to format the labels displayed next to the slider. The value will be passed as
- parameter and the function must return the formatted value.
+ boolean
+
+
+ Whether the input element for displaying/controlling the slider value should be displayed next to the
+ slider.
+
Whether the min/max value labels should be displayed next to the slider.
- 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.
+ false
-
-
size
@@ -194,34 +194,25 @@ const sections = [
-
tabIndex
+
step
number
+
The step interval between values available for selection.
- Value of the tabindex attribute.
-
-
- 0
-
-
-
-
ref
-
- {"React.Ref"}
+ 1
-
Reference to the component.
-
-
-
ariaLabel
+
value
- string
+ number
- Specifies a string to be used as the name for the slider element when no label is provided.
+ The selected value. If undefined, the component will be uncontrolled and the value will be managed
+ internally by the component.
-
'Slider'
+
-
@@ -242,19 +233,19 @@ const sections = [
title: "Format label",
content: ,
},
+ {
+ title: "Decimals and negatives",
+ content: ,
+ },
],
},
];
-const SliderCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const SliderCodePage = () => (
+
+
+
+
+);
export default SliderCodePage;
diff --git a/apps/website/screens/components/slider/code/examples/complex.tsx b/apps/website/screens/components/slider/code/examples/complex.tsx
new file mode 100644
index 0000000000..c96e8dd833
--- /dev/null
+++ b/apps/website/screens/components/slider/code/examples/complex.tsx
@@ -0,0 +1,36 @@
+import { DxcSlider, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, changeValue] = useState(0);
+ const onChange = (newValue) => {
+ changeValue(newValue);
+ };
+
+ return (
+
+
+ Current value: {value}
+
+ );
+}`;
+
+const scope = {
+ DxcSlider,
+ DxcInset,
+ DxcParagraph,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/slider/code/examples/controlled.ts b/apps/website/screens/components/slider/code/examples/controlled.ts
deleted file mode 100644
index dbeead8937..0000000000
--- a/apps/website/screens/components/slider/code/examples/controlled.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DxcSlider, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, changeValue] = useState(25);
- const onChange = (newValue) => {
- changeValue(newValue);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcSlider,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/slider/code/examples/controlled.tsx b/apps/website/screens/components/slider/code/examples/controlled.tsx
new file mode 100644
index 0000000000..7cf55d20a5
--- /dev/null
+++ b/apps/website/screens/components/slider/code/examples/controlled.tsx
@@ -0,0 +1,27 @@
+import { DxcSlider, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, changeValue] = useState(25);
+ const onChange = (newValue) => {
+ changeValue(newValue);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSlider,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/slider/code/examples/formatLabel.ts b/apps/website/screens/components/slider/code/examples/formatLabel.ts
deleted file mode 100644
index d42a61fd35..0000000000
--- a/apps/website/screens/components/slider/code/examples/formatLabel.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcSlider, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, changeValue] = useState(25);
- const onChange = (newValue) => {
- changeValue(newValue);
- };
- const labelFormat = (value) => {
- return \`\${value}°C\`;
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcSlider,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/slider/code/examples/formatLabel.tsx b/apps/website/screens/components/slider/code/examples/formatLabel.tsx
new file mode 100644
index 0000000000..2af125ee47
--- /dev/null
+++ b/apps/website/screens/components/slider/code/examples/formatLabel.tsx
@@ -0,0 +1,34 @@
+import { DxcSlider, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, changeValue] = useState(25);
+ const onChange = (newValue) => {
+ changeValue(newValue);
+ };
+ const labelFormat = (value) => {
+ return \`\${value}°C\`;
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSlider,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/slider/code/examples/uncontrolled.ts b/apps/website/screens/components/slider/code/examples/uncontrolled.ts
deleted file mode 100644
index 7964c2b152..0000000000
--- a/apps/website/screens/components/slider/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcSlider, DxcInset, DxcFlex, DxcButton } from "@dxc-technology/halstack-react";
-import { useRef } from "react";
-
-const code = `() => {
- const sliderRef = useRef();
-
- const handleSubmit = () => {
- const slider = sliderRef.current.getElementsByTagName("input")[0];
- console.log(slider.value);
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSlider,
- DxcInset,
- useRef,
- DxcFlex,
- DxcButton,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/slider/code/examples/uncontrolled.tsx b/apps/website/screens/components/slider/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..96ddca7e3d
--- /dev/null
+++ b/apps/website/screens/components/slider/code/examples/uncontrolled.tsx
@@ -0,0 +1,34 @@
+import { DxcSlider, DxcInset, DxcFlex, DxcButton } from "@dxc-technology/halstack-react";
+import { useRef } from "react";
+
+const code = `() => {
+ const sliderRef = useRef();
+
+ const handleSubmit = () => {
+ const slider = sliderRef.current.getElementsByTagName("input")[0];
+ console.log(slider.value);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSlider,
+ DxcInset,
+ useRef,
+ DxcFlex,
+ DxcButton,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx b/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx
new file mode 100644
index 0000000000..5f9fdd27a9
--- /dev/null
+++ b/apps/website/screens/components/slider/overview/SliderOverviewPage.tsx
@@ -0,0 +1,229 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph, DxcInset } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import continuous from "./examples/continuous";
+import discrete from "./examples/discrete";
+import input from "./examples/input";
+import Image from "@/common/Image";
+import anatomy from "./images/slider_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The slider component enhance user experience by providing a quick and intuitive way to adjust
+ settings. It is particularly useful for adjusting parameters within a continuous or discrete scale, making it
+ easier to explore multiple options efficiently
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label: describes the purpose of the slider (e.g., "Select coverage amount").
+
+
+ Helper text(Optional): provides additional guidance or context for the user.
+
+
+ Minimum value: the lowest selectable value (e.g., 0).
+
+
+ Track (bar): the line along which the thumb moves, visually representing the range.
+
+
+ Maximum value: the highest selectable value (e.g., 100).
+
+
+ Input field(Optional): displays the selected value, allowing manual input.
+
+
+ Tick marks(Optional): small indicators on the track that represent key
+ increments.
+
+
+ Thumb: the draggable element that allows users to adjust the value.
+
+
+ Selected value indicator: highlights the current value along the track.
+
+
+
+ ),
+ },
+ {
+ title: "Key interactions and features",
+ content: (
+ <>
+
+ Sliders provide an intuitive way for users to adjust values dynamically by interacting with a
+ draggable thumb. Depending on the implementation, sliders can offer various interaction methods and features
+ to enhance usability.
+
+
+
+ Dragging the thumb
+
+
+
+ Users can click and drag the thumb along the track to adjust the value.
+
+
+ In discrete sliders, the thumb snaps to predefined increments.
+
+
+ In continuous sliders, the thumb moves smoothly without fixed steps.
+
+
+
+
+
+ Clicking the track
+
+
+
+ Users can click anywhere on the track to move the thumb directly to that position.
+
+
+ In some implementations, clicking moves the thumb instantly, while in others, it may{" "}
+ animate toward the new position.
+
+
+
+
+
+ Keyboard support
+
+
+
+ Users can adjust the slider using the arrow keys for precise control:
+
+
+
+ Left / Down arrow: decrease value.
+
+
+ Right / Up arrow: increase value.
+
+
+
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+
+ Sliders come in two variants: discrete and continuous. Choosing the right
+ variant depends on whether precise steps or smooth adjustments are needed.
+
+
+ ),
+ subSections: [
+ {
+ title: "Discrete slider",
+ content: (
+ <>
+
+ Allows users to select only predefined values along the track.
+
+
+ Each step is marked, and the thumb "snaps" to these values.
+
+ Best for limited, meaningful choices where precision matters.
+
+
+
+
+ ),
+ },
+ {
+ title: "Continuous slider",
+ content: (
+ <>
+
+ Lets users select any value within the range, without fixed steps.
+
+
+ Offers smooth, fine-grained control over the selection.
+
+ Best for gradual adjustments where any value is valid.
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ subSections: [
+ {
+ title: "Provide a clear label and context",
+ content: (
+
+
+ Use a descriptive label that explains what the slider controls (i.e., instead of "Adjust
+ value", use "Select your coverage amount.").
+
+
+ Add helper text if additional guidance is needed.
+
+
+ ),
+ },
+ {
+ title: "Set logical minimum and maximum values",
+ content: (
+
+
+ Ensure the range matches real-world expectations (e.g., an insurance deductible slider
+ should not start at $0 if the lowest option is $250).
+
+
+ Keep increment steps meaningful (e.g., increments of $10 instead of $1 for large ranges).
+
+
+ ),
+ },
+ {
+ title: "Allow manual input when precise values are needed",
+ content: (
+ <>
+
+
+ Some users prefer entering a value directly instead of using the slider.
+
+
+ Providing the input field next to the slider helps with this.
+
+
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const SliderOverviewPage = () => (
+
+
+
+
+);
+
+export default SliderOverviewPage;
diff --git a/apps/website/screens/components/slider/overview/examples/continuous.tsx b/apps/website/screens/components/slider/overview/examples/continuous.tsx
new file mode 100644
index 0000000000..df192910c0
--- /dev/null
+++ b/apps/website/screens/components/slider/overview/examples/continuous.tsx
@@ -0,0 +1,35 @@
+import { DxcSlider, DxcInset, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, changeValue] = useState(45);
+ const onChange = (newValue) => {
+ changeValue(newValue);
+ };
+
+ return (
+
+
+
+ Current value: {value}
+
+
+ );
+}`;
+
+const scope = {
+ DxcSlider,
+ DxcInset,
+ DxcFlex,
+ DxcParagraph,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/slider/overview/examples/discrete.tsx b/apps/website/screens/components/slider/overview/examples/discrete.tsx
new file mode 100644
index 0000000000..551adf71b4
--- /dev/null
+++ b/apps/website/screens/components/slider/overview/examples/discrete.tsx
@@ -0,0 +1,35 @@
+import { DxcSlider, DxcInset, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, changeValue] = useState(40);
+ const onChange = (newValue) => {
+ changeValue(newValue);
+ };
+
+ return (
+
+
+ Current value: {value}
+
+ );
+}`;
+
+const scope = {
+ DxcSlider,
+ DxcInset,
+ DxcFlex,
+ DxcParagraph,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/slider/overview/examples/input.tsx b/apps/website/screens/components/slider/overview/examples/input.tsx
new file mode 100644
index 0000000000..6c88a7c172
--- /dev/null
+++ b/apps/website/screens/components/slider/overview/examples/input.tsx
@@ -0,0 +1,40 @@
+import { DxcSlider, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, changeValue] = useState(40);
+ const onChange = (newValue) => {
+ changeValue(newValue);
+ };
+ const onDragEnd = () => {};
+ const onChangeInput = (newValue) => {
+ changeValue(newValue);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSlider,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/slider/overview/images/slider_anatomy.png b/apps/website/screens/components/slider/overview/images/slider_anatomy.png
new file mode 100644
index 0000000000..20c0f108d6
Binary files /dev/null and b/apps/website/screens/components/slider/overview/images/slider_anatomy.png differ
diff --git a/apps/website/screens/components/slider/specs/SliderSpecsPage.tsx b/apps/website/screens/components/slider/specs/SliderSpecsPage.tsx
deleted file mode 100644
index 7373da6b41..0000000000
--- a/apps/website/screens/components/slider/specs/SliderSpecsPage.tsx
+++ /dev/null
@@ -1,773 +0,0 @@
-import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import sliderAnatomy from "./images/slider_anatomy.png";
-import sliderSpecs from "./images/slider_specs.png";
-import sliderStates from "./images/slider_states.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- The slider component has the following states: enabled, hover,{" "}
- focus, active and disabled.
-
-
-
-
-
- ),
- },
-
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
- Helper text
-
- Floor label (Optional)
-
- Total line
-
- Ceil label (Optional)
-
-
- Value input (Optional)
-
- Tick
- Thumb
- Track line
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
-
- [*] The thumb element size is 14x14px in the following states: :hover and{" "}
- :active.
-
-
- ),
- },
- {
- title: "Border",
- content: (
-
-
-
-
Property
-
Element
-
Core token
-
Value
-
-
-
-
-
- border-width
-
-
Track line
-
- border-width-0
-
-
0rem / 0px
-
-
-
- border-style
-
-
Track line
-
- border-style-none
-
-
none
-
-
-
- border-radius
-
-
Track line
-
- border-radius-full
-
-
9999px
-
-
-
- border-width
-
-
Thumb
-
- border-width-0
-
-
0rem / 0px
-
-
-
- border-style
-
-
Thumb
-
- border-style-none
-
-
none
-
-
-
- border-radius
-
-
Thumb
-
- border-radius-full
-
-
9999px
-
-
-
- outline
-
-
Focus indicator
-
-
-
auto 1px
-
-
-
- outline-offset
-
-
Focus indicator
-
-
-
2px
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 1.3.1 Info and Relationships
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 1.3.2 Meaningful Sequence
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.1.1 Keyboard
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.4.3 Focus Order
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.4.6 Headings and Labels
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.4.7 Focus Visible
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 4.1.2 Name, Role, Value
-
-
-
- ),
- },
- {
- title: "WAI-ARIA",
- content: (
-
-
- WAI-ARIA Authoring practices 1.2 -{" "}
-
- 3.19 Slider
-
-
-
- WAI-ARIA Authoring practices 1.2 -{" "}
-
- Slider example
-
-
-
- ),
- },
- ],
- },
-];
-
-const SliderSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SliderSpecsPage;
diff --git a/apps/website/screens/components/slider/specs/images/slider_anatomy.png b/apps/website/screens/components/slider/specs/images/slider_anatomy.png
deleted file mode 100644
index 2ee6da6b2d..0000000000
Binary files a/apps/website/screens/components/slider/specs/images/slider_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/slider/specs/images/slider_specs.png b/apps/website/screens/components/slider/specs/images/slider_specs.png
deleted file mode 100644
index 623d22ea38..0000000000
Binary files a/apps/website/screens/components/slider/specs/images/slider_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/slider/specs/images/slider_states.png b/apps/website/screens/components/slider/specs/images/slider_states.png
deleted file mode 100644
index 44acbbeb55..0000000000
Binary files a/apps/website/screens/components/slider/specs/images/slider_states.png and /dev/null differ
diff --git a/apps/website/screens/components/slider/usage/SliderUsagePage.tsx b/apps/website/screens/components/slider/usage/SliderUsagePage.tsx
deleted file mode 100644
index c1892a668a..0000000000
--- a/apps/website/screens/components/slider/usage/SliderUsagePage.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import variants from "./examples/variants";
-import input from "./examples/input";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- Visualize the output of the slider as feedback to the user of the current state.
-
-
- As more information can give it to the user, the easier the selection will be.
-
-
- If the value has to be specific, give some resource to the user to fill a precise input, i.e. an input next to
- the slider.
-
-
- ),
- },
- {
- title: "Variants",
- content: (
- <>
-
- The slider component has two variants that can be used depending on the requirements of the application.
-
-
-
-
-
-
Variant
- Description
-
-
-
-
-
- Discrete
-
-
Slider can only get the value marked alongside the total line.
-
-
-
- Continuos
-
-
Slider can take every value mapped.
-
-
-
-
- ),
- },
- {
- title: "Slider with input",
- content: (
- <>
-
- To accomplish these considerations, some slider's variations were designed with the purpose of offering a
- great user experience within the application.
-
-
-
- ),
- },
-];
-
-const SliderUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SliderUsagePage;
diff --git a/apps/website/screens/components/slider/usage/examples/input.ts b/apps/website/screens/components/slider/usage/examples/input.ts
deleted file mode 100644
index c0d90eb06d..0000000000
--- a/apps/website/screens/components/slider/usage/examples/input.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DxcSlider, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, changeValue] = useState(40);
- const onChange = (newValue) => {
- changeValue(newValue);
- };
- const onDragEnd = () => {};
- const onChangeInput = (newValue) => {
- changeValue(newValue);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcSlider,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/slider/usage/examples/variants.ts b/apps/website/screens/components/slider/usage/examples/variants.ts
deleted file mode 100644
index e981472c41..0000000000
--- a/apps/website/screens/components/slider/usage/examples/variants.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { DxcSlider, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [discreteValue, changeDiscreteValue] = useState(40);
- const onChangeDiscrete = (newValue) => {
- changeDiscreteValue(newValue);
- };
- const [continuousValue, changeContinuousValue] = useState(45);
- const onChangeContinuous = (newValue) => {
- changeContinuousValue(newValue);
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSlider,
- DxcInset,
- DxcFlex,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/spinner/SpinnerPageLayout.tsx b/apps/website/screens/components/spinner/SpinnerPageLayout.tsx
index 0390e9adf7..5f8a8a40c5 100644
--- a/apps/website/screens/components/spinner/SpinnerPageLayout.tsx
+++ b/apps/website/screens/components/spinner/SpinnerPageLayout.tsx
@@ -6,20 +6,19 @@ import { ReactNode } from "react";
const SpinnerPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/spinner" },
- { label: "Usage", path: "/components/spinner/usage" },
- { label: "Specifications", path: "/components/spinner/specifications" },
+ { label: "Overview", path: "/components/spinner" },
+ { label: "Code", path: "/components/spinner/code" },
];
return (
-
+
-
+
- Loading spinner is a waiting indicator in the user interface to communicate users an ongoing proccess.
+ Loading spinner is a waiting indicator in the user interface to communicate users an ongoing process.
-
+
{children}
diff --git a/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx b/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx
index 2494b58b3d..a5c4912f22 100644
--- a/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx
+++ b/apps/website/screens/components/spinner/code/SpinnerCodePage.tsx
@@ -1,11 +1,10 @@
import { DxcTable, DxcFlex } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import overlay from "./examples/overlay";
-import TableCode from "@/common/TableCode";
+import { TableCode } from "@/common/Code";
import Code from "@/common/Code";
const sections = [
@@ -22,6 +21,32 @@ const sections = [
+
+
ariaLabel
+
+ string
+
+
+ Specifies a string to be used as the accessible name for the component when no label is
+ provided or the mode is set to small.
+
+
+ 'Spinner'
+
+
+
+
inheritColor
+
+ boolean
+
+
+ If true, the color is inherited from the closest parent with a defined color. This allows users to adapt
+ the spinner to the semantic color of the use case in which it is used.
+
- 'large'
+ 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.
+
-
-
value
+
mode
- number
+ 'large' | 'small' | 'overlay'
+
The different variants of the components.
- The value of the progress indicator. If it's received the component is determinate, otherwise is
- indeterminate.
+ 'large'
- 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.
+ The value of the progress indicator. If it's received the component is determinate, otherwise is
+ indeterminate.
-
-
-
ariaLabel
-
- string
-
-
- Specifies a string to be used as the name for the spinner element when no `label` is provided or the
- `mode` is set to small.
-
-
'Spinner'
-
),
@@ -105,15 +119,11 @@ const sections = [
},
];
-const SpinnerUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const SpinnerCodePage = () => (
+
+
+
+
+);
-export default SpinnerUsagePage;
+export default SpinnerCodePage;
diff --git a/apps/website/screens/components/spinner/code/examples/basicUsage.ts b/apps/website/screens/components/spinner/code/examples/basicUsage.ts
deleted file mode 100644
index bfb5a2b721..0000000000
--- a/apps/website/screens/components/spinner/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { DxcSpinner, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcSpinner,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/spinner/code/examples/basicUsage.tsx b/apps/website/screens/components/spinner/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..3da314f56c
--- /dev/null
+++ b/apps/website/screens/components/spinner/code/examples/basicUsage.tsx
@@ -0,0 +1,16 @@
+import { DxcSpinner, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSpinner,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/spinner/code/examples/overlay.ts b/apps/website/screens/components/spinner/code/examples/overlay.ts
deleted file mode 100644
index bdd0375ce4..0000000000
--- a/apps/website/screens/components/spinner/code/examples/overlay.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DxcSpinner, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [isVisible, changeIsVisible] = useState(false);
- const showModal = () => {
- changeIsVisible(true);
- fetchData().then(() => {
- changeIsVisible(false);
- });
- };
- const fetchData = () => {
- return new Promise((resolve) => {
- setTimeout(() => {
- resolve();
- }, 3000);
- });
- };
-
- return (
-
-
- {isVisible && }
-
- );
-}`;
-
-const scope = {
- DxcSpinner,
- DxcInset,
- DxcButton,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/spinner/code/examples/overlay.tsx b/apps/website/screens/components/spinner/code/examples/overlay.tsx
new file mode 100644
index 0000000000..ca4cc3d1fe
--- /dev/null
+++ b/apps/website/screens/components/spinner/code/examples/overlay.tsx
@@ -0,0 +1,35 @@
+import { DxcSpinner, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [isVisible, changeIsVisible] = useState(false);
+ const showModal = () => {
+ changeIsVisible(true);
+ fetchData().then(() => {
+ changeIsVisible(false);
+ });
+ };
+ const fetchData = () => {
+ return new Promise((resolve) => {
+ setTimeout(() => {
+ resolve();
+ }, 3000);
+ });
+ };
+
+ return (
+
+
+ {isVisible && }
+
+ );
+}`;
+
+const scope = {
+ DxcSpinner,
+ DxcInset,
+ DxcButton,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/spinner/overview/SpinnerOverviewPage.tsx b/apps/website/screens/components/spinner/overview/SpinnerOverviewPage.tsx
new file mode 100644
index 0000000000..20ab6d7813
--- /dev/null
+++ b/apps/website/screens/components/spinner/overview/SpinnerOverviewPage.tsx
@@ -0,0 +1,228 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import determinateIndeterminate from "./examples/determinateIndeterminate";
+import small from "./examples/small";
+import anatomy from "./images/spinner_anatomy.png";
+import overlay from "./images/spinner_overlay.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The spinner component is a visual indicator that communicates to users that a process is in progress. It is
+ commonly used for loading states, where content or data retrieval takes time, indicating that an action is being
+ executed. Spinners help maintain a smooth user experience by reducing uncertainty and providing feedback while
+ waiting. They can be adapted in size and color to fit different contexts, making them a versatile choice for
+ various loading scenarios.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label: provides a textual description of the loading process, enhancing accessibility and
+ helping users understand what is being loaded.
+
+
+ Total circle: represents the full circumference of the spinner, serving as the stating
+ background that defines the complete loading cycle.
+
+
+ Track circle: the dynamic element that visually indicates progress by filling up according
+ to the percentage of completion.
+
+
+ Percentage(Optional): displays a numerical value, typically in the center of the
+ spinner, showing the exact progress of the loading process.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+
+ Depending on the size or position, there are three different variants for the spinner component:{" "}
+ defaultdefault, small and overlay.
+
+ ),
+ subSections: [
+ {
+ title: "Default",
+ content: (
+
+ The default variant of the spinner is the standard option, offering a clear visual
+ indication that a process is in progress. It is designed to be noticeable, making it ideal for situations
+ where users must wait for content or system responses. As well as the overlay variant, the default version
+ of our spinner can be determinate (it shows the percentage related to the progress of the
+ process) or indeterminate.
+
+ ),
+ subSections: [
+ {
+ title: "Use cases",
+ content: (
+ <>
+
+
+ Page loading: indicating that a new page or section of an application is being
+ loaded.
+
+
+ Data fetching: warning users of a potential security breach, with actions to change
+ passwords or review account activity.
+
+
+ Form submission processing: letting users know that their input is being processed.
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Overlay",
+ content: (
+
+ The overlay variant of the spinner is designed for scenarios where the entire interface is temporarily
+ blocked while a process is running. It appears centered on the screen with a semi-transparent background,{" "}
+ preventing user interactions until the task is completed. This variant ensures users are
+ aware that the system is actively processing their requests and helps prevent unintended actions during
+ critical operations.
+
+ ),
+ subSections: [
+ {
+ title: "Use cases",
+ content: (
+ <>
+
+
+ System-wide loading states: when an entire page or app is waiting for a response.
+
+
+ Blocking UI interactions: preventing user input while a critical process is being
+ executed.
+
+
+ Authentication processing: indicating login or security verification in progress.
+
+
+ Payment processing: ensuring transactions are completed before allowing further
+ actions.
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Small",
+ content: (
+
+ The small variant of the spinner is a compact loading indicator designed for inline or
+ localized loading states. It is ideal for{" "}
+ non-blocking scenarios where users can continue interacting with other elements while
+ waiting for specific content or data to load. This variant seamlessly integrates within UI components
+ without overwhelming the interface.
+
+ ),
+ subSections: [
+ {
+ title: "Use cases",
+ content: (
+ <>
+
+
+ Button loading states: indicating an action is in progress, such as form
+ submission.
+
+
+ Table or list updates: showing loading status when fetching additional rows or
+ filtering data.
+
+
+ Inline form validation: providing feedback when checking input validity.
+
+
+
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Use spinners for real-time feedback: implement the spinner only when there is a delay in
+ content loading or an ongoing process that requires user awareness. Avoid unnecessary use that may lead to
+ confusion.
+
+
+ Choose the right variant:
+
+
+
+ The default (large) spinner is ideal for full-page or major loading states that
+ require user attention.
+
+
+ The overlay spinner works well for modal or section-based loading, preventing
+ interaction with specific content while keeping the rest of the UI accessible.
+
+
+ The small spinner is best for inline feedback, such as button actions, table updates,
+ or background data processing.
+
+
+
+
+
+ Prevent indefinite loading states: always ensure the spinner disappears once the process is
+ complete. If an operation takes too long, consider displaying a message or progress indicator with more
+ details.
+
+
+ Avoid blocking critical interactions: if possible, allow users to navigate or interact with
+ other elements while waiting. Overlay spinners should be used cautiously to prevent unnecessary disruption.
+
+
+ Combine with descriptive labels when necessary: if the loading state might be unclear,
+ include a short label (e.g., "Loading data..." or "Processing request...") to provide context.
+
+
+ Optimize performance: if an operation takes longer than expected, consider showing an
+ estimated time or an alternative UI state to maintain user engagement.
+
+
+
+ ),
+ },
+];
+
+const SpinnerOverviewPage = () => (
+
+
+
+
+);
+
+export default SpinnerOverviewPage;
diff --git a/apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.tsx b/apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.tsx
new file mode 100644
index 0000000000..1383d07712
--- /dev/null
+++ b/apps/website/screens/components/spinner/overview/examples/determinateIndeterminate.tsx
@@ -0,0 +1,20 @@
+import { DxcSpinner, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSpinner,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/spinner/overview/examples/small.tsx b/apps/website/screens/components/spinner/overview/examples/small.tsx
new file mode 100644
index 0000000000..45c2ba1245
--- /dev/null
+++ b/apps/website/screens/components/spinner/overview/examples/small.tsx
@@ -0,0 +1,20 @@
+import { DxcSpinner, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSpinner,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/spinner/overview/images/spinner_anatomy.png b/apps/website/screens/components/spinner/overview/images/spinner_anatomy.png
new file mode 100644
index 0000000000..c8feead275
Binary files /dev/null and b/apps/website/screens/components/spinner/overview/images/spinner_anatomy.png differ
diff --git a/apps/website/screens/components/spinner/overview/images/spinner_overlay.png b/apps/website/screens/components/spinner/overview/images/spinner_overlay.png
new file mode 100644
index 0000000000..86012302a2
Binary files /dev/null and b/apps/website/screens/components/spinner/overview/images/spinner_overlay.png differ
diff --git a/apps/website/screens/components/spinner/specs/SpinnerSpecsPage.tsx b/apps/website/screens/components/spinner/specs/SpinnerSpecsPage.tsx
deleted file mode 100644
index 352ec22de6..0000000000
--- a/apps/website/screens/components/spinner/specs/SpinnerSpecsPage.tsx
+++ /dev/null
@@ -1,289 +0,0 @@
-import { DxcTable, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import specsImage from "./images/spinner_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const SpinnerSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SpinnerSpecsPage;
diff --git a/apps/website/screens/components/spinner/specs/images/spinner_specs.png b/apps/website/screens/components/spinner/specs/images/spinner_specs.png
deleted file mode 100644
index 8955680da1..0000000000
Binary files a/apps/website/screens/components/spinner/specs/images/spinner_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/spinner/usage/SpinnerUsagePage.tsx b/apps/website/screens/components/spinner/usage/SpinnerUsagePage.tsx
deleted file mode 100644
index 57d17f9cee..0000000000
--- a/apps/website/screens/components/spinner/usage/SpinnerUsagePage.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import determinateIndeterminate from "./examples/determinateIndeterminate";
-import variantsImage from "./images/spinner_variants.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- There should only be a single spinner on a page at one time.
-
- Only use the spinner component in a process that takes more than one second.
-
- The text of the action is not mandatory but recommendable.
-
- If only a portion of a page is displaying new content or being updated, use a medium or{" "}
- small spinner in that part of the page.
-
-
- ),
- },
- {
- title: "Variants",
- content: (
- <>
-
- There are three different variants for the spinner component due to the size or the position:{" "}
- large, small and overlay.
-
-
-
-
-
- ),
- },
- {
- title: "Determinate or indeterminate",
- content: (
- <>
-
-
-
- Determinate indicators display how long a process will take. They should be used in longer processes.
-
-
-
- Indeterminate indicators express an unspecified amount of wait time. They should be used when:
-
-
- The processing time is unknown.
-
- The wait time is expected to be short enough that it's not necessary to display.
-
-
-
-
-
- ),
- },
-];
-
-const SpinnerUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SpinnerUsagePage;
diff --git a/apps/website/screens/components/spinner/usage/examples/determinateIndeterminate.ts b/apps/website/screens/components/spinner/usage/examples/determinateIndeterminate.ts
deleted file mode 100644
index 0e0dac75e2..0000000000
--- a/apps/website/screens/components/spinner/usage/examples/determinateIndeterminate.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { DxcSpinner, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSpinner,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/spinner/usage/images/spinner_variants.png b/apps/website/screens/components/spinner/usage/images/spinner_variants.png
deleted file mode 100644
index 30e3c8194f..0000000000
Binary files a/apps/website/screens/components/spinner/usage/images/spinner_variants.png and /dev/null differ
diff --git a/apps/website/screens/components/status-light/StatusLightPageLayout.tsx b/apps/website/screens/components/status-light/StatusLightPageLayout.tsx
index fbf4fcb7f8..242d3826bb 100644
--- a/apps/website/screens/components/status-light/StatusLightPageLayout.tsx
+++ b/apps/website/screens/components/status-light/StatusLightPageLayout.tsx
@@ -6,21 +6,21 @@ import { ReactNode } from "react";
const StatusLightPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/status-light" },
- { label: "Usage", path: "/components/status-light/usage" },
- { label: "Specifications", path: "/components/status-light/specifications" },
+ { label: "Overview", path: "/components/status-light" },
+ { label: "Code", path: "/components/status-light/code" },
];
return (
-
+
-
-
+
+
- Status lights, as semantic elements, allow the user to display the completion status of tasks, processes and
- more.
+ Status light is a small, color-coded visual indicator used to represent the state or condition of a system,
+ process, or component. It provides at-a-glance feedback, helping users quickly assess statuses without
+ needing detailed explanations.
-
+
{children}
diff --git a/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx b/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx
index 98c54d955f..849bd4c87b 100644
--- a/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx
+++ b/apps/website/screens/components/status-light/code/StatusLightCodePage.tsx
@@ -1,8 +1,7 @@
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 { TableCode } from "@/common/Code";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import StatusBadge from "@/common/StatusBadge";
@@ -22,27 +21,27 @@ const sections = [
It will define the color of the light based on its semantic meaning.
- string
+ 'default'
-
An auxiliar text that will add some context to the status.
-
-
size
@@ -69,15 +68,11 @@ const sections = [
},
];
-const StatusLightCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const StatusLightCodePage = () => (
+
+
+
+
+);
export default StatusLightCodePage;
diff --git a/apps/website/screens/components/status-light/code/examples/basicUsage.ts b/apps/website/screens/components/status-light/code/examples/basicUsage.ts
index 86bd084dc4..ff9dc10755 100644
--- a/apps/website/screens/components/status-light/code/examples/basicUsage.ts
+++ b/apps/website/screens/components/status-light/code/examples/basicUsage.ts
@@ -2,7 +2,7 @@ import { DxcStatusLight, DxcInset } from "@dxc-technology/halstack-react";
const code = `() => {
return (
-
+
);
diff --git a/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx b/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx
new file mode 100644
index 0000000000..e68a618211
--- /dev/null
+++ b/apps/website/screens/components/status-light/overview/StatusLightOverviewPage.tsx
@@ -0,0 +1,134 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
+import variants from "./examples/variants";
+import anatomy from "./images/status_light_anatomy.png";
+import Image from "@/common/Image";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Being a non-clickable UI element, the status light is used to provide a quick, at-a-glance
+ indication of system states, alerts, or conditions within an interface. Designed for clarity and instant
+ recognition, it seamlessly integrates into various layouts without adding cognitive load. Status lights follow a
+ consistent color-coded system to ensure users can easily interpret their meaning. They are often used alongside
+ other components, such as tables, accordions, or dashboards, to enhance visibility and provide contextual
+ awareness.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Status light: the core visual element of a status light, designed as a dot for clarity and
+ easy recognition.
+
+
+ Label: a short text description alongside the status light to provide additional context.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+ <>
+
+ The status light component is available in five semantic variants, each represented by a distinct color. These
+ colors ensure clear communication of different states.
+
+
+ Additionally, the component comes in three different sizes, allowing for flexibility across various layouts
+ and screen sizes while maintaining readability and visual consistency.
+
+
+
+
+
+
Variant
+ Description
+
+
+
+
+
+ Default
+
+
For neutral statuses, like archived, draft, paused...
+
+
+
+ Info
+
+
For live statuses, like active, in use, uploaded...
+
+
+
+ Success
+
+
For positive statuses, like finished, approved, completed...
+
+
+
+ Warning
+
+
For pending or critical statuses, like scheduled, in progress, processing...
+
+
+
+ Error
+
+
For negative statuses, like incomplete, rejected, failed...
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Ensure semantic accuracy: always match each status light color with the correct meaning to
+ maintain clarity and avoid misinterpretation.
+
+
+ Optimize for different screen sizes: Select the appropriate size to ensure visibility and
+ legibility across various layouts.
+
+
+ Use clear and concise labels: Keep them brief and ensure they accurately describe the current
+ state.
+
+
+ Combine with badges carefully: status lights and semantic badges can only be used together if
+ one of them does not use a semantic color or if their semantic colors do not contradict each other. This
+ prevents misinterpretation and maintains clarity in data visualizations such as tables, charts, or grids.
+
+
+ Use strategically: overusing status lights in interfaces with high cognitive load can
+ overwhelm users and disrupt readability. Use them only where they add real value.
+
+
+ ),
+ },
+];
+
+const StatusLightOverviewPage = () => (
+
+
+
+
+);
+
+export default StatusLightOverviewPage;
diff --git a/apps/website/screens/components/status-light/overview/examples/variants.tsx b/apps/website/screens/components/status-light/overview/examples/variants.tsx
new file mode 100644
index 0000000000..e377ffae13
--- /dev/null
+++ b/apps/website/screens/components/status-light/overview/examples/variants.tsx
@@ -0,0 +1,43 @@
+import { DxcStatusLight, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcStatusLight,
+ DxcFlex,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/status-light/overview/images/status_light_anatomy.png b/apps/website/screens/components/status-light/overview/images/status_light_anatomy.png
new file mode 100644
index 0000000000..e0f4fc3444
Binary files /dev/null and b/apps/website/screens/components/status-light/overview/images/status_light_anatomy.png differ
diff --git a/apps/website/screens/components/status-light/specs/StatusLightSpecsPage.tsx b/apps/website/screens/components/status-light/specs/StatusLightSpecsPage.tsx
deleted file mode 100644
index e767785daf..0000000000
--- a/apps/website/screens/components/status-light/specs/StatusLightSpecsPage.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import specsImage from "./images/status-light_specs.jpg";
-import anatomyImage from "./images/status-light_anatomy.jpg";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Status Light
- Label
-
-
- ),
- },
- {
- title: "Design tokens",
- content: (
- <>
- This component currently has no design tokens.
-
- ),
- },
-];
-
-const StatusLightSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default StatusLightSpecsPage;
diff --git a/apps/website/screens/components/status-light/specs/images/status-light_anatomy.jpg b/apps/website/screens/components/status-light/specs/images/status-light_anatomy.jpg
deleted file mode 100644
index 1c0f9195e6..0000000000
Binary files a/apps/website/screens/components/status-light/specs/images/status-light_anatomy.jpg and /dev/null differ
diff --git a/apps/website/screens/components/status-light/specs/images/status-light_specs.jpg b/apps/website/screens/components/status-light/specs/images/status-light_specs.jpg
deleted file mode 100644
index 42c95e4642..0000000000
Binary files a/apps/website/screens/components/status-light/specs/images/status-light_specs.jpg and /dev/null differ
diff --git a/apps/website/screens/components/status-light/usage/StatusLightUsagePage.tsx b/apps/website/screens/components/status-light/usage/StatusLightUsagePage.tsx
deleted file mode 100644
index fefd27c902..0000000000
--- a/apps/website/screens/components/status-light/usage/StatusLightUsagePage.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-import variants from "./example/variants";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- The Status light component serves as a powerful communicator of an element or process' status. It focuses
- exclusively on conveying semantic information within a range of five variants, each of them aligned with its
- specific process status.
-
- ),
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Match each status light variant with the correct semantic meaning to communicate clearly and consistently
- messages about our statuses.
-
-
- Use each size of the component according to the different screen sizes where it will be placed, paying
- special attention to maintaining legibility and functionality.
-
-
- Use concise and precise labels that reflect the status of a process accordingly. You should not use more
- than three words in a status light label.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Mix semantic meanings within Status lights, as this will lead to confusion and misinterpretation of
- process states.
-
-
- Use Status light and semantic badges in the same data visualization format (tables, charts, data
- grids...).
-
-
- Overuse the component. In screens with high cognitive load, you should not overuse this component, as it
- may confuse users and interrupt the reading flow.
-
-
- ),
- },
- ],
- },
- {
- title: "Variants",
- content: (
- <>
-
- The Status light component has five different modes, each one corresponding to its semantic meaning.
-
-
-
-
-
-
Variant
- Description
-
-
-
-
-
- Default
-
-
For neutral statuses, like archived, draft, paused...
-
-
-
- Info
-
-
For live statuses, like active, in use, uploaded...
-
-
-
- Success
-
-
For positive statuses, like finished, approved, completed...
-
-
-
- Warning
-
-
For pending or critical statuses, like scheduled, in progress, processing...
-
-
-
- Error
-
-
For negative statuses, like incomplete, rejected, failed...
-
-
-
-
- ),
- },
-];
-
-const StatusLightUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default StatusLightUsagePage;
diff --git a/apps/website/screens/components/status-light/usage/example/variants.ts b/apps/website/screens/components/status-light/usage/example/variants.ts
deleted file mode 100644
index 28682fdbd0..0000000000
--- a/apps/website/screens/components/status-light/usage/example/variants.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { DxcStatusLight, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcStatusLight,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/switch/SwitchPageLayout.tsx b/apps/website/screens/components/switch/SwitchPageLayout.tsx
index df66b64c7a..61839c84b3 100644
--- a/apps/website/screens/components/switch/SwitchPageLayout.tsx
+++ b/apps/website/screens/components/switch/SwitchPageLayout.tsx
@@ -6,22 +6,20 @@ import { ReactNode } from "react";
const SwitchPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/switch" },
- { label: "Usage", path: "/components/switch/usage" },
- { label: "Specifications", path: "/components/switch/specifications" },
+ { label: "Overview", path: "/components/switch" },
+ { label: "Code", path: "/components/switch/code" },
];
return (
-
+
-
+
- Switch toggles are elements that can get two simple states, each of them has an impact on the system and it
- can be switched on or off, there are no more options. If the switch toggle is on one state, the action to
- change it will modify to value of the element to the contrary.
+ A switch allows users to toggle a single setting between two opposing states, such as on/off or
+ enabled/disabled. It represents a binary choice that takes effect immediately.
-
+
{children}
diff --git a/apps/website/screens/components/switch/code/SwitchCodePage.tsx b/apps/website/screens/components/switch/code/SwitchCodePage.tsx
index 44040bdd3b..8a35f7fbd7 100644
--- a/apps/website/screens/components/switch/code/SwitchCodePage.tsx
+++ b/apps/website/screens/components/switch/code/SwitchCodePage.tsx
@@ -1,12 +1,10 @@
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -23,13 +21,15 @@ const sections = [
-
defaultChecked
+
ariaLabel
- boolean
+ {"string"}
-
Initial state of the switch, only when it is uncontrolled.
- false
+ Specifies a string to be used as the name for the switch element when no label is provided.
+
+
+ 'Switch'
@@ -44,15 +44,24 @@ const sections = [
-
-
value
+
defaultChecked
- string
+ boolean
+
Initial state of the switch, only when it is uncontrolled.
- Will be passed to the value attribute of the HTML input element. When inside a form, this
- value will be only submitted if the switch is checked.
+ false
+
+ 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.
+
+
-
+
name
@@ -81,14 +101,15 @@ const sections = [
-
-
disabled
+
onChange
- boolean
+ {"(checked: boolean) => void"}
-
If true, the component will be disabled.
- false
+ This function will be called when the user clicks the switch. The new value of the checked attribute will
+ be passed as a parameter.
+
-
optional
@@ -101,25 +122,11 @@ const sections = [
-
onChange
-
- {"(checked: boolean) => void"}
-
-
- This function will be called when the user clicks the switch. The new value of the checked attribute will
- be passed as a parameter.
-
- 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.
+ {"React.Ref"}
+
Reference to the component.
-
@@ -145,20 +152,15 @@ const sections = [
-
ref
+
value
- {"React.Ref"}
+ string
-
Reference to the component.
-
-
-
-
-
ariaLabel
- {"string"}
+ Will be passed to the value attribute of the HTML input element. When inside a form, this
+ value will be only submitted if the switch is checked.
-
Specifies a string to be used as the name for the switch element when no `label` is provided.
-
'Switch'
+
-
@@ -179,15 +181,11 @@ const sections = [
},
];
-const SwitchCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const SwitchCodePage = () => (
+
+
+
+
+);
export default SwitchCodePage;
diff --git a/apps/website/screens/components/switch/code/examples/controlled.ts b/apps/website/screens/components/switch/code/examples/controlled.ts
deleted file mode 100644
index ebd453d930..0000000000
--- a/apps/website/screens/components/switch/code/examples/controlled.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DxcSwitch, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [checked, changeChecked] = useState(false);
- const onChange = (newValue) => {
- changeChecked(newValue);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcSwitch,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/switch/code/examples/controlled.tsx b/apps/website/screens/components/switch/code/examples/controlled.tsx
new file mode 100644
index 0000000000..8a4694b34c
--- /dev/null
+++ b/apps/website/screens/components/switch/code/examples/controlled.tsx
@@ -0,0 +1,27 @@
+import { DxcSwitch, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [checked, changeChecked] = useState(false);
+ const onChange = (newValue) => {
+ changeChecked(newValue);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSwitch,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/switch/code/examples/uncontrolled.ts b/apps/website/screens/components/switch/code/examples/uncontrolled.ts
deleted file mode 100644
index adec7ec225..0000000000
--- a/apps/website/screens/components/switch/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DxcSwitch, DxcInset, DxcFlex, DxcButton } from "@dxc-technology/halstack-react";
-import { useRef } from "react";
-
-const code = `() => {
- const switchRef = useRef();
-
- const handleSubmit = () => {
- const switchEl = switchRef.current.getElementsByTagName("input")[0];
- console.log(switchEl.checked ? switchEl.value : "");
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSwitch,
- DxcInset,
- DxcFlex,
- useRef,
- DxcButton,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/switch/code/examples/uncontrolled.tsx b/apps/website/screens/components/switch/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..887e25fe49
--- /dev/null
+++ b/apps/website/screens/components/switch/code/examples/uncontrolled.tsx
@@ -0,0 +1,35 @@
+import { DxcSwitch, DxcInset, DxcFlex, DxcButton } from "@dxc-technology/halstack-react";
+import { useRef } from "react";
+
+const code = `() => {
+ const switchRef = useRef();
+
+ const handleSubmit = () => {
+ const switchEl = switchRef.current.getElementsByTagName("input")[0];
+ console.log(switchEl.checked ? switchEl.value : "");
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSwitch,
+ DxcInset,
+ DxcFlex,
+ useRef,
+ DxcButton,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
new file mode 100644
index 0000000000..41cf21f384
--- /dev/null
+++ b/apps/website/screens/components/switch/overview/SwitchOverviewPage.tsx
@@ -0,0 +1,224 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import labelPosition from "./examples/labelPosition";
+import stacking from "./examples/stacking";
+import Image from "@/common/Image";
+import anatomy from "./images/switch_anatomy.png";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The switch component enables users to toggle a specific setting on or off. It is designed for
+ binary decisions that directly affect system behavior or user preferences. Unlike checkboxes or radio buttons,
+ switches represent immediate state changes — they do not require form submission. They are especially effective
+ in settings panels, preferences, and mobile interfaces where quick, inline control is essential.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label: describes the setting or feature being toggled. Helps users understand the
+ consequence of switching it on or off.
+
+
+ Thumb: the sliding circle that moves to indicate the current state.
+
+
+ Track: the background container of the switch that reflects the active/inactive state with
+ color.
+
+
+
+ ),
+ },
+ {
+ title: "Stacking switches",
+ content: (
+ <>
+
+ Switches can be arranged vertically or horizontally depending on context, user needs, and available screen
+ space.
+
+
+
+ ),
+ subSections: [
+ {
+ title: "Vertical stacking",
+ content: (
+ <>
+
+ The preferred layout for lists of switches. It enhances readability and ensures each
+ toggle is clearly associated with its label. Ideal for settings or control panels with multiple toggles.
+
+ Leave minimum 4px of spacing between vertically stacked switches.
+
+ ),
+ },
+ {
+ title: "Horizontal stacking",
+ content: (
+ <>
+
+ Used when space is constrained or when only a few switches are present. This layout can{" "}
+ save space but should be avoided for long labels or more than two options.
+
+ Horizontally stacked switches maintain a separation of, minimum, 24px.
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Label position",
+ content: (
+ <>
+
+ By default, the label is placed before the switch, as this position clearly communicates what
+ the control is for and improves accessibility. However, it's also possible to position the label{" "}
+ after the switch in specific cases — particularly when you want to emphasize the{" "}
+ current state of the control (e.g., "On", "Off").
+
+
+ We recommend changing the default label position{" "}
+ only when the component's use case justifies it, and as long as the meaning and state of the
+ switch remain clear to the user.
+
+
+
+
+
+
Position
+
Description
+
+
+
+
+
+ Label before
+
+
+ Improves clarity by describing the setting being controlled. This is the default and recommended
+ position.
+
+
+
+
+ Label after
+
+
+ Useful in minimalist interfaces or when the switch's current state needs to be highlighted. Recommended
+ only for specific use cases.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Switch vs. radio group vs. checkbox",
+ content: (
+ <>
+
+ Although switches,{" "}
+
+ radio groups
+
+ , and{" "}
+
+ checkboxes
+ {" "}
+ may appear as selection controls, they serve distinct purposes in a user interface:
+
+
+
+
+
Component
+
Use case
+
+
+
+
+
+ Switch
+
+
+ Use for a single, immediate toggle between two states, like on/off or enabled/disabled.
+ Switches should act instantly and are best for system or UI-level settings.
+
+
+
+
+ Radio group
+
+
+ Use when the user must select only one option from a list of predefined, mutually
+ exclusive choices. Ideal for short, static lists where all options should be visible at once to support
+ decision-making.
+
+
+
+
+ Checkbox
+
+
+ Use when users can select multiple options independently. Each checkbox represents an
+ on/off decision, making them suitable for filters, preference settings, or multi-select tasks. A group
+ may allow none, some, or all options to be selected.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use for binary, opposing states: switches are ideal when users need to turn a setting{" "}
+ on or off, such as enabling notifications or dark mode. Avoid using switches
+ for choices that are not immediately clear opposites (use radio buttons instead).
+
+
+ Trigger immediate changes: switches should take effect immediately without
+ requiring form submission. Do not pair switches with a submit button or use them for decisions that need
+ confirmation.
+
+
+ Use clear, descriptive labels: labels should clarify the effect of toggling the switch. Use
+ positive, action-oriented phrasing when possible (e.g., "Enable sound").
+
+
+ Stack vertically for better scannability: when multiple switches are used together, stack
+ them vertically to maintain clarity and reduce visual clutter.
+
+
+ Don't overuse switches: too many toggles on one screen can overwhelm users. Group related
+ settings and consider alternatives like grouped checkboxes or forms when appropriate.
+
+
+ ),
+ },
+];
+
+const SwitchOverviewPage = () => (
+
+
+
+
+);
+
+export default SwitchOverviewPage;
diff --git a/apps/website/screens/components/switch/overview/examples/labelPosition.tsx b/apps/website/screens/components/switch/overview/examples/labelPosition.tsx
new file mode 100644
index 0000000000..6b18f68bbc
--- /dev/null
+++ b/apps/website/screens/components/switch/overview/examples/labelPosition.tsx
@@ -0,0 +1,20 @@
+import { DxcSwitch, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSwitch,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/switch/overview/examples/stacking.tsx b/apps/website/screens/components/switch/overview/examples/stacking.tsx
new file mode 100644
index 0000000000..9d479f7630
--- /dev/null
+++ b/apps/website/screens/components/switch/overview/examples/stacking.tsx
@@ -0,0 +1,45 @@
+import { DxcSwitch, DxcInset, DxcFlex, DxcTypography } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+ Vertical
+
+
+
+
+
+
+
+ Horizontal
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSwitch,
+ DxcInset,
+ DxcFlex,
+ DxcTypography,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/switch/overview/images/switch_anatomy.png b/apps/website/screens/components/switch/overview/images/switch_anatomy.png
new file mode 100644
index 0000000000..698fd431bf
Binary files /dev/null and b/apps/website/screens/components/switch/overview/images/switch_anatomy.png differ
diff --git a/apps/website/screens/components/switch/specs/SwitchSpecsPage.tsx b/apps/website/screens/components/switch/specs/SwitchSpecsPage.tsx
deleted file mode 100644
index 8cb4e615b9..0000000000
--- a/apps/website/screens/components/switch/specs/SwitchSpecsPage.tsx
+++ /dev/null
@@ -1,554 +0,0 @@
-import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import specsImage from "./images/switch_specs.png";
-import stackingImage from "./images/switch_stacking.png";
-import statesImage from "./images/switch_states.png";
-import anatomyImage from "./images/switch_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- Five different states are defined in the life cycle of the component: unselected enabled,{" "}
- unselected focus, unselected disabled, selected enabled,{" "}
- selected focus and selected disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
- Thumb
- Track
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
-
- And also apply different values to each side of the component: top, bottom,{" "}
- left and right.
-
-
- ),
- },
- {
- title: "Spacing",
- content: (
- <>
-
-
-
-
Property
-
Element
-
Core token
-
Value
-
-
-
-
-
- padding
-
-
Thumb
-
- spacing-8
-
-
0.5rem / 8px
-
-
-
- margin-left/right*
-
-
Switch
-
- spacing-8
-
-
0.5rem / 8px
-
-
-
- padding
-
-
Track
-
- spacing-12
-
-
0.75rem / 12px
-
-
-
-
- *Depending on the position of the label
-
-
- ),
- },
- ],
- },
-];
-
-const SwitchSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SwitchSpecsPage;
diff --git a/apps/website/screens/components/switch/specs/images/switch_anatomy.png b/apps/website/screens/components/switch/specs/images/switch_anatomy.png
deleted file mode 100644
index bbfef210c9..0000000000
Binary files a/apps/website/screens/components/switch/specs/images/switch_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/switch/specs/images/switch_specs.png b/apps/website/screens/components/switch/specs/images/switch_specs.png
deleted file mode 100644
index 2ce871a165..0000000000
Binary files a/apps/website/screens/components/switch/specs/images/switch_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/switch/specs/images/switch_stacking.png b/apps/website/screens/components/switch/specs/images/switch_stacking.png
deleted file mode 100644
index 492ab08d74..0000000000
Binary files a/apps/website/screens/components/switch/specs/images/switch_stacking.png and /dev/null differ
diff --git a/apps/website/screens/components/switch/specs/images/switch_states.png b/apps/website/screens/components/switch/specs/images/switch_states.png
deleted file mode 100644
index 1bec13c5c3..0000000000
Binary files a/apps/website/screens/components/switch/specs/images/switch_states.png and /dev/null differ
diff --git a/apps/website/screens/components/switch/usage/SwitchUsagePage.tsx b/apps/website/screens/components/switch/usage/SwitchUsagePage.tsx
deleted file mode 100644
index c264647936..0000000000
--- a/apps/website/screens/components/switch/usage/SwitchUsagePage.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import labelPosition from "./examples/labelPosition";
-import stacking from "./examples/stacking";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- Switch toggles should be used in place of radio buttons whenever the options are opposites of each other (i.e.
- yes/no, on/off, etc).
-
- Whenever is possible stack the switch component vertically.
-
- Switches have immediate effect over the application, changing preferences and configuration settings.
- Don't use a submit button.
-
-
- ),
- },
- {
- title: "Stacking",
- content: (
- <>
-
-
- In some application the use of several switches based on the requirements could appear, that why we provide
- some indications in the case that the user needs to use stacked switches.
-
-
- ),
- },
- {
- title: "Label position",
- content: (
- <>
-
-
-
-
-
Position
- Description
-
-
-
-
-
- Label before
-
-
Labels before the switch indicate what the switch is for
-
-
-
- Label after
-
-
Labels after the switch indicate the state of the switch
-
-
-
-
- ),
- },
-];
-
-const SwitchUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default SwitchUsagePage;
diff --git a/apps/website/screens/components/switch/usage/examples/labelPosition.ts b/apps/website/screens/components/switch/usage/examples/labelPosition.ts
deleted file mode 100644
index 531405b760..0000000000
--- a/apps/website/screens/components/switch/usage/examples/labelPosition.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { DxcSwitch, DxcInset, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSwitch,
- DxcInset,
- DxcFlex,
- DxcHeading,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/switch/usage/examples/stacking.ts b/apps/website/screens/components/switch/usage/examples/stacking.ts
deleted file mode 100644
index 20ef982e66..0000000000
--- a/apps/website/screens/components/switch/usage/examples/stacking.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { DxcSwitch, DxcInset, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSwitch,
- DxcInset,
- DxcFlex,
- DxcHeading,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/table/TablePageLayout.tsx b/apps/website/screens/components/table/TablePageLayout.tsx
index fa5013f25b..c6cddad05b 100644
--- a/apps/website/screens/components/table/TablePageLayout.tsx
+++ b/apps/website/screens/components/table/TablePageLayout.tsx
@@ -6,23 +6,19 @@ 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 (
-
+
-
+
- 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.
+ Tables allow users to show a big amount of information in a easy and simplified way.
-
+
{children}
diff --git a/apps/website/screens/components/table/code/TableCodePage.tsx b/apps/website/screens/components/table/code/TableCodePage.tsx
index 014ea29a03..b27bbca9f2 100644
--- a/apps/website/screens/components/table/code/TableCodePage.tsx
+++ b/apps/website/screens/components/table/code/TableCodePage.tsx
@@ -1,9 +1,8 @@
import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
-import TableCode, { ExtendedTableCode } from "@/common/TableCode";
+import { TableCode, ExtendedTableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
import basic from "./examples/basicUsage";
import reduced from "./examples/reduced";
@@ -40,7 +39,7 @@ const sections = [
+ 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.
+
- 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.
-
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTable,
+ DxcInset,
+};
+
+export default { code, scope };
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..8adb69e76e
--- /dev/null
+++ b/apps/website/screens/components/table/overview/TableOverviewPage.tsx
@@ -0,0 +1,167 @@
+import { DxcParagraph, DxcFlex, DxcBulletedList } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import anatomy from "./images/table_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The table component provides a lightweight and accessible way to{" "}
+ display structured data in rows and columns. It is ideal for presenting small to medium-sized
+ datasets that don't require complex interactions such as in-line editing or row expansion. The component
+ supports different table densities and content types, ensuring clarity and visual consistency across use cases
+ like summary lists, comparison views, or static reports. Unlike the datagrid or resultsate table component, our
+ table is designed for non-complex scenarios where the priority is clear data display over
+ advanced functionality.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Header row: defines the label for each column and helps users understand the structure and
+ meaning of the data presented. It can also include sorting controls when applicable.
+
+
+ Cell: displays the individual content within the table.
+
+
+ Action cell: contains interactive elements such as buttons or icons that allow users to
+ perform specific actions related to that row.
+
+
+
+ ),
+ },
+ {
+ title: "Using tables",
+ content: (
+
+ The table component is designed for clear and structured data presentation, with minimal interactivity and a
+ strong focus on readability. Below are key aspects to keep in mind when using this component:
+
+ ),
+ subSections: [
+ {
+ title: "Layout and content",
+ content: (
+ <>
+
+ Tables are best suited for displaying moderate amounts of data with consistent structure.
+ Each column should represent a single data type or category, while each row corresponds to a data entry.
+ Keep content concise to avoid horizontal scrolling and ensure legibility.
+
+
+ ),
+ },
+ {
+ title: "Responsiveness",
+ content: (
+
+ While the table is not responsive by default, content can be adjusted to fit smaller
+ screens using wrapping text, truncation, or custom scroll containers. If your use case involves extensive
+ data manipulation or mobile-first design, consider using the datagrid instead.
+
+ ),
+ },
+ {
+ title: "Text alignment and formatting",
+ content: (
+
+ Align text consistently within columns based on content type: left-align text, right-align numbers, and
+ center-align icons or action buttons.
+
+ ),
+ },
+ {
+ title: "Styling and density",
+ content: (
+
+ The component supports different visual densities to adapt to the use case. Use higher
+ density for data-heavy views where space is limited, and lower density for overviews or summary pages where
+ clarity takes priority.
+
+ ),
+ },
+ {
+ title: "Table vs ResultsetTable",
+ content: (
+ <>
+
+ While both components present structured data in tabular format, their purposes and features are
+ different:
+
+
+
+ Table is a lightweight component intended for static data. It doesn't
+ include interaction features such as sorting or pagination. It's ideal for small datasets or summary
+ views where simplicity and clarity are the main goals.
+
+
+ Resultset table, on the other hand, is a more advanced component built for dynamic
+ datasets. It includes support for pagination, sorting, and density control. It's best suited for result
+ views where users need to browse through large volumes of data efficiently, such as search results or
+ query outputs.
+
+
+
+ Choose between them based on your needs: use the table for simple data display, and the resultset table
+ for user-driven exploration of data.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use the table component for structured, static data that doesn't require user interaction,
+ such as summaries, configuration overviews, or comparison tables.
+
+
+ Keep content concise and scannable: avoid long text blocks inside cells to preserve
+ readability and prevent layout issues.
+
+
+ Maintain a clear visual hierarchy by using appropriate text styles for headers, totals, and
+ other relevant indicators.
+
+
+ Ensure alignment consistency: text should be left-aligned, numbers right-aligned, and icons
+ or controls centered, depending on their function.
+
+
+ Use a maximum of two or three actions per cell: avoid overcrowding cells with multiple
+ buttons or icons to maintain clarity and avoid interaction confusion.
+
+
+ Use density thoughtfully: apply higher density when screen real estate is limited, and lower
+ density when space allows for better readability.
+
+
+ Avoid using this component for large, interactive datasets. For those scenarios, opt for the
+ resultset table or datagrid instead.
+
+
+ ),
+ },
+];
+
+const TableOverviewPage = () => (
+
+
+
+
+);
+
+export default TableOverviewPage;
diff --git a/apps/website/screens/components/table/overview/images/table_anatomy.png b/apps/website/screens/components/table/overview/images/table_anatomy.png
new file mode 100644
index 0000000000..84b5597c25
Binary files /dev/null and b/apps/website/screens/components/table/overview/images/table_anatomy.png differ
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: (
-
-
-
- An array of objects representing the tabs. Each of them has the following properties:
-
-
- label: Tab label.
-
-
- icon:{" "}
-
- Material Symbol
- {" "}
- name or SVG element used as the icon that will be displayed in the tab. When using Material Symbols,
- replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the
- symbol name with "filled_".
-
-
- isDisabled: Whether the tab is disabled or not. If the component is uncontrolled and the
- selected tab is disabled, the first non-disabled tab from the array will be selected.
-
-
- notificationNumber: It can have boolean type or number type. If true, an empty badge will
- appear. If false or if the tab is disabled, no badge will appear. If a number is specified, the
- component will display a badge with the value as its label. Take into account that if that number is
- greater than 99, it will appear as +99 in the badge.
-
-
-
-
-
-
-
-
-
- {/* TODO: Swap experimental for required once old logic is removed */}
-
+
+
children
@@ -122,41 +44,9 @@ const sections = [
Whether the icon should appear above or to the left of the label.
- 'top'
+ 'left'
-
-
-
-
- onTabClick
-
-
-
- {"(index: number) => void"}
-
-
- This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as
- a parameter.
-
-
-
-
-
-
-
-
- onTabHover
-
-
-
- {"(index: number) => void"}
-
-
- This function will be called when the user hovers a tab. The index of the hovered tab will be passed as a
- parameter.
-
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be displayed in the tab. When using Material Symbols,
- replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
- symbol name with "filled_".
-
-
-
-
-
-
onClick
-
- {"() => void"}
-
-
This function will be called when the user clicks on this tab.
-
-
-
-
-
onHover
-
- {"() => void"}
-
-
This function will be called when the user hovers this tab.
-
-
-
-
-
notificationNumber
-
- boolean | number
-
-
- If true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a
- number is specified, the component will display a badge with the value as its label. Take into account
- that if that number is greater than 99, it will appear as +99 in the badge.
-
-
- false
-
-
-
-
-
-
- children
-
-
-
- React.ReactNode
-
-
Contains the component to be rendered when this tab is active.
-
-
-
-
-
+
+
+
+
+
Name
+
Type
+
Description
+
Default
+
+
+
+
+
active
+
+ boolean
+
+
Whether the tab is active or not.
+
+ false
+
+
+
+
+
+
+ children
+
+
+
+ React.ReactNode
+
+
Contains the component to be rendered when this tab is active.
+
-
+
+
+
defaultActive
+
+ boolean
+
+
Whether the tab is active or not by default, but mantaining the uncontrolled behaviour.
+
+ Material Symbol
+ {" "}
+ name or SVG element as the icon that will be displayed in the tab. When using Material Symbols,
+ replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
+ symbol name with "filled_". The icon or the label, either of which must have
+ a valid value.
+
+
-
+
+
+
+
+ label
+
+
+
+ string
+
+
Tab label text. The icon or the label, either of which must have a valid value.
+
-
+
+
+
notificationNumber
+
+ boolean | number
+
+
+ If true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a
+ number is specified, the component will display a badge with the value as its label. Take into
+ account that if that number is greater than 99, it will appear as +99 in the
+ badge.
+
+
+ false
+
+
+
+
onClick
+
+ {"() => void"}
+
+
+ This function will be called when the user clicks on this tab. This feature is mostly recommended
+ for compatibility with third-party routing APIs.
+
+
-
+
+
+
onHover
+
+ {"() => void"}
+
+
This function will be called when the user hovers this tab.
+
-
+
+
+
tabId
+
+ string
+
+
Value used to identify the tab internally.
+
-
+
+
+
+
+ title
+
+
+
+ string
+
+
Tooltip text for the tab.
+
-
+
+
+
+
+ Each tab must have either tabId or label defined for the component to
+ function correctly.
+
+ ),
+ }}
+ mode="banner"
+ closable={false}
+ />
+
),
},
],
@@ -337,34 +255,13 @@ const sections = [
},
],
},
- {
- title: "Examples (Legacy)",
- subSections: [
- {
- title: "Controlled",
- content: ,
- },
- {
- title: "Uncontrolled",
- content: ,
- },
- {
- title: "Icons and notifications",
- content: ,
- },
- ],
- },
];
-const TabsUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const TabsCodePage = () => (
+
+
+
+
+);
-export default TabsUsagePage;
+export default TabsCodePage;
diff --git a/apps/website/screens/components/tabs/code/examples-new/controlled.ts b/apps/website/screens/components/tabs/code/examples-new/controlled.ts
deleted file mode 100644
index 2e68fc8f0d..0000000000
--- a/apps/website/screens/components/tabs/code/examples-new/controlled.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [selectedTab, setSelectedTab] = useState("Mail");
-
- return (
-
-
- setSelectedTab("Mail")}>
- <>
-
- setSelectedTab("Calendar")}>
- <>
-
- setSelectedTab("Contacts")}>
- <>
-
-
-
- );
-}`;
-
-const scope = {
- DxcTabs,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/tabs/code/examples-new/icons.ts b/apps/website/screens/components/tabs/code/examples-new/icons.ts
deleted file mode 100644
index 54a71c2294..0000000000
--- a/apps/website/screens/components/tabs/code/examples-new/icons.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const mobileIcon = (
-
- );
-
- return (
-
-
-
- <>
-
-
- <>
-
-
- <>
-
-
-
- );
-}`;
-
-const scope = {
- DxcTabs,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts b/apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts
deleted file mode 100644
index 4f28d55e50..0000000000
--- a/apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- );
-}`;
-
-const scope = {
- DxcTabs,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/tabs/code/examples-old/controlled.ts b/apps/website/screens/components/tabs/code/examples-old/controlled.ts
deleted file mode 100644
index 41b02cd862..0000000000
--- a/apps/website/screens/components/tabs/code/examples-old/controlled.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [activeTab, setActiveTab] = useState(0);
- const onTabClick = (i) => {
- setActiveTab(i);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcTabs,
- useState,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/tabs/code/examples-old/icons.ts b/apps/website/screens/components/tabs/code/examples-old/icons.ts
deleted file mode 100644
index 19551e5130..0000000000
--- a/apps/website/screens/components/tabs/code/examples-old/icons.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [activeTab, setActiveTab] = useState(0);
- const onTabClick = (i) => {
- setActiveTab(i);
- };
-
-
- const mobileIcon = (
-
- );
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcTabs,
- useState,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/tabs/code/examples-old/uncontrolled.ts b/apps/website/screens/components/tabs/code/examples-old/uncontrolled.ts
deleted file mode 100644
index 7eec8c35d4..0000000000
--- a/apps/website/screens/components/tabs/code/examples-old/uncontrolled.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcTabs,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/tabs/code/examples/controlled.tsx b/apps/website/screens/components/tabs/code/examples/controlled.tsx
new file mode 100644
index 0000000000..6cae0bd8c4
--- /dev/null
+++ b/apps/website/screens/components/tabs/code/examples/controlled.tsx
@@ -0,0 +1,30 @@
+import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [selectedTab, setSelectedTab] = useState("Mail");
+
+ return (
+
+
+ setSelectedTab("Mail")}>
+ <>
+
+ setSelectedTab("Calendar")}>
+ <>
+
+ setSelectedTab("Contacts")}>
+ <>
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTabs,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/tabs/code/examples/icons.tsx b/apps/website/screens/components/tabs/code/examples/icons.tsx
new file mode 100644
index 0000000000..285a6f7b12
--- /dev/null
+++ b/apps/website/screens/components/tabs/code/examples/icons.tsx
@@ -0,0 +1,45 @@
+import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const mobileIcon = (
+
+ );
+
+ return (
+
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTabs,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/tabs/code/examples/uncontrolled.tsx b/apps/website/screens/components/tabs/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..4bd0367114
--- /dev/null
+++ b/apps/website/screens/components/tabs/code/examples/uncontrolled.tsx
@@ -0,0 +1,26 @@
+import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTabs,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/tabs/overview/TabsOverviewPage.tsx b/apps/website/screens/components/tabs/overview/TabsOverviewPage.tsx
new file mode 100644
index 0000000000..8603dc5575
--- /dev/null
+++ b/apps/website/screens/components/tabs/overview/TabsOverviewPage.tsx
@@ -0,0 +1,203 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex, DxcLink, DxcInset } from "@dxc-technology/halstack-react";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import defaultUsage from "./examples/default";
+import scrollableUsage from "./examples/scrollable";
+import Example from "@/common/example/Example";
+import anatomy from "./images/tabs_anatomy.png";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Tabs are interactive UI components that allow users to navigate between different sections of content within the
+ same page. They help organize related information efficiently, improving usability by reducing clutter and
+ enabling seamless content switching. Tabs are commonly used in dashboards, settings panels, and content-heavy
+ applications to enhance user experience.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: the wrapper that holds all the tabs together in a row.
+
+
+ Active tab indicator: a colored line that visually marks the selected tab.
+
+
+ Divider: a subtle line separating tabs to improve readability.
+
+
+ Tab item: the clickable area that triggers a content change when selected.
+
+
+ Label(Optional if there's an icon): The text that identifies the tab's purpose or
+ section.
+
+
+ Icon:(Optional if there's a label): A small graphical element that enhances
+ visual recognition of the tab.
+
+
+
+ ),
+ },
+ {
+ title: "Using tabs",
+ content: (
+
+ Tabs are an effective way to organize content within a user interface by keeping related sections grouped
+ together while minimizing clutter. They improve usability by allowing users to quickly switch between different
+ views without navigating away from the page. When designed and implemented correctly, tabs enhance the user
+ experience by making content more accessible and easier to interact with.
+
+ ),
+ subSections: [
+ {
+ title: "Placement and alignment",
+ subSections: [
+ {
+ title: "Placement",
+ content: (
+ <>
+
+ There are two types of tabs: Default and Container. Both types share
+ the same hierarchy and should never be nested within each other. Tabs are typically positioned above
+ the content, under the header or general navigation.
+
+
+
+ Default tabs: used for main navigation, placed above the header, spanning 100% of
+ the screen width.
+
+
+
+
+
+ Container tabs: Used for panel navigation, placed at the top of the panel, using
+ the full available width. Scrollable tabs are allowed when space is limited.
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Alignment",
+ content: (
+
+ Tabs are always displayed horizontally in a single row. They can be left-aligned or{" "}
+ centered, depending on the content and context.
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Tabs vs. Nav tabs",
+ content: (
+ <>
+
+
+ Both tabs and{" "}
+
+ nav tabs
+ {" "}
+ are used for navigation, but they serve different purposes and function in distinct ways.
+
+
+ ),
+ subSections: [
+ {
+ title: "Tabs",
+ content: (
+
+
+ Used to switch between different content sections within the same page or container.
+
+
+ Typically do not trigger a full page reload but update content dynamically.
+
+
+ ),
+ },
+ {
+ title: "Nav tabs",
+ content: (
+ <>
+
+
+ Act as primary navigation elements, often leading to different pages or sections of
+ an application.
+
+
+ Clicking on a nav tab may trigger a full page reload or route change.
+
+
+
+ Both components improve usability, but tabs are best for grouping related content
+ within a page, while nav tabs help users move across different sections or pages of
+ an application.
+
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Maintain logical order: arrange tabs in a meaningful sequence based on user needs and place
+ frequently used or primary tabs first.
+
+
+ Keep tab labels short & clear: use concise, descriptive labels (1-2 words) that clearly
+ indicate the content. Avoid using generic or ambiguous labels like "Info" or "More." Instead, choose specific
+ terms that reflect the content, such as "Account Details" for user-related settings or "Billing" for payment
+ information and prioritize readability — avoid using all caps unless necessary.
+
+
+ Managing the number of tabs effectively: while not a strict rule, keeping the number of tabs
+ manageable (ideally 5-7) helps maintain clarity and usability. If additional tabs are necessary, assess the
+ information architecture carefully and consider grouping related items.
+
+
+ Use icons thoughtfully: ensure the icon is intuitive and clearly represents the content of
+ the tab. While they are generally used alongside labels, they can also be used independently. In such cases,
+ it is crucial to choose highly recognizable icons that clearly convey meaning without additional text. When
+ used together, the icon and label must work harmoniously to reinforce their meaning and avoid any conflicting
+ interpretations. Avoid using overly decorative or generic icons that do not provide clear meaning, such as an
+ abstract shape with no context.
+
+
+ Keep design consistent: while the component is flexible enough to support a mix of label-only
+ and label-with-icon tabs, it's best to choose one style per set. Mixing both can reduce scannability and
+ create visual imbalance, impacting the overall usability.
+
+
+ ),
+ },
+];
+
+const TabsOverviewPage = () => (
+
+
+
+
+);
+
+export default TabsOverviewPage;
diff --git a/apps/website/screens/components/tabs/overview/examples/default.tsx b/apps/website/screens/components/tabs/overview/examples/default.tsx
new file mode 100644
index 0000000000..2e0aa3c5cb
--- /dev/null
+++ b/apps/website/screens/components/tabs/overview/examples/default.tsx
@@ -0,0 +1,29 @@
+import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTabs,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/tabs/overview/examples/scrollable.tsx b/apps/website/screens/components/tabs/overview/examples/scrollable.tsx
new file mode 100644
index 0000000000..d28b93bc91
--- /dev/null
+++ b/apps/website/screens/components/tabs/overview/examples/scrollable.tsx
@@ -0,0 +1,35 @@
+import { DxcContainer, DxcTabs, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+ <>
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcContainer,
+ DxcTabs,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/tabs/overview/images/tabs_anatomy.png b/apps/website/screens/components/tabs/overview/images/tabs_anatomy.png
new file mode 100644
index 0000000000..05863f27ef
Binary files /dev/null and b/apps/website/screens/components/tabs/overview/images/tabs_anatomy.png differ
diff --git a/apps/website/screens/components/tabs/specs/TabsSpecsPage.tsx b/apps/website/screens/components/tabs/specs/TabsSpecsPage.tsx
deleted file mode 100644
index a767c5650f..0000000000
--- a/apps/website/screens/components/tabs/specs/TabsSpecsPage.tsx
+++ /dev/null
@@ -1,454 +0,0 @@
-import { DxcTable, DxcParagraph, DxcFlex, DxcLink, DxcBulletedList } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import specsImage from "./images/tabs_specs.png";
-import specsFixed from "./images/tabs_fixed_specs.png";
-import specsFixed72 from "./images/tabs_fixed_specs72.png";
-import specsScrollable from "./images/tabs_scrollable.png";
-import specsNotification from "./images/tabs_notification.png";
-import statesTabs from "./images/tabs_states_specs.png";
-import specsAnatomy from "./images/tabs_anatomy.png";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-
-const sections = [
- {
- title: "Min / Max width",
- content: (
-
-
-
- ),
- },
- {
- title: "Fixed tabs",
- content: (
- <>
-
-
-
-
-
-
-
- ),
- },
- {
- title: "Scrollable tabs",
- content: (
- <>
-
- Tabs are horizontally scrollable when they are wider that screen, by using the scroll indicator.
-
-
-
-
-
- ),
- },
- {
- title: "Notification tabs",
- content: (
- <>
-
- Notification badges are always positioned aligned with label or icon in 48px tab container and at top right of
- the 72px tab container.
-
-
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- Tabs can get different states based on user interaction. These states are: inactive,{" "}
- enabled, hover, pressed, focus and{" "}
- disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
- Active icon (Optional if there's a label)
- Active text label (Optional if there's an icon)
- Active tab indicator
- Inactive icon (Optional if there's a label)
- Inactive text label (Optional if there's an icon)
- Tab item
- Divider
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- content: (
- <>
-
- Each tab must have a unique title that clearly describes tab panel content. This is particularly helpful for
- users of assistive technologies so they have the necessary information to efficiently navigate the content.
-
-
- Content authors need to ensure the content that is added to the tab panel is accessible. For example, if you
- add an image to the panel you need to include alternative text to pass accessibility testing.
-
-
-
- W3C WAI-ARIA Tab Design Pattern
- {" "}
- covers the usage of ARIA names.
-
-
- ),
- subSections: [
- {
- title: "Keyboard interactions",
- content: (
-
-
-
-
key
- Description
-
-
-
-
-
- Enter or Space
-
-
Activates the tab if it was not activated automatically on focus.
-
-
-
- Tab
-
-
- When focus moves into the tab list, places focus on the active tab element. When the tab list contains
- the focus, moves focus to the next element in the page tab sequence outside the tablist, which is
- typically either the first focusable element inside the tab panel or the tab panel itself.
-
-
-
-
- Left-arrow
-
-
- Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab.
- Optionally, activates the newly focused tab.
-
-
-
-
- Right-arrow
-
-
- Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab.
- Optionally, activates the newly focused tab.
-
-
-
-
- ),
- },
- ],
- },
-];
-
-const TabsSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TabsSpecsPage;
diff --git a/apps/website/screens/components/tabs/specs/images/tabs_anatomy.png b/apps/website/screens/components/tabs/specs/images/tabs_anatomy.png
deleted file mode 100644
index 53093010e5..0000000000
Binary files a/apps/website/screens/components/tabs/specs/images/tabs_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/specs/images/tabs_fixed_specs.png b/apps/website/screens/components/tabs/specs/images/tabs_fixed_specs.png
deleted file mode 100644
index 5584fbf112..0000000000
Binary files a/apps/website/screens/components/tabs/specs/images/tabs_fixed_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/specs/images/tabs_fixed_specs72.png b/apps/website/screens/components/tabs/specs/images/tabs_fixed_specs72.png
deleted file mode 100644
index d9ca886288..0000000000
Binary files a/apps/website/screens/components/tabs/specs/images/tabs_fixed_specs72.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/specs/images/tabs_notification.png b/apps/website/screens/components/tabs/specs/images/tabs_notification.png
deleted file mode 100644
index cf1ba14bd5..0000000000
Binary files a/apps/website/screens/components/tabs/specs/images/tabs_notification.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/specs/images/tabs_scrollable.png b/apps/website/screens/components/tabs/specs/images/tabs_scrollable.png
deleted file mode 100644
index f2bd1928d6..0000000000
Binary files a/apps/website/screens/components/tabs/specs/images/tabs_scrollable.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/specs/images/tabs_specs.png b/apps/website/screens/components/tabs/specs/images/tabs_specs.png
deleted file mode 100644
index da7b57a1c7..0000000000
Binary files a/apps/website/screens/components/tabs/specs/images/tabs_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/specs/images/tabs_states_specs.png b/apps/website/screens/components/tabs/specs/images/tabs_states_specs.png
deleted file mode 100644
index f9fe8db876..0000000000
Binary files a/apps/website/screens/components/tabs/specs/images/tabs_states_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/TabsUsagePage.tsx b/apps/website/screens/components/tabs/usage/TabsUsagePage.tsx
deleted file mode 100644
index 233ab3a668..0000000000
--- a/apps/website/screens/components/tabs/usage/TabsUsagePage.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import defaultUsage from "./examples/default";
-import scrollableUsage from "./examples/scrollable";
-import contentUsageTabImage from "./images/tabs_content.png";
-import typographyUsageTabImage from "./images/tabs_typography.png";
-import tabsPlacement from "./images/tabs_placement.png";
-import scrollablePanelNavigation from "./images/tabs_scrollable_panel_navigation.png";
-import mobileNavigation from "./images/tabs_mobile_navigation.png";
-import panelNavigation from "./images/tabs_panel_navigation.png";
-import tabsAlignment from "./images/tabs_alignment.png";
-import tabsPanelBehavior from "./images/tabs_panel_behavior.png";
-import tabsScrollablePanelBehavior from "./images/tabs_scrollable_panel_behavior.png";
-import Example from "@/common/example/Example";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- Tabs organize and allow navigation between groups of content that are related and at the same level of
- hierarchy.
-
-
- ),
- },
- {
- title: "Do's",
- content: (
-
-
- Use tabs for navigation when dividing content into different sections.
-
- The content should have the same level of hierarchy.
-
- Tabs can contain icons and text. Text labels should be short and have a clear relation to content.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Do not use tabs to move through sequential content that needs to be read in a particular order.
-
-
- Avoid using tabs for comparing content across multiple tabs, such as different sizes of the same item.
-
-
- ),
- },
- {
- title: "Placement and alignment",
- subSections: [
- {
- title: "Placement",
- content: (
- <>
-
- There are two variations of tabs, default and container. They are hierarchically the same and should never
- be nested within each other. Tabs are usually placed above the content under the header o general
- navigation.
-
-
-
- Left: A standalone tab that can also be nested within components.
-
-
- Right: Emphasized tab always paired with an attached background container.
-
-
- }
- >
-
-
-
- ),
- subSections: [
- {
- title: "Desktop",
- content: (
- <>
-
- Default
-
-
- When used for main navigation place tabs above the header using 100% of the width of the screen.
-
-
-
-
- Container
-
-
- When used for panel navigation place tabs in the top of the panel using all available width.
- Scrollable tabs are allowed when there is not enough space available.
-
-
-
-
-
- ),
- },
- {
- title: "Mobile",
- content: (
- <>
-
- Main navigation
-
-
- When used for main navigation place tabs above the header using 100% of the width of the screen.
-
-
-
- Left: Main navigation tabs are place above the content.
-
-
- Right: Don't stack more than 4 fixed tabs.
-
-
- }
- >
-
-
-
- Panel navigation
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Alignment",
- content: (
- <>
-
- Tabs are always displayed horizontally in a single row. They can be left aligned or entered depending on
- the content and context.
-
-
-
- Left: Tabs are always displayed in a single row.
-
-
- }
- >
-
-
-
- ),
- },
- ],
- },
- {
- title: "Content",
- content: (
- <>
-
-
- Left: Text labels should clearly and succinctly describe the content of the tab they
- represent.
-
-
- Center: Tab content should contain a cohesive set of items that share a common
- characteristics.
-
-
- Right: Tab labels should appear in a single row. They can use a second line if needed,
- with truncated text.
-
-
- }
- >
-
-
-
- ),
- subSections: [
- {
- title: "Typography",
- content: (
- <>
-
- Avoid to use all caps for tab labels. ALL CAPS is rarely a good idea because it's harder to read.
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Behavior and interaction",
- subSections: [
- {
- title: "Main navigation",
- content: (
-
- Users can navigate between tabs by tapping a tab, or by performing a swipe gesture over content in mobile
- devices.
-
- ),
- },
- {
- title: "Panel navigation",
- content: (
- <>
-
- Interacting with the tabs makes the content scrolls to the point that is associated with that specific
- tab, while the tabs keep fixed at the top of the container.
-
-
-
-
-
-
- The use of scrollable tabs in panel navigation could cause swipe interferences with OS navigation.
-
- Do not use main navigation if they only affect an specific panel.
-
- }
- >
-
-
-
- ),
- },
- ],
- },
-];
-
-const TabsUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TabsUsagePage;
diff --git a/apps/website/screens/components/tabs/usage/examples/default.ts b/apps/website/screens/components/tabs/usage/examples/default.ts
deleted file mode 100644
index ed680e1772..0000000000
--- a/apps/website/screens/components/tabs/usage/examples/default.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
-
- );
-}`;
-
-const scope = {
- DxcTabs,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/tabs/usage/examples/scrollable.ts b/apps/website/screens/components/tabs/usage/examples/scrollable.ts
deleted file mode 100644
index 1626c8439b..0000000000
--- a/apps/website/screens/components/tabs/usage/examples/scrollable.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcTabs, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
- <>
-
-
- <>
-
-
- <>
-
-
- <>
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcTabs,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_alignment.png b/apps/website/screens/components/tabs/usage/images/tabs_alignment.png
deleted file mode 100644
index 01bb4def5a..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_alignment.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_content.png b/apps/website/screens/components/tabs/usage/images/tabs_content.png
deleted file mode 100644
index 3367469433..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_content.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_default_placement.png b/apps/website/screens/components/tabs/usage/images/tabs_default_placement.png
deleted file mode 100644
index b928c994df..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_default_placement.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_mobile_navigation.png b/apps/website/screens/components/tabs/usage/images/tabs_mobile_navigation.png
deleted file mode 100644
index 87af35f31a..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_mobile_navigation.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_panel_behavior.png b/apps/website/screens/components/tabs/usage/images/tabs_panel_behavior.png
deleted file mode 100644
index 5edcec332c..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_panel_behavior.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_panel_navigation.png b/apps/website/screens/components/tabs/usage/images/tabs_panel_navigation.png
deleted file mode 100644
index 654679a513..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_panel_navigation.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_placement.png b/apps/website/screens/components/tabs/usage/images/tabs_placement.png
deleted file mode 100644
index 2a10dbb080..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_placement.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_scrollable_panel_behavior.png b/apps/website/screens/components/tabs/usage/images/tabs_scrollable_panel_behavior.png
deleted file mode 100644
index db85f6aed0..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_scrollable_panel_behavior.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_scrollable_panel_navigation.png b/apps/website/screens/components/tabs/usage/images/tabs_scrollable_panel_navigation.png
deleted file mode 100644
index 742470cc34..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_scrollable_panel_navigation.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_scrollable_placement.png b/apps/website/screens/components/tabs/usage/images/tabs_scrollable_placement.png
deleted file mode 100644
index bc34d4a7e6..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_scrollable_placement.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_typography.png b/apps/website/screens/components/tabs/usage/images/tabs_typography.png
deleted file mode 100644
index 2e7ae0e62f..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_typography.png and /dev/null differ
diff --git a/apps/website/screens/components/tabs/usage/images/tabs_usage.png b/apps/website/screens/components/tabs/usage/images/tabs_usage.png
deleted file mode 100644
index c2c8b3a2d7..0000000000
Binary files a/apps/website/screens/components/tabs/usage/images/tabs_usage.png and /dev/null differ
diff --git a/apps/website/screens/components/tag/TagPageLayout.tsx b/apps/website/screens/components/tag/TagPageLayout.tsx
deleted file mode 100644
index 5149f68540..0000000000
--- a/apps/website/screens/components/tag/TagPageLayout.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { DxcParagraph, DxcFlex, DxcAlert, DxcLink } from "@dxc-technology/halstack-react";
-import PageHeading from "@/common/PageHeading";
-import TabsPageHeading from "@/common/TabsPageLayout";
-import ComponentHeading from "@/common/ComponentHeading";
-import Link from "next/link";
-import { ReactNode } from "react";
-
-const TagPageHeading = ({ children }: { children: ReactNode }) => {
- const tabs = [
- { label: "Code", path: "/components/tag" },
- { label: "Usage", path: "/components/tag/usage" },
- { label: "Specifications", path: "/components/tag/specifications" },
- ];
-
- return (
-
-
-
-
-
- The Tag represents resources and global terms to identify and linked with a text section to provide to the
- user more context and information regarding a topic. It usually appears in the top or bottom of the section
- and multiple tags can be concatenated to generate a series of resources displayed with a visual hierarchy
- that calls the user's attention.
-
-
- This component will be removed from Halstack Design System in the next major release. Please start
- considering alternatives such as the{" "}
-
- Badge
- {" "}
- , the{" "}
-
- Button
- {" "}
- or the{" "}
-
- Chip
- {" "}
- components.
-
- ),
- }}
- closable={false}
- />
-
-
-
- {children}
-
- );
-};
-
-export default TagPageHeading;
diff --git a/apps/website/screens/components/tag/code/TagCodePage.tsx b/apps/website/screens/components/tag/code/TagCodePage.tsx
deleted file mode 100644
index b1b73790f2..0000000000
--- a/apps/website/screens/components/tag/code/TagCodePage.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import basicUsage from "./examples/basicUsage";
-import icons from "./examples/icons";
-import TableCode from "@/common/TableCode";
-
-const sections = [
- {
- title: "Props",
- content: (
-
-
-
-
Name
-
Type
-
Description
-
Default
-
-
-
-
-
label
-
- string
-
-
Text to be placed next inside the tag.
-
-
-
-
-
labelPosition
-
- 'before' | 'after'
-
-
Whether the label should appear after or before the icon.
-
- Material Symbol
- {" "}
- name or SVG element as the icon that will be placed next to the label. When using Material Symbols,
- replace spaces with underscores. By default they are outlined, if you want it to be filled prefix the
- symbol name with "filled_".
-
-
-
-
-
-
iconBgColor
-
- string
-
-
Background color of the icon section of the tag.
-
- '#5f249f'
-
-
-
-
linkHref
-
- string
-
-
- If defined, the tag will be displayed as an anchor, using this prop as its href. The
- component will also show some visual feedback when it is hovered.
-
-
-
-
-
-
newWindow
-
- boolean
-
-
If true, the page will be opened in a new browser tab.
-
- false
-
-
-
-
onClick
-
- {"() => void"}
-
-
- If defined, the tag will be displayed as a button. This function will be called when the user clicks the
- tag. The component will show some visual feedback when hovered.
-
- 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.
-
-
-
- ),
- },
- ],
- },
-];
-
-const TagSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TagSpecsPage;
diff --git a/apps/website/screens/components/tag/specs/images/tag_anatomy.png b/apps/website/screens/components/tag/specs/images/tag_anatomy.png
deleted file mode 100644
index 6030b07caa..0000000000
Binary files a/apps/website/screens/components/tag/specs/images/tag_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/tag/specs/images/tag_modes.png b/apps/website/screens/components/tag/specs/images/tag_modes.png
deleted file mode 100644
index 317744045f..0000000000
Binary files a/apps/website/screens/components/tag/specs/images/tag_modes.png and /dev/null differ
diff --git a/apps/website/screens/components/tag/specs/images/tag_specs.png b/apps/website/screens/components/tag/specs/images/tag_specs.png
deleted file mode 100644
index 31037d9210..0000000000
Binary files a/apps/website/screens/components/tag/specs/images/tag_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/tag/specs/images/tag_states.png b/apps/website/screens/components/tag/specs/images/tag_states.png
deleted file mode 100644
index 9fcfefc0a6..0000000000
Binary files a/apps/website/screens/components/tag/specs/images/tag_states.png and /dev/null differ
diff --git a/apps/website/screens/components/tag/usage/TagUsagePage.tsx b/apps/website/screens/components/tag/usage/TagUsagePage.tsx
deleted file mode 100644
index 0bc02cd6a7..0000000000
--- a/apps/website/screens/components/tag/usage/TagUsagePage.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Example from "@/common/example/Example";
-import iconUsage from "./examples/iconUsage";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- Use the tag component to highlight properties of a section that want to remark.
-
- Make consistent use of the component accross the application.
- Be responsible of the use of background color and icons.
-
- If there are multiple tags, the space between them should be at least 16px.
-
-
- ),
- },
- {
- title: "Icon usage",
- content: (
- <>
-
-
- The tag can be displayed with icon and label or only icon.
- The icon can be placed before or after.
-
- The icon background color can be defined with the iconBgColor component property.
-
-
-
- ),
- },
-];
-
-const TagUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TagUsagePage;
diff --git a/apps/website/screens/components/tag/usage/examples/iconUsage.ts b/apps/website/screens/components/tag/usage/examples/iconUsage.ts
deleted file mode 100644
index d123fb3b3a..0000000000
--- a/apps/website/screens/components/tag/usage/examples/iconUsage.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DxcTag, DxcInset, DxcFlex, DxcHeading } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const icon = (
-
- );
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcTag,
- DxcInset,
- DxcFlex,
- DxcHeading,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/text-input/TextInputPageLayout.tsx b/apps/website/screens/components/text-input/TextInputPageLayout.tsx
index 422fc960f3..4551b4a7c8 100644
--- a/apps/website/screens/components/text-input/TextInputPageLayout.tsx
+++ b/apps/website/screens/components/text-input/TextInputPageLayout.tsx
@@ -6,21 +6,20 @@ import { ReactNode } from "react";
const TextInputPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/text-input" },
- { label: "Usage", path: "/components/text-input/usage" },
- { label: "Specifications", path: "/components/text-input/specifications" },
+ { label: "Overview", path: "/components/text-input" },
+ { label: "Code", path: "/components/text-input/code" },
];
return (
-
+
-
-
+
+
- Text inputs are input fields typically used in forms that allow the user to enter text data in a structured
+ Text inputs are fields commonly used in forms to capture user-entered text in a structured and accessible
format.
-
+
{children}
diff --git a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
index 27e50064fe..22604f3693 100644
--- a/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
+++ b/apps/website/screens/components/text-input/code/TextInputCodePage.tsx
@@ -1,7 +1,5 @@
import { DxcLink, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
@@ -9,7 +7,15 @@ import uncontrolled from "./examples/uncontrolled";
import action from "./examples/action";
import functionSuggestions from "./examples/functionSuggestions";
import errorHandling from "./examples/errorHandling";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
+import StatusBadge from "@/common/StatusBadge";
+
+const actionTypeString = `{
+ icon?: string | (React.ReactNode
+ & React.SVGProps);
+ onClick: () => void;
+ title?: string;
+}`;
const sections = [
{
@@ -26,90 +32,62 @@ const sections = [
-
defaultValue
- string
+
+
+ alignment
+
-
Initial value of the input, only when it is uncontrolled.
-
-
-
-
-
value
- string
+ 'left' | 'right'
- Value of the input. If undefined, the component will be uncontrolled and the value will be managed
- internally by the component.
-
-
-
-
-
-
label
-
- string
+ Sets text-align CSS property inside the input. See{" "}
+
+ MDN
+ {" "}
+ for further information.
- Text to be placed above the input. Under the hood, this prop also serves as an accessible label for the
- list of suggestions.
+ 'left'
-
-
-
name
+
action
- string
+ {actionTypeString}
-
Name attribute of the input element.
+
Action to be displayed on the right side of the input.
-
-
helperText
+
ariaLabel
string
-
Helper text to be placed above the input.
-
-
+
+ Specifies a string to be used as the name for the textInput element when no label is
+ provided.
+
+
+ 'Text input'
+
-
placeholder
+
autocomplete
string
-
Text to be put as placeholder of the input.
-
-
-
-
-
action
-
- {
- "{ icon: string | (React.ReactNode & React.SVGProps ); onClick: () => void; title?: string }"
- }
-
+ HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
+ provide automated assistance in filling out the input value. Its value must be one of all the possible
+ values of the HTML autocomplete attribute. See{" "}
+ MDN{" "}
+ for further information.
- Action to be shown in the input. It has the following properties:
-
-
- icon: Icon to be placed in the action. It can be either an icon from{" "}
-
- Material Symbols
- {" "}
- (string) or a SVG component.
-
-
- onClick: Function to be called when the action button is clicked.
-
-
- title: Text representing advisory information related to the button's action. Under the hood,
- this prop also serves as an accessible label for the component.
-
-
- Note that if the icon is an URL (string), the component's color styling tokens will not be applied to the
- image.
+ 'off'
-
-
clearable
@@ -121,6 +99,14 @@ const sections = [
false
+
+
defaultValue
+
+ string
+
+
Initial value of the input, only when it is uncontrolled.
+
-
+
disabled
@@ -132,61 +118,84 @@ const sections = [
-
optional
-
- boolean
-
+
error
- If true, the input will be optional, showing '(Optional)' next to the label. Otherwise, the field will be
- considered required and an error will be passed as a parameter to the onBlur and{" "}
- onChange functions when it has not been filled.
+ string
- false
+ If it is a defined value and also a truthy string, the component will change its appearance, showing the
+ error below the input component. If the defined value is an empty string, it will reserve a space below
+ the component for a future error, but it would not change its look. In case of being undefined or null,
+ both the appearance and the space for the error message would not be modified.
+
-
-
readOnly
+
helperText
- boolean
+ string
+
Helper text to be placed above the input.
+
-
+
+
+
label
- If true, the component will not be mutable, meaning the user can not edit the control. In addition, the
- clear action will not be displayed even if the flag is set to true and the custom action will not execute
- its onClick event.
+ string
- false
+ Text to be placed above the input. Under the hood, this prop also serves as an accessible label for the
+ list of suggestions.
+ 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.
-
Prefix to be placed before the input value.
-
-
suffix
+
maxLength
- string
+ number
+
+
+ Specifies the maximum length allowed by the input. This will be checked both when the input element loses
+ the focus and while typing within it. If the string entered does not comply the maximum length, the{" "}
+ onBlur and onChange functions will be called with the current value and an
+ internal error informing that the value length does not comply the specified range. If a valid length is
+ reached, the error parameter of both events will not be defined.
- This function will be called when the user types within the input element of the component. An object
- including the current value and the error (if the value entered is not valid) will be passed to this
- function. If there is no error, error will not be defined.
+ Specifies the minimum length allowed by the input. This will be checked both when the input element loses
+ the focus and while typing within it. If the string entered does not comply the minimum length, the{" "}
+ onBlur and onChange functions will be called with the current value and an
+ internal error informing that the value length does not comply the specified range. If a valid length is
+ reached, the error parameter of both events will not be defined.
- If it is a defined value and also a truthy string, the component will change its appearance, showing the
- error below the input component. If the defined value is an empty string, it will reserve a space below
- the component for a future error, but it would not change its look. In case of being undefined or null,
- both the appearance and the space for the error message would not be modified.
+ This function will be called when the user types within the input element of the component. An object
+ including the current value and the error (if the value entered is not valid) will be passed to this
+ function. If there is no error, error will not be defined.
- These are the options to be displayed as suggestions. It can be either an array or a function:
-
-
- Array: List of options that will be filtered by the user's input.
-
-
- Function: This function will be called when the user changes the value. It will receive the new
- value as a parameter and should return a promise that resolves to an array with the filtered options.
-
-
+ If true, the input will be optional, showing '(Optional)' next to the label. Otherwise, the field will be
+ considered required and an error will be passed as a parameter to the onBlur and{" "}
+ onChange functions when it has not been filled.
+
+
+ false
-
-
pattern
@@ -246,58 +249,41 @@ const sections = [
-
-
minLength
-
- number
-
+
placeholder
- Specifies the minimum length allowed by the input. This will be checked both when the input element loses
- the focus and while typing within it. If the string entered does not comply the minimum length, the{" "}
- onBlur and onChange functions will be called with the current value and an
- internal error informing that the value length does not comply the specified range. If a valid length is
- reached, the error parameter of both events will not be defined.
+ string
+
Text to be put as placeholder of the input.
-
-
maxLength
-
- number
-
+
prefix
- Specifies the maximum length allowed by the input. This will be checked both when the input element loses
- the focus and while typing within it. If the string entered does not comply the maximum length, the{" "}
- onBlur and onChange functions will be called with the current value and an
- internal error informing that the value length does not comply the specified range. If a valid length is
- reached, the error parameter of both events will not be defined.
+ string
+
Prefix to be placed before the input value.
-
-
autocomplete
+
readOnly
- string
+ boolean
- HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
- provide automated assistance in filling out the input value. Its value must be one of all the possible
- values of the HTML autocomplete attribute. See{" "}
- MDN{" "}
- for further information.
+ If true, the component will not be mutable, meaning the user can not edit the control. In addition, the
+ clear action will not be displayed even if the flag is set to true and the custom action will not execute
+ its onClick event.
- 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.
+ {"React.Ref"}
+
Reference to the component.
-
@@ -311,35 +297,54 @@ const sections = [
-
tabIndex
+
suffix
- number
+ string
+
Suffix to be placed after the input value.
+
-
+
+
+
suggestions
- Value of the tabindex attribute.
+ {"string[] | ((value: string) => Promise )"}
- 0
+ These are the options to be displayed as suggestions. It can be either an array or a function:
+
+
+ Array: List of options that will be filtered by the user's input.
+
+
+ Function: This function will be called when the user changes the value. It will receive the new
+ value as a parameter and should return a promise that resolves to an array with the filtered options.
+
+
+
-
-
ref
+
tabIndex
- {"React.Ref"}
+ number
+
+
+ Value of the tabindex attribute.
+
+
+ 0
-
Reference to the component.
-
-
-
ariaLabel
+
value
string
- Specifies a string to be used as the name for the textInput element when no label is
- provided.
+ Value of the input. If undefined, the component will be uncontrolled and the value will be managed
+ internally by the component.
-
'Text input'
+
-
@@ -372,15 +377,11 @@ const sections = [
},
];
-const TextInputCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const TextInputCodePage = () => (
+
+
+
+
+);
export default TextInputCodePage;
diff --git a/apps/website/screens/components/text-input/code/examples/action.ts b/apps/website/screens/components/text-input/code/examples/action.ts
deleted file mode 100644
index a8c375ac50..0000000000
--- a/apps/website/screens/components/text-input/code/examples/action.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const actionIcon = {
- onClick: () => {
- console.log("Copied.");
- },
- icon: "Content_Copy",
- title: "Copy",
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/text-input/code/examples/action.tsx b/apps/website/screens/components/text-input/code/examples/action.tsx
new file mode 100644
index 0000000000..b58ef48fa3
--- /dev/null
+++ b/apps/website/screens/components/text-input/code/examples/action.tsx
@@ -0,0 +1,43 @@
+import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+ const actionIcon = {
+ icon: "Content_Copy",
+ onClick: () => {
+ navigator.clipboard
+ .writeText(value)
+ .then(() => {
+ alert("Code copied!");
+ })
+ .catch(() => {
+ alert("Failed attempt to copy the text.");
+ });
+ },
+ title: "Copy the text",
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/text-input/code/examples/controlled.ts b/apps/website/screens/components/text-input/code/examples/controlled.ts
deleted file mode 100644
index b6a6ab3976..0000000000
--- a/apps/website/screens/components/text-input/code/examples/controlled.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const onChange = ({ value }) => {
- setValue(value);
- };
- const onBlur = ({ value }) => {
- setValue(value);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/text-input/code/examples/controlled.tsx b/apps/website/screens/components/text-input/code/examples/controlled.tsx
new file mode 100644
index 0000000000..de80c616b7
--- /dev/null
+++ b/apps/website/screens/components/text-input/code/examples/controlled.tsx
@@ -0,0 +1,31 @@
+import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+ const onBlur = ({ value }) => {
+ setValue(value);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/text-input/code/examples/errorHandling.ts b/apps/website/screens/components/text-input/code/examples/errorHandling.ts
deleted file mode 100644
index 7c621fd612..0000000000
--- a/apps/website/screens/components/text-input/code/examples/errorHandling.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const [errorMessage, setErrorMessage] = useState();
- const onChange = ({ value, error }) => {
- setValue(value);
- setErrorMessage(error == undefined ? "" : "Error onChange: invalid email");
- };
- const onBlur = ({ value, error }) => {
- setValue(value);
- setErrorMessage(error == undefined ? "" : "Error onBlur: invalid email");
- };
-
- const validEmail = new RegExp(
- "^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$"
- );
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/text-input/code/examples/errorHandling.tsx b/apps/website/screens/components/text-input/code/examples/errorHandling.tsx
new file mode 100644
index 0000000000..878613b7e8
--- /dev/null
+++ b/apps/website/screens/components/text-input/code/examples/errorHandling.tsx
@@ -0,0 +1,39 @@
+import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const [errorMessage, setErrorMessage] = useState();
+ const onChange = ({ value, error }) => {
+ setValue(value);
+ setErrorMessage(error == undefined ? "" : "Error onChange: invalid email");
+ };
+ const onBlur = ({ value, error }) => {
+ setValue(value);
+ setErrorMessage(error == undefined ? "" : "Error onBlur: invalid email");
+ };
+
+ const validEmail = new RegExp(
+ "^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$"
+ );
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/text-input/code/examples/functionSuggestions.ts b/apps/website/screens/components/text-input/code/examples/functionSuggestions.ts
deleted file mode 100644
index 64238178ca..0000000000
--- a/apps/website/screens/components/text-input/code/examples/functionSuggestions.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const countries = ["Afghanistan", "Albania", "Algeria", "Andorra"];
- const [value, setValue] = useState("");
- const onChange = ({ value }) => {
- setValue(value);
- };
- const onBlur = ({ value }) => {
- setValue(value);
- };
-
- const callbackFunc = (newValue) => {
- const result = new Promise((resolve) =>
- setTimeout(() => {
- resolve(
- newValue
- ? countries.filter((option) =>
- option.toUpperCase().includes(newValue.toUpperCase())
- )
- : countries
- );
- }, 1500)
- );
- return result;
- };
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextInput,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/text-input/code/examples/functionSuggestions.tsx b/apps/website/screens/components/text-input/code/examples/functionSuggestions.tsx
new file mode 100644
index 0000000000..52886757cf
--- /dev/null
+++ b/apps/website/screens/components/text-input/code/examples/functionSuggestions.tsx
@@ -0,0 +1,47 @@
+import { DxcTextInput, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const countries = ["Afghanistan", "Albania", "Algeria", "Andorra"];
+ const [value, setValue] = useState("");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+ const onBlur = ({ value }) => {
+ setValue(value);
+ };
+
+ const callbackFunc = (newValue) => {
+ const result = new Promise((resolve) =>
+ setTimeout(() => {
+ resolve(
+ newValue
+ ? countries.filter((option) =>
+ option.toUpperCase().includes(newValue.toUpperCase())
+ )
+ : countries
+ );
+ }, 1500)
+ );
+ return result;
+ };
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextInput,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/text-input/code/examples/uncontrolled.ts b/apps/website/screens/components/text-input/code/examples/uncontrolled.ts
deleted file mode 100644
index 116030002a..0000000000
--- a/apps/website/screens/components/text-input/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { DxcTextInput, DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-import { useRef, useState } from "react";
-
-const code = `() => {
- const inputRef = useRef();
-
- const handleSubmit = () => {
- const input = inputRef.current.getElementsByTagName("input")[0];
- console.log(input.value);
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextInput,
- DxcButton,
- DxcInset,
- DxcFlex,
- useRef,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/text-input/code/examples/uncontrolled.tsx b/apps/website/screens/components/text-input/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..7abd23fe49
--- /dev/null
+++ b/apps/website/screens/components/text-input/code/examples/uncontrolled.tsx
@@ -0,0 +1,35 @@
+import { DxcTextInput, DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
+import { useRef, useState } from "react";
+
+const code = `() => {
+ const inputRef = useRef();
+
+ const handleSubmit = () => {
+ const input = inputRef.current.getElementsByTagName("input")[0];
+ console.log(input.value);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextInput,
+ DxcButton,
+ DxcInset,
+ DxcFlex,
+ useRef,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx
new file mode 100644
index 0000000000..0a37021530
--- /dev/null
+++ b/apps/website/screens/components/text-input/overview/TextInputOverviewPage.tsx
@@ -0,0 +1,337 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Figure from "@/common/Figure";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import prefixSuffix from "./examples/prefixSuffix";
+import Example from "@/common/example/Example";
+import customAction from "./examples/customAction";
+import anatomy from "./images/text_input_anatomy.png";
+import textInputClearContent from "./images/text_input_clear_content.png";
+import textInputAutosuggest from "./images/text_input_autosuggest.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Text inputs are essential UI elements that enable users to enter and interact with{" "}
+ text-based information. They are widely used in forms for collecting data, performing searches,
+ and completing various user interactions. Use text inputs to facilitate user input in structured formats such as
+ usernames, descriptions, URLs, phone numbers, credit card details, emails, and addresses. Ensuring clear labels,
+ proper validation, and intuitive formatting enhances usability and improves the overall user experience.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label(Optional): a descriptive text that helps users understand what information
+ is expected in the input field. It should be clear, concise, and placed near the input for better
+ readability.
+
+
+ Optional indicator(Optional): a small indicator that signals the input field is
+ not mandatory. It helps users know they can leave the field empty without causing validation errors.
+
+
+ Input action(Optional): an interactive element, such as an icon or button, inside
+ the input field that triggers a specific action (e.g., revealing a password, opening a date picker, or
+ searching).
+
+
+ Clear action(Optional): a small button, represented by an "X" icon, that allows
+ users to clear the entered text quickly without manually deleting it.
+
+
+ Helper text(Optional): additional text placed below the input field that provides
+ guidance, examples, or explanations to assist users in filling out the field correctly.
+
+
+ Container: the visual wrapper around the input field that provides structure, ensures
+ accessibility, and helps differentiate the input from other UI elements.
+
+
+ Prefix(Optional): a visual element placed before or after the user input, like
+ currency symbols or units, to help clarify the expected data.
+
+
+ Placeholder/Value: a short hint displayed inside the input field before any text is
+ entered, offering a brief example or instruction on what type of data is expected. It disappears when the
+ user starts typing. The value represents the actual content entered by the user. Unlike the placeholder, the
+ value persists during interaction and is what gets submitted with the form.
+
+
+
+ ),
+ },
+ {
+ title: "Form inputs",
+ content: (
+ <>
+
+ Form inputs are essential UI elements that allow users to interact with digital products by{" "}
+ entering or selecting data. Choosing the right input type and structure is key to designing
+ efficient, user-friendly forms that support task completion and data accuracy.
+
+
+ A form input (also known as a form field) is used to capture user data. Common input types include text
+ fields, date pickers, number fields, radio buttons, checkboxes, toggles, and dropdowns. Forms should always
+ include a submission method, such as a submit button, link, or keyboard trigger, to complete the interaction.
+
+
+ ),
+ subSections: [
+ {
+ title: "Shared input characteristics",
+ content: (
+ <>
+
+ Although input fields vary in type and purpose, they often share a common set of features:
+
+
+
+ Placeholder: a short hint displayed inside the input field that describes its expected
+ value or purpose.
+
+
+ Size and max length: inputs can have both a visual size (width of the field) and a
+ character limit that defines how much text can be entered.
+
+
+ Prefix or suffix: some inputs include a visual element before or after the user input,
+ like currency symbols or units, to help clarify the expected data.
+
+
+ Helper text: additional information displayed below the field to guide the user in
+ providing the correct input.
+
+
+ Optional label: inputs that are not mandatory can be marked with an "Optional" tag to
+ set clear expectations.
+
+
+
+ ),
+ },
+ {
+ title: "Common input states",
+ content: (
+ <>
+ Most inputs can also present standard interactive or informative states:
+
+
+ Disabled: this state prevents users from interacting with the field. It's typically
+ used when a value is not applicable or editable under certain conditions or roles.
+
+
+ Error: when a user enters invalid or incomplete data, the input shows an error state,
+ often accompanied by a helpful message to guide corrections.
+
+
+ Read-only: the input is visible, focusable, and hoverable, but not editable. This is
+ ideal for fields with auto-calculated values. Unlike disabled fields, read-only inputs can still be
+ submitted with the form and are part of the form data.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Using text inputs",
+ content: (
+
+ Text inputs, in particular, are commonly found in forms, search bars, and interactive fields that require text
+ user input. Our text input component is highly configurable, allowing designers and developers to adapt it to
+ different use cases while maintaining usability and accessibility. In this section, we will cover some key
+ characteristics of our text input, so you can learn about its particularities and behavior.
+
+ ),
+ subSections: [
+ {
+ title: "Actions",
+ subSections: [
+ {
+ title: "Clearing content",
+ content: (
+ <>
+
+ Clearing content is one of the key actions of the text input. It allows users to{" "}
+ remove the content of the input without having to do it manually through a keyboard,
+ which is particularly useful when large data has been introduced.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Custom actions",
+ content: (
+ <>
+
+ On top of the clear content action, our text input supports another custom action, such as copying the
+ data introduced or triggering a tooltip with helper text. This added flexibility allows teams to
+ tailor the input's behavior to their specific use case, enabling more{" "}
+ dynamic interactions directly from the input field.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Prefix and suffix",
+ content: (
+ <>
+
+ Halstack inputs also support the use of prefixes and suffixes, which are visual elements that help users
+ quickly understand the type of data expected in the field. These cues provide additional
+ context and improve clarity during data entry.
+
+
+
+ ),
+ },
+
+ {
+ title: "Autosuggest",
+ content: (
+ <>
+
+ The autosuggest feature in our text input provides users with{" "}
+ real-time suggestions as they type, based on a predefined list of options. As the user
+ enters characters, the input field dynamically filters and displays matching values in a dropdown,
+ allowing for quick and efficient selection.
+
+
+ This feature is particularly useful for reducing input errors, speeding up data entry, and guiding users
+ toward valid or commonly used values, especially in cases where the list of possibilities is large but
+ predictable, such as country names, email domains, or product codes. It enhances usability by minimizing
+ typing effort and improving overall form completion accuracy.
+
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ subSections: [
+ {
+ title: "General",
+ content: (
+
+
+ Always use clear labels: ensure every text input has a visible, descriptive label that
+ doesn't disappear as users begin typing. Avoid relying solely on placeholder text.
+
+
+ Use placeholders as hints only: placeholders should provide examples or expected formats
+ (e.g., "e.g., johndoe@email.com"), not serve as the primary field descriptor.
+
+
+ Clarify field requirements: use an "Optional" tag next to labels to indicate when a field
+ isn't mandatory, reducing user uncertainty.
+
+
+ Provide helper text when needed: include contextual guidance below the input to help
+ users provide the correct information, especially for complex or specific inputs.
+
+
+ Support various states consistently: reflect focus, disabled, error, and read-only states
+ with distinct, accessible visual cues.
+
+
+ Apply appropiate alignment: It is recommended to use left alignment in general, except
+ when there is a specific need for right alignment, such as in currency inputs or numeric fields, generally
+ using a suffix.
+
+
+ ),
+ },
+ {
+ title: "Actions",
+ content: (
+
+
+ Provide a way to clear content: allow users to easily clear the input with a clear icon
+ or button, especially useful for fields like search or filters.
+
+
+ Use custom action icons appropriately: if adding custom icons inside the input (e.g., a
+ calendar icon for date inputs or a search icon), ensure they're meaningful, accessible, and do not
+ interfere with user input.
+
+
+ Avoid distracting behaviors: don't introduce actions that reset, redirect, or submit
+ forms unexpectedly from within a text field.
+
+
+ ),
+ },
+ {
+ title: "Prefix/suffix",
+ content: (
+
+
+ Use prefixes and suffixes to add clarity: add visual cues like currency symbols (€),
+ units (kg), or domain suffixes (.com) to help users understand the context of their input.
+
+
+ Do not confuse with input content: ensure prefixes/suffixes are visually distinct and not
+ editable to avoid confusion with the actual value being typed.
+
+
+ Keep it minimal and functional: avoid decorative or unnecessary additions. Prefixes and
+ suffixes should always serve a clear purpose.
+
+
+ ),
+ },
+ {
+ title: "Autosuggest",
+ content: (
+
+
+ Use autosuggest for known data sets: ideal when users need to search or select from a
+ large, predefined list (e.g., city names, users, tags). It enhances speed and reduces errors.
+
+
+ Ensure accessibility: suggestions should be fully navigable using a keyboard and readable
+ by screen readers. Users must be able to select options using arrow keys and Enter.
+
+
+ Prioritize relevance in suggestions: filter and order suggestions logically based on the
+ user's input to avoid overwhelming them with too many or unrelated options.
+
+
+ Allow free input if appropriate: when the field accepts both suggested and custom
+ entries, clearly indicate this behavior and validate accordingly.
+
+
+ ),
+ },
+ ],
+ },
+];
+
+const TextInputOverviewPage = () => (
+
+
+
+
+);
+
+export default TextInputOverviewPage;
diff --git a/apps/website/screens/components/text-input/overview/examples/customAction.tsx b/apps/website/screens/components/text-input/overview/examples/customAction.tsx
new file mode 100644
index 0000000000..93c472107b
--- /dev/null
+++ b/apps/website/screens/components/text-input/overview/examples/customAction.tsx
@@ -0,0 +1,33 @@
+import { DxcTextInput, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const copyAction = {
+ onClick: () => {
+ console.log("Copied.");
+ },
+ icon: "Content_Copy",
+ title: "Copy",
+ };
+
+ return (
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextInput,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/text-input/overview/examples/prefixSuffix.tsx b/apps/website/screens/components/text-input/overview/examples/prefixSuffix.tsx
new file mode 100644
index 0000000000..971a40caf0
--- /dev/null
+++ b/apps/website/screens/components/text-input/overview/examples/prefixSuffix.tsx
@@ -0,0 +1,20 @@
+import { DxcTextInput, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+
+ );
+ }`;
+
+const scope = {
+ DxcTextInput,
+ DxcInset,
+ DxcFlex,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/text-input/overview/images/text_input_anatomy.png b/apps/website/screens/components/text-input/overview/images/text_input_anatomy.png
new file mode 100644
index 0000000000..254170acad
Binary files /dev/null and b/apps/website/screens/components/text-input/overview/images/text_input_anatomy.png differ
diff --git a/apps/website/screens/components/text-input/overview/images/text_input_autosuggest.png b/apps/website/screens/components/text-input/overview/images/text_input_autosuggest.png
new file mode 100644
index 0000000000..95b8bda7d6
Binary files /dev/null and b/apps/website/screens/components/text-input/overview/images/text_input_autosuggest.png differ
diff --git a/apps/website/screens/components/text-input/overview/images/text_input_clear_content.png b/apps/website/screens/components/text-input/overview/images/text_input_clear_content.png
new file mode 100644
index 0000000000..ac02d50833
Binary files /dev/null and b/apps/website/screens/components/text-input/overview/images/text_input_clear_content.png differ
diff --git a/apps/website/screens/components/text-input/specs/TextInputSpecsPage.tsx b/apps/website/screens/components/text-input/specs/TextInputSpecsPage.tsx
deleted file mode 100644
index c4b83cb7c0..0000000000
--- a/apps/website/screens/components/text-input/specs/TextInputSpecsPage.tsx
+++ /dev/null
@@ -1,1438 +0,0 @@
-import { DxcParagraph, DxcTable, DxcLink, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import Image from "@/common/Image";
-import inputStates from "./images/input_states.png";
-import inputAnatomy from "./images/input_anatomy.png";
-import inputSpecs from "./images/input_specs.png";
-import autosuggestStatesListItem from "./images/autosuggest_states_listItem.png";
-import autosuggestAnatomy from "./images/autosuggest_anatomy.png";
-import autosuggestSpecs from "./images/autosuggest_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- Text input states: enabled, hover, focus,{" "}
- error and disabled.
-
-
-
-
-
- List option states: enabled, hover, active and{" "}
- system.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label text
-
- Helper text (Optional)
-
- Error indicator
-
- Clear action (Optional)
-
-
- Input action (Optional)
-
- Input container
- Placeholder text
- Error message
- Prefix
-
-
-
- List dialog
- Text input
- List option
- List option value
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- subSections: [
- {
- title: "Base",
- content: (
-
-
-
-
-
-
- And also apply different values to each side of the component: top, bottom,{" "}
- left and right.
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG 2.2",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- 1.3.1: Information and Relationships
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 3.3.1: Error Identification
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 3.3.2: Labels and Instructions
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 3.3.3: Error Suggestion
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 4.1.2: Name, Role, Value
-
-
-
- ),
- },
- ],
- },
-];
-
-const TextInputSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TextInputSpecsPage;
diff --git a/apps/website/screens/components/text-input/specs/images/autosuggest_anatomy.png b/apps/website/screens/components/text-input/specs/images/autosuggest_anatomy.png
deleted file mode 100644
index 36ff25791c..0000000000
Binary files a/apps/website/screens/components/text-input/specs/images/autosuggest_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/text-input/specs/images/autosuggest_specs.png b/apps/website/screens/components/text-input/specs/images/autosuggest_specs.png
deleted file mode 100644
index 19a2374201..0000000000
Binary files a/apps/website/screens/components/text-input/specs/images/autosuggest_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/text-input/specs/images/autosuggest_states_listItem.png b/apps/website/screens/components/text-input/specs/images/autosuggest_states_listItem.png
deleted file mode 100644
index 93bf4abbcd..0000000000
Binary files a/apps/website/screens/components/text-input/specs/images/autosuggest_states_listItem.png and /dev/null differ
diff --git a/apps/website/screens/components/text-input/specs/images/input_anatomy.png b/apps/website/screens/components/text-input/specs/images/input_anatomy.png
deleted file mode 100644
index b779f12fb7..0000000000
Binary files a/apps/website/screens/components/text-input/specs/images/input_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/text-input/specs/images/input_specs.png b/apps/website/screens/components/text-input/specs/images/input_specs.png
deleted file mode 100644
index 6f824a567c..0000000000
Binary files a/apps/website/screens/components/text-input/specs/images/input_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/text-input/specs/images/input_states.png b/apps/website/screens/components/text-input/specs/images/input_states.png
deleted file mode 100644
index c46c1a9b4c..0000000000
Binary files a/apps/website/screens/components/text-input/specs/images/input_states.png and /dev/null differ
diff --git a/apps/website/screens/components/text-input/usage/TextInputUsagePage.tsx b/apps/website/screens/components/text-input/usage/TextInputUsagePage.tsx
deleted file mode 100644
index db8f92ab97..0000000000
--- a/apps/website/screens/components/text-input/usage/TextInputUsagePage.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import Image from "@/common/Image";
-import inputActionsClearImage from "./images/input_actions_clear.png";
-import inputActionsCustom from "./images/input_actions_custom.png";
-import prefixSuffix from "./examples/prefixSuffix";
-import Example from "@/common/example/Example";
-import helperText from "./examples/helperText";
-import Link from "next/link";
-import autosuggest from "./examples/autosuggest";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- Use text inputs in forms to help people enter, select and search for text. Common text input types include:
- usernames, descriptions, URLs, phone numbers, credit cards, emails, addresses or plain text searches.
-
- ),
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Do use fixed-width inputs for content that has a specific, known length (e.g. postcode, phone number).
-
-
- Do use sentence for any input text case with standard, local grammar and punctuation rules.
-
-
- Do use helpful and clear text for labels, error messages and helper texts.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Do not use text input for text longer than a single line (e.g. name, phone number). Use the textarea
- instead.
-
- Do not disable copy and paste.
- Do not display a pop-up error message after validating.
- Avoid masking label, keep it always visible.
-
- ),
- },
- ],
- },
- {
- title: "Content",
- subSections: [
- {
- title: "Actions",
- subSections: [
- {
- title: "Clearing content",
- content: (
- <>
- Clear actions allow user to remove the content of the text input.
-
-
-
-
- ),
- },
- {
- title: "Custom actions",
- content: (
- <>
- Text inputs can have an additional custom action.
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Prefixes and suffixes",
- content: (
- <>
-
- Prefixes and suffixes help the user to understand the purpose of the text input.
-
-
-
- ),
- },
- ],
- },
- {
- title: "Helper text",
- content: (
- <>
-
- Helper text can be used as additional instructions to the user when filling in the form. It should be always
- visible even in a focus state.
-
-
-
- ),
- subSections: [
- {
- title: "Usage",
- content: (
- <>
- Do:
-
- Keep helper text as short and specific as possible.
-
- Only use helper text when truly necessary to avoid overloading the user.
-
- Should give an example or an explanation of the field.
-
- Don't:
-
- Helper text should not run longer than the input area.
-
-
- ),
- },
- ],
- },
- {
- title: "Autosuggest",
- content: (
- <>
-
- Suggests a list of options to fill a text input. A user can either select a suggestion or enter their own
- answer.
-
-
-
- ),
- subSections: [
- {
- title: "Usage",
- content: (
- <>
-
-
- Use the suggestions to help users select from a list of standard responses when needed.
-
-
- If the value for the textbox must be chosen from a predefined set of allowed values, use the{" "}
-
- select
- {" "}
- component instead.
-
- Keep suggestions simple and avoid scroll.
-
-
- ),
- },
- ],
- },
-];
-
-const TextInputUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TextInputUsagePage;
diff --git a/apps/website/screens/components/text-input/usage/examples/autosuggest.ts b/apps/website/screens/components/text-input/usage/examples/autosuggest.ts
deleted file mode 100644
index 8d5b063bc2..0000000000
--- a/apps/website/screens/components/text-input/usage/examples/autosuggest.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { DxcTextInput, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const countries = [
- "Afghanistan",
- "Albania",
- "Andorra",
- "Antigua and Barbuda",
- "Bahrain",
- "Bangladesh",
- "Barbados",
- "Cameroon",
- "Canada",
- "Central African Republic",
- "Chad",
- "Democratic Republic of the Congo",
- "Dominica",
- "Denmark",
- "Djibouti",
- ];
-
- return (
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextInput,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/text-input/usage/examples/helperText.ts b/apps/website/screens/components/text-input/usage/examples/helperText.ts
deleted file mode 100644
index 828c891532..0000000000
--- a/apps/website/screens/components/text-input/usage/examples/helperText.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { DxcTextInput, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextInput,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/text-input/usage/examples/prefixSuffix.ts b/apps/website/screens/components/text-input/usage/examples/prefixSuffix.ts
deleted file mode 100644
index 7826817a7e..0000000000
--- a/apps/website/screens/components/text-input/usage/examples/prefixSuffix.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { DxcTextInput, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
- );
- }`;
-
-const scope = {
- DxcTextInput,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/text-input/usage/images/input_actions_clear.png b/apps/website/screens/components/text-input/usage/images/input_actions_clear.png
deleted file mode 100644
index d35b387462..0000000000
Binary files a/apps/website/screens/components/text-input/usage/images/input_actions_clear.png and /dev/null differ
diff --git a/apps/website/screens/components/text-input/usage/images/input_actions_custom.png b/apps/website/screens/components/text-input/usage/images/input_actions_custom.png
deleted file mode 100644
index b525de6850..0000000000
Binary files a/apps/website/screens/components/text-input/usage/images/input_actions_custom.png and /dev/null differ
diff --git a/apps/website/screens/components/textarea/TextareaPageLayout.tsx b/apps/website/screens/components/textarea/TextareaPageLayout.tsx
index 245469b840..98720ade24 100644
--- a/apps/website/screens/components/textarea/TextareaPageLayout.tsx
+++ b/apps/website/screens/components/textarea/TextareaPageLayout.tsx
@@ -6,18 +6,17 @@ import { ReactNode } from "react";
const TextareaPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/textarea" },
- { label: "Usage", path: "/components/textarea/usage" },
- { label: "Specifications", path: "/components/textarea/specifications" },
+ { label: "Overview", path: "/components/textarea" },
+ { label: "Code", path: "/components/textarea/code" },
];
return (
-
+
-
+ A textarea allows the users enter a multi-line, free-form text.
-
+
{children}
diff --git a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx
index aa6a5e8f65..23b54e2401 100644
--- a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx
+++ b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx
@@ -1,13 +1,11 @@
import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import errorHandling from "./examples/errorHandling";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
const sections = [
{
@@ -24,38 +22,60 @@ const sections = [
-
defaultValue
+
ariaLabel
string
-
Initial value of the textarea, only when it is uncontrolled.
-
-
+
+ Specifies a string to be used as the name for the textarea element when no label is provided.
+
+
'Text area'
-
value
+
autocomplete
string
- Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed
- internally.
+ HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
+ provide automated assistance in filling out the input value. Its value must be one of all the possible
+ values of the HTML autocomplete attribute. See{" "}
+ MDN{" "}
+ for further information.
+
+
+ 'off'
-
-
-
label
+
defaultValue
string
-
Text to be placed above the textarea.
+
Initial value of the textarea, only when it is uncontrolled.
-
-
name
+
disabled
+
+ boolean
+
+
If true, the component will be disabled.
+
+ false
+
+
+
+
error
string
-
Name attribute of the textarea element.
+
+ If it is a defined value and also a truthy string, the component will change its appearance, showing the
+ error below the textarea. If the defined value is an empty string, it will reserve a space below the
+ component for a future error, but it would not change its look. In case of being undefined or null, both
+ the appearance and the space for the error message would not be modified.
+
- false
+ 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.
+
-
-
optional
-
- boolean
-
+
maxLength
- If true, the textarea will be optional, showing '(Optional)' next to the label. Otherwise, the field will
- be considered required and an error will be passed as a parameter to the onBlur and{" "}
- onChange functions when it has not been filled.
+ number
- false
+ Specifies the maximum length allowed by the textarea. This will be checked both when the input element
+ loses the focus and while typing within it. If the string entered does not comply the maximum length, the{" "}
+ onBlur and onChange functions will be called with the current value and an
+ internal error informing that the value length does not comply the specified range. If a valid length is
+ reached, the error parameter of both events will not be defined.
+
-
-
readOnly
+
minLength
- boolean
+ number
-
If true, the component will not be mutable, meaning the user can not edit the control.
- false
+ Specifies the minimum length allowed by the textarea. This will be checked both when the input element
+ loses the focus and while typing within it. If the string entered does not comply the minimum length, the{" "}
+ onBlur and onChange functions will be called with the current value and an
+ internal error informing that the value length does not comply the specified range. If a valid length is
+ reached, the error parameter of both events will not be defined.
+
-
-
verticalGrow
-
- 'auto' | 'manual' | 'none'
-
-
- Defines the textarea's ability to resize vertically. It can be:
-
-
- 'auto': The textarea grows or shrinks automatically in order to fit the content.
-
-
- 'manual': The height of the textarea is enabled to be manually modified.
-
-
- 'none': The textarea has a fixed height and can't be modified.
-
- 4
+ This function will be called when the textarea loses the focus. An object including the textarea value and
+ the error (if the value entered is not valid) will be passed to this function. If there is no error,{" "}
+ error will not be defined.
- This function will be called when the textarea loses the focus. An object including the textarea value and
- the error (if the value entered is not valid) will be passed to this function. If there is no error,{" "}
- error will not be defined.
+ boolean
-
-
-
-
-
error
- string
+ If true, the textarea will be optional, showing '(Optional)' next to the label. Otherwise, the field will
+ be considered required and an error will be passed as a parameter to the onBlur and{" "}
+ onChange functions when it has not been filled.
- If it is a defined value and also a truthy string, the component will change its appearance, showing the
- error below the textarea. If the defined value is an empty string, it will reserve a space below the
- component for a future error, but it would not change its look. In case of being undefined or null, both
- the appearance and the space for the error message would not be modified.
+ false
-
-
pattern
@@ -193,59 +194,40 @@ const sections = [
-
-
minLength
-
- number
-
+
placeholder
- Specifies the minimum length allowed by the textarea. This will be checked both when the input element
- loses the focus and while typing within it. If the string entered does not comply the minimum length, the{" "}
- onBlur and onChange functions will be called with the current value and an
- internal error informing that the value length does not comply the specified range. If a valid length is
- reached, the error parameter of both events will not be defined.
+ string
+
Text to be put as placeholder of the textarea.
-
-
maxLength
+
readOnly
- number
+ boolean
+
If true, the component will not be mutable, meaning the user can not edit the control.
- Specifies the maximum length allowed by the textarea. This will be checked both when the input element
- loses the focus and while typing within it. If the string entered does not comply the maximum length, the{" "}
- onBlur and onChange functions will be called with the current value and an
- internal error informing that the value length does not comply the specified range. If a valid length is
- reached, the error parameter of both events will not be defined.
+ false
-
-
-
autocomplete
-
- string
-
-
- HTML autocomplete attribute. Lets the user specify if any permission the user agent has to
- provide automated assistance in filling out the input value. Its value must be one of all the possible
- values of the HTML autocomplete attribute. See{" "}
- MDN{" "}
- for further information.
-
- 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.
+ 4
-
-
size
@@ -270,22 +252,38 @@ const sections = [
-
ref
+
value
- {"React.Ref"}
+ string
+
+
+ Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed
+ internally.
-
Reference to the component.
-
-
ariaLabel
+
verticalGrow
- string
+ 'auto' | 'manual' | 'none'
- Specifies a string to be used as the name for the textarea element when no label is provided.
+ Defines the textarea's ability to resize vertically. It can be:
+
+
+ 'auto': The textarea grows or shrinks automatically in order to fit the content.
+
+
+ 'manual': The height of the textarea is enabled to be manually modified.
+
+
+ 'none': The textarea has a fixed height and can't be modified.
+
+
+
+
+ 'auto'
-
'Text area'
@@ -310,15 +308,11 @@ const sections = [
},
];
-const TextareaCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const TextareaCodePage = () => (
+
+
+
+
+);
export default TextareaCodePage;
diff --git a/apps/website/screens/components/textarea/code/examples/controlled.ts b/apps/website/screens/components/textarea/code/examples/controlled.ts
deleted file mode 100644
index 0bc5de8c4b..0000000000
--- a/apps/website/screens/components/textarea/code/examples/controlled.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DxcTextarea, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const onChange = ({ value }) => {
- setValue(value);
- };
- const onBlur = ({ value }) => {
- setValue(value);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextarea,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/textarea/code/examples/controlled.tsx b/apps/website/screens/components/textarea/code/examples/controlled.tsx
new file mode 100644
index 0000000000..eb09d0122d
--- /dev/null
+++ b/apps/website/screens/components/textarea/code/examples/controlled.tsx
@@ -0,0 +1,32 @@
+import { DxcTextarea, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const onChange = ({ value }) => {
+ setValue(value);
+ };
+ const onBlur = ({ value }) => {
+ setValue(value);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextarea,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/textarea/code/examples/errorHandling.ts b/apps/website/screens/components/textarea/code/examples/errorHandling.ts
deleted file mode 100644
index fe8ccbf37a..0000000000
--- a/apps/website/screens/components/textarea/code/examples/errorHandling.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { DxcTextarea, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [value, setValue] = useState("");
- const [customPatternError, setCustomPatternError] = useState();
- const onChange = ({ value, error }) => {
- setValue(value);
- setCustomPatternError(
- error == undefined
- ? ""
- : "Error onChange: value does not comply the allowed format"
- );
- };
- const onBlur = ({ value, error }) => {
- setValue(value);
- setCustomPatternError(
- error == undefined
- ? ""
- : "Error onBlur: value does not comply the allowed format"
- );
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextarea,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/textarea/code/examples/errorHandling.tsx b/apps/website/screens/components/textarea/code/examples/errorHandling.tsx
new file mode 100644
index 0000000000..7758469227
--- /dev/null
+++ b/apps/website/screens/components/textarea/code/examples/errorHandling.tsx
@@ -0,0 +1,44 @@
+import { DxcTextarea, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [value, setValue] = useState("");
+ const [customPatternError, setCustomPatternError] = useState();
+ const onChange = ({ value, error }) => {
+ setValue(value);
+ setCustomPatternError(
+ error == undefined
+ ? ""
+ : "Error onChange: value does not comply the allowed format"
+ );
+ };
+ const onBlur = ({ value, error }) => {
+ setValue(value);
+ setCustomPatternError(
+ error == undefined
+ ? ""
+ : "Error onBlur: value does not comply the allowed format"
+ );
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextarea,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/textarea/code/examples/uncontrolled.ts b/apps/website/screens/components/textarea/code/examples/uncontrolled.ts
deleted file mode 100644
index 678b49a541..0000000000
--- a/apps/website/screens/components/textarea/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcTextarea, DxcInset, DxcFlex, DxcButton } from "@dxc-technology/halstack-react";
-import { useRef } from "react";
-
-const code = `() => {
- const inputRef = useRef();
-
- const handleSubmit = () => {
- const input = inputRef.current.getElementsByTagName("textarea")[0];
- console.log(input.value);
- };
-
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcTextarea,
- DxcInset,
- DxcFlex,
- useRef,
- DxcButton,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/textarea/code/examples/uncontrolled.tsx b/apps/website/screens/components/textarea/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..0549a379dc
--- /dev/null
+++ b/apps/website/screens/components/textarea/code/examples/uncontrolled.tsx
@@ -0,0 +1,34 @@
+import { DxcTextarea, DxcInset, DxcFlex, DxcButton } from "@dxc-technology/halstack-react";
+import { useRef } from "react";
+
+const code = `() => {
+ const inputRef = useRef();
+
+ const handleSubmit = () => {
+ const input = inputRef.current.getElementsByTagName("textarea")[0];
+ console.log(input.value);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcTextarea,
+ DxcInset,
+ DxcFlex,
+ useRef,
+ DxcButton,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/textarea/overview/TextareaOverviewPage.tsx b/apps/website/screens/components/textarea/overview/TextareaOverviewPage.tsx
new file mode 100644
index 0000000000..d14f924d72
--- /dev/null
+++ b/apps/website/screens/components/textarea/overview/TextareaOverviewPage.tsx
@@ -0,0 +1,219 @@
+import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import anatomy from "./images/textarea_anatomy.png";
+import Link from "next/link";
+import Code from "@/common/Code";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Text areas are essential UI components that allow users to enter and interact with{" "}
+ multi-line text-based information. They are commonly used in forms to collect feedback,
+ comments, descriptions, and longer messages where a single-line input is not sufficient. Text areas support a
+ wide range of use cases, from support forms and user profiles to product reviews and detailed reports.
+
+
+ Providing clear labels, helpful guidance, and proper formatting improves the user's ability to input
+ information accurately and comfortably. Enhancing usability through accessibility, validation, and responsive
+ behavior leads to a more intuitive and effective user experience.
+
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Label(Optional): a descriptive text that helps users understand what information
+ is expected in the input field. It should be clear, concise, and placed near the input for better
+ readability.
+
+
+ Optional indicator(Optional): a small indicator that signals the input field is
+ not mandatory. It helps users know they can leave the field empty without causing validation errors.
+
+
+ Placeholder/Value: a short hint displayed inside the input field before any text is
+ entered, offering a brief example or instruction on what type of data is expected. It disappears when the
+ user starts typing. The value represents the actual content entered by the user. Unlike the placeholder, the
+ value persists during interaction and is what gets submitted with the form.
+
+
+ Helper text(Optional): additional text placed below the input label that provides
+ guidance, examples, or explanations to assist users in filling out the field correctly.
+
+
+ Container: the visual wrapper around the input field that provides structure, ensures
+ accessibility, and helps differentiate the input from other UI elements.
+
+
+ Resizer(Optional): allows users to manually expand or shrink the textarea if
+ resizing is enabled.
+
+
+
+ ),
+ },
+ {
+ title: "Form inputs",
+ content: (
+ <>
+
+ Form inputs are essential UI elements that allow users to interact with digital products by{" "}
+ entering or selecting data. Choosing the right input type and structure is key to designing
+ efficient, user-friendly forms that support task completion and data accuracy.
+
+
+ A form input (also known as a form field) is used to capture user data. Common input types include text
+ fields, date pickers, number fields, radio buttons, checkboxes, toggles, and dropdowns. Forms should always
+ include a submission method, such as a submit button, link, or keyboard trigger, to complete the interaction.
+
+
+ ),
+ subSections: [
+ {
+ title: "Shared input characteristics",
+ content: (
+ <>
+
+ Although input fields vary in type and purpose, they often share a common set of features:
+
+
+
+ Placeholder: a short hint displayed inside the input field that describes its expected
+ value or purpose.
+
+
+ Size and max length: inputs can have both a visual size (width of the field) and a
+ character limit that defines how much text can be entered.
+
+
+ Prefix or suffix: some inputs include a visual element before or after the user input,
+ like currency symbols or units, to help clarify the expected data.
+
+
+ Helper text: additional information displayed below the field to guide the user in
+ providing the correct input.
+
+
+ Optional label: inputs that are not mandatory can be marked with an "Optional" tag to
+ set clear expectations.
+
+
+
+ ),
+ },
+ {
+ title: "Common input states",
+ content: (
+ <>
+ Most inputs can also present standard interactive or informative states:
+
+
+ Disabled: this state prevents users from interacting with the field. It's typically
+ used when a value is not applicable or editable under certain conditions or roles.
+
+
+ Error: when a user enters invalid or incomplete data, the input shows an error state,
+ often accompanied by a helpful message to guide corrections.
+
+
+ Read-only: the input is visible, focusable, and hoverable, but not editable. This is
+ ideal for fields with auto-calculated values. Unlike disabled fields, read-only inputs can still be
+ submitted with the form and are part of the form data.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Using text areas",
+ content: (
+ <>
+
+ While{" "}
+
+ text inputs
+ {" "}
+ are ideal for short, single-line entries such as names, email addresses, or search queries, text areas are
+ specifically designed to handle multi-line, freeform text. They offer users more space and
+ flexibility, making them the right choice for collecting messages, feedback, descriptions, or any content that
+ may extend beyond a sentence or two.
+
+
+ Choosing between a text input and a text area depends on the nature of the content you're asking for. For
+ instance, a "Job Title" field should use a standard text input, while a "Cover Letter" or "Project
+ Description" clearly benefits from a textarea. In some cases, even radio buttons, dropdowns, or checkboxes may
+ be more effective if the expected input can be predefined or simplified.
+
+
+ Understanding the user's intent and the expected length and complexity of the response is key to choosing the
+ right input type. Misusing a text area for short, simple answers can overwhelm users, while using a text input
+ for extended responses can result in frustration or poor usability.
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use the textarea for extended input: provide a textarea when users need to enter responses
+ longer than a single line, such as comments, messages, or descriptions.
+
+
+ Break down complex inputs: avoid using a textarea when a long question can be broken into
+ multiple, simpler fields. This helps reduce cognitive load and improves response quality.
+
+
+ Allow resizing only when beneficial: enable textarea resizing if the user may benefit from
+ adjusting the visible input area, especially for writing long or detailed content.
+
+
+ Avoid auto-expanding fields excessively: dynamic resizing can enhance usability, but ensure
+ it doesn't disrupt page layout or push key UI elements out of view.
+
+
+
+ Provide error messages for clarity:
+ {" "}
+ use the error prop to surface validation messages. Make sure these are clear and actionable.
+
+
+
+ Apply placeholder for hints, not instructions:
+ {" "}
+ use placeholder to provide example content or expected format (e.g., "Write your feedback
+ here..."). Avoid using it as a replacement for the label.
+
+
+
+ Leverage helperText to guide users:
+ {" "}
+ add context, tips to help users complete the input accurately (e.g., "Avoid including personal information
+ like passwords or credit card numbers.").
+
+
+ ),
+ },
+];
+
+const TextareaOverviewPage = () => (
+
+
+
+
+);
+
+export default TextareaOverviewPage;
diff --git a/apps/website/screens/components/textarea/overview/images/textarea_anatomy.png b/apps/website/screens/components/textarea/overview/images/textarea_anatomy.png
new file mode 100644
index 0000000000..4a96b3a1a0
Binary files /dev/null and b/apps/website/screens/components/textarea/overview/images/textarea_anatomy.png differ
diff --git a/apps/website/screens/components/textarea/specs/TextareaSpecsPage.tsx b/apps/website/screens/components/textarea/specs/TextareaSpecsPage.tsx
deleted file mode 100644
index 035b428f85..0000000000
--- a/apps/website/screens/components/textarea/specs/TextareaSpecsPage.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { DxcLink, DxcBulletedList, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import Figure from "@/common/Figure";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import Link from "next/link";
-import specsImage from "./images/textarea_specs.png";
-import statesImage from "./images/textarea_states.png";
-import anatomyImage from "./images/textarea_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
- The textarea color, typography, border, width and{" "}
- margin specifications are inherited from the text input, for reference check the{" "}
-
- text input
- {" "}
- component documentation.
-
-
- The textarea doesn't have the following text-input elements, therefore, their listed styles don't
- apply:
-
-
- Action
- Prefix / Suffix
- Error indicator
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- States: enabled, hover, focus, error and{" "}
- disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
-
- Helper text (Optional)
-
- Placeholder/Value
- Container
- Resizer
- Error message
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Spacing",
- content: (
-
-
-
-
Property
-
Element
-
Core token
-
Value
-
-
-
-
-
- padding-left
-
-
Texarea container
-
- spacing-8
-
-
1rem / 16px
-
-
-
- padding-right
-
-
Texarea container
-
- spacing-8
-
-
1rem / 16px
-
-
-
- margin-top
-
-
Texarea container
-
- spacing-4
-
-
0.5rem / 8px
-
-
-
- margin-bottom
-
-
Texarea container
-
- spacing-4
-
-
0.5rem / 8px
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- 1.3.1: Information and Relationships
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 3.3.1: Error Identification
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 3.3.2: Labels and Instructions
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 3.3.3: Error Suggestion
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- 4.1.2: Name, Role, Value
-
-
-
- ),
- },
- {
- title: "WAI-ARIA",
- content: (
-
-
- WAI-ARIA Accessible Rich Internet Applications 1.2 -{" "}
-
- textbox role
-
-
-
- ),
- },
- ],
- },
-];
-
-const TextareaSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TextareaSpecsPage;
diff --git a/apps/website/screens/components/textarea/specs/images/textarea_anatomy.png b/apps/website/screens/components/textarea/specs/images/textarea_anatomy.png
deleted file mode 100644
index 1042a81ce3..0000000000
Binary files a/apps/website/screens/components/textarea/specs/images/textarea_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/textarea/specs/images/textarea_specs.png b/apps/website/screens/components/textarea/specs/images/textarea_specs.png
deleted file mode 100644
index 73e26ab5e4..0000000000
Binary files a/apps/website/screens/components/textarea/specs/images/textarea_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/textarea/specs/images/textarea_states.png b/apps/website/screens/components/textarea/specs/images/textarea_states.png
deleted file mode 100644
index 7e85e7c0a3..0000000000
Binary files a/apps/website/screens/components/textarea/specs/images/textarea_states.png and /dev/null differ
diff --git a/apps/website/screens/components/textarea/usage/TextareaUsagePage.tsx b/apps/website/screens/components/textarea/usage/TextareaUsagePage.tsx
deleted file mode 100644
index d3f36bdc13..0000000000
--- a/apps/website/screens/components/textarea/usage/TextareaUsagePage.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 textarea when users need to enter text longer than a single line.
-
-
- Avoid using the textarea when complex questions can break up in simpler ones.
-
-
- ),
- },
-];
-
-const TextareaUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TextareaUsagePage;
diff --git a/apps/website/screens/components/toast/ToastPageLayout.tsx b/apps/website/screens/components/toast/ToastPageLayout.tsx
index f636cf1b6e..1c91170ec5 100644
--- a/apps/website/screens/components/toast/ToastPageLayout.tsx
+++ b/apps/website/screens/components/toast/ToastPageLayout.tsx
@@ -6,22 +6,21 @@ import { ReactNode } from "react";
const ToastPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/toast" },
- { label: "Usage", path: "/components/toast/usage" },
- { label: "Specifications", path: "/components/toast/specifications" },
+ { label: "Overview", path: "/components/toast" },
+ { label: "Code", path: "/components/toast/code" },
];
return (
-
+
-
+
The toast component is a lightweight notification element that appears temporarily to provide feedback or
updates to the user. It is commonly used to communicate non-critical information, such as success messages,
warning alerts, or brief updates.
-
+
{children}
diff --git a/apps/website/screens/components/toast/code/ToastCodePage.tsx b/apps/website/screens/components/toast/code/ToastCodePage.tsx
index 3ac8256f14..6fc9a8a0b9 100644
--- a/apps/website/screens/components/toast/code/ToastCodePage.tsx
+++ b/apps/website/screens/components/toast/code/ToastCodePage.tsx
@@ -1,14 +1,12 @@
import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
-import TableCode, { ExtendedTableCode } from "@/common/TableCode";
+import Code, { TableCode, ExtendedTableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
import Example from "@/common/example/Example";
import basic from "./examples/basicUsage";
import semantic from "./examples/semantic";
import loading from "./examples/loading";
-import Code from "@/common/Code";
const actionTypeString = `{
icon: string |
@@ -36,6 +34,21 @@ const sections = [
+
+
+
+
+ children
+
+
+
+ ReactNode
+
+
+ Tree of components from which the useToast hook can be triggered.
+
+
-
+
duration
@@ -49,14 +62,6 @@ const sections = [
3000
-
-
children
-
- ReactNode
-
-
Tree of components from which the useToast hook can be triggered.
-
+
message
@@ -296,15 +301,11 @@ const sections = [
},
];
-const ToastCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const ToastCodePage = () => (
+
+
+
+
+);
export default ToastCodePage;
diff --git a/apps/website/screens/components/toast/code/examples/basicUsage.ts b/apps/website/screens/components/toast/code/examples/basicUsage.ts
deleted file mode 100644
index 24249ddc03..0000000000
--- a/apps/website/screens/components/toast/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { DxcButton, DxcInset, useToast } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const toast = useToast();
-
- return (
-
- {
- toast.default({ message: "This is a basic message." });
- }}
- />
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcInset,
- useToast,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/toast/code/examples/basicUsage.tsx b/apps/website/screens/components/toast/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..0c173ba565
--- /dev/null
+++ b/apps/website/screens/components/toast/code/examples/basicUsage.tsx
@@ -0,0 +1,24 @@
+import { DxcButton, DxcInset, useToast } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const toast = useToast();
+
+ return (
+
+ {
+ toast.default({ message: "This is a basic message." });
+ }}
+ />
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcInset,
+ useToast,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/toast/code/examples/loading.ts b/apps/website/screens/components/toast/code/examples/loading.ts
deleted file mode 100644
index 09cf668688..0000000000
--- a/apps/website/screens/components/toast/code/examples/loading.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DxcButton, DxcInset, useToast } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const toast = useToast();
-
- const loadProcess = () => {
- const loadingToast = toast.loading({ message: "Loading process..." });
-
- setTimeout(() => {
- loadingToast();
- toast.success({ message: "Process finished successfully." });
- }, 6000);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcInset,
- useToast,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/toast/code/examples/loading.tsx b/apps/website/screens/components/toast/code/examples/loading.tsx
new file mode 100644
index 0000000000..b030ea60ff
--- /dev/null
+++ b/apps/website/screens/components/toast/code/examples/loading.tsx
@@ -0,0 +1,31 @@
+import { DxcButton, DxcInset, useToast } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const toast = useToast();
+
+ const loadProcess = () => {
+ const loadingToast = toast.loading({ message: "Loading process..." });
+
+ setTimeout(() => {
+ loadingToast();
+ toast.success({ message: "Process finished successfully." });
+ }, 6000);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcInset,
+ useToast,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/toast/code/examples/semantic.ts b/apps/website/screens/components/toast/code/examples/semantic.ts
deleted file mode 100644
index 0eecef4f00..0000000000
--- a/apps/website/screens/components/toast/code/examples/semantic.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { DxcButton, DxcFlex, DxcInset, useToast } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const toast = useToast();
-
- const action = { label: "Action", onClick: () => {} };
-
- return (
-
-
- {
- toast.info({ message: "This is a information message.", action });
- }}
- />
- {
- toast.success({ message: "This is a success message.", action });
- }}
- />
- {
- toast.warning({ message: "This is a warning message.", action });
- }}
- />
-
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcFlex,
- DxcInset,
- useToast,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/toast/code/examples/semantic.tsx b/apps/website/screens/components/toast/code/examples/semantic.tsx
new file mode 100644
index 0000000000..000145b164
--- /dev/null
+++ b/apps/website/screens/components/toast/code/examples/semantic.tsx
@@ -0,0 +1,44 @@
+import { DxcButton, DxcFlex, DxcInset, useToast } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const toast = useToast();
+
+ const action = { label: "Action", onClick: () => {} };
+
+ return (
+
+
+ {
+ toast.info({ message: "This is a information message.", action });
+ }}
+ />
+ {
+ toast.success({ message: "This is a success message.", action });
+ }}
+ />
+ {
+ toast.warning({ message: "This is a warning message.", action });
+ }}
+ />
+
+
+ );
+}`;
+
+const scope = {
+ DxcButton,
+ DxcFlex,
+ DxcInset,
+ useToast,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/toast/overview/ToastOverviewPage.tsx b/apps/website/screens/components/toast/overview/ToastOverviewPage.tsx
new file mode 100644
index 0000000000..0f861bced1
--- /dev/null
+++ b/apps/website/screens/components/toast/overview/ToastOverviewPage.tsx
@@ -0,0 +1,247 @@
+import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable, DxcTypography } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
+import Figure from "@/common/Figure";
+import Image from "@/common/Image";
+import semanticToasts from "./images/semantic_toasts.png";
+import loadingToast from "./images/loading_toast.png";
+import toastsPositioning from "./images/toasts_stacking.png";
+import anatomy from "./images/toast_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The toast component provides brief, non-intrusive notifications to users, appearing{" "}
+ temporarily on the screen without disrupting their workflow. Typically used for system
+ messages, confirmations, or alerts, toasts help communicate important feedback in response to user actions. They
+ automatically disappear after a set duration but can also include manual dismissal options. By maintaining
+ visibility without demanding immediate interaction, toasts enhance user experience while keeping the interface
+ clean and efficient.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: the structural wrapper that holds all elements of the toast, defining its size,
+ background, and layout while ensuring proper visibility within the interface.
+
+
+ Icon: an optional icon indicating the type of message (e.g., success, error, warning,
+ info).
+
+
+ Text message: a short text message providing the main content of the toast.
+
+
+ Action: an optional button with quick and straightforward action like "Undo" or "View"
+ depending on the context.
+
+
+ Close action: to allow manual dismissal of the toast.
+
+
+
+ ),
+ },
+ {
+ title: "Using toasts",
+ subSections: [
+ {
+ title: "Loading status toast",
+ content: (
+ <>
+
+ A loading toast provides users with real-time feedback during an ongoing process. Instead
+ of a static icon, a spinner is displayed to visually indicate that the process is still in progress. This
+ toast remains visible until the process is complete, ensuring users are aware that the system is working.
+ Once the task is finished, the loading toast will automatically disappear, and a follow-up toast will
+ appear in the queue to confirm the outcome of the process.
+
+
+
+
+
+ ),
+ },
+
+ {
+ title: "Position and order on screen",
+ content: (
+ <>
+
+ Toasts should be positioned in a way that ensures they are easily noticeable without obstructing the main
+ content or interrupting the user's workflow.
+
+
+
+ Bottom-Right: Toasts are aligned to the bottom-right corner of the screen.
+
+
+ Bottom-Center: On small devices, toasts are positioned in the bottom-center of the
+ screen.
+
+
+
+ This position allows users to receive notifications without interfering with primary tasks or content.
+
+
+
+ Toasts should appear and disappear in a specific order to ensure clarity and consistency in user
+ notifications:
+
+
+
+ Order of appearance: Toasts appear in the order they are triggered. This means the
+ newest toast will appear at the bottom of the stack. This ensures users see the most recent notification
+ last, making it easier to track the sequence of events.
+
+
+ Order of disappearance: Toasts disappear in the same order they appeared. This means
+ the oldest toast will disappear first, maintaining a First In, First Out (FIFO) system. This order helps
+ maintain a logical flow and ensures users have enough time to read each notification.
+
+
+
+ ),
+ },
+ {
+ title: "Managing multiple toasts",
+ content: (
+ <>
+
+ When multiple toasts appear on the screen simultaneously, it's important to manage their display to ensure
+ they don't overlap and that each one remains visible and readable.
+
+ Key practices to ensure they remain effective and user-friendly:
+
+
+ Stacking: Toasts are displayed in a vertical stack. New toasts are added to the stack
+ in a consistent location (at the bottom).
+
+
+ Offset spacing: Small gap between toasts to visually separate them (8px)
+
+
+ Limit: Only 5 toast max. should be displayed at the same time.
+
+
+ Sequential display: Display toasts one after another rather than all at once.
+
+
+ Timing: Set a uniform duration for each toast to stay visible (3-5 seconds).
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Semantic toasts",
+ content: (
+ <>
+ Toasts can be categorized based on their purpose:
+
+
+
+
Semantic
+ Description
+
+
+
+
+
+
+ Default
+
+
+
Used for neutral messages or general notifications. (i.e.. Settings have been updated.)
+
+
+
+
+ Info
+
+
+
+ Displays general information or updates. (i.e. New message received. Check inbox. New update available.
+ Download now.)
+
+
+
+
+
+ Success
+
+
+
+ Indicates successful completion of an action. (i.e. Operation successful. Changes saved. Profile updated
+ successfully.)
+
+
+
+
+
+ Warning
+
+
+
+ Provides cautionary advice without blocking actions. (i.e. Unstable connection. Proceed with caution.)
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Keep messages concise and clear: ensure toasts are easy to read at a glance by using short,
+ direct language that conveys the message effectively.
+
+
+ Avoid obstructing main content: position toasts in the bottom-right corner of the screen to
+ keep them visible without interfering with the user's workflow.
+
+
+ Prevent notification overload: display no more than five toasts at a time to maintain clarity
+ and avoid overwhelming users with excessive messages. If additional notifications are needed, consider
+ queueing them.
+
+
+ Ensure consistency: use a uniform visual style, placement, and behavior for all toasts across
+ the application to create a seamless user experience.
+
+
+ Prioritize urgency and relevance: reserve toasts for important, time-sensitive information
+ and avoid using them for non-critical updates that could be delivered through other means.
+
+
+ Allow for manual dismissal when necessary: while toasts should disappear automatically after
+ a set duration, providing a close button can improve accessibility and user control.
+
+
+ ),
+ },
+];
+
+const TextareaOverviewPage = () => (
+
+
+
+
+);
+
+export default TextareaOverviewPage;
diff --git a/apps/website/screens/components/toast/overview/images/loading_toast.png b/apps/website/screens/components/toast/overview/images/loading_toast.png
new file mode 100644
index 0000000000..05d3990ae7
Binary files /dev/null and b/apps/website/screens/components/toast/overview/images/loading_toast.png differ
diff --git a/apps/website/screens/components/toast/overview/images/semantic_toasts.png b/apps/website/screens/components/toast/overview/images/semantic_toasts.png
new file mode 100644
index 0000000000..1321c30856
Binary files /dev/null and b/apps/website/screens/components/toast/overview/images/semantic_toasts.png differ
diff --git a/apps/website/screens/components/toast/overview/images/toast_anatomy.png b/apps/website/screens/components/toast/overview/images/toast_anatomy.png
new file mode 100644
index 0000000000..2c4b85ce26
Binary files /dev/null and b/apps/website/screens/components/toast/overview/images/toast_anatomy.png differ
diff --git a/apps/website/screens/components/toast/overview/images/toasts_stacking.png b/apps/website/screens/components/toast/overview/images/toasts_stacking.png
new file mode 100644
index 0000000000..ac9f06a413
Binary files /dev/null and b/apps/website/screens/components/toast/overview/images/toasts_stacking.png differ
diff --git a/apps/website/screens/components/toast/specs/ToastSpecsPage.tsx b/apps/website/screens/components/toast/specs/ToastSpecsPage.tsx
deleted file mode 100644
index e34c41e41c..0000000000
--- a/apps/website/screens/components/toast/specs/ToastSpecsPage.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import specs from "./images/toast_specs.png";
-import anatomy from "./images/toast_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
- Icon
- Text message
- Action
- Close action
-
-
- ),
- },
- {
- title: "Design tokens",
- content: This component currently has no design tokens.,
- },
-];
-
-const TextareaSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TextareaSpecsPage;
diff --git a/apps/website/screens/components/toast/specs/images/toast_anatomy.png b/apps/website/screens/components/toast/specs/images/toast_anatomy.png
deleted file mode 100644
index b22b195bc6..0000000000
Binary files a/apps/website/screens/components/toast/specs/images/toast_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/toast/specs/images/toast_specs.png b/apps/website/screens/components/toast/specs/images/toast_specs.png
deleted file mode 100644
index 7666001d8d..0000000000
Binary files a/apps/website/screens/components/toast/specs/images/toast_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/toast/usage/ToastUsagePage.tsx b/apps/website/screens/components/toast/usage/ToastUsagePage.tsx
deleted file mode 100644
index b6de1ae8d5..0000000000
--- a/apps/website/screens/components/toast/usage/ToastUsagePage.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable, DxcTypography } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import semanticToasts from "./images/semantic_toasts.png";
-import loadingToast from "./images/loading_toast.png";
-import toastsPositioning from "./images/toasts_positioning.png";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
- Keep messages concise and clear to ensure quick readability.
-
- Position toasts in the bottom-right to avoid obstructing main content.
-
-
- Display no more than 5 toasts simultaneously to avoid overwhelming users.
-
-
- Maintain a consistent visual style and placement for all toasts across the application.
-
-
- ),
- },
- {
- title: "Semantic toasts",
- content: (
- <>
- Toasts can be categorized based on their purpose:
-
-
-
-
Semantic
- Description
-
-
-
-
-
-
- Default
-
-
-
Used for neutral messages or general notifications. (ie. Settings have been updated.)
-
-
-
-
- Info
-
-
-
- Displays general information or updates. (ie. New message received. Check inbox. - New update available.
- Download now.)
-
-
-
-
-
- Warning
-
-
-
- Indicates successful completion of an action. (ie. Operation successful. Changes saved. - Profile
- updated successfully.)
-
-
-
-
-
- Success
-
-
-
- Provides cautionary advice without blocking actions. (ie. Unstable connection. Proceed with caution.)
-
-
-
-
-
-
- ),
- },
- {
- title: "Loading status toast",
- content: (
- <>
-
- A loading toast provides users with real-time feedback during an ongoing process. Instead of a static icon, a
- spinner is displayed to visually indicate that the process is still in progress. This toast remains visible
- until the process is complete, ensuring users are aware that the system is working. Once the task is finished,
- the loading toast will automatically disappear, and a follow-up toast will appear in the queue to confirm the
- outcome of the process.
-
-
-
-
-
- ),
- },
- {
- title: "Position and order on screen",
- content: (
- <>
-
- Toasts should be positioned in a way that ensures they are easily noticeable without obstructing the main
- content or interrupting the user's workflow.
-
-
-
- Bottom-Right: Toasts are aligned to the bottom-right corner of the screen.
-
-
- Bottom-Center: On small devices, toasts are positioned in the bottom-center of the screen.
-
-
-
- This positions allows users to receive notifications without them interfering with primary tasks or content.
-
-
-
- Toasts should appear and disappear in a specific order to ensure clarity and consistency in user
- notifications:
-
-
-
- Order of appearance: Toasts appear in the order they are triggered. This means the newest
- toast will appear at the bottom of the stack. This ensures users see the most recent notification last,
- making it easier to track the sequence of events.
-
-
- Order of disappearance: Toasts disappear in the same order they appeared. This means the
- oldest toast will disappear first, maintaining a First In, First Out (FIFO) system. This order helps
- maintain a logical flow and ensures users have enough time to read each notification.
-
-
-
- ),
- },
- {
- title: "Managing multiple toasts",
- content: (
- <>
-
- When multiple toasts appear on the screen simultaneously, it's important to manage their display to ensure
- they don't overlap and that each one remains visible and readable.
-
- Key practices to ensure they remain effective and user-friendly:
-
-
- Stacking: Toasts are displayed in a vertical stack. New toasts are added to the stack in a
- consistent location (at the bottom).
-
-
- Offset spacing: Small gap between toasts to visually separate them (8px)
-
-
- Limit: Only 5 toast max. should be displayed at the same time.
-
-
- Sequential display: Display toasts one after another rather than all at once.
-
-
- Timing: Set a uniform duration for each toast to stay visible (3-5 seconds).
-
-
-
- ),
- },
-];
-
-const TextareaUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TextareaUsagePage;
diff --git a/apps/website/screens/components/toast/usage/images/loading_toast.png b/apps/website/screens/components/toast/usage/images/loading_toast.png
deleted file mode 100644
index 022b16f8ac..0000000000
Binary files a/apps/website/screens/components/toast/usage/images/loading_toast.png and /dev/null differ
diff --git a/apps/website/screens/components/toast/usage/images/semantic_toasts.png b/apps/website/screens/components/toast/usage/images/semantic_toasts.png
deleted file mode 100644
index 71053efd4c..0000000000
Binary files a/apps/website/screens/components/toast/usage/images/semantic_toasts.png and /dev/null differ
diff --git a/apps/website/screens/components/toast/usage/images/toasts_positioning.png b/apps/website/screens/components/toast/usage/images/toasts_positioning.png
deleted file mode 100644
index 3d34099ff3..0000000000
Binary files a/apps/website/screens/components/toast/usage/images/toasts_positioning.png and /dev/null differ
diff --git a/apps/website/screens/components/toggle-group/ToggleGroupPageLayout.tsx b/apps/website/screens/components/toggle-group/ToggleGroupPageLayout.tsx
index e38d6e79d9..ff5b62f563 100644
--- a/apps/website/screens/components/toggle-group/ToggleGroupPageLayout.tsx
+++ b/apps/website/screens/components/toggle-group/ToggleGroupPageLayout.tsx
@@ -6,26 +6,21 @@ import { ReactNode } from "react";
const ToggleGroupPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/toggle-group" },
- { label: "Usage", path: "/components/toggle-group/usage" },
- {
- label: "Specifications",
- path: "/components/toggle-group/specifications",
- },
+ { label: "Overview", path: "/components/toggle-group" },
+ { label: "Code", path: "/components/toggle-group/code" },
];
return (
-
+
-
-
+
+
- Toggle buttons can be used to put together related options that share a common attribute modification. It
- allows the user to switch from one selected option to another in the same control, having one option
- selected at a time. Also, there can be another variation that allows selecting multiple options from the
- current toggle group.
+ The toggle group component is a set of toggle buttons that function as a unified control, allowing users to
+ make either single or multiple selections. It is ideal for grouping related actions or options within a
+ compact and interactive interface.
-
+
{children}
diff --git a/apps/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx b/apps/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx
index 86c4ef9c8c..0307b7cd87 100644
--- a/apps/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx
+++ b/apps/website/screens/components/toggle-group/code/ToggleGroupCodePage.tsx
@@ -1,13 +1,20 @@
-import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
-import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import StatusBadge from "@/common/StatusBadge";
-import TableCode from "@/common/TableCode";
+import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
+
+const optionTypeString = `{
+ disabled?: boolean;
+ icon?: string |
+ (React.ReactNode
+ & React.SVGProps);
+ label?: string;
+ value: string;
+}`;
const sections = [
{
@@ -32,81 +39,16 @@ const sections = [
-
-
value
-
- number | number[]
-
-
- The key(s) of the selected value(s). If the toggle group component doesn't allow multiple selection, it
- must be one unique value. If the component allows multiple selection, value must be an array. If
- undefined, the component will be uncontrolled and the value will be managed internally by the component.
-
- An array of objects representing the selectable options. Each object has the following properties:
-
-
- label: String with the option display value.
-
-
- icon:{" "}
-
- Material Symbol
- {" "}
- name or SVG element used as the icon of an option.
-
-
- value: Number with the option inner value.
-
-
- title: Text representing advisory information related to an option. Under the hood, it also
- serves as an accessible label for the icon.
-
-
+ 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.
- 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.
+ Option[]
+
+ being Option an object with the following properties:
+
+ {optionTypeString}
+
An array of objects representing the selectable options.
-
+
+
orientation
+
+ 'horizontal' | 'vertical'
+
+
The orientation of the toggle group.
+
+ 'horizontal'
+
+
tabIndex
@@ -155,6 +113,18 @@ const sections = [
0
+
+
value
+
+ number | number[]
+
+
+ The key(s) of the selected value(s). If the toggle group component doesn't allow multiple selection, it
+ must be one unique value. If the component allows multiple selection, value must be an array. If
+ undefined, the component will be uncontrolled and the value will be managed internally by the component.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcContainer,
+ DxcFlex,
+ DxcInset,
+ DxcToggleGroup,
+ useRef,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/toggle-group/overview/ToggleGroupOverviewPage.tsx b/apps/website/screens/components/toggle-group/overview/ToggleGroupOverviewPage.tsx
new file mode 100644
index 0000000000..85064cb1b2
--- /dev/null
+++ b/apps/website/screens/components/toggle-group/overview/ToggleGroupOverviewPage.tsx
@@ -0,0 +1,190 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import Image from "@/common/Image";
+import anatomy from "./images/toggle_group_anatomy.png";
+import singleSelection from "./examples/singleSelection";
+import multipleSelection from "./examples/multipleSelection";
+import orientation from "./examples/orientation";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The toggle group component provides a flexible way to present related options or actions within
+ a single interface. It consists of multiple toggle buttons, allowing users to make either single or multiple
+ selections depending on the configuration. This component is particularly useful for settings, filtering
+ options, or mode switching, where users need to quickly toggle between states. By grouping
+ these actions together, it enhances usability and keeps the interface organized, ensuring a seamless interaction
+ experience.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: the structural wrapper that holds all toggle buttons together.
+
+
+ Icon: an optional visual element within a toggle button that helps users quickly identify
+ its function or meaning.
+
+
+ Label: the textual representation inside each toggle button, describing its function or
+ selection state.
+
+
+ Toggle button(selected): a button in an active state, indicating that the user
+ has chosen this option.
+
+
+ Toggle button(unselected): a button in its default or inactive state. It remains
+ visually subdued compared to the selected button but is still clearly visible and interactive, allowing
+ users to switch selections easily.
+
+
+
+ ),
+ },
+ {
+ title: "Variants",
+ content: (
+
+ Depending on the number of actions or options the user can select on a toggle group, there are two different
+ variants of the component.
+
+ ),
+ subSections: [
+ {
+ title: "Single selection",
+ content: (
+
+ The single selection variant allows users to select{" "}
+ only one option at a time. When a new option is selected, the previous one is automatically
+ deselected. This variant is ideal for scenarios where users need to toggle between mutually exclusive
+ options, ensuring clarity and preventing conflicting selections.
+
+ ),
+ subSections: [
+ {
+ title: "Use cases",
+ content: (
+ <>
+
+
+ View selection: allowing users to switch between different data presentation
+ formats, such as grid view vs. list view in a product catalog.
+
+
+ Mode switching: Enabling users to toggle between modes like{" "}
+ light mode vs. dark mode in an interface.
+
+
+ Filter selection: Helping users refine content by choosing a{" "}
+ single category filter in dashboards or reports.
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Multiple selection",
+ content: (
+
+ The multiple selection variant of the toggle group component allows users to select
+ multiple options at the same time. Unlike the single selection variant, this version enables users to
+ activate or deactivate multiple toggles independently, making it useful for scenarios where multiple choices
+ can be applied simultaneously.
+
+ ),
+ subSections: [
+ {
+ title: "Use cases",
+ content: (
+ <>
+
+
+ Formatting options: enabling users to apply bold,{" "}
+ italic, and underline text styles simultaneously in a text editor.
+
+
+ Risk assessment options: underwriters can enable multiple risk factors when
+ evaluating a client, such as pre-existing conditions, vehicle age,
+ and past claim history.
+
+
+ Filtering: allowing users to refine searches by toggling filters like "in
+ progress", "ready to review" or "done".
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Orientation",
+ content: (
+ <>
+
+ Although not technically a variant, the toggle group can also be{" "}
+ stacked in two different ways: horizontally and vertically. Users can choose the option
+ that better fits their needs according to layout constraints.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Choose the right selection mode: use single selection when only one option
+ can be active at a time (e.g., selecting a payment method). Use multiple selection when users
+ can activate several options simultaneously (e.g., selecting policy add-ons).
+
+
+ Group related actions logically: ensure that the toggle buttons represent actions or choices
+ that are related to each other, helping users make clear and informed selections.
+
+
+ Use appropriate labels and icons: labels should be concise and self-explanatory. If using
+ icons, ensure they clearly represent their respective actions or choices.
+
+
+ Stack options based on content needs: use a horizontal layout when there are
+ only a few options and space allows, making comparisons easier. Use a vertical layout when
+ dealing with multiple choices or longer text labels to enhance readability.
+
+
+ Be mindful of where you place the toggle group: this component is not meant to replace{" "}
+ radio buttons, checkboxes, or switches, as it does not
+ register selections as form inputs. If the user needs to provide structured answers, use the appropriate form
+ elements instead.
+
+
+ ),
+ },
+];
+
+const ToggleGroupOverviewPage = () => (
+
+
+
+
+);
+
+export default ToggleGroupOverviewPage;
diff --git a/apps/website/screens/components/toggle-group/overview/examples/multipleSelection.tsx b/apps/website/screens/components/toggle-group/overview/examples/multipleSelection.tsx
new file mode 100644
index 0000000000..87f3a32382
--- /dev/null
+++ b/apps/website/screens/components/toggle-group/overview/examples/multipleSelection.tsx
@@ -0,0 +1,53 @@
+import { DxcInset, DxcToggleGroup } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ {
+ value: 1,
+ icon: "format_bold",
+ title: "Bold",
+ },
+ {
+ value: 2,
+ icon: "format_italic",
+ title: "Italic",
+ },
+ {
+ value: 3,
+ icon: "format_underlined",
+ title: "Underlined",
+ },
+ {
+ value: 4,
+ icon: "format_align_left",
+ title: "Align left",
+ },
+ {
+ value: 5,
+ icon: "format_align_center",
+ title: "Align center",
+ },
+ {
+ value: 6,
+ icon: "format_align_right",
+ title: "Align right",
+ },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcToggleGroup,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/toggle-group/overview/examples/orientation.tsx b/apps/website/screens/components/toggle-group/overview/examples/orientation.tsx
new file mode 100644
index 0000000000..5d3f557e15
--- /dev/null
+++ b/apps/website/screens/components/toggle-group/overview/examples/orientation.tsx
@@ -0,0 +1,45 @@
+import { DxcFlex, DxcInset, DxcToggleGroup } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ {
+ value: 1,
+ icon: "wifi",
+ label: "Wifi",
+ },
+ {
+ value: 2,
+ label: "Ethernet",
+ },
+ {
+ value: 3,
+ icon: "5g",
+ label: "5G",
+ },
+ ];
+
+ return (
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcFlex,
+ DxcInset,
+ DxcToggleGroup,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/toggle-group/overview/examples/singleSelection.tsx b/apps/website/screens/components/toggle-group/overview/examples/singleSelection.tsx
new file mode 100644
index 0000000000..3649abb2d9
--- /dev/null
+++ b/apps/website/screens/components/toggle-group/overview/examples/singleSelection.tsx
@@ -0,0 +1,42 @@
+import { DxcInset, DxcToggleGroup } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const options = [
+ {
+ value: 1,
+ label: "Not started",
+ },
+ {
+ value: 2,
+ label: "In progress",
+ },
+ {
+ value: 3,
+ label: "Ready to review",
+ },
+ {
+ value: 4,
+ label: "Completed",
+ },
+ {
+ value: 5,
+ label: "Awaiting approval",
+ },
+ ];
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcToggleGroup,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/toggle-group/overview/images/toggle_group_anatomy.png b/apps/website/screens/components/toggle-group/overview/images/toggle_group_anatomy.png
new file mode 100644
index 0000000000..a5411c91dc
Binary files /dev/null and b/apps/website/screens/components/toggle-group/overview/images/toggle_group_anatomy.png differ
diff --git a/apps/website/screens/components/toggle-group/specs/ToggleGroupSpecsPage.tsx b/apps/website/screens/components/toggle-group/specs/ToggleGroupSpecsPage.tsx
deleted file mode 100644
index c6f672a87c..0000000000
--- a/apps/website/screens/components/toggle-group/specs/ToggleGroupSpecsPage.tsx
+++ /dev/null
@@ -1,680 +0,0 @@
-import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import toggleGroupAnatomy from "./images/toggle_group_anatomy.png";
-import toggleGroupStates from "./images/toggle_group_states.png";
-import toggleGroupSpecs from "./images/toggle_group_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- Different states are defined in the life cycle of the component: unselected enabled,{" "}
- unselected hover, unselected focus, unselected active,{" "}
- unselected disabled, selected enabled, selected hover,{" "}
- selected focus, selected active and selected disabled
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Label
- Helper text
- Container
- Button
- Button icon
- Button label
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
+ Preferred position for displaying the tooltip. It may adjust automatically based on available space.
+
+
+ 'bottom'
-
Content in which the Tooltip will be displayed.
-
-
@@ -63,15 +68,11 @@ const sections = [
},
];
-const TooltipCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const TooltipCodePage = () => (
+
+
+
+
+);
export default TooltipCodePage;
diff --git a/apps/website/screens/components/tooltip/code/examples/basicUsage.ts b/apps/website/screens/components/tooltip/code/examples/basicUsage.ts
deleted file mode 100644
index bfa50a6fe0..0000000000
--- a/apps/website/screens/components/tooltip/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DxcTooltip, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
- );
- }`;
-
-const scope = {
- DxcTooltip,
- DxcButton,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/tooltip/code/examples/basicUsage.tsx b/apps/website/screens/components/tooltip/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..0d6d46d7d7
--- /dev/null
+++ b/apps/website/screens/components/tooltip/code/examples/basicUsage.tsx
@@ -0,0 +1,19 @@
+import { DxcTooltip, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+
+
+ );
+ }`;
+
+const scope = {
+ DxcTooltip,
+ DxcButton,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx
new file mode 100644
index 0000000000..48259c61c9
--- /dev/null
+++ b/apps/website/screens/components/tooltip/overview/TooltipOverviewPage.tsx
@@ -0,0 +1,102 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import positions from "./images/tooltip_positions.png";
+import Image from "@/common/Image";
+import anatomy from "./images/tooltip_anatomy.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The tooltip component{" "}
+ provides contextual information when users hover over, focus on, or interact with an element.
+ It enhances usability by offering additional details without cluttering the interface. Tooltips are especially
+ useful for clarifying icons, abbreviations, or complex functionalities, ensuring users can access helpful
+ explanations without disrupting their workflow.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Container: it's the structure that holds the component's content. It appears near the
+ target element when triggered and provides a contrasting background to ensure readability.
+
+
+ Icon: a small directional indicator, often in the form of a triangle or arrow, that
+ visually connects the tooltip to the element it describes, reinforcing the relationship between them.
+
+
+ Label: the text content inside the component that provides additional context or
+ information about the associated element, ensuring clarity without taking up permanent screen space.
+
+
+
+ ),
+ },
+ {
+ title: "Placing tooltips",
+ content: (
+ <>
+
+ Depending on the tooltip's placement relative to the object it describes, there are four possible
+ configurations: top, right, bottom, and{" "}
+ left.
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use tooltips for clarification, not essential information: tooltips should provide additional
+ context for UI elements but should not contain crucial instructions or actions users must take to complete a
+ task.
+
+
+ Keep content short and clear: avoid long sentences or excessive details. The tooltip should
+ be a quick reference, not a replacement for proper UI labels or descriptions.
+
+
+ Ensure tooltips are accessible: they should be triggered not only on hover but also on
+ keyboard focus so that users navigating with assistive technologies can access them.
+
+
+ Place tooltips thoughtfully: they should not obstruct important content or interactive
+ elements. Position them near the element they describe while maintaining readability.
+
+
+ Avoid excessive tooltips: overuse can clutter the interface and become distracting. If too
+ many tooltips are needed, consider improving the overall UI clarity instead.
+
+
+ Use appropriate dismissal behavior: tooltips should disappear when users move away from the
+ trigger but remain visible long enough to be read comfortably. A short delay before appearing can prevent
+ accidental activations.
+
+
+ Do not use tooltips for critical messages: warnings, errors, or essential system feedback
+ should be displayed using more persistent components like alerts, modals, or inline messages.
+
+
+ ),
+ },
+];
+
+const TooltipOverviewPage = () => (
+
+
+
+
+);
+
+export default TooltipOverviewPage;
diff --git a/apps/website/screens/components/tooltip/overview/images/tooltip_anatomy.png b/apps/website/screens/components/tooltip/overview/images/tooltip_anatomy.png
new file mode 100644
index 0000000000..0c8579d9c2
Binary files /dev/null and b/apps/website/screens/components/tooltip/overview/images/tooltip_anatomy.png differ
diff --git a/apps/website/screens/components/tooltip/usage/images/tooltip_positions.png b/apps/website/screens/components/tooltip/overview/images/tooltip_positions.png
similarity index 100%
rename from apps/website/screens/components/tooltip/usage/images/tooltip_positions.png
rename to apps/website/screens/components/tooltip/overview/images/tooltip_positions.png
diff --git a/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx b/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx
deleted file mode 100644
index 5b72ed4be6..0000000000
--- a/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import DocFooter from "@/common/DocFooter";
-import tooltipAnatomy from "./images/tooltip_anatomy.png";
-import tooltipSpecs from "./images/tooltip_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Container
- Label
- Chevron
-
-
- ),
- },
- {
- title: "Design tokens",
- content: (
- <>
- This component currently has no design tokens.
-
- ),
- },
-];
-
-const TooltipSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TooltipSpecsPage;
diff --git a/apps/website/screens/components/tooltip/specs/images/tooltip_anatomy.png b/apps/website/screens/components/tooltip/specs/images/tooltip_anatomy.png
deleted file mode 100644
index 622bc9ecdc..0000000000
Binary files a/apps/website/screens/components/tooltip/specs/images/tooltip_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/tooltip/specs/images/tooltip_specs.png b/apps/website/screens/components/tooltip/specs/images/tooltip_specs.png
deleted file mode 100644
index c85c43c775..0000000000
Binary files a/apps/website/screens/components/tooltip/specs/images/tooltip_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx b/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx
deleted file mode 100644
index efb4f954a1..0000000000
--- a/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import positions from "./images/tooltip_positions.png";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-
-const sections = [
- {
- title: "Usage",
- subSections: [
- {
- title: "Do's",
- content: (
-
-
- Use tooltips when sharing valuable information as clearly and concisely as possible.
-
-
- Describe icons by using tooltips. Tooltips effectively provide context and clarity for components without
- labels, delivering helpful information directly to the user when they hover over or focus on an icon.
-
-
- Maintain consistency in the positioning of tooltips throughout the user interface.
-
-
- Use clear and accurate phrasing when placing the text inside a tooltip.
-
-
- ),
- },
- {
- title: "Don'ts",
- content: (
-
-
- Avoid using tooltips to convey crucial information. This type of information must always be present, not
- only when the user hovers over or focuses on a component.
-
-
- Don't place tooltips where they might cover or obscure important information or critical areas of the
- interface that need to remain visible at all times.
-
- Don't use tooltips to communicate error messages.
-
- Avoid using tooltips in interfaces where there is sufficient space to display additional information
- directly, without the need for hiding it.
-
-
- ),
- },
- ],
- },
- {
- title: "Position",
- content: (
- <>
-
- Depending on the tooltip's placement relative to the object it describes, there are four possible
- configurations: top, right, bottom and left.
-
-
-
-
-
- ),
- },
-];
-
-const TooltipUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TooltipUsagePage;
diff --git a/apps/website/screens/components/typography/TypographyPageLayout.tsx b/apps/website/screens/components/typography/TypographyPageLayout.tsx
index 7354fe382e..2f79f3b5a9 100644
--- a/apps/website/screens/components/typography/TypographyPageLayout.tsx
+++ b/apps/website/screens/components/typography/TypographyPageLayout.tsx
@@ -1,21 +1,24 @@
import PageHeading from "@/common/PageHeading";
-import { DxcFlex, DxcAlert } from "@dxc-technology/halstack-react";
+import { DxcFlex, DxcAlert, DxcParagraph } from "@dxc-technology/halstack-react";
import TabsPageHeading from "@/common/TabsPageLayout";
import ComponentHeading from "@/common/ComponentHeading";
import { ReactNode } from "react";
const TypographyPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/typography" },
- { label: "Usage", path: "/components/typography/usage" },
- { label: "Specifications", path: "/components/typography/specifications" },
+ { label: "Overview", path: "/components/typography" },
+ { label: "Code", path: "/components/typography/code" },
];
return (
-
+
-
+
+
+ Typography component is a primitive. This means that using this component, you can create any typography
+ variant that is included in the Halstack Design System.
+ {
}}
closable={false}
/>
-
+
{children}
diff --git a/apps/website/screens/components/typography/code/TypographyCodePage.tsx b/apps/website/screens/components/typography/code/TypographyCodePage.tsx
index 64fd3f7330..199b916c57 100644
--- a/apps/website/screens/components/typography/code/TypographyCodePage.tsx
+++ b/apps/website/screens/components/typography/code/TypographyCodePage.tsx
@@ -1,193 +1,195 @@
import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
import basicUsage from "./examples/basicUsage";
import nestedTexts from "./examples/nestedTexts";
-import TableCode from "@/common/TableCode";
+import Code, { TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
-import Code from "@/common/Code";
const sections = [
{
title: "Props",
content: (
-
-
Name
-
Type
-
Description
-
Default
-
-
-
display
-
- 'inline' | 'block'
-
-
- Specifies the display CSS property of the component.
-
+ Specifies the white-space CSS property of the component.
+
+
+ 'normal'
+
+
+
),
},
@@ -206,15 +208,11 @@ const sections = [
},
];
-const TypographyCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const TypographyCodePage = () => (
+
+
+
+
+);
export default TypographyCodePage;
diff --git a/apps/website/screens/components/typography/code/examples/basicUsage.ts b/apps/website/screens/components/typography/code/examples/basicUsage.ts
deleted file mode 100644
index bc886389e2..0000000000
--- a/apps/website/screens/components/typography/code/examples/basicUsage.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { DxcInset, DxcTypography } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
- This is a very basic example of the use of the DxcTypography component.
-
-
- );
-}`;
-
-const scope = {
- DxcInset,
- DxcTypography,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/typography/code/examples/basicUsage.tsx b/apps/website/screens/components/typography/code/examples/basicUsage.tsx
new file mode 100644
index 0000000000..08e2379150
--- /dev/null
+++ b/apps/website/screens/components/typography/code/examples/basicUsage.tsx
@@ -0,0 +1,18 @@
+import { DxcInset, DxcTypography } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+ This is a very basic example of the use of the DxcTypography component.
+
+
+ );
+}`;
+
+const scope = {
+ DxcInset,
+ DxcTypography,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/typography/code/examples/nestedTexts.ts b/apps/website/screens/components/typography/code/examples/nestedTexts.ts
deleted file mode 100644
index 5dcbf239d7..0000000000
--- a/apps/website/screens/components/typography/code/examples/nestedTexts.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DxcTypography, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
- This DxcTypography component has some children with different styles;
- parent has a fontFamily 'Open Sans, sans-serif' and{" "}
-
- one of the children has 'Open Sans, mono-space' and different color
- and size,
- {" "}
- the other child gets parent's styles.
-
-
- );
-}`;
-
-const scope = { DxcTypography, DxcInset };
-
-export default { code, scope };
diff --git a/apps/website/screens/components/typography/code/examples/nestedTexts.tsx b/apps/website/screens/components/typography/code/examples/nestedTexts.tsx
new file mode 100644
index 0000000000..d75cc336db
--- /dev/null
+++ b/apps/website/screens/components/typography/code/examples/nestedTexts.tsx
@@ -0,0 +1,25 @@
+import { DxcTypography, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+ This DxcTypography component has some children with different styles;
+ parent has a fontFamily 'Open Sans, sans-serif' and{" "}
+
+ one of the children has 'Open Sans, mono-space' and different color
+ and size,
+ {" "}
+ the other child gets parent's styles.
+
+
+ );
+}`;
+
+const scope = { DxcTypography, DxcInset };
+
+export default { code, scope };
diff --git a/apps/website/screens/components/typography/overview/TypographyOverviewPage.tsx b/apps/website/screens/components/typography/overview/TypographyOverviewPage.tsx
new file mode 100644
index 0000000000..92d79e1267
--- /dev/null
+++ b/apps/website/screens/components/typography/overview/TypographyOverviewPage.tsx
@@ -0,0 +1,123 @@
+import Code from "@/common/Code";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import { DxcBulletedList, DxcLink, DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ For our sans-serif font-family we use Open Sans; a modern, humanist sans-serif
+ typeface designed by Steve Matteson. It is known for its clarity, neutrality, and readability{" "}
+ across a wide range of digital and print applications.
+
+
+ With its open forms, neutral yet friendly appearance, and optimized legibility at small sizes
+ , Open Sans is optimized for both web and mobile interfaces, balancing aesthetic appeal with functional
+ clarity. The typeface includes a wide character set that supports{" "}
+ Latin, Greek, and Cyrillic scripts, making it suitable for internationalization.
+
+
+ Open Sans can be accessed via{" "}
+
+ Google Fonts
+
+ and is released under the
+
+ SIL Open Font License Version 1.1
+
+ .
+
+
+ ),
+ },
+ {
+ title: "Usage",
+ content: (
+ <>
+
+ Our Typography component should be considered a fallback option and used{" "}
+ only when none of the following components meet your specific needs. Each of these components
+ is designed to convey structure and meaning more effectively within an interface:
+
+
+
+
+
+ Heading
+
+ :
+ {" "}
+ Provides semantic structure and visual hierarchy to content sections, improving both navigation and
+ accessibility.
+
+
+
+
+ Paragraph
+
+ :
+ {" "}
+ Used for blocks of body text, supporting longer-form content while maintaining readability and consistent
+ spacing.
+
+
+
+
+ Bulleted List
+
+ :
+ {" "}
+ Ideal for presenting items or information in a non-sequential list, helping users quickly scan grouped
+ content.
+
+
+
+ If your use case isn't addressed by any of these components, please reach out to our team. We're happy to
+ evaluate your scenario and find a suitable solution.
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Keep a clear visual hierarchy: Use different sizes, weights, and styles to organize content.
+ This helps users quickly understand the structure and importance of information.
+
+
+ Prioritize readability: Make sure there is enough contrast between text and background to
+ ensure it's easy to read for everyone.
+
+
+ Allow for sufficient white space: Space between lines, paragraphs, and elements improves
+ legibility and creates a more open, scannable layout.
+
+
+ Ensure responsiveness: Typography should adapt to different screen sizes and resolutions
+ without breaking or becoming hard to read.
+
+
+ Avoid overusing all caps: All-uppercase text is harder to read in longer blocks. Use it
+ sparingly for labels or short button text.
+
+
+ ),
+ },
+];
+
+const TypographyOverviewPage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default TypographyOverviewPage;
diff --git a/apps/website/screens/components/typography/specs/TypographySpecsPage.tsx b/apps/website/screens/components/typography/specs/TypographySpecsPage.tsx
deleted file mode 100644
index 1658be1e6e..0000000000
--- a/apps/website/screens/components/typography/specs/TypographySpecsPage.tsx
+++ /dev/null
@@ -1,778 +0,0 @@
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import { DxcBulletedList, DxcLink, DxcParagraph, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
-
-const sections = [
- {
- title: "Font family",
- content: (
- <>
-
- For our sans-serif font-family, we use the humanist typeface Open Sans, designed by Steve
- Matteson and licensed under the{" "}
-
- Apache License, Version 2.0.
-
-
-
-
-
-
Property
-
Description
-
Core token
-
Value
-
-
-
-
-
- font-family
-
-
Default font family sans-serif
-
- font-family-sans
-
-
'Open Sans', sans-serif
-
-
-
- font-family
-
-
Default font family monospaced
-
- font-family-mono
-
-
Source Code Pro', monospace
-
-
-
-
- ),
- },
- {
- title: "Weight",
- content: (
- <>
-
- In order to add contrast between typographic elements in the UI, Halstack uses four different and well
- balanced font-weight values.
-
-
-
-
-
Property
-
Description
-
Core token
-
Value
-
-
-
-
-
- font-weight
-
-
Set font weight as light (300)
-
- font-weight-light
-
-
300
-
-
-
- font-weight
-
-
Set font weight as regular (400)
-
- font-weight-regular
-
-
400
-
-
-
- font-weight
-
-
Set font weight as semibold (600)
-
- font-weight-semibold
-
-
600
-
-
-
- font-weight
-
-
Set font weight as bold (700)
-
- font-weight-bold
-
-
700
-
-
-
-
- ),
- },
- {
- title: "Scale",
- content: (
- <>
-
- As we approached the foundational elements with simplification and standardization in mind, the typographic
- scale is one of the most important elements to create hierarchy. Our type scale provides eight relative values
- based on a root font size of 16px, making it scalable and accessible.
-
-
-
-
-
-
- ),
- },
- {
- title: "Letter spacing",
- content: (
- <>
-
- We calibrate our letter-spacing at large scales to provide a better legibility and
- readability of our text.
-
-
-
-
-
Property
-
Description
-
Core token
-
Value(em)
-
-
-
-
-
- letter-spacing
-
-
Set letter spacing as -0.025em
-
- font-tracking-tight-02
-
-
-0.025
-
-
-
- letter-spacing
-
-
Set letter spacing as -0.0125em
-
- font-tracking-tight-01
-
-
-0.0125
-
-
-
- letter-spacing
-
-
Set letter spacing as 0em
-
- font-tracking-normal
-
-
0rem / 0px
-
-
-
- letter-spacing
-
-
Set letter spacing as 0.025em
-
- font-tracking-wide-01
-
-
0.025
-
-
-
- letter-spacing
-
-
Set letter spacing as 0.05em
-
- font-tracking-wide-02
-
-
0.05
-
-
-
- letter-spacing
-
-
Set letter spacing as 0.1em
-
- font-tracking-wide-03
-
-
0.1
-
-
-
-
- ),
- },
- {
- title: "Leading",
- content: (
- <>
-
- We use a ratio of 1:1.5 as a standard line-height value. A body font of 16px (1rem) returns a
- value of 24px (1.5rem), which is the main reference measurement for the vertical organization.
-
-
-
-
Whitespace is preserved by the browser. Text will only wrap on line breaks.
-
- text-whiteSpace-pre
-
-
pre
-
-
-
- white-space
-
-
- Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary.
-
-
- text-whiteSpace-normal
-
-
normal
-
-
-
- white-space
-
-
- Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next
- line. The text continues on the same line until a 'br' tag is encountered.
-
-
- text-whiteSpace-nowrap
-
-
nowrap
-
-
-
- white-space
-
-
- Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and
- on line breaks.
-
-
- text-whiteSpace-pre-line
-
-
pre-line
-
-
-
- white-space
-
-
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.
-
- text-whiteSpace-pre-wrap
-
-
pre-wrap
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 1.4.6: Contrast (Enhanced)
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 1.4.12: Text Spacing
-
-
-
- ),
- },
- ],
- },
-];
-
-const TypographySpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TypographySpecsPage;
diff --git a/apps/website/screens/components/typography/usage/TypographyUsagePage.tsx b/apps/website/screens/components/typography/usage/TypographyUsagePage.tsx
deleted file mode 100644
index 57ed086723..0000000000
--- a/apps/website/screens/components/typography/usage/TypographyUsagePage.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import { DxcBulletedList, DxcLink, DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
-import Link from "next/link";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- Typography component is a primitive. This means that using this component, you can create any typography
- variant that is included in the Halstack Design System.
-
-
- It is important to highlight that the Typography component should always be the last option to be used as we
- have other components that add some context to be included in the sites, these components are:
-
-
-
-
- Bulleted list
-
-
-
-
- Paragraph
-
-
-
-
- Heading
-
-
-
-
- If any of these components do not cover your use case, please contact us and we will study it.
-
-
- ),
- },
-];
-
-const TypographyUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default TypographyUsagePage;
diff --git a/apps/website/screens/components/wizard/WizardPageLayout.tsx b/apps/website/screens/components/wizard/WizardPageLayout.tsx
index fef897a481..8f8e82f1f5 100644
--- a/apps/website/screens/components/wizard/WizardPageLayout.tsx
+++ b/apps/website/screens/components/wizard/WizardPageLayout.tsx
@@ -6,22 +6,21 @@ import { ReactNode } from "react";
const WizardPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/wizard" },
- { label: "Usage", path: "/components/wizard/usage" },
- { label: "Specifications", path: "/components/wizard/specifications" },
+ { label: "Overview", path: "/components/wizard" },
+ { label: "Code", path: "/components/wizard/code" },
];
return (
-
+
-
+
Wizard represents a stepped workflow as a form of linear and mandatory progression through a defined process
with several bullet points where the user need to interact with the content of each step during the
workflow.
-
+
{children}
diff --git a/apps/website/screens/components/wizard/code/WizardCodePage.tsx b/apps/website/screens/components/wizard/code/WizardCodePage.tsx
index acb4d9f9bb..0410a95c88 100644
--- a/apps/website/screens/components/wizard/code/WizardCodePage.tsx
+++ b/apps/website/screens/components/wizard/code/WizardCodePage.tsx
@@ -1,15 +1,23 @@
import { DxcFlex, DxcLink, 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 controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import icons from "./examples/icons";
-import TableCode from "@/common/TableCode";
+import Code, { ExtendedTableCode, TableCode } from "@/common/Code";
import StatusBadge from "@/common/StatusBadge";
+const stepsType = `{
+ label: string;
+ description?: string;
+ disabled?: boolean;
+ icon?: string |
+ (React.ReactNode &
+ React.SVGProps);
+ valid?: boolean;
+}[]`;
+
const sections = [
{
title: "Props",
@@ -24,6 +32,17 @@ const sections = [
+
+
currentStep
+
+ number
+
+
+ Defines which step is marked as the current. The numeration starts at 0. If undefined, the component will
+ be uncontrolled and the step will be managed internally by the component.
+
- Defines which step is marked as the current. The numeration starts at 0. If undefined, the component will
- be uncontrolled and the step will be managed internally by the component.
+ 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.
-
@@ -56,18 +75,24 @@ const sections = [
+
onStepClick
+
+ {"(currentStep: number) => void"}
+
-
+ This function will be called when the user clicks a step. The step number will be passed as a parameter.
+
An array of objects representing the steps. Each of them has the following properties:
@@ -86,7 +111,7 @@ const sections = [
name or SVG element used as the icon displayed in the step.
- disabled: Whether the step is disabled or not.
+ disabled: If true, the step will be disabled.
valid: Whether the step is valid or not.
@@ -95,27 +120,6 @@ const sections = [
-
-
-
onStepClick
-
- {"(currentStep: number) => void"}
-
-
- This function will be called when the user clicks a step. The step number will be passed as a parameter.
-
- 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.
-
-
-
-
tabIndex
@@ -151,15 +155,11 @@ const sections = [
},
];
-const WizardCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
+const WizardCodePage = () => (
+
+
+
+
+);
export default WizardCodePage;
diff --git a/apps/website/screens/components/wizard/code/examples/controlled.ts b/apps/website/screens/components/wizard/code/examples/controlled.ts
deleted file mode 100644
index f8cbbba02c..0000000000
--- a/apps/website/screens/components/wizard/code/examples/controlled.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [myCurrentStep, setMyCurrentStep] = useState(2);
- const onStepClick = (i) => {
- setMyCurrentStep(i);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcWizard,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/wizard/code/examples/controlled.tsx b/apps/website/screens/components/wizard/code/examples/controlled.tsx
new file mode 100644
index 0000000000..1c9034419f
--- /dev/null
+++ b/apps/website/screens/components/wizard/code/examples/controlled.tsx
@@ -0,0 +1,42 @@
+import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [myCurrentStep, setMyCurrentStep] = useState(2);
+ const onStepClick = (i) => {
+ setMyCurrentStep(i);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcWizard,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/wizard/code/examples/icons.ts b/apps/website/screens/components/wizard/code/examples/icons.ts
deleted file mode 100644
index 97b0f9294e..0000000000
--- a/apps/website/screens/components/wizard/code/examples/icons.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [myCurrentStep, setMyCurrentStep] = useState(2);
- const onStepClick = (i) => {
- setMyCurrentStep(i);
- };
-
- const userIcon = (
-
- );
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcWizard,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/wizard/code/examples/icons.tsx b/apps/website/screens/components/wizard/code/examples/icons.tsx
new file mode 100644
index 0000000000..9d52df9330
--- /dev/null
+++ b/apps/website/screens/components/wizard/code/examples/icons.tsx
@@ -0,0 +1,50 @@
+import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [myCurrentStep, setMyCurrentStep] = useState(2);
+ const onStepClick = (i) => {
+ setMyCurrentStep(i);
+ };
+
+ const userIcon = (
+
+ );
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcWizard,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/wizard/code/examples/uncontrolled.ts b/apps/website/screens/components/wizard/code/examples/uncontrolled.ts
deleted file mode 100644
index b70c54cc3f..0000000000
--- a/apps/website/screens/components/wizard/code/examples/uncontrolled.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const onStepClick = (i) => {
- console.log(i);
- };
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcWizard,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/wizard/code/examples/uncontrolled.tsx b/apps/website/screens/components/wizard/code/examples/uncontrolled.tsx
new file mode 100644
index 0000000000..db28ac0bd0
--- /dev/null
+++ b/apps/website/screens/components/wizard/code/examples/uncontrolled.tsx
@@ -0,0 +1,34 @@
+import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ const onStepClick = (i) => {
+ console.log(i);
+ };
+
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcWizard,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx b/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx
new file mode 100644
index 0000000000..aa6ca19e6c
--- /dev/null
+++ b/apps/website/screens/components/wizard/overview/WizardOverviewPage.tsx
@@ -0,0 +1,195 @@
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Example from "@/common/example/Example";
+import description from "./examples/description";
+import anatomy from "./images/wizard_anatomy.png";
+import Image from "@/common/Image";
+import vertical from "./examples/vertical";
+import horizontal from "./examples/horizontal";
+import stepNavigation from "./examples/stepNavigation";
+import linearNonLinear from "./examples/linearNonLinear";
+import validation from "./examples/validation";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ The wizard component helps users navigate through multi-step processes in a structured and guided manner. It
+ breaks down complex workflows into manageable steps, improving clarity and reducing cognitive load.{" "}
+ Each step represents a key stage of the process, allowing users to track progress and move
+ forward or backward as needed. Wizards are commonly used in forms, onboarding flows, and setup configurations
+ where sequential input is required.
+
+ ),
+ },
+ {
+ title: "Anatomy",
+ content: (
+ <>
+
+
+
+ Step: represents an individual stage in the wizard navigation. Each step corresponds to a
+ specific section of a multi-step process, guiding the user progressively through a flow.
+
+
+ Label: a descriptive title for the step that provides users with a clear understanding of
+ the content or action required at that stage.
+
+
+ Separator: a visual connector between steps that indicates the sequence and relationship
+ between them, reinforcing the step-by-step progression.
+
+
+ Step validator: a status indicator (checkmark or error icon) that provides feedback on
+ whether the step has been successfully completed or requires attention.
+
+
+ Description: an optional text displayed alongside a step to offer additional guidance,
+ clarifications, or instructions, ensuring users understand the requirements before proceeding.
+
+
+
+ ),
+ },
+ {
+ title: "Key interactions and features",
+ content: (
+
+ To better understand the wizard component and its possible use cases when working with a form, it's important to
+ review its key characteristics and interactions.
+
+ ),
+ subSections: [
+ {
+ title: "Step navigation",
+ content: (
+ <>
+
+ Users progress through the wizard by clicking on steps, using navigation buttons, or interacting with the
+ interface if direct access to steps is enabled. Navigation can be controlled based on the form's
+ requirements, preventing users from skipping essential steps when necessary.
+
+
+
+ ),
+ },
+ {
+ title: "Linear vs. Non-Linear Flow",
+ content: (
+ <>
+
+ Wizards can follow a linear approach, where users must complete each step in sequence
+ before proceeding, or a non-linear approach, which allows free movement between steps.
+ The choice depends on the complexity of the process and whether dependencies exist between steps.
+
+
+
+ ),
+ },
+ {
+ title: "Step validation",
+ content: (
+ <>
+
+ There may be scenarios where the content of a step needs to be validated while the user is filling in
+ fields or performing relevant actions within each step of the wizard. In such cases, a validation mark can
+ be displayed on each step once the user progresses to the next one. This mark will indicate the validation
+ status of the content, showing either a success or error mark on the step.
+
+
+
+ ),
+ },
+ {
+ title: "Optional description and icons",
+ content: (
+ <>
+
+ Each step can include description or validation icons to provide context and feedback.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Variants",
+ content: (
+
+ The wizard component has two variants depending on its orientation: horizontal and vertical.
+
+ ),
+ subSections: [
+ {
+ title: "Horizontal",
+ content: (
+ <>
+
+ The horizontal variant of the wizard is suitable for workflows where space is available
+ horizontally, making it ideal for tasks like multi-step forms and progress tracking. For example, setting
+ up a user account with several steps.
+
+
+
+ ),
+ },
+ {
+ title: "Vertical",
+ content: (
+ <>
+
+ The vertical variant works well when horizontal space is limited, often used in scenarios
+ like long forms or detailed steps in a process. An example could be an onboarding process with in-depth
+ configuration options.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Keep steps clear and logical: ensure that each step represents a meaningful part of the
+ process, following a natural order that users can easily follow.
+
+
+ Use concise and descriptive labels: step labels should clearly indicate the purpose of each
+ step to help users understand where they are in the process.
+
+
+ Provide real-time validation: if validation is required before moving forward, display clear
+ and immediate error messages to help users correct mistakes.
+
+
+ Indicate progress visually: use clear indicators to show the user's current step, completed
+ steps, and upcoming steps to enhance orientation and usability.
+
+
+ Confirm before final submission: if the wizard leads to an irreversible action (e.g.,
+ submitting an application), provide a review step where users can check and edit their inputs.
+
+
+ Choose the right layout: use the horizontal variant for processes with a small number of
+ steps and the vertical variant for complex flows with long step descriptions.
+
+
+ ),
+ },
+];
+
+const WizardOverviewPage = () => (
+
+
+
+
+);
+
+export default WizardOverviewPage;
diff --git a/apps/website/screens/components/wizard/overview/examples/description.tsx b/apps/website/screens/components/wizard/overview/examples/description.tsx
new file mode 100644
index 0000000000..6cfaa64c9a
--- /dev/null
+++ b/apps/website/screens/components/wizard/overview/examples/description.tsx
@@ -0,0 +1,34 @@
+import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcWizard,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/wizard/overview/examples/horizontal.tsx b/apps/website/screens/components/wizard/overview/examples/horizontal.tsx
new file mode 100644
index 0000000000..3f43bd9e6e
--- /dev/null
+++ b/apps/website/screens/components/wizard/overview/examples/horizontal.tsx
@@ -0,0 +1,23 @@
+import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcWizard,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/wizard/overview/examples/linearNonLinear.tsx b/apps/website/screens/components/wizard/overview/examples/linearNonLinear.tsx
new file mode 100644
index 0000000000..f43d0951ef
--- /dev/null
+++ b/apps/website/screens/components/wizard/overview/examples/linearNonLinear.tsx
@@ -0,0 +1,23 @@
+import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcWizard,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/wizard/overview/examples/stepNavigation.tsx b/apps/website/screens/components/wizard/overview/examples/stepNavigation.tsx
new file mode 100644
index 0000000000..af0e47c2a7
--- /dev/null
+++ b/apps/website/screens/components/wizard/overview/examples/stepNavigation.tsx
@@ -0,0 +1,28 @@
+import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcWizard,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/wizard/overview/examples/validation.tsx b/apps/website/screens/components/wizard/overview/examples/validation.tsx
new file mode 100644
index 0000000000..991188e3e0
--- /dev/null
+++ b/apps/website/screens/components/wizard/overview/examples/validation.tsx
@@ -0,0 +1,31 @@
+import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcWizard,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/wizard/overview/examples/vertical.tsx b/apps/website/screens/components/wizard/overview/examples/vertical.tsx
new file mode 100644
index 0000000000..70f6b84855
--- /dev/null
+++ b/apps/website/screens/components/wizard/overview/examples/vertical.tsx
@@ -0,0 +1,24 @@
+import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcWizard,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/wizard/overview/images/wizard_anatomy.png b/apps/website/screens/components/wizard/overview/images/wizard_anatomy.png
new file mode 100644
index 0000000000..aca827a69c
Binary files /dev/null and b/apps/website/screens/components/wizard/overview/images/wizard_anatomy.png differ
diff --git a/apps/website/screens/components/wizard/specs/WizardSpecsPage.tsx b/apps/website/screens/components/wizard/specs/WizardSpecsPage.tsx
deleted file mode 100644
index 8ca0081969..0000000000
--- a/apps/website/screens/components/wizard/specs/WizardSpecsPage.tsx
+++ /dev/null
@@ -1,761 +0,0 @@
-import { DxcTable, DxcParagraph, DxcBulletedList, DxcFlex, DxcLink } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Figure from "@/common/Figure";
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import spacingImage from "./images/wizard_specs_spacing.png";
-import stepperImage from "./images/wizard_specs_stepper.png";
-import statesImage from "./images/wizard_states.png";
-import anatomyImage from "./images/wizard_anatomy.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
-
-
-
-
- ),
- },
- {
- title: "States",
- content: (
- <>
-
- States: enabled, focus, selected,{" "}
- unvisited and disabled.
-
-
-
-
-
- ),
- },
- {
- title: "Anatomy",
- content: (
- <>
-
-
- Step
- Label
- Separator
-
- Helper text (Optional)
-
-
- Step validator (Optional)
-
-
-
- ),
- },
- {
- title: "Design tokens",
- subSections: [
- {
- title: "Color",
- content: (
-
-
-
-
Component token
-
Element
-
Core token
-
Value
-
-
-
-
-
- visitedStepFontColor
-
-
Step:visited text
-
- color-black
-
-
#000000
-
-
-
- selectedStepFontColor
-
-
Step:selected text
-
- color-white
-
-
#ffffff
-
-
-
- unvisitedStepFontColor
-
-
Step:unvisited text
-
- color-grey-700
-
-
#666666
-
-
-
- disabledStepFontColor
-
-
Step:disabled text
-
- color-grey-500
-
-
#999999
-
-
-
- visitedStepBackgroundColor
-
-
Step:visited
-
- color-white
-
-
#ffffff
-
-
-
- selectedStepBackgroundColor
-
-
Step:selected background
-
- color-purple-700
-
-
#5f249f
-
-
-
- unvisitedStepBackgroundColor
-
-
Step:unvisited background
-
- color-transparent
-
-
transparent
-
-
-
- disabledStepBackgroundColor
-
-
Step:disabled background
-
- color-grey-100
-
-
#f2f2f2
-
-
-
- visitedStepBorderColor
-
-
Step:visited border
-
- color-black
-
-
#000000
-
-
-
- selectedStepBorderColor
-
-
Step:selected border
-
- color-purple-700
-
-
#5f249f
-
-
-
- unvisitedStepBorderColor
-
-
Step:unvisited border
-
- color-grey-700
-
-
#666666
-
-
-
- disabledStepBorderColor
-
-
Step:disabled border
-
- color-grey-100
-
-
#f2f2f2
-
-
-
- visitedLabelFontColor
-
-
Label:visited
-
- color-black
-
-
#000000
-
-
-
- selectedLabelFontColor
-
-
Label:selected
-
- color-black
-
-
#000000
-
-
-
- disabledLabelFontColor
-
-
Label:disabled
-
- color-grey-500
-
-
#999999
-
-
-
- visitedHelperTextFontColor
-
-
Helper text:visited
-
- color-black
-
-
#000000
-
-
-
- selectedHelperTextFontColor
-
-
Helper text:selected
-
- color-black
-
-
#000000
-
-
-
- separatorColor
-
-
Separator
-
- color-grey-700
-
-
#666666
-
-
-
- focusColor
-
-
Focus outline
-
- color-blue-600
-
-
#0095ff
-
-
-
- ),
- },
- {
- title: "Margin",
- content: (
- <>
-
- Different values can be applied to each side of the component:
- top, bottom, left, right.
-
-
-
-
-
-
- ),
- },
- ],
- },
- {
- title: "Accessibility",
- subSections: [
- {
- title: "WCAG 2.2",
- content: (
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 1.3.1: Info and Relationships
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.2.1: Timing Adjustable
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 2.2.2: Pause, Stop, Hide
-
-
-
- Understanding WCAG 2.2 -{" "}
-
- SC 3.3.2: Labels or Instructions
-
-
-
- ),
- },
- {
- title: "WAI-ARIA",
- content: (
-
-
- Web accessibility tutorials -{" "}
-
- Multi-page forms
-
-
-
- ),
- },
- ],
- },
-];
-
-const WizardSpecsPage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default WizardSpecsPage;
diff --git a/apps/website/screens/components/wizard/specs/images/wizard_anatomy.png b/apps/website/screens/components/wizard/specs/images/wizard_anatomy.png
deleted file mode 100644
index 6534dfc97e..0000000000
Binary files a/apps/website/screens/components/wizard/specs/images/wizard_anatomy.png and /dev/null differ
diff --git a/apps/website/screens/components/wizard/specs/images/wizard_specs_spacing.png b/apps/website/screens/components/wizard/specs/images/wizard_specs_spacing.png
deleted file mode 100644
index 956567e9e9..0000000000
Binary files a/apps/website/screens/components/wizard/specs/images/wizard_specs_spacing.png and /dev/null differ
diff --git a/apps/website/screens/components/wizard/specs/images/wizard_specs_stepper.png b/apps/website/screens/components/wizard/specs/images/wizard_specs_stepper.png
deleted file mode 100644
index 659e964e5a..0000000000
Binary files a/apps/website/screens/components/wizard/specs/images/wizard_specs_stepper.png and /dev/null differ
diff --git a/apps/website/screens/components/wizard/specs/images/wizard_states.png b/apps/website/screens/components/wizard/specs/images/wizard_states.png
deleted file mode 100644
index 48d2993438..0000000000
Binary files a/apps/website/screens/components/wizard/specs/images/wizard_states.png and /dev/null differ
diff --git a/apps/website/screens/components/wizard/usage/WizardUsagePage.tsx b/apps/website/screens/components/wizard/usage/WizardUsagePage.tsx
deleted file mode 100644
index 3cb16d962e..0000000000
--- a/apps/website/screens/components/wizard/usage/WizardUsagePage.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import variants from "./examples/variants";
-import validation from "./examples/validation";
-import content from "./examples/content";
-import description from "./examples/description";
-
-const sections = [
- {
- title: "Usage",
- content: (
-
-
- The horizontal/vertical line should not extend to the left of the first circle or to the right of the last
- circle.
-
-
- Do not overwhelmed the component with too many steps, it won't be a good idea for the user workflow neither
- for the display of the information.
-
-
- ),
- },
- {
- title: "Variants",
- content: (
- <>
-
- The wizard component has two variants: horizontal and vertical.
-
-
-
- ),
- },
- {
- title: "Validation",
- content: (
- <>
-
- There could be some scenarios in which the content of a step wants to be validated while the user is filling
- the fields with information or doing relevant actions in every step of the wizard. For that case, a validation
- mark can be represented in every step once the user navigate to the next step in the linear progression. This
- will represent the status of the validation respecting the content, with a success mark or an error mark
- visible on the step mark.
-
-
-
- ),
- },
- {
- title: "Content",
- content: (
- <>
- Different variations of the content can be performed in the step:
-
- Only numbers
- Only icons
- Numbers/icons with step label
-
-
-
- ),
- },
- {
- title: "Description",
- content: (
- <>
- Description can be added to the wizard component step:
-
-
- ),
- },
-];
-
-const WizardUsagePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default WizardUsagePage;
diff --git a/apps/website/screens/components/wizard/usage/examples/content.ts b/apps/website/screens/components/wizard/usage/examples/content.ts
deleted file mode 100644
index 5d16984bda..0000000000
--- a/apps/website/screens/components/wizard/usage/examples/content.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const userIcon = (
-
- );
-
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcWizard,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/wizard/usage/examples/description.ts b/apps/website/screens/components/wizard/usage/examples/description.ts
deleted file mode 100644
index 6ca9a1946d..0000000000
--- a/apps/website/screens/components/wizard/usage/examples/description.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { DxcWizard, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
- );
-}`;
-
-const scope = {
- DxcWizard,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/wizard/usage/examples/validation.ts b/apps/website/screens/components/wizard/usage/examples/validation.ts
deleted file mode 100644
index 71c6c7964e..0000000000
--- a/apps/website/screens/components/wizard/usage/examples/validation.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { DxcWizard, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcWizard,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/wizard/usage/examples/variants.ts b/apps/website/screens/components/wizard/usage/examples/variants.ts
deleted file mode 100644
index 218247ea1b..0000000000
--- a/apps/website/screens/components/wizard/usage/examples/variants.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { DxcWizard, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcWizard,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/foundations/color/ColorPage.tsx b/apps/website/screens/foundations/color/ColorPage.tsx
new file mode 100644
index 0000000000..f98df32d86
--- /dev/null
+++ b/apps/website/screens/foundations/color/ColorPage.tsx
@@ -0,0 +1,276 @@
+import { DxcFlex, DxcLink, DxcParagraph, DxcHeading, DxcBulletedList } from "@dxc-technology/halstack-react";
+import Figure from "@/common/Figure";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import neutralColors from "./images/neutral_colors.png";
+import alphaColors from "./images/alpha_colors.png";
+import primaryColor from "./images/primary_color.png";
+import secondaryColor from "./images/secondary_color.png";
+import tertiaryColor from "./images/tertiary_color.png";
+import semanticColors from "./images/semantic_colors.png";
+import PageHeading from "@/common/PageHeading";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Color is a fundamental element of any design system. It{" "}
+ communicates brand identity, guides user interaction, and establishes visual hierarchy. A
+ well-structured color foundation ensures consistency across interfaces, reinforces accessibility, and enhances
+ the emotional impact of the product.
+
+
+ Halstack defines a flexible and accessible color foundation to support brand expression,
+ usability, and consistency across all digital products. The color palette is built on a system of design
+ tokens that enable scalability, maintainability, and theming.
+
+
+ The color system ensures optimal contrast ratios for readability and accessibility, aligning
+ with{" "}
+
+ WCAG 2.1
+
+ standards. Token naming follows a semantic structure to promote clarity in implementation and usage.
+
+
+ Color is foundational to delivering a coherent user experience and is{" "}
+ tightly integrated with components, typography, and layout strategies throughout the Halstack
+ ecosystem.
+
+
+ ),
+ },
+ {
+ title: "Transition from HSL to LCH",
+ content: (
+ <>
+
+ Previously, Halstack used the HSL color space to define and manipulate colors. While HSL offers simplicity, it
+ falls short in delivering perceptual consistency; equal steps in saturation or lightness do not translate into
+ equal visual changes, often resulting in tonal ramps that feel uneven or unreadable.
+
+
+ We now adopt the LCH (Lightness, Chroma, Hue) color space as a foundation for our color
+ generation and manipulation. LCH is perceptually uniform, meaning changes in values
+ correspond more closely to how humans actually perceive color differences. This results in:
+
+
+
+ More balanced and predictable tonal scales
+
+
+ Improved accessibility through consistent contrast across tones
+
+
+ Better visual harmony in both light and dark themes
+
+
+
+ By switching to LCH, Halstack ensures a more robust, inclusive, and visually coherent color system that scales
+ effectively across all interfaces and user needs.
+
+
+ ),
+ },
+ {
+ title: "Core color tokens",
+ content: (
+
+ Colors are categorized by purpose (primary, secondary, neutral and semantic) and are extended
+ through tonal ranges to offer clarity, depth, and hierarchy in UI design.
+
+ ),
+ subSections: [
+ {
+ title: "Neutral colors",
+ content: (
+ <>
+
+ Neutral colors in Halstack{" "}
+ provide structure, depth, and hierarchy without drawing attention. These include a range
+ of grays used across surfaces, borders, dividers, and text.
+
+
+ They help balance the interface by supporting the primary and semantic colors, and are essential for
+ creating clear layout separation and focus without introducing visual noise.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Alpha colors",
+ content: (
+ <>
+
+ Alpha colors are translucent overlays derived from base colors. These tokens are
+ typically applied in background overlays, elevation and shadows.
+
+
+ Alpha values enhance depth and interactivity while maintaining accessibility and visual consistency.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Primary color",
+ content: (
+ <>
+
+ Represents the core identity of DXC and is used to drive the main interactions across the
+ interface. It appears in key components such as primary buttons, active elements and highlights.
+
+
+ It is the most prominent color in the system and should be used intentionally to guide attention and
+ reinforce brand consistency. Variants in tone are available for hover, active, and disabled states to
+ ensure clarity and accessibility.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Secondary color",
+ content: (
+ <>
+
+ Complements the primary color and is used to support secondary actions or highlight less
+ prominent interface elements. It helps introduce visual variety without overwhelming the user or competing
+ with primary actions. Common use cases include{" "}
+ secondary buttons, accent elements or supporting visuals.
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Tertiary color",
+ content: (
+ <>
+
+ The tertiary color is an identity-supporting color that{" "}
+ complements both the primary and secondary colors. It reinforces the overall visual
+ language and helps highlight less prominent elements without drawing attention away from core actions.
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Semantic colors",
+ content: (
+ <>
+
+ Semantic colors are{" "}
+ used to communicate system feedback and status clearly and immediately. These colors are
+ designed to be universally recognizable and accessible, ensuring that users can quickly interpret the
+ state of the system.
+
+
+
+ Success: Communicates successful operations, confirmations, or valid states. It
+ reassures users and reinforces positive outcomes.
+
+
+ Info: Provides additional information, guidance, or context that helps users understand
+ the current state or available options.
+
+
+ Warning: Used for cautionary messages or potential risks that don't block progress but
+ may require attention.
+
+
+ Error: Indicates destructive actions, form validation errors, or system failures. It
+ draws immediate attention and signals that something needs user correction or caution.
+
+
+
+ These colors are used in components such as alerts, form fields and status indicators among others.
+
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+ To ensure color is used effectively, inclusively, and consistently across all user interfaces, follow these
+ best practices:
+
+
+
+ Don't rely solely on color to communicate information
+
+ Use color in combination with text labels, icons, or patterns. Some users may be color-blind, have limited
+ color perception, or interpret colors differently based on cultural context. Always pair color with an
+ additional visual cue to convey meaning.
+
+
+
+ Ensure sufficient contrast for accessibility
+
+ Text and interactive elements must meet minimum contrast requirements to remain legible for all users.
+ Follow these WCAG 2.1 guidelines:
+
+
+
+ Use a contrast ratio of at least 4.5:1 for normal body text.
+
+
+ Use a contrast ratio of at least 3:1 for large text (18pt or 14pt bold) and essential
+ graphical objects (such as icons conveying meaning).
+
+
+
+
+ Maintain a limited core palette
+
+ Avoid excessive use of colors. Stick to the defined palette to strengthen visual harmony and brand
+ recognition. Introduce neutral tones to balance visual weight and focus user attention appropriately.
+
+
+
+ Use tonal scales for depth and hierarchy
+ Leverage color ramps to create spatial relationships and support elevation.
+
+
+
+ ),
+ },
+];
+
+const ColorPage = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export default ColorPage;
diff --git a/apps/website/screens/foundations/color/images/alpha_colors.png b/apps/website/screens/foundations/color/images/alpha_colors.png
new file mode 100644
index 0000000000..6f2783002a
Binary files /dev/null and b/apps/website/screens/foundations/color/images/alpha_colors.png differ
diff --git a/apps/website/screens/foundations/color/images/neutral_colors.png b/apps/website/screens/foundations/color/images/neutral_colors.png
new file mode 100644
index 0000000000..e6104a0982
Binary files /dev/null and b/apps/website/screens/foundations/color/images/neutral_colors.png differ
diff --git a/apps/website/screens/foundations/color/images/primary_color.png b/apps/website/screens/foundations/color/images/primary_color.png
new file mode 100644
index 0000000000..898c264d30
Binary files /dev/null and b/apps/website/screens/foundations/color/images/primary_color.png differ
diff --git a/apps/website/screens/foundations/color/images/secondary_color.png b/apps/website/screens/foundations/color/images/secondary_color.png
new file mode 100644
index 0000000000..a1da47363b
Binary files /dev/null and b/apps/website/screens/foundations/color/images/secondary_color.png differ
diff --git a/apps/website/screens/foundations/color/images/semantic_colors.png b/apps/website/screens/foundations/color/images/semantic_colors.png
new file mode 100644
index 0000000000..b56a993552
Binary files /dev/null and b/apps/website/screens/foundations/color/images/semantic_colors.png differ
diff --git a/apps/website/screens/foundations/color/images/tertiary_color.png b/apps/website/screens/foundations/color/images/tertiary_color.png
new file mode 100644
index 0000000000..a704999b75
Binary files /dev/null and b/apps/website/screens/foundations/color/images/tertiary_color.png differ
diff --git a/apps/website/screens/foundations/elevation/ElevationPage.tsx b/apps/website/screens/foundations/elevation/ElevationPage.tsx
new file mode 100644
index 0000000000..5b48cb8f57
--- /dev/null
+++ b/apps/website/screens/foundations/elevation/ElevationPage.tsx
@@ -0,0 +1,177 @@
+import { DxcHeading, DxcFlex, DxcTable, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
+import Image from "@/common/Image";
+import Code from "@/common/Code";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import PageHeading from "@/common/PageHeading";
+import DocFooter from "@/common/DocFooter";
+import shadows from "./images/shadows.jpg";
+import Figure from "@/common/Figure";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Shadows are a fundamental part of visual design systems. In Halstack, we use them, along with colors, to{" "}
+ create depth and layering on the interface. They help users distinguish between surfaces,
+ understand component hierarchy, and focus their attention on key elements.
+
+
+ By simulating how light interacts with objects, shadows reinforce a clear spatial structure in digital
+ interfaces, much like in the physical world. Whether it's emphasizing a modal over a background or giving
+ subtle prominence to a card, elevation contributes both aesthetically and functionally to the user experience.
+
+
+ ),
+ },
+ {
+ title: "Shadow tokens",
+ content: (
+ <>
+
+ Halstack provides a set of predefined shadow tokens optimized for clarity and performance across our products.
+ Each token corresponds to a specific elevation level with calibrated values for offset, blur, and color
+ transparency.
+
+
+
+
+
Token
+
X position
+
Y position
+
Blur
+
Spread
+
color
+
+
+
+
+
+ shadow-100
+
+
0px
+
2px
+
2px
+
0px
+
+ color-grey-400-a
+
+
+
+
+ shadow-200
+
+
0px
+
12px
+
12px
+
0px
+
+ color-grey-300-a
+
+
+
+
+ shadow-300
+
+
0px
+
24px
+
24px
+
0px
+
+ color-grey-300-a
+
+
+
+
+ shadow-400
+
+
0px
+
48px
+
48px
+
0px
+
+ color-grey-300-a
+
+
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Shadow guidelines by scale",
+ content: (
+ <>
+
+ Each shadow style is designed to serve a different level of emphasis or structural role in the UI. Below are
+ some typical use cases per shadow level:
+
+
+
+ shadow-100: creates subtle separation from the background without drawing too much
+ attention, such as small UI elements like buttons, input fields, or lightweight cards.
+
+
+ shadow-200: signals a slight lift and draws more attention than shadow-100, especially
+ useful for elements that temporarily appear above the rest of the UI; such as cards, dashboard, popovers, or
+ dropdowns.
+
+
+ shadow-300: used for modals, bottom sheets, or floating panels; as it clearly separates
+ important, interactive components from the rest of the content.
+
+
+ shadow-400: provides the strongest visual depth to ensure clear hierarchy and focus in the
+ UI. A few examples where this shadow can be applied are full-screen overlays, onboarding dialogs, or focused
+ system alerts.
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use elevation purposefully: shadows are not decorative. Apply them to communicate visual
+ hierarchy and component behavior.
+
+
+ Don't overlay too much: avoid stacking multiple shadows or using high-intensity shadows on
+ too many components, as this leads to visual clutter.
+
+
+ Stay within the core scale: Use only the defined shadow tokens unless there's a validated
+ need for a custom elevation.
+
+
+ Avoid using shadows as borders: If you need to separate elements or define boundaries, use
+ spacing or a border token instead.
+
+
+ Consistency across themes: Our shadow tokens are designed to adapt well across themes and
+ backgrounds. Avoid tweaking individual values unless strictly necessary.
+
+
+ ),
+ },
+];
+
+const ElevationPage = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export default ElevationPage;
diff --git a/apps/website/screens/foundations/elevation/images/shadows.jpg b/apps/website/screens/foundations/elevation/images/shadows.jpg
new file mode 100644
index 0000000000..b32bb34a8a
Binary files /dev/null and b/apps/website/screens/foundations/elevation/images/shadows.jpg differ
diff --git a/apps/website/screens/foundations/height/HeightPage.tsx b/apps/website/screens/foundations/height/HeightPage.tsx
new file mode 100644
index 0000000000..e2688916c3
--- /dev/null
+++ b/apps/website/screens/foundations/height/HeightPage.tsx
@@ -0,0 +1,173 @@
+import { DxcFlex, DxcParagraph, DxcHeading, DxcBulletedList, DxcTable } from "@dxc-technology/halstack-react";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import PageHeading from "@/common/PageHeading";
+import Code from "@/common/Code";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ In Halstack, dimensions refer specifically to the height of UI elements such as buttons,
+ inputs, icons, and other interactive components. While spacing controls the{" "}
+ distance between elements, dimensions define the vertical size of the
+ elements themselves.
+
+
+ Maintaining consistent height values across the interface ensures a predictable rhythm, enhances scannability,
+ and simplifies the construction of flexible, responsive layouts.
+
+
+ ),
+ },
+ {
+ title: "Purpose",
+ content: (
+ <>
+
+ Our scale was designed with a balance between flexibility and simplicity. It follows a loosely exponential
+ progression that prioritizes touch accessibility, icon alignment and{" "}
+ component density levels. Although not every element of our Design System follows a fixed
+ height structure, keeping the system as modular and progressive as we can, designers and
+ developers can reason more easily about vertical alignment and component consistency.
+
+
+ In summary, we defined a limited set of height values that serve as our core dimension tokens
+ . These values are chosen to:
+
+
+ Align with our spacing scale (multiples of 4px where possible)
+ Support common component patterns
+ Create visual consistency and predictable touch targets
+ Allow cross-platform scalability and design token standardization
+
+
+ ),
+ },
+ {
+ title: "Core height tokens",
+ content: (
+
+
+
+
Value
+
Token
+
Typical usage examples
+
+
+
+
+
12px
+
+ dimensions/12
+
+
Small icons, badges, or inline indicators
+
+
+
16px
+
+ dimensions/16
+
+
Smaller icons size
+
+
+
20px
+
+ dimensions/20
+
+
Small buttons or compact UI elements
+
+
+
24px
+
+ dimensions/24
+
+
Standard icon size and input height for dense forms
+
+
+
32px
+
+ dimensions/32
+
+
Default button/input height in compact UIs
+
+
+
36px
+
+ dimensions/36
+
+
Secondary button/input variant
+
+
+
40px
+
+ dimensions/40
+
+
Default form element height
+
+
+
48px
+
+ dimensions/48
+
+
Primary button, larger input elements
+
+
+
56px
+
+ dimensions/56
+
+
High emphasis elements, banners
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Stick to the core: when designing, try to stick as much as possible with our height tokens to
+ create consistent layouts across products. Avoid arbitrary custom heights unless strictly necessary.
+
+
+ Respect touch targets: Ensure interactive elements like buttons and inputs are at least
+ height-40 for accessibility and usability.
+
+
+ Align height with layout spacing: Use the same spacing unit system (spacing-4,{" "}
+ spacing-8, etc.) to vertically pad elements so they integrate seamlessly.
+
+
+ Don't scale height independently: Avoid resizing components vertically in isolation without
+ updating spacing or content padding.
+
+
+ Use tokens in code and design: Reference tokens (e.g., height-40) directly in
+ CSS or Figma components for consistency and easier maintenance.
+
+
+ Use for more than buttons: These values apply to any vertically bound element, not just
+ buttons and inputs, but also chips, icons, rows, and list items.
+
+
+ ),
+ },
+];
+
+const HeightPage = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export default HeightPage;
diff --git a/apps/website/screens/foundations/iconography/IconographyPage.tsx b/apps/website/screens/foundations/iconography/IconographyPage.tsx
new file mode 100644
index 0000000000..d33c0cd185
--- /dev/null
+++ b/apps/website/screens/foundations/iconography/IconographyPage.tsx
@@ -0,0 +1,575 @@
+import { DxcHeading, DxcParagraph, DxcFlex, DxcBulletedList, DxcGrid, DxcLink } from "@dxc-technology/halstack-react";
+import PageHeading from "@/common/PageHeading";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Figure from "@/common/Figure";
+import Image from "@/common/Image";
+import iconsHalstack from "./images/icons_halstack.jpg";
+import materialIcons from "./images/material_icons.png";
+import customIncorrect from "./images/custom_incorrect.jpg";
+import customCorrect from "./images/custom_correct.jpg";
+import iconsSizes from "./images/icons_sizes.jpg";
+import accessibilityColor from "./images/accessibility_color.jpg";
+import iconsContext from "./images/icons_context.jpg";
+import iconsGrid from "./images/icons_grid.jpg";
+import Link from "next/link";
+import Code from "@/common/Code";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Icons are visual elements that can serve different purposes depending on their context. In Halstack, icons are
+ used not only to represent ideas, objects, or actions, but also to support the user's journey
+ through the interface. They help guide attention, reinforce meaning, and visually enhance
+ actions or sections within an application.
+
+ ),
+ subSections: [
+ {
+ title: "Material Icons",
+ content: (
+ <>
+
+ At Halstack, we've chosen to adopt the Material Icons library, specifically the outline{" "}
+ and filled variants, as our standard icon set. While we did not create these icons
+ ourselves, there are strong reasons behind this decision that align with the goals of our design system:
+
+
+
+ Consistency: Material Icons offer a comprehensive, visually coherent set of icons that
+ cover a wide range of common actions, objects, and concepts. Using a unified library helps us maintain
+ consistency across all Halstack-based products.
+
+
+ Scalability: with hundreds of pre-designed icons available and frequent updates,
+ Material Icons scale easily with product needs: whether we're designing simple interfaces or more
+ complex workflows.
+
+
+ Accessibility: Material Icons are built with accessibility in mind, supporting clear
+ recognition and compatibility with assistive technologies when used correctly.
+
+
+ Design and engineering efficiency: leveraging a widely adopted icon set reduces the
+ effort needed to create and maintain custom icons. This speeds up both design and development workflows,
+ allowing teams to focus on building better user experiences.
+
+
+ Cross-platform support: Material Icons are optimized for use across web, Android, and
+ iOS platforms, helping us build consistent and adaptable experiences regardless of the target platform.
+
+
+
+ By adopting Material Icons, we ensure that our iconography remains modern, flexible, and easy to work
+ with, without sacrificing quality or usability.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Icon Library overview",
+ content: (
+ <>
+
+ Material Icons are grouped into functional categories that help organize their purpose and
+ usage. Within Halstack, we follow this categorization to help designers and developers quickly find the right
+ icon for each context.
+
+ The main categories include:
+
+
+ Navigation
+
+ Icons that help users move through the interface (e.g., menu, arrow_back,{" "}
+ close, more_vert).
+
+
+
+ Actions
+
+ Icons that represent specific user actions (e.g., edit, delete,{" "}
+ download, add, check_circle).
+
+
+
+ Feedback / Status
+
+ Icons that indicate the state of a system or user feedback (e.g., error, warning
+ , info, check_circle_outline).
+
+
+
+ Media and Files
+
+ Icons representing media types or file interactions (e.g., image, video_library,{" "}
+ attach_file).
+
+
+
+ Communication
+
+ Icons used in messaging, comments, or user contact interfaces (e.g., chat, email
+ , notifications).
+
+
+
+ Content and Layout
+
+ Icons related to formatting, content manipulation, or UI controls (e.g., filter_list,{" "}
+ sort, grid_view, view_list).
+
+
+
+ Device and System
+
+ Icons for hardware or system-level actions (e.g., battery_full, wifi,{" "}
+ settings).
+
+
+
+
+ In Halstack products, the outline style is the default and most widely used for icons. This
+ choice reflects our preference for clean, lightweight visual elements that align with our UI aesthetics.
+
+ Among all available categories, the following are the most commonly used:
+
+
+ Navigation
+ Used extensively across headers, sidebars, and in-page navigation elements.
+
+
+ Actions
+ Found in interactive components like buttons, dropdowns, and toolbars.
+
+
+ Feedback / Status
+
+ Integrated into form validation, alerts, snackbars, and system messages to communicate state clearly.
+
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Available styles",
+ content: (
+ <>
+
+
+
+
+ Halstack supports two visual styles of Material Icons: Outline and Filled.
+ Both styles are available through the Material Icons library and can be used across the design system
+ depending on the context and visual intent. By offering both outline and filled styles, Halstack ensures
+ visual flexibility while maintaining system consistency. Designers can use tone and emphasis intentionally,
+ matching icon style to context without compromising clarity or usability.
+
+
+ ),
+ subSections: [
+ {
+ title: "Outline (default style)",
+ content: (
+ <>
+
+ The outline icons are characterized by their lightweight, hollow appearance with thin
+ strokes and open shapes. They offer a modern, minimalist aesthetic that aligns well with Halstack's clean
+ UI philosophy.
+
+
+ This variant is our default style because it:
+
+
+
+ Integrates seamlessly into interfaces without overwhelming other UI elements
+
+ Maintains legibility and clarity even at small sizes.
+
+ Provides a subtle visual cue without drawing excessive attention.
+
+
+ Harmonizes with our typography, spacing, and component structure, particularly in low-density layouts.
+
+
+
+ They are ideal for secondary actions, interface navigation structure (such as back arrows or menus) and
+ supporting text-based content without dominating the visual hierarchy.
+
+
+ ),
+ },
+ {
+ title: "Filled",
+ content: (
+ <>
+
+ Filled icons feature solid shapes with strong visual presence. This style creates a sense
+ of emphasis and weight, making it suitable for highlighting actions or reinforcing key statuses in the UI.
+
+
+ While not the default in Halstack, filled icons are available for intentional use cases{" "}
+ where stronger visual contrast is needed.
+
+ Filled icons are effective when:
+
+
+ Used in active states, such as selected tabs or toggled buttons.
+
+
+ Reinforcing status and feedback, especially in system messages (e.g., error, success,
+ warning).
+
+
+ Enhancing visibility in dense interfaces or darker backgrounds.
+
+
+
+ However, because of their bolder visual weight, filled icons should be used carefully to avoid visual
+ clutter or drawing attention away from primary content.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Custom icons",
+ content: (
+ <>
+
+ While Material Icons offer a wide range of visual representations, we acknowledge that there may be rare cases
+ where a concept, function, or domain-specific idea is not adequately covered.
+
+
+ In such cases, teams may need to create a custom icon. However, to ensure consistency and
+ maintain the integrity of the Halstack visual language, the following guidelines apply:
+
+
+
+ Responsibility
+
+ The responsibility for designing a custom icon lies with the team that requires it. This
+ includes:
+
+
+ Defining the icon's intended meaning and use.
+ Designing or sourcing the visual asset.
+
+ Testing the icon within its intended context to ensure clarity and accessibility.
+
+
+
+
+ Style consistency
+
+ It is highly encouraged that any custom icon:{" "}
+
+
+
+ Follows the same visual style as the Material Icons being used in Halstack (either{" "}
+ outline or filled, depending on context).
+
+
+ Matches the same stroke weight, corner radius, and{" "}
+ overall proportions.
+
+ Is optimized for the same grid size (typically 24×24 pixels).
+
+
+ Designing with these parameters in mind ensures visual cohesion with the rest of the interface.
+
+
+
+
+
+
+
+ In the first figure, we can see how the custom icon is{" "}
+ colorful, highly detailed and visually complex. This doesn't match the{" "}
+ monochromatic, simplified geometry of the Material Icons, as you can see on the same
+ example. Therefore, this custom icon introduces a visual "noise" that could potentially break the
+ consistency of the interface. While it may be visually appealing on its own, this custom icon feels out of
+ place when using it alongside the rest of the system, and should always be avoided.
+
+
+ In contrast, the custom icon in the Figure 2 has been designed to{" "}
+ mimic the look and feel of the Material icons, as it uses the{" "}
+ same weight, proportions and stroke style. The level of detail is consistent and
+ balanced, and it integrates naturally into the UI, appearing as if it were part of the original set. This
+ is the kind of alignment we aim for when extending the icon set.
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Accessibility considerations",
+ content: (
+ <>
+
+ Icons play an important role in user interaction and communication. To ensure that all users (including those
+ using assistive technologies) can fully understand and navigate Halstack-based interfaces, the following
+ accessibility best practices should be followed when using icons.
+
+
+
+ Provide meaning with labels
+
+
+ Informative icons (icons that convey meaning or trigger actions, like a "delete" or
+ "download" button) must be accompanied by accessible labels.
+
+
+ Use aria-label, aria-labelledby, or an associated label element
+ so screen readers can announce the icon's purpose.
+
+
+
+
+ Hide decorative icons from Assistive Tech
+
+
+ Decorative icons (e.g., a chevron indicating expandable content, or a checkmark in a
+ success message) should not be read by screen readers.
+
+
+ Use aria-hidden="true" or mark them with role="presentation".
+
+
+
+
+ Maintain color contrast
+
+
+
+
+ Icons must have sufficient contrast against their background, especially when used
+ as status indicators (error, success, info).{" "}
+
+
+ Follow WCAG AA or AAA contrast ratios (minimum 3:1 for UI components and 4.5:1 for icons conveying
+ meaning).
+
+
+
+
+
+
+
+
+
+
+
+ Don't rely on icons alone to convey meaning
+
+
+
+
+ Always pair critical icons with text or tooltips to reinforce meaning, especially
+ in form validation, alerts, and interactive components.
+
+
+ This ensures understanding for users with cognitive disabilities, color blindness, or screen
+ reader usage.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Use consistent size and hit areas
+
+
+ Icons inside clickable areas (e.g., buttons or toggles) must have a minimum{" "}
+ touch target size of 44×44px to support users with motor impairments.
+
+
+ Ensure icon-only buttons are large enough and padded properly, not just visually aligned.{" "}
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Implementation notes",
+ content: (
+ <>
+
+ Using icons in our components is simple — just set the relevant prop to a Material Symbol name. To display the
+ filled version, prefix the icon name with filled_.
+
+
+ If you need to use icons outside of our components, make sure the{" "}
+ font family is set to Material Symbols Outlined. This font is automatically
+ loaded when using our components; otherwise, it must be manually imported or installed.
+
+
+ To toggle between filled and unfilled icons, use the font-variation-settings CSS property:
+
+
+
+ 'FILL' 0 for outlined
+
+
+ 'FILL' 1 for filled
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Handling icons in frames
+
+ Material Icons are carefully designed and optimized within a 24×24 pixel frame. This
+ frame includes built-in padding and alignment rules that ensure the icon scales correctly and aligns
+ visually with text and components.
+
+
+ Avoid resizing or cropping the icon inside its original frame. Doing so may lead to
+ misalignment, uneven spacing, or loss of visual balance.
+
+
+
+
+
+
+ Keep the default icon names
+
+ Each Material Icon comes with a predefined name (e.g., edit, check_circle,{" "}
+ menu). We recommend keeping this name unchanged when importing or using the
+ icon in Figma or code, as it makes collaboration between design and development easier and it aligns with
+ the original documentation and Material search.
+
+
+
+ Use consistent sizes
+ Halstack commonly uses icons at these sizes:
+
+
+ 16x16 px — for compact UI elements (e.g., small buttons, tags)
+
+
+ 20x20 px — for medium-sized interactions
+
+
+ 24x24 px — default size, used in most components
+
+
+
+ These sizes map directly to our height tokens. Other sizes from the height scale are
+ acceptable, but use them only when necessary, such as in hero banners or extra-large
+ action areas.
+
+
+
+
+
+
+ Respect spacing and alignment
+
+ Icons should align vertically centered with adjacent text or content, maintain consistent padding when
+ placed inside components (e.g., icon + label buttons), and never be stretched or highly cropped. Follow
+ spacing tokens for margins and paddings. When paired with text, use a spacing token between the icon and
+ label to ensure visual balance.
+
+
+
+ Choose the right style: outline vs filled
+
+ Use outline icons as the default style in Halstack. They are clean,
+ lightweight, and match the overall tone of our UI. When needing additional visual emphasis, use filled
+ icons for active or selected states, important status indicators, or in places with low visual density or
+ dark background.
+
+
+ Avoid mixing outline and filled styles in the same context unless you are using them to clearly indicate{" "}
+ states or semantic differences.
+
+
+
+ Don't use icons without clear purpose
+
+ Every icon should add value and support comprehension. Avoid using icons just for decoration: if it
+ doesn't clarify, reinforce, or simplify an interaction, it's better to leave it out. Also avoid overly
+ abstract or ambiguous icons. Clarity is more important than cleverness.
+
+
+
+
+ ),
+ },
+ {
+ title: "Resources and references",
+ content: (
+ <>
+
+ For further reference and documentation about Material icons library, please visit the following resources:
+
+
+
+
+ Material Icons Library
+
+
+ Explore the complete set of Material Icons available for download or use via web fonts. You can search by
+ name, category, or keyword, and preview each icon in outline, filled, rounded, sharp, or two-tone styles
+
+
+
+ Icons in Material Design System
+
+
+ Learn about the design principles, structure, and usage guidelines behind Material Icons. This resource
+ explains how icons are built, how to choose between styles, and how to apply them consistently across
+ interfaces.
+
+
+
+ ),
+ },
+];
+
+const IconographyPage = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export default IconographyPage;
diff --git a/apps/website/screens/foundations/iconography/images/accessibility_color.jpg b/apps/website/screens/foundations/iconography/images/accessibility_color.jpg
new file mode 100644
index 0000000000..5b6ba45156
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/accessibility_color.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/custom_correct.jpg b/apps/website/screens/foundations/iconography/images/custom_correct.jpg
new file mode 100644
index 0000000000..2de2b2312d
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/custom_correct.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/custom_incorrect.jpg b/apps/website/screens/foundations/iconography/images/custom_incorrect.jpg
new file mode 100644
index 0000000000..a893684de7
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/custom_incorrect.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/icons_context.jpg b/apps/website/screens/foundations/iconography/images/icons_context.jpg
new file mode 100644
index 0000000000..524796507c
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/icons_context.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/icons_grid.jpg b/apps/website/screens/foundations/iconography/images/icons_grid.jpg
new file mode 100644
index 0000000000..371da3e6c9
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/icons_grid.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/icons_halstack.jpg b/apps/website/screens/foundations/iconography/images/icons_halstack.jpg
new file mode 100644
index 0000000000..59531e9ba9
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/icons_halstack.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/icons_sizes.jpg b/apps/website/screens/foundations/iconography/images/icons_sizes.jpg
new file mode 100644
index 0000000000..61d4067797
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/icons_sizes.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/material_icons.png b/apps/website/screens/foundations/iconography/images/material_icons.png
new file mode 100644
index 0000000000..f13fd43210
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/material_icons.png differ
diff --git a/apps/website/screens/foundations/layout/Layout.tsx b/apps/website/screens/foundations/layout/Layout.tsx
new file mode 100644
index 0000000000..d28410e81f
--- /dev/null
+++ b/apps/website/screens/foundations/layout/Layout.tsx
@@ -0,0 +1,420 @@
+import { DxcHeading, DxcParagraph, DxcFlex, DxcBulletedList, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
+import PageHeading from "@/common/PageHeading";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Link from "next/link";
+import layoutStructure from "./images/layoutStructure.png";
+import anatomyColumns from "./images/anatomyColumns.jpg";
+import anatomyGutter from "./images/anatomyGutter.jpg";
+import anatomyMargin from "./images/anatomyMargin.jpg";
+import pageStructure from "./images/pageStructure.jpg";
+import Code from "@/common/Code";
+import Figure from "@/common/Figure";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Layout designates the position and organization of the elements of an interface. Halstack provides multiple
+ components to achieve layout consistency and an easy way to arrange elements in the UI. An effective layout
+ design is essential for creating seamless, consistent and robust user experiences across products, where
+ information is easy to find and users can carry out the intended actions without getting lost in the process.
+
+
+ The{" "}
+
+ application layout
+ {" "}
+ is the base that wraps any application built with Halstack. In addition, all of the components listed below
+ can be used within each other to create a wide variety of standard layouts:
+
+
+
+
+ Bleed
+
+
+
+
+ Container
+
+
+
+
+ Flex
+
+
+
+
+ Grid
+
+
+
+
+ Inset
+
+
+
+
+ ),
+ },
+ {
+ title: "Grid System",
+ content: (
+
+ Grids provide the foundation for consistently positioning elements onscreen. The 8x Grid is the
+ geometric foundation of all the visual elements of Halstack Design System components and spacing. It provides
+ structure and guidance for all creative decision-making. As mention above, our design system provides its own{" "}
+
+ Grid
+ {" "}
+ component to help users place elements within an interface effectively.
+
+ ),
+ subSections: [
+ {
+ title: "Structure",
+ content: (
+ <>
+
+ It is recommended to design based on a 12-column grid as the base layout structure. This
+ approach allows for a wide range of combinations, from single-column layouts to more complex multi-column
+ arrangements.
+
+
+ Each column is separated by a gutter, and the overall layout is framed by{" "}
+ margins on both sides to ensure content doesn't touch the edges of the viewport.
+
+
+
+ Margin
+ Column
+ Gutter
+
+
+ When working with columns in Halstack, the number in use can change depending on the screen size, but we
+ recommend the grid itself to remain based on 12 columns. For example, a sidebar might take 3 columns on
+ desktop and stack above the content on smaller viewports.
+
+
+ ),
+ },
+ {
+ title: "Grid anatomy",
+ subSections: [
+ {
+ title: "Columns",
+ content: (
+ <>
+
+ When working with columns in Halstack, the number in use can change depending on the screen size, but
+ we recommend the grid itself to remain based on 12 columns. For example, a sidebar might take 3
+ columns on desktop and stack above the content on smaller viewports.
+
+
+
+ ),
+ },
+ {
+ title: "Gutters",
+ content: (
+ <>
+
+ Gutters are the spaces between columns that keep content visually separated and easy to read. In
+ Halstack, their size is defined using our{" "}
+
+ spacing tokens
+
+ , ensuring consistent alignment and rhythm across all layouts. Gutters remain fixed within a given
+ breakpoint but adjust proportionally as the layout changes.
+
+
+
+ ),
+ },
+ {
+ title: "Margin", // or Padding?
+ content: (
+ <>
+
+ Margins are the spaces that separate the grid content from the outer edges of the layout. They help
+ maintain a balanced and readable design, especially on larger screens. Margins remain consistent
+ within a given breakpoint and are typically equal to or wider than the gutters, ensuring visual
+ harmony across the layout.
+
+
+
+ ),
+ },
+ ],
+ },
+ ],
+ },
+ {
+ title: "Breakpoints and responsiveness",
+ content: (
+ <>
+
+ Breakpoints are specific viewport widths at which the layout adapts to provide an optimal experience across
+ devices. They determine how many columns are displayed, how margins and gutters scale, and how content is
+ arranged. Breakpoints are chosen to ensure readability, usability, and consistency, allowing designs to
+ fluidly adjust from small to large screens.
+
+ When defining responsive behavior, consider:
+
+
+ Content-first approach: let the content guide breakpoint definition, rather than relying on
+ arbitrary device sizes.
+
+
+ Column reflow: as the viewport changes, columns may shrink, expand, or stack to preserve
+ usability.
+
+
+ Element scaling: spacing, typography, and component sizes should adjust in harmony with the
+ grid changes.
+
+
+ Consistent rhythm: maintain visual balance by aligning breakpoints with your design
+ system's spacing and typography scales.
+
+
+ Avoid device-specific breakpoints: instead of targeting exact device models, use ranges
+ that work well for multiple screen types.
+
+
+
+ In the following table, we recommend the best combination of columns, gutters and margins for each breakpoint.
+
+
+
+
+
Breakpoint
+
Viewport (px)
+
Columns
+
Gutters (px)
+
Margins (px)
+
+
+
+
+
+ xss
+
+
320-479
+
2
+
12
+
16
+
+
+
+ xs
+
+
480-767
+
6
+
12
+
16
+
+
+
+ s
+
+
768-1023
+
6
+
12
+
16
+
+
+
+ m
+
+
1024-1439
+
12
+
12
+
32
+
+
+
+ l
+
+
1440-1767
+
12
+
12
+
32
+
+
+
+ xl
+
+
1768+
+
12
+
12
+
32
+
+
+
+
+ ),
+ },
+ {
+ title: "Page structure and regions",
+ content: (
+ <>
+
+ A well-structured page helps users navigate content efficiently, understand hierarchy, and focus on their
+ tasks. In Halstack, we encourage a consistent structure across applications so users can quickly orient
+ themselves, regardless of the product they are using.
+
+
+ Every application should include at least a header and a footer. A sidenav{" "}
+ is highly encouraged for complex applications with multiple navigation levels, but it is not mandatory.
+
+
+
+
+
+ ),
+ subSections: [
+ {
+ title: "Header",
+ content: (
+ <>
+
+ The header provides global context and primary navigation. It remains visible across most screens to help
+ users quickly access high-level actions and navigate between key sections.
+
+
+ Expected content:
+
+
+ Product or company logo
+ Primary navigation links or menus
+ Global actions (search, notifications, profile dropdown)
+
+ Contextual tools (switcher for apps, quick actions relevant to the entire product)
+
+
+
+ ),
+ },
+ {
+ title: "Sidenav",
+ content: (
+ <>
+
+ The sidenav offers persistent access to main sections of the application. It supports exploration, quick
+ switching between areas, and clear orientation within complex products.
+
+
+ Expected content:
+
+
+ Main navigation links (usually grouped into categories)
+ Icons alongside labels for faster scanning
+ Optional collapsible groups for secondary navigation
+
+
+ ),
+ },
+ {
+ title: "Body",
+ content: (
+ <>
+
+ The body is where the main content lives. It adapts depending on the specific page and user task, and it
+ is the most flexible region of the layout.
+
+
+ Expected content:
+
+
+ Primary task flows (forms, tables, dashboards, content areas)
+ Inline navigation for subsections
+ Supporting components such as breadcrumbs, tabs, or filters
+
+
+ ),
+ },
+ {
+ title: "Footer",
+ content: (
+ <>
+
+ The footer anchors the page with supporting information and secondary navigation. It remains consistent
+ across pages and serves as the end point of the scroll experience.
+
+
+ Expected content:
+
+
+ Legal links (privacy policy, terms of service)
+ Secondary navigation (help center, contact, feedback)
+ Copyright information
+ Optional language switcher
+
+
+ Our own{" "}
+
+ Application layout
+ {" "}
+ comes with a pre-configured page layout specially tailored to help users place content within their
+ applications.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use the grid consistently: align all major elements (headers, content areas, components)
+ within the defined columns and gutters to ensure visual harmony and layout predictability.
+
+
+ Apply margins over padding for layout spacing: use margins to space components from each
+ other and from page edges. Reserve padding for internal component spacing, ensuring separation and layout
+ clarity.
+
+
+ Maintain layout breathing room: keep a clear buffer between your content and the screen
+ edges. Avoid layout without margins, which can feel cramped and reduce readability.
+
+
+ Adapt to different screen sizes thoughtfully: test layouts across breakpoints to ensure
+ content reflows naturally. Let your design scale fluidly (columns stack, gutters resize, margins adjust) to
+ remain both usable and visually balanced.
+
+
+ Design modular and scalable layouts: structure your layout into reusable sections (e.g.,
+ header, body, sidebar). This enables easy updates, extensions without design breaks, and consistent
+ experiences across products.
+
+
+ Minimize custom overrides: avoid manually overriding grid rules or spacing tokens. Custom
+ fixes can disrupt consistency and fragment the design system. If a special layout is needed, propose it for
+ inclusion in the core standards.
+
+
+ ),
+ },
+];
+
+const LayoutPage = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export default LayoutPage;
diff --git a/apps/website/screens/foundations/layout/images/anatomyColumns.jpg b/apps/website/screens/foundations/layout/images/anatomyColumns.jpg
new file mode 100644
index 0000000000..c9d82590f5
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/anatomyColumns.jpg differ
diff --git a/apps/website/screens/foundations/layout/images/anatomyGutter.jpg b/apps/website/screens/foundations/layout/images/anatomyGutter.jpg
new file mode 100644
index 0000000000..820eb10d42
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/anatomyGutter.jpg differ
diff --git a/apps/website/screens/foundations/layout/images/anatomyMargin.jpg b/apps/website/screens/foundations/layout/images/anatomyMargin.jpg
new file mode 100644
index 0000000000..40e9ad8f5d
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/anatomyMargin.jpg differ
diff --git a/apps/website/screens/foundations/layout/images/layoutStructure.png b/apps/website/screens/foundations/layout/images/layoutStructure.png
new file mode 100644
index 0000000000..b3b333feb7
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/layoutStructure.png differ
diff --git a/apps/website/screens/foundations/layout/images/pageStructure.jpg b/apps/website/screens/foundations/layout/images/pageStructure.jpg
new file mode 100644
index 0000000000..d34dad4a22
Binary files /dev/null and b/apps/website/screens/foundations/layout/images/pageStructure.jpg differ
diff --git a/apps/website/screens/foundations/spacing/SpacingPage.tsx b/apps/website/screens/foundations/spacing/SpacingPage.tsx
new file mode 100644
index 0000000000..1d81dc7a5f
--- /dev/null
+++ b/apps/website/screens/foundations/spacing/SpacingPage.tsx
@@ -0,0 +1,335 @@
+import { DxcHeading, DxcFlex, DxcTable, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
+import Image from "@/common/Image";
+import Code from "@/common/Code";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import PageHeading from "@/common/PageHeading";
+import DocFooter from "@/common/DocFooter";
+import spacings from "./images/spacings.png";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Spacing helps establish relationships between elements and gives users visual cues that
+ improve comprehension and interaction. Good spacing reduces cognitive load, improves accessibility, and
+ creates cleaner, more coherent interfaces.
+
+
+ We use a scale-based spacing system derived from a base unit of 4px. All spacing
+ — margins, padding, and element gaps — is applied using these defined increments. This promotes consistency
+ across UI layouts and helps ensure design and code stay aligned.
+
+
+ We recommend using spacing tokens instead of hard-coded pixel values to maintain design consistency and
+ scalability.
+
+
+
+ ),
+ },
+ {
+ title: "Spacing tokens",
+ content: (
+ <>
+
+ Our spacing scale is a set of predefined values based on multiples of 2px. This modular system allows
+ designers and developers to build layouts that are consistent and responsive.
+
+
+
+
+
Core token
+
Value (px)
+
Gap token
+
Padding token
+
+
+
+
+
+ dimensions/0
+
+
0px
+
+ spacing/gap/none
+
+
+ spacing/padding/none
+
+
+
+
+ dimensions/2
+
+
2px
+
+ spacing/gap/xxs
+
+
+ spacing/padding/xxxs
+
+
+
+
+ dimensions/4
+
+
4px
+
+ spacing/gap/xs
+
+
+ spacing/padding/xxs
+
+
+
+
+ dimensions/8
+
+
8px
+
+ spacing/gap/s
+
+
+ spacing/padding/xs
+
+
+
+
+ dimensions/12
+
+
12px
+
+ spacing/gap/m
+
+
+ spacing/padding/s
+
+
+
+
+ dimensions/16
+
+
16px
+
+ spacing/gap/ml
+
+
+ spacing/padding/m
+
+
+
+
+ dimensions/20
+
+
20px
+
-
+
+ spacing/padding/ml
+
+
+
+
+ dimensions/24
+
+
24px
+
+ spacing/gap/l
+
+
+ spacing/padding/l
+
+
+
+
+ dimensions/32
+
+
32px
+
+ spacing/gap/xl
+
+
+ spacing/padding/xl
+
+
+
+
+ dimensions/40
+
+
40px
+
-
+
+ spacing/padding/xxl
+
+
+
+
+ dimensions/48
+
+
48px
+
+ spacing/gap/xxl
+
+
-
+
+
+
+
+ ),
+ },
+ {
+ title: "Spacing guidelines by scale",
+ content: (
+
+ Our spacing system is built around tokens that represent consistent pixel values. We can group these into small,
+ medium, and large ranges to guide their application in different UI contexts — from tight, compact interfaces to
+ broad layout structures.
+
+ ),
+ subSections: [
+ {
+ title: "Small spacing (0px–8px)",
+ content: (
+ <>
+
+ For fine-grained spacing adjustments in compact UI elements where space is tight but
+ still important.
+
+
+ Common uses:
+
+
+ Spacing between small icons and adjacent text.
+
+ Internal padding for tight UI elements like badges, icon buttons, or dense table cells.
+
+ Narrow gaps between repeating elements.
+ Padding inside input fields and controls.
+ Vertical separation of elements within compact cards.
+ Offset between a trigger element and its overlay.
+
+
+ ),
+ },
+ {
+ title: "Medium spacing (12px–24px)",
+ content: (
+ <>
+
+ For more relaxed spacing in moderately sized components or to separate content within
+ larger elements.
+
+
+ Common uses:
+
+
+ Padding inside medium-to-large components.
+ Space between a large icon and its associated content.
+ Vertical rhythm between grouped elements in cards.
+
+ Gaps between elements in components that are not densely packed, offering a bit more breathing room.
+
+
+
+ ),
+ },
+ {
+ title: "Large spacing (32px–48px)",
+ content: (
+ <>
+
+ To manage spacing at a layout or structural level, where content needs to feel clearly
+ separated or grouped.
+
+
+ Common uses:
+
+
+
+ Space between sections or major content areas on a page (e.g. from page top to header).
+
+ Aligning content within wide containers or large components.
+ Creating structure in grid systems or responsive layouts.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Responsive behavior",
+ content: (
+ <>
+
+ Both fixed and fluid spacing behaviors play a key role in determining the placement of components when
+ adjusting screen sizes.
+
+
+
+ Fixed spacing can make parts of the application stop resizing or show scrollbars when the
+ screen gets too small. This is useful for layouts that need to stay structured so information is displayed
+ correctly.
+
+
+ Fluid spacing works better in smaller screens, letting elements move around as needed. For
+ example, a form might switch from two columns to one, or components might wrap to the next line, creating a
+ more vertical, flowing layout."
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+ To build clean, accessible, and maintainable interfaces, apply these spacing principles:
+
+
+
+ Design on a base grid
+
+ All spacing values should align to the 4px grid. This ensures rhythm and consistency across screens.
+
+
+
+ Group related content with consistent spacing
+
+ Use consistent vertical and horizontal spacing between related items like form fields, titles and
+ descriptions.
+
+
+
+ Avoid excessive whitespace
+
+ Too much spacing can break content relationships and force users to scan longer distances.
+
+
+
+ Test across viewports
+
+ Ensure spacing remains functional and clear on mobile, tablet, and desktop. Avoid overly tight or loose
+ layouts.
+
+
+
+
+ ),
+ },
+];
+
+const SpacingPage = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export default SpacingPage;
diff --git a/apps/website/screens/foundations/spacing/images/spacings.png b/apps/website/screens/foundations/spacing/images/spacings.png
new file mode 100644
index 0000000000..7ba4159311
Binary files /dev/null and b/apps/website/screens/foundations/spacing/images/spacings.png differ
diff --git a/apps/website/screens/foundations/tokens/TokensPage.tsx b/apps/website/screens/foundations/tokens/TokensPage.tsx
new file mode 100644
index 0000000000..8da050af9d
--- /dev/null
+++ b/apps/website/screens/foundations/tokens/TokensPage.tsx
@@ -0,0 +1,386 @@
+import Code from "@/common/Code";
+import DocFooter from "@/common/DocFooter";
+import Image from "@/common/Image";
+import PageHeading from "@/common/PageHeading";
+import DxcQuickNavContainer from "@/common/QuickNavContainer";
+import { DxcAlert, DxcBulletedList, DxcFlex, DxcHeading, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
+import Link from "next/link";
+import componentTokens from "./images/component_tokens.gif";
+import {
+ AbsoluteTokens,
+ AlphaTokens,
+ NeutralTokens,
+ PrimaryTokens,
+ SecondaryTokens,
+ Semantic01Tokens,
+ Semantic02Tokens,
+ Semantic03Tokens,
+ Semantic04Tokens,
+ TertiaryTokens,
+} from "./tables/CoreColorTokens";
+import DimensionsTokens from "./tables/CoreDimensionsTokens";
+import { FontFamilyTokens, FontSizesTokens, FontStylesTokens, FontWeightTokens } from "./tables/CoreFontTokens";
+import BorderTokens from "./tables/CoreBorderTokens";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Design tokens are the single source of truth for all design decisions in the Halstack Design
+ System. They create a shared language between design and development, ensuring consistency across products
+ while maintaining flexibility where customization is needed.
+
+
+ In Halstack, tokens define core attributes like colors, typography,{" "}
+ spacing, and more — serving as the foundation for scalable, themeable, and reusable component
+ styling.
+
+
+ Tokens allow product teams to build faster, with greater consistency and confidence.
+
+
+ ),
+ },
+ {
+ title: "From 2-layer to 3-layer token architecture",
+ content: (
+ <>
+
+
+ When Halstack was first established, its token structure followed a two-tier model:{" "}
+ primitive tokens (the raw foundational values) and component tokens (styles
+ appliedWIP at the component level.) The intermediate alias layer — commonly used to connect
+ foundations to components — was missing.
+
+
+ Over time, this gap led to inconsistencies. Each component seemed to "speak its own language," with naming
+ conventions, color assignments, and styling logic varying wildly between them. Without clear documentation or
+ a shared taxonomy, this structure is hard to maintain and harder to scale.
+
+
+ ),
+ subSections: [
+ {
+ title: "Why change",
+ content: (
+ <>
+
+ The absence of a middle layer and a consistent naming strategy cause several challenges:
+
+
+
+ Inconsistent styles: Components with similar behaviors (e.g., hover states) often used
+ unrelated token values.
+
+
+ Difficult maintenance:Without a systematic link between primitives and components,
+ updating or theming became unpredictable.
+
+
+ Limited reusability: Repeated values were not abstracted into tokens, forcing
+ duplication and increasing the chance of drift.
+
+
+
+ ),
+ },
+ {
+ title: "Where we're going",
+ content: (
+ <>
+
+ The refactor aims to create a three-tier token architecture:
+
+
+
+ Core: The raw values.
+
+
+ Alias: Contextual tokens that translate foundations into semantic meanings.
+
+
+ Component: Tokens applied to specific UI components, referencing aliases rather than
+ hardcoded values.
+
+
+
+ At this stage, the Core and Alias layers are already in place and
+ actively used in both design and development workflows. These two layers give us a solid foundation of
+ structured, semantic tokens that ensure consistency and scalability.
+
+
+ The next step is to extend this work into the Component layer, where tokens will be
+ defined specifically for UI components by referencing existing Alias tokens. This will allow us to
+ standardize pattern across all Halstack components and give product teams even greater flexibility when
+ theming. We expect to begin working on this layer in the coming months.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Structure",
+ subSections: [
+ {
+ title: "Core",
+ content: (
+ <>
+
+ The Core layer contains the fundamental, non-contextual design values that form the base
+ of the system. They are not tied to any component or theme; instead, they describe pure design attributes
+ such as specific colors or type sizes.
+
+ Foundations in Halstack include:
+
+
+
+ Color
+ {" "}
+ — Defines the base color palette, organized and measured using the OKLCH color space for accuracy and
+ accessibility.
+
+
+
+ Typography
+ {" "}
+ — Sets font families, weights, sizes, and line-heights that serve as the system's typographic
+ foundation.
+
+
+
+ Spacing
+ {" "}
+ — A consistent set of spacing values to control layout and component padding/margins.
+
+
+ Border — Defines border widths, radius, and styles for consistent corner and edge treatment.
+
+
+
+ Elevation
+ {" "}
+ — Standardized elevation styles for depth and hierarchy in UI elements.
+
+
+
+ Height
+ {" "}
+ — Predefined vertical dimensions for components and layouts.
+
+
+
+ ),
+ },
+ {
+ title: "Alias",
+ content: (
+ <>
+
+ The Alias layer maps core values to semantic meanings that align with the design language
+ and user context.
+
+
+ For example: color/bg/primary/strong → maps to a core token like{" "}
+ color/primary/700 (#6F4B97)
+
+
+ By separating raw values from their semantic role, we not only enable easy theming and quick adjustments
+ without touching the foundational values, but also establish clear usage expectations:
+ whether a token should be applied as a background (bg), foreground (fg),
+ or border element. This reduces ambiguity and ensures that tokens are applied
+ consistently across components and interfaces.
+
+
+ ),
+ },
+ {
+ title: "Component",
+ content: (
+ <>
+
+ Component tokens define the styling for each component in Halstack, referencing{" "}
+ Alias tokens rather than hardcoded values.
+
+
+ Example: A button's hover background might use, which itself maps to an alias token, which then points to
+ a core color.
+
+ This indirection:
+
+ Keeps component styles consistent across the system.
+ Simplifies global updates.
+
+ Allows products to theme components without rewriting every style rule.
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Halstack's theming strategy and token layers",
+ content: (
+ <>
+
+ Until now, Halstack has supported two theming strategies — an{" "}
+ opinionated approach with limited, safe customization, and an{" "}
+ advanced approach with broader freedom. Several products have already benefited from these
+ strategies.
+
+
+ With the new token architecture, our goal is to continue supporting both levels of theming,{" "}
+ even though the underlying structure that makes them possible will change. This ensures that product teams can
+ rely on the same flexibility they know today, while also benefiting from a more scalable and consistent
+ system.
+
+
+ By aligning this strategy with our token architecture:
+
+
+ With the Core layer, we can already enable opinionated theming, exposing
+ tokens like colors, spacing, or typography in a way that is safe and predictable.
+
+
+ To unlock Advanced theming, we will rely on the upcoming Component layer
+ , which will allow deeper overrides at the component-token level. This work is still in progress and will
+ be rolled out in the coming months.
+
+
+
+
+ This structured approach ensures that theming in Halstack is flexible but safe — giving teams
+ the ability to adapt components to their needs while still protecting those{" "}
+ design decisions that are critical for accessibility such as maintaining proper{" "}
+ contrast ratios, minimum font sizes, and spacing values. In this way, we preserve both{" "}
+ brand flexibility and usability standards across all products.
+
+
+ ),
+ },
+ {
+ title: "How tokens move from design to code",
+ content: (
+ <>
+
+ Design tokens in Halstack are created in{" "}
+
+ Figma
+
+ , where they serve as the foundation for all design decisions. From there, they evolve into development-ready
+ assets, ensuring a seamless bridge between design and code.
+
+
+ ),
+ subSections: [
+ {
+ title: "Tokens in Design",
+ content: (
+ <>
+
+ In Halstack, tokens are defined and maintained as Variables in Figma. These variables
+ represent values like colors, spacing, typography, and more, and are applied directly in the design of{" "}
+
+ components
+ {" "}
+ and interface flows.
+
+
+ ),
+ },
+ {
+ title: "Tokens in Development",
+ content: (
+ <>
+
+ We have overhauled our token system to improve consistency in naming and usability. To achieve this, we
+ chose an implementation with CSS variables over our previous JavaScript-based implementation. There are
+ other advantages to using CSS variables, including less re-rendering, better performance and the ability
+ to update them at runtime.
+
+
+ As explained in the previous section, the token structure has been updated from a two-layer system to a
+ three-layer system. This new structure will allow developers to customize both the first and third layers.
+
+
+ The first layer (composed of core tokens) can be customized when using the opinionated theming approach.
+ Below is the list of available core tokens:
+
+ <>
+ {/* Color Tokens */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <>
+ {/* Dimensions Tokens */}
+
+
+
+ <>
+ {/* Font Tokens */}
+
+
+
+
+
+
+
+
+
+
+ <>
+ {/* Border Tokens */}
+
+
+
+ The component layer is still under development.
+
+ ),
+ },
+ ],
+ },
+];
+
+const TokensPage = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export default TokensPage;
diff --git a/apps/website/screens/foundations/tokens/images/component_tokens.gif b/apps/website/screens/foundations/tokens/images/component_tokens.gif
new file mode 100644
index 0000000000..ecab8b7c85
Binary files /dev/null and b/apps/website/screens/foundations/tokens/images/component_tokens.gif differ
diff --git a/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx
new file mode 100644
index 0000000000..a74df3ac34
--- /dev/null
+++ b/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx
@@ -0,0 +1,29 @@
+import { TableCode } from "@/common/Code";
+import { DxcTable } from "@dxc-technology/halstack-react";
+
+const BorderTokens = () => (
+
+
+
+
+
+);
diff --git a/apps/website/screens/foundations/typography/TypographyPage.tsx b/apps/website/screens/foundations/typography/TypographyPage.tsx
new file mode 100644
index 0000000000..d33b7f7438
--- /dev/null
+++ b/apps/website/screens/foundations/typography/TypographyPage.tsx
@@ -0,0 +1,643 @@
+import { DxcHeading, DxcParagraph, DxcFlex, DxcBulletedList, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
+import PageHeading from "@/common/PageHeading";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import Image from "@/common/Image";
+import fontFamily from "./images/font_family.png";
+import heading from "./images/heading.png";
+import body from "./images/body.png";
+import helperText from "./images/helper_text.png";
+import label from "./images/label.png";
+import title from "./images/title.png";
+import link from "./images/link.png";
+import Link from "next/link";
+import Code from "@/common/Code";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ Typography plays a critical role in structuring the user's experience through the visual impact it has on the
+ interface content.
+
+
+ It defines what is the first noticeable piece of information or data based on the font's
+ shape, size, color, or type, and it highlights some pieces of text over others.
+
+
+ Our selected typography helps organize and prioritize content in a way that is clear,
+ accessible, and visually appealing.
+
+
+ ),
+ },
+ {
+ title: "Text styles and tokens",
+ content: (
+ <>
+
+ Text styles and typography tokens consist of certain font properties, such as font family, size or weight. In
+ design tools like Figma, text styles are applied visually, while in code, typography tokens serve this
+ purpose.
+
+
+ Some typographic elements used in the Halstack Design System include{" "}
+ headers, body, helper texts, titles, and labels. In your designs, make use of those elements.
+ These typographic choices are already embedded within the typography tokens and will make it possible to
+ enable typography theming in the future.
+
+
+ These are the core definitions and tokens that form the base of the typographic system. They should be used
+ consistently across all typographic styles.
+
+
+ ),
+ subSections: [
+ {
+ title: "Font family",
+ content: (
+ <>
+
+ For our sans-serif font-family we use Open Sans; a modern, humanist
+ sans-serif typeface designed by Steve Matteson. It is known for its{" "}
+ clarity, neutrality, and readability across a wide range of digital and print
+ applications.
+
+
+ With its{" "}
+ open forms, neutral yet friendly appearance, and optimized legibility at small sizes,
+ Open Sans is optimized for both web and mobile interfaces, balancing aesthetic appeal
+ with functional clarity. The typeface includes a wide character set that supports{" "}
+ Latin, Greek, and Cyrillic scripts, making it suitable for internationalization.
+
+
+ Open Sans can be accessed via{" "}
+
+ Google Fonts
+ {" "}
+ and is released under the{" "}
+
+ SIL Open Font License Version 1.1
+
+ .
+
+
+
+ ),
+ },
+ {
+ title: "Font weights",
+ content: (
+ <>
+ Different weights define hierarchy and emphasis in various elements.
+
+
+
+
Weight
+
Token
+
Value
+
+
+
+
+
Light
+
+ font/weight/light
+
+
300
+
+
+
Regular
+
+ font/weight/regular
+
+
400
+
+
+
Semibold
+
+ font/weight/semibold
+
+
600
+
+
+
Bold
+
+ font/weight/bold
+
+
700
+
+
+
+
+ ),
+ },
+ {
+ title: "Font styles",
+ content: (
+ <>
+
+ Font styles provide additional ways to convey meaning and emphasis in text elements. While different
+ styles such as italic can be used to highlight certain content, the default style applied is{" "}
+ normal. This ensures consistency and readability across most text, reserving other styles
+ for special cases.{" "}
+
+
+
+
+
Token
+
Style
+
Usage
+
+
+
+
+
+ font/style/normal
+
+
normal
+
Default
+
+
+
+ font/style/lightitalic
+
+
italic
+
Applied selectively for helper text where subtle emphasis is needed.
+
+
+
+
+ ),
+ },
+ {
+ title: "Font sizes",
+ content: (
+ <>
+
+ Font sizes are assigned based on visual hierarchy needs. Not all sizes apply to every text element.
+
+
+
+
+
Token
+
Value (px)
+
+
+
+
+
+ font/size/12
+
+
12
+
+
+
+ font/size/14
+
+
14
+
+
+
+ font/size/16
+
+
16
+
+
+
+ font/size/18
+
+
18
+
+
+
+ font/size/20
+
+
20
+
+
+
+ font/size/24
+
+
24
+
+
+
+ font/size/32
+
+
32
+
+
+
+ font/size/40
+
+
40
+
+
+
+ font/size/48
+
+
48
+
+
+
+ font/size/60
+
+
60
+
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Usage",
+ content: (
+
+ Typography usage is categorized by purpose. Each category has predefined size and weight combinations to ensure
+ consistency and scalability across interfaces.
+
+ ),
+ subSections: [
+ {
+ title: "Heading",
+ content: (
+ <>
+
+ Use headings for page titles and section introductions. Headings are designed to stand out from regular
+ text, creating clear visual hierarchy and making it easier for readers to follow the organization of the
+ content.
+
+
+ Headings mark the start of new sections. Always use designated heading styles, rather than just bolding
+ text or changing the font size, since proper headings are important for accessibility.
+
+
+ Appropriate heading levels guide users through the page, especially those using screen readers or other
+ assistive devices. Correct use of heading levels also helps organize information, making content easier to
+ scan.
+
+
+ Heading tags (<h1> through <h6>) should be applied in order, without
+ skipping levels. Each page should have a single h1, typically reserved for the main title, and subsequent
+ headings should follow in sequence (for example, use h2 after h1, not h4).
+
+
+
+
+
+
Token
+
Font size
+
Font weight
+
Usage
+
+
+
+
+
+ typography/heading/xs
+
+
+ font/size/12
+
+
Light / Regular / Semibold
+
H6
+
+
+
+ typography/heading/s
+
+
+ font/size/16
+
+
Light / Regular / Semibold
+
H5
+
+
+
+ typography/heading/m
+
+
+ font/size/20
+
+
Light / Regular / Semibold
+
H4
+
+
+
+ typography/heading/l
+
+
+ font/size/24
+
+
Light / Regular / Semibold
+
H3
+
+
+
+ typography/heading/xl
+
+
+ font/size/32
+
+
Light / Regular / Semibold
+
H2
+
+
+
+ typography/heading/xxl
+
+
+ font/size/40
+
+
Light / Regular / Semibold
+
H1
+
+
+
+
+ ),
+ },
+ {
+ title: "Body",
+ content: (
+ <>
+
+ Used for paragraphs, long-form content, and general UI copy. It usually follows headings or subheadings,
+ providing detailed information or messages. Body text should prioritize readability. Use sizes according
+ to density and layout needs.
+
+
+
+
+
+
Token
+
Font size
+
Font weight
+
+
+
+
+
+ typography/body/xs
+
+
+ font/size/12
+
+
Regular
+
+
+
+ typography/body/s
+
+
+ font/size/14
+
+
Regular
+
+
+
+ typography/body/m
+
+
+ font/size/16
+
+
Regular
+
+
+
+ typography/body/l
+
+
+ font/size/18
+
+
Regular
+
+
+
+ typography/body/xl
+
+
+ font/size/20
+
+
Regular
+
+
+
+ typography/body/xxl
+
+
+ font/size/24
+
+
Regular
+
+
+
+
+ ),
+ },
+ {
+ title: "Helper text",
+ content: (
+ <>
+
+ Used for inline guidance, validation messages, or tooltips. Helper text is typically small and subtle but
+ must remain legible.
+
+
+
+
+
+
Size
+
Font size
+
Font weight
+
Font style
+
+
+
+
+
+ typography/helper-text/s
+
+
+ font/size/12
+
+
Regular
+
-
+
+
+
+ typography/helper-text/m
+
+
+ font/size/14
+
+
Regular / Semibold
+
-
+
+
+
+ typography/helper-text/l
+
+
+ font/size/16
+
+
Light
+
Italic
+
+
+
+
+ ),
+ },
+ {
+ title: "Title",
+ content: (
+ <>
+
+ Used for prominent titles in components such as cards or modals. Use sparingly for component-level titles
+ where a strong label is needed.
+
+
+
+
+
+
Size
+
Font size
+
Font weight
+
+
+
+
+
S
+
+ font/size/14
+
+
Bold
+
+
+
M
+
+ font/size/16
+
+
Bold
+
+
+
L
+
+ font/size/20
+
+
Bold
+
+
+
XL
+
+ font/size/24
+
+
Bold
+
+
+
+
+ ),
+ },
+ {
+ title: "Label",
+ content: (
+ <>
+
+ Used to describe UI elements such as form fields, checkboxes, or sections. Labels should be clear,
+ concise, and consistent in weight and size throughout the product.
+
+
+
+
+
+
Size
+
Font size
+
Font weight
+
+
+
+
+
S
+
+ font/size/12
+
+
Regular / Semibold
+
+
+
M
+
+ font/size/14
+
+
Regular / Semibold
+
+
+
L
+
+ font/size/16
+
+
Regular / Semibold
+
+
+
XL
+
+ font/size/20
+
+
Regular / Semibold
+
+
+
+
+ ),
+ },
+ {
+ title: "Link",
+ content: (
+ <>
+
+ Used for navigational or interactive text elements. Links use clear, recognizable styling and must be
+ distinguishable from body text.
+
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Use the defined font family (font/family/sans) consistently.
+
+ Apply only the specified weight and size combinations per use case.
+ Avoid using font sizes smaller than 12px for accessibility reasons.
+ Maintain a minimum 4.5:1 contrast ratio for standard text.
+
+ Do not apply custom typography outside of the predefined system to ensure consistency and scalability.
+
+
+ ),
+ },
+];
+
+const TypographyPage = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export default TypographyPage;
diff --git a/apps/website/screens/foundations/typography/images/body.png b/apps/website/screens/foundations/typography/images/body.png
new file mode 100644
index 0000000000..de1bf7762d
Binary files /dev/null and b/apps/website/screens/foundations/typography/images/body.png differ
diff --git a/apps/website/screens/foundations/typography/images/font_family.png b/apps/website/screens/foundations/typography/images/font_family.png
new file mode 100644
index 0000000000..6d095f2bcd
Binary files /dev/null and b/apps/website/screens/foundations/typography/images/font_family.png differ
diff --git a/apps/website/screens/foundations/typography/images/heading.png b/apps/website/screens/foundations/typography/images/heading.png
new file mode 100644
index 0000000000..974d92a535
Binary files /dev/null and b/apps/website/screens/foundations/typography/images/heading.png differ
diff --git a/apps/website/screens/foundations/typography/images/helper_text.png b/apps/website/screens/foundations/typography/images/helper_text.png
new file mode 100644
index 0000000000..582a9057c8
Binary files /dev/null and b/apps/website/screens/foundations/typography/images/helper_text.png differ
diff --git a/apps/website/screens/foundations/typography/images/label.png b/apps/website/screens/foundations/typography/images/label.png
new file mode 100644
index 0000000000..db60a39e04
Binary files /dev/null and b/apps/website/screens/foundations/typography/images/label.png differ
diff --git a/apps/website/screens/foundations/typography/images/link.png b/apps/website/screens/foundations/typography/images/link.png
new file mode 100644
index 0000000000..342ed4fbb1
Binary files /dev/null and b/apps/website/screens/foundations/typography/images/link.png differ
diff --git a/apps/website/screens/foundations/typography/images/title.png b/apps/website/screens/foundations/typography/images/title.png
new file mode 100644
index 0000000000..43a7bfa9bc
Binary files /dev/null and b/apps/website/screens/foundations/typography/images/title.png differ
diff --git a/apps/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx b/apps/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx
index faff2a0d4e..be67fcbb1f 100644
--- a/apps/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx
+++ b/apps/website/screens/overview/component-lifecycle/ComponentLifecyclePage.tsx
@@ -1,7 +1,6 @@
import DocFooter from "@/common/DocFooter";
import PageHeading from "@/common/PageHeading";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcBulletedList, DxcFlex, DxcHeading, DxcParagraph } from "@dxc-technology/halstack-react";
const sections = [
@@ -176,20 +175,16 @@ const sections = [
},
];
-const ComponentLifecyclePage = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-};
+const ComponentLifecyclePage = () => (
+
+
+
+
+
+
+
+
+
+);
export default ComponentLifecyclePage;
diff --git a/apps/website/screens/overview/installation/InstallationPage.tsx b/apps/website/screens/overview/installation/InstallationPage.tsx
index cb0ba40189..757f227a04 100644
--- a/apps/website/screens/overview/installation/InstallationPage.tsx
+++ b/apps/website/screens/overview/installation/InstallationPage.tsx
@@ -4,7 +4,6 @@ import building from "./examples/building";
import DocFooter from "@/common/DocFooter";
import PageHeading from "@/common/PageHeading";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import CodeBlock from "@/common/CodeBlock";
import Code from "@/common/Code";
@@ -45,10 +44,10 @@ const sections = [
<>
As the name suggests, halstack-react is built on top of React, so make sure you
- have it as dependency of your project. Additionally, ensure that the styled-components{" "}
- library is also installed, as it is required by the Halstack components.
+ have it as dependency of your project. Additionally, ensure that emotion library is also
+ installed, as it is required by the Halstack components.
- {`npm i react react-dom styled-components`}
+ {`npm i react react-dom react-data-grid @emotion/react @emotion/styled`}
),
},
@@ -96,18 +95,16 @@ const sections = [
},
];
-export default function Installation() {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-}
+const InstallationPage = () => (
+
+
+
+
+
+
+
+
+
+);
+
+export default InstallationPage;
diff --git a/apps/website/screens/overview/installation/examples/building.ts b/apps/website/screens/overview/installation/examples/building.ts
deleted file mode 100644
index c0f76630a4..0000000000
--- a/apps/website/screens/overview/installation/examples/building.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DxcButton, DxcFlex, DxcHeading, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
-
-const code = `() => (
-
-
-
-
- Halstack is an Open Source Design System built and maintained by DXC Technology
- with the purpose of providing all the necessary tools for designing
- and implementing accessible, intuitive and consistent User Experiences
- with Figma, UXPin and React.
-
- alert("Hello world!")} />
-
-
-);`;
-
-const scope = {
- DxcButton, DxcFlex, DxcHeading, DxcInset, DxcParagraph
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/overview/installation/examples/building.tsx b/apps/website/screens/overview/installation/examples/building.tsx
new file mode 100644
index 0000000000..41c9ce961f
--- /dev/null
+++ b/apps/website/screens/overview/installation/examples/building.tsx
@@ -0,0 +1,26 @@
+import { DxcButton, DxcFlex, DxcHeading, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react";
+
+const code = `() => (
+
+
+
+
+ Halstack is an Open Source Design System built and maintained by DXC Technology
+ with the purpose of providing all the necessary tools for designing
+ and implementing accessible, intuitive and consistent User Experiences
+ with Figma, UXPin and React.
+
+ alert("Hello world!")} />
+
+
+);`;
+
+const scope = {
+ DxcButton,
+ DxcFlex,
+ DxcHeading,
+ DxcInset,
+ DxcParagraph,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/overview/introduction/IntroductionPage.tsx b/apps/website/screens/overview/introduction/IntroductionPage.tsx
index 93b2694bb4..0f69683f37 100644
--- a/apps/website/screens/overview/introduction/IntroductionPage.tsx
+++ b/apps/website/screens/overview/introduction/IntroductionPage.tsx
@@ -2,15 +2,14 @@ import { DxcLink, DxcHeading, DxcParagraph, DxcBulletedList, DxcFlex } from "@dx
import QuickNavContainer from "@/common/QuickNavContainer";
import PageHeading from "@/common/PageHeading";
import DocFooter from "@/common/DocFooter";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
const sections = [
{
title: "What Halstack is",
content: (
- Halstack is an Open Source Design System built and maintained by DXC Technology with the purpose of providing
- all the necessary tools for designing and implementing accessible, intuitive and consistent User Experiences
+ Halstack is an open source Design System built and maintained by DXC Technology with the purpose of providing
+ all the necessary tools for designing and implementing accessible, intuitive and consistent user experiences
with Figma, UXPin and React.
),
@@ -19,7 +18,7 @@ const sections = [
title: "A tool for designers",
content: (
- Halstack's first goal is to provide Product Designers with pre-created designs for the most common use-cases
+ Halstack's first goal is to provide product designers with pre-created designs for the most common use-cases
they will face during the product design stage. Using Halstack, they don't need to reinvent the wheel
looking for a solution to these mundane problems, and can focus on adding business value. Also, by
centralizing these efforts in a Design System team, we can pay the right amount of attention to aspects as
@@ -66,7 +65,7 @@ const sections = [
<>
All the opinions provided by Halstack Design System always remain within the boundaries of the generalist
- UI/UX Design domain. Halstack will not get into business-specific elements even if they are reusable. For
+ UI/UX design domain. Halstack will not get into business-specific elements even if they are reusable. For
example, Halstack might provide guidelines on using forms within the context of digital applications.
Still, it doesn't get into the specifics of designing a form for an insurance quote application.
@@ -87,7 +86,7 @@ const sections = [
title: "A replacement for the Product Design stage",
content: (
- Halstack should always be considered as assistance to the Product Design process, but never as a
+ Halstack should always be considered as assistance to the product design process, but never as a
replacement. Product Designers are still a fundamental piece of this process since they will need to add the
business context, validate the patterns contemplated by the Design System, and contribute back to the design
system when necessary.
@@ -158,6 +157,21 @@ const sections = [
},
],
},
+ {
+ title: "Supported Browsers",
+ content: (
+ <>
+
+ Our design system is optimized to work seamlessly on Firefox and browsers based on the Chromium engine (such
+ as Google Chrome, Microsoft Edge, Brave, and Opera).
+
+
+ Other browsers are not officially supported, which means some components or features may not behave as
+ expected. For the best experience, we recommend using one of the supported browsers.
+
+
+ ),
+ },
{
title: "How to use this site",
content: (
@@ -207,20 +221,16 @@ const sections = [
},
];
-const Introduction = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-};
+const IntroductionPage = () => (
+
+
+
+
+
+
+
+
+
+);
-export default Introduction;
+export default IntroductionPage;
diff --git a/apps/website/screens/overview/releases/ReleasesPage.tsx b/apps/website/screens/overview/releases/ReleasesPage.tsx
index 9af6e78248..3f972eb525 100644
--- a/apps/website/screens/overview/releases/ReleasesPage.tsx
+++ b/apps/website/screens/overview/releases/ReleasesPage.tsx
@@ -2,7 +2,6 @@ import { DxcHeading, DxcParagraph, DxcFlex, DxcLink, DxcBulletedList } from "@dx
import QuickNavContainer from "@/common/QuickNavContainer";
import PageHeading from "@/common/PageHeading";
import DocFooter from "@/common/DocFooter";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import HalstackMarkdownParser from "@/common/HalstackMarkdownParser";
import Link from "next/link";
import Code from "@/common/Code";
@@ -28,6 +27,9 @@ const sections = [
<>
Every major release of Halstack is collected below:
+
+ Halstack 15
+ Halstack 14
@@ -110,21 +112,19 @@ const getReleasesPageSections = (releases: Release[]) => {
return [...sections, section];
};
-const Releases = ({ releases }: { releases: Release[] }) => (
+const ReleasesPage = ({ releases }: { releases: Release[] }) => (
-
-
+
+
Access all the major releases of the Halstack React library and see the changelog of every version available.
-
-
-
+
);
-export default Releases;
+export default ReleasesPage;
diff --git a/apps/website/screens/principles/color/ColorPage.tsx b/apps/website/screens/principles/color/ColorPage.tsx
deleted file mode 100644
index f1d8b28c07..0000000000
--- a/apps/website/screens/principles/color/ColorPage.tsx
+++ /dev/null
@@ -1,826 +0,0 @@
-import { DxcTable, DxcFlex, DxcLink, DxcParagraph, DxcHeading } from "@dxc-technology/halstack-react";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import colorOverview from "./images/color_overview.png";
-import colorFamilies from "./images/color_families.png";
-import PageHeading from "@/common/PageHeading";
-
-const sections = [
- {
- title: "Introduction",
- content: (
- <>
-
-
-
-
- The color palette is an essential asset as a communication resource of our Design System.
-
-
- Halstack color palette brings a unified consistency and helps in guiding the user's perception order. Our
- color palette is based in the{" "}
-
- HSL model
-
- . All our color families are calculated using the lightness value of the standard DXC palette colors.
-
-
- ),
- },
- {
- title: "Color tokens",
- content: (
-
- Halstack uses tokens to manage color. Apart from a multi-purpose greyscale family, purple and blue are the core
- color families used in our set of components. Additional families as red, green and yellow help as feedback
- role-based color palettes and must not be used outside this context.
-
- ),
- subSections: [
- {
- title: "Core color tokens",
- content: (
- <>
-
-
-
-
- ),
- subSections: [
- {
- title: "Absolutes",
- content: (
-
-
-
-
-
- ),
- },
- ],
- },
- ],
- },
-];
-
-const ColorPage = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default ColorPage;
diff --git a/apps/website/screens/principles/color/images/color_families.png b/apps/website/screens/principles/color/images/color_families.png
deleted file mode 100644
index b1aa04db7b..0000000000
Binary files a/apps/website/screens/principles/color/images/color_families.png and /dev/null differ
diff --git a/apps/website/screens/principles/color/images/color_overview.png b/apps/website/screens/principles/color/images/color_overview.png
deleted file mode 100644
index d771842049..0000000000
Binary files a/apps/website/screens/principles/color/images/color_overview.png and /dev/null differ
diff --git a/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx b/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx
index 6faa857a51..b62021cf4f 100644
--- a/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx
+++ b/apps/website/screens/principles/data-visualization/DataVisualizationPage.tsx
@@ -1,10 +1,8 @@
import { DxcFlex, DxcParagraph, DxcHeading, DxcTable, DxcLink, DxcBulletedList } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import PageHeading from "@/common/PageHeading";
import Code from "@/common/Code";
-import Figure from "@/common/Figure";
import Image from "@/common/Image";
import Link from "next/link";
import colorPalette from "./images/bar_chart_color_palette.png";
@@ -326,20 +324,16 @@ const sections = [
},
];
-const DataVisualizationPage = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-};
+const DataVisualizationPage = () => (
+
+
+
+
+
+
+
+
+
+);
export default DataVisualizationPage;
diff --git a/apps/website/screens/principles/data-visualization/examples/barChart.ts b/apps/website/screens/principles/data-visualization/examples/barChart.ts
deleted file mode 100644
index 70cc217f98..0000000000
--- a/apps/website/screens/principles/data-visualization/examples/barChart.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { applyTheme } from "@cloudscape-design/components/theming";
-import { BarChart } from "@cloudscape-design/components";
-import { DxcHeading, DxcInset } from "@dxc-technology/halstack-react";
-
-const CoreColorTokens = {
- color_grey_700: "#666666",
- color_grey_900: "#333333",
- color_grey_50_a: "#00000005",
- color_grey_100_a: "#0000000d",
- color_grey_200_a: "#0000001a",
- color_grey_300_a: "#00000033",
- color_grey_400_a: "#0000004d",
- color_grey_500_a: "#00000066",
- color_grey_600_a: "#00000080",
- color_grey_700_a: "#00000099",
- color_grey_800_a: "#000000b3",
- color_grey_900_a: "#000000cc",
- color_purple_500: "#a46ede",
- color_purple_600: "#7d2fd0",
- color_blue_600: "#0095ff",
- color_blue_800: "#0067b3",
- color_red_500: "#fe344f",
- color_red_700: "#d0011b",
- color_green_700: "#24a148",
- color_green_900: "#135325",
- color_yellow_800: "#947705",
- color_yellow_900: "#624f04",
- color_orange_700: "#c26c0a",
- color_orange_800: "#915108",
-};
-
-const code = `() => {
- const theme = {
- tokens: {
- colorChartsPaletteCategorical1: CoreColorTokens.color_purple_500,
- colorChartsPaletteCategorical2: CoreColorTokens.color_blue_600,
- colorChartsPaletteCategorical3: CoreColorTokens.color_green_700,
- colorChartsPaletteCategorical4: CoreColorTokens.color_red_500,
- colorChartsPaletteCategorical5: CoreColorTokens.color_orange_700,
- colorChartsPaletteCategorical6: CoreColorTokens.color_yellow_800,
- colorChartsPaletteCategorical7: CoreColorTokens.color_purple_600,
- colorChartsPaletteCategorical8: CoreColorTokens.color_blue_800,
- colorChartsPaletteCategorical9: CoreColorTokens.color_green_900,
- colorChartsPaletteCategorical10: CoreColorTokens.color_red_700,
- colorChartsPaletteCategorical11: CoreColorTokens.color_orange_800,
- colorChartsPaletteCategorical12: CoreColorTokens.color_yellow_900,
- colorChartsThresholdNeutral: CoreColorTokens.color_grey_700,
- colorTextBodySecondary: CoreColorTokens.color_grey_700,
- colorTextBodyDefault: CoreColorTokens.color_grey_900,
- },
- };
-
- applyTheme({ theme });
-
- return (
-
-
-
-
- );
-}`;
-
-const scope = {
- applyTheme,
- BarChart,
- CoreColorTokens,
- DxcHeading,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/principles/data-visualization/examples/barChart.tsx b/apps/website/screens/principles/data-visualization/examples/barChart.tsx
new file mode 100644
index 0000000000..129292d859
--- /dev/null
+++ b/apps/website/screens/principles/data-visualization/examples/barChart.tsx
@@ -0,0 +1,96 @@
+import { applyTheme } from "@cloudscape-design/components/theming";
+import { BarChart } from "@cloudscape-design/components";
+import { DxcHeading, DxcInset } from "@dxc-technology/halstack-react";
+
+const CoreColorTokens = {
+ color_grey_700: "#666666",
+ color_grey_900: "#333333",
+ color_grey_50_a: "#00000005",
+ color_grey_100_a: "#0000000d",
+ color_grey_200_a: "#0000001a",
+ color_grey_300_a: "#00000033",
+ color_grey_400_a: "#0000004d",
+ color_grey_500_a: "#00000066",
+ color_grey_600_a: "#00000080",
+ color_grey_700_a: "#00000099",
+ color_grey_800_a: "#000000b3",
+ color_grey_900_a: "#000000cc",
+ color_purple_500: "#a46ede",
+ color_purple_600: "#7d2fd0",
+ color_blue_600: "#0095ff",
+ color_blue_800: "#0067b3",
+ color_red_500: "#fe344f",
+ color_red_700: "#d0011b",
+ color_green_700: "#24a148",
+ color_green_900: "#135325",
+ color_yellow_800: "#947705",
+ color_yellow_900: "#624f04",
+ color_orange_700: "#c26c0a",
+ color_orange_800: "#915108",
+};
+
+const code = `() => {
+ const theme = {
+ tokens: {
+ colorChartsPaletteCategorical1: CoreColorTokens.color_purple_500,
+ colorChartsPaletteCategorical2: CoreColorTokens.color_blue_600,
+ colorChartsPaletteCategorical3: CoreColorTokens.color_green_700,
+ colorChartsPaletteCategorical4: CoreColorTokens.color_red_500,
+ colorChartsPaletteCategorical5: CoreColorTokens.color_orange_700,
+ colorChartsPaletteCategorical6: CoreColorTokens.color_yellow_800,
+ colorChartsPaletteCategorical7: CoreColorTokens.color_purple_600,
+ colorChartsPaletteCategorical8: CoreColorTokens.color_blue_800,
+ colorChartsPaletteCategorical9: CoreColorTokens.color_green_900,
+ colorChartsPaletteCategorical10: CoreColorTokens.color_red_700,
+ colorChartsPaletteCategorical11: CoreColorTokens.color_orange_800,
+ colorChartsPaletteCategorical12: CoreColorTokens.color_yellow_900,
+ colorChartsThresholdNeutral: CoreColorTokens.color_grey_700,
+ colorTextBodySecondary: CoreColorTokens.color_grey_700,
+ colorTextBodyDefault: CoreColorTokens.color_grey_900,
+ },
+ };
+
+ applyTheme({ theme });
+
+ return (
+
+
+
+
+ );
+}`;
+
+const scope = {
+ applyTheme,
+ BarChart,
+ CoreColorTokens,
+ DxcHeading,
+ DxcInset,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/principles/iconography/IconographyPage.tsx b/apps/website/screens/principles/iconography/IconographyPage.tsx
deleted file mode 100644
index 08a5579ce6..0000000000
--- a/apps/website/screens/principles/iconography/IconographyPage.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { DxcHeading, DxcParagraph, DxcFlex, DxcLink, DxcBulletedList } from "@dxc-technology/halstack-react";
-import PageHeading from "@/common/PageHeading";
-import Link from "next/link";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import Image from "@/common/Image";
-import iconographyExamples from "./images/iconography_examples.png";
-import buttonsWithIcon from "./examples/buttonsWithIcon";
-import Example from "@/common/example/Example";
-import Code from "@/common/Code";
-
-const sections = [
- {
- title: "Introduction",
- content: (
- <>
-
- Icons are used to visually represent commands, common actions, and locations. To facilitate providing users
- with a standardized and more widely adopted icon library, the Halstack Design System leverages the{" "}
-
- Material Symbols
- {" "}
- library. This library contains over three thousand open source symbols implemented as an icon font that is
- maintained by Google as part of the{" "}
-
- Material Design System
-
- .
-
-
- ),
- },
- {
- title: "Usage",
- content: (
- <>
-
-
- Icon sizes may vary depending on the specific use case and the context of the application. Within Halstack
- components, most icons adhere to a 24x24px size, inclusive of any surrounding background or space. However,
- there are instances where 20x20 or 16x16 icon sizes are employed to better align with the visual context of
- the element.
-
-
- At present, the default color of icons is consistently inherited from the parent during implementation. In
- cases where no color is specified, icons default to black, though there are exceptions where the default color
- is purple.
-
-
- Icons are available in both outlined and filled variants, with the current implementation utilizing base
- colors of black or white to maintain visual coherence.
-
-
- While an extensive library of over three thousand icons is available, there may arise situations necessitating
- custom icons—particularly those representing brands, companies, or organizations. In such cases, an SVG
- implementation option is provided. However, it's recommended to limit the use of custom icons to these
- specific scenarios, as adherence to the existing icon set is strongly encouraged for design consistency.
-
-
- ),
- },
- {
- title: "Best practices",
- content: (
- <>
-
-
- Use icons within the context of commonly used components such as buttons, links, navigation items or status
- indicators.
-
-
- Do not use icons that fill the entire space allotted for the icon. All icons currently implemented maintain
- a minimum of 1px of space each side (the largest solid icon occupies a maximum of 22px width or height).
-
-
- Make sure to maintain scaling proportions and aspect ratios when resizing icons.
-
-
- When using colors, make sure to consider the context of the icon being used as well as the consistency of
- visual information being presented.
-
-
- Limit the usage of colors green, red, and blue to common notifications such as success, error, or
- information.
-
-
- Halstack Users are encouraged to share their own variations of icon usage with the Halstack team so that
- these can be added as references.
-
-
-
- ),
- },
- {
- title: "A code example",
- content: (
- <>
-
- Icons are present in most of the Halstack components through the prop icon. Below are some
- examples, using the DxcButton, representing the possibilities offered by our Design System:
-
-
- Regular icon
- Filled icon
- Custom icon
-
-
-
- ),
- },
-];
-
-const IconographyPage = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default IconographyPage;
diff --git a/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts b/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts
deleted file mode 100644
index 5cbb2c8ca9..0000000000
--- a/apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
-
-
-
-
-
- }
- mode="secondary"
- title="Assure answers"
- />
-
-
- );
-}`;
-
-const scope = {
- DxcButton,
- DxcFlex,
- DxcInset,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/principles/iconography/images/iconography_examples.png b/apps/website/screens/principles/iconography/images/iconography_examples.png
deleted file mode 100644
index e2c02ff2b7..0000000000
Binary files a/apps/website/screens/principles/iconography/images/iconography_examples.png and /dev/null differ
diff --git a/apps/website/screens/principles/layout/LayoutPage.tsx b/apps/website/screens/principles/layout/LayoutPage.tsx
deleted file mode 100644
index 86c32cc708..0000000000
--- a/apps/website/screens/principles/layout/LayoutPage.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import { DxcHeading, DxcFlex, DxcLink, DxcTable, DxcParagraph, DxcBulletedList } from "@dxc-technology/halstack-react";
-import Image from "@/common/Image";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import PageHeading from "@/common/PageHeading";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import layoutBreakpoints from "./images/layout_breakpoints.png";
-import layoutColumns from "./images/layout_medium_small.png";
-import layoutGrid from "./images/layout_grid.png";
-import Link from "next/link";
-
-const sections = [
- {
- title: "Introduction",
- content: (
- <>
-
- Halstack provides multiple components to achieve layout consistency and an easy way to arrange elements in the
- UI. The{" "}
-
- application layout
- {" "}
- is the base that wraps any application built with Halstack. In addition, all of the components listed below
- can be used within each other to create a wide variety of standard layouts:
-
-
- Bleed
- Container
- Flex
- Grid
- Inset
-
-
- ),
- },
- {
- title: "Layout basics",
- subSections: [
- {
- title: "Grid",
- content: (
- <>
-
- The grid provides the foundation for consistently positioning elements onscreen. The 8x Grid is the
- geometric foundation of all the visual elements of Halstack Design System components and spacing. It
- provides structure and guidance for all creative decision-making.
-
-
-
- ),
- subSections: [
- {
- title: "Grid usage",
- content: (
-
-
- Use multiples of 8px when defining measurements, spacing, and positioning elements.
-
- When necessary use 4px to make more fine tuned adjustments.
-
- Whenever possible, make sure that objects line up, both vertically and horizontally.
-
-
- Align your bounding box to the grid, not the baseline of your text.
-
-
- ),
- },
- ],
- },
- {
- title: "Breakpoints",
- content: (
- <>
-
- Breakpoints define resolutions at which screen components adjust to offer an optimal user experience
- across screen sizes and devices. We've defined five different breakpoints to accommodate multiple web,
- tablet, and mobile screen resolutions:
-
-
-
-
-
Breakpoint
-
px
-
rem
-
-
-
-
-
- xsmall
-
-
320
-
20
-
-
-
- small
-
-
480
-
30
-
-
-
- medium
-
-
720
-
45
-
-
-
- large
-
-
1056
-
66
-
-
-
- x-large
-
-
1440
-
90
-
-
-
-
- The image below illustrates how we've used data on the most popular screen resolutions by device over
- the past few years to help define each breakpoint.
-
-
-
- ),
- },
- {
- title: "Columns, margins and gutters",
- content: (
- <>
-
-
- Columns, gutters, and margins make up the responsive layout grid following these breakpoints. Depending on
- resolution and screen size of a device, column numbers and the values of the margins and gutters adjust to
- accommodate all screen elements in the most optimal manner.
-
-
- Columns are the areas of the screen where content is placed.
-
- A gutter is the space between columns used to separate content.{" "}
-
-
- Margins are the space between the edges of the screen and content.
-
-
-
- ),
- subSections: [
- {
- title: "Recommended values",
- content: (
- <>
-
- The following table describes the columns, margins, and gutter at each of the different breakpoints:
-
-
-
-
-
Breakpoint
-
Columns
-
- Gutter (recommended) 1
-
-
- Margin (min)2
-
-
-
-
-
-
- xsmall
-
-
4
-
16 / small
-
24
-
-
-
- small
-
-
4
-
16 / small
-
24
-
-
-
- medium
-
-
4
-
24 / medium
-
48
-
-
-
- large
-
-
8
-
16 / small
-
56
-
-
-
- x-large
-
-
8
-
24 / medium
-
56
-
-
-
-
-
- Any value provided by the gutter prop in the layout components can be used (ideally
- multiples of 8) although we recommend to stick to the values provided.{" "}
-
-
- The margin value provided are the minimun recommended, any value from our{" "}
-
- spacing scale
- {" "}
- can be used or even an auto value.
-
-
-
- ),
- },
- ],
- },
- ],
- },
-];
-
-const Layout = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Layout;
diff --git a/apps/website/screens/principles/layout/images/layout_breakpoints.png b/apps/website/screens/principles/layout/images/layout_breakpoints.png
deleted file mode 100644
index 9643a3491c..0000000000
Binary files a/apps/website/screens/principles/layout/images/layout_breakpoints.png and /dev/null differ
diff --git a/apps/website/screens/principles/layout/images/layout_grid.png b/apps/website/screens/principles/layout/images/layout_grid.png
deleted file mode 100644
index 2d2a9b019d..0000000000
Binary files a/apps/website/screens/principles/layout/images/layout_grid.png and /dev/null differ
diff --git a/apps/website/screens/principles/layout/images/layout_medium_small.png b/apps/website/screens/principles/layout/images/layout_medium_small.png
deleted file mode 100644
index 24b082b4cf..0000000000
Binary files a/apps/website/screens/principles/layout/images/layout_medium_small.png and /dev/null differ
diff --git a/apps/website/screens/principles/localization/LocalizationPage.tsx b/apps/website/screens/principles/localization/LocalizationPage.tsx
index 20c37536e1..db5baaa667 100644
--- a/apps/website/screens/principles/localization/LocalizationPage.tsx
+++ b/apps/website/screens/principles/localization/LocalizationPage.tsx
@@ -3,7 +3,6 @@ import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import PageHeading from "@/common/PageHeading";
import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcHeading, DxcFlex, DxcTable, DxcParagraph, DxcLink } from "@dxc-technology/halstack-react";
import Link from "next/link";
import translations from "./examples/translations";
@@ -455,6 +454,30 @@ const sections = [
with those parameters.
),
@@ -625,20 +654,16 @@ const sections = [
},
];
-const Localization = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-};
+const LocalizationPage = () => (
+
+
+
+
+
+
+
+
+
+);
-export default Localization;
+export default LocalizationPage;
diff --git a/apps/website/screens/principles/localization/examples/translations.ts b/apps/website/screens/principles/localization/examples/translations.ts
deleted file mode 100644
index 2b43c05efa..0000000000
--- a/apps/website/screens/principles/localization/examples/translations.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { DxcSelect, DxcTextInput, DxcPaginator, HalstackProvider, DxcInset } from "@dxc-technology/halstack-react";
-import { useState } from "react";
-
-const code = `() => {
- const [items, changeItems] = useState(10);
- const itemsPerPageClick = (value) => {
- changeItems(value);
- };
-
- const labels = {
- formFields: {
- optionalLabel: "(Opcional)",
- },
- select: {
- actionClearSelectionTitle: "Eliminar selección",
- },
- textInput: {
- clearFieldActionTitle: "Limpiar",
- },
- paginator: {
- itemsPerPageText: "Número de elementos: ",
- pageOfText: (a, b) => \`Página: \${a} de \${b}\`,
- },
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcSelect,
- DxcTextInput,
- DxcPaginator,
- HalstackProvider,
- DxcInset,
- useState,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/principles/localization/examples/translations.tsx b/apps/website/screens/principles/localization/examples/translations.tsx
new file mode 100644
index 0000000000..c36982b5b6
--- /dev/null
+++ b/apps/website/screens/principles/localization/examples/translations.tsx
@@ -0,0 +1,72 @@
+import { DxcSelect, DxcTextInput, DxcPaginator, HalstackProvider, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+ const [items, changeItems] = useState(10);
+ const itemsPerPageClick = (value) => {
+ changeItems(value);
+ };
+
+ const labels = {
+ formFields: {
+ optionalLabel: "(Opcional)",
+ },
+ select: {
+ actionClearSelectionTitle: "Eliminar selección",
+ },
+ textInput: {
+ clearFieldActionTitle: "Limpiar",
+ },
+ paginator: {
+ itemsPerPageText: "Número de elementos: ",
+ pageOfText: (a, b) => \`Página: \${a} de \${b}\`,
+ },
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcSelect,
+ DxcTextInput,
+ DxcPaginator,
+ HalstackProvider,
+ DxcInset,
+ useState,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/principles/spacing/SpacingPage.tsx b/apps/website/screens/principles/spacing/SpacingPage.tsx
deleted file mode 100644
index e6129fe105..0000000000
--- a/apps/website/screens/principles/spacing/SpacingPage.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import { DxcHeading, DxcFlex, DxcTable, DxcParagraph } from "@dxc-technology/halstack-react";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import Code from "@/common/Code";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import PageHeading from "@/common/PageHeading";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import spacingOverview from "./images/spacing_overview.png";
-import spacingTypes from "./images/spacing_types.png";
-import spacingPadding from "./images/spacing_padding.png";
-
-const sections = [
- {
- title: "Introduction",
- content: (
- <>
-
- In the search of consistent alignment between the elements we provide a spacing scale based on a root values
- of 8px and 4px. The numbers 4 and 8 are easily multiplied, they provide flexible and consistent, yet distinct
- enough, steps between them.
-
-
-
- The spacing scale can be applied to margin or padding properties, as well as to both
- vertical and horizontal edges. The token takes the place of the values normally assigned to this properties.
-
-
- ),
- },
- {
- title: "Spacing methods",
- subSections: [
- {
- title: "Fixed spacing",
- content: (
- <>
-
- Althouhg the fixed spacing scale is most commonly used for vertical spacing, it can also be applied for
- horizontal spacing, especially in the case of spacing inside components.
-
-
-
- Left: Horizontal: Used for smaller, more refined spacing needs, inside components.
-
-
- Right: Vertical: Used for positioning components on a page.
-
-
- }
- >
-
-
-
- ),
- },
- {
- title: "Fluid spacing",
- content: (
-
- The use of percentages (e.g. 50% or 33%) is a recommended way to divide a page or to control a component{" "}
- max-width and min-width. Using percentages for top and bottom values of{" "}
- padding or margin inside of a component or element should be avoided.
-
- ),
- },
- ],
- },
- {
- title: "Core spacing tokens",
- content: (
- <>
-
- The core spacing scale is used to create space relationships for detail-level designs.
-
-
-
-
-
Token
-
rem
-
px
-
-
-
-
-
- spacing-0
-
-
0
-
0
-
-
-
- spacing-2
-
-
0.125
-
2
-
-
-
- spacing-4
-
-
0.25
-
4
-
-
-
- spacing-8
-
-
0.5
-
8
-
-
-
- spacing-12
-
-
0.75
-
12
-
-
-
- spacing-16
-
-
1
-
16
-
-
-
- spacing-24
-
-
1.5
-
24
-
-
-
- spacing-32
-
-
2
-
32
-
-
-
- spacing-40
-
-
2.5
-
40
-
-
-
- spacing-48
-
-
3
-
48
-
-
-
- spacing-56
-
-
3.5
-
56
-
-
-
- spacing-64
-
-
4
-
64
-
-
-
- spacing-80
-
-
5
-
80
-
-
-
- spacing-96
-
-
6
-
96
-
-
-
- spacing-112
-
-
7
-
112
-
-
-
-
- ),
- },
- {
- title: "Component spacing tokens",
- content: (
- <>
-
- Most components across Halstack can adopt our component spacing tokens as margin or{" "}
- padding in every direction in order to create white space between components.
-
-
-
- Usage of the medium token for left, right, bottom{" "}
- and toppadding properties.
-
-
- }
- >
-
-
-
-
-
-
Component token
-
Core token
-
Value
-
-
-
-
-
- xxsmall
-
-
- spacing-4
-
-
4px
-
-
-
- xsmall
-
-
- spacing-8
-
-
8px
-
-
-
- small
-
-
- spacing-12
-
-
12px
-
-
-
- medium
-
-
- spacing-16
-
-
16px
-
-
-
- large
-
-
- spacing-24
-
-
24px
-
-
-
- xlarge
-
-
- spacing-32
-
-
32px
-
-
-
- xxlarge
-
-
- spacing-48
-
-
48px
-
-
-
-
- ),
- },
-];
-
-const Spacing = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default Spacing;
diff --git a/apps/website/screens/principles/spacing/images/spacing_overview.png b/apps/website/screens/principles/spacing/images/spacing_overview.png
deleted file mode 100644
index 5ae594b94b..0000000000
Binary files a/apps/website/screens/principles/spacing/images/spacing_overview.png and /dev/null differ
diff --git a/apps/website/screens/principles/spacing/images/spacing_padding.png b/apps/website/screens/principles/spacing/images/spacing_padding.png
deleted file mode 100644
index 8060751e32..0000000000
Binary files a/apps/website/screens/principles/spacing/images/spacing_padding.png and /dev/null differ
diff --git a/apps/website/screens/principles/spacing/images/spacing_types.png b/apps/website/screens/principles/spacing/images/spacing_types.png
deleted file mode 100644
index 3cc9c65aad..0000000000
Binary files a/apps/website/screens/principles/spacing/images/spacing_types.png and /dev/null differ
diff --git a/apps/website/screens/principles/themes/ThemesPage.tsx b/apps/website/screens/principles/themes/ThemesPage.tsx
deleted file mode 100644
index 65e69dae41..0000000000
--- a/apps/website/screens/principles/themes/ThemesPage.tsx
+++ /dev/null
@@ -1,1553 +0,0 @@
-import {
- DxcTable,
- DxcFlex,
- DxcLink,
- DxcHeading,
- DxcParagraph,
- DxcBulletedList,
- DxcAlert,
-} from "@dxc-technology/halstack-react";
-import Link from "next/link";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import PageHeading from "@/common/PageHeading";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import JsonContainer from "@/common/JsonContainer";
-import bloomTheme from "./examples/bloomTheme";
-import defaultAdvancedTheme from "@/common/themes/advanced-theme.json";
-
-const sections = [
- {
- title: "What is a theme?",
- content: (
- <>
-
- In order to understand what a theme is, we need to understand first that the definition of colors, sizes,
- shapes... is an intrinsic part of a design system. Since these parameters are essential for guaranteeing
- accessibility and a good user experience, having the ability of changing them, might go frontally against the
- intentions of the design system.
-
-
- This is precisely what themes are, just custom defined objects that allow users to{" "}
- override fundamental decisions of Halstack Design System. They are a way of escaping the
- restrictions imposed by the Design System, and using themes could result in applications not being compliant
- with the Halstack guidelines, or even introducing many different types of accessibility issues if not used
- carefully.
-
-
- Typically, you would create a Halstack Design System application, and after that,{" "}
- only if there is a white-labeling requirement, we would apply a theme on top of the base
- application. This, and only this, is the whole purpose of using themes.
-
-
- ),
- },
- {
- title: "Different theming strategies",
- content: (
- <>
-
- As explained in the previous section, themes are basically a list of properties that allow you to override
- fundamental decisions of the design system. Based on the amount of decisions that can be overridden, Halstack
- Design System has two different theming strategies which will be explained below:
-
-
- Opinionated theme.
- Advanced theme.
-
-
- ),
- subSections: [
- {
- title: "Opinionated theme",
- content: (
- <>
-
- This theming strategy lets you change some decisions of the design system, but is still opinionated about
- the ones we consider fundamental. The list of configurable properties is small, but it applies at the
- component level.
-
-
- We strongly recommend using the{" "}
-
- opinionated theme generator
- {" "}
- to create the theme, but you can also create it yourself from scratch.{" "}
-
- ),
- }}
- closable={false}
- />
-
- Either through the theme-generator or by creating it from scratch, you will have to build a theme
- containing as many objects as components you want to customize. The props of each component are a
- key-value pair where:
-
-
-
- key: Corresponds to the 'Theme input' column of the tables that you can see in the
- Opinionated theme input list section.
-
-
- value: The color, must be hexadecimal without alpha channel.
-
-
-
- In the opinionated theme we must take into account that some of the colours that affect the component will
- be calculated based on the theme inputs of the component. As you can see as follows:
-
-
- ),
- subSections: [
- {
- title: "Opinionated theme inputs list",
- content: (
- <>
-
- Tokens in the second column, which names are in bold, will have the value that results from applying
- the transformation indicated in brackets to the 'Theme input'. (If nothing, they will have the
- same value as the 'Theme input').
-
- Theme inputs value must be hexadecimal without alpha channel.
-
- ),
- subSections: [
- {
- title: "Accordion",
- content: (
-
-
-
-
-
- ),
- },
- {
- title: "Alert",
- content: (
-
- The Alert component does not include theme inputs. The colors used in this component are universal
- semantic colors, which we believe should remain unchanged to prevent confusion and ensure
- consistency.
-
- ),
- },
- {
- title: "Button",
- content: (
-
-
-
-
Theme Input
-
Tokens (calculation)
-
-
-
-
-
Base color
-
- primaryDefaultFontColor
-
-
- primaryDefaultBackgroundColor
-
-
- secondaryDefaultFontColor
-
-
- secondaryDefaultBorderColor
-
-
- secondaryHoverDefaultBackgroundColor
-
-
- tertiaryDefaultFontColor
-
-
- primaryHoverDefaultBackgroundColor (-8% of lightness)
-
-
- primaryActiveDefaultBackgroundColor (-18% of lightness)
-
-
- secondaryActiveDefaultBackgroundColor (-18% of lightness)
-
-
- tertiaryHoverDefaultBackgroundColor (+57% of lightness)
-
-
- tertiaryActiveDefaultBackgroundColor (+52% of lightness)
-
-
- primaryDisabledDefaultBackgroundColor (+42% of lightness)
-
-
- primaryDisabledDefaultFontColor (+42% of lightness)
-
-
- secondaryDisabledDefaultBorderColor (+42% of lightness)
-
-
- secondaryDisabledDefaultFontColor (+42% of lightness)
-
-
- tertiaryDisabledDefaultFontColor (+42% of lightness)
-
-
-
-
Primary font color
-
- primaryDefaultFontColor
-
-
- primaryDisabledDefaultFontColor (+42% of lightness)
-
-
-
- ),
- },
- {
- title: "Example",
- content: (
- <>
- Finally, here you can see an example of an opinionated theme object:
-
-
{JSON.stringify(bloomTheme, null, " ")}
-
-
- More examples can be found in the{" "}
-
- Halstack Provider section
-
- .
-
-
- ),
- },
- ],
- },
- ],
- },
- {
- title: "Advanced theme",
- content: (
- <>
-
- This theming strategy lets you change most of the design decisions of the design system (all the design
- tokens), trying to be as little opinionated as possible. Have in mind that it is impossible to make the
- components 100% configurable without writing actual code, since some design decisions are structural to
- the component. The list of configurable properties is large, and it applies at the component level.
-
-
- We strongly recommend using the{" "}
-
- advanced theme generator
- {" "}
- to create the theme, but you can also create it yourself from scratch.
-
- ),
- }}
- closable={false}
- />
-
- Below is an example of a default advanced theme. The number of configurable properties is significantly
- higher than in the previous strategy.
-
-
-
-
- Link 1
- Link 2
- Link 3
- {}}
- />
-
- }
- responsiveContent={() => (
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae eos saepe provident nihil exercitationem
- laborum unde officiis. Eum unde cum quis soluta dolorum ratione, cumque harum amet quaerat vitae
- consectetur.
-