diff --git a/lib/package-lock.json b/lib/package-lock.json index 899bf2401..77f7009aa 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", @@ -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", @@ -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": "*", @@ -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 6de81a565..59bf9d700 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", @@ -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": { diff --git a/lib/src/container/Container.stories.tsx b/lib/src/container/Container.stories.tsx index 732f93b9d..5839380e1 100644 --- a/lib/src/container/Container.stories.tsx +++ b/lib/src/container/Container.stories.tsx @@ -20,14 +20,18 @@ 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", style: "solid", - leftRadius: "0.25rem", - rightRadius: "0.25rem", }, }} + borderRadius="0 0 0.25rem 0.25rem" padding="medium" margin="large" > @@ -52,7 +56,8 @@ export const Chromatic = () => ( @@ -78,7 +83,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 @@ -178,6 +183,15 @@ export const Chromatic = () => ( + + <ExampleContainer> + <DxcContainer + outline={{ color: "color_blue_400", style: "solid", offset: "2px" }} + border={{ top: { style: "solid" } }} + > + Example text + </DxcContainer> + </ExampleContainer> </ExampleContainer> </> ); @@ -186,7 +200,8 @@ const Listbox = ({ suggestions = [] }: { suggestions: string[] }): JSX.Element = <DxcContainer boxSizing="border-box" boxShadow="0 4px 6px -1px rgba(0, 0, 0, 0.1)" - border={{ width: "1px", style: "solid", color: "color_grey_400", radius: "0.25rem" }} + border={{ width: "1px", style: "solid", color: "color_grey_400" }} + borderRadius="0.25rem" background={{ color: "color_white" }} padding={{ top: "xxsmall", bottom: "xxsmall" }} maxHeight="304px" diff --git a/lib/src/container/Container.tsx b/lib/src/container/Container.tsx index ee6ae8ff9..a6a72267e 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,57 @@ 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) { + 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] : "")}; 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..6c8dff02b 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -6,10 +6,9 @@ "": { "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", + "@types/styled-components": "5.1.29", "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": { @@ -126,21 +124,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 +163,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 +199,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 +356,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 +434,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 +459,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 +483,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 +511,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 +524,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 +596,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.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.1" + "@floating-ui/dom": "^1.5.4" }, "peerDependencies": { "react": ">=16.8.0", @@ -627,9 +625,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", @@ -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.0", - "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.0.tgz", - "integrity": "sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA==", + "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": { @@ -1350,9 +1348,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 +1374,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" } @@ -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", @@ -1437,9 +1436,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 +1446,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 +1460,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.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": "*", @@ -1476,15 +1475,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.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.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.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.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.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.13.1", - "@typescript-eslint/visitor-keys": "6.13.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.13.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.13.1.tgz", - "integrity": "sha512-gjeEskSmiEKKFIbnhDXUyiqVma1gRCQNbVZ1C8q7Zjcxh3WZMbzWVfGE9rHfWd1msQtPS0BVD9Jz9jded44eKg==", + "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,16 +1533,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.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.13.1", - "@typescript-eslint/visitor-keys": "6.13.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", + "minimatch": "9.0.3", "semver": "^7.5.4", "ts-api-utils": "^1.0.1" }, @@ -1560,13 +1560,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.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.13.1", + "@typescript-eslint/types": "6.19.0", "eslint-visitor-keys": "^3.4.1" }, "engines": { @@ -1736,9 +1760,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" }, @@ -2009,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", @@ -2035,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", @@ -2114,9 +2124,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 +2143,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 +2271,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.30001579", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz", + "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==", "funding": [ { "type": "opencollective", @@ -2349,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", @@ -2398,9 +2397,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 +2455,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", @@ -2536,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", @@ -2599,9 +2590,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.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": { @@ -2938,9 +2929,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 +2950,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 +3281,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" @@ -3342,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", @@ -3370,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", @@ -3529,9 +3488,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" @@ -4904,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" } @@ -4912,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" }, @@ -5027,9 +4988,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 +5020,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 +5572,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", @@ -5800,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" }, @@ -5838,15 +5799,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.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.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,24 +5856,25 @@ } }, "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" } }, "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" @@ -6251,9 +6216,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.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", @@ -6269,16 +6234,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 +6329,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", @@ -6482,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": { @@ -6685,9 +6650,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..eca505fec 100644 --- a/website/package.json +++ b/website/package.json @@ -8,10 +8,9 @@ "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", + "@types/styled-components": "5.1.29", "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", 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 ( + <> + <Head> + <title>Container — Halstack Design System + + + + ); +}; + +Usage.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +export default Usage; 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 ( + <> + + Container Usage — 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/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/ContainerPageLayout.tsx b/website/screens/components/container/ContainerPageLayout.tsx new file mode 100644 index 000000000..5b1c45707 --- /dev/null +++ b/website/screens/components/container/ContainerPageLayout.tsx @@ -0,0 +1,41 @@ +import { + DxcParagraph, + DxcFlex, + DxcAlert, +} 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" }, + { label: "Usage", path: "/components/container/usage" }, + ]; + + 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 components 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..0b4b515fb --- /dev/null +++ b/website/screens/components/container/code/ContainerCodePage.tsx @@ -0,0 +1,524 @@ +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"; +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; + clip?: string; + color?: CoreColorTokens; + image?: string; + origin?: string; + position?: string; + repeat?: string; + size?: string; +}`; +const borderTypeString = `BorderProperties | { + top?: BorderProperties; + right?: BorderProperties; + bottom?: BorderProperties; + left?: BorderProperties; +}`; +const borderPropertiesTypeString = `{ + 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 + + + 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. See{" "} + + MDN + {" "} + for further information. + + - + + + border + + + {borderTypeString} +

+ being BorderProperties an object with the following + properties: +

+ + {borderPropertiesTypeString} + +

+ and 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. + + - + + + borderRadius + + string + + + Sets the border-radius CSS property. See{" "} + + MDN + {" "} + for further information. + + - + + + 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 + + + Sets the height CSS property. See{" "} + + MDN + {" "} + for further information. + + + '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' + + + + 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", + subSections: [ + { + title: "Basic usage", + content: , + }, + { + title: "Building a listbox", + 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. + + + + ), + }, + ], + }, +]; + +const ImageCodePage = () => { + return ( + + + + + + + ); +}; + +export default ImageCodePage; 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..eb23c6ae4 --- /dev/null +++ b/website/screens/components/container/usage/ContainerUsagePage.tsx @@ -0,0 +1,154 @@ +import { + DxcParagraph, + DxcFlex, + DxcBulletedList, + DxcLink, +} from "@dxc-technology/halstack-react"; +import DocFooter from "@/common/DocFooter"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; + +const sections = [ + { + 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: ( + <> + + Everything in CSS has a box around it. Understanding these boxes is + key to being able to create more complex layouts for your application. + + + 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 + + + + + ), + }, +]; + +const ContainerUsagePage = () => { + return ( + + + + + + + ); +}; + +export default ContainerUsagePage; 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 000000000..39f386030 Binary files /dev/null and b/website/screens/components/container/usage/images/box_model.png differ 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[] }) => ( 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