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} > - + ); };