diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b24183f68..11e0a539e 100644
--- a/CONTRIBUTING.md
+++ b/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/).
diff --git a/LOCAL.md b/LOCAL.md
index 825a1bb5f..8f12af82e 100644
--- a/LOCAL.md
+++ b/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.
diff --git a/README.md b/README.md
index f59a6ba0f..cf4d8317d 100644
--- a/README.md
+++ b/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 = () => (
diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx
index 2c3b49278..724cc27c6 100644
--- a/apps/website/screens/common/sidenav/SidenavLogo.tsx
+++ b/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}
diff --git a/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx b/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx
index 6b39940d3..17ac11574 100644
--- a/apps/website/screens/components/breadcrumbs/code/BreadcrumbsCodePage.tsx
+++ b/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 = [
string
-
- Provides a label that describes the type of navigation enabled by
- the component.
-
+
Provides a label that describes the type of navigation enabled by the component.
'Breadcrumbs'
@@ -68,9 +61,8 @@ const sections = [
number
- 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).
4
@@ -82,10 +74,9 @@ const sections = [
number
- Callback for custom navigation with third-party libraries such as
- Next (useRouter) or React Router (
- useNavigate). This function will be called when an
- item is clicked, receiving its href as a parameter.
+ Callback for custom navigation with third-party libraries such as Next (useRouter) or React
+ Router (useNavigate). This function will be called when an item is clicked, receiving its{" "}
+ href as a parameter.
-
@@ -94,10 +85,7 @@ const sections = [
boolean
-
- When items are collapsed, whether the root item should always be
- displayed or not.
-
+
When items are collapsed, whether the root item should always be displayed or not.
true
@@ -117,16 +105,11 @@ const sections = [
title: "Custom navigation",
content: (
<>
+ There are many React based routers, unfortunately all with different APIs.
- There are many React based routers, unfortunately all with
- different APIs.
-
-
- As we explained above, the onItemClick prop is a
- callback that will be called when an item is clicked, receiving
- its href 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 onItemClick prop is a callback that will be called when an item is
+ clicked, receiving its href as a parameter. You can take advantage of this prop to navigate
+ programmatically with third-party libraries hooks or functions.
>
),
@@ -145,10 +128,7 @@ const BreadcrumbsCodePage = () => {
return (
-
+
diff --git a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx b/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
index 06f2609f4..dc0f03e4a 100644
--- a/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
+++ b/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 = [
Material Symbol
{" "}
- 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 "filled_".
+ 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{" "}
+ "filled_".
-
@@ -64,12 +54,7 @@ const sections = [
},
{
title: "DxcBulletedList.Item",
- content: (
-
- Everything between the tags will be displayed as a text item in the
- list.
-
- ),
+ content: Everything between the tags will be displayed as a text item in the list.,
subSections: [
{
title: "Props",
@@ -86,11 +71,7 @@ const sections = [
- being an Item an object with the following
- properties:
+ being an Item an object with the following properties:
{itemTypeString}
- a GroupItem another object with the following
- properties:
+ a GroupItem another object with the following properties:
{groupItemTypeString}
- and a Section another object with the following
- properties:
+ and a Section another object with the following properties:
{sectionTypeString}
- 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.
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:
+ for further information. It can be either a value from the range or an object with the following properties:
- 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:
+ 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:
- label: Text to be shown in the link. The content must
- be wrapped with an id equal to the slugified label (in lower
- case and the white spaces replaced by '-') in order to
- be able to navigate to the section that the label references.
+ label: Text to be shown in the link. The content must be wrapped with an id equal to the
+ slugified label (in lower case and the white spaces replaced by '-') in order to be able to
+ navigate to the section that the label references.
- It will define the color of the light based on its semantic
- meaning.
+ 'default' | 'info' | 'success' | 'warning' | 'error'
+
It will define the color of the light based on its semantic meaning.
'default'
@@ -54,10 +49,7 @@ const sections = [
'small' | 'medium' | 'large'
-
- Size of the component. Should be defined based on its importance
- and/or available space.
-
+
Size of the component. Should be defined based on its importance and/or available space.
'medium'
@@ -81,10 +73,7 @@ const StatusLightCodePage = () => {
return (
-
+
diff --git a/apps/website/screens/components/tooltip/TooltipPageLayout.tsx b/apps/website/screens/components/tooltip/TooltipPageLayout.tsx
index fb6c5414c..4be436140 100644
--- a/apps/website/screens/components/tooltip/TooltipPageLayout.tsx
+++ b/apps/website/screens/components/tooltip/TooltipPageLayout.tsx
@@ -19,11 +19,9 @@ const TooltipPageHeading = ({ children }: { children: React.ReactNode }) => {
- A tooltip is a descriptive or supplementary element that is
- displayed when an object is focused or hovered over. They are
- typically employed to enhance user experience by offering brief and
- helpful descriptions, instructions or tips without cluttering the
- interface.
+ A tooltip is a descriptive or supplementary element that is displayed when an object is focused or hovered
+ over. They are typically employed to enhance user experience by offering brief and helpful descriptions,
+ instructions or tips without cluttering the interface.
diff --git a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx
index fe14e0604..0314176ae 100644
--- a/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx
+++ b/apps/website/screens/components/tooltip/code/TooltipCodePage.tsx
@@ -26,10 +26,11 @@ const sections = [
'bottom' | 'top' | 'left' | 'right'
- Preferred position for displaying the tooltip. It may adjust
- automatically based on available space.
+ Preferred position for displaying the tooltip. It may adjust automatically based on available space.
+
+
+ 'bottom'
-
'bottom'
label
@@ -66,10 +67,7 @@ const TooltipCodePage = () => {
return (
-
+
diff --git a/apps/website/screens/components/tooltip/code/examples/basicUsage.ts b/apps/website/screens/components/tooltip/code/examples/basicUsage.ts
index dc86d75a8..bfa50a6fe 100644
--- a/apps/website/screens/components/tooltip/code/examples/basicUsage.ts
+++ b/apps/website/screens/components/tooltip/code/examples/basicUsage.ts
@@ -1,8 +1,4 @@
-import {
- DxcTooltip,
- DxcButton,
- DxcInset,
-} from "@dxc-technology/halstack-react";
+import { DxcTooltip, DxcButton, DxcInset } from "@dxc-technology/halstack-react";
const code = `() => {
return (
diff --git a/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx b/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx
index 8fd68d928..b357807fd 100644
--- a/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx
+++ b/apps/website/screens/components/tooltip/specs/TooltipSpecsPage.tsx
@@ -1,8 +1,4 @@
-import {
- DxcParagraph,
- DxcBulletedList,
- DxcFlex,
-} from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
import Image from "@/common/Image";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
@@ -37,9 +33,7 @@ const sections = [
title: "Design tokens",
content: (
<>
-
- This component currently has no design tokens.
-
+ This component currently has no design tokens.
>
),
},
@@ -49,10 +43,7 @@ const TooltipSpecsPage = () => {
return (
-
+
diff --git a/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx b/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx
index c6e38d92c..9cb2f7a03 100644
--- a/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx
+++ b/apps/website/screens/components/tooltip/usage/TooltipUsagePage.tsx
@@ -1,8 +1,4 @@
-import {
- DxcParagraph,
- DxcBulletedList,
- DxcFlex,
-} from "@dxc-technology/halstack-react";
+import { DxcParagraph, DxcBulletedList, DxcFlex } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
@@ -19,22 +15,17 @@ const sections = [
content: (
- Use tooltips when sharing valuable information as clearly and
- concisely as possible.
+ 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.
+ 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.
+ Maintain consistency in the positioning of tooltips throughout the user interface.
- Use clear and accurate phrasing when placing the text inside a
- tooltip.
+ Use clear and accurate phrasing when placing the text inside a tooltip.
),
@@ -44,22 +35,17 @@ const sections = [
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.
+ 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 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.
- 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.
+ Avoid using tooltips in interfaces where there is sufficient space to display additional information
+ directly, without the need for hiding it.
),
@@ -71,9 +57,8 @@ const sections = [
content: (
<>
- Depending on the tooltip's placement relative to the object it
- describes, there are four possible configurations: top, right, bottom
- and left.
+ Depending on the tooltip's placement relative to the object it describes, there are four possible
+ configurations: top, right, bottom and left.