@dxc-technology/halstack-react 0.0.0-a0a27b4 → 0.0.0-a1db683

package/header/Header.test.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Header = _interopRequireDefault(require("./Header"));
+
+describe("Header component tests", function () {
+  beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: jest.fn().mockImplementation(function () {
+        return {
+          matches: false
+        };
+      })
+    });
+  });
+  test("Header renders with default logo", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], null)),
+        getByTitle = _render.getByTitle;
+
+    expect(getByTitle("DXC Logo")).toBeTruthy();
+  });
+  test("Call correct function on logo click", function () {
+    var onClick = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+      onClick: onClick
+    })),
+        getByTitle = _render2.getByTitle;
+
+    var logo = getByTitle("DXC Logo");
+
+    _react2.fireEvent.click(logo);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Header renders with correct children", function () {
+    // We need to force the offsetWidth value
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 1024
+    });
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+      content: /*#__PURE__*/_react["default"].createElement("p", null, "header-child-text")
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText("header-child-text")).toBeTruthy();
+  });
+  test("Header renders menu button in mobile", function () {
+    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+      configurable: true,
+      value: 425
+    });
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: jest.fn().mockImplementation(function () {
+        return {
+          matches: true
+        };
+      })
+    });
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+      responsiveContent: function responsiveContent(closeMenu) {
+        return /*#__PURE__*/_react["default"].createElement("p", null, "header-child-text");
+      }
+    })),
+        getByText = _render4.getByText;
+
+    expect(getByText("Menu")).toBeTruthy();
+  });
+});

package/heading/Heading.test.js

@@ -0,0 +1,186 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Heading = _interopRequireDefault(require("./Heading"));
+
+describe("Heading component tests", function () {
+  test("Heading renders with default level", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test"
+    })),
+        getByText = _render.getByText,
+        getByRole = _render.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 1
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 1", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 1
+    })),
+        getByText = _render2.getByText,
+        getByRole = _render2.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 1
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 2", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 2
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 2
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 3", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 3
+    })),
+        getByText = _render4.getByText,
+        getByRole = _render4.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 3
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 4", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 4
+    })),
+        getByText = _render5.getByText,
+        getByRole = _render5.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 4
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 5", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 5
+    })),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 5
+    })).toBeTruthy();
+  });
+  test("Heading renders with default level and as h5", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      as: "h5"
+    })),
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 5
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 1 and as h5", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 1,
+      as: "h5"
+    })),
+        getByText = _render8.getByText,
+        getByRole = _render8.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 5
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 2 and as h4", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 2,
+      as: "h4"
+    })),
+        getByText = _render9.getByText,
+        getByRole = _render9.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 4
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 3 and as h2", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 3,
+      as: "h2"
+    })),
+        getByText = _render10.getByText,
+        getByRole = _render10.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 2
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 4 and as h3", function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 4,
+      as: "h3"
+    })),
+        getByText = _render11.getByText,
+        getByRole = _render11.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 3
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 5 as h4", function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 5,
+      as: "h4"
+    })),
+        getByText = _render12.getByText,
+        getByRole = _render12.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 4
+    })).toBeTruthy();
+  });
+  test("Heading renders with level 5 and invalid as", function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      text: "my-heading-test",
+      level: 5,
+      as: "h4afdssf"
+    })),
+        getByText = _render13.getByText,
+        getByRole = _render13.getByRole;
+
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", {
+      level: 5
+    })).toBeTruthy();
+  });
+});

package/inset/Inset.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import InsetPropsType from "./types";
+export default function Inset({ space, horizontal, vertical, top, right, bottom, left, children, }: InsetPropsType): JSX.Element;

package/inset/Inset.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Inset;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function Inset(_ref) {
+  var space = _ref.space,
+      horizontal = _ref.horizontal,
+      vertical = _ref.vertical,
+      top = _ref.top,
+      right = _ref.right,
+      bottom = _ref.bottom,
+      left = _ref.left,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(StyledInset, {
+    space: space,
+    horizontal: horizontal,
+    vertical: vertical,
+    top: top,
+    right: right,
+    bottom: bottom,
+    left: left
+  }, children);
+}
+
+function getSpacingValue(spacingName) {
+  return spacingName ? spacingName : "0rem";
+}
+
+var StyledInset = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref2) {
+  var space = _ref2.space,
+      horizontal = _ref2.horizontal,
+      vertical = _ref2.vertical,
+      top = _ref2.top,
+      right = _ref2.right,
+      bottom = _ref2.bottom,
+      left = _ref2.left;
+  return "\n  padding: ".concat(getSpacingValue(top || vertical || space), " ").concat(getSpacingValue(right || horizontal || space), "\n    ").concat(getSpacingValue(bottom || vertical || space), " ").concat(getSpacingValue(left || horizontal || space), ";\n");
+});

package/inset/Inset.stories.tsx

@@ -0,0 +1,229 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import styled from "styled-components";
+import DxcStack from "./../stack/Stack";
+import DxcInset from "./Inset";
+
+export default {
+  title: "Inset",
+  component: DxcInset,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" level={4} />
+    <Container>
+      <DxcInset>
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = none" level={4} />
+    <Container>
+      <DxcInset space="0rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xxxsmall" level={4} />
+    <Container>
+      <DxcInset space="0.125rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xxsmall" level={4} />
+    <Container>
+      <DxcInset space="0.25rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xsmall" level={4} />
+    <Container>
+      <DxcInset space="0.5rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = small" level={4} />
+    <Container>
+      <DxcInset space="1rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = medium" level={4} />
+    <Container>
+      <DxcInset space="1.5rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = large" level={4} />
+    <Container>
+      <DxcInset space="2rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xlarge" level={4} />
+    <Container>
+      <DxcInset space="3rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xxlarge" level={4} />
+    <Container>
+      <DxcInset space="4rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="space = xxxlarge" level={4} />
+    <Container>
+      <DxcInset space="5rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = none" level={4} />
+    <Container>
+      <DxcInset horizontal="0rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xxxsmall" level={4} />
+    <Container>
+      <DxcInset horizontal="0.125rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xxsmall" level={4} />
+    <Container>
+      <DxcInset horizontal="0.25rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xsmall" level={4} />
+    <Container>
+      <DxcInset horizontal="0.5rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = small" level={4} />
+    <Container>
+      <DxcInset horizontal="1rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = medium" level={4} />
+    <Container>
+      <DxcInset horizontal="1.5rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = large" level={4} />
+    <Container>
+      <DxcInset horizontal="2rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xlarge" level={4} />
+    <Container>
+      <DxcInset horizontal="3rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xxlarge" level={4} />
+    <Container>
+      <DxcInset horizontal="4rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="horizontal = xxxlarge" level={4} />
+    <Container>
+      <DxcInset horizontal="5rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = none" level={4} />
+    <Container>
+      <DxcInset vertical="0rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xxxsmall" level={4} />
+    <Container>
+      <DxcInset vertical="0.125rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xxsmall" level={4} />
+    <Container>
+      <DxcInset vertical="0.25rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xsmall" level={4} />
+    <Container>
+      <DxcInset vertical="0.5rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = small" level={4} />
+    <Container>
+      <DxcInset vertical="1rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = medium" level={4} />
+    <Container>
+      <DxcInset vertical="1.5rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = large" level={4} />
+    <Container>
+      <DxcInset vertical="2rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xlarge" level={4} />
+    <Container>
+      <DxcInset vertical="3rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xxlarge" level={4} />
+    <Container>
+      <DxcInset vertical="4rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="vertical = xxxlarge" level={4} />
+    <Container>
+      <DxcInset vertical="5rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="top = xxsmall, right= medium, bottom = large and left = xxlarge" level={4} />
+    <Container>
+      <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
+        <Placeholder></Placeholder>
+      </DxcInset>
+    </Container>
+    <Title title="Inside a stack" level={4} />
+    <Container>
+      <DxcStack gutter="medium" divider>
+        <Placeholder></Placeholder>
+        <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
+          <Placeholder></Placeholder>
+        </DxcInset>
+        <Placeholder></Placeholder>
+      </DxcStack>
+    </Container>
+  </>
+);
+
+const Container = styled.div`
+  background: #f2eafa;
+  margin: 2.5rem;
+`;
+
+const Placeholder = styled.div`
+  min-height: 40px;
+  min-width: 120px;
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
+`;

package/inset/types.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+declare type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
+declare type Props = {
+    /**
+     * Applies the spacing scale to all sides.
+     */
+    space?: Spacing;
+    /**
+     * Applies the spacing scale to the left and right sides.
+     */
+    horizontal?: Spacing;
+    /**
+     * Applies the spacing scale to the top and bottom sides.
+     */
+    vertical?: Spacing;
+    /**
+     * Applies the spacing scale to the top side.
+     */
+    top?: Spacing;
+    /**
+     * Applies the spacing scale to the right side.
+     */
+    right?: Spacing;
+    /**
+     * Applies the spacing scale to the bottom side.
+     */
+    bottom?: Spacing;
+    /**
+     * Applies the spacing scale to the left side.
+     */
+    left?: Spacing;
+    /**
+     * Custom content inside the inset.
+     */
+    children: React.ReactNode;
+};
+export default Props;

package/inset/types.js

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

package/layout/ApplicationLayout.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-import AppLayoutPropsType, { AppLayoutFooterPropsType, AppLayoutMainPropsType, AppLayoutHeaderPropsType } from "./types";
+import AppLayoutPropsType, { AppLayoutSidenavPropsType, AppLayoutFooterPropsType, AppLayoutMainPropsType, AppLayoutHeaderPropsType } from "./types";
 declare const DxcApplicationLayout: {
-    ({ children }: AppLayoutPropsType): JSX.Element;
+    ({ visibilityToggleLabel, children }: AppLayoutPropsType): JSX.Element;
     Header: ({ children }: AppLayoutHeaderPropsType) => JSX.Element;
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
     Footer: ({ children }: AppLayoutFooterPropsType) => JSX.Element;
-    SideNav: (props: any) => JSX.Element;
+    SideNav: ({ ...childProps }: AppLayoutSidenavPropsType) => JSX.Element;
+    useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
 };
 export default DxcApplicationLayout;