@dxc-technology/halstack-react 9.0.1 → 9.1.0

package/HalstackContext.d.ts

@@ -432,7 +432,10 @@ declare const HalstackContext: React.Context<DeepPartial<{
         hamburguerIconColor: string;
         hamburguerHoverColor: string;
         logo: string;
-        logoResponsive: string;
+        logoResponsive: string; /**
+         * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
+         * This is an extension of the already extisting Partial type, which only allows one level of partiality.
+         */
         logoHeight: string;
         logoWidth: string;
         menuBackgroundColor: string;

package/HalstackContext.js

@@ -291,7 +291,7 @@ var parseTheme = function parseTheme(theme) {
 };
 
 var parseLabels = function parseLabels(labels) {
-  var parsedLabels = JSON.parse(JSON.stringify(_variables.defaultTranslatedComponentLabels));
+  var parsedLabels = _variables.defaultTranslatedComponentLabels;
   Object.keys(labels).map(function (component) {
     if (parsedLabels[component]) {
       Object.keys(parsedLabels[component]).map(function (label) {

package/accordion/Accordion.stories.tsx

@@ -131,7 +131,7 @@ export const Chromatic = () => (
       <DxcAccordion
         label="Accordion"
         assistiveText="Assistive text"
-        icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png"
+        icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
       >
         <div>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo

package/bleed/Bleed.stories.tsx

@@ -337,5 +337,6 @@ const Placeholder = styled.div`
   min-height: 40px;
   min-width: 120px;
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;

package/button/Button.js

@@ -75,7 +75,6 @@ var DxcButton = function DxcButton(_ref) {
     type: type,
     mode: mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode,
     disabled: disabled,
-    "aria-disabled": disabled,
     tabIndex: disabled ? -1 : tabIndex,
     backgroundType: backgroundType,
     size: size,

package/button/Button.stories.tsx

@@ -98,7 +98,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Big icon (image)" theme="light" level={4} />
-      <DxcButton icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png" />
+      <DxcButton icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small icon" theme="light" level={4} />

package/flex/Flex.stories.tsx

@@ -14,19 +14,19 @@ export const Chromatic = () => (
     <Container>
       <DxcFlex>
         <Placeholder />
-        <Placeholder width="50px" />
+        <Placeholder minWidth="50px" />
         <Placeholder />
-        <Placeholder width="50px" />
-        <Placeholder width="50px" />
+        <Placeholder minWidth="50px" />
+        <Placeholder minWidth="50px" />
       </DxcFlex>
     </Container>
     <Title title="Direction column, wrap, justify content end, align items center and gap" level={4} />
     <Container>
       <DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="20px">
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
       </DxcFlex>
     </Container>
@@ -37,13 +37,13 @@ export const Chromatic = () => (
         <Placeholder />
         <Placeholder />
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
         <Placeholder />
-        <Placeholder width="100px" />
+        <Placeholder minWidth="100px" />
         <Placeholder />
       </DxcFlex>
     </Container>
@@ -51,16 +51,16 @@ export const Chromatic = () => (
     <Container height="75px">
       <DxcFlex basis="100%">
         <DxcFlex order={3} grow={1} alignSelf="flex-end">
-          <PlaceholderGrowAndShrink>order 3, grow 1, align self end</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">order 3, grow 1, align self end</Placeholder>
         </DxcFlex>
         <DxcFlex order={-1} grow={4}>
-          <PlaceholderGrowAndShrink>order -1, grow 4</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">order -1, grow 4</Placeholder>
         </DxcFlex>
         <DxcFlex order={5} grow={1}>
-          <PlaceholderGrowAndShrink>order 5, grow 1</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">order 5, grow 1</Placeholder>
         </DxcFlex>
         <DxcFlex order={2} grow={2}>
-          <PlaceholderGrowAndShrink>order 2. grow 2</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">order 2. grow 2</Placeholder>
         </DxcFlex>
       </DxcFlex>
     </Container>
@@ -68,13 +68,13 @@ export const Chromatic = () => (
     <Container>
       <DxcFlex basis="600px">
         <DxcFlex shrink={4} basis="400px">
-          <PlaceholderGrowAndShrink>shrink 4</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">shrink 4</Placeholder>
         </DxcFlex>
         <DxcFlex shrink={2} basis="400px">
-          <PlaceholderGrowAndShrink>shrink 2</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">shrink 2</Placeholder>
         </DxcFlex>
         <DxcFlex shrink={1} basis="400px">
-          <PlaceholderGrowAndShrink>shrink 1</PlaceholderGrowAndShrink>
+          <Placeholder width="100%" minWidth="0">shrink 1</Placeholder>
         </DxcFlex>
       </DxcFlex>
     </Container>
@@ -88,16 +88,11 @@ const Container = styled.div<{ height?: string }>`
   ${({ height }) => (height ? `height: ${height}` : "max-height: 150px")};
 `;
 
-const Placeholder = styled.div<{ width?: string }>`
+const Placeholder = styled.div<{ minWidth?: string, width?: string }>`
   height: 40px;
-  min-width: ${({ width }) => width || "200px"};
-  border: 1px solid #a46ede;
-  background-color: #e5d5f6;
-`;
-
-const PlaceholderGrowAndShrink = styled.div`
-  height: 40px;
-  width: 100%;
+  min-width: ${({ minWidth }) => minWidth ?? "200px"};
+  width: ${({ width }) => width};
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;

package/grid/Grid.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import GridPropsType, { GridItemProps } from "./types";
+declare const DxcGrid: {
+    (props: GridPropsType): JSX.Element;
+    GridItem: import("styled-components").StyledComponent<"div", any, GridItemProps, never>;
+};
+export default DxcGrid;

package/grid/Grid.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var DxcGrid = function DxcGrid(props) {
+  return /*#__PURE__*/_react["default"].createElement(Grid, props);
+};
+
+var Grid = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: grid;\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n      \n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_ref) {
+  var templateColumns = _ref.templateColumns;
+  return templateColumns && "grid-template-columns: ".concat(templateColumns.join(" "), ";");
+}, function (_ref2) {
+  var templateRows = _ref2.templateRows;
+  return templateRows && "grid-template-rows: ".concat(templateRows.join(" "), ";");
+}, function (_ref3) {
+  var templateAreas = _ref3.templateAreas;
+  return templateAreas && "grid-template-areas: ".concat(templateAreas.map(function (row) {
+    return "\"".concat(row, "\"");
+  }).join(" "), ";");
+}, function (_ref4) {
+  var autoColumns = _ref4.autoColumns;
+  return autoColumns && "grid-auto-columns: ".concat(autoColumns, ";");
+}, function (_ref5) {
+  var autoRows = _ref5.autoRows;
+  return autoRows && "grid-auto-rows: ".concat(autoRows, ";");
+}, function (_ref6) {
+  var autoFlow = _ref6.autoFlow;
+  return autoFlow && "grid-auto-flow: ".concat(autoFlow, ";");
+}, function (_ref7) {
+  var _gap$rowGap, _gap$columnGap;
+
+  var gap = _ref7.gap;
+  return gap != null && (typeof gap === "string" ? "gap: ".concat(gap, ";") : "row-gap: ".concat((_gap$rowGap = gap.rowGap) !== null && _gap$rowGap !== void 0 ? _gap$rowGap : "", "; column-gap: ").concat((_gap$columnGap = gap.columnGap) !== null && _gap$columnGap !== void 0 ? _gap$columnGap : "", ";"));
+}, function (_ref8) {
+  var _placeItems$alignItem, _placeItems$justifyIt;
+
+  var placeItems = _ref8.placeItems;
+  return placeItems && (typeof placeItems === "string" ? "place-items: ".concat(placeItems) : "align-items: ".concat((_placeItems$alignItem = placeItems.alignItems) !== null && _placeItems$alignItem !== void 0 ? _placeItems$alignItem : "", "; justify-items: ").concat((_placeItems$justifyIt = placeItems.justifyItems) !== null && _placeItems$justifyIt !== void 0 ? _placeItems$justifyIt : "", ";"));
+}, function (_ref9) {
+  var _placeContent$alignCo, _placeContent$justify;
+
+  var placeContent = _ref9.placeContent;
+  return placeContent && (typeof placeContent === "string" ? "place-content: ".concat(placeContent) : "align-content: ".concat((_placeContent$alignCo = placeContent.alignContent) !== null && _placeContent$alignCo !== void 0 ? _placeContent$alignCo : "", "; justify-content: ").concat((_placeContent$justify = placeContent.justifyContent) !== null && _placeContent$justify !== void 0 ? _placeContent$justify : "", ";"));
+}, function (_ref10) {
+  var areaName = _ref10.areaName;
+  return areaName && "grid-area: ".concat(areaName, ";");
+}, function (_ref11) {
+  var column = _ref11.column;
+  return column && "grid-column: ".concat(typeof column === "string" || typeof column === "number" ? column : "".concat(column.start, " / ").concat(column.end, ";"), ";");
+}, function (_ref12) {
+  var row = _ref12.row;
+  return row && "grid-row: ".concat(typeof row === "string" || typeof row === "number" ? row : "".concat(row.start, " / ").concat(row.end, ";"), ";");
+}, function (_ref13) {
+  var _placeSelf$alignSelf, _placeSelf$justifySel;
+
+  var placeSelf = _ref13.placeSelf;
+  return placeSelf && (typeof placeSelf === "string" ? "place-self: ".concat(placeSelf) : "align-self: ".concat((_placeSelf$alignSelf = placeSelf.alignSelf) !== null && _placeSelf$alignSelf !== void 0 ? _placeSelf$alignSelf : "", "; justify-self: ").concat((_placeSelf$justifySel = placeSelf.justifySelf) !== null && _placeSelf$justifySel !== void 0 ? _placeSelf$justifySel : "", ";"));
+});
+
+var GridItem = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (_ref14) {
+  var areaName = _ref14.areaName;
+  return areaName && "grid-area: ".concat(areaName, ";");
+}, function (_ref15) {
+  var column = _ref15.column;
+  return column && "grid-column: ".concat(typeof column === "string" || typeof column === "number" ? column : "".concat(column.start, " / ").concat(column.end, ";"), ";");
+}, function (_ref16) {
+  var row = _ref16.row;
+  return row && "grid-row: ".concat(typeof row === "string" || typeof row === "number" ? row : "".concat(row.start, " / ").concat(row.end, ";"), ";");
+}, function (_ref17) {
+  var _placeSelf$alignSelf2, _placeSelf$justifySel2;
+
+  var placeSelf = _ref17.placeSelf;
+  return placeSelf && (typeof placeSelf === "string" ? "place-self: ".concat(placeSelf) : "align-self: ".concat((_placeSelf$alignSelf2 = placeSelf.alignSelf) !== null && _placeSelf$alignSelf2 !== void 0 ? _placeSelf$alignSelf2 : "", "; justify-self: ").concat((_placeSelf$justifySel2 = placeSelf.justifySelf) !== null && _placeSelf$justifySel2 !== void 0 ? _placeSelf$justifySel2 : "", ";"));
+});
+
+DxcGrid.GridItem = GridItem;
+var _default = DxcGrid;
+exports["default"] = _default;

package/grid/Grid.stories.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import styled from "styled-components";
+import DxcGrid from "./Grid";
+import DxcInset from "../inset/Inset";
+
+export default {
+  title: "Grid",
+  component: DxcGrid,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" level={4} />
+    <ExampleContainer>
+      <DxcGrid>
+        <ColoredContainer />
+        <ColoredContainer />
+        <ColoredContainer />
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Place items" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateRows={["200px"]} placeItems="center">
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+      <DxcGrid placeItems={{ justifyItems: "end" }}>
+        <ColoredContainer />
+        <ColoredContainer />
+        <ColoredContainer />
+      </DxcGrid>
+      <DxcGrid templateRows={["repeat(3, 100px)"]} placeItems={{ alignItems: "end", justifyItems: "center" }}>
+        <ColoredContainer height="50px" width="50px" />
+        <ColoredContainer height="50px" width="50px" />
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Place content" level={4} />
+    <Container height="200px">
+      <DxcGrid placeContent="center">
+        <ColoredContainer height="50px" width="50px" />
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </Container>
+    <Container height="200px">
+      <DxcGrid placeContent={{ alignContent: "center" }}>
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </Container>
+    <Container height="200px">
+      <DxcGrid placeContent={{ alignContent: "center", justifyContent: "end" }}>
+        <ColoredContainer height="50px" width="50px" />
+      </DxcGrid>
+    </Container>
+    <Title title="Place self" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateRows={["repeat(3, 100px)"]}>
+        <DxcGrid.GridItem placeSelf="center">
+          <ColoredContainer height="50px" width="50px" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem placeSelf={{ alignSelf: "end" }}>
+          <ColoredContainer height="40px" width="40px" />
+          <ColoredContainer height="30px" width="30px" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem placeSelf={{ alignSelf: "center", justifySelf: "end" }}>
+          <ColoredContainer height="50px" width="50px" />
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Halstack layout using template areas" level={4} />
+    <ExampleContainer>
+      <DxcGrid
+        templateColumns={["repeat(4, 1fr)"]}
+        templateRows={["40px", "200px", "60px"]}
+        templateAreas={["header header header header", "sidenav main main main", "sidenav footer footer footer"]}
+        gap={{ rowGap: "0.5rem", columnGap: "1rem" }}
+      >
+        <DxcGrid.GridItem areaName="header" as="header">
+          <ColoredContainer height="100%" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem areaName="main" as="main">
+          <ColoredContainer height="100%" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem areaName="sidenav" as="nav">
+          <ColoredContainer height="100%" />
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem areaName="footer" as="footer">
+          <ColoredContainer height="100%" />
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Template rows and columns with flexible sizes" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["1fr", "1fr", "1fr"]} templateRows={["1fr", "3fr", "1fr"]} gap="0.5rem">
+        <DxcGrid.GridItem column={{ start: 1, end: -1 }}>
+          <ColoredContainer color="yellow" height="100%">
+            Header
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem column={1}>
+          <ColoredContainer color="lightcyan" height="100%">
+            Sidenav
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid
+          column={{ start: 2, end: -1 }}
+          templateRows={["repeat(4, 1fr)"]}
+          templateColumns={["repeat(2, 1fr)"]}
+          gap="1rem"
+        >
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+          <ColoredContainer />
+        </DxcGrid>
+        <DxcGrid.GridItem column={{ start: 1, end: -1 }}>
+          <ColoredContainer color="black" height="100%">
+            Footer
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Overlapping" level={4} />
+    <DxcInset bottom="2rem">
+      <ExampleContainer>
+        <DxcGrid templateRows={["50px", "50px"]}>
+          <ColoredContainer color="yellow" height="100px">
+            1
+          </ColoredContainer>
+          <ColoredContainer color="transparent" height="100px">
+            2
+          </ColoredContainer>
+        </DxcGrid>
+      </ExampleContainer>
+    </DxcInset>
+    <Title title="Implicit rows and columns" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["50px"]} templateRows={["50px", "50px"]} autoRows="50px" autoColumns="50px">
+        <DxcGrid.GridItem>
+          <ColoredContainer height="50px">1</ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem row={2}>
+          <ColoredContainer height="50px">3</ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem row={6} column={1}>
+          <ColoredContainer height="50px">5</ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem row={3}>
+          <ColoredContainer height="50px">4</ColoredContainer>
+        </DxcGrid.GridItem>
+        <DxcGrid.GridItem row={{ start: 1, end: 2 }} column={{ start: 5, end: "span 2" }}>
+          <ColoredContainer height="50px">2</ColoredContainer>
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Autoflow 'row' (default)" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["repeat(5, 1fr)"]} templateRows={["1fr", "1fr"]} autoFlow="row" autoColumns="1fr">
+        <DxcGrid.GridItem row={{ start: 1, end: "span 2" }} column={1}>
+          <ColoredContainer height="100%">1</ColoredContainer>
+        </DxcGrid.GridItem>
+        <ColoredContainer color="lightyellow">2</ColoredContainer>
+        <ColoredContainer color="lightcyan">3</ColoredContainer>
+        <ColoredContainer color="lightgreen">4</ColoredContainer>
+        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+          <ColoredContainer color="lightpink" height="100%">
+            5
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+    <Title title="Autoflow 'column'" level={4} />
+    <ExampleContainer>
+      <DxcGrid templateColumns={["repeat(5, 1fr)"]} templateRows={["1fr", "1fr"]} autoFlow="column" autoColumns="1fr">
+        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={1}>
+          <ColoredContainer height="100%">1</ColoredContainer>
+        </DxcGrid.GridItem>
+        <ColoredContainer color="lightyellow">2</ColoredContainer>
+        <ColoredContainer color="lightcyan">3</ColoredContainer>
+        <ColoredContainer color="lightgreen">4</ColoredContainer>
+        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+          <ColoredContainer color="lightpink" height="100%">
+            5
+          </ColoredContainer>
+        </DxcGrid.GridItem>
+      </DxcGrid>
+    </ExampleContainer>
+  </>
+);
+
+const Container = styled.div<{ height?: string }>`
+  display: grid;
+  overflow: auto;
+  margin: 2.5rem;
+  ${({ height }) => height && `height: ${height}`};
+`;
+
+const ColoredContainer = styled.div<{ color?: string; width?: string; height?: string }>`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ color }) => color ?? "#e5d5f6"};
+  padding: 1rem;
+  border: 1px solid #a46ede;
+  border-radius: 0.5rem;
+  font-family: Open Sans, sans-serif;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #a46ede;
+
+  ${({ width }) => width && `width: ${width}`};
+  ${({ height }) => height && `height: ${height}`};
+`;

package/grid/types.d.ts

@@ -0,0 +1,115 @@
+/// <reference types="react" />
+declare type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
+declare type Gap = {
+    rowGap: Spaces;
+    columnGap?: Spaces;
+} | {
+    rowGap?: Spaces;
+    columnGap: Spaces;
+} | Spaces;
+declare type GridCell = {
+    start: number | string;
+    end: number | string;
+};
+declare type PlaceSelfValues = "auto" | "start" | "end" | "center" | "stretch" | "baseline";
+declare type PlaceContentValues = "normal" | "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | "baseline";
+declare type PlaceItemsValues = "normal" | "start" | "end" | "center" | "stretch" | "baseline";
+declare type PlaceObject<Type, Suffix extends string> = {
+    [Property in keyof Type as `${string & Property}${Capitalize<string & Suffix>}`]: Type[Property];
+};
+declare type PlaceGeneric<PlaceValues, Element extends string> = PlaceObject<{
+    justify?: PlaceValues;
+    align: PlaceValues;
+}, Element> | PlaceObject<{
+    justify: PlaceValues;
+    align?: PlaceValues;
+}, Element> | PlaceValues;
+export declare type GridItemProps = {
+    /**
+     * Sets the name of an item so that it can be referenced by a template created with the grid-template-areas property.
+     */
+    areaName?: string;
+    /**
+     * Sets the grid-column CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
+     */
+    column?: number | string | GridCell;
+    /**
+     * Sets the grid-row CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
+     */
+    row?: number | string | GridCell;
+    /**
+     * Sets the place-self CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
+     */
+    placeSelf?: PlaceGeneric<PlaceSelfValues, "self">;
+    /**
+     * Sets a custom HTML tag.
+     */
+    as?: keyof HTMLElementTagNameMap;
+    /**
+     * Custom content inside the grid container.
+     */
+    children: React.ReactNode;
+};
+declare type Props = GridItemProps & {
+    /**
+     * Sets the grid-auto-columns CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
+     */
+    autoColumns?: string;
+    /**
+     * Sets the grid-auto-flow CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
+     */
+    autoFlow?: "row" | "column" | "row dense" | "column dense";
+    /**
+     * Sets the grid-auto-rows CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows
+     */
+    autoRows?: string;
+    /**
+     * Sets the gap CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+     */
+    gap?: Spaces | Gap;
+    /**
+     * Sets the place-content CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
+     */
+    placeContent?: PlaceGeneric<PlaceContentValues, "content">;
+    /**
+     * Sets the place-items CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
+     */
+    placeItems?: PlaceGeneric<PlaceItemsValues, "items">;
+    /**
+     * Sets the grid-template-areas CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+     */
+    templateAreas?: string[];
+    /**
+     * Sets the grid-template-columns CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+     */
+    templateColumns?: string[];
+    /**
+     * Sets the grid-template-rows CSS property.
+     *
+     * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+     */
+    templateRows?: string[];
+};
+export default Props;

package/grid/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/inset/Inset.stories.tsx

@@ -225,5 +225,6 @@ const Placeholder = styled.div`
   min-height: 40px;
   min-width: 120px;
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;

package/layout/ApplicationLayout.d.ts

@@ -9,9 +9,9 @@ declare const DxcApplicationLayout: {
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
     Footer: ({ socialLinks, bottomLinks, copyright, children, padding, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
     SideNav: {
-        ({ children, title }: import("../sidenav/types").default): JSX.Element;
+        ({ title, children }: import("../sidenav/types").default): JSX.Element;
         Section: ({ children }: import("../sidenav/types").SidenavSectionPropsType) => JSX.Element;
-        Group: ({ children, title, collapsable, icon }: import("../sidenav/types").SidenavGroupPropsType) => JSX.Element;
+        Group: ({ title, collapsable, icon, children }: import("../sidenav/types").SidenavGroupPropsType) => JSX.Element;
         Link: React.ForwardRefExoticComponent<import("../sidenav/types").SidenavLinkPropsType & React.RefAttributes<HTMLAnchorElement>>;
         Title: ({ children }: import("../sidenav/types").SidenavTitlePropsType) => JSX.Element;
     };

package/layout/types.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-declare type ChildrenType = AppLayoutMainPropsType | AppLayoutSidenavPropsType;
 export declare type AppLayoutMainPropsType = {
     /**
      * Everything between the tags will be displayed as the content of the main part of the application.
@@ -35,8 +34,8 @@ declare type AppLayoutPropsType = {
      */
     footer?: React.ReactNode;
     /**
-     * The area inside the sidenav. This area can be used to render custom content.
+     * Use the DxcApplicationLayout.Main provided to render main content.
      */
-    children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
+    children: React.ReactElement<AppLayoutMainPropsType>;
 };
 export default AppLayoutPropsType;

package/main.d.ts

@@ -39,6 +39,7 @@ import DxcFlex from "./flex/Flex";
 import DxcTypography from "./typography/Typography";
 import DxcParagraph from "./paragraph/Paragraph";
 import DxcBulletedList from "./bulleted-list/BulletedList";
+import DxcGrid from "./grid/Grid";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
 import { BackgroundColorProvider } from "./BackgroundColorContext";
-export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, };
+export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, };