Add responsive guidelines documentation to the site

apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx

@@ -1,4 +1,4 @@
-import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
+import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import DocFooter from "@/common/DocFooter";
@@ -8,6 +8,7 @@ import Example from "@/common/example/Example";
 import basicExample from "./examples/basicExample";
 import nestedExample from "./examples/nestedExample";
 import placement from "./images/accordion_placement.png";
+import Link from "next/link";
 
 const sections = [
   {
@@ -173,22 +174,22 @@ const sections = [
           </>
         ),
       },
-      {
-        title: "Mobile",
-        content: (
-          <>
-            <DxcParagraph>
-              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.
-            </DxcParagraph>
-            <DxcBulletedList>
-              <DxcBulletedList.Item>In mobile use 100% of the available screen width</DxcBulletedList.Item>
-            </DxcBulletedList>
-          </>
-        ),
-      },
     ],
   },
+  {
+    title: "Responsive behavior",
+    content: (
+      <>
+        <DxcParagraph>
+          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.
+        </DxcParagraph>
+        <DxcBulletedList>
+          <DxcBulletedList.Item>In mobile use 100% of the available screen width</DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
   {
     title: "Best practices",
     content: (

apps/website/screens/components/alert/overview/AlertOverviewPage.tsx

@@ -53,21 +53,25 @@ const sections = [
             it easy for users to grasp its importance at a glance.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>Description:</strong> the detailed text within the alert that provides context or additional
-            information about the message, ensuring clarity for the user.
+            <strong>Pagination:</strong> a navigation element that allows users to browse multiple alerts within the
+            same container, useful for managing sequential or grouped notifications.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
             <strong>Divider:</strong> a subtle separator that visually organizes the alert's content, enhancing
             readability and distinguishing the pagination element from the closable action.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>Pagination:</strong> a navigation element that allows users to browse multiple alerts within the
-            same container, useful for managing sequential or grouped notifications.
+            <strong>Close action:</strong> an interactive button placed next to the pagination (if there's any) that
+            allows the user to dismiss the alert.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
             <strong>Actions:</strong> 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.
           </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            <strong>Description:</strong> the detailed text within the alert that provides context or additional
+            information about the message, ensuring clarity for the user.
+          </DxcBulletedList.Item>
         </DxcBulletedList>
       </>
     ),
@@ -297,6 +301,23 @@ const sections = [
       },
     ],
   },
+  {
+    title: "Responsive behavior",
+    content: (
+      <>
+        <DxcBulletedList>
+          <DxcBulletedList.Item>
+            Be sure to consider content length when designing for smaller screen sizes.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>Alerts grow vertically to display the full content.</DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            Keep in mind the screen size where the alert will appear, and take into account the length of the
+            description it contains.
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
   {
     title: "Best practices",
     subSections: [

apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx

@@ -75,7 +75,7 @@ const sections = [
         content: (
           <>
             <DxcParagraph>
-              Designed mainly for data visualization interfaces, the contextual variant of the Badge component’s main
+              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.

apps/website/screens/components/card/overview/CardOverviewPage.tsx

@@ -66,9 +66,9 @@ const sections = [
             <strong>Image placement:</strong> 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.
+            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.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
             <strong>Text content:</strong> titles, descriptions, metadata, or status labels are typically placed in the
@@ -83,7 +83,15 @@ const sections = [
             card should be easy to scan and act upon.
           </DxcBulletedList.Item>
         </DxcBulletedList>
-        <Image src={example} alt="Card's example" />
+        {/* <Image src={example} alt="Card's example" /> */}
+      </>
+    ),
+  },
+  {
+    title: "Responsive behavior",
+    content: (
+      <>
+        <DxcParagraph>The card component will adjust to the size of its parent container.</DxcParagraph>
       </>
     ),
   },

apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx

@@ -4,6 +4,9 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import DocFooter from "@/common/DocFooter";
 import Image from "@/common/Image";
 import anatomy from "./images/datagrid-anatomy.png";
+import reducedDataGrid from "./images/datagrid_reduced.png";
+import fullWidthDataGrid from "./images/datagrid_fullWidth.png";
+import Figure from "@/common/Figure";
 
 const sections = [
   {
@@ -197,6 +200,32 @@ const sections = [
       },
     ],
   },
+  {
+    title: "Responsive behavior",
+    content: (
+      <>
+        <DxcParagraph>The datagrid's size adjusts to the available space.</DxcParagraph>
+        <DxcBulletedList>
+          <DxcBulletedList.Item>
+            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.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            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.
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            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.
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
   {
     title: "Best practices",
     content: (

apps/website/screens/components/date-input/overview/DateInputOverviewPage.tsx

@@ -216,7 +216,7 @@ const sections = [
         content: (
           <DxcBulletedList>
             <DxcBulletedList.Item>
-              Match the date format to the user’s regional settings (DD/MM/YYYY or MM/DD/YYYY), and consider using
+              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.
             </DxcBulletedList.Item>
             <DxcBulletedList.Item>

apps/website/screens/components/footer/overview/FooterOverviewPage.tsx

@@ -33,7 +33,7 @@ const sections = [
             reinforce company recognition across all pages.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>Social icons:</strong> A set of clickable icons linking to the company’s social media platforms
+            <strong>Social icons:</strong> 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.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>

apps/website/screens/components/header/overview/HeaderOverviewPage.tsx

@@ -6,6 +6,7 @@ import QuickNavContainer from "@/common/QuickNavContainer";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import anatomy from "./images/header_anatomy.png";
 import responsive from "./images/header_responsive.png";
+import responsiveDetails from "./images/header_responsive_details.png";
 import variants from "./images/header_variants.png";
 
 const sections = [
@@ -78,18 +79,19 @@ const sections = [
     ),
   },
   {
-    title: "Responsive version for mobile and tablet",
+    title: "Responsive version",
     content: (
       <>
         <DxcParagraph>
-          Since applications are accessed from a variety of devices, including laptops, tablets, and smartphones, it's
-          essential to design a Header that adapts fluidly to different screen sizes. The responsive Header should
-          maintain the core structure and visual hierarchy of the desktop version, ensuring a consistent and intuitive
-          user experience across all devices.
+          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.
+        </DxcParagraph>
+        <DxcParagraph>
+          “On smaller screens, the header content is replaced by a button. Triggering this button opens a menu that
+          displays custom content.”
         </DxcParagraph>
-        <Figure caption="Header menu responsive version">
-          <Image src={responsive} alt="Header menu responsive version" />
-        </Figure>
       </>
     ),
   },

apps/website/screens/components/link/overview/LinkOverviewPage.tsx

@@ -26,10 +26,10 @@ const sections = [
         <DxcBulletedList type="number">
           <DxcBulletedList.Item>
             <strong>Icon:</strong> 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.
+            of the link. It can be placed before or after the link it's representing.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            <strong>Label:</strong> displays the textual content of the link, conveying where exactly it’s going to
+            <strong>Label:</strong> displays the textual content of the link, conveying where exactly it's going to
             navigate the component.
           </DxcBulletedList.Item>
         </DxcBulletedList>

apps/website/screens/components/nav-tabs/overview/NavTabsOverviewPage.tsx

@@ -146,6 +146,17 @@ const sections = [
       },
     ],
   },
+  {
+    title: "Responsive behavior",
+    content: (
+      <>
+        <DxcParagraph>
+          The size of the navigation tabs adjusts according to the container. On smaller screen resolutions, if the
+          content exceeds the available space, a scroll bar will appear.
+        </DxcParagraph>
+      </>
+    ),
+  },
   {
     title: "Best practices",
     content: (

apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx

@@ -72,7 +72,7 @@ const sections = [
           <>
             <DxcParagraph>
               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,
+              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.
             </DxcParagraph>
@@ -96,6 +96,17 @@ const sections = [
       },
     ],
   },
+  {
+    title: "Responsive behavior",
+    content: (
+      <DxcParagraph>
+        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).
+      </DxcParagraph>
+    ),
+  },
   {
     title: "Best practices",
     content: (

apps/website/screens/components/progress-bar/overview/ProgressBarOverviewPage.tsx

@@ -115,7 +115,7 @@ const sections = [
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
             <strong>Use the right variant:</strong> 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.,
+            uploads, task completion). Use indeterminate when the system can't predict the time or progress (e.g.,
             loading content, waiting for server responses).
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>

apps/website/screens/components/quick-nav/overview/QuickNavOverviewsPage.tsx

@@ -43,6 +43,21 @@ const sections = [
       </>
     ),
   },
+  {
+    title: "Responsive behavior",
+    content: (
+      <>
+        <DxcParagraph>
+          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.
+        </DxcParagraph>
+        <DxcParagraph>
+          Also consider hiding this component once a specific breakpoint has been reached to allow users to focus on the
+          primary content.
+        </DxcParagraph>
+      </>
+    ),
+  },
   {
     title: "Best practices",
     content: (

apps/website/screens/components/resultset-table/overview/ResultsetTableOverviewPage.tsx

@@ -4,6 +4,8 @@ import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 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 = [
@@ -129,6 +131,35 @@ const sections = [
       },
     ],
   },
+  {
+    title: "Responsive behavior",
+    content: (
+      <>
+        <DxcParagraph>
+          Changes to the screen size affects tables based on the default behavior of their parent components (ex.
+          container, flexbox, grid).
+        </DxcParagraph>
+        <DxcBulletedList>
+          <DxcBulletedList.Item>
+            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.
+            <Image src={resultsetTableResponsive} alt="Resultset table overflow" />
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            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.
+            <Image src={resultsetTableOverflow} alt="Resultset table responsive" />
+          </DxcBulletedList.Item>
+          <DxcBulletedList.Item>
+            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.
+          </DxcBulletedList.Item>
+        </DxcBulletedList>
+      </>
+    ),
+  },
   {
     title: "Best practices",
     content: (

apps/website/screens/components/select/overview/SelectOverviewPage.tsx

@@ -276,7 +276,7 @@ const sections = [
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>
           <strong>Label optional fields clearly:</strong> 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
+          is available to indicate that the field can be left empty. If it's required, provide an error message when
           left unselected.
         </DxcBulletedList.Item>
         <DxcBulletedList.Item>

apps/website/screens/components/sidenav/overview/SidenavOverviewPage.tsx

@@ -131,11 +131,8 @@ const sections = [
         content: (
           <>
             <DxcParagraph>
-              On mobile and tablet screens, the sidenav becomes an{" "}
-              <strong>overlay panel that can be toggled open or closed</strong>. This responsive version ensures that
-              navigation remains accessible without occupying valuable screen space. Users can open the sidenav using a
-              dedicated menu icon, and close it either by interacting with the backdrop or selecting a navigation
-              option. This enhances usability and maintains focus on content in smaller viewports.
+              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.
             </DxcParagraph>
             <Image src={responsive} alt="Responsive sidenav" />
           </>