@dxc-technology/halstack-react 0.0.0-ff43881 → 0.0.0-ff5083e

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.js

@@ -36,40 +36,7 @@ function Inset(_ref) {
 }
 
 function getSpacingValue(spacingName) {
-  switch (spacingName) {
-    case "none":
-      return "0rem";
-
-    case "xxxsmall":
-      return "0.125rem";
-
-    case "xxsmall":
-      return "0.25rem";
-
-    case "xsmall":
-      return "0.5rem";
-
-    case "small":
-      return "1rem";
-
-    case "medium":
-      return "1.5rem";
-
-    case "large":
-      return "2rem";
-
-    case "xlarge":
-      return "3rem";
-
-    case "xxlarge":
-      return "4rem";
-
-    case "xxxlarge":
-      return "5rem";
-
-    default:
-      return "0rem";
-  }
+  return spacingName ? spacingName : "0rem";
 }
 
 var StyledInset = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"])), function (_ref2) {

package/inset/Inset.stories.tsx

@@ -19,187 +19,187 @@ export const Chromatic = () => (
     </Container>
     <Title title="space = none" level={4} />
     <Container>
-      <DxcInset space="none">
+      <DxcInset space="0rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xxxsmall" level={4} />
     <Container>
-      <DxcInset space="xxxsmall">
+      <DxcInset space="0.125rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xxsmall" level={4} />
     <Container>
-      <DxcInset space="xxsmall">
+      <DxcInset space="0.25rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xsmall" level={4} />
     <Container>
-      <DxcInset space="xsmall">
+      <DxcInset space="0.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = small" level={4} />
     <Container>
-      <DxcInset space="small">
+      <DxcInset space="1rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = medium" level={4} />
     <Container>
-      <DxcInset space="medium">
+      <DxcInset space="1.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = large" level={4} />
     <Container>
-      <DxcInset space="large">
+      <DxcInset space="2rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xlarge" level={4} />
     <Container>
-      <DxcInset space="xlarge">
+      <DxcInset space="3rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xxlarge" level={4} />
     <Container>
-      <DxcInset space="xxlarge">
+      <DxcInset space="4rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="space = xxxlarge" level={4} />
     <Container>
-      <DxcInset space="xxxlarge">
+      <DxcInset space="5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = none" level={4} />
     <Container>
-      <DxcInset horizontal="none">
+      <DxcInset horizontal="0rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xxxsmall" level={4} />
     <Container>
-      <DxcInset horizontal="xxxsmall">
+      <DxcInset horizontal="0.125rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xxsmall" level={4} />
     <Container>
-      <DxcInset horizontal="xxsmall">
+      <DxcInset horizontal="0.25rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xsmall" level={4} />
     <Container>
-      <DxcInset horizontal="xsmall">
+      <DxcInset horizontal="0.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = small" level={4} />
     <Container>
-      <DxcInset horizontal="small">
+      <DxcInset horizontal="1rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = medium" level={4} />
     <Container>
-      <DxcInset horizontal="medium">
+      <DxcInset horizontal="1.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = large" level={4} />
     <Container>
-      <DxcInset horizontal="large">
+      <DxcInset horizontal="2rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xlarge" level={4} />
     <Container>
-      <DxcInset horizontal="xlarge">
+      <DxcInset horizontal="3rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xxlarge" level={4} />
     <Container>
-      <DxcInset horizontal="xxlarge">
+      <DxcInset horizontal="4rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="horizontal = xxxlarge" level={4} />
     <Container>
-      <DxcInset horizontal="xxxlarge">
+      <DxcInset horizontal="5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = none" level={4} />
     <Container>
-      <DxcInset vertical="none">
+      <DxcInset vertical="0rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xxxsmall" level={4} />
     <Container>
-      <DxcInset vertical="xxxsmall">
+      <DxcInset vertical="0.125rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xxsmall" level={4} />
     <Container>
-      <DxcInset vertical="xxsmall">
+      <DxcInset vertical="0.25rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xsmall" level={4} />
     <Container>
-      <DxcInset vertical="xsmall">
+      <DxcInset vertical="0.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = small" level={4} />
     <Container>
-      <DxcInset vertical="small">
+      <DxcInset vertical="1rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = medium" level={4} />
     <Container>
-      <DxcInset vertical="medium">
+      <DxcInset vertical="1.5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = large" level={4} />
     <Container>
-      <DxcInset vertical="large">
+      <DxcInset vertical="2rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xlarge" level={4} />
     <Container>
-      <DxcInset vertical="xlarge">
+      <DxcInset vertical="3rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xxlarge" level={4} />
     <Container>
-      <DxcInset vertical="xxlarge">
+      <DxcInset vertical="4rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="vertical = xxxlarge" level={4} />
     <Container>
-      <DxcInset vertical="xxxlarge">
+      <DxcInset vertical="5rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
     <Title title="top = xxsmall, right= medium, bottom = large and left = xxlarge" level={4} />
     <Container>
-      <DxcInset top="xxsmall" right="medium" bottom="large" left="xxlarge">
+      <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
         <Placeholder></Placeholder>
       </DxcInset>
     </Container>
@@ -207,7 +207,7 @@ export const Chromatic = () => (
     <Container>
       <DxcStack gutter="medium" divider>
         <Placeholder></Placeholder>
-        <DxcInset top="xxsmall" right="medium" bottom="large" left="xxlarge">
+        <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
           <Placeholder></Placeholder>
         </DxcInset>
         <Placeholder></Placeholder>

package/inset/types.d.ts

@@ -1,13 +1,37 @@
 /// <reference types="react" />
-declare type Spacing = "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
+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/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;