@dxc-technology/halstack-react 0.0.0-97eade8 → 0.0.0-9852702

package/dialog/Dialog.js

@@ -1,131 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _variables = require("../common/variables");
-
-var _useTheme = _interopRequireDefault(require("../useTheme"));
-
-var _BackgroundColorContext = require("../BackgroundColorContext");
-
-var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
-
-var _reactDom = require("react-dom");
-
-var _FocusLock = _interopRequireDefault(require("../utils/FocusLock"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var closeIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  role: "img",
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24",
-  viewBox: "0 0 24 24",
-  fill: "currentColor"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M0 0h24v24H0V0z",
-  fill: "none"
-}), /*#__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 12 19 6.41z"
-}));
-
-var DxcDialog = function DxcDialog(_ref) {
-  var _ref$isCloseVisible = _ref.isCloseVisible,
-      isCloseVisible = _ref$isCloseVisible === void 0 ? true : _ref$isCloseVisible,
-      onCloseClick = _ref.onCloseClick,
-      children = _ref.children,
-      _ref$overlay = _ref.overlay,
-      overlay = _ref$overlay === void 0 ? true : _ref$overlay,
-      onBackgroundClick = _ref.onBackgroundClick,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var colorsTheme = (0, _useTheme["default"])();
-  var translatedLabels = (0, _useTranslatedLabels["default"])();
-  (0, _react.useEffect)(function () {
-    var handleKeyDown = function handleKeyDown(event) {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return function () {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [onCloseClick]);
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.dialog
-  }, /*#__PURE__*/_react["default"].createElement(BodyStyle, null), /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement(_FocusLock["default"], null, /*#__PURE__*/_react["default"].createElement(DialogContainer, null, overlay && /*#__PURE__*/_react["default"].createElement(Overlay, {
-    onClick: function onClick() {
-      onBackgroundClick === null || onBackgroundClick === void 0 ? void 0 : onBackgroundClick();
-    }
-  }), /*#__PURE__*/_react["default"].createElement(Dialog, {
-    role: "dialog",
-    "aria-modal": overlay,
-    isCloseVisible: isCloseVisible
-  }, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
-    color: colorsTheme.dialog.backgroundColor
-  }, children), isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconAction, {
-    onClick: function onClick() {
-      onCloseClick === null || onCloseClick === void 0 ? void 0 : onCloseClick();
-    },
-    "aria-label": translatedLabels.dialog.closeIconAriaLabel,
-    tabIndex: tabIndex
-  }, closeIcon)))), document.body));
-};
-
-var BodyStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  body {\n    overflow: hidden;\n  }\n"])));
-
-var DialogContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  z-index: 2147483647;\n"])));
-
-var Overlay = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  inset: 0;\n  height: 100%;\n  background-color: ", ";\n"])), function (props) {
-  return props.theme.overlayColor;
-});
-
-var Dialog = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  box-sizing: border-box;\n  max-width: 80%;\n  min-width: 696px;\n  border-radius: 4px;\n  background-color: ", ";\n  ", "\n  box-shadow: ", ";\n  z-index: 2147483647;\n\n  @media (max-width: ", "rem) {\n    max-width: 92%;\n    min-width: 92%;\n  }\n"])), function (props) {
-  return props.theme.backgroundColor;
-}, function (props) {
-  return props.isCloseVisible && "min-height: 72px;";
-}, function (props) {
-  return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
-}, _variables.responsiveSizes.medium);
-
-var CloseIconAction = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  all: unset;\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  box-shadow: 0 0 0 2px transparent;\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  cursor: pointer;\n  z-index: 1;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  &:hover {\n    background-color: #f2f2f2;\n  }\n  &:active {\n    background-color: #cccccc;\n  }\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
-  return props.theme.closeIconBackgroundColor;
-}, function (props) {
-  return props.theme.closeIconColor;
-}, function (props) {
-  return props.theme.closeIconBorderRadius;
-}, function (props) {
-  return props.theme.closeIconBorderThickness;
-}, function (props) {
-  return props.theme.closeIconBorderStyle;
-}, function (props) {
-  return props.theme.closeIconBorderColor;
-}, function (props) {
-  return props.theme.closeIconWidth;
-}, function (props) {
-  return props.theme.closeIconHeight;
-});
-
-var _default = DxcDialog;
-exports["default"] = _default;

package/dialog/Dialog.stories.tsx

@@ -1,195 +0,0 @@
-import React from "react";
-import DxcDialog from "./Dialog";
-import DxcTextInput from "../text-input/TextInput";
-import DxcButton from "../button/Button";
-import DxcFlex from "../flex/Flex";
-import DxcInset from "../inset/Inset";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { HalstackProvider } from "../HalstackContext";
-import DxcHeading from "../heading/Heading";
-import DxcParagraph from "../paragraph/Paragraph";
-import DxcAlert from "../alert/Alert";
-
-export default {
-  title: "Dialog",
-  component: DxcDialog,
-};
-
-const opinionatedTheme = {
-  dialog: {
-    baseColor: "#ffffff",
-    closeIconColor: "#000000",
-    overlayColor: "#000000b3",
-  },
-};
-
-export const DefaultDialog = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Default dialog" theme="light" level={4} />
-    <DxcDialog>
-      <DxcInset space="1.5rem">
-        <DxcFlex direction="column" gap="1rem">
-          <DxcHeading level={4} text="Example title" />
-          <DxcParagraph>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
-            placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
-            elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
-            tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
-            eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
-            gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
-            malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
-            sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
-            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
-          </DxcParagraph>
-        </DxcFlex>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-
-export const DefaultDialogOpinionated = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Default dialog" theme="light" level={4} />
-    <HalstackProvider theme={opinionatedTheme}>
-      <DxcDialog>
-        <DxcInset space="1.5rem">
-          <DxcFlex direction="column" gap="1rem">
-            <DxcHeading level={4} text="Example title" />
-            <DxcParagraph>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa
-              magna, placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur
-              adipiscing elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo
-              sed dapibus tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis
-              Jia Le, risus eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor
-              ut, congue gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit
-              ornare, malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit
-              amet. Etiam sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum
-              blandit justo. Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
-            </DxcParagraph>
-          </DxcFlex>
-        </DxcInset>
-      </DxcDialog>
-    </HalstackProvider>
-  </ExampleContainer>
-);
-
-export const DialogWithInputs = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Dialog with inputs" theme="light" level={4} />
-    <DxcDialog>
-      <DxcInset space="1.5rem">
-        <DxcFlex gap="2rem" direction="column">
-          <DxcHeading level={4} text="Example form" />
-          <DxcFlex gap="1rem" direction="column">
-            <DxcTextInput size="fillParent" label="Name" />
-            <DxcTextInput size="fillParent" label="Surname" />
-          </DxcFlex>
-          <DxcAlert
-            type="error"
-            inlineText="User: arn:aws:xxx::xxxxxxxxxxxx:assumed-role/assure-sandbox-xxxx-xxxxxxxxxxxxxxxxxxxxxxxxxx/sandbox-xxxx-xxxxxxxxxxxxxxxxxx is not authorized to perform: lambda:xxxxxxxxxxxxxx on resource: arn:aws:lambda:us-east-1:xxxxxxxxxxxx:function:sandbox-xxxx-xx-xxxxxxx-xxxxxxx-lambda because no identity-based policy allows the lambda:xxxxxxxxxxxxxx action"
-            size="fillParent"
-            margin={{ bottom: "xsmall" }}
-          />
-          <DxcFlex justifyContent="flex-end" gap="0.5rem">
-            <DxcButton label="Cancel" mode="text" />
-            <DxcButton label="Save" />
-          </DxcFlex>
-        </DxcFlex>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-
-const RespDialog = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Responsive dialog" theme="light" level={4} />
-    <DxcDialog>
-      <DxcInset space="1.5rem">
-        <DxcFlex gap="2rem" direction="column">
-          <DxcHeading level={4} text="Example form" />
-          <DxcFlex gap="1rem" direction="column">
-            <DxcTextInput size="fillParent" label="Name" />
-            <DxcTextInput size="fillParent" label="Surname" />
-          </DxcFlex>
-          <DxcFlex justifyContent="flex-end" gap="0.5rem">
-            <DxcButton label="Cancel" mode="text" />
-            <DxcButton label="Save" />
-          </DxcFlex>
-        </DxcFlex>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-
-export const DialogWithoutOverlay = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Dialog Without Overlay" theme="light" level={4} />
-    <DxcDialog overlay={false}>
-      <DxcInset space="1.5rem">
-        <DxcFlex direction="column" gap="1rem">
-          <DxcHeading level={4} text="Example title" />
-          <DxcParagraph>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
-            placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
-            elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
-            tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
-            eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
-            gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
-            malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
-            sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
-            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
-          </DxcParagraph>
-        </DxcFlex>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-
-export const DialogCloseVisibleFalse = () => (
-  <ExampleContainer expanded={true}>
-    <Title title="Dialog Close Visible" theme="dark" level={4} />
-    <DxcDialog isCloseVisible={false}>
-      <DxcInset space="1.5rem">
-        <DxcParagraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
-          placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
-          elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
-          tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
-          eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
-          enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
-          fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
-          augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
-          dignissim, pharetra neque molestie, molestie lectus.
-        </DxcParagraph>
-      </DxcInset>
-    </DxcDialog>
-  </ExampleContainer>
-);
-
-const customViewports = {
-  resizedScreen: {
-    name: "Custom viewport",
-    styles: {
-      width: "720px",
-      height: "900px",
-    },
-  },
-};
-
-export const ResponsiveDialog = DefaultDialog.bind({});
-ResponsiveDialog.parameters = {
-  viewport: {
-    viewports: customViewports,
-    defaultViewport: "resizedScreen",
-  },
-  chromatic: { viewports: [720] },
-};
-
-export const MobileResponsiveDialog = RespDialog.bind({});
-MobileResponsiveDialog.parameters = {
-  viewport: {
-    defaultViewport: "iphonex",
-  },
-  chromatic: { viewports: [375] },
-};