- border
-
-
- {borderTypeString}
+
+
+ Name
+ Type
+ Description
+ Default
+
+
+
+
+ background
+
+ {backgroundTypeString}
+
+
+ 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'
+
+
+
+ children
+
+ 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
+
+ string | Space
+
+ being Space an object with the following properties:
+
+ {spaceTypeString}
+
+ Size of the margin to be applied to the container.
+ -
+
+
+ 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 BorderProperties an object with the following properties:
+ being OverflowValues an enum with the following possible values:
- {borderPropertiesTypeString}
+ 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'
+
+
+ Sets the overflow CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+
+
+ 'visible'
+
+
+
+ padding
+
+ string | Space
- and LineStyleValues an enum with the following possible values:
+ being Space an object with the following properties:
-
- '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'
-
-
-
-
-
-
-
-
- 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'
-
-
+ {spaceTypeString}
+
+ Size of the padding to be applied to the container.
+ -
+
+
+ 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'
+
+
+
),
},
@@ -408,8 +413,8 @@ const sections = [
<>
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.
+ DxcContainer. You should not copy this code , use our DxcSelect{" "}
+ instead.
It is imperative to exclusively utilize Halstack components for optimal compatibility and adherence to our
@@ -417,7 +422,7 @@ const sections = [
reach out to our development team
{" "}
- first to discuss your particular situation.
+ first to discuss your particular scenario.
Example text
diff --git a/apps/website/screens/components/container/code/examples/listbox.ts b/apps/website/screens/components/container/code/examples/listbox.ts
index 07a861df6d..00953231f0 100644
--- a/apps/website/screens/components/container/code/examples/listbox.ts
+++ b/apps/website/screens/components/container/code/examples/listbox.ts
@@ -6,28 +6,38 @@ const code = `() => {
return (
{suggestions.map((suggestion, index) => (
-
+
-
+
{suggestion}
diff --git a/apps/website/screens/components/container/overview/examples/alternateBoxModel.ts b/apps/website/screens/components/container/overview/examples/alternateBoxModel.ts
deleted file mode 100644
index c06ccf534c..0000000000
--- a/apps/website/screens/components/container/overview/examples/alternateBoxModel.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-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/apps/website/screens/components/container/overview/examples/defaultBoxModel.ts b/apps/website/screens/components/container/overview/examples/defaultBoxModel.ts
deleted file mode 100644
index ba94f390fc..0000000000
--- a/apps/website/screens/components/container/overview/examples/defaultBoxModel.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-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/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts b/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts
index 7c7bdbb6a6..cd3b7b9d0c 100644
--- a/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts
+++ b/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts
@@ -22,7 +22,7 @@ const code = `() => {
{
id: "Row 2",
complete: 51,
- expandedContent:
+ expandedContent:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet vulputate augue, non cursus justo eleifend non.
Nam ante erat, finibus at tincidunt ut, convallis sed tortor. Proin commodo vestibulum sagittis.
diff --git a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx
index a22788098f..ea7e5f80fb 100644
--- a/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx
+++ b/apps/website/screens/components/flex/overview/FlexOverviewPage.tsx
@@ -64,11 +64,6 @@ const sections = [
they can lead to layout issues on different devices. Instead, leverage flex properties like grow,
shrink, and basis to create scalable designs.
-
- Ensure consistency with design tokens: whenever possible, use the design tokens provided by
- the Halstack Design System to maintain visual and functional consistency across applications, even though the
- component allows custom values.
-
Leverage alignment and justification: use justifyContent and{" "}
alignItems strategically to control content positioning within the flex container, ensuring a
@@ -79,6 +74,11 @@ const sections = [
excessive nesting can reduce readability and maintainability. Consider alternative layout strategies when
appropriate.
+
+ Ensure consistency with design tokens: whenever possible, use the design tokens provided by
+ the Halstack Design System to maintain visual and functional consistency across applications, even though the
+ component allows custom values.
+
Combine with other layout techniques: flexbox is powerful but not always the best tool for
every scenario. Consider using the{" "}
diff --git a/apps/website/screens/components/inset/InsetPageLayout.tsx b/apps/website/screens/components/inset/InsetPageLayout.tsx
index 4e97fae4e0..53e6d8f296 100644
--- a/apps/website/screens/components/inset/InsetPageLayout.tsx
+++ b/apps/website/screens/components/inset/InsetPageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
const InsetPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
- { label: "Code", path: "/components/inset" },
- { label: "Usage", path: "/components/inset/usage" },
- { label: "Specifications", path: "/components/inset/specifications" },
+ { label: "Overview", path: "/components/inset" },
+ { label: "Code", path: "/components/inset/code" },
];
return (
@@ -17,7 +16,7 @@ const InsetPageHeading = ({ children }: { children: ReactNode }) => {
Inset layout applies positive spacing scale to its child nodes.
-
{children}
diff --git a/apps/website/screens/components/inset/code/InsetCodePage.tsx b/apps/website/screens/components/inset/code/InsetCodePage.tsx
index a4771d553a..c9ec682699 100644
--- a/apps/website/screens/components/inset/code/InsetCodePage.tsx
+++ b/apps/website/screens/components/inset/code/InsetCodePage.tsx
@@ -8,89 +8,90 @@ import customSides from "./examples/customSides";
import TableCode from "@/common/TableCode";
import StatusBadge from "@/common/StatusBadge";
-const coreSpacingTokensTypeString = `'0rem' | '0.125rem' | '0.25rem' | '0.5rem' | '0.75rem' | '1rem' | '1.5rem' | '2rem' | '2.5rem' | '3rem' | '3.5rem' | '4rem' | '5rem' | '6rem' | '7rem'`;
-
const sections = [
{
title: "Props",
content: (
-
- Name
- Type
- Description
- Default
-
-
- space
-
- {coreSpacingTokensTypeString}
-
- Applies the spacing scale to all sides.
- -
-
-
- horizontal
-
- {coreSpacingTokensTypeString}
-
- Applies the spacing scale to the left and right sides.
- -
-
-
- vertical
-
- {coreSpacingTokensTypeString}
-
- Applies the spacing scale to the top and bottom sides.
- -
-
-
- top
-
- {coreSpacingTokensTypeString}
-
- Applies the spacing scale to the top side.
- -
-
-
- right
-
- {coreSpacingTokensTypeString}
-
- Applies the spacing scale to the right side.
- -
-
-
- bottom
-
- {coreSpacingTokensTypeString}
-
- Applies the spacing scale to the bottom side.
-
- -
-
-
- left
-
- {coreSpacingTokensTypeString}
-
- Applies the spacing scale to the left side.
- -
-
-
-
-
-
-
-
- React.ReactNode
-
- Custom content inside the inset.
- -
-
+
+
+ Name
+ Type
+ Description
+ Default
+
+
+
+
+ bottom
+
+ string
+
+ Applies the spacing scale to the bottom side.
+ -
+
+
+
+
+
+
+
+ React.ReactNode
+
+ Custom content inside the inset.
+ -
+
+
+ horizontal
+
+ string
+
+ Applies the spacing scale to the left and right sides.
+ -
+
+
+ left
+
+ string
+
+ Applies the spacing scale to the left side.
+ -
+
+
+ right
+
+ string
+
+ Applies the spacing scale to the right side.
+ -
+
+
+ space
+
+ string
+
+ Applies the spacing scale to all sides.
+ -
+
+
+ top
+
+ string
+
+ Applies the spacing scale to the top side.
+ -
+
+
+ vertical
+
+ string
+
+ Applies the spacing scale to the top and bottom sides.
+ -
+
+
),
},
@@ -109,15 +110,13 @@ const sections = [
},
];
-const InsetCodePage = () => {
- return (
-
-
-
-
- );
-};
+const InsetCodePage = () => (
+
+
+
+
+);
export default InsetCodePage;
diff --git a/apps/website/screens/components/inset/code/examples/basicUsage.ts b/apps/website/screens/components/inset/code/examples/basicUsage.ts
index 7ceb8e705e..3d46c84331 100644
--- a/apps/website/screens/components/inset/code/examples/basicUsage.ts
+++ b/apps/website/screens/components/inset/code/examples/basicUsage.ts
@@ -3,13 +3,13 @@ import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
-
-
-
+
+
+
-
);
diff --git a/apps/website/screens/components/inset/code/examples/customSides.ts b/apps/website/screens/components/inset/code/examples/customSides.ts
index 8c5a252f9a..b870d743cb 100644
--- a/apps/website/screens/components/inset/code/examples/customSides.ts
+++ b/apps/website/screens/components/inset/code/examples/customSides.ts
@@ -3,13 +3,18 @@ import Placeholder from "@/common/Placeholder";
const code = `() => {
return (
-
-
-
-
+
+
+
-
);
diff --git a/apps/website/screens/components/inset/overview/InsetOverviewPage.tsx b/apps/website/screens/components/inset/overview/InsetOverviewPage.tsx
new file mode 100644
index 0000000000..35a447b0f6
--- /dev/null
+++ b/apps/website/screens/components/inset/overview/InsetOverviewPage.tsx
@@ -0,0 +1,66 @@
+import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import DocFooter from "@/common/DocFooter";
+import Link from "next/link";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+ <>
+
+ The inset component is a container that adds spacing around its content, enhancing visual separation between
+ elements in a layout. It offers customizable spacing options, allowing for greater design flexibility.
+ Typically, it is used alongside other components to create a cohesive and well-structured layout.
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+
+
+ Enhance visual hierarchy: use the inset component to create clear separation between elements
+ in a layout.
+
+
+ Maintain balance and aesthetics: choose appropriate spacing values to ensure a
+ well-proportioned and visually appealing design.
+
+
+ Avoid unnecessary clutter: excessive use of the Inset component may lead to a fragmented or
+ overcrowded layout.
+
+
+ Ensure consistency with design tokens: whenever possible, use the design tokens provided by
+ the Halstack Design System, to maintain visual and functional consistency across applications, even though the
+ component allows custom values.
+
+
+ Combine with other layout techniques: use this component alongside{" "}
+ flex
+ {" "}
+ and{" "}
+ grid
+ {" "}
+ components to create consistent and semantic layouts.
+
+
+ ),
+ },
+];
+
+const InsetOverviewPage = () => (
+
+
+
+
+);
+
+export default InsetOverviewPage;
diff --git a/apps/website/screens/components/inset/specs/InsetSpecsPage.tsx b/apps/website/screens/components/inset/specs/InsetSpecsPage.tsx
deleted file mode 100644
index 2777ef89c8..0000000000
--- a/apps/website/screens/components/inset/specs/InsetSpecsPage.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import DocFooter from "@/common/DocFooter";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import Figure from "@/common/Figure";
-import Image from "@/common/Image";
-import insetSpecs from "./images/inset_specs.png";
-
-const sections = [
- {
- title: "Specifications",
- content: (
- <>
-
-
-
- Positive space varies depending on the REM values and the approach to implementation.
-
-
- ),
- },
-];
-
-const InsetSpecsPage = () => {
- return (
-
-
-
-
- );
-};
-
-export default InsetSpecsPage;
diff --git a/apps/website/screens/components/inset/specs/images/inset_specs.png b/apps/website/screens/components/inset/specs/images/inset_specs.png
deleted file mode 100644
index 5583cb33cc..0000000000
Binary files a/apps/website/screens/components/inset/specs/images/inset_specs.png and /dev/null differ
diff --git a/apps/website/screens/components/inset/usage/InsetUsagePage.tsx b/apps/website/screens/components/inset/usage/InsetUsagePage.tsx
deleted file mode 100644
index 6ee979d9cc..0000000000
--- a/apps/website/screens/components/inset/usage/InsetUsagePage.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
-import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
-import QuickNavContainer from "@/common/QuickNavContainer";
-import DocFooter from "@/common/DocFooter";
-import Code from "@/common/Code";
-
-const sections = [
- {
- title: "Usage",
- content: (
- <>
-
- Inset properties refer to the scale of the spacing used outside a container. The unit commonly used for the
- inset scale is REM, which is a measurement unit that refers to the font-size of the root element of a
- document.
-
-
- The following values of REM are commonly used in the design system: 0, 0.125,{" "}
- 0.25, 0.5, 1, 1.5, 2, 3,{" "}
- 4, and 5.
-
-
- ),
- },
-];
-
-const InsetUsagePage = () => {
- return (
-
-
-
-
- );
-};
-
-export default InsetUsagePage;
diff --git a/apps/website/screens/components/paginator/overview/examples/scrollable.ts b/apps/website/screens/components/paginator/overview/examples/scrollable.ts
index 856536c6a4..c0246246b7 100644
--- a/apps/website/screens/components/paginator/overview/examples/scrollable.ts
+++ b/apps/website/screens/components/paginator/overview/examples/scrollable.ts
@@ -46,7 +46,7 @@ const code = `() => {
complete: 46,
priority: "High",
issueType: "Bug",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
expandedContentHeight: 470
},
{
@@ -55,7 +55,7 @@ const code = `() => {
complete: 51,
priority: "High",
issueType: "Epic",
- expandedContent: Custom content 1
+ expandedContent: Custom content 1
},
{
id: 3,
@@ -63,7 +63,7 @@ const code = `() => {
complete: 40,
priority: "High",
issueType: "Improvement",
- expandedContent: Custom content 1
+ expandedContent: Custom content 1
},
{
id: 4,
@@ -71,7 +71,7 @@ const code = `() => {
complete: 10,
priority: "High",
issueType: "Improvement",
- expandedContent: Custom content 1
+ expandedContent: Custom content 1
},
{
id: 5,
@@ -87,7 +87,7 @@ const code = `() => {
complete: 37,
priority: "High",
issueType: "Improvement",
- expandedContent: Custom content 1
+ expandedContent: Custom content 1
},
{
id: 7,
@@ -95,7 +95,7 @@ const code = `() => {
complete: 73,
priority: "Medium",
issueType: "Story",
- expandedContent: Custom content 1
+ expandedContent: Custom content 1
},
{
id: 8,
@@ -103,7 +103,7 @@ const code = `() => {
complete: 27,
priority: "Medium",
issueType: "Story",
- expandedContent: Custom content 1
+ expandedContent: Custom content 1
},
{
id: 9,
@@ -111,15 +111,15 @@ const code = `() => {
complete: 36,
priority: "Critical",
issueType: "Epic",
- expandedContent: Custom content 1
+ expandedContent: Custom content 1
},
];
return (
-
+
);
}`;
diff --git a/packages/lib/src/accordion/Accordion.stories.tsx b/packages/lib/src/accordion/Accordion.stories.tsx
index cb16d8150d..f05781c8f1 100644
--- a/packages/lib/src/accordion/Accordion.stories.tsx
+++ b/packages/lib/src/accordion/Accordion.stories.tsx
@@ -47,7 +47,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -58,7 +58,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -80,7 +80,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -91,7 +91,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -102,7 +102,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -118,7 +118,7 @@ const Accordion = () => (
assistiveText="Ref - 1236554546"
icon="heart_plus"
>
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -134,7 +134,7 @@ const Accordion = () => (
assistiveText="Ref - 1236554546"
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -149,7 +149,7 @@ const Accordion = () => (
subLabel="Jan, 09 2025"
badge={{ position: "after", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -165,7 +165,7 @@ const Accordion = () => (
icon="heart_plus"
statusLight={
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -181,7 +181,7 @@ const Accordion = () => (
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -192,7 +192,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -203,7 +203,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -214,19 +214,19 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -241,7 +241,7 @@ const Accordion = () => (
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -251,7 +251,7 @@ const Accordion = () => (
assistiveText="Provide all required info"
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -261,7 +261,7 @@ const Accordion = () => (
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -272,7 +272,7 @@ const Accordion = () => (
icon="delete"
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -293,7 +293,7 @@ const Accordion = () => (
),
}}
>
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -308,7 +308,7 @@ const Accordion = () => (
subLabel="Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025 Jan, 09 2025"
icon="heart_plus"
>
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -324,7 +324,7 @@ const Accordion = () => (
assistiveText="Assistive text Assistive text"
icon="heart_plus"
>
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -340,7 +340,7 @@ const Accordion = () => (
assistiveText="Assistive text Assistive text Assistive text Assistive text Assistive text Assistive text Assistive text Assistive text Assistive text Assistive text Assistive text Assistive text Assistive text Assistive text"
icon="heart_plus"
>
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -352,7 +352,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -363,7 +363,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -374,7 +374,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -391,7 +391,7 @@ const Accordion = () => (
icon="heart_plus"
disabled
>
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -405,7 +405,7 @@ const Accordion = () => (
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -419,7 +419,7 @@ const Accordion = () => (
disabled
badge={{ position: "after", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -434,7 +434,7 @@ const Accordion = () => (
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -444,7 +444,7 @@ const Accordion = () => (
assistiveText="Provide all required info"
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -454,7 +454,7 @@ const Accordion = () => (
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -465,7 +465,7 @@ const Accordion = () => (
icon="delete"
badge={{ position: "before", element:
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -477,7 +477,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -488,7 +488,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -499,7 +499,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -510,7 +510,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -521,7 +521,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -532,7 +532,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
@@ -543,7 +543,7 @@ const Accordion = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
leo lobortis eget.
diff --git a/packages/lib/src/action-icon/ActionIcon.stories.tsx b/packages/lib/src/action-icon/ActionIcon.stories.tsx
index bd1a035d2a..be36839843 100644
--- a/packages/lib/src/action-icon/ActionIcon.stories.tsx
+++ b/packages/lib/src/action-icon/ActionIcon.stories.tsx
@@ -56,7 +56,7 @@ const NestedTooltip = () => (
<>
-
+
diff --git a/packages/lib/src/badge/Badge.stories.tsx b/packages/lib/src/badge/Badge.stories.tsx
index 001e77dfaa..5dc227fcab 100644
--- a/packages/lib/src/badge/Badge.stories.tsx
+++ b/packages/lib/src/badge/Badge.stories.tsx
@@ -225,7 +225,7 @@ const NestedTooltip = () => (
<>
-
+
diff --git a/packages/lib/src/button/Button.stories.tsx b/packages/lib/src/button/Button.stories.tsx
index 5f6f25692c..a91e42c359 100644
--- a/packages/lib/src/button/Button.stories.tsx
+++ b/packages/lib/src/button/Button.stories.tsx
@@ -4934,7 +4934,7 @@ const NestedTooltip = () => (
<>
-
+
diff --git a/packages/lib/src/container/Container.stories.tsx b/packages/lib/src/container/Container.stories.tsx
index 189305e5c9..f732722a45 100644
--- a/packages/lib/src/container/Container.stories.tsx
+++ b/packages/lib/src/container/Container.stories.tsx
@@ -11,43 +11,38 @@ export default {
const Listbox = ({ suggestions = [] }: { suggestions: string[] }): JSX.Element => (
{suggestions.map((suggestion, index) => (
-
+
-
+
{suggestion}
@@ -78,8 +73,8 @@ const Container = () => (
},
}}
borderRadius="var(--border-radius-none) var(--border-radius-none) var(--border-radius-s) var(--border-radius-s)"
- padding="medium"
- margin="large"
+ padding="var(--spacing-padding-m)"
+ margin="var(--spacing-padding-l)"
>
Example text
@@ -109,21 +104,21 @@ const Container = () => (
style: "var(--border-style-dashed)",
}}
borderRadius="var(--border-radius-s)"
- margin={{ bottom: "xxlarge" }}
+ margin={{ bottom: "var(--spacing-padding-xxl)" }}
>
1
2
@@ -132,8 +127,8 @@ const Container = () => (
position="absolute"
inset={{ top: "25px", left: "0" }}
background={{ color: "var(--color-bg-secondary-strong)" }}
- width="50px"
- height="50px"
+ width="56px"
+ height="var(--height-xxxl)"
zIndex={1}
>
3
@@ -155,15 +150,15 @@ const Container = () => (
background={{ color: "var(--color-bg-primary-medium)" }}
width="50px"
height="50px"
- margin={{ bottom: "medium" }}
+ margin={{ bottom: "var(--spacing-padding-m)" }}
>
1
2
@@ -173,10 +168,14 @@ const Container = () => (
1
@@ -187,16 +186,20 @@ const Container = () => (
color: "var(--border-color-neutral-strongest)",
}}
background={{ color: "var(--color-bg-primary-medium)" }}
- width="50px"
- height="50px"
+ width="56px"
+ height="var(--height-xxxl)"
>
2
3
@@ -204,8 +207,20 @@ const Container = () => (
-
-
+
+
Floating text
@@ -223,8 +238,12 @@ const Container = () => (
@@ -246,7 +265,11 @@ const Container = () => (
Example text
diff --git a/packages/lib/src/container/Container.test.tsx b/packages/lib/src/container/Container.test.tsx
index 0e54c959d1..0c8a4c5c7b 100644
--- a/packages/lib/src/container/Container.test.tsx
+++ b/packages/lib/src/container/Container.test.tsx
@@ -8,22 +8,22 @@ describe("Container component tests", () => {
boxSizing="border-box"
width="200px"
height="200px"
- background={{ color: "color_purple_400" }}
+ background={{ color: "var(--color-bg-primary-medium)" }}
border={{
top: {
- width: "2px",
- color: "color_blue_600",
- style: "solid",
+ width: "var(--border-width-m)",
+ color: "var(--border-color-secondary-strong)",
+ style: "var(--border-style-default)",
},
bottom: {
- width: "thick",
- color: "color_purple_600",
- style: "solid",
+ width: "var(--border-width-l)",
+ color: "var(--border-color-primary-strong)",
+ style: "var(--border-style-default)",
},
}}
- borderRadius="0 0 0.25rem 0.25rem"
- padding="medium"
- margin="large"
+ borderRadius="var(--border-radius-none) var(--border-radius-none) var(--border-radius-s) var(--border-radius-s)"
+ padding="var(--spacing-padding-m)"
+ margin="var(--spacing-padding-l)"
>
Example text
diff --git a/packages/lib/src/container/Container.tsx b/packages/lib/src/container/Container.tsx
index 36ad1da0cc..4abf8d90be 100644
--- a/packages/lib/src/container/Container.tsx
+++ b/packages/lib/src/container/Container.tsx
@@ -1,6 +1,5 @@
import styled from "styled-components";
import ContainerPropsType, { BorderProperties, StyledProps } from "./types";
-import { spaces } from "../common/variables";
const getBorderStyles = (direction: "top" | "bottom" | "left" | "right", borderProperties: BorderProperties) =>
`border-${direction}: ${borderProperties.width ?? ""} ${borderProperties.style ?? ""} ${
@@ -63,21 +62,21 @@ const Container = styled.div`
}
return styles;
}};
- margin: ${({ margin }) => (typeof margin === "string" ? spaces[margin] : "")};
- margin-top: ${({ margin }) => (typeof margin === "object" && margin.top ? spaces[margin.top] : "")};
- margin-right: ${({ margin }) => (typeof margin === "object" && margin.right ? spaces[margin.right] : "")};
- margin-bottom: ${({ margin }) => (typeof margin === "object" && margin.bottom ? spaces[margin.bottom] : "")};
- margin-left: ${({ margin }) => (typeof margin === "object" && margin.left ? spaces[margin.left] : "")};
+ margin: ${({ margin }) => (typeof margin === "string" ? margin : "")};
+ margin-top: ${({ margin }) => (typeof margin === "object" && margin.top ? margin.top : "")};
+ margin-right: ${({ margin }) => (typeof margin === "object" && margin.right ? margin.right : "")};
+ margin-bottom: ${({ margin }) => (typeof margin === "object" && margin.bottom ? margin.bottom : "")};
+ margin-left: ${({ margin }) => (typeof margin === "object" && margin.left ? margin.left : "")};
outline: ${({ outline }) => `${outline?.width ?? ""} ${outline?.style ?? ""} ${outline?.color ?? ""}`};
outline-offset: ${({ outline }) => outline?.offset};
overflow: ${({ $overflow }) => (typeof $overflow === "string" ? $overflow : "")};
overflow-x: ${({ $overflow }) => (typeof $overflow === "object" ? `${$overflow?.x}` : "")};
overflow-y: ${({ $overflow }) => (typeof $overflow === "object" ? `${$overflow?.y}` : "")};
- padding: ${({ padding }) => (typeof padding === "string" ? spaces[padding] : "")};
- padding-top: ${({ padding }) => (typeof padding === "object" && padding.top ? spaces[padding.top] : "")};
- padding-right: ${({ padding }) => (typeof padding === "object" && padding.right ? spaces[padding.right] : "")};
- padding-bottom: ${({ padding }) => (typeof padding === "object" && padding.bottom ? spaces[padding.bottom] : "")};
- padding-left: ${({ padding }) => (typeof padding === "object" && padding.left ? spaces[padding.left] : "")};
+ padding: ${({ padding }) => (typeof padding === "string" ? padding : "")};
+ padding-top: ${({ padding }) => (typeof padding === "object" && padding.top ? padding.top : "")};
+ padding-right: ${({ padding }) => (typeof padding === "object" && padding.right ? padding.right : "")};
+ padding-bottom: ${({ padding }) => (typeof padding === "object" && padding.bottom ? padding.bottom : "")};
+ padding-left: ${({ padding }) => (typeof padding === "object" && padding.left ? padding.left : "")};
`;
export default function DxcContainer({ display, width, height, overflow, ...props }: ContainerPropsType) {
diff --git a/packages/lib/src/container/types.ts b/packages/lib/src/container/types.ts
index 683cac799f..2346f54204 100644
--- a/packages/lib/src/container/types.ts
+++ b/packages/lib/src/container/types.ts
@@ -1,13 +1,11 @@
import { ReactNode } from "react";
-import { Space as SpacingValues } from "../common/utils";
-type Space =
- | SpacingValues
- | {
- top?: SpacingValues;
- right?: SpacingValues;
- bottom?: SpacingValues;
- left?: SpacingValues;
- };
+
+type Space = {
+ top?: string;
+ right?: string;
+ bottom?: string;
+ left?: string;
+};
type Inset = {
top?: string;
@@ -35,11 +33,11 @@ export type BorderProperties = {
type Border =
| BorderProperties
| {
- top?: BorderProperties;
- right?: BorderProperties;
- bottom?: BorderProperties;
- left?: BorderProperties;
- };
+ top?: BorderProperties;
+ right?: BorderProperties;
+ bottom?: BorderProperties;
+ left?: BorderProperties;
+ };
type Outline = BorderProperties & {
offset?: string;
@@ -80,7 +78,7 @@ type Props = {
/**
* Custom content inside the container.
*/
- children: ReactNode;
+ children?: ReactNode;
/**
* Sets the display CSS property.
* The set of values is limited to the ones related to the outer display type.
@@ -108,17 +106,9 @@ type Props = {
*/
inset?: Inset;
/**
- * 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.
+ * Size of the margin to be applied to the container.
*/
- margin?: Space;
- /**
- * Sets the max-height CSS property.
- *
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
- */
- maxWidth?: string;
+ margin?: string | Space;
/**
* Sets the max-width CSS property.
*
@@ -126,17 +116,23 @@ type Props = {
*/
maxHeight?: string;
/**
- * Sets the min-height CSS property.
+ * Sets the max-height CSS property.
*
- * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
*/
- minWidth?: string;
+ maxWidth?: string;
/**
* Sets the min-width CSS property.
*
* See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
*/
minHeight?: string;
+ /**
+ * Sets the min-height CSS property.
+ *
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+ */
+ minWidth?: string;
/**
* Based on the CSS property outline allows configuring all properties related
* to the outline of a container.
@@ -149,11 +145,9 @@ type Props = {
*/
overflow?: Overflow;
/**
- * 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.
+ * Size of the padding to be applied to the container.
*/
- padding?: Space;
+ padding?: string | Space;
/**
* Sets the position CSS property.
*
@@ -176,9 +170,9 @@ type Props = {
export type StyledProps = Omit & {
$display?: "block" | "inline-block" | "inline" | "none";
- $width?: string;
$height?: string;
$overflow?: Overflow;
+ $width?: string;
};
export default Props;
diff --git a/packages/lib/src/contextual-menu/Section.tsx b/packages/lib/src/contextual-menu/Section.tsx
index a8a09e47d3..e33d1b3d37 100644
--- a/packages/lib/src/contextual-menu/Section.tsx
+++ b/packages/lib/src/contextual-menu/Section.tsx
@@ -32,7 +32,7 @@ export default function Section({ index, length, section }: SectionProps) {
))}
{index !== length - 1 && (
-
+
)}
diff --git a/packages/lib/src/data-grid/DataGrid.stories.tsx b/packages/lib/src/data-grid/DataGrid.stories.tsx
index 5c3f1c41c6..af1b220c47 100644
--- a/packages/lib/src/data-grid/DataGrid.stories.tsx
+++ b/packages/lib/src/data-grid/DataGrid.stories.tsx
@@ -151,7 +151,7 @@ const expandableRows = [
complete: 46,
priority: "High",
issueType: "Bug",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
expandedContentHeight: 470,
actions: Custom content 1 ,
+ expandedContent: Custom content 1 ,
actions: Custom content 1 ,
+ expandedContent: Custom content 1 ,
actions: Custom content 1 ,
+ expandedContent: Custom content 1 ,
actions: Custom content 1 ,
+ expandedContent: Custom content 1 ,
actions: Custom content 1 ,
+ expandedContent: Custom content 1 ,
actions: Custom content 1 ,
+ expandedContent: Custom content 1 ,
actions: Custom content 1 ,
+ expandedContent: Custom content 1 ,
actions: Custom content 1 ,
+ expandedContent: Custom content 1 ,
actions: Custom content 1 ,
+ expandedContent: Custom content 1 ,
expandedContentHeight: 470,
},
{
@@ -245,7 +245,7 @@ const expandableRowsPaginated = [
complete: 51,
priority: "High",
issueType: "Epic",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
},
{
id: 33,
@@ -253,7 +253,7 @@ const expandableRowsPaginated = [
complete: 40,
priority: "High",
issueType: "Improvement",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
},
{
id: 44,
@@ -261,7 +261,7 @@ const expandableRowsPaginated = [
complete: 10,
priority: "High",
issueType: "Improvement",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
},
{
id: 55,
@@ -269,7 +269,7 @@ const expandableRowsPaginated = [
complete: 68,
priority: "High",
issueType: "Improvement",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
},
{
id: 66,
@@ -277,7 +277,7 @@ const expandableRowsPaginated = [
complete: 37,
priority: "High",
issueType: "Improvement",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
},
{
id: 77,
@@ -285,7 +285,7 @@ const expandableRowsPaginated = [
complete: 73,
priority: "Medium",
issueType: "Story",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
},
{
id: 88,
@@ -293,7 +293,7 @@ const expandableRowsPaginated = [
complete: 27,
priority: "Medium",
issueType: "Story",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
},
{
id: 99,
@@ -301,7 +301,7 @@ const expandableRowsPaginated = [
complete: 36,
priority: "Critical",
issueType: "Epic",
- expandedContent: Custom content 1 ,
+ expandedContent: Custom content 1 ,
},
];
diff --git a/packages/lib/src/dialog/Dialog.stories.tsx b/packages/lib/src/dialog/Dialog.stories.tsx
index 7c86b7b279..20061cceda 100644
--- a/packages/lib/src/dialog/Dialog.stories.tsx
+++ b/packages/lib/src/dialog/Dialog.stories.tsx
@@ -36,8 +36,8 @@ const Dialog = () => (
-
-
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
@@ -60,10 +60,10 @@ const DialogInput = () => (
-
-
+
+
+
@@ -74,7 +74,7 @@ const DialogInput = () => (
text: "User: arn:aws:xxx::xxxxxxxxxxxx:assumed-role/assure-sandbox-xxxx-xxxxxxxxxxxxxxxxxxxxxxxxxx/sandbox-xxxx-xxxxxxxxxxxxxxxxxx is not authorized to perform: lambda:xxxxxxxxxxxxxx on resource: arn:aws:lambda:us-east-1:xxxxxxxxxxxx:function:sandbox-xxxx-xx-xxxxxxx-xxxxxxx-lambda because no identity-based policy allows the lambda:xxxxxxxxxxxxxx action",
}}
/>
-
+
@@ -88,8 +88,8 @@ const DialogNoOverlay = () => (
-
-
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
@@ -112,7 +112,7 @@ const DialogCloseNoVisible = () => (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -133,14 +133,14 @@ const RespDialog = () => (
-
-
+
+
+
-
+
@@ -289,8 +289,8 @@ const ScrollingDialog = () => (
-
-
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
diff --git a/packages/lib/src/grid/Grid.stories.tsx b/packages/lib/src/grid/Grid.stories.tsx
index 738dccb151..f160fd7e60 100644
--- a/packages/lib/src/grid/Grid.stories.tsx
+++ b/packages/lib/src/grid/Grid.stories.tsx
@@ -152,7 +152,7 @@ const Grid = () => (
+
diff --git a/packages/lib/src/image/Image.stories.tsx b/packages/lib/src/image/Image.stories.tsx
index 8fcc668c4e..407bb2b710 100644
--- a/packages/lib/src/image/Image.stories.tsx
+++ b/packages/lib/src/image/Image.stories.tsx
@@ -34,7 +34,7 @@ const Image = () => (
metus proin arcu faucibus proin nibh sit. Vel integer sed enim in sed vel nec ut vitae. Commodo sagittis
volutpat id lorem.
-
+
;
-const Container = styled.div`
- background: #f2eafa;
- margin: 2.5rem;
-`;
+const Container = ({ children }: { children: ReactNode }) => (
+
+ {children}
+
+);
-const Placeholder = styled.div`
- min-height: 40px;
- min-width: 120px;
- border: 1px solid #a46ede;
- border-radius: 0.5rem;
- background-color: #e5d5f6;
-`;
+const Placeholder = () => (
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
-
-
+
-
diff --git a/packages/lib/src/inset/Inset.tsx b/packages/lib/src/inset/Inset.tsx
index f1ffbded1c..c952c7d9d0 100644
--- a/packages/lib/src/inset/Inset.tsx
+++ b/packages/lib/src/inset/Inset.tsx
@@ -1,28 +1,19 @@
-import styled from "styled-components";
import InsetPropsType from "./types";
-import { CoreSpacingTokensType } from "../common/coreTokens";
+import DxcContainer from "../container/Container";
-const getSpacingValue = (spacingName?: CoreSpacingTokensType) => spacingName ?? "0rem";
-
-const StyledInset = styled.div`
- ${({ space, horizontal, vertical, top, right, bottom, left }) => `
- padding: ${getSpacingValue(top || vertical || space)} ${getSpacingValue(right || horizontal || space)}
- ${getSpacingValue(bottom || vertical || space)} ${getSpacingValue(left || horizontal || space)};
-`}
-`;
-
-const Inset = ({ space, horizontal, vertical, top, right, bottom, left, children }: InsetPropsType) => (
-
- {children}
-
-);
-
-export default Inset;
+export default function DxcInset({ bottom, children, horizontal, left, right, space, top, vertical }: InsetPropsType) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/lib/src/inset/types.ts b/packages/lib/src/inset/types.ts
index cb6567e7c2..af9833ef26 100644
--- a/packages/lib/src/inset/types.ts
+++ b/packages/lib/src/inset/types.ts
@@ -1,39 +1,38 @@
import { ReactNode } from "react";
-import { CoreSpacingTokensType } from "../common/coreTokens";
type Props = {
/**
- * Applies the spacing scale to all sides.
+ * Applies the spacing scale to the bottom side.
*/
- space?: CoreSpacingTokensType;
+ bottom?: string;
/**
- * Applies the spacing scale to the left and right sides.
+ * Custom content inside the inset.
*/
- horizontal?: CoreSpacingTokensType;
+ children: ReactNode;
/**
- * Applies the spacing scale to the top and bottom sides.
+ * Applies the spacing scale to the left and right sides.
*/
- vertical?: CoreSpacingTokensType;
+ horizontal?: string;
/**
- * Applies the spacing scale to the top side.
+ * Applies the spacing scale to the left side.
*/
- top?: CoreSpacingTokensType;
+ left?: string;
/**
* Applies the spacing scale to the right side.
*/
- right?: CoreSpacingTokensType;
+ right?: string;
/**
- * Applies the spacing scale to the bottom side.
+ * Applies the spacing scale to all sides.
*/
- bottom?: CoreSpacingTokensType;
+ space?: string;
/**
- * Applies the spacing scale to the left side.
+ * Applies the spacing scale to the top side.
*/
- left?: CoreSpacingTokensType;
+ top?: string;
/**
- * Custom content inside the inset.
+ * Applies the spacing scale to the top and bottom sides.
*/
- children: ReactNode;
+ vertical?: string;
};
export default Props;
diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx
index 333d0e4c28..dcb1666c53 100644
--- a/packages/lib/src/quick-nav/QuickNav.tsx
+++ b/packages/lib/src/quick-nav/QuickNav.tsx
@@ -15,18 +15,18 @@ const DxcQuickNav = ({ title, links }: QuickNavTypes): JSX.Element => {
return (
-
+
{links.map((link) => (
-
+
{link.links?.map((sublink) => (
-
+
Dxc technology}>
-
+
(
<>
-
+
@@ -29,7 +29,7 @@ const LargeTextWithinTooltip = () => (
<>
-
+
@@ -42,7 +42,7 @@ const TopTooltip = () => (
<>
-
+