@dxc-technology/halstack-react 0.0.0-4254e6c → 0.0.0-4299a60

package/header/Header.stories.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import DxcHeader from "./Header";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { userEvent, waitFor, within } from "@storybook/testing-library";
+
+export default {
+  title: "Header",
+  component: DxcHeader,
+};
+
+const options: any = [
+  {
+    value: 1,
+    label: "Amazon",
+  },
+];
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default with dropdown" theme="light" level={4} />
+      <DxcHeader content={<DxcHeader.Dropdown options={options} label="Default Dropdown" />} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <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} />
+      <DxcHeader underlined margin="xxsmall" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcHeader underlined margin="xsmall" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcHeader underlined margin="small" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcHeader underlined margin="medium" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcHeader underlined margin="large" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcHeader underlined margin="xlarge" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcHeader underlined margin="xxlarge" />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>
+    </ExampleContainer>
+
+    <Title title="Paddings" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall padding" theme="light" level={4} />
+      <DxcHeader underlined padding="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall padding" theme="light" level={4} />
+      <DxcHeader underlined padding="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small padding" theme="light" level={4} />
+      <DxcHeader underlined padding="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium padding" theme="light" level={4} />
+      <DxcHeader underlined padding="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large padding" theme="light" level={4} />
+      <DxcHeader underlined padding="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge padding" theme="light" level={4} />
+      <DxcHeader underlined padding="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge padding" theme="light" level={4} />
+      <DxcHeader underlined padding="xxlarge" />
+    </ExampleContainer>
+  </>
+);
+
+const RespHeader = () => (
+  <ExampleContainer>
+    <Title title="Responsive" theme="light" level={4} />
+    <div style={{ maxWidth: "400px" }}>
+      <DxcHeader
+        responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
+        underlined
+      />
+    </div>
+  </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>
+  </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>
+  </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"));
+};
+
+export const ResponsiveHeaderFocus = RespHeaderFocus.bind({});
+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.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await waitFor(() => canvas.findByText("Menu"));
+  await userEvent.click(canvas.getByText("Menu"));
+};

package/header/Icons.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hamburgerIcon = exports.dxcLogo = exports.closeIcon = void 0;
+exports.dxcLogo = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -31,29 +31,4 @@ var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   fill: "#100f0d"
 }))));
 
-exports.dxcLogo = dxcLogo;
-
-var closeIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  height: "24",
-  viewBox: "0 0 24 24",
-  width: "24"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M0 0h24v24H0z",
-  fill: "none"
-}));
-
-exports.closeIcon = closeIcon;
-
-var hamburgerIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  width: "24",
-  height: "24"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"
-}));
-
-exports.hamburgerIcon = hamburgerIcon;
+exports.dxcLogo = dxcLogo;

package/header/types.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Padding = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type Props = {
+    /**
+     * Wether a contrast line should appear at the bottom of the header.
+     */
+    underlined?: boolean;
+    /**
+     * Content showed in the header. Take into account that the component applies styles
+     * for the first child in the content, so we recommend the use of React.Fragment
+     * to be applied correctly. Otherwise, the styles can be modified.
+     */
+    content?: React.ReactNode;
+    /**
+     * Content showed in responsive version. It receives the close menu handler that can
+     * be used to add that functionality when a element is clicked.
+     */
+    responsiveContent?: (closeHandler: () => void) => React.ReactNode;
+    /**
+     * This function will be called when the user clicks the header logo.
+     */
+    onClick?: () => void;
+    /**
+     * Size of the bottom margin to be applied to the header
+     * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     */
+    margin?: Space;
+    /**
+     * Size of the padding to be applied to the custom area of the component
+     * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in
+     * order to specify different padding sizes.
+     */
+    padding?: Space | Padding;
+    /**
+     * Value of the tabindex for all interactuable elements, except those inside the
+     * custom area.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/header/types.js

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

package/heading/Heading.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import HeadingPropsType from "./types";
+declare const DxcHeading: ({ level, text, as, weight, margin }: HeadingPropsType) => JSX.Element;
+export default DxcHeading;

package/heading/Heading.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -19,11 +17,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
@@ -37,8 +33,7 @@ var DxcHeading = function DxcHeading(_ref) {
       _ref$text = _ref.text,
       text = _ref$text === void 0 ? "" : _ref$text,
       as = _ref.as,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? "" : _ref$weight,
+      weight = _ref.weight,
       margin = _ref.margin;
   var colorsTheme = (0, _useTheme["default"])();
 
@@ -51,19 +46,19 @@ var DxcHeading = function DxcHeading(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(HeadingContainer, {
     margin: margin
   }, level === 1 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel1, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text) : level === 2 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel2, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text) : level === 3 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel3, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text) : level === 4 ? /*#__PURE__*/_react["default"].createElement(HeadingLevel4, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text) : /*#__PURE__*/_react["default"].createElement(HeadingLevel5, {
-    as: checkValidAs(as),
+    as: checkValidAs(),
     weight: weight
   }, text)));
 };
@@ -160,17 +155,5 @@ var HeadingLevel5 = _styledComponents["default"].h5(_templateObject6 || (_templa
   return props.theme.level5FontColor;
 });
 
-DxcHeading.propTypes = {
-  level: _propTypes["default"].number,
-  text: _propTypes["default"].string,
-  as: _propTypes["default"].oneOf(["h1", "h2", "h3", "h4", "h5"]),
-  weight: _propTypes["default"].oneOf(["light", "normal", "bold", ""]),
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
-};
 var _default = DxcHeading;
 exports["default"] = _default;

package/heading/Heading.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import DxcHeading from "./Heading";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "Heading",
+  component: DxcHeading,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Levels" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Level 1" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" />
+      <Title title="Level 2" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={2} />
+      <Title title="Level 3" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={3} />
+      <Title title="Level 4" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={4} />
+      <Title title="Level 5" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={5} />
+    </ExampleContainer>
+    <Title title="Weights" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="'light' Weight" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={2} weight="light" />
+      <Title title="'normal' Weight" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" level={4} weight="normal" />
+      <Title title="'bold' Weight" theme="light" level={4} />
+      <DxcHeading text="Heading for sections within the page" weight="bold" />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall" theme="light" level={4} />
+      <DxcHeading text="Xxsmall" margin="xxsmall" />
+      <Title title="Xsmall" theme="light" level={4} />
+      <DxcHeading text="Xsmall" margin="xsmall" />
+      <Title title="Small" theme="light" level={4} />
+      <DxcHeading text="Small" margin="small" />
+      <Title title="Medium" theme="light" level={4} />
+      <DxcHeading text="Medium" margin="medium" />
+      <Title title="Large" theme="light" level={4} />
+      <DxcHeading text="Large" margin="large" />
+      <Title title="Xlarge" theme="light" level={4} />
+      <DxcHeading text="Xlarge" margin="xlarge" />
+      <Title title="Xxlarge" theme="light" level={4} />
+      <DxcHeading text="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+  </>
+);

package/heading/types.d.ts

@@ -0,0 +1,33 @@
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type Props = {
+    /**
+     * Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
+     * The html tag of the heading will be the one specified in the 'as' prop.
+     * If 'as' is not specified, the html tag of the heading is the one specified in the 'level' prop.
+     */
+    level?: 1 | 2 | 3 | 4 | 5;
+    /**
+     * Heading text.
+     */
+    text: string;
+    /**
+     * Specifies the html tag of the heading.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5";
+    /**
+     * Modifies the default weight of the heading.
+     */
+    weight?: "light" | "normal" | "bold";
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+};
+export default Props;

package/heading/types.js

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

package/input-text/InputText.js

@@ -39,11 +39,11 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _Icons = _interopRequireDefault(require("./Icons"));
 
-var _BackgroundColorContext = _interopRequireWildcard(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireWildcard(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 

package/layout/ApplicationLayout.d.ts

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

package/layout/ApplicationLayout.js

@@ -21,13 +21,11 @@ var _main = require("../main");
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _variables = require("../common/variables.js");
 
 var _Icons = require("./Icons");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
@@ -55,23 +53,14 @@ var Footer = function Footer(_ref3) {
 };
 
 var SideNav = function SideNav(props) {
-  var displayArrow = props.displayArrow,
-      mode = props.mode,
+  var _props$displayArrow = props.displayArrow,
+      displayArrow = _props$displayArrow === void 0 ? true : _props$displayArrow,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? "overlay" : _props$mode,
       childProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_main.DxcSidenav, childProps, childProps.children);
 };
 
-SideNav.propTypes = {
-  mode: _propTypes["default"].oneOf(["overlay", "push", ""]),
-  displayArrow: _propTypes["default"].bool,
-  padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  })])
-};
-
 var defaultFooter = function defaultFooter() {
   return /*#__PURE__*/_react["default"].createElement(_main.DxcFooter, {
     copyright: "\xA9 DXC Technology ".concat(year, "\u200B\u200B\u200B\u200B. All rights reserved."),
@@ -120,7 +109,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
       isSideNavVisible = _useState2[0],
       setIsSideNavVisible = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       isResponsive = _useState4[0],
       setIsResponsive = _useState4[1];
@@ -149,7 +138,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
 
   var handleResize = function handleResize(width) {
     if (width) {
-      if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
+      setIsResponsive(width <= _variables.responsiveSizes.tablet);
       setIsSideNavVisible(true);
     }
   };
@@ -180,6 +169,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref4) {
   }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, null, header), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(SideNavArrowContainer, {
     isSideNavVisible: isSideNavVisible
   }, sideNav, /*#__PURE__*/_react["default"].createElement(ArrowContainer, null, sideNav && (displayArrow || isResponsive) && /*#__PURE__*/_react["default"].createElement(ArrowTrigger, {
+    role: "button",
     tabIndex: 0,
     onClick: handleSidenav,
     isSideNavVisible: isSideNavVisible