Skip to content

Commit

Permalink
Merge pull request #1640 from dxc-technology/gomezivann/github-link
Browse files Browse the repository at this point in the history 
Improvements to Halstack documentation site
  • Loading branch information
@raquelarrojo
raquelarrojo committed Jun 28, 2023
2 parents 084ab0d + a935d88 commit b97ff59
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 104 deletions.
48 changes: 26 additions & 22 deletions website/pages/_app.tsx
View file
Expand Up @@ -102,28 +102,32 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
}}
/>
</DxcApplicationLayout.SideNav.Section>
{filteredLinks?.map(({ label, links }) => {
return (
<DxcApplicationLayout.SideNav.Section key={label}>
<DxcApplicationLayout.SideNav.Group title={label}>
{links.map(({ label, path, status }) => (
<Link key={`${label}-${path}`} href={path} passHref>
<DxcApplicationLayout.SideNav.Link
selected={matchPaths(path)}
>
{label}
{status !== "Ready" && (
<StatusTag status={status}>
{status}
</StatusTag>
)}
</DxcApplicationLayout.SideNav.Link>
</Link>
))}
</DxcApplicationLayout.SideNav.Group>
</DxcApplicationLayout.SideNav.Section>
);
})}
{filteredLinks?.map(({ label, links }) => (
<DxcApplicationLayout.SideNav.Section key={label}>
<DxcApplicationLayout.SideNav.Group title={label}>
{links.map(({ label, path, status }) => (
<Link key={`${label}-${path}`} href={path} passHref>
<DxcApplicationLayout.SideNav.Link
selected={matchPaths(path)}
>
{label}
{status !== "Ready" && (
<StatusTag status={status}>{status}</StatusTag>
)}
</DxcApplicationLayout.SideNav.Link>
</Link>
))}
</DxcApplicationLayout.SideNav.Group>
</DxcApplicationLayout.SideNav.Section>
))}
<DxcApplicationLayout.SideNav.Section>
<DxcApplicationLayout.SideNav.Link
href="https://github.com/dxc-technology/halstack-react"
newWindow
>
GitHub
</DxcApplicationLayout.SideNav.Link>
</DxcApplicationLayout.SideNav.Section>
</DxcApplicationLayout.SideNav>
}
>
Expand Down
138 changes: 65 additions & 73 deletions website/screens/common/DocFooter.tsx
View file
Expand Up @@ -8,55 +8,6 @@ import Link from "next/link";
import { getNavigationLinks } from "./pagesList";
import styled from "styled-components";

const DocFooter = ({ githubLink }: { githubLink: string }) => {
const { pathname } = useRouter();
const { previousLink, nextLink } = getNavigationLinks(pathname);

return (
<DocFooterContainer>
<DxcFlex direction="column" gap="2rem">
<DxcFlex gap="2rem">
<DxcLink icon={githubIcon} href={githubLink} newWindow>
Edit this page on GitHub
</DxcLink>
<DxcLink
icon={githubIcon}
href="https://github.com/dxc-technology/halstack-react/issues/new/choose"
newWindow
>
Report an issue on GitHub
</DxcLink>
</DxcFlex>
<Separator />
<DxcFlex justifyContent="space-between">
<DxcFlex direction="column" gap="1rem">
{previousLink && (
<>
<DxcTypography>Previous</DxcTypography>
<Link href={previousLink.path} passHref>
<DxcLink icon={arrowBack}>{previousLink.label}</DxcLink>
</Link>
</>
)}
</DxcFlex>
<DxcFlex direction="column" alignItems="flex-end" gap="1rem">
{nextLink && (
<>
<DxcTypography>Next</DxcTypography>
<Link href={nextLink.path} passHref>
<DxcLink icon={arrowForward} iconPosition="after">
{nextLink.label}
</DxcLink>
</Link>
</>
)}
</DxcFlex>
</DxcFlex>
</DxcFlex>
</DocFooterContainer>
);
};

const arrowForward = (
<svg
id="arrow_forward_black_24dp"
Expand Down Expand Up @@ -101,38 +52,79 @@ const arrowBack = (
</svg>
);

const githubIcon = (
const reportIssueIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
height="24px"
viewBox="0 0 24 24"
width="24px"
fill="currentColor"
>
<g
id="Group_4275"
data-name="Group 4275"
transform="translate(-670.003 -820.294)"
>
<g id="Group_4276" data-name="Group 4276">
<rect
id="Rectangle_2690"
data-name="Rectangle 2690"
width="24"
height="24"
transform="translate(670.003 820.294)"
fill="none"
/>
<path
id="Octicons-mark-github"
d="M10,0A10,10,0,0,0,6.837,19.487c.5.087.688-.213.688-.475,0-.237-.012-1.025-.012-1.863C5,17.612,4.35,16.537,4.15,15.975a3.636,3.636,0,0,0-1.025-1.412c-.35-.187-.85-.65-.012-.662A2,2,0,0,1,4.65,14.925a2.137,2.137,0,0,0,2.912.825A2.1,2.1,0,0,1,8.2,14.412c-2.225-.25-4.55-1.112-4.55-4.937A3.892,3.892,0,0,1,4.675,6.787a3.593,3.593,0,0,1,.1-2.65s.837-.262,2.75,1.025a9.428,9.428,0,0,1,5,0c1.913-1.3,2.75-1.025,2.75-1.025a3.593,3.593,0,0,1,.1,2.65A3.869,3.869,0,0,1,16.4,9.475c0,3.837-2.337,4.688-4.562,4.937a2.368,2.368,0,0,1,.675,1.85c0,1.337-.013,2.412-.013,2.75,0,.262.188.575.688.475A10.005,10.005,0,0,0,10,0Z"
transform="translate(672.003 822.541)"
/>
</g>
</g>
<path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
</svg>
);

const editIcon = (
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 -960 960 960"
width="48"
fill="currentColor"
>
<path d="M180-180h44l443-443-44-44-443 443v44Zm614-486L666-794l42-42q17-17 42-17t42 17l44 44q17 17 17 42t-17 42l-42 42Zm-42 42L248-120H120v-128l504-504 128 128Zm-107-21-22-22 44 44-22-22Z" />
</svg>
);

const DocFooter = ({ githubLink }: { githubLink: string }) => {
const { pathname } = useRouter();
const { previousLink, nextLink } = getNavigationLinks(pathname);

return (
<DocFooterContainer>
<DxcFlex direction="column" gap="2rem">
<DxcFlex gap="2rem">
<DxcLink icon={editIcon} href={githubLink} newWindow>
Edit this page on GitHub
</DxcLink>
<DxcLink
icon={reportIssueIcon}
href="https://github.com/dxc-technology/halstack-react/issues/new/choose"
newWindow
>
Report an issue on GitHub
</DxcLink>
</DxcFlex>
<Separator />
<DxcFlex justifyContent="space-between">
<DxcFlex direction="column" gap="1rem">
{previousLink && (
<>
<DxcTypography>Previous</DxcTypography>
<Link href={previousLink.path} passHref>
<DxcLink icon={arrowBack}>{previousLink.label}</DxcLink>
</Link>
</>
)}
</DxcFlex>
<DxcFlex direction="column" alignItems="flex-end" gap="1rem">
{nextLink && (
<>
<DxcTypography>Next</DxcTypography>
<Link href={nextLink.path} passHref>
<DxcLink icon={arrowForward} iconPosition="after">
{nextLink.label}
</DxcLink>
</Link>
</>
)}
</DxcFlex>
</DxcFlex>
</DxcFlex>
</DocFooterContainer>
);
};

const DocFooterContainer = styled.div`
max-width: 800px;
`;
Expand Down
6 changes: 3 additions & 3 deletions website/screens/common/pagesList.ts
View file
Expand Up @@ -36,11 +36,11 @@ const utilitiesLinks: LinkDetails[] = [

const principlesLinks: LinkDetails[] = [
{ label: "Color", path: "/principles/color", status: "Ready" },
{ label: "Spacing", path: "/principles/spacing", status: "Ready" },
{ label: "Typography", path: "/principles/typography", status: "Ready" },
{ label: "Layout", path: "/principles/layout", status: "Ready" },
{ label: "Themes", path: "/principles/themes", status: "Ready" },
{ label: "Localization", path: "/principles/localization", status: "Ready" },
{ label: "Spacing", path: "/principles/spacing", status: "Ready" },
{ label: "Themes", path: "/principles/themes", status: "Ready" },
{ label: "Typography", path: "/principles/typography", status: "Ready" },
];

const componentsLinks = componentsList as LinkDetails[];
Expand Down
44 changes: 38 additions & 6 deletions website/screens/overview/introduction/IntroductionPage.tsx
View file
Expand Up @@ -129,20 +129,52 @@ const sections = [
These are the pre-defined design opinions explained by writing. They
are contained on this website and describe, with a high level of
detail, aspects like usage, existing variants, or design
specifications of the identified patterns.{" "}
specifications of the identified patterns.
</DxcParagraph>
),
},
{
title: "Adobe XD Library",
title: "UXPin",
content: (
<DxcParagraph>
Implementing the previously described Design Guidelines so that
product designers can easily drag and drop the pre-created
components into their designs, obtaining automatic updates of these
components as the Design System evolves.
In the past, we used to rely on Adobe XD for our Design UI Kit. But
we recently decided to migrate all the assets to{" "}
<DxcLink href="https://www.uxpin.com/" newWindow>
UXPin
</DxcLink>{" "}
to start a new and exciting journey. This decision brings, in
addition to the well-known image-based classic design library, a new
feature, the prototyping library.
</DxcParagraph>
),
subSections: [
{
title: "Classic Design Library",
content: (
<DxcParagraph>
Implementing the previously described Design Guidelines so that
product designers can easily drag and drop the pre-created
components into their designs, obtaining automatic updates of
these components as the Design System evolves.
</DxcParagraph>
),
},
{
title: "Prototyping Library",
content: (
<DxcParagraph>
The prototyping library is a Halstack CDK component-based design
library for fast prototyping, reducing the gap between designers
and developers. Also,{" "}
<DxcLink href="https://www.uxpin.com/merge" newWindow>
UXPin Merge
</DxcLink>{" "}
is a low-code solution that can be leveraged to generate React
code on top of Halstack components directly from the prototypes.
</DxcParagraph>
),
},
],
},
{
title: "React Library",
Expand Down

0 comments on commit b97ff59

Please sign in to comment.