New Container component documentation

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",

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 = () => (
       <DxcContainer
         position="relative"
         width="fit-content"
-        border={{ color: "color_purple_400", width: "2px", style: "dashed", radius: "4px" }}
+        border={{ color: "color_purple_400", width: "2px", style: "dashed" }}
+        borderRadius="0.25rem"
         margin={{ bottom: "xxlarge" }}
       >
         <DxcContainer display="inline-block" background={{ color: "color_purple_400" }} width="50px" height="50px">
@@ -78,7 +83,8 @@ export const Chromatic = () => (
     <ExampleContainer>
       <DxcContainer
         width="fit-content"
-        border={{ color: "color_purple_400", width: "2px", style: "dashed", radius: "4px" }}
+        border={{ color: "color_purple_400", width: "2px", style: "dashed" }}
+        borderRadius="0.25rem"
       >
         <DxcContainer
           background={{ color: "color_purple_400" }}
@@ -146,7 +152,6 @@ export const Chromatic = () => (
         padding="medium"
         outline={{ width: "1px", style: "solid", color: "color_black" }}
         boxShadow="10px 5px 5px #fe0123"
-        opacity="0.75"
       >
         <p style={{ margin: 0 }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis, sapien vitae aliquam lacinia, nisl
@@ -178,6 +183,15 @@ export const Chromatic = () => (
       <ExampleContainer>
         <Listbox suggestions={["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"]} />
       </ExampleContainer>
+      <Title title="Border and outline" level={4} />
+      <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"

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;

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;