From b769d30e997c62240d8094701ec93fb7fe5b9e9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Mon, 26 Jun 2023 14:07:33 +0200 Subject: [PATCH 1/3] New UXPin section, GitHub link & small fixes --- website/pages/_app.tsx | 48 +++++---- website/screens/common/DocFooter.tsx | 100 +++++++++--------- website/screens/common/pagesList.ts | 6 +- .../introduction/IntroductionPage.tsx | 42 ++++++-- 4 files changed, 115 insertions(+), 81 deletions(-) diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx index 22d112857..47646d44d 100644 --- a/website/pages/_app.tsx +++ b/website/pages/_app.tsx @@ -102,28 +102,32 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => { }} /> - {filteredLinks?.map(({ label, links }) => { - return ( - - - {links.map(({ label, path, status }) => ( - - - {label} - {status !== "Ready" && ( - - {status} - - )} - - - ))} - - - ); - })} + {filteredLinks?.map(({ label, links }) => ( + + + {links.map(({ label, path, status }) => ( + + + {label} + {status !== "Ready" && ( + {status} + )} + + + ))} + + + ))} + + + GitHub + + } > diff --git a/website/screens/common/DocFooter.tsx b/website/screens/common/DocFooter.tsx index 2f5969951..d97a00933 100644 --- a/website/screens/common/DocFooter.tsx +++ b/website/screens/common/DocFooter.tsx @@ -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 ( - - - - - Edit this page on GitHub - - - Report an issue on GitHub - - - - - - {previousLink && ( - <> - Previous - - {previousLink.label} - - - )} - - - {nextLink && ( - <> - Next - - - {nextLink.label} - - - - )} - - - - - ); -}; - const arrowForward = ( ); -const githubIcon = ( +const gitHubIcon = ( ); +const DocFooter = ({ githubLink }: { githubLink: string }) => { + const { pathname } = useRouter(); + const { previousLink, nextLink } = getNavigationLinks(pathname); + + return ( + + + + + Edit this page on GitHub + + + Report an issue on GitHub + + + + + + {previousLink && ( + <> + Previous + + {previousLink.label} + + + )} + + + {nextLink && ( + <> + Next + + + {nextLink.label} + + + + )} + + + + + ); +}; + const DocFooterContainer = styled.div` max-width: 800px; `; diff --git a/website/screens/common/pagesList.ts b/website/screens/common/pagesList.ts index e1acafc3b..d8825823e 100644 --- a/website/screens/common/pagesList.ts +++ b/website/screens/common/pagesList.ts @@ -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[]; diff --git a/website/screens/overview/introduction/IntroductionPage.tsx b/website/screens/overview/introduction/IntroductionPage.tsx index d44b8fbd5..c15ff711e 100644 --- a/website/screens/overview/introduction/IntroductionPage.tsx +++ b/website/screens/overview/introduction/IntroductionPage.tsx @@ -129,20 +129,50 @@ 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. ), }, { - title: "Adobe XD Library", + title: "UXPin", content: ( - 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{" "} + UXPin 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. ), + subSections: [ + { + title: "Classic Design Library", + content: ( + + 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. + + ), + }, + { + title: "Prototyping Library", + content: ( + + The prototyping library is a Halstack CDK component-based design + library for fast prototyping, reducing the gap between designers + and developers. Also,{" "} + + UXPin Merge + {" "} + is a low-code solution that can be leveraged to generate React + code on top of Halstack components directly from the prototypes. + + ), + }, + ], }, { title: "React Library", From f4d2095101ef7a296b2a928c74f14705c404d890 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Mon, 26 Jun 2023 15:15:06 +0200 Subject: [PATCH 2/3] New icons for the links in the doc footer --- website/screens/common/DocFooter.tsx | 44 ++++++++++++---------------- 1 file changed, 18 insertions(+), 26 deletions(-) diff --git a/website/screens/common/DocFooter.tsx b/website/screens/common/DocFooter.tsx index d97a00933..e72c326ed 100644 --- a/website/screens/common/DocFooter.tsx +++ b/website/screens/common/DocFooter.tsx @@ -52,35 +52,27 @@ const arrowBack = ( ); -const gitHubIcon = ( +const reportIssueIcon = ( - - - - - - + + +); + +const editIcon = ( + + ); @@ -92,11 +84,11 @@ const DocFooter = ({ githubLink }: { githubLink: string }) => { - + Edit this page on GitHub From 479a57b7582a363830c3cebb727d8faf40d6a2f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 28 Jun 2023 09:41:49 +0200 Subject: [PATCH 3/3] Changes based on feedback --- .../overview/introduction/IntroductionPage.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/website/screens/overview/introduction/IntroductionPage.tsx b/website/screens/overview/introduction/IntroductionPage.tsx index c15ff711e..5d899dee9 100644 --- a/website/screens/overview/introduction/IntroductionPage.tsx +++ b/website/screens/overview/introduction/IntroductionPage.tsx @@ -139,10 +139,12 @@ const sections = [ 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{" "} - UXPin 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. + + UXPin + {" "} + 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. ), subSections: [ @@ -164,7 +166,7 @@ const sections = [ The prototyping library is a Halstack CDK component-based design library for fast prototyping, reducing the gap between designers and developers. Also,{" "} - + UXPin Merge {" "} is a low-code solution that can be leveraged to generate React