From 1a0470358026a658b6efc42d9548d9b86e63b651 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: Fri, 22 Dec 2023 14:28:40 +0100 Subject: [PATCH 01/18] First version of the Container documentation --- website/pages/components/container/index.tsx | 21 + website/screens/common/TableCode.tsx | 28 +- website/screens/common/componentList.js | 3 +- .../container/ContainerPageLayout.tsx | 46 ++ .../container/code/ContainerCodePage.tsx | 491 ++++++++++++++++++ 5 files changed, 586 insertions(+), 3 deletions(-) create mode 100644 website/pages/components/container/index.tsx create mode 100644 website/screens/components/container/ContainerPageLayout.tsx create mode 100644 website/screens/components/container/code/ContainerCodePage.tsx diff --git a/website/pages/components/container/index.tsx b/website/pages/components/container/index.tsx new file mode 100644 index 000000000..c8bbc9dad --- /dev/null +++ b/website/pages/components/container/index.tsx @@ -0,0 +1,21 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import ContainerCodePage from "../../../screens/components/container/code/ContainerCodePage"; +import ContainerPageLayout from "../../../screens/components/container/ContainerPageLayout"; + +const Usage = () => { + return ( + <> + + Container — Halstack Design System + + + + ); +}; + +Usage.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +export default Usage; diff --git a/website/screens/common/TableCode.tsx b/website/screens/common/TableCode.tsx index 155e63c28..9cd54209d 100644 --- a/website/screens/common/TableCode.tsx +++ b/website/screens/common/TableCode.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; -const StyledTableCode = styled.code` +const TableCode = styled.code` background-color: #f2eafa; color: #5f249f; font-size: 0.75rem; @@ -8,4 +8,28 @@ const StyledTableCode = styled.code` border-radius: 0.25rem; `; -export default StyledTableCode; +export const ExtendedTableCode = ({ + children, +}: { + children: React.ReactNode; +}) => ( + + {children} + +); + +const ExtendedCodeContainer = styled.div` + width: 100%; + white-space: pre-wrap; + padding: 2px 4px; + background-color: #f2eafa; + border-radius: 0.25rem; + margin: 0; +`; + +const StyledExtendedCode = styled.code` + color: #5f249f; + font-size: 0.75rem; +`; + +export default TableCode; diff --git a/website/screens/common/componentList.js b/website/screens/common/componentList.js index d7a196114..521dbbf9f 100644 --- a/website/screens/common/componentList.js +++ b/website/screens/common/componentList.js @@ -17,13 +17,14 @@ exports.componentsList = [ { label: "Card", path: "/components/card", status: "Ready" }, { label: "Checkbox", path: "/components/checkbox", status: "Ready" }, { label: "Chip", path: "/components/chip", status: "Ready" }, + { label: "Container", path: "/components/container", status: "Experimental" }, { label: "Date Input", path: "/components/date-input", status: "Ready" }, { label: "Dialog", path: "/components/dialog", status: "Ready" }, { label: "Dropdown", path: "/components/dropdown", status: "Ready" }, { label: "File Input", path: "/components/file-input", status: "Ready" }, { label: "Flex", path: "/components/flex", status: "Ready" }, { label: "Footer", path: "/components/footer", status: "Ready" }, - { label: "Grid", path: "/components/grid", status: "Experimental" }, + { label: "Grid", path: "/components/grid", status: "Ready" }, { label: "Header", path: "/components/header", status: "Ready" }, { label: "Heading", path: "/components/heading", status: "Ready" }, { label: "Image", path: "/components/image", status: "Experimental" }, diff --git a/website/screens/components/container/ContainerPageLayout.tsx b/website/screens/components/container/ContainerPageLayout.tsx new file mode 100644 index 000000000..b6e566754 --- /dev/null +++ b/website/screens/components/container/ContainerPageLayout.tsx @@ -0,0 +1,46 @@ +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"; + +const containerPageHeading = ({ children }: { children: React.ReactNode }) => { + const tabs = [{ label: "Code", path: "/components/container" }]; + + return ( + + + + + + The container component represents{" "} + + the box model + {" "} + inside the Halstack Design System. Is a general-purpose container + that allows for controlled use of our design tokens. Being generic + in nature can be "over-used", so it's important to consider + situations where more specific and expressive primitives could be + used. + + + + + + {children} + + ); +}; + +export default containerPageHeading; diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx new file mode 100644 index 000000000..d64ee7664 --- /dev/null +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -0,0 +1,491 @@ +import { + DxcFlex, + DxcTable, + DxcLink, + DxcParagraph, +} from "@dxc-technology/halstack-react"; +import Code from "@/common/Code"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import StatusTag from "@/common/StatusTag"; +import TableCode, { ExtendedTableCode } from "@/common/TableCode"; + +const backgroundTypeString = `{ + attachment?: string; + clip?: string; + color?: CoreColorTokens; + image?: string; + origin?: string; + position?: string; + repeat?: string; + size?: string; +}`; +const borderTypeString = `{ + width?: string; + style?: LineStyleValues; + color?: ColorTokens; + radius?: string; +} | { + top?: { + width?: string; + style?: LineStyleValues; + color?: CoreColorTokens; + rightRadius?: string; + leftRadius?: string; + }; + right?: { + width?: string; + style?: LineStyleValues; + color?: CoreColorTokens; + }; + bottom?: { + width?: string; + style?: LineStyleValues; + color?: CoreColorTokens; + rightRadius?: string; + leftRadius?: string; + }; + left?: { + width?: string; + style?: LineStyleValues; + color?: CoreColorTokens; + }; +}`; +const insetTypeString = `{ + top?: string; + right?: string; + bottom?: string; + left?: string; +}`; +const outlineTypeString = `{ + width?: string; + style?: LineStyleValues; + color?: CoreColorTokens; + offset?: string; +}`; +const overflowTypeString = `OverflowValues | +{ + x?: OverflowValues; + y?: OverflowValues; +}`; + +const sections = [ + { + title: "Props", + content: ( + + + Name + Type + Description + Default + + + as + + keyof HTMLElementTagNameMap + + Sets a custom HTML tag. + + 'div' + + + + background + + {backgroundTypeString} + + + Based on the CSS property background allows configuring + all properties related to the background of a container. + + - + + + border + + + {borderTypeString} +

+ being LineStyleValues an enum with the following + possible values: +

+ + 'none' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | + 'ridge' | 'inset' | 'outset' + + + + + Based on the CSS property border allows configuring all + properties related to the border of a container. + + - + + + boxShadow + + string + + + Sets the box-shadow CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'none' + + + + boxSizing + + 'content-box' | 'border-box' + + + Sets the box-sizing CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'content-box' + + + + + + Requiredchildren + + + + React.ReactNode + + Custom content inside the container. + - + + + display + + 'block' | 'inline-block' | 'inline' | 'none' + + + Sets the display CSS property. See{" "} + + MDN + {" "} + for further information. The set of values is limited to the ones + related to the outer display type. If you want to apply any pattern + from the inner box and how the children are laid out, we recommend + you to use the Flex and Grid components. + + + 'block' + + + + float + + 'left' | 'right' | 'none' + + + Sets the float CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'none' + + + + height + + string + + + + 'auto' + + + + inset + + {insetTypeString} + + + Based on the CSS property inset this prop is a + shorthand that corresponds to the top,{" "} + right, bottom, and/or left{" "} + properties. + + + 'auto' + + + + margin + + + 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | + 'xxlarge' | Space + + + + Size of the margin to be applied to the component. You can pass an + object with 'top', 'bottom', 'left' and 'right' properties in order + to specify different margin sizes. + + - + + + maxHeight + + string + + + Sets the max-height CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'none' + + + + maxWidth + + string + + + Sets the max-width CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'none' + + + + minHeight + + string + + + Sets the min-height CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'auto' + + + + minWidth + + string + + + Sets the min-width CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'auto' + + + + opacity + + string + + + Sets the opacity CSS property. See{" "} + + MDN + {" "} + for further information. + + + '1' + + + + outline + + {outlineTypeString} + + + Based on the CSS property outline allows configuring + all properties related to the outline of a container. + + - + + + overflow + + {overflowTypeString} +

+ being OverflowValues an enum with the following + possible values: +

+ + 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' + + + + Sets the overflow CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'visible' + + + + padding + + + 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | + 'xxlarge' | Space + + + + Size of the margin to be applied to the component. You can pass an + object with 'top', 'bottom', 'left' and 'right' properties in order + to specify different margin sizes. + + - + + + position + + + 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' + + + + Sets the position CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'static' + + + + width + + string + + + Sets the width CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'auto' + + + + zIndex + + 'auto' | number + + + Sets the z-index CSS property. See{" "} + + MDN + {" "} + for further information. + + + 'auto' + + + + ), + }, + { + title: "Examples", + content: ( + + Examples section is currently under development. + + ), + subSections: [], + }, +]; + +const ImageCodePage = () => { + return ( + + + + + + + ); +}; + +export default ImageCodePage; From c0eeab25e3873858f21f3344ffdd11c85ca18cb6 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: Fri, 22 Dec 2023 14:50:34 +0100 Subject: [PATCH 02/18] Adding Container to the layout page --- website/screens/principles/layout/LayoutPage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/website/screens/principles/layout/LayoutPage.tsx b/website/screens/principles/layout/LayoutPage.tsx index a0fc6fce9..a4b7883d5 100644 --- a/website/screens/principles/layout/LayoutPage.tsx +++ b/website/screens/principles/layout/LayoutPage.tsx @@ -34,6 +34,7 @@ const sections = [ Bleed + Container Flex Grid Inset From bc1a509191ef5cf668634de5eaa6989e218dbacf 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 13:16:38 +0100 Subject: [PATCH 03/18] Adding description to the container docs --- .../components/container/code/ContainerCodePage.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx index d64ee7664..b38e699cb 100644 --- a/website/screens/components/container/code/ContainerCodePage.tsx +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -219,7 +219,16 @@ const sections = [ string - + + Sets the height CSS property. See{" "} + + MDN + {" "} + for further information. + 'auto' From 2b43da691b7bd1a8baa9a40019cc02a898ce328d 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:31:06 +0100 Subject: [PATCH 04/18] Update github link --- website/screens/components/container/code/ContainerCodePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx index b38e699cb..9bea08773 100644 --- a/website/screens/components/container/code/ContainerCodePage.tsx +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -492,7 +492,7 @@ const ImageCodePage = () => { startHeadingLevel={2} > - + ); }; From 404995cb88089024789109218c4b7fbd741d26ba 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, 27 Dec 2023 12:59:44 +0100 Subject: [PATCH 05/18] Container code page updated with feedback --- .../container/code/ContainerCodePage.tsx | 37 ++----------------- 1 file changed, 4 insertions(+), 33 deletions(-) diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx index 9bea08773..833a6dd6a 100644 --- a/website/screens/components/container/code/ContainerCodePage.tsx +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -59,10 +59,10 @@ const insetTypeString = `{ left?: string; }`; const outlineTypeString = `{ - width?: string; - style?: LineStyleValues; - color?: CoreColorTokens; - offset?: string; + width?: string; + style?: LineStyleValues; + color?: CoreColorTokens; + offset?: string; }`; const overflowTypeString = `OverflowValues | { @@ -81,16 +81,6 @@ const sections = [ Description Default - - as - - keyof HTMLElementTagNameMap - - Sets a custom HTML tag. - - 'div' - - background @@ -339,25 +329,6 @@ const sections = [ 'auto' - - opacity - - string - - - Sets the opacity CSS property. See{" "} - - MDN - {" "} - for further information. - - - '1' - - outline From 80e4ea12c85ad153b8cfe9b975480a2a8a1af45c 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: Thu, 28 Dec 2023 15:33:31 +0100 Subject: [PATCH 06/18] Separating borderRadius from border --- .../container/code/ContainerCodePage.tsx | 60 ++++++++++--------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx index 833a6dd6a..72b4b18da 100644 --- a/website/screens/components/container/code/ContainerCodePage.tsx +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -21,36 +21,16 @@ const backgroundTypeString = `{ repeat?: string; size?: string; }`; -const borderTypeString = `{ - width?: string; - style?: LineStyleValues; - color?: ColorTokens; - radius?: string; -} | { - top?: { - width?: string; - style?: LineStyleValues; - color?: CoreColorTokens; - rightRadius?: string; - leftRadius?: string; - }; - right?: { - width?: string; - style?: LineStyleValues; - color?: CoreColorTokens; - }; - bottom?: { - width?: string; - style?: LineStyleValues; - color?: CoreColorTokens; - rightRadius?: string; - leftRadius?: string; - }; - left?: { +const borderTypeString = `BorderProperties | { + top?: BorderProperties; + right?: BorderProperties; + bottom?: BorderProperties; + left?: BorderProperties; +}`; +const borderPropertiesTypeString = `{ width?: string; style?: LineStyleValues; color?: CoreColorTokens; - }; }`; const insetTypeString = `{ top?: string; @@ -98,7 +78,14 @@ const sections = [ {borderTypeString}

- being LineStyleValues an enum with the following + being BorderProperties an object with the following + properties: +

+ + {borderPropertiesTypeString} + +

+ and LineStyleValues an enum with the following possible values:

@@ -113,6 +100,23 @@ const sections = [ - + + borderRadius + + string + + + Sets the border-radius CSS property. See{" "} + + MDN + {" "} + for further information. + + - + boxShadow From d456b1be8cb180038f36dbcd3caf2dbf92f02cd0 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, 10 Jan 2024 13:27:09 +0100 Subject: [PATCH 07/18] Updating wrong storybooks of the Container --- lib/src/container/Container.stories.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/lib/src/container/Container.stories.tsx b/lib/src/container/Container.stories.tsx index 732f93b9d..0aceee6c9 100644 --- a/lib/src/container/Container.stories.tsx +++ b/lib/src/container/Container.stories.tsx @@ -24,10 +24,9 @@ export const Chromatic = () => ( width: "thick", color: "color_purple_600", style: "solid", - leftRadius: "0.25rem", - rightRadius: "0.25rem", }, }} + borderRadius="0 0 0.25rem 0.25rem" padding="medium" margin="large" > @@ -52,7 +51,8 @@ export const Chromatic = () => ( @@ -78,7 +78,8 @@ export const Chromatic = () => ( ( padding="medium" outline={{ width: "1px", style: "solid", color: "color_black" }} boxShadow="10px 5px 5px #fe0123" - opacity="0.75" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl @@ -186,7 +186,8 @@ const Listbox = ({ suggestions = [] }: { suggestions: string[] }): JSX.Element = Date: Thu, 11 Jan 2024 14:02:48 +0100 Subject: [PATCH 08/18] More changes in the Container documentation --- lib/src/container/Container.stories.tsx | 9 + lib/src/container/Container.tsx | 80 ++-- lib/src/container/types.ts | 2 +- website/package-lock.json | 360 ++++++++++-------- website/package.json | 2 +- website/pages/components/container/usage.tsx | 21 + .../container/ContainerPageLayout.tsx | 5 +- .../container/code/ContainerCodePage.tsx | 19 +- .../container/code/examples/basicUsage.ts | 23 ++ .../container/code/examples/listbox.ts | 47 +++ .../container/usage/ContainerUsagePage.tsx | 31 ++ 11 files changed, 386 insertions(+), 213 deletions(-) create mode 100644 website/pages/components/container/usage.tsx create mode 100644 website/screens/components/container/code/examples/basicUsage.ts create mode 100644 website/screens/components/container/code/examples/listbox.ts create mode 100644 website/screens/components/container/usage/ContainerUsagePage.tsx diff --git a/lib/src/container/Container.stories.tsx b/lib/src/container/Container.stories.tsx index 0aceee6c9..7df80426c 100644 --- a/lib/src/container/Container.stories.tsx +++ b/lib/src/container/Container.stories.tsx @@ -178,6 +178,15 @@ export const Chromatic = () => ( + + <ExampleContainer> + <DxcContainer + outline={{ color: "color_blue_400", style: "solid", offset: "2px" }} + border={{ top: { style: "solid" } }} + > + Example text + </DxcContainer> + </ExampleContainer> </ExampleContainer> </> ); diff --git a/lib/src/container/Container.tsx b/lib/src/container/Container.tsx index ee6ae8ff9..4ff3394a2 100644 --- a/lib/src/container/Container.tsx +++ b/lib/src/container/Container.tsx @@ -1,6 +1,6 @@ import React from "react"; import styled from "styled-components"; -import ContainerPropsType, { StyledProps } from "./types"; +import ContainerPropsType, { StyledProps, BorderProperties } from "./types"; import { getCoreColorToken } from "../common/coreTokens"; import { BackgroundColorProvider } from "../BackgroundColorContext"; @@ -24,6 +24,11 @@ const DxcContainer = ({ display, width, height, overflow, ...props }: ContainerP </BackgroundColorProvider> ); +const getBorderStyles = (direction: "top" | "bottom" | "left" | "right", borderProperties: BorderProperties) => + `border-${direction}: ${borderProperties?.width ?? ""} ${borderProperties?.style ?? ""} ${ + getCoreColorToken(borderProperties?.color) ?? "" + }`; + const Container = styled.div<StyledProps>` box-sizing: ${({ boxSizing }) => boxSizing}; display: ${({ $display }) => $display}; @@ -41,53 +46,52 @@ const Container = styled.div<StyledProps>` float: ${({ float }) => float}; z-index: ${({ zIndex }) => zIndex}; box-shadow: ${({ boxShadow }) => boxShadow}; - outline: ${({ outline }) => `${outline?.width} ${outline?.style} ${getCoreColorToken(outline?.color)}`}; - outline-offset: ${({ outline }) => outline?.offset}; - margin: ${({ margin }) => (typeof margin === "string" ? `${spaces[margin]}` : "")}; + background-attachment: ${({ background }) => background?.attachment}; + background-clip: ${({ background }) => background?.clip}; + background-color: ${({ background }) => getCoreColorToken(background?.color)}; + background-image: ${({ background }) => background?.image}; + background-origin: ${({ background }) => background?.origin}; + background-position: ${({ background }) => background?.position}; + background-repeat: ${({ background }) => background?.repeat}; + background-size: ${({ background }) => background?.size}; + + border-radius: ${({ borderRadius }) => borderRadius}; + border-width: ${({ border }) => (border && "width" in border ? `${border?.width}` : "")}; + border-style: ${({ border }) => (border && "style" in border ? `${border?.style}` : "")}; + border-width: ${({ border }) => (border && "color" in border ? `${getCoreColorToken(border?.color)}` : "")}; + ${({ border }) => { + if (border != null) + return "top" in border + ? getBorderStyles("top", border.top) + : "right" in border + ? getBorderStyles("right", border.right) + : "left" in border + ? getBorderStyles("left", border.left) + : "bottom" in border + ? getBorderStyles("bottom", border.bottom) + : ""; + }}; + + margin: ${({ margin }) => (typeof margin === "string" ? spaces[margin] : "")}; margin-top: ${({ margin }) => (typeof margin === "object" ? spaces[margin.top] : "")}; margin-right: ${({ margin }) => (typeof margin === "object" ? spaces[margin.right] : "")}; margin-bottom: ${({ margin }) => (typeof margin === "object" ? spaces[margin.bottom] : "")}; margin-left: ${({ margin }) => (typeof margin === "object" ? spaces[margin.left] : "")}; - padding: ${({ padding }) => (typeof padding === "string" ? `${spaces[padding]}` : "")}; - padding-top: ${({ padding }) => (typeof padding === "object" ? spaces[padding.top] : "")}; - padding-right: ${({ padding }) => (typeof padding === "object" ? spaces[padding.right] : "")}; - padding-bottom: ${({ padding }) => (typeof padding === "object" ? spaces[padding.bottom] : "")}; - padding-left: ${({ padding }) => (typeof padding === "object" ? spaces[padding.left] : "")}; - - border: ${({ border }) => - border && "width" in border ? `${border?.width} ${border?.style} ${getCoreColorToken(border?.color)}` : ""}; - border-top: ${({ border }) => - border && "top" in border - ? `${border?.top?.width} ${border?.top?.style} ${getCoreColorToken(border?.top?.color)}` - : ""}; - border-right: ${({ border }) => - border && "right" in border - ? `${border?.right?.width} ${border?.right?.style} ${getCoreColorToken(border?.right?.color)}` - : ""}; - border-bottom: ${({ border }) => - border && "bottom" in border - ? `${border?.bottom?.width} ${border?.bottom?.style} ${getCoreColorToken(border?.bottom?.color)}` - : ""}; - border-left: ${({ border }) => - border && "left" in border - ? `${border?.left?.width} ${border?.left?.style} ${getCoreColorToken(border?.left?.color)}` - : ""}; - border-radius: ${({ borderRadius }) => borderRadius}; + outline: ${({ outline }) => + `${outline?.width ?? ""} ${outline?.style ?? ""} ${getCoreColorToken(outline?.color) ?? ""}`}; + outline-offset: ${({ outline }) => outline?.offset}; - overflow: ${({ $overflow }) => (typeof $overflow !== "object" ? $overflow : "")}; + overflow: ${({ $overflow }) => (typeof $overflow === "string" ? $overflow : "")}; overflow-x: ${({ $overflow }) => (typeof $overflow === "object" ? `${$overflow?.x}` : "")}; overflow-y: ${({ $overflow }) => (typeof $overflow === "object" ? `${$overflow?.y}` : "")}; - background-attachment: ${({ background }) => background?.attachment}; - background-clip: ${({ background }) => background?.clip}; - background-color: ${({ background }) => getCoreColorToken(background?.color)}; - background-image: ${({ background }) => background?.image}; - background-origin: ${({ background }) => background?.origin}; - background-position: ${({ background }) => background?.position}; - background-repeat: ${({ background }) => background?.repeat}; - background-size: ${({ background }) => background?.size}; + padding: ${({ padding }) => (typeof padding === "string" ? spaces[padding] : "")}; + padding-top: ${({ padding }) => (typeof padding === "object" ? spaces[padding.top] : "")}; + padding-right: ${({ padding }) => (typeof padding === "object" ? spaces[padding.right] : "")}; + padding-bottom: ${({ padding }) => (typeof padding === "object" ? spaces[padding.bottom] : "")}; + padding-left: ${({ padding }) => (typeof padding === "object" ? spaces[padding.left] : "")}; `; export default DxcContainer; diff --git a/lib/src/container/types.ts b/lib/src/container/types.ts index 72f8f7af2..276808710 100644 --- a/lib/src/container/types.ts +++ b/lib/src/container/types.ts @@ -28,7 +28,7 @@ type Background = { size?: string; }; -type BorderProperties = { +export type BorderProperties = { width?: string; style?: "none" | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset"; color?: CoreColorTokens; diff --git a/website/package-lock.json b/website/package-lock.json index 17448cbec..f716ae60e 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -6,7 +6,7 @@ "": { "name": "docs-site", "dependencies": { - "@dxc-technology/halstack-react": "^11.0.0", + "@dxc-technology/halstack-react": "next", "@radix-ui/react-popover": "^1.0.7", "@types/styled-components": "^5.1.18", "axios": "^0.27.2", @@ -126,21 +126,21 @@ } }, "node_modules/@babel/core": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.5.tgz", - "integrity": "sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==", + "version": "7.23.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz", + "integrity": "sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==", "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.23.5", - "@babel/generator": "^7.23.5", - "@babel/helper-compilation-targets": "^7.22.15", + "@babel/generator": "^7.23.6", + "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.23.5", - "@babel/parser": "^7.23.5", + "@babel/helpers": "^7.23.7", + "@babel/parser": "^7.23.6", "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.5", - "@babel/types": "^7.23.5", + "@babel/traverse": "^7.23.7", + "@babel/types": "^7.23.6", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -165,11 +165,11 @@ } }, "node_modules/@babel/generator": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.5.tgz", - "integrity": "sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz", + "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==", "dependencies": { - "@babel/types": "^7.23.5", + "@babel/types": "^7.23.6", "@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" @@ -201,14 +201,14 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz", - "integrity": "sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz", + "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==", "peer": true, "dependencies": { - "@babel/compat-data": "^7.22.9", - "@babel/helper-validator-option": "^7.22.15", - "browserslist": "^4.21.9", + "@babel/compat-data": "^7.23.5", + "@babel/helper-validator-option": "^7.23.5", + "browserslist": "^4.22.2", "lru-cache": "^5.1.1", "semver": "^6.3.1" }, @@ -358,14 +358,14 @@ } }, "node_modules/@babel/helpers": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.5.tgz", - "integrity": "sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==", + "version": "7.23.8", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.8.tgz", + "integrity": "sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==", "peer": true, "dependencies": { "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.5", - "@babel/types": "^7.23.5" + "@babel/traverse": "^7.23.7", + "@babel/types": "^7.23.6" }, "engines": { "node": ">=6.9.0" @@ -436,9 +436,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz", - "integrity": "sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", + "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==", "bin": { "parser": "bin/babel-parser.js" }, @@ -461,9 +461,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz", - "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==", + "version": "7.23.8", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz", + "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -485,19 +485,19 @@ } }, "node_modules/@babel/traverse": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.5.tgz", - "integrity": "sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==", + "version": "7.23.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz", + "integrity": "sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==", "dependencies": { "@babel/code-frame": "^7.23.5", - "@babel/generator": "^7.23.5", + "@babel/generator": "^7.23.6", "@babel/helper-environment-visitor": "^7.22.20", "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.5", - "@babel/types": "^7.23.5", - "debug": "^4.1.0", + "@babel/parser": "^7.23.6", + "@babel/types": "^7.23.6", + "debug": "^4.3.1", "globals": "^11.1.0" }, "engines": { @@ -513,9 +513,9 @@ } }, "node_modules/@babel/types": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.5.tgz", - "integrity": "sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==", + "version": "7.23.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", + "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", "dependencies": { "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", @@ -526,9 +526,9 @@ } }, "node_modules/@dxc-technology/halstack-react": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@dxc-technology/halstack-react/-/halstack-react-11.0.0.tgz", - "integrity": "sha512-sEMs8dhRiVJ6bYYNJNxg7m7h7AjmjplO/Kxpr0Cij5DKzDjCsXdmWVHl+GC/dQOycF26lQy7+bwR/Qd0oXI1oA==", + "version": "0.0.0-b3b8a35", + "resolved": "https://registry.npmjs.org/@dxc-technology/halstack-react/-/halstack-react-0.0.0-b3b8a35.tgz", + "integrity": "sha512-1o8LerinqhTh6Y9FRo76noHljO93TUE8haIDzPlp54m7hKQYlrjB7XC6htyiL84RGpavtbcNgeNZRW+JpbHFhQ==", "dependencies": { "@radix-ui/react-popover": "^1.0.7", "color": "^3.1.3", @@ -598,28 +598,28 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", - "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz", + "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==", "dependencies": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz", + "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==", "dependencies": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.5.3", + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz", - "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.5.tgz", + "integrity": "sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==", "dependencies": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.5.4" }, "peerDependencies": { "react": ">=16.8.0", @@ -627,9 +627,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "node_modules/@humanwhocodes/config-array": { "version": "0.9.5", @@ -1320,9 +1320,9 @@ } }, "node_modules/@rushstack/eslint-patch": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.0.tgz", - "integrity": "sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz", + "integrity": "sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==", "dev": true }, "node_modules/@swc/helpers": { @@ -1350,9 +1350,9 @@ } }, "node_modules/@types/eslint": { - "version": "8.44.8", - "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.8.tgz", - "integrity": "sha512-4K8GavROwhrYl2QXDXm0Rv9epkA8GBFu0EI+XrrnnuCl7u8CWBRusX7fXJfanhZTDWSAL24gDI/UqXyUM0Injw==", + "version": "8.56.2", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.2.tgz", + "integrity": "sha512-uQDwm1wFHmbBbCZCqAlq6Do9LYwByNZHWzXppSnay9SuwJ+VRbjkbLABer54kcPnMSlG6Fdiy2yaFXm/z9Z5gw==", "peer": true, "dependencies": { "@types/estree": "*", @@ -1376,9 +1376,9 @@ "peer": true }, "node_modules/@types/hast": { - "version": "2.3.8", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.8.tgz", - "integrity": "sha512-aMIqAlFd2wTIDZuvLbhUT+TGvMxrNC8ECUIVtH6xxy0sQLs3iu6NO8Kp/VT5je7i5ufnebXzdV1dNDMnvaH6IQ==", + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.9.tgz", + "integrity": "sha512-pTHyNlaMD/oKJmS+ZZUyFUcsZeBZpC0lmGquw98CqRVNgAdJZJeD7GoeLiT6Xbx5rU9VCjSt0RwEvDgzh4obFw==", "dependencies": { "@types/unist": "^2" } @@ -1437,9 +1437,9 @@ } }, "node_modules/@types/react-color": { - "version": "3.0.10", - "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.10.tgz", - "integrity": "sha512-6K5BAn3zyd8lW8UbckIAVeXGxR82Za9jyGD2DBEynsa7fKaguLDVtjfypzs7fgEV7bULgs7uhds8A8v1wABTvQ==", + "version": "3.0.11", + "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.11.tgz", + "integrity": "sha512-20m5GpzmdqwmSdnPeMs4UPPUuvkS4ESwakL6u2YN1hbo+ajWiiTwGYIMGhdcJFGeoLyAsr7TVonbZrMhU3+pdw==", "dev": true, "dependencies": { "@types/react": "*", @@ -1447,9 +1447,9 @@ } }, "node_modules/@types/reactcss": { - "version": "1.2.10", - "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.10.tgz", - "integrity": "sha512-gf5qJ1wOYP8N5q9H8/5c3QZHQzu8ltPClhM0vEWuBu9SGg4KSzgpJd2TShEsQDwsYn+mtnJ1xHUdJyzj/r9WrA==", + "version": "1.2.11", + "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.11.tgz", + "integrity": "sha512-0fFy0ubuPlhksId8r9V8nsLcxBAPQnn15g/ERAElgE9L6rOquMj2CapsxqfyBuHlkp0/ndEUVnkYI7MkTtkGpw==", "dev": true, "dependencies": { "@types/react": "*" @@ -1461,9 +1461,9 @@ "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@types/styled-components": { - "version": "5.1.32", - "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.32.tgz", - "integrity": "sha512-DqVpl8R0vbhVSop4120UHtGrFmHuPeoDwF4hDT0kPJTY8ty0SI38RV3VhCMsWigMUXG+kCXu7vMRqMFNy6eQgA==", + "version": "5.1.34", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", + "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==", "dependencies": { "@types/hoist-non-react-statics": "*", "@types/react": "*", @@ -1476,15 +1476,15 @@ "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==" }, "node_modules/@typescript-eslint/parser": { - "version": "6.13.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.13.1.tgz", - "integrity": "sha512-fs2XOhWCzRhqMmQf0eicLa/CWSaYss2feXsy7xBD/pLyWke/jCIVc2s1ikEAtSW7ina1HNhv7kONoEfVNEcdDQ==", + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.18.1.tgz", + "integrity": "sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "6.13.1", - "@typescript-eslint/types": "6.13.1", - "@typescript-eslint/typescript-estree": "6.13.1", - "@typescript-eslint/visitor-keys": "6.13.1", + "@typescript-eslint/scope-manager": "6.18.1", + "@typescript-eslint/types": "6.18.1", + "@typescript-eslint/typescript-estree": "6.18.1", + "@typescript-eslint/visitor-keys": "6.18.1", "debug": "^4.3.4" }, "engines": { @@ -1504,13 +1504,13 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "6.13.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.13.1.tgz", - "integrity": "sha512-BW0kJ7ceiKi56GbT2KKzZzN+nDxzQK2DS6x0PiSMPjciPgd/JRQGMibyaN2cPt2cAvuoH0oNvn2fwonHI+4QUQ==", + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.1.tgz", + "integrity": "sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.13.1", - "@typescript-eslint/visitor-keys": "6.13.1" + "@typescript-eslint/types": "6.18.1", + "@typescript-eslint/visitor-keys": "6.18.1" }, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -1521,9 +1521,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "6.13.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.13.1.tgz", - "integrity": "sha512-gjeEskSmiEKKFIbnhDXUyiqVma1gRCQNbVZ1C8q7Zjcxh3WZMbzWVfGE9rHfWd1msQtPS0BVD9Jz9jded44eKg==", + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.1.tgz", + "integrity": "sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==", "dev": true, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -1534,16 +1534,17 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "6.13.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.13.1.tgz", - "integrity": "sha512-sBLQsvOC0Q7LGcUHO5qpG1HxRgePbT6wwqOiGLpR8uOJvPJbfs0mW3jPA3ujsDvfiVwVlWUDESNXv44KtINkUQ==", + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.1.tgz", + "integrity": "sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.13.1", - "@typescript-eslint/visitor-keys": "6.13.1", + "@typescript-eslint/types": "6.18.1", + "@typescript-eslint/visitor-keys": "6.18.1", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", + "minimatch": "9.0.3", "semver": "^7.5.4", "ts-api-utils": "^1.0.1" }, @@ -1560,13 +1561,37 @@ } } }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", + "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0" + } + }, + "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "6.13.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.13.1.tgz", - "integrity": "sha512-NDhQUy2tg6XGNBGDRm1XybOHSia8mcXmlbKWoQP+nm1BIIMxa55shyJfZkHpEBN62KNPLrocSM2PdPcaLgDKMQ==", + "version": "6.18.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.1.tgz", + "integrity": "sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.13.1", + "@typescript-eslint/types": "6.18.1", "eslint-visitor-keys": "^3.4.1" }, "engines": { @@ -1736,9 +1761,9 @@ "peer": true }, "node_modules/acorn": { - "version": "8.11.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", - "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==", + "version": "8.11.3", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", + "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==", "bin": { "acorn": "bin/acorn" }, @@ -2114,9 +2139,9 @@ } }, "node_modules/browserslist": { - "version": "4.22.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz", - "integrity": "sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ==", + "version": "4.22.2", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz", + "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==", "funding": [ { "type": "opencollective", @@ -2133,9 +2158,9 @@ ], "peer": true, "dependencies": { - "caniuse-lite": "^1.0.30001541", - "electron-to-chromium": "^1.4.535", - "node-releases": "^2.0.13", + "caniuse-lite": "^1.0.30001565", + "electron-to-chromium": "^1.4.601", + "node-releases": "^2.0.14", "update-browserslist-db": "^1.0.13" }, "bin": { @@ -2261,9 +2286,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001565", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz", - "integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==", + "version": "1.0.30001576", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz", + "integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==", "funding": [ { "type": "opencollective", @@ -2398,9 +2423,9 @@ "peer": true }, "node_modules/core-js": { - "version": "3.33.3", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.33.3.tgz", - "integrity": "sha512-lo0kOocUlLKmm6kv/FswQL8zbkH7mVsLJ/FULClOhv8WRVmKLVcs6XPNQAzstfeJTCHMyButEwG+z1kHxHoDZw==", + "version": "3.35.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.0.tgz", + "integrity": "sha512-ntakECeqg81KqMueeGJ79Q5ZgQNR+6eaE8sxGCx62zMbAIj65q+uYvatToew3m6eAGdU4gNZwpZ34NMe4GYswg==", "hasInstallScript": true, "funding": { "type": "opencollective", @@ -2456,9 +2481,9 @@ } }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/damerau-levenshtein": { "version": "1.0.8", @@ -2599,9 +2624,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.597", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.597.tgz", - "integrity": "sha512-0XOQNqHhg2YgRVRUrS4M4vWjFCFIP2ETXcXe/0KIQBjXE9Cpy+tgzzYfuq6HGai3hWq0YywtG+5XK8fyG08EjA==", + "version": "1.4.628", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.628.tgz", + "integrity": "sha512-2k7t5PHvLsufpP6Zwk0nof62yLOsCf032wZx7/q0mv8gwlXjhcxI3lz6f0jBr0GrnWKcm3burXzI3t5IrcdUxw==", "peer": true }, "node_modules/emoji-regex": { @@ -2938,9 +2963,9 @@ } }, "node_modules/eslint-plugin-import": { - "version": "2.29.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz", - "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==", + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", + "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==", "dev": true, "dependencies": { "array-includes": "^3.1.7", @@ -2959,7 +2984,7 @@ "object.groupby": "^1.0.1", "object.values": "^1.1.7", "semver": "^6.3.1", - "tsconfig-paths": "^3.14.2" + "tsconfig-paths": "^3.15.0" }, "engines": { "node": ">=4" @@ -3290,9 +3315,9 @@ "dev": true }, "node_modules/fastq": { - "version": "1.15.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", - "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz", + "integrity": "sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==", "dev": true, "dependencies": { "reusify": "^1.0.4" @@ -3529,9 +3554,9 @@ "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" }, "node_modules/globals": { - "version": "13.23.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", - "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==", + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", "dev": true, "dependencies": { "type-fest": "^0.20.2" @@ -5027,9 +5052,9 @@ } }, "node_modules/node-releases": { - "version": "2.0.13", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", - "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", + "version": "2.0.14", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", + "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==", "peer": true }, "node_modules/object-assign": { @@ -5059,13 +5084,13 @@ } }, "node_modules/object.assign": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz", - "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==", + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz", + "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.4", + "call-bind": "^1.0.5", + "define-properties": "^1.2.1", "has-symbols": "^1.0.3", "object-keys": "^1.1.1" }, @@ -5611,9 +5636,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", - "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, "node_modules/regexp.prototype.flags": { "version": "1.5.1", @@ -5838,15 +5863,18 @@ "peer": true }, "node_modules/safe-regex-test": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz", - "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.1.tgz", + "integrity": "sha512-Y5NejJTTliTyY4H7sipGqY+RX5P87i3F7c4Rcepy72nq+mNLhIsD0W4c7kEmduMDQCSqtPsXPlSTsFhh2LQv+g==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.3", + "call-bind": "^1.0.5", + "get-intrinsic": "^1.2.2", "is-regex": "^1.1.4" }, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -5892,9 +5920,9 @@ } }, "node_modules/serialize-javascript": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz", - "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", + "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==", "peer": true, "dependencies": { "randombytes": "^2.1.0" @@ -6251,9 +6279,9 @@ } }, "node_modules/terser": { - "version": "5.24.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz", - "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==", + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.26.0.tgz", + "integrity": "sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==", "peer": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", @@ -6269,16 +6297,16 @@ } }, "node_modules/terser-webpack-plugin": { - "version": "5.3.9", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz", - "integrity": "sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==", + "version": "5.3.10", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz", + "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==", "peer": true, "dependencies": { - "@jridgewell/trace-mapping": "^0.3.17", + "@jridgewell/trace-mapping": "^0.3.20", "jest-worker": "^27.4.5", "schema-utils": "^3.1.1", "serialize-javascript": "^6.0.1", - "terser": "^5.16.8" + "terser": "^5.26.0" }, "engines": { "node": ">= 10.13.0" @@ -6364,9 +6392,9 @@ } }, "node_modules/tsconfig-paths": { - "version": "3.14.2", - "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", - "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==", + "version": "3.15.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", + "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==", "dev": true, "dependencies": { "@types/json5": "^0.0.29", @@ -6685,9 +6713,9 @@ } }, "node_modules/use-callback-ref": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz", - "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz", + "integrity": "sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==", "dependencies": { "tslib": "^2.0.0" }, diff --git a/website/package.json b/website/package.json index 5519ab90a..288f5a3c6 100644 --- a/website/package.json +++ b/website/package.json @@ -8,7 +8,7 @@ "lint": "next lint" }, "dependencies": { - "@dxc-technology/halstack-react": "^11.0.0", + "@dxc-technology/halstack-react": "next", "@radix-ui/react-popover": "^1.0.7", "@types/styled-components": "^5.1.18", "axios": "^0.27.2", diff --git a/website/pages/components/container/usage.tsx b/website/pages/components/container/usage.tsx new file mode 100644 index 000000000..f3b811fb6 --- /dev/null +++ b/website/pages/components/container/usage.tsx @@ -0,0 +1,21 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import ContainerUsagePage from "../../../screens/components/container/usage/ContainerUsagePage"; +import ContainerPageLayout from "../../../screens/components/container/ContainerPageLayout"; + +const Usage = () => { + return ( + <> + <Head> + <title>Container Usage — Halstack Design System + + + + ); +}; + +Usage.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +export default Usage; diff --git a/website/screens/components/container/ContainerPageLayout.tsx b/website/screens/components/container/ContainerPageLayout.tsx index b6e566754..552e491ea 100644 --- a/website/screens/components/container/ContainerPageLayout.tsx +++ b/website/screens/components/container/ContainerPageLayout.tsx @@ -9,7 +9,10 @@ import TabsPageHeading from "@/common/TabsPageLayout"; import ComponentHeading from "@/common/ComponentHeading"; const containerPageHeading = ({ children }: { children: React.ReactNode }) => { - const tabs = [{ label: "Code", path: "/components/container" }]; + const tabs = [ + { label: "Code", path: "/components/container" }, + { label: "Usage", path: "/components/container/usage" }, + ]; return ( diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx index 72b4b18da..7b183df03 100644 --- a/website/screens/components/container/code/ContainerCodePage.tsx +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -10,6 +10,9 @@ import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import StatusTag from "@/common/StatusTag"; import TableCode, { ExtendedTableCode } from "@/common/TableCode"; +import Example from "@/common/example/Example"; +import basicUsage from "./examples/basicUsage"; +import listbox from "./examples/listbox"; const backgroundTypeString = `{ attachment?: string; @@ -449,12 +452,16 @@ const sections = [ }, { title: "Examples", - content: ( - - Examples section is currently under development. - - ), - subSections: [], + subSections: [ + { + title: "Basic Usage", + content: , + }, + { + title: "Building a listbox", + content: , + }, + ], }, ]; diff --git a/website/screens/components/container/code/examples/basicUsage.ts b/website/screens/components/container/code/examples/basicUsage.ts new file mode 100644 index 000000000..a0c582d7a --- /dev/null +++ b/website/screens/components/container/code/examples/basicUsage.ts @@ -0,0 +1,23 @@ +import { DxcContainer, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + Example text + + + ); +}`; + +const scope = { + DxcContainer, + DxcInset, +}; + +export default { code, scope }; diff --git a/website/screens/components/container/code/examples/listbox.ts b/website/screens/components/container/code/examples/listbox.ts new file mode 100644 index 000000000..6d5af6df6 --- /dev/null +++ b/website/screens/components/container/code/examples/listbox.ts @@ -0,0 +1,47 @@ +import { DxcContainer, DxcInset, DxcTypography } from "@dxc-technology/halstack-react"; + +const code = `() => { + const suggestions = ["Option 1", "Option 2", "Option 3", "Option 4"]; + + return ( + + + {suggestions.map((suggestion, index) => ( + + + + {suggestion} + + + + ))} + + + ); +}`; + +const scope = { + DxcContainer, + DxcInset, + DxcTypography +}; + +export default { code, scope }; diff --git a/website/screens/components/container/usage/ContainerUsagePage.tsx b/website/screens/components/container/usage/ContainerUsagePage.tsx new file mode 100644 index 000000000..9a891f4a2 --- /dev/null +++ b/website/screens/components/container/usage/ContainerUsagePage.tsx @@ -0,0 +1,31 @@ +import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; + +const sections = [ + { + title: "Test", + content: ( + <> + Container my friend + + ), + }, +]; + +const ContainerUsagePage = () => { + return ( + + + + + + + ); +}; + +export default ContainerUsagePage; From 364c34b61d8576816e17220c1e2d37f139671abc 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, 15 Jan 2024 11:24:25 +0100 Subject: [PATCH 09/18] More updates to website & container docs --- lib/package-lock.json | 8 +-- lib/package.json | 2 +- website/package-lock.json | 8 +-- website/package.json | 2 +- .../container/ContainerPageLayout.tsx | 2 +- .../container/code/ContainerCodePage.tsx | 2 +- .../container/usage/ContainerUsagePage.tsx | 58 ++++++++++++++++++- 7 files changed, 67 insertions(+), 15 deletions(-) diff --git a/lib/package-lock.json b/lib/package-lock.json index 899bf2401..56abe1717 100644 --- a/lib/package-lock.json +++ b/lib/package-lock.json @@ -35,7 +35,7 @@ "@testing-library/user-event": "^13.0.0", "@types/color": "^3.0.3", "@types/react": "^18.0.18", - "@types/styled-components": "^5.1.29", + "@types/styled-components": "5.1.29", "@types/uuid": "^9.0.6", "babel-jest": "^24.8.0", "babel-loader": "^8.0.6", @@ -8807,9 +8807,9 @@ "dev": true }, "node_modules/@types/styled-components": { - "version": "5.1.30", - "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.30.tgz", - "integrity": "sha512-xxJqw0s1myRTgrzHgG5tKHS9hK+KNhjbKMXDWlHRo9eDNVVUqf147QUGYUqwyCDkFyGr2pi1qJKFMEy0ACZb0A==", + "version": "5.1.29", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.29.tgz", + "integrity": "sha512-5h/ah9PAblggQ6Laa4peplT4iY5ddA8qM1LMD4HzwToUWs3hftfy0fayeRgbtH1JZUdw5CCaowmz7Lnb8SjIxQ==", "dev": true, "dependencies": { "@types/hoist-non-react-statics": "*", diff --git a/lib/package.json b/lib/package.json index 6de81a565..0da5157a0 100644 --- a/lib/package.json +++ b/lib/package.json @@ -52,7 +52,7 @@ "@testing-library/user-event": "^13.0.0", "@types/color": "^3.0.3", "@types/react": "^18.0.18", - "@types/styled-components": "^5.1.29", + "@types/styled-components": "5.1.29", "@types/uuid": "^9.0.6", "babel-jest": "^24.8.0", "babel-loader": "^8.0.6", diff --git a/website/package-lock.json b/website/package-lock.json index f716ae60e..ed59e6208 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -8,7 +8,7 @@ "dependencies": { "@dxc-technology/halstack-react": "next", "@radix-ui/react-popover": "^1.0.7", - "@types/styled-components": "^5.1.18", + "@types/styled-components": "5.1.29", "axios": "^0.27.2", "cross-env": "^7.0.3", "next": "14.0.3", @@ -1461,9 +1461,9 @@ "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@types/styled-components": { - "version": "5.1.34", - "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", - "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==", + "version": "5.1.29", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.29.tgz", + "integrity": "sha512-5h/ah9PAblggQ6Laa4peplT4iY5ddA8qM1LMD4HzwToUWs3hftfy0fayeRgbtH1JZUdw5CCaowmz7Lnb8SjIxQ==", "dependencies": { "@types/hoist-non-react-statics": "*", "@types/react": "*", diff --git a/website/package.json b/website/package.json index 288f5a3c6..c31fc8d5e 100644 --- a/website/package.json +++ b/website/package.json @@ -10,7 +10,7 @@ "dependencies": { "@dxc-technology/halstack-react": "next", "@radix-ui/react-popover": "^1.0.7", - "@types/styled-components": "^5.1.18", + "@types/styled-components": "5.1.29", "axios": "^0.27.2", "cross-env": "^7.0.3", "next": "14.0.3", diff --git a/website/screens/components/container/ContainerPageLayout.tsx b/website/screens/components/container/ContainerPageLayout.tsx index 552e491ea..7e927e132 100644 --- a/website/screens/components/container/ContainerPageLayout.tsx +++ b/website/screens/components/container/ContainerPageLayout.tsx @@ -30,7 +30,7 @@ const containerPageHeading = ({ children }: { children: React.ReactNode }) => { inside the Halstack Design System. Is a general-purpose container that allows for controlled use of our design tokens. Being generic in nature can be "over-used", so it's important to consider - situations where more specific and expressive primitives could be + situations where more specific and expressive components could be used. , }, { diff --git a/website/screens/components/container/usage/ContainerUsagePage.tsx b/website/screens/components/container/usage/ContainerUsagePage.tsx index 9a891f4a2..afd126a89 100644 --- a/website/screens/components/container/usage/ContainerUsagePage.tsx +++ b/website/screens/components/container/usage/ContainerUsagePage.tsx @@ -1,14 +1,66 @@ -import { DxcParagraph, DxcFlex } from "@dxc-technology/halstack-react"; +import { + DxcParagraph, + DxcFlex, + DxcBulletedList, +} from "@dxc-technology/halstack-react"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; const sections = [ { - title: "Test", + title: "Usage", + content: ( + + The primary function of a container is to structure and group other + components or contents that are related to each other, allowing certain + styles of customization to obtain more cohesive and consistent + interfaces. + + ), + subSections: [ + { + title: "Do's", + content: ( + + + Use a container to group and organize related content within a + specific section of a page or layout. + + + Set size, spacing, and margins that are consistent by applying the + box model properties. + + + Control the depth of the different elements of your UI by + customizing the container’s box shadow. + + + Change and custom border styles of the container to match the rest + of your interface design. + + + ), + }, + { + title: "Don'ts", + content: ( + + + Use the container to build components without first making sure + that there is no other, more semantic, component in Halstack that + you can use instead. + + + ), + }, + ], + }, + { + title: "The Box Model", content: ( <> - Container my friend + Container my friend. ), }, From e789b44c8d89c9eb25e6f153126be5a27e809a51 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, 16 Jan 2024 14:08:03 +0100 Subject: [PATCH 10/18] Container documentation update --- .../container/usage/ContainerUsagePage.tsx | 221 +++++++++++++++++- .../usage/examples/alternateBoxModel.ts | 25 ++ .../usage/examples/defaultBoxModel.ts | 24 ++ .../container/usage/images/box_model.png | Bin 0 -> 15133 bytes .../overview/releases/ReleasesPage.tsx | 4 +- 5 files changed, 270 insertions(+), 4 deletions(-) create mode 100644 website/screens/components/container/usage/examples/alternateBoxModel.ts create mode 100644 website/screens/components/container/usage/examples/defaultBoxModel.ts create mode 100644 website/screens/components/container/usage/images/box_model.png diff --git a/website/screens/components/container/usage/ContainerUsagePage.tsx b/website/screens/components/container/usage/ContainerUsagePage.tsx index afd126a89..591439558 100644 --- a/website/screens/components/container/usage/ContainerUsagePage.tsx +++ b/website/screens/components/container/usage/ContainerUsagePage.tsx @@ -2,10 +2,20 @@ import { DxcParagraph, DxcFlex, DxcBulletedList, + DxcTable, + DxcLink, } from "@dxc-technology/halstack-react"; import DocFooter from "@/common/DocFooter"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Code from "@/common/Code"; +import Figure from "@/common/Figure"; +import Image from "@/common/Image"; +import boxModel from "./images/box_model.png"; +import Link from "next/link"; +import Example from "@/common/example/Example"; +import defaultBoxModel from "./examples/defaultBoxModel"; +import alternateBoxModel from "./examples/alternateBoxModel"; const sections = [ { @@ -33,7 +43,7 @@ const sections = [ Control the depth of the different elements of your UI by - customizing the container’s box shadow. + customizing the container's box shadow. Change and custom border styles of the container to match the rest @@ -60,9 +70,216 @@ const sections = [ title: "The Box Model", content: ( <> - Container my friend. + + Everything in CSS has a box around it. Understanding these boxes is + key to being able to create more complex layouts for your application. + In this section, we will take a look at the key aspects of the CSS Box + Model. You'll get an understanding of how it works and the terminology + that relates to it. + ), + subSections: [ + { + title: "Display types", + content: ( + <> + + Boxes have an inner display type and an outer display type. The + inner display type defines the type of formatting context that an + element participates in. The outer display type defines the type + of box used for an element. + + + ), + subSections: [ + { + title: "Outer display", + content: ( + <> + + There are two types of outer display: block{" "} + and inline. The block elements are formatted + visually as blocks. They begin on a new line and take up the + full width of the parent element. The most common examples of + block elements are div and p. Their + main characteristics are: + + + + They respect the width and height properties. + + + Padding, margin and border will cause other elements to be + pushed away from the box. + + + If width is not specified, the box will extend in the inline + direction to fill the space available in its container. In + most cases, the box will become as wide as its container, + filling up 100% of the space available. + + + If height is not specified, the box will be sized according + to its content. + + + + ), + }, + { + title: "Inner display", + content: ( + <> + + Boxes also feature an inherent display type that determines + the arrangement of elements contained within the box. In the + absence of specific instructions, the default behavior + involves arranging elements inside a box in the normal flow, + functioning either as block or inline boxes. + + + Changing the behaviour of the inner display won't affect how + the box behaves in relation to the rest of the elements in the + page. For example, if you change the inner display to{" "} + flex, the box will still behave as a block + element. + + + To change the inner display type, you must use other more + semantic components of Halstack, such as{" "} + + Flex + {" "} + or{" "} + + Grid + + . + + + ), + }, + ], + }, + { + title: "Parts of a Box", + content: ( + <> + + The CSS box model is essentially a box that wraps around every + HTML element. It consists of: margins, borders, padding, and the + actual content. The image below illustrates the box model: + +

+ A diagram with the layers of a box +
+ + + + Layer + Explanation + + + + + + Margin + + + The margin is the outermost layer, wrapping the content, + padding, and border as whitespace between this box and other + elements. You can use margin prop to style this + layer. + + + + + Border + + + The border sits between the padding and margin as a line + around the content. You can use border prop to + style this layer. + + + + + Padding + + + The padding is the space between the content and the border. + You can us padding prop to style this layer. + + + + + Content + + + The area where your content is displayed. Use properties + like width and height among others + to size this layer. + + + + + + ), + }, + { + title: "The Standard Box Model", + content: ( + <> + + The standard box model is the default behaviour of the browser to + calculate the width and height of an element. The width and height + of an element are calculated by adding the content width and + height to the padding, border, and margin of the element. + + + For example, in the container below the actual space taken up by + the box will be 324px wide (300 of content's + width + 8 of padding top + 8 of padding bottom + 4 of border top + + 4 of border bottom) and 174px high (150 of + content's height + 8 of padding top + 8 of padding bottom + 4 of + border top + 4 of border bottom). Use browser DevTools to view the + box model calculation. + + + + ), + }, + { + title: "The Alternate Box Model", + content: ( + <> + + In the alternative box model, the width corresponds + to the visible box's width on the page. The content area width is + derived by subtracting the combined width of padding and border + from this total width (refer to the image below). It is not + necessary to sum up the border and padding dimensions to ascertain + the actual size of the box. + + + To use this box model, set the boxSizing prop to{" "} + border-box. + + + For example, in the container below the actual space taken up by + the box will be 300px wide (276 of content's + width + 8 of padding top + 8 of padding bottom + 4 of border top + + 4 of border bottom) and 150px high (126 of + content's height + 8 of padding top + 8 of padding bottom + 4 of + border top + 4 of border bottom). Use browser DevTools to view the + box model calculation. + + + + ), + }, + ], }, ]; diff --git a/website/screens/components/container/usage/examples/alternateBoxModel.ts b/website/screens/components/container/usage/examples/alternateBoxModel.ts new file mode 100644 index 000000000..c06ccf534 --- /dev/null +++ b/website/screens/components/container/usage/examples/alternateBoxModel.ts @@ -0,0 +1,25 @@ +import { DxcContainer, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + +

Container with default box model "border-box"

+ + + ); +}`; + +const scope = { + DxcContainer, + DxcInset, +}; + +export default { code, scope }; diff --git a/website/screens/components/container/usage/examples/defaultBoxModel.ts b/website/screens/components/container/usage/examples/defaultBoxModel.ts new file mode 100644 index 000000000..ba94f390f --- /dev/null +++ b/website/screens/components/container/usage/examples/defaultBoxModel.ts @@ -0,0 +1,24 @@ +import { DxcContainer, DxcInset } from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + +

Container with default box model "content-box"

+ + + ); +}`; + +const scope = { + DxcContainer, + DxcInset, +}; + +export default { code, scope }; diff --git a/website/screens/components/container/usage/images/box_model.png b/website/screens/components/container/usage/images/box_model.png new file mode 100644 index 0000000000000000000000000000000000000000..39f3860308f22b4a7a89d9bf2f7884e00ea451ec GIT binary patch literal 15133 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 T21P*hK=RU;FXde@yz_qmJu{Dy literal 0 HcmV?d00001 diff --git a/website/screens/overview/releases/ReleasesPage.tsx b/website/screens/overview/releases/ReleasesPage.tsx index 37c36d27f..bbaa77ad3 100644 --- a/website/screens/overview/releases/ReleasesPage.tsx +++ b/website/screens/overview/releases/ReleasesPage.tsx @@ -102,7 +102,7 @@ const sections = [ }, ]; -const getRelasesPageSections = (releases: Release[]) => { +const getReleasesPageSections = (releases: Release[]) => { let section: Section = { title: "Release notes", subSections: [] }; releases?.forEach((release) => { section.subSections?.push({ @@ -141,7 +141,7 @@ const Releases = ({ releases }: { releases: Release[] }) => ( From f461705c52c206818f96ececb5fc8b9d7fc2b8b8 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, 16 Jan 2024 16:24:38 +0100 Subject: [PATCH 11/18] More updates to the doc --- .../components/box/usage/BoxUsagePage.tsx | 4 ++-- .../container/usage/ContainerUsagePage.tsx | 24 +++++++++++++++++++ 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/website/screens/components/box/usage/BoxUsagePage.tsx b/website/screens/components/box/usage/BoxUsagePage.tsx index 41efd3533..b6e91c4d6 100644 --- a/website/screens/components/box/usage/BoxUsagePage.tsx +++ b/website/screens/components/box/usage/BoxUsagePage.tsx @@ -20,7 +20,7 @@ const sections = [ applying the styles in the box container. - Box can be reused accros the UI, avoid using different variants in the + Box can be reused across the UI, avoid using different variants in the same page. @@ -38,7 +38,7 @@ const sections = [ The shadow-default and shadow-high variants - can be used to create clear distictions between sections of content + can be used to create clear distinctions between sections of content without the use of borders or separators, the no-shadow{" "} helps in the process of building the layout. Note that when an application background-color other than white is used, diff --git a/website/screens/components/container/usage/ContainerUsagePage.tsx b/website/screens/components/container/usage/ContainerUsagePage.tsx index 591439558..bcfa4242f 100644 --- a/website/screens/components/container/usage/ContainerUsagePage.tsx +++ b/website/screens/components/container/usage/ContainerUsagePage.tsx @@ -124,6 +124,30 @@ const sections = [ to its content. + + The inline elements are formatted visually as inline elements + (like span). They do not start on a new line and + only take up as much width as necessary. Their main + characteristics are: + + + + They do not respect the width and height properties. + + + Padding, margin and border will not cause other elements to + be pushed away from the box. + + + If width is not specified, the box will shrink to fit its + content. + + + Padding, margins, and borders on the left and right sides + will take effect, resulting in the displacement of adjacent + inline boxes away from the current box. + + ), }, From dc9ac8a596542e596b3e6f6230e89b29dcbe728a 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, 16 Jan 2024 17:34:27 +0100 Subject: [PATCH 12/18] Container documentation updates --- .../container/usage/ContainerUsagePage.tsx | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/website/screens/components/container/usage/ContainerUsagePage.tsx b/website/screens/components/container/usage/ContainerUsagePage.tsx index bcfa4242f..c0eebc04a 100644 --- a/website/screens/components/container/usage/ContainerUsagePage.tsx +++ b/website/screens/components/container/usage/ContainerUsagePage.tsx @@ -85,10 +85,10 @@ const sections = [ content: ( <> - Boxes have an inner display type and an outer display type. The - inner display type defines the type of formatting context that an - element participates in. The outer display type defines the type - of box used for an element. + In general, you can set various values for the display type using + the display property. Before using each of them, it + is crucial to comprehend their individual characteristics and + behaviors. ), @@ -126,9 +126,9 @@ const sections = [ The inline elements are formatted visually as inline elements - (like span). They do not start on a new line and - only take up as much width as necessary. Their main - characteristics are: + (like span or a). They do not start + on a new line and only take up as much width as necessary. + Their main characteristics are: @@ -143,11 +143,18 @@ const sections = [ content. - Padding, margins, and borders on the left and right sides - will take effect, resulting in the displacement of adjacent - inline boxes away from the current box. + When padding, margins, and borders are applied to the left + and right sides, they cause the displacement of nearby + inline boxes, influencing their position relative to the + current box. + + The Container component allows you to change + this type of display, so use it carefully and try to fully + understand its connotations before applying one value or + another. + ), }, @@ -156,8 +163,8 @@ const sections = [ content: ( <> - Boxes also feature an inherent display type that determines - the arrangement of elements contained within the box. In the + Boxes also feature an inner display type that determines the + arrangement of elements contained within the box. In the absence of specific instructions, the default behavior involves arranging elements inside a box in the normal flow, functioning either as block or inline boxes. @@ -171,7 +178,7 @@ const sections = [ To change the inner display type, you must use other more - semantic components of Halstack, such as{" "} + semantic components of Halstack, such as the{" "} Flex {" "} @@ -191,9 +198,10 @@ const sections = [ content: ( <> - The CSS box model is essentially a box that wraps around every - HTML element. It consists of: margins, borders, padding, and the - actual content. The image below illustrates the box model: + The CSS box model serves as a container enveloping each HTML + element. It comprises four distinct layers: margins, borders, + padding, and the actual content. The illustration below visually + delineates each of these layers:
A diagram with the layers of a box From 9c347c5c4a9f9c33f6f14d605cf139adac15d774 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, 17 Jan 2024 12:35:25 +0100 Subject: [PATCH 13/18] Container updates based on feecback --- lib/src/container/Container.stories.tsx | 5 +++++ lib/src/container/Container.tsx | 27 +++++++++++++++---------- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/lib/src/container/Container.stories.tsx b/lib/src/container/Container.stories.tsx index 7df80426c..5839380e1 100644 --- a/lib/src/container/Container.stories.tsx +++ b/lib/src/container/Container.stories.tsx @@ -20,6 +20,11 @@ export const Chromatic = () => ( height="200px" background={{ color: "color_purple_400" }} border={{ + top: { + width: "2px", + color: "color_blue_600", + style: "solid", + }, bottom: { width: "thick", color: "color_purple_600", diff --git a/lib/src/container/Container.tsx b/lib/src/container/Container.tsx index 4ff3394a2..a6a72267e 100644 --- a/lib/src/container/Container.tsx +++ b/lib/src/container/Container.tsx @@ -27,7 +27,7 @@ const DxcContainer = ({ display, width, height, overflow, ...props }: ContainerP const getBorderStyles = (direction: "top" | "bottom" | "left" | "right", borderProperties: BorderProperties) => `border-${direction}: ${borderProperties?.width ?? ""} ${borderProperties?.style ?? ""} ${ getCoreColorToken(borderProperties?.color) ?? "" - }`; + };`; const Container = styled.div` box-sizing: ${({ boxSizing }) => boxSizing}; @@ -60,17 +60,22 @@ const Container = styled.div` border-width: ${({ border }) => (border && "width" in border ? `${border?.width}` : "")}; border-style: ${({ border }) => (border && "style" in border ? `${border?.style}` : "")}; border-width: ${({ border }) => (border && "color" in border ? `${getCoreColorToken(border?.color)}` : "")}; + ${({ border }) => { - if (border != null) - return "top" in border - ? getBorderStyles("top", border.top) - : "right" in border - ? getBorderStyles("right", border.right) - : "left" in border - ? getBorderStyles("left", border.left) - : "bottom" in border - ? getBorderStyles("bottom", border.bottom) - : ""; + if (border != null) { + let styles = ""; + switch (true) { + case "top" in border: + styles += getBorderStyles("top", border.top); + case "right" in border: + styles += getBorderStyles("right", border.right); + case "left" in border: + styles += getBorderStyles("left", border.left); + case "bottom" in border: + styles += getBorderStyles("bottom", border.bottom); + } + return styles; + } }}; margin: ${({ margin }) => (typeof margin === "string" ? spaces[margin] : "")}; From 65f550b84deb077cbd6010c98c55fc2560b17e75 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, 17 Jan 2024 16:10:23 +0100 Subject: [PATCH 14/18] Update typescript version --- lib/package-lock.json | 10 +++++----- lib/package.json | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/package-lock.json b/lib/package-lock.json index 56abe1717..77f7009aa 100644 --- a/lib/package-lock.json +++ b/lib/package-lock.json @@ -57,7 +57,7 @@ "storybook": "^7.5.3", "storybook-addon-pseudo-states": "^2.1.2", "styled-components": "^5.0.1", - "typescript": "^4.5.4" + "typescript": "^5.3.3" }, "peerDependencies": { "react": "^18.x", @@ -23994,16 +23994,16 @@ "dev": true }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/uglify-js": { diff --git a/lib/package.json b/lib/package.json index 0da5157a0..59bf9d700 100644 --- a/lib/package.json +++ b/lib/package.json @@ -74,7 +74,7 @@ "storybook": "^7.5.3", "storybook-addon-pseudo-states": "^2.1.2", "styled-components": "^5.0.1", - "typescript": "^4.5.4" + "typescript": "^5.3.3" }, "jest": { "moduleNameMapper": { From fea21093cca40d5e0f3f5f23e305ae9688a711a5 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: Thu, 18 Jan 2024 12:21:49 +0100 Subject: [PATCH 15/18] Container code page updated based on feedback --- .../container/code/ContainerCodePage.tsx | 46 ++++++++++++++++++- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/website/screens/components/container/code/ContainerCodePage.tsx b/website/screens/components/container/code/ContainerCodePage.tsx index 643995bce..0b4b515fb 100644 --- a/website/screens/components/container/code/ContainerCodePage.tsx +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -13,6 +13,7 @@ import TableCode, { ExtendedTableCode } from "@/common/TableCode"; import Example from "@/common/example/Example"; import basicUsage from "./examples/basicUsage"; import listbox from "./examples/listbox"; +import Link from "next/link"; const backgroundTypeString = `{ attachment?: string; @@ -68,10 +69,29 @@ const sections = [ background {backgroundTypeString} +

+ being CoreColorTokens the color tokens provided by + Halstack Design System. See our{" "} + + Color palette + {" "} + for further knowledge. +

Based on the CSS property background allows configuring - all properties related to the background of a container. + all properties related to the background of a container. See{" "} + + MDN + {" "} + for further information. - @@ -459,7 +479,29 @@ const sections = [ }, { title: "Building a listbox", - content: , + content: ( + <> + + This code provides an illustration of a custom component created + exclusively with the DxcContainer.{" "} + You should not copy this code, but use instead + our DxcSelect. + + + It is imperative to exclusively utilize Halstack components for + optimal compatibility and adherence to our development standards. + In case you do not find one that fits your needs, please{" "} + + reach out to our development team + {" "} + first to discuss your particular situation. + + + + ), }, ], }, From fb49086804d92d31cbfd0b14acbe56b42e660c8e 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: Thu, 18 Jan 2024 12:29:23 +0100 Subject: [PATCH 16/18] Container Usage page update --- .../screens/components/container/usage/ContainerUsagePage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/screens/components/container/usage/ContainerUsagePage.tsx b/website/screens/components/container/usage/ContainerUsagePage.tsx index c0eebc04a..85712412a 100644 --- a/website/screens/components/container/usage/ContainerUsagePage.tsx +++ b/website/screens/components/container/usage/ContainerUsagePage.tsx @@ -177,8 +177,8 @@ const sections = [ element. - To change the inner display type, you must use other more - semantic components of Halstack, such as the{" "} + To change the inner display type, you must use other and more + semantic layout components of Halstack, such as the{" "} Flex {" "} From b0e6f398e20acd77cc4f990967d1b711ad4e2b15 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: Thu, 18 Jan 2024 16:23:18 +0100 Subject: [PATCH 17/18] Updates based on feedback --- .../container/ContainerPageLayout.tsx | 18 +- .../container/usage/ContainerUsagePage.tsx | 312 ++++-------------- 2 files changed, 72 insertions(+), 258 deletions(-) diff --git a/website/screens/components/container/ContainerPageLayout.tsx b/website/screens/components/container/ContainerPageLayout.tsx index 7e927e132..5b1c45707 100644 --- a/website/screens/components/container/ContainerPageLayout.tsx +++ b/website/screens/components/container/ContainerPageLayout.tsx @@ -2,7 +2,6 @@ import { DxcParagraph, DxcFlex, DxcAlert, - DxcLink, } from "@dxc-technology/halstack-react"; import PageHeading from "@/common/PageHeading"; import TabsPageHeading from "@/common/TabsPageLayout"; @@ -20,18 +19,11 @@ const containerPageHeading = ({ children }: { children: React.ReactNode }) => { - The container component represents{" "} - - the box model - {" "} - inside the Halstack Design System. Is a general-purpose container - that allows for controlled use of our design tokens. Being generic - in nature can be "over-used", so it's important to consider - situations where more specific and expressive components could be - used. + The container component represents the box model inside the Halstack + Design System. Is a general-purpose container that allows for + controlled use of our design tokens. Being generic in nature can be + "over-used", so it's important to consider situations where more + specific and expressive components could be used. Everything in CSS has a box around it. Understanding these boxes is key to being able to create more complex layouts for your application. - In this section, we will take a look at the key aspects of the CSS Box - Model. You'll get an understanding of how it works and the terminology - that relates to it. + + Below, we share a series of links that we consider essential to + understand and use the Container component correctly. If you are not + acquainted with these concepts, we strongly recommend taking a moment + to review them: + + + + The CSS Box Model + + + + MDN + + + + + web.dev + + , by Google. + + + + + + Backgrounds and borders + + + + + Overflowing content + + + + + Sizing items in CSS + + + + + Mastering margin collapsing + + + + + Positioning + + + ), - subSections: [ - { - title: "Display types", - content: ( - <> - - In general, you can set various values for the display type using - the display property. Before using each of them, it - is crucial to comprehend their individual characteristics and - behaviors. - - - ), - subSections: [ - { - title: "Outer display", - content: ( - <> - - There are two types of outer display: block{" "} - and inline. The block elements are formatted - visually as blocks. They begin on a new line and take up the - full width of the parent element. The most common examples of - block elements are div and p. Their - main characteristics are: - - - - They respect the width and height properties. - - - Padding, margin and border will cause other elements to be - pushed away from the box. - - - If width is not specified, the box will extend in the inline - direction to fill the space available in its container. In - most cases, the box will become as wide as its container, - filling up 100% of the space available. - - - If height is not specified, the box will be sized according - to its content. - - - - The inline elements are formatted visually as inline elements - (like span or a). They do not start - on a new line and only take up as much width as necessary. - Their main characteristics are: - - - - They do not respect the width and height properties. - - - Padding, margin and border will not cause other elements to - be pushed away from the box. - - - If width is not specified, the box will shrink to fit its - content. - - - When padding, margins, and borders are applied to the left - and right sides, they cause the displacement of nearby - inline boxes, influencing their position relative to the - current box. - - - - The Container component allows you to change - this type of display, so use it carefully and try to fully - understand its connotations before applying one value or - another. - - - ), - }, - { - title: "Inner display", - content: ( - <> - - Boxes also feature an inner display type that determines the - arrangement of elements contained within the box. In the - absence of specific instructions, the default behavior - involves arranging elements inside a box in the normal flow, - functioning either as block or inline boxes. - - - Changing the behaviour of the inner display won't affect how - the box behaves in relation to the rest of the elements in the - page. For example, if you change the inner display to{" "} - flex, the box will still behave as a block - element. - - - To change the inner display type, you must use other and more - semantic layout components of Halstack, such as the{" "} - - Flex - {" "} - or{" "} - - Grid - - . - - - ), - }, - ], - }, - { - title: "Parts of a Box", - content: ( - <> - - The CSS box model serves as a container enveloping each HTML - element. It comprises four distinct layers: margins, borders, - padding, and the actual content. The illustration below visually - delineates each of these layers: - -
- A diagram with the layers of a box -
- - - - Layer - Explanation - - - - - - Margin - - - The margin is the outermost layer, wrapping the content, - padding, and border as whitespace between this box and other - elements. You can use margin prop to style this - layer. - - - - - Border - - - The border sits between the padding and margin as a line - around the content. You can use border prop to - style this layer. - - - - - Padding - - - The padding is the space between the content and the border. - You can us padding prop to style this layer. - - - - - Content - - - The area where your content is displayed. Use properties - like width and height among others - to size this layer. - - - - - - ), - }, - { - title: "The Standard Box Model", - content: ( - <> - - The standard box model is the default behaviour of the browser to - calculate the width and height of an element. The width and height - of an element are calculated by adding the content width and - height to the padding, border, and margin of the element. - - - For example, in the container below the actual space taken up by - the box will be 324px wide (300 of content's - width + 8 of padding top + 8 of padding bottom + 4 of border top + - 4 of border bottom) and 174px high (150 of - content's height + 8 of padding top + 8 of padding bottom + 4 of - border top + 4 of border bottom). Use browser DevTools to view the - box model calculation. - - - - ), - }, - { - title: "The Alternate Box Model", - content: ( - <> - - In the alternative box model, the width corresponds - to the visible box's width on the page. The content area width is - derived by subtracting the combined width of padding and border - from this total width (refer to the image below). It is not - necessary to sum up the border and padding dimensions to ascertain - the actual size of the box. - - - To use this box model, set the boxSizing prop to{" "} - border-box. - - - For example, in the container below the actual space taken up by - the box will be 300px wide (276 of content's - width + 8 of padding top + 8 of padding bottom + 4 of border top + - 4 of border bottom) and 150px high (126 of - content's height + 8 of padding top + 8 of padding bottom + 4 of - border top + 4 of border bottom). Use browser DevTools to view the - box model calculation. - - - - ), - }, - ], }, ]; From 372999b36d58eae25d5b5ac5605c6ff51575719a 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: Thu, 18 Jan 2024 16:35:25 +0100 Subject: [PATCH 18/18] Removing unused dependencies --- website/package-lock.json | 193 +++++++++++++------------------------- website/package.json | 4 +- 2 files changed, 66 insertions(+), 131 deletions(-) diff --git a/website/package-lock.json b/website/package-lock.json index ed59e6208..6c8dff02b 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -9,7 +9,6 @@ "@dxc-technology/halstack-react": "next", "@radix-ui/react-popover": "^1.0.7", "@types/styled-components": "5.1.29", - "axios": "^0.27.2", "cross-env": "^7.0.3", "next": "14.0.3", "raw-loader": "^4.0.2", @@ -23,12 +22,11 @@ "styled-components": "^5.3.3" }, "devDependencies": { - "@types/node": "18.18.2", "@types/react": "18.2.0", "@types/react-color": "^3.0.6", "eslint": "8.5.0", "eslint-config-next": "14.0.3", - "typescript": "4.5.4" + "typescript": "^5.3.3" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -615,9 +613,9 @@ } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.5.tgz", - "integrity": "sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==", + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.6.tgz", + "integrity": "sha512-IB8aCRFxr8nFkdYZgH+Otd9EVQPJoynxeFRGTB8voPoZMRWo8XjYuCRgpI1btvuKY69XMiLnW+ym7zoBHM90Rw==", "dependencies": { "@floating-ui/dom": "^1.5.4" }, @@ -704,9 +702,9 @@ "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.20", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz", - "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==", + "version": "0.3.21", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.21.tgz", + "integrity": "sha512-SRfKmRe1KvYnxjEMtxEr+J4HIeMX5YBg/qhRHpxEIGjhX1rshcHlnFUE9K0GazhVKWM7B+nARSkV8LuvJdJ5/g==", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" @@ -1320,9 +1318,9 @@ } }, "node_modules/@rushstack/eslint-patch": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz", - "integrity": "sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==", + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.0.tgz", + "integrity": "sha512-Jh4t/593gxs0lJZ/z3NnasKlplXT2f+4y/LZYuaKZW5KAaiVFL/fThhs+17EbUd53jUVJ0QudYCBGbN/psvaqg==", "dev": true }, "node_modules/@swc/helpers": { @@ -1419,7 +1417,8 @@ "node_modules/@types/node": { "version": "18.18.2", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.18.2.tgz", - "integrity": "sha512-u1cis+7wLZMPI62EozwsqvgMZyauczyiqRRu/vcqZKI5N5yidrJHqOFxEg5seT8adc96Q6Yczg1c0DlqGtMJMw==" + "integrity": "sha512-u1cis+7wLZMPI62EozwsqvgMZyauczyiqRRu/vcqZKI5N5yidrJHqOFxEg5seT8adc96Q6Yczg1c0DlqGtMJMw==", + "peer": true }, "node_modules/@types/prop-types": { "version": "15.7.11", @@ -1476,15 +1475,15 @@ "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==" }, "node_modules/@typescript-eslint/parser": { - "version": "6.18.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.18.1.tgz", - "integrity": "sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==", + "version": "6.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.19.0.tgz", + "integrity": "sha512-1DyBLG5SH7PYCd00QlroiW60YJ4rWMuUGa/JBV0iZuqi4l4IK3twKPq5ZkEebmGqRjXWVgsUzfd3+nZveewgow==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "6.18.1", - "@typescript-eslint/types": "6.18.1", - "@typescript-eslint/typescript-estree": "6.18.1", - "@typescript-eslint/visitor-keys": "6.18.1", + "@typescript-eslint/scope-manager": "6.19.0", + "@typescript-eslint/types": "6.19.0", + "@typescript-eslint/typescript-estree": "6.19.0", + "@typescript-eslint/visitor-keys": "6.19.0", "debug": "^4.3.4" }, "engines": { @@ -1504,13 +1503,13 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "6.18.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.1.tgz", - "integrity": "sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==", + "version": "6.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.19.0.tgz", + "integrity": "sha512-dO1XMhV2ehBI6QN8Ufi7I10wmUovmLU0Oru3n5LVlM2JuzB4M+dVphCPLkVpKvGij2j/pHBWuJ9piuXx+BhzxQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.18.1", - "@typescript-eslint/visitor-keys": "6.18.1" + "@typescript-eslint/types": "6.19.0", + "@typescript-eslint/visitor-keys": "6.19.0" }, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -1521,9 +1520,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "6.18.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.1.tgz", - "integrity": "sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==", + "version": "6.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.19.0.tgz", + "integrity": "sha512-lFviGV/vYhOy3m8BJ/nAKoAyNhInTdXpftonhWle66XHAtT1ouBlkjL496b5H5hb8dWXHwtypTqgtb/DEa+j5A==", "dev": true, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -1534,13 +1533,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "6.18.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.1.tgz", - "integrity": "sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==", + "version": "6.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.19.0.tgz", + "integrity": "sha512-o/zefXIbbLBZ8YJ51NlkSAt2BamrK6XOmuxSR3hynMIzzyMY33KuJ9vuMdFSXW+H0tVvdF9qBPTHA91HDb4BIQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.18.1", - "@typescript-eslint/visitor-keys": "6.18.1", + "@typescript-eslint/types": "6.19.0", + "@typescript-eslint/visitor-keys": "6.19.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -1586,12 +1585,12 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "6.18.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.1.tgz", - "integrity": "sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==", + "version": "6.19.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.19.0.tgz", + "integrity": "sha512-hZaUCORLgubBvtGpp1JEFEazcuEdfxta9j4iUwdSAr7mEsYYAp3EAUyCZk3VEEqGj6W+AV4uWyrDGtrlawAsgQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.18.1", + "@typescript-eslint/types": "6.19.0", "eslint-visitor-keys": "^3.4.1" }, "engines": { @@ -2034,11 +2033,6 @@ "has-symbols": "^1.0.3" } }, - "node_modules/asynckit": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" - }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -2060,15 +2054,6 @@ "node": ">=4" } }, - "node_modules/axios": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", - "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", - "dependencies": { - "follow-redirects": "^1.14.9", - "form-data": "^4.0.0" - } - }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -2286,9 +2271,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001576", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz", - "integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==", + "version": "1.0.30001579", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz", + "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==", "funding": [ { "type": "opencollective", @@ -2374,17 +2359,6 @@ "simple-swizzle": "^0.2.2" } }, - "node_modules/combined-stream": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", - "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dependencies": { - "delayed-stream": "~1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/comma-separated-tokens": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", @@ -2561,14 +2535,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/delayed-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "engines": { - "node": ">=0.4.0" - } - }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -2624,9 +2590,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.628", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.628.tgz", - "integrity": "sha512-2k7t5PHvLsufpP6Zwk0nof62yLOsCf032wZx7/q0mv8gwlXjhcxI3lz6f0jBr0GrnWKcm3burXzI3t5IrcdUxw==", + "version": "1.4.637", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.637.tgz", + "integrity": "sha512-G7j3UCOukFtxVO1vWrPQUoDk3kL70mtvjc/DC/k2o7lE0wAdq+Vwp1ipagOow+BH0uVztFysLWbkM/RTIrbK3w==", "peer": true }, "node_modules/emoji-regex": { @@ -3367,25 +3333,6 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, - "node_modules/follow-redirects": { - "version": "1.15.4", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz", - "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==", - "funding": [ - { - "type": "individual", - "url": "https://github.com/sponsors/RubenVerborgh" - } - ], - "engines": { - "node": ">=4.0" - }, - "peerDependenciesMeta": { - "debug": { - "optional": true - } - } - }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -3395,19 +3342,6 @@ "is-callable": "^1.1.3" } }, - "node_modules/form-data": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", - "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "dependencies": { - "asynckit": "^0.4.0", - "combined-stream": "^1.0.8", - "mime-types": "^2.1.12" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -4929,6 +4863,7 @@ "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "peer": true, "engines": { "node": ">= 0.6" } @@ -4937,6 +4872,7 @@ "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "peer": true, "dependencies": { "mime-db": "1.52.0" }, @@ -5825,13 +5761,13 @@ } }, "node_modules/safe-array-concat": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz", - "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz", + "integrity": "sha512-ZdQ0Jeb9Ofti4hbt5lX3T2JcAamT9hfzYU1MNB+z/jaEbB6wfFfPIR/zEORmZqobkCCJhSjodobH6WHNmJ97dg==", "dev": true, "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.2.1", + "call-bind": "^1.0.5", + "get-intrinsic": "^1.2.2", "has-symbols": "^1.0.3", "isarray": "^2.0.5" }, @@ -5863,9 +5799,9 @@ "peer": true }, "node_modules/safe-regex-test": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.1.tgz", - "integrity": "sha512-Y5NejJTTliTyY4H7sipGqY+RX5P87i3F7c4Rcepy72nq+mNLhIsD0W4c7kEmduMDQCSqtPsXPlSTsFhh2LQv+g==", + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.2.tgz", + "integrity": "sha512-83S9w6eFq12BBIJYvjMux6/dkirb8+4zJRA9cxNBVb7Wq5fJBW+Xze48WqR8pxua7bDuAaaAxtVVd4Idjp1dBQ==", "dev": true, "dependencies": { "call-bind": "^1.0.5", @@ -5929,15 +5865,16 @@ } }, "node_modules/set-function-length": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz", - "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.0.tgz", + "integrity": "sha512-4DBHDoyHlM1IRPGYcoxexgh67y4ueR53FKV1yyxwFMY7aCqcN/38M1+SwZ/qJQ8iLv7+ck385ot4CcisOAPT9w==", "dev": true, "dependencies": { "define-data-property": "^1.1.1", - "get-intrinsic": "^1.2.1", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.2", "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.0" + "has-property-descriptors": "^1.0.1" }, "engines": { "node": ">= 0.4" @@ -6279,9 +6216,9 @@ } }, "node_modules/terser": { - "version": "5.26.0", - "resolved": "https://registry.npmjs.org/terser/-/terser-5.26.0.tgz", - "integrity": "sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==", + "version": "5.27.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz", + "integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==", "peer": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", @@ -6510,16 +6447,16 @@ } }, "node_modules/typescript": { - "version": "4.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz", - "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==", + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/unbox-primitive": { diff --git a/website/package.json b/website/package.json index c31fc8d5e..eca505fec 100644 --- a/website/package.json +++ b/website/package.json @@ -11,7 +11,6 @@ "@dxc-technology/halstack-react": "next", "@radix-ui/react-popover": "^1.0.7", "@types/styled-components": "5.1.29", - "axios": "^0.27.2", "cross-env": "^7.0.3", "next": "14.0.3", "raw-loader": "^4.0.2", @@ -25,12 +24,11 @@ "styled-components": "^5.3.3" }, "devDependencies": { - "@types/node": "18.18.2", "@types/react": "18.2.0", "@types/react-color": "^3.0.6", "eslint": "8.5.0", "eslint-config-next": "14.0.3", - "typescript": "4.5.4" + "typescript": "^5.3.3" }, "resolutions": { "@types/react": "18.2.0",