From 839160005665063bddfa8ca2af7e19aa618c8221 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: Tue, 26 Dec 2023 14:19:20 +0100
Subject: [PATCH 1/6] Updates to Halstack documentation
---
website/pages/principles/color.tsx | 15 ++++
website/pages/principles/color/index.tsx | 21 -----
website/pages/principles/color/usage.tsx | 21 -----
website/screens/common/componentList.js | 2 +-
.../screens/components/box/BoxPageLayout.tsx | 13 +++-
.../typography/TypographyPageLayout.tsx | 2 +-
.../ColorUsagePage.tsx => ColorPage.tsx} | 31 +++-----
.../principles/color/ColorPageLayout.tsx | 31 --------
.../principles/color/code/ColorCodePage.tsx | 72 ------------------
.../color/code/examples/customUse.js | 34 ---------
.../color/code/examples/internalUse.js | 37 ---------
.../{usage => }/images/color_families.png | Bin
.../{usage => }/images/color_overview.png | Bin
13 files changed, 39 insertions(+), 240 deletions(-)
create mode 100644 website/pages/principles/color.tsx
delete mode 100644 website/pages/principles/color/index.tsx
delete mode 100644 website/pages/principles/color/usage.tsx
rename website/screens/principles/color/{usage/ColorUsagePage.tsx => ColorPage.tsx} (97%)
delete mode 100644 website/screens/principles/color/ColorPageLayout.tsx
delete mode 100644 website/screens/principles/color/code/ColorCodePage.tsx
delete mode 100644 website/screens/principles/color/code/examples/customUse.js
delete mode 100644 website/screens/principles/color/code/examples/internalUse.js
rename website/screens/principles/color/{usage => }/images/color_families.png (100%)
rename website/screens/principles/color/{usage => }/images/color_overview.png (100%)
diff --git a/website/pages/principles/color.tsx b/website/pages/principles/color.tsx
new file mode 100644
index 000000000..93c8c8ca7
--- /dev/null
+++ 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 (
+ <>
+
+ Color — Halstack Design System
+
+
+
+ );
+};
+
+export default Color;
diff --git a/website/pages/principles/color/index.tsx b/website/pages/principles/color/index.tsx
deleted file mode 100644
index 2a37e830a..000000000
--- a/website/pages/principles/color/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import type { ReactElement } from "react";
-import ColorCodePage from "../../../screens/principles/color/code/ColorCodePage";
-import ColorPageLayout from "../../../screens/principles/color/ColorPageLayout";
-
-const Index = () => {
- return (
- <>
-
- Color — Halstack Design System
-
-
-
- );
-};
-
-Index.getLayout = function getLayout(page: ReactElement) {
- return {page};
-};
-
-export default Index;
diff --git a/website/pages/principles/color/usage.tsx b/website/pages/principles/color/usage.tsx
deleted file mode 100644
index 003bf35a4..000000000
--- a/website/pages/principles/color/usage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Head from "next/head";
-import { ReactElement } from "react";
-import ColorUsagePage from "../../../screens/principles/color/usage/ColorUsagePage";
-import ColorPageLayout from "../../../screens/principles/color/ColorPageLayout";
-
-const Usage = () => {
- return (
- <>
-
- Color Usage — Halstack Design System
-
-
-
- );
-};
-
-Usage.getLayout = function getLayout(page: ReactElement) {
- return {page};
-};
-
-export default Usage;
diff --git a/website/screens/common/componentList.js b/website/screens/common/componentList.js
index d7a196114..045b59355 100644
--- 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
index 76808171d..3507ef864 100644
--- 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.
+
+ This component will be removed from Halstack Design System in the future.
+ Please consider the new{" "}
+ Container component
+ as an alternative for your current use cases.
+
diff --git a/website/screens/components/typography/TypographyPageLayout.tsx b/website/screens/components/typography/TypographyPageLayout.tsx
index a012d643a..e97c89212 100644
--- 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/website/screens/principles/color/usage/ColorUsagePage.tsx b/website/screens/principles/color/ColorPage.tsx
similarity index 97%
rename from website/screens/principles/color/usage/ColorUsagePage.tsx
rename to website/screens/principles/color/ColorPage.tsx
index 706fbc6de..ef97d9d3f 100644
--- a/website/screens/principles/color/usage/ColorUsagePage.tsx
+++ b/website/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: (
- <>
-
- 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.
-
-
- ),
- },
- ],
- },
];
-const ColorUsagePage = () => {
+const ColorPage = () => {
return (
+
+
+
+
+
-
+
);
};
-export default ColorUsagePage;
+export default ColorPage;
diff --git a/website/screens/principles/color/ColorPageLayout.tsx b/website/screens/principles/color/ColorPageLayout.tsx
deleted file mode 100644
index b43aa3951..000000000
--- a/website/screens/principles/color/ColorPageLayout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
- DxcHeading,
- DxcParagraph,
- DxcFlex,
-} from "@dxc-technology/halstack-react";
-import PageHeading from "@/common/PageHeading";
-import TabsPageHeading from "@/common/TabsPageLayout";
-
-const ColorPageHeading = ({ children }: { children: React.ReactNode }) => {
- const tabs = [
- { label: "Code", path: "/principles/color" },
- { label: "Usage", path: "/principles/color/usage" },
- ];
- return (
-
-
-
-
-
- This section explains and shows examples of all colors used in
- Halstack Design System.
-
-
-
-
- {children}
-
- );
-};
-
-export default ColorPageHeading;
diff --git a/website/screens/principles/color/code/ColorCodePage.tsx b/website/screens/principles/color/code/ColorCodePage.tsx
deleted file mode 100644
index 46d384ba1..000000000
--- a/website/screens/principles/color/code/ColorCodePage.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Code from "@/common/Code";
-import DocFooter from "@/common/DocFooter";
-import Example from "@/common/example/Example";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react";
-import customUse from "./examples/customUse";
-import internalUse from "./examples/internalUse";
-
-const sections = [
- {
- title: "Examples",
- subSections: [
- {
- title: "Internal use",
- content: (
- <>
-
- This is an example of how some components of the Design System use
- internally the BackgroundColorProvider, in this case
- the DxcAccordion knows that its background color is
- black and shows the DxcTextInput in its onDark
- version for its correct visualization.
-
-
-
- ),
- },
- {
- title: "Custom use",
- content: (
- <>
-
- If at some point it is necessary that the components of the Design
- System are aware of the color on which they are going to be
- displayed to guarantee their correct visibility, we must wrap the
- container (where the components of the Design System are going to
- be displayed) with the BackgroundColorProvider and
- pass it the background color. This way the{" "}
- BackgroundColorProvider will evaluate that color and
- if it is dark it will show the onDark version of the components.
-
-
- In this example we see how the same DxcTextInput{" "}
- component is shown in a different way, in the first case it is
- shown in its onDark version, since we have wrapped the container
- with the BackgroundColorProvider as we explained in
- the previous paragraph.
-
-
-
- ),
- },
- ],
- },
-];
-
-const ColorCodePage = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-export default ColorCodePage;
diff --git a/website/screens/principles/color/code/examples/customUse.js b/website/screens/principles/color/code/examples/customUse.js
deleted file mode 100644
index c451bd46c..000000000
--- a/website/screens/principles/color/code/examples/customUse.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import {
- BackgroundColorProvider,
- DxcTextInput,
- DxcInset,
- DxcFlex,
-} from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-