@dxc-technology/halstack-react 0.0.0-da4b2be → 0.0.0-da9270d

package/footer/Footer.stories.tsx

@@ -26,17 +26,20 @@ const social = [
         </g>
       </svg>
     ),
+    title: "Linkedin",
   },
   {
-    href: "https://twitter.com/dxctechnology",
+    href: "https://x.com/dxctechnology",
     logo: (
-      <svg viewBox="0 0 248 204" fill="currentColor">
+      <svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="256" height="256" rx="40" fill="white" />
         <path
-          fill="#1d9bf0"
-          d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"
+          d="M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z"
+          fill="#0F1419"
         />
       </svg>
     ),
+    title: "X",
   },
   {
     href: "https://www.facebook.com/DXCTechnology/",
@@ -63,6 +66,7 @@ const social = [
         </g>
       </svg>
     ),
+    title: "Facebook",
   },
 ];
 
@@ -72,8 +76,8 @@ const bottom = [
     text: "Linkedin",
   },
   {
-    href: "https://twitter.com/dxctechnology",
-    text: "Twitter",
+    href: "https://x.com/dxctechnology",
+    text: "X",
   },
   {
     href: "https://www.facebook.com/DXCTechnology/",
@@ -91,78 +95,7 @@ const opinionatedTheme = {
     baseColor: "#000000",
     fontColor: "#ffffff",
     accentColor: "#0095ff",
-    logo: (
-      <svg id="g10" xmlns="http://www.w3.org/2000/svg" width="280.781" height="32" viewBox="0 0 280.781 32">
-        <g id="g12">
-          <path
-            id="path14"
-            d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5"
-            transform="translate(-68.528 65.45)"
-            fill="#fff"
-          />
-          <path
-            id="path16"
-            d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96"
-            transform="translate(-77.56 65.45)"
-            fill="#fff"
-          />
-          <path
-            id="path18"
-            d="M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813"
-            transform="translate(-86.019 65.583)"
-            fill="#fff"
-          />
-          <path
-            id="path20"
-            d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594"
-            transform="translate(-95.903 65.45)"
-            fill="#fff"
-          />
-          <path
-            id="path22"
-            d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058"
-            transform="translate(-105.869 65.45)"
-            fill="#fff"
-          />
-          <path
-            id="path24"
-            d="M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145"
-            transform="translate(-115.631 65.583)"
-            fill="#fff"
-          />
-          <path
-            id="path26"
-            d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786"
-            transform="translate(-126.654 65.45)"
-            fill="#fff"
-          />
-          <path
-            id="path28"
-            d="M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145"
-            transform="translate(-135.016 65.583)"
-            fill="#fff"
-          />
-          <path
-            id="path30"
-            d="M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5"
-            transform="translate(-145.284 65.583)"
-            fill="#fff"
-          />
-          <path
-            id="path32"
-            d="M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46"
-            transform="translate(-154.162 65.45)"
-            fill="#fff"
-          />
-          <path
-            id="path34"
-            d="M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892"
-            transform="translate(-21.08 69.298)"
-            fill="#fff"
-          />
-        </g>
-      </svg>
-    ),
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png",
   },
 };
 
@@ -180,6 +113,14 @@ export const Chromatic = () => (
         </div>
       </DxcFooter>
     </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused bottom and social links" theme="light" level={4} />
+      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
+        <div>
+          <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
+        </div>
+      </DxcFooter>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
@@ -197,23 +138,6 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcFooter margin="xxlarge"></DxcFooter>
     </ExampleContainer>
-    <Title title="Padding" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall padding" theme="light" level={4} />
-      <DxcFooter padding="xxsmall"></DxcFooter>
-      <Title title="Xsmall padding" theme="light" level={4} />
-      <DxcFooter padding="xsmall"></DxcFooter>
-      <Title title="Small padding" theme="light" level={4} />
-      <DxcFooter padding="small"></DxcFooter>
-      <Title title="Medium padding" theme="light" level={4} />
-      <DxcFooter padding="medium"></DxcFooter>
-      <Title title="Large padding" theme="light" level={4} />
-      <DxcFooter padding="large"></DxcFooter>
-      <Title title="Xlarge padding" theme="light" level={4} />
-      <DxcFooter padding="xlarge"></DxcFooter>
-      <Title title="Xxlarge padding" theme="light" level={4} />
-      <DxcFooter padding="xxlarge"></DxcFooter>
-    </ExampleContainer>
     <Title title="Opinionated theme" theme="light" level={2} />
     <ExampleContainer>
       <HalstackProvider theme={opinionatedTheme}>

package/footer/Footer.test.js

@@ -1,16 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
 var _Footer = _interopRequireDefault(require("./Footer.tsx"));
-
 var social = [{
   href: "https://www.test.com/social",
-  logo: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png"
+  logo: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
+  title: "test"
 }];
 var bottom = [{
   href: "https://www.test.com/bottom",
@@ -19,34 +16,30 @@ var bottom = [{
 describe("Footer component tests", function () {
   test("Footer renders with default logo", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], null)),
-        getByTitle = _render.getByTitle;
-
+      getByTitle = _render.getByTitle;
     expect(getByTitle("DXC Logo")).toBeTruthy();
   });
   test("Footer renders with social links", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
-      socialLinks: social
-    })),
-        getByRole = _render2.getByRole;
-
+        socialLinks: social
+      })),
+      getByRole = _render2.getByRole;
     var socialIcon = getByRole("link");
     expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/social");
   });
   test("Footer renders with bottom links", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
-      bottomLinks: bottom
-    })),
-        getByText = _render3.getByText;
-
+        bottomLinks: bottom
+      })),
+      getByText = _render3.getByText;
     var link = getByText("bottom-link-text");
     expect(link.getAttribute("href")).toBe("https://www.test.com/bottom");
   });
   test("Footer renders with copyright text", function () {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
-      copyright: "test-copyright"
-    })),
-        getByText = _render4.getByText;
-
+        copyright: "test-copyright"
+      })),
+      getByText = _render4.getByText;
     expect(getByText("test-copyright")).toBeTruthy();
   });
   test("Footer renders with correct children", function () {
@@ -55,10 +48,8 @@ describe("Footer component tests", function () {
       configurable: true,
       value: 1024
     });
-
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
-        getByText = _render5.getByText;
-
+      getByText = _render5.getByText;
     expect(getByText("footer-child-text")).toBeTruthy();
   });
   test("Footer renders with children in mobile", function () {
@@ -67,10 +58,8 @@ describe("Footer component tests", function () {
       configurable: true,
       value: 425
     });
-
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
-        queryByText = _render6.queryByText;
-
+      queryByText = _render6.queryByText;
     expect(queryByText("footer-child-text")).toBeTruthy();
   });
   test("Footer is fully rendered", function () {
@@ -78,17 +67,16 @@ describe("Footer component tests", function () {
       configurable: true,
       value: 1024
     });
-
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
-      socialLinks: social,
-      bottomLinks: bottom,
-      copyright: "test-copyright"
-    }, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
-        getAllByRole = _render7.getAllByRole,
-        getByText = _render7.getByText;
-
+        socialLinks: social,
+        bottomLinks: bottom,
+        copyright: "test-copyright"
+      }, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
+      getAllByRole = _render7.getAllByRole,
+      getByText = _render7.getByText;
     var socialIcon = getAllByRole("link")[0];
     expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/social");
+    expect(socialIcon.getAttribute("aria-label")).toBe("test");
     var bottomLink = getByText("bottom-link-text");
     expect(bottomLink.getAttribute("href")).toBe("https://www.test.com/bottom");
     expect(getByText("test-copyright")).toBeTruthy();

package/footer/Icons.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const dxcLogo: JSX.Element;
+import React from "react";
+export declare const dxcLogo: React.JSX.Element;

package/footer/Icons.js

@@ -1,15 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.dxcLogo = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
-var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
+var dxcLogo = exports.dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   id: "g10",
   xmlns: "http://www.w3.org/2000/svg",
   width: "100%",
@@ -72,6 +69,4 @@ var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   d: "M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892",
   transform: "translate(-21.08 69.298)",
   fill: "#fff"
-})));
-
-exports.dxcLogo = dxcLogo;
+})));

package/footer/types.d.ts

@@ -1,33 +1,31 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Size = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type SocialLink = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type SocialLink = {
+    /**
+     * URL of the page the link goes to.
+     */
+    href: string;
     /**
      * Element used as the icon for the link.
      */
     logo: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     */
+    title: string;
+};
+type BottomLink = {
     /**
      * URL of the page the link goes to.
      */
     href: string;
-};
-declare type BottomLink = {
     /**
      * Text for the link.
      */
     text: string;
-    /**
-     * URL of the page the link goes to.
-     */
-    href: string;
 };
-declare type FooterPropsType = {
+type FooterPropsType = {
     /**
      * An array of objects representing the links that will be rendered as
      * icons at the top-right side of the footer.
@@ -38,29 +36,23 @@ declare type FooterPropsType = {
      * the bottom part of the footer.
      */
     bottomLinks?: BottomLink[];
-    /**
-     * The center section of the footer. Can be used to render custom
-     * content in this area.
-     */
-    children?: React.ReactNode;
     /**
      * The text that will be displayed as copyright disclaimer.
      */
     copyright?: string;
     /**
-     * Value of the tabindex for all interactuable elements, except those
-     * inside the custom area.
+     * The center section of the footer. Can be used to render custom
+     * content in this area.
      */
-    tabIndex?: number;
+    children?: React.ReactNode;
     /**
      * Size of the top margin to be applied to the footer.
      */
-    margin?: Space | Size;
+    margin?: Space;
     /**
-     * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
-     * Size of the padding to be applied to the custom area of the component.
-     * You can pass an object with properties in order to specify different padding sizes.
+     * Value of the tabindex for all interactive elements, except those
+     * inside the custom area.
      */
-    padding?: Space | Size;
+    tabIndex?: number;
 };
 export default FooterPropsType;

package/grid/Grid.d.ts

@@ -2,6 +2,6 @@
 import GridPropsType, { GridItemProps } from "./types";
 declare const DxcGrid: {
     (props: GridPropsType): JSX.Element;
-    GridItem: import("styled-components").StyledComponent<"div", any, GridItemProps, never>;
+    Item: import("styled-components").StyledComponent<"div", any, GridItemProps, never>;
 };
 export default DxcGrid;

package/grid/Grid.js

@@ -1,24 +1,17 @@
 "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(" "), ";");
@@ -41,17 +34,14 @@ var Grid = _styledComponents["default"].div(_templateObject || (_templateObject
   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) {
@@ -65,11 +55,9 @@ var Grid = _styledComponents["default"].div(_templateObject || (_templateObject
   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, ";");
@@ -81,11 +69,8 @@ var GridItem = _styledComponents["default"].div(_templateObject2 || (_templateOb
   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;
+DxcGrid.Item = GridItem;
+var _default = exports["default"] = DxcGrid;

package/grid/Grid.stories.tsx

@@ -56,16 +56,16 @@ export const Chromatic = () => (
     <Title title="Place self" level={4} />
     <ExampleContainer>
       <DxcGrid templateRows={["repeat(3, 100px)"]}>
-        <DxcGrid.GridItem placeSelf="center">
+        <DxcGrid.Item placeSelf="center">
           <ColoredContainer height="50px" width="50px" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem placeSelf={{ alignSelf: "end" }}>
+        </DxcGrid.Item>
+        <DxcGrid.Item placeSelf={{ alignSelf: "end" }}>
           <ColoredContainer height="40px" width="40px" />
           <ColoredContainer height="30px" width="30px" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem placeSelf={{ alignSelf: "center", justifySelf: "end" }}>
+        </DxcGrid.Item>
+        <DxcGrid.Item placeSelf={{ alignSelf: "center", justifySelf: "end" }}>
           <ColoredContainer height="50px" width="50px" />
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
     <Title title="Halstack layout using template areas" level={4} />
@@ -76,33 +76,33 @@ export const Chromatic = () => (
         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">
+        <DxcGrid.Item areaName="header" as="header">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem areaName="main" as="main">
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="main" as="main">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem areaName="sidenav" as="nav">
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="sidenav" as="nav">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem areaName="footer" as="footer">
+        </DxcGrid.Item>
+        <DxcGrid.Item areaName="footer" as="footer">
           <ColoredContainer height="100%" />
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </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 }}>
+        <DxcGrid.Item column={{ start: 1, end: -1 }}>
           <ColoredContainer color="yellow" height="100%">
             Header
           </ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem column={1}>
+        </DxcGrid.Item>
+        <DxcGrid.Item column={1}>
           <ColoredContainer color="lightcyan" height="100%">
             Sidenav
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
         <DxcGrid
           column={{ start: 2, end: -1 }}
           templateRows={["repeat(4, 1fr)"]}
@@ -118,11 +118,11 @@ export const Chromatic = () => (
           <ColoredContainer />
           <ColoredContainer />
         </DxcGrid>
-        <DxcGrid.GridItem column={{ start: 1, end: -1 }}>
+        <DxcGrid.Item column={{ start: 1, end: -1 }}>
           <ColoredContainer color="black" height="100%">
             Footer
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
     <Title title="Overlapping" level={4} />
@@ -141,53 +141,53 @@ export const Chromatic = () => (
     <Title title="Implicit rows and columns" level={4} />
     <ExampleContainer>
       <DxcGrid templateColumns={["50px"]} templateRows={["50px", "50px"]} autoRows="50px" autoColumns="50px">
-        <DxcGrid.GridItem>
+        <DxcGrid.Item>
           <ColoredContainer height="50px">1</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={2}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={2}>
           <ColoredContainer height="50px">3</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={6} column={1}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={6} column={1}>
           <ColoredContainer height="50px">5</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={3}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={3}>
           <ColoredContainer height="50px">4</ColoredContainer>
-        </DxcGrid.GridItem>
-        <DxcGrid.GridItem row={{ start: 1, end: 2 }} column={{ start: 5, end: "span 2" }}>
+        </DxcGrid.Item>
+        <DxcGrid.Item row={{ start: 1, end: 2 }} column={{ start: 5, end: "span 2" }}>
           <ColoredContainer height="50px">2</ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </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}>
+        <DxcGrid.Item row={{ start: 1, end: "span 2" }} column={1}>
           <ColoredContainer height="100%">1</ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
         <ColoredContainer color="lightyellow">2</ColoredContainer>
         <ColoredContainer color="lightcyan">3</ColoredContainer>
         <ColoredContainer color="lightgreen">4</ColoredContainer>
-        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={-2}>
           <ColoredContainer color="lightpink" height="100%">
             5
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </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}>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={1}>
           <ColoredContainer height="100%">1</ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
         <ColoredContainer color="lightyellow">2</ColoredContainer>
         <ColoredContainer color="lightcyan">3</ColoredContainer>
         <ColoredContainer color="lightgreen">4</ColoredContainer>
-        <DxcGrid.GridItem row={{ start: 1, end: -1 }} column={-2}>
+        <DxcGrid.Item row={{ start: 1, end: -1 }} column={-2}>
           <ColoredContainer color="lightpink" height="100%">
             5
           </ColoredContainer>
-        </DxcGrid.GridItem>
+        </DxcGrid.Item>
       </DxcGrid>
     </ExampleContainer>
   </>