dxc-technology · raquelarrojo · Jun 5, 2023 · May 22, 2023 · May 22, 2023 · May 22, 2023
diff --git a/lib/src/toggle-group/ToggleGroup.tsx b/lib/src/toggle-group/ToggleGroup.tsx
@@ -3,7 +3,7 @@ import styled, { ThemeProvider } from "styled-components";
 import { v4 as uuidv4 } from "uuid";
 import { spaces } from "../common/variables";
 import useTheme from "../useTheme";
-import ToogleGroupPropsType, { OptionLabel } from "./types";
+import ToggleGroupPropsType, { OptionLabel } from "./types";
 import BackgroundColorContext, { BackgroundColors } from "../BackgroundColorContext";
 
 const DxcToggleGroup = ({
@@ -17,7 +17,7 @@ const DxcToggleGroup = ({
   margin,
   multiple = false,
   tabIndex = 0,
-}: ToogleGroupPropsType): JSX.Element => {
+}: ToggleGroupPropsType): JSX.Element => {
   const colorsTheme = useTheme();
   const [selectedValue, setSelectedValue] = useState(defaultValue ?? (multiple ? [] : -1));
   const [toggleGroupId] = useState(`toggle-group-${uuidv4()}`);
@@ -111,7 +111,7 @@ const DxcToggleGroup = ({
   );
 };
 
-const Label = styled.label<{ disabled: ToogleGroupPropsType["disabled"] }>`
+const Label = styled.label<{ disabled: ToggleGroupPropsType["disabled"] }>`
   color: ${(props) => (props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor)};
   font-family: ${(props) => props.theme.labelFontFamily};
   font-size: ${(props) => props.theme.labelFontSize};
@@ -120,7 +120,7 @@ const Label = styled.label<{ disabled: ToogleGroupPropsType["disabled"] }>`
   line-height: ${(props) => props.theme.labelLineHeight};
 `;
 
-const HelperText = styled.span<{ disabled: ToogleGroupPropsType["disabled"] }>`
+const HelperText = styled.span<{ disabled: ToggleGroupPropsType["disabled"] }>`
   color: ${(props) => (props.disabled ? props.theme.disabledHelperTextFontcolor : props.theme.helperTextFontColor)};
   font-family: ${(props) => props.theme.helperTextFontFamily};
   font-size: ${(props) => props.theme.helperTextFontSize};
@@ -129,7 +129,7 @@ const HelperText = styled.span<{ disabled: ToogleGroupPropsType["disabled"] }>`
   line-height: ${(props) => props.theme.helperTextLineHeight};
 `;
 
-const ToggleGroup = styled.div<{ margin: ToogleGroupPropsType["margin"] }>`
+const ToggleGroup = styled.div<{ margin: ToggleGroupPropsType["margin"] }>`
   display: inline-flex;
   flex-direction: column;
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
@@ -160,7 +160,7 @@ const OptionsContainer = styled.div`
 
 const ToggleContainer = styled.div<{
   selected: boolean;
-  disabled: ToogleGroupPropsType["disabled"];
+  disabled: ToggleGroupPropsType["disabled"];
   isLast: boolean;
   isIcon: OptionLabel["icon"];
   optionLabel: OptionLabel["label"];

diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -8,7 +8,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@dxc-technology/halstack-react": "9.1.0",
+    "@dxc-technology/halstack-react": "0.0.0-c83579c",
     "@radix-ui/react-popover": "0.1.6",
     "@types/styled-components": "^5.1.18",
     "axios": "^0.27.2",
@@ -20,7 +20,7 @@
     "react-dom": "17.0.2",
     "react-error-boundary": "^3.1.4",
     "react-live": "^2.4.1",
-    "react-markdown": "^8.0.0",
+    "react-markdown": "^8.0.7",
     "slugify": "^1.6.5",
     "styled-components": "^5.3.3"
   },

diff --git a/website/pages/overview/releases.tsx b/website/pages/overview/releases.tsx
@@ -0,0 +1,34 @@
+import { GetStaticProps, InferGetStaticPropsType } from "next";
+import Head from "next/head";
+import ReleasesPage from "../../screens/overview/releases/ReleasesPage";
+
+type Release = {
+  name: string;
+  body: string;
+  published_at: string;
+};
+
+export const getStaticProps: GetStaticProps<{
+  releases: Release[];
+}> = async () => {
+  const response = await fetch(
+    "https://api.github.com/repos/dxc-technology/halstack-react/releases"
+  );
+  const releases: Release[] = await response.json();
+  return { props: { releases } };
+};
+
+const Releases = ({
+  releases,
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
+  return (
+    <>
+      <Head>
+        <title>Releases — Halstack Design System</title>
+      </Head>
+      <ReleasesPage releases={releases}></ReleasesPage>
+    </>
+  );
+};
+
+export default Releases;
diff --git a/website/screens/common/DocFooter.tsx b/website/screens/common/DocFooter.tsx
@@ -1,5 +1,9 @@
 import { useRouter } from "next/router";
-import { DxcTypography, DxcLink, DxcFlex } from "@dxc-technology/halstack-react";
+import {
+  DxcTypography,
+  DxcLink,
+  DxcFlex,
+} from "@dxc-technology/halstack-react";
 import Link from "next/link";
 import { getNavigationLinks } from "./pagesList";
 import styled from "styled-components";
@@ -11,9 +15,18 @@ const DocFooter = ({ githubLink }: { githubLink: string }) => {
   return (
     <DocFooterContainer>
       <DxcFlex direction="column" gap="2rem">
-        <DxcLink icon={githubIcon} href={githubLink} newWindow>
-          Edit this page on GitHub
-        </DxcLink>
+        <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">

diff --git a/website/screens/common/HalstackMarkdownParser.tsx b/website/screens/common/HalstackMarkdownParser.tsx
@@ -0,0 +1,39 @@
+
+import {
+  DxcBulletedList,
+  DxcHeading,
+  DxcLink,
+} from "@dxc-technology/halstack-react";
+import { ReactMarkdown } from "react-markdown/lib/react-markdown";
+import Code from "./Code";
+import React from "react";
+
+type Props = { markdown: string };
+
+const HalstackMarkdownParser = ({ markdown }: Props) => (
+  <ReactMarkdown
+    components={{
+      a: ({ href, children }) => (
+        <DxcLink href={href} newWindow>
+          {children as string}
+        </DxcLink>
+      ),
+      code: ({ children }) => <Code>{children}</Code>,
+      h3: ({ children }) => <DxcHeading level={4} text={children as string} />,
+      ul: ({ children }) => (
+        <DxcBulletedList>
+          {React.Children.map(children, (child) =>
+            child !== "\n" ? child : undefined
+          )}
+        </DxcBulletedList>
+      ),
+      li: ({ children }) => (
+        <DxcBulletedList.Item>{children}</DxcBulletedList.Item>
+      ),
+    }}
+  >
+    {markdown}
+  </ReactMarkdown>
+);
+
+export default HalstackMarkdownParser;
diff --git a/website/screens/common/QuickNavContainer.tsx b/website/screens/common/QuickNavContainer.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { DxcFlex, DxcQuickNav } from "@dxc-technology/halstack-react";
+import { DxcFlex, DxcGrid, DxcQuickNav } from "@dxc-technology/halstack-react";
 import Section from "./Section";
 import { responsiveSizes } from "../common/variables";
 
@@ -22,89 +22,56 @@ type LinkType = {
   links?: LinkType[];
 };
 
+const getSubSectionsLinks = (sections: SectionType[]) => {
+  const linksList: LinkType[] = [];
+  sections.map((section) => {
+    if (section.subSections) {
+      linksList.push({
+        label: section.title,
+        links: getSubSectionsLinks(section.subSections),
+      });
+    } else {
+      linksList.push({ label: section.title });
+    }
+  });
+  return linksList;
+};
+
 const DxcQuickNavContainer = ({
   title,
   sections,
   startHeadingLevel = 1,
-}: QuickNavContainerTypes): JSX.Element => {
-  const getSubSectionsLinks = (sections: SectionType[]) => {
-    const linksList: LinkType[] = [];
-    sections.map((section) => {
-      if (section.subSections) {
-        linksList.push({
-          label: section.title,
-          links: getSubSectionsLinks(section.subSections),
-        });
-      } else {
-        linksList.push({ label: section.title });
-      }
-    });
-    return linksList;
-  };
-
-  return (
-    <Container>
-      <ContentContainer>
-        <DxcFlex direction="column" gap="3rem">
-          {sections.map((section) => (
-            <Section
-              title={section.title}
-              subSections={section.subSections}
-              level={startHeadingLevel}
-              key={`section-${section.title}`}
-            >
-              {section.content}
-            </Section>
-          ))}
-        </DxcFlex>
-      </ContentContainer>
-      <QuickNavContainer>
-        <DxcQuickNav
-          title={title}
-          links={getSubSectionsLinks(sections)}
-        ></DxcQuickNav>
-      </QuickNavContainer>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-`;
-
-const ContentContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 800px;
-`;
+}: QuickNavContainerTypes): JSX.Element => (
+  <DxcGrid templateColumns={["15fr", "5fr"]} gap="1.5rem">
+    <DxcFlex direction="column" gap="3rem">
+      {sections.map((section) => (
+        <Section
+          title={section.title}
+          subSections={section.subSections}
+          level={startHeadingLevel}
+          key={`section-${section.title}`}
+        >
+          {section.content}
+        </Section>
+      ))}
+    </DxcFlex>
+    <QuickNavContainer>
+      <DxcQuickNav title={title} links={getSubSectionsLinks(sections)} />
+    </QuickNavContainer>
+  </DxcGrid>
+);
 
 const QuickNavContainer = styled.div`
   position: sticky;
-  margin-left: 24px;
-  max-width: 296px;
   top: calc(64px + 24px);
-  max-height: calc(100vh - 64px);
-
-  ::-webkit-scrollbar {
-    width: 2px;
-  }
-  ::-webkit-scrollbar-track {
-    background-color: #d9d9d9;
-    border-radius: 3px;
-  }
-  ::-webkit-scrollbar-thumb {
-    background-color: #66666626;
-    border-radius: 3px;
-  }
+  max-height: 568px;
+  overflow-y: auto;
 
   @media (max-width: ${responsiveSizes.laptop}px) {
     display: none;
   }
-  @media (max-width: ${responsiveSizes.desktop}px) and (min-width: ${responsiveSizes.laptop}px) {
-    max-width: 176px;
+  @media (max-height: 656px) {
+    max-height: calc(100vh - 112px);
   }
 `;
 

diff --git a/website/screens/common/QuickNavContainerLayout.tsx b/website/screens/common/QuickNavContainerLayout.tsx
@@ -1,13 +1,9 @@
-import styled from "styled-components";
-
 type QuickNavContainerLayoutProps = {
   children: React.ReactNode;
 };
 
 const QuickNavContainerLayout = ({
   children,
-}: QuickNavContainerLayoutProps) => {
-  return <>{children}</>;
-};
+}: QuickNavContainerLayoutProps) => <>{children}</>;
 
 export default QuickNavContainerLayout;
diff --git a/website/screens/common/StatusTag.tsx b/website/screens/common/StatusTag.tsx
@@ -2,8 +2,12 @@ import styled from "styled-components";
 
 type StatusTagProps = {
   status?: "Deprecated" | "Experimental" | "Information" | "Ready";
+  children: React.ReactNode;
 };
-const StatusTag = styled.div<StatusTagProps>`
+
+const StatusTag = (props: StatusTagProps) => <StyledStatusTag {...props} />;
+
+const StyledStatusTag = styled.div<StatusTagProps>`
   box-sizing: border-box;
   border-radius: 0.5rem;
   padding: 3px 6px;

diff --git a/website/screens/common/pagesList.ts b/website/screens/common/pagesList.ts
@@ -24,6 +24,7 @@ export const themeGeneratorLinks = [
 
 const overviewLinks: LinkDetails[] = [
   { label: "Introduction", path: "/overview/introduction", status: "Ready" },
+  { label: "Releases", path: "/overview/releases", status: "Ready" },
 ];
 const utilitiesLinks: LinkDetails[] = [
   {
@@ -42,7 +43,7 @@ const principlesLinks: LinkDetails[] = [
   { label: "Localization", path: "/principles/localization", status: "Ready" },
 ];
 
-const componentsLinks: LinkDetails[] = componentsList as LinkDetails[];
+const componentsLinks = componentsList as LinkDetails[];
 
 export const LinksSections: LinksSectionDetails[] = [
   { label: "Overview", links: overviewLinks },