@dxc-technology/halstack-react 0.0.0-fdc49d2 → 0.0.0-feed711

package/header/Header.stories.tsx

@@ -26,15 +26,6 @@ export const Chromatic = () => (
       <Title title="Underlined with text" theme="light" level={4} />
       <DxcHeader underlined content={<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>} />
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Responsive" theme="light" level={4} />
-      <div style={{ width: "400px" }}>
-        <DxcHeader
-          responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
-          underlined
-        />
-      </div>
-    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
@@ -104,59 +95,78 @@ export const Chromatic = () => (
   </>
 );
 
-const RespHeader = () => (
+export const ResponsiveHeader = () => (
   <ExampleContainer>
     <Title title="Responsive" theme="light" level={4} />
-    <div style={{ maxWidth: "400px" }}>
-      <DxcHeader
-        responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
-        underlined
-      />
-    </div>
+    <DxcHeader
+      content={<DxcHeader.Dropdown options={options} label="Default Dropdown" />}
+      responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
+      underlined
+    />
   </ExampleContainer>
 );
 
 const RespHeaderFocus = () => (
   <ExampleContainer pseudoState="pseudo-focus">
-    <Title title="Responsive" theme="light" level={4} />
-    <div style={{ maxWidth: "400px" }}>
-      <DxcHeader
-        responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>}
-        underlined
-      />
-    </div>
+    <Title title="Responsive focus" theme="light" level={4} />
+    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
   </ExampleContainer>
 );
 
 const RespHeaderHover = () => (
   <ExampleContainer pseudoState="pseudo-hover">
-    <Title title="Responsive" theme="light" level={4} />
-    <div style={{ maxWidth: "400px" }}>
-      <DxcHeader
-        responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>}
-        underlined
-      />
-    </div>
+    <Title title="Responsive hover" theme="light" level={4} />
+    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
   </ExampleContainer>
 );
 
-export const ResponsiveHeader = RespHeader.bind({});
-ResponsiveHeader.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await waitFor(() => canvas.findByText("Menu"));
-  await userEvent.click(canvas.getByText("Menu"));
+const RespHeaderMenu = () => (
+  <ExampleContainer>
+    <Title title="Responsive menu" theme="light" level={4} />
+    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
+  </ExampleContainer>
+);
+
+ResponsiveHeader.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [720] },
 };
 
 export const ResponsiveHeaderFocus = RespHeaderFocus.bind({});
+ResponsiveHeaderFocus.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [720] },
+};
 ResponsiveHeaderFocus.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await waitFor(() => canvas.findByText("Menu"));
-  await userEvent.click(canvas.getByText("Menu"));
 };
 
 export const ResponsiveHeaderHover = RespHeaderHover.bind({});
+ResponsiveHeaderHover.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [720] },
+};
 ResponsiveHeaderHover.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await waitFor(() => canvas.findByText("Menu"));
+};
+
+export const ResponsiveHeaderMenu = RespHeaderMenu.bind({});
+ResponsiveHeaderMenu.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [720] },
+};
+ResponsiveHeaderMenu.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await waitFor(() => canvas.findByText("Menu"));
   await userEvent.click(canvas.getByText("Menu"));
 };

package/header/Header.test.js

@@ -8,9 +8,17 @@ var _react2 = require("@testing-library/react");
 
 var _Header = _interopRequireDefault(require("./Header"));
 
-var _linkedin = _interopRequireDefault(require("../../app/src/images/linkedin.svg"));
-
 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;
@@ -50,6 +58,14 @@ describe("Header component tests", function () {
       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) {

package/header/Icons.js

@@ -23,12 +23,12 @@ var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   id: "path14",
   d: "M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322",
   transform: "translate(-21.028 65.555)",
-  fill: "#100f0d"
+  fill: "#010101"
 }), /*#__PURE__*/_react["default"].createElement("path", {
   id: "path16",
   d: "M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978",
   transform: "translate(-21.049 88.739)",
-  fill: "#100f0d"
+  fill: "#603494"
 }))));
 
 exports.dxcLogo = dxcLogo;

package/header/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Padding = {
+export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+export declare type Padding = {
     top?: Space;
     bottom?: Space;
     left?: Space;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import Title from "../../.storybook/components/Title";
 import styled from "styled-components";
-import DxcStack from "./../stack/Stack";
+import DxcFlex from "./../flex/Flex";
 import DxcInset from "./Inset";
 
 export default {
@@ -19,199 +19,199 @@ 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>
-    <Title title="Inside a stack" level={4} />
+    <Title title="Inside a flex column" level={4} />
     <Container>
-      <DxcStack gutter="medium" divider>
+      <DxcFlex direction="column" gap="0.75rem">
         <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>
-      </DxcStack>
+      </DxcFlex>
     </Container>
   </>
 );

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,20 @@
-/// <reference types="react" />
-import AppLayoutPropsType, { AppLayoutFooterPropsType, AppLayoutMainPropsType, AppLayoutHeaderPropsType } from "./types";
+import React from "react";
+import AppLayoutPropsType, { AppLayoutMainPropsType } from "./types";
 declare const DxcApplicationLayout: {
-    ({ children }: AppLayoutPropsType): JSX.Element;
-    Header: ({ children }: AppLayoutHeaderPropsType) => JSX.Element;
+    ({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
+    Header: {
+        ({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: import("../header/types").default): JSX.Element;
+        Dropdown: (props: any) => JSX.Element;
+    };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
-    Footer: ({ children }: AppLayoutFooterPropsType) => JSX.Element;
-    SideNav: (props: any) => JSX.Element;
+    Footer: ({ socialLinks, bottomLinks, copyright, children, padding, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
+    SideNav: {
+        ({ children, title }: import("../sidenav/types").default): JSX.Element;
+        Section: ({ children }: import("../sidenav/types").SidenavSectionPropsType) => JSX.Element;
+        Group: ({ children, title, collapsable, icon }: import("../sidenav/types").SidenavGroupPropsType) => JSX.Element;
+        Link: React.ForwardRefExoticComponent<import("../sidenav/types").SidenavLinkPropsType & React.RefAttributes<HTMLAnchorElement>>;
+        Title: ({ children }: import("../sidenav/types").SidenavTitlePropsType) => JSX.Element;
+    };
+    useResponsiveSidenavVisibility: () => (isSidenavVisible: boolean) => void;
 };
 export default DxcApplicationLayout;