Merge branch 'Mil4n0r/tooltip-fileitem' of github.com:dxc-technology/…

…halstack-react into Mil4n0r/tooltip-fileitem

CONTRIBUTING.md

@@ -12,26 +12,26 @@ We welcome you to use the GitHub issue tracker to report bugs or suggest feature
 
 When filing an issue, please check existing open or recently closed, issues to make sure somebody else hasn't already reported the issue. Please try to include as much information as you can. Details like these are incredibly useful:
 
-* A reproducible test case or series of steps
-* The version of our code being used
-* Any modifications you've made relevant to the bug
-* Anything unusual about your environment or deployment
+- A reproducible test case or series of steps
+- The version of our code being used
+- Any modifications you've made relevant to the bug
+- Anything unusual about your environment or deployment
 
 ## Contributing via Pull Requests
 
 Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure that:
 
-1. You are working against the latest source on the *staging* branch.
+1. You are working against the latest source on the _staging_ branch.
 2. You check existing open, and recently merged, pull requests to make sure someone else hasn't addressed the problem already.
 3. You open an issue to discuss any significant work - we would hate for your time to be wasted.
 
 To send us a pull request, please:
 
 1. Fork the repository.
-2. Working off the latest version of the *staging* branch, modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change.
+2. Working off the latest version of the _staging_ branch, modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change.
 3. Ensure local tests pass.
 4. Commit to your fork using clear commit messages.
-5. Send us a pull request merging into the *staging* branch, answering any default questions in the pull request interface.
+5. Send us a pull request merging into the _staging_ branch, answering any default questions in the pull request interface.
 6. CI pipelines will fail since this is a fork. We will manually run the CI pipeline on the PR after reviewing the code and give feedback if needed.
 
 GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and [creating a pull request](https://help.github.com/articles/creating-a-pull-request/).

LOCAL.md

@@ -56,7 +56,7 @@ Here is a list of the most common commands you will use:
 
 - `turbo build` - Build the library.
 - `turbo dev` - Start the development server.
-- `turbo format` - Run the Prettier formatter.
+- `npm run format` - Run the Prettier formatter.
 - `turbo lint` - Run the linter.
 - `turbo storybook` - Start the Storybook server.
 - `turbo storybook:accessibility` - Run the accessibility tests on Storybook.

README.md

@@ -19,7 +19,6 @@ npm i @dxc-technology/halstack-react
 ### Usage
 
 ```jsx
-import React from "react";
 import { DxcButton, DxcTextInput } from "@dxc-technology/halstack-react";
 
 const App = () => (

apps/website/screens/common/sidenav/SidenavLogo.tsx

@@ -1,15 +1,12 @@
 import styled from "styled-components";
 import Image from "@/common/Image";
 import halstackLogo from "@/common/images/halstack_logo.svg";
-import React from "react";
 import { DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";
-import { useRouter } from "next/router";
 
 type SidenavLogoProps = { subtitle?: string };
 
 const SidenavLogo = ({ subtitle = "Design System" }: SidenavLogoProps): JSX.Element => {
-  const { basePath } = useRouter();
-  const pathVersion = basePath.split("/")[2];
+  const pathVersion = process.env.SITE_VERSION;
   const isDev = process.env.NODE_ENV === "development";
 
   return (
@@ -22,7 +19,7 @@ const SidenavLogo = ({ subtitle = "Design System" }: SidenavLogoProps): JSX.Elem
         <Subtitle>{subtitle}</Subtitle>
       </LogoContainer>
       <DxcBadge
-        label={isDev ? "dev" : isNaN(parseInt(pathVersion)) ? "next" : `v${pathVersion}`}
+        label={isDev ? "dev" : isNaN(parseInt(pathVersion)) ? "next" : `v${pathVersion}.0.0`}
         color="purple"
         size="small"
       />

apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx

@@ -3,11 +3,7 @@ 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 { DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
 import TableCode, { ExtendedTableCode } from "@/common/TableCode";
 import basicUsage from "./examples/basicUsage";
 import nextJS from "./examples/nextJS";
@@ -37,10 +33,7 @@ const sections = [
             <td>
               <TableCode>string</TableCode>
             </td>
-            <td>
-              Provides a label that describes the type of navigation enabled by
-              the component.
-            </td>
+            <td>Provides a label that describes the type of navigation enabled by the component.</td>
             <td>
               <TableCode>'Breadcrumbs'</TableCode>
             </td>
@@ -68,9 +61,8 @@ const sections = [
               <TableCode>number</TableCode>
             </td>
             <td>
-              Number of items before showing a collapsed version of the
-              breadcrumbs. It can't be lower than two (root/collapsed action and
-              current page).
+              Number of items before showing a collapsed version of the breadcrumbs. It can't be lower than two
+              (root/collapsed action and current page).
             </td>
             <td>
               <TableCode>4</TableCode>
@@ -82,10 +74,9 @@ const sections = [
               <TableCode>number</TableCode>
             </td>
             <td>
-              Callback for custom navigation with third-party libraries such as
-              Next (<Code>useRouter</Code>) or React Router (
-              <Code>useNavigate</Code>). This function will be called when an
-              item is clicked, receiving its <Code>href</Code> as a parameter.
+              Callback for custom navigation with third-party libraries such as Next (<Code>useRouter</Code>) or React
+              Router (<Code>useNavigate</Code>). This function will be called when an item is clicked, receiving its{" "}
+              <Code>href</Code> as a parameter.
             </td>
             <td>-</td>
           </tr>
@@ -94,10 +85,7 @@ const sections = [
             <td>
               <TableCode>boolean</TableCode>
             </td>
-            <td>
-              When items are collapsed, whether the root item should always be
-              displayed or not.
-            </td>
+            <td>When items are collapsed, whether the root item should always be displayed or not.</td>
             <td>
               <TableCode>true</TableCode>
             </td>
@@ -117,16 +105,11 @@ const sections = [
         title: "Custom navigation",
         content: (
           <>
+            <DxcParagraph>There are many React based routers, unfortunately all with different APIs.</DxcParagraph>
             <DxcParagraph>
-              There are many React based routers, unfortunately all with
-              different APIs.
-            </DxcParagraph>
-            <DxcParagraph>
-              As we explained above, the <Code>onItemClick</Code> prop is a
-              callback that will be called when an item is clicked, receiving
-              its <Code>href</Code> as a parameter. You can take advantage of
-              this prop to navigate programmatically with third-party libraries
-              hooks or functions.
+              As we explained above, the <Code>onItemClick</Code> prop is a callback that will be called when an item is
+              clicked, receiving its <Code>href</Code> as a parameter. You can take advantage of this prop to navigate
+              programmatically with third-party libraries hooks or functions.
             </DxcParagraph>
           </>
         ),
@@ -145,10 +128,7 @@ const BreadcrumbsCodePage = () => {
   return (
     <DxcFlex direction="column" gap="4rem">
       <QuickNavContainerLayout>
-        <QuickNavContainer
-          sections={sections}
-          startHeadingLevel={2}
-        ></QuickNavContainer>
+        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
       </QuickNavContainerLayout>
       <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx" />
     </DxcFlex>

apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx

@@ -3,12 +3,7 @@ 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 { DxcParagraph, DxcFlex, DxcTable, DxcLink } from "@dxc-technology/halstack-react";
 import basicUsage from "./examples/basicUsage";
 import nestedList from "./examples/nestedList";
 import TableCode from "@/common/TableCode";
@@ -31,9 +26,7 @@ const sections = [
           <tr>
             <td>type</td>
             <td>
-              <TableCode>
-                'disc' | 'circle' | 'square' | 'number' | 'icon'
-              </TableCode>
+              <TableCode>'disc' | 'circle' | 'square' | 'number' | 'icon'</TableCode>
             </td>
             <td>Defines the style of the bullet point in the list.</td>
             <td>
@@ -43,18 +36,15 @@ const sections = [
           <tr>
             <td>icon</td>
             <td>
-              <TableCode>
-                string | {"(React.ReactNode & React.SVGProps<SVGSVGElement>)"}
-              </TableCode>
+              <TableCode>string | {"(React.ReactNode & React.SVGProps<SVGSVGElement>)"}</TableCode>
             </td>
             <td>
               <DxcLink newWindow href="https://fonts.google.com/icons">
                 Material Symbol
               </DxcLink>{" "}
-              name or SVG element to be displayed as the bullet. 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 <TableCode>"filled_"</TableCode>.
+              name or SVG element to be displayed as the bullet. 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{" "}
+              <TableCode>"filled_"</TableCode>.
             </td>
             <td>-</td>
           </tr>
@@ -64,12 +54,7 @@ const sections = [
   },
   {
     title: "DxcBulletedList.Item",
-    content: (
-      <DxcParagraph>
-        Everything between the tags will be displayed as a text item in the
-        list.
-      </DxcParagraph>
-    ),
+    content: <DxcParagraph>Everything between the tags will be displayed as a text item in the list.</DxcParagraph>,
     subSections: [
       {
         title: "Props",
@@ -86,11 +71,7 @@ const sections = [
             <tbody>
               <tr>
                 <td>
-                  <DxcFlex
-                    direction="column"
-                    gap="0.25rem"
-                    alignItems="baseline"
-                  >
+                  <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
                     <StatusBadge status="required" />
                     children
                   </DxcFlex>
@@ -126,10 +107,7 @@ const BulletedListCodePage = () => {
   return (
     <DxcFlex direction="column" gap="4rem">
       <QuickNavContainerLayout>
-        <QuickNavContainer
-          sections={sections}
-          startHeadingLevel={2}
-        ></QuickNavContainer>
+        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
       </QuickNavContainerLayout>
       <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx" />
     </DxcFlex>

apps/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx

@@ -48,28 +48,23 @@ const sections = [
             </DxcFlex>
           </td>
           <td>
-            <TableCode style={{ fontSize: "0.875rem" }}>
-              (Item | GroupItem)[] | Section[]
-            </TableCode>
+            <TableCode style={{ fontSize: "0.875rem" }}>(Item | GroupItem)[] | Section[]</TableCode>
             <p>
-              being an <Code>Item</Code> an object with the following
-              properties:
+              being an <Code>Item</Code> an object with the following properties:
             </p>
             <ExtendedTableCode>{itemTypeString}</ExtendedTableCode>
             <p>
-              a <Code>GroupItem</Code> another object with the following
-              properties:
+              a <Code>GroupItem</Code> another object with the following properties:
             </p>
             <ExtendedTableCode>{groupItemTypeString}</ExtendedTableCode>
             <p>
-              and a <Code>Section</Code> another object with the following
-              properties:
+              and a <Code>Section</Code> another object with the following properties:
             </p>
             <ExtendedTableCode>{sectionTypeString}</ExtendedTableCode>
           </td>
           <td>
-            Array of items to be displayed in the Contextual menu. Each item can
-            be a single/simple item, a group item or a section.
+            Array of items to be displayed in the Contextual menu. Each item can be a single/simple item, a group item
+            or a section.
           </td>
           <td>-</td>
         </tr>
@@ -95,10 +90,7 @@ const ContextualMenuCodePage = () => {
   return (
     <DxcFlex direction="column" gap="4rem">
       <QuickNavContainerLayout>
-        <QuickNavContainer
-          sections={sections}
-          startHeadingLevel={2}
-        ></QuickNavContainer>
+        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
       </QuickNavContainerLayout>
       <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/contextual-menu/code/ContextualMenuCodePage.tsx" />
     </DxcFlex>

apps/website/screens/components/dialog/code/examples/withContent.ts

@@ -1,4 +1,12 @@
-import { DxcDialog, DxcButton, DxcTextInput, DxcInset, DxcFlex, DxcGrid, DxcHeading } from "@dxc-technology/halstack-react";
+import {
+  DxcDialog,
+  DxcButton,
+  DxcTextInput,
+  DxcInset,
+  DxcFlex,
+  DxcGrid,
+  DxcHeading,
+} from "@dxc-technology/halstack-react";
 import { useState } from "react";
 
 const code = `() => {