@dxc-technology/halstack-react 0.0.0-b7324ab → 0.0.0-b7a7d72

package/dialog/Dialog.js

@@ -0,0 +1,131 @@
+"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

@@ -0,0 +1,195 @@
+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] },
+};