@dxc-technology/halstack-react 4.0.1 → 5.0.0

package/footer/Footer.test.js

@@ -0,0 +1,109 @@
+"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"));
+
+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;
+
+    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;
+
+    var socialIcon = getByRole("link");
+    expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/test");
+  });
+  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;
+
+    var link = getByText("bottom-link-text");
+    expect(link.getAttribute("href")).toBe("https://www.test.com/test");
+  });
+  test("Footer renders with copyright text", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
+      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
+    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;
+
+    expect(getByText("footer-child-text")).toBeTruthy();
+  });
+  test("Footer renders with children in mobile", function () {
+    //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;
+
+    expect(queryByText("footer-child-text")).toBeTruthy();
+  });
+  test("Footer is fully rendered", function () {
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      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;
+
+    var socialIcon = getAllByRole("link")[0];
+    expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/social");
+    var bottomLink = getByText("bottom-link-text");
+    expect(bottomLink.getAttribute("href")).toBe("https://www.test.com/bottom");
+    expect(getByText("test-copyright")).toBeTruthy();
+    expect(getByText("footer-child-text")).toBeTruthy();
+  });
+});

package/footer/Icons.d.ts

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

package/footer/Icons.js

@@ -5,73 +5,73 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.dxcLogo = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _default = _react["default"].createElement("svg", {
+var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   id: "g10",
   xmlns: "http://www.w3.org/2000/svg",
   width: "280.781",
   height: "32",
   viewBox: "0 0 280.781 32"
-}, _react["default"].createElement("title", null, "DXC Logo"), _react["default"].createElement("g", {
+}, /*#__PURE__*/_react["default"].createElement("title", null, "DXC Logo"), /*#__PURE__*/_react["default"].createElement("g", {
   id: "g12"
-}, _react["default"].createElement("path", {
+}, /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
-}), _react["default"].createElement("path", {
+}), /*#__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"
 })));
 
-exports["default"] = _default;
+exports.dxcLogo = dxcLogo;

package/footer/types.d.ts

@@ -0,0 +1,65 @@
+/// <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.SVGProps<SVGSVGElement>;
+declare type SocialLink = {
+    /**
+     * Element used as the icon for the link.
+     */
+    logo: string | SVG;
+    /**
+     * 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 = {
+    /**
+     * An array of objects representing the links that will be rendered as
+     * icons at the top-right side of the footer.
+     */
+    socialLinks?: SocialLink[];
+    /**
+     * An array of objects representing the links that will be rendered at
+     * 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.
+     */
+    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.
+     */
+    padding?: Space | Size;
+};
+export default FooterPropsType;

package/footer/types.js

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

package/header/Header.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import HeaderPropsType from "./types";
+declare const DxcHeader: {
+    ({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: HeaderPropsType): JSX.Element;
+    Dropdown: (props: any) => JSX.Element;
+};
+export default DxcHeader;