Merge pull request #1750 from dxc-technology/gomezivann/website-updates

Updates to Halstack documentation
dxc-technology · Jan 30, 2024 · bd89f9e · bd89f9e
2 parents c9c1158 + 18ec176
commit bd89f9e
Show file tree

Hide file tree

Showing 18 changed files with 67 additions and 292 deletions.
diff --git a/lib/src/chip/Chip.stories.tsx b/lib/src/chip/Chip.stories.tsx
@@ -199,7 +199,7 @@ const ChipPrefixFocused = () => (
 const ChipSuffixFocused = () => (
   <ExampleContainer>
     <Title title="Chip with suffix" theme="light" level={4} />
-    <DxcChip label="Chip with suffix" suffixIcon="https://icons-for-free.com/download-icon-close+icon-1320184117228553763_512.png" onClickSuffix={() => {}} />
+    <DxcChip label="Chip with suffix" suffixIcon="https://cdn.iconscout.com/icon/free/png-256/free-delete-2902143-2411575.png" onClickSuffix={() => {}} />
   </ExampleContainer>
 );
 

diff --git a/lib/src/common/coreTokens.ts b/lib/src/common/coreTokens.ts
@@ -1,6 +1,6 @@
 /**
  * Halstack Color Palette 
- * @link https://developer.dxc.com/halstack/next/principles/color/usage/#color-tokens-core-color-tokens
+ * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
  */
 const CoreColorTokens = {
   // Color

diff --git a/website/pages/principles/color.tsx b/website/pages/principles/color.tsx
@@ -0,0 +1,15 @@
+import Head from "next/head";
+import ColorPage from "../../screens/principles/color/ColorPage";
+
+const Color = () => {
+  return (
+    <>
+      <Head>
+        <title>Color — Halstack Design System</title>
+      </Head>
+      <ColorPage></ColorPage>
+    </>
+  );
+};
+
+export default Color;
diff --git a/website/pages/principles/color/index.tsx b/website/pages/principles/color/index.tsx
diff --git a/website/pages/principles/color/usage.tsx b/website/pages/principles/color/usage.tsx
diff --git a/website/screens/common/componentList.js b/website/screens/common/componentList.js
@@ -7,7 +7,7 @@ exports.componentsList = [
     status: "Ready",
   },
   { label: "Bleed", path: "/components/bleed", status: "Ready" },
-  { label: "Box", path: "/components/box", status: "Ready" },
+  { label: "Box", path: "/components/box", status: "Deprecated" },
   {
     label: "Bulleted List",
     path: "/components/bulleted-list",

diff --git a/website/screens/components/box/BoxPageLayout.tsx b/website/screens/components/box/BoxPageLayout.tsx
@@ -1,4 +1,9 @@
-import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
+import {
+  DxcParagraph,
+  DxcFlex,
+  DxcAlert,
+  DxcLink,
+} from "@dxc-technology/halstack-react";
 import PageHeading from "@/common/PageHeading";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
@@ -22,6 +27,12 @@ const BoxPageHeading = ({ children }: { children: React.ReactNode }) => {
             organize the webpage is by using groups of related content, this can
             be achieved by using a dedicated Box component.
           </DxcParagraph>
+          <DxcAlert type="warning" size="fillParent">
+            This component will be removed from Halstack Design System in the future.
+            Please consider the new{" "}
+            <DxcLink href="/components/container">Container</DxcLink> component
+            as an alternative for your current use cases.
+          </DxcAlert>
           <TabsPageHeading tabs={tabs}></TabsPageHeading>
         </DxcFlex>
       </PageHeading>

diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx
@@ -73,7 +73,7 @@ const sections = [
               being <Code>CoreColorTokens</Code> the color tokens provided by
               Halstack Design System. See our{" "}
               <Link
-                href="/principles/color/usage/#color-tokens-core-color-tokens"
+                href="/principles/color/#color-tokens-core-color-tokens"
                 passHref
                 legacyBehavior
               >

diff --git a/website/screens/components/heading/specs/HeadingSpecsPage.tsx b/website/screens/components/heading/specs/HeadingSpecsPage.tsx
@@ -70,18 +70,11 @@ const sections = [
                     <td>
                       <Code>font-style</Code>
                     </td>
-                    <td>regular</td>
+                    <td>normal</td>
                     <td>
                       <Code>font-normal</Code>
                     </td>
                   </tr>
-                  <tr>
-                    <td>
-                      <Code>text-transform</Code>
-                    </td>
-                    <td>initial</td>
-                    <td></td>
-                  </tr>
                   <tr>
                     <td>
                       <Code>letter-spacing</Code>
@@ -138,18 +131,11 @@ const sections = [
                     <td>
                       <Code>font-style</Code>
                     </td>
-                    <td>regular</td>
+                    <td>normal</td>
                     <td>
                       <Code>font-normal</Code>
                     </td>
                   </tr>
-                  <tr>
-                    <td>
-                      <Code>text-transform</Code>
-                    </td>
-                    <td>initial</td>
-                    <td></td>
-                  </tr>
                   <tr>
                     <td>
                       <Code>letter-spacing</Code>
@@ -206,18 +192,11 @@ const sections = [
                     <td>
                       <Code>font-style</Code>
                     </td>
-                    <td>regular</td>
+                    <td>normal</td>
                     <td>
                       <Code>font-normal</Code>
                     </td>
                   </tr>
-                  <tr>
-                    <td>
-                      <Code>text-transform</Code>
-                    </td>
-                    <td>initial</td>
-                    <td></td>
-                  </tr>
                   <tr>
                     <td>
                       <Code>letter-spacing</Code>
@@ -274,18 +253,11 @@ const sections = [
                     <td>
                       <Code>font-style</Code>
                     </td>
-                    <td>regular</td>
+                    <td>normal</td>
                     <td>
                       <Code>font-normal</Code>
                     </td>
                   </tr>
-                  <tr>
-                    <td>
-                      <Code>text-transform</Code>
-                    </td>
-                    <td>initial</td>
-                    <td></td>
-                  </tr>
                   <tr>
                     <td>
                       <Code>letter-spacing</Code>
@@ -342,18 +314,11 @@ const sections = [
                     <td>
                       <Code>font-style</Code>
                     </td>
-                    <td>regular</td>
+                    <td>normal</td>
                     <td>
                       <Code>font-normal</Code>
                     </td>
                   </tr>
-                  <tr>
-                    <td>
-                      <Code>text-transform</Code>
-                    </td>
-                    <td>initial</td>
-                    <td></td>
-                  </tr>
                   <tr>
                     <td>
                       <Code>letter-spacing</Code>

diff --git a/website/screens/components/typography/TypographyPageLayout.tsx b/website/screens/components/typography/TypographyPageLayout.tsx
@@ -1,5 +1,5 @@
 import PageHeading from "@/common/PageHeading";
-import { DxcHeading, DxcFlex, DxcAlert } from "@dxc-technology/halstack-react";
+import { DxcFlex, DxcAlert } from "@dxc-technology/halstack-react";
 import TabsPageHeading from "@/common/TabsPageLayout";
 import ComponentHeading from "@/common/ComponentHeading";
 

diff --git a/...principles/color/usage/ColorUsagePage.tsx → ...te/screens/principles/color/ColorPage.tsx b/...principles/color/usage/ColorUsagePage.tsx → ...te/screens/principles/color/ColorPage.tsx
@@ -3,6 +3,7 @@ import {
   DxcFlex,
   DxcLink,
   DxcParagraph,
+  DxcHeading,
 } from "@dxc-technology/halstack-react";
 import Figure from "@/common/Figure";
 import Image from "@/common/Image";
@@ -12,6 +13,7 @@ import Code from "@/common/Code";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import colorOverview from "./images/color_overview.png";
 import colorFamilies from "./images/color_families.png";
+import PageHeading from "@/common/PageHeading";
 
 const sections = [
   {
@@ -820,38 +822,25 @@ const sections = [
       },
     ],
   },
-  {
-    title: "Dark mode",
-    subSections: [
-      {
-        title: "BackgroundColorProvider",
-        content: (
-          <>
-            <DxcParagraph>
-              The Design System components have two versions, 'onDark' and
-              'onLight' to ensure that they are displayed correctly regardless
-              of their background. This is not two different themes of the same
-              component but a way to ensure correct display.
-            </DxcParagraph>
-          </>
-        ),
-      },
-    ],
-  },
 ];
 
-const ColorUsagePage = () => {
+const ColorPage = () => {
   return (
     <DxcFlex direction="column" gap="4rem">
+      <PageHeading>
+        <DxcFlex direction="column" gap="2rem">
+          <DxcHeading level={1} text="Color" weight="bold"></DxcHeading>
+        </DxcFlex>
+      </PageHeading>
       <QuickNavContainerLayout>
         <QuickNavContainer
           sections={sections}
           startHeadingLevel={2}
         ></QuickNavContainer>
       </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/principles/color/usage/ColorUsagePage.tsx" />
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/principles/color/ColorPage.tsx" />
     </DxcFlex>
   );
 };
 
-export default ColorUsagePage;
+export default ColorPage;
diff --git a/website/screens/principles/color/ColorPageLayout.tsx b/website/screens/principles/color/ColorPageLayout.tsx
diff --git a/website/screens/principles/color/code/ColorCodePage.tsx b/website/screens/principles/color/code/ColorCodePage.tsx