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

Improvements to Halstack documentation site #1640

Merged
merged 5 commits into from Jun 28, 2023
Merged

Improvements to Halstack documentation site #1640

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
b769d30
New UXPin section, GitHub link & small fixes
GomezIvann Jun 26, 2023
f4d2095
New icons for the links in the doc footer
GomezIvann Jun 26, 2023
5b64460
Merge branch 'master' into gomezivann/github-link
raquelarrojo Jun 27, 2023
479a57b
Changes based on feedback
GomezIvann Jun 28, 2023
a935d88
Merge branch 'master' into gomezivann/github-link
raquelarrojo Jun 28, 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
48 changes: 26 additions & 22 deletions website/pages/_app.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
GomezIvann marked this conversation as resolved.
Show resolved Hide resolved
</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