@dxc-technology/halstack-react 0.0.0-8719165 → 0.0.0-87842b8

package/footer/Footer.stories.tsx

@@ -2,12 +2,15 @@ import React from "react";
 import DxcFooter from "./Footer";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
+import DxcFlex from "../flex/Flex";
+import DxcTypography from "../typography/Typography";
 
 const social = [
   {
     href: "https://www.linkedin.com/company/dxctechnology",
     logo: (
-      <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 438.536 438.536" fill="currentColor">
+      <svg version="1.1" x="0px" y="0px" viewBox="0 0 438.536 438.536" fill="currentColor">
         <g>
           <path
             d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
@@ -25,17 +28,26 @@ const social = [
         </g>
       </svg>
     ),
+    title: "Linkedin",
   },
   {
-    href: "https://twitter.com/dxctechnology",
-    logo: "http://assets.stickpng.com/images/580b57fcd9996e24bc43c53e.png",
+    href: "https://x.com/dxctechnology",
+    logo: (
+      <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
+          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/",
     logo: (
       <svg
         version="1.1"
-        id="Capa_1"
         x="0px"
         y="0px"
         viewBox="0 0 438.536 438.536"
@@ -55,6 +67,25 @@ const social = [
         </g>
       </svg>
     ),
+    title: "Facebook",
+  },
+];
+
+const socialMaterialIcons = [
+  {
+    href: "https://www.linkedin.com/company/dxctechnology",
+    logo: "person",
+    title: "Linkedin",
+  },
+  {
+    href: "https://x.com/dxctechnology",
+    logo: "group",
+    title: "X",
+  },
+  {
+    href: "https://www.facebook.com/DXCTechnology/",
+    logo: "thumb_up",
+    title: "Facebook",
   },
 ];
 
@@ -64,8 +95,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/",
@@ -78,6 +109,20 @@ export default {
   component: DxcFooter,
 };
 
+const opinionatedTheme = {
+  footer: {
+    baseColor: "#000000",
+    fontColor: "#ffffff",
+    accentColor: "#0095ff",
+    logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png",
+  },
+};
+
+const info = [
+  { label: "Example Label", text: "Example" },
+  { label: "Example Label", text: "Example" },
+];
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -92,6 +137,34 @@ export const Chromatic = () => (
         </div>
       </DxcFooter>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With children, copyright, bottom links and social links from material" theme="light" level={4} />
+      <DxcFooter copyright="Copyright" socialLinks={socialMaterialIcons} bottomLinks={bottom}>
+        <div>
+          <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
+        </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>
+    <ExampleContainer>
+      <Title title="Reduced" theme="light" level={4} />
+      <DxcFooter mode="reduced">
+        <DxcFlex justifyContent="center" alignItems="center" gap={"1rem"}>
+          {info.map((tag, index) => (
+            <DxcTypography color="white" key={`tag${index}${tag.label}${tag.text}`}>
+              {tag.label}: {tag.text}
+            </DxcTypography>
+          ))}
+        </DxcFlex>
+      </DxcFooter>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
@@ -109,22 +182,15 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcFooter margin="xxlarge"></DxcFooter>
     </ExampleContainer>
-    <Title title="Padding" theme="light" level={2} />
+    <Title title="Opinionated theme" 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>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
+          <div>
+            <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
+          </div>
+        </DxcFooter>
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/footer/Footer.test.js

@@ -1,80 +1,65 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
-var _linkedin = _interopRequireDefault(require("../../app/src/images/linkedin.svg"));
-
-var _Footer = _interopRequireDefault(require("./Footer"));
-
+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",
+  title: "test"
+}];
+var bottom = [{
+  href: "https://www.test.com/bottom",
+  text: "bottom-link-text"
+}];
 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 social = [{
-      href: "https://www.test.com/test",
-      logo: _linkedin["default"]
-    }];
-
     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/test");
+    expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/social");
   });
   test("Footer renders with bottom links", function () {
-    var bottom = [{
-      href: "https://www.test.com/test",
-      text: "bottom-link-text"
-    }];
-
     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/test");
+    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 () {
-    //We need to force the offsetWidth value
+    // We need to force the offsetWidth value
     Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
       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 () {
-    //425 is mobile width
+    // 425 is mobile width
     Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
       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 () {
@@ -82,25 +67,16 @@ describe("Footer component tests", function () {
       configurable: true,
       value: 1024
     });
-    var social = [{
-      href: "https://www.test.com/social",
-      logo: _linkedin["default"]
-    }];
-    var bottom = [{
-      href: "https://www.test.com/bottom",
-      text: "bottom-link-text"
-    }];
-
     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,3 @@
-/// <reference types="react" />
-export declare const dxcLogo: JSX.Element;
+import React from "react";
+export declare const dxcLogo: React.JSX.Element;
+export declare const dxcSmallLogo: 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;
-
+exports.dxcSmallLogo = 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%",
@@ -73,5 +70,67 @@ var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   transform: "translate(-21.08 69.298)",
   fill: "#fff"
 })));
-
-exports.dxcLogo = dxcLogo;
+var dxcSmallLogo = exports.dxcSmallLogo = /*#__PURE__*/_react["default"].createElement("svg", {
+  id: "g10",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "100%",
+  height: "16",
+  viewBox: "0 0 280.781 32"
+}, /*#__PURE__*/_react["default"].createElement("title", null, "DXC Logo"), /*#__PURE__*/_react["default"].createElement("g", {
+  id: "g12"
+}, /*#__PURE__*/_react["default"].createElement("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"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  id: "path26",
+  d: "M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786",
+  transform: "translate(-126.654 65.45)",
+  fill: "#fff"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}), /*#__PURE__*/_react["default"].createElement("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"
+})));

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.
+     * Material Symbol name or SVG element as the icon used 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,28 +36,29 @@ declare type FooterPropsType = {
      * the bottom part of the footer.
      */
     bottomLinks?: BottomLink[];
+    /**
+     * The text that will be displayed as copyright disclaimer.
+     */
+    copyright?: string;
     /**
      * 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.
+     * Size of the top margin to be applied to the footer.
      */
-    copyright?: string;
+    margin?: Space;
     /**
-     * Value of the tabindex for all interactuable elements, except those
+     * Value of the tabindex for all interactive elements, except those
      * inside the custom area.
      */
     tabIndex?: number;
     /**
-     * Size of the top margin to be applied to the footer.
-     */
-    margin?: Space | Size;
-    /**
-     * 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.
+     * Determines the visual style and layout
+     * - "default": The default mode with full content and styling.
+     * - "reduced": A reduced mode with minimal content and styling.
      */
-    padding?: Space | Size;
+    mode?: "default" | "reduced";
 };
 export default FooterPropsType;

package/grid/Grid.d.ts

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

package/grid/Grid.js

@@ -0,0 +1,76 @@
+"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.Item = GridItem;
+var _default = exports["default"] = DxcGrid;