diff --git a/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
index 8a3b4cde8..409f0b3f8 100644
--- a/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
+++ b/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
@@ -168,7 +168,7 @@ const sections = [
},
];
-const ButtonCodePage = () => {
+const ApplicationLayoutCodePage = () => {
return (
@@ -177,9 +177,9 @@ const ButtonCodePage = () => {
startHeadingLevel={2}
>
-
+
);
};
-export default ButtonCodePage;
+export default ApplicationLayoutCodePage;
diff --git a/website/screens/components/date-input/specs/DateInputSpecsPage.tsx b/website/screens/components/date-input/specs/DateInputSpecsPage.tsx
index 7296782a0..3143633a0 100644
--- a/website/screens/components/date-input/specs/DateInputSpecsPage.tsx
+++ b/website/screens/components/date-input/specs/DateInputSpecsPage.tsx
@@ -30,11 +30,11 @@ const sections = [
The date input color, typography,{" "}
border, spacing, width and{" "}
margin specifications are inherited from the text input,
- for reference{" "}
+ for reference check{" "}
- check the text input component documentation
-
- .
+ text input
+ {" "}
+ documentation .
The date input doesn't have the following text input elements or
diff --git a/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx b/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx
index 77bf146b8..a9b728468 100644
--- a/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx
+++ b/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx
@@ -32,7 +32,7 @@ const sections = [
content: (
<>
- States: Enabled, hover,{" "}
+ States: enabled, hover,{" "}
focus, active and{" "}
disabled.
diff --git a/website/screens/components/flex/FlexPageLayout.tsx b/website/screens/components/flex/FlexPageLayout.tsx
index 030263852..c460fadc8 100644
--- a/website/screens/components/flex/FlexPageLayout.tsx
+++ b/website/screens/components/flex/FlexPageLayout.tsx
@@ -17,7 +17,10 @@ const FlexPageHeading = ({ children }: { children: React.ReactNode }) => {
Flex allows users to build{" "}
-
+
Flexible Box Module
{" "}
based layouts. It serves as a technical component that abstracts
diff --git a/website/screens/components/heading/usage/HeadingUsagePage.tsx b/website/screens/components/heading/usage/HeadingUsagePage.tsx
index 7117459cc..4537f10f4 100644
--- a/website/screens/components/heading/usage/HeadingUsagePage.tsx
+++ b/website/screens/components/heading/usage/HeadingUsagePage.tsx
@@ -16,9 +16,9 @@ const sections = [
content: (
<>
- Navigating through the Headings-H1 and
+ 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
+ content is structured. The Headings-H4 and{" "}
Headings-H5 elements provide a quick understanding of the
details in each section.
diff --git a/website/screens/components/link/code/LinkCodePage.tsx b/website/screens/components/link/code/LinkCodePage.tsx
index 29593b194..ea3c6a506 100644
--- a/website/screens/components/link/code/LinkCodePage.tsx
+++ b/website/screens/components/link/code/LinkCodePage.tsx
@@ -122,9 +122,9 @@ const sections = [
So we decided to make our link component just an styled HTML
anchor element which allows it to be used in any React based
- router. For each API is different so here are some examples for{" "}
+ router. For each API is different, so here are some examples for{" "}
React Router
@@ -155,7 +155,7 @@ const sections = [
>
React Router
{" "}
- using the prop component. Note that this Prop is
+ using the prop component. Note that this prop is
not available in v6.
@@ -177,7 +177,7 @@ const sections = [
the prop component is no longer available so it
is necessary to use hooks provided by{" "}
React Router v6
diff --git a/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx b/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx
index 35da49c69..4f455bad8 100644
--- a/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx
+++ b/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx
@@ -190,7 +190,7 @@ const sections = [
the prop component is no longer available so it
is necessary to use hooks provided by{" "}
React Router v6
diff --git a/website/screens/components/number-input/specs/NumberInputSpecsPage.tsx b/website/screens/components/number-input/specs/NumberInputSpecsPage.tsx
index af6fd5548..d5e8bbf8e 100644
--- a/website/screens/components/number-input/specs/NumberInputSpecsPage.tsx
+++ b/website/screens/components/number-input/specs/NumberInputSpecsPage.tsx
@@ -31,11 +31,11 @@ const sections = [
The number input color, typography,{" "}
border, spacing, width and{" "}
margin specifications are inherited from the text input,
- for reference{" "}
+ for reference check the{" "}
- check the text input component documentation
-
- .
+ text input
+ {" "}
+ component documentation.
>
),
diff --git a/website/screens/components/password-input/specs/PasswordInputSpecsPage.tsx b/website/screens/components/password-input/specs/PasswordInputSpecsPage.tsx
index 6afb23aef..476fb8c9b 100644
--- a/website/screens/components/password-input/specs/PasswordInputSpecsPage.tsx
+++ b/website/screens/components/password-input/specs/PasswordInputSpecsPage.tsx
@@ -31,11 +31,11 @@ const sections = [
The password input color, typography,{" "}
border, spacing, width and{" "}
margin specifications are inherited from the text input,
- for reference{" "}
+ for reference check the{" "}
- check the text input component documentation
-
- .
+ text input
+ {" "}
+ component documentation.
The password input doesn't have the following text input elements,
diff --git a/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx b/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx
index a6d29bf88..d37411049 100644
--- a/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx
+++ b/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx
@@ -35,7 +35,7 @@ const ResultsetTableUsagePage = () => {
startHeadingLevel={2}
>
-
+
);
};
diff --git a/website/screens/components/select/specs/SelectSpecsPage.tsx b/website/screens/components/select/specs/SelectSpecsPage.tsx
index 254a7c50a..4918e2277 100644
--- a/website/screens/components/select/specs/SelectSpecsPage.tsx
+++ b/website/screens/components/select/specs/SelectSpecsPage.tsx
@@ -935,9 +935,10 @@ const sections = [
content: (
<>
- The select component input share the{" "}
+ The select component input share the same spacing
+ tokens as the{" "}
- same spacing tokens of the text input
+ text input
.
diff --git a/website/screens/components/tabs/code/TabsCodePage.tsx b/website/screens/components/tabs/code/TabsCodePage.tsx
index a45b2323b..85e64a849 100644
--- a/website/screens/components/tabs/code/TabsCodePage.tsx
+++ b/website/screens/components/tabs/code/TabsCodePage.tsx
@@ -140,7 +140,7 @@ const TabsUsagePage = () => {
startHeadingLevel={2}
>
-
+
);
};
diff --git a/website/screens/components/tag/usage/TagUsagePage.tsx b/website/screens/components/tag/usage/TagUsagePage.tsx
index 526a2ab44..2fb0ddd61 100644
--- a/website/screens/components/tag/usage/TagUsagePage.tsx
+++ b/website/screens/components/tag/usage/TagUsagePage.tsx
@@ -41,7 +41,7 @@ const sections = [
The icon can be placed before or after.
- The icon background color can be defined with the
+ The icon background color can be defined with the{" "}
iconBgColor component property.
diff --git a/website/screens/components/textarea/specs/TextareaSpecsPage.tsx b/website/screens/components/textarea/specs/TextareaSpecsPage.tsx
index 9c09fba45..0c4fb3ad4 100644
--- a/website/screens/components/textarea/specs/TextareaSpecsPage.tsx
+++ b/website/screens/components/textarea/specs/TextareaSpecsPage.tsx
@@ -27,11 +27,12 @@ const sections = [
The textarea color, typography,{" "}
border, width and margin{" "}
- specifications are inherited from the text input, for reference{" "}
+ specifications are inherited from the text input, for reference check
+ the{" "}
- check the text input component documentation
-
- .
+ text input
+ {" "}
+ component documentation.
The textarea doesn't have the following text-input elements,
diff --git a/website/screens/components/toggle-group/specs/ToggleGroupSpecsPage.tsx b/website/screens/components/toggle-group/specs/ToggleGroupSpecsPage.tsx
index 513599246..b5971bd14 100644
--- a/website/screens/components/toggle-group/specs/ToggleGroupSpecsPage.tsx
+++ b/website/screens/components/toggle-group/specs/ToggleGroupSpecsPage.tsx
@@ -28,8 +28,8 @@ const sections = [
content: (
<>
- Different states are defined in the life cycle of the component:
- Unselected enabled, unselected hover
+ Different states are defined in the life cycle of the component:{" "}
+ unselected enabled, unselected hover
, unselected focus,{" "}
unselected active,{" "}
unselected disabled,{" "}
diff --git a/website/screens/principles/color/code/ColorCodePage.tsx b/website/screens/principles/color/code/ColorCodePage.tsx
index 7941fa557..46d384ba1 100644
--- a/website/screens/principles/color/code/ColorCodePage.tsx
+++ b/website/screens/principles/color/code/ColorCodePage.tsx
@@ -44,9 +44,8 @@ const sections = [
In this example we see how the same DxcTextInput{" "}
component is shown in a different way, in the first case it is
shown in its onDark version, since we have wrapped the container
- with the
- BackgroundColorProvider as we explained in the
- previous paragraph.
+ with the BackgroundColorProvider as we explained in
+ the previous paragraph.
>
diff --git a/website/screens/principles/typography/usage/TypographyUsagePage.tsx b/website/screens/principles/typography/usage/TypographyUsagePage.tsx
index 49986ba43..f84daa730 100644
--- a/website/screens/principles/typography/usage/TypographyUsagePage.tsx
+++ b/website/screens/principles/typography/usage/TypographyUsagePage.tsx
@@ -37,18 +37,17 @@ const sections = [
A first, lower level layer in which we have the{" "}
- DxcTypography
- component, with which any typographic combination contemplated within
- the values defined in the tables shown in the 'Code' tab can be
- created. It is important to note that this lowest level component
- should only be considered as an option once the rest of the
- components, with more specific context for certain use cases, have
- been discarded.
+ DxcTypography component, with which any typographic
+ combination contemplated within the values defined in the tables shown
+ in the 'Code' tab can be created. It is important to note that this
+ lowest level component should only be considered as an option once the
+ rest of the components, with more specific context for certain use
+ cases, have been discarded.
Above this first layer we have a second layer that provides a more
- specific context in which we have three components:
- DxcParagraph,DxcBulletedList and{" "}
+ specific context in which we have three components:{" "}
+ DxcParagraph, DxcBulletedList and{" "}
DxcHeading; these components, that are more focused on
covering a specific use case in turn, use the first level component
DxcTypography.
diff --git a/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
index 4edef784c..ad29c0b45 100644
--- a/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
+++ b/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
@@ -185,7 +185,7 @@ const HalstackProvider = () => {
startHeadingLevel={2}
>
-
+
);
};