Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update links to Halstack Provider in the Themes page #1522

Merged
merged 5 commits into from Mar 20, 2023
Merged

Update links to Halstack Provider in the Themes page #1522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
70fe4ed
Updating links in the Themes doc page
GomezIvann Mar 15, 2023
35db2ec
Updating more links of the Halstack Provider page
GomezIvann Mar 17, 2023
3eabe3f
Fixing Nav Tabs divider color issue
GomezIvann Mar 17, 2023
d7b67ce
Fix bug with relative paths
GomezIvann Mar 17, 2023
20a93c5
Merge branch 'master' into gomezivann-links-fixed
raquelarrojo Mar 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 11 additions & 6 deletions website/pages/_app.tsx
View file
Open in desktop
Expand Up @@ -63,6 +63,16 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
setFilter(value);
};

const matchPaths = (linkPath: string) => {
const pathToBeMatched = currentPath.split("#")[0].slice(0, -1);
const desiredPaths = [
linkPath,
`${linkPath}/specifications`,
`${linkPath}/usage`,
];
return desiredPaths.includes(pathToBeMatched);
};

return (
<>
<Head>
Expand Down Expand Up @@ -98,12 +108,7 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
{links.map(({ label, path }) => (
<Link key={`${label}-${path}`} href={path} passHref>
<DxcApplicationLayout.SideNav.Link
selected={
currentPath.slice(0, -1) === path ||
currentPath.slice(0, -1) ===
path + "/specifications" ||
currentPath.slice(0, -1) === path + "/usage"
}
selected={matchPaths(path)}
>
{label}
</DxcApplicationLayout.SideNav.Link>
Expand Down
4 changes: 2 additions & 2 deletions website/screens/common/TabsPageLayout.tsx
View file
Open in desktop
Expand Up @@ -22,7 +22,7 @@ const TabsPageLayout = ({ tabs }: TabsPageLayoutProps) => {
</Link>
))}
</DxcNavTabs>
<Space></Space>
<Space />
</TabsContainer>
);
};
Expand All @@ -34,7 +34,7 @@ const TabsContainer = styled.div`
`;

const Space = styled.div`
border-bottom: 2px solid #0000001a;
border-bottom: 2px solid #bfbfbf;
width: 100%;
`;

Expand Down
2 changes: 1 addition & 1 deletion website/screens/principles/localization/LocalizationPage.tsx
View file
Open in desktop
Expand Up @@ -54,7 +54,7 @@ const sections = [
content: (
<>
<DxcParagraph>
FormFields labels are common to several components of the design
These labels are common to several components of the design
system.
</DxcParagraph>
<DxcTable>
Expand Down
4 changes: 2 additions & 2 deletions website/screens/principles/themes/ThemesPage.tsx
View file
Open in desktop
Expand Up @@ -1427,7 +1427,7 @@ const sections = [
<DxcParagraph>
More examples can be found in the{" "}
<Link
href="/utilities/halstackProvider/#opinionated-theme"
href="/utilities/halstack-provider/#opinionated-theme"
passHref
>
GomezIvann marked this conversation as resolved.
Show resolved Hide resolved
<DxcLink>Halstack Provider section</DxcLink>
Expand Down Expand Up @@ -1472,7 +1472,7 @@ const sections = [
</JsonContainer>
<DxcParagraph>
More examples can be found in the{" "}
<Link href="/utilities/halstackProvider/#advanced-theme" passHref>
<Link href="/utilities/halstack-provider/#advanced-theme" passHref>
<DxcLink>Halstack Provider section</DxcLink>
GomezIvann marked this conversation as resolved.
Show resolved Hide resolved
</Link>
.
Expand Down
22 changes: 12 additions & 10 deletions website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
View file
Open in desktop
Expand Up @@ -61,14 +61,14 @@ const sections = [
content: (
<>
<DxcParagraph>
As explained in the{" "}
As explained on the{" "}
<Link
href="/principles/themes/#opinionated-theme-inputs-list"
href="/principles/themes/#different-theming-strategies-opinionated-theme"
passHref
>
<DxcLink>Themes section</DxcLink>
</Link>
, you can apply the opinionated theme strategy to customize the
<DxcLink>Themes</DxcLink>
</Link>{" "}
page, you can apply the opinionated theming strategy to customize the
components.
</DxcParagraph>

Expand Down Expand Up @@ -98,14 +98,16 @@ const sections = [
content: (
<>
<DxcParagraph>
The advanced strategy is the option to choose when further
customization is required, as explained in the{" "}
Advanced theming is the option to choose when further customization is
required. To find out which use cases are valid for this strategy, you
can refer to the{" "}
<Link
href="/principles/themes/#opinionated-theme-inputs-list"
href="/principles/themes/#different-theming-strategies-advanced-theme"
passHref
>
<DxcLink>Themes section.</DxcLink>
</Link>
<DxcLink>Themes</DxcLink>
</Link>{" "}
page.
</DxcParagraph>
<DxcAlert type="info" size="fillParent">
Remember that you can use the{" "}
Expand Down