@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/src/components/Notifications/BaseModal/BaseModal.module.scss

@@ -0,0 +1,76 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+@use "../../../mixins.module.scss";
+@use "../../../variables.scss";
+
+$marginTop: 3.125rem;
+
+.modal {
+  position: fixed;
+  z-index: variables.$modal-z-index;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+
+  visibility: hidden;
+
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+
+  .backdrop {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: transparent;
+    opacity: 0;
+    @include mixins.transition(background-color, 0.5s, ease);
+    @include mixins.transition(opacity, 0.5s, ease);
+  }
+
+  &.visible {
+    visibility: visible;
+
+    .backdrop {
+      background-color: var(--modal-backdrop-color);
+      opacity: 0.75;
+    }
+  }
+}
+
+.container {
+  margin-top: $marginTop;
+  background-color: var(--modal-background-color);
+  z-index: variables.$modal-z-index + 1;
+  width: calc(100% - 2rem);
+  height: auto;
+  max-height: calc(90% - $marginTop);
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (min-width: 50em) {
+  .container {
+    width: 50rem;
+    border-radius: 2px;
+    box-shadow: 0 30px 50px var(--modal-shadow-color);
+  }
+}

package/src/components/Notifications/BaseModal/BaseModal.tsx

@@ -0,0 +1,186 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  useEffect,
+  useRef,
+  ReactElement,
+  RefObject,
+  createRef
+} from "react";
+import { createPortal } from "react-dom";
+import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
+import classes from "./BaseModal.module.scss";
+import { labelId, descriptionId } from "./BaseModalContext";
+import { useRepeatFocus } from "../../../hooks/useRepeatFocus";
+
+const SCROLL_PROPERTY_NAME = "overflow";
+const SCROLL_PROPERTY_VALUE = "hidden";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  id: string;
+  children: React.ReactNode;
+  open: boolean;
+  onClose?: (event?: React.MouseEvent<HTMLElement>) => unknown;
+  className?: string;
+  containerProps?: ComponentPropsWithRef<"div">;
+  backdropProps?: ComponentPropsWithRef<"div">;
+  labelledby?: string;
+  describedby?: string;
+  disableEscapeKeyDown?: boolean;
+  disableBackdrop?: boolean;
+  disableContentAutoFocus?: boolean;
+  hideBackdrop?: boolean;
+  forceContainerOpen?: boolean;
+  zIndex?: number;
+  domRoot?: HTMLElement;
+}
+
+export const useSetBodyScroll = (open: boolean) => {
+  const hideBodyScroll = () => {
+    document.body.style[SCROLL_PROPERTY_NAME] = SCROLL_PROPERTY_VALUE;
+  };
+
+  const showBodyScroll = () => {
+    const allModalsClosed =
+      document.querySelectorAll("[role=dialog][data-hidden=false]").length === 0;
+    if (allModalsClosed) {
+      document.body.style.removeProperty(SCROLL_PROPERTY_NAME);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      hideBodyScroll();
+    } else {
+      showBodyScroll();
+    }
+  }, [open]);
+};
+
+const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    id,
+    children,
+    open,
+    onClose,
+    className = "",
+    containerProps,
+    backdropProps,
+    labelledby,
+    describedby,
+    disableEscapeKeyDown = false,
+    disableBackdrop = false,
+    disableContentAutoFocus = false,
+    hideBackdrop = false,
+    forceContainerOpen = false,
+    zIndex,
+    domRoot,
+    ...rest
+  }: Props,
+  ref
+) => {
+  useSetBodyScroll(open);
+  const wrappingDivRef = useRef<HTMLDivElement>(null);
+  const modalRef = (ref as RefObject<HTMLDivElement>) || createRef<HTMLDivElement>();
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+
+  const handleEscKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!disableEscapeKeyDown && event.key === "Escape") {
+      event.stopPropagation();
+      onClose?.();
+    }
+  };
+
+  useRepeatFocus(modalRef);
+
+  useEffect(() => {
+    if (open && !disableContentAutoFocus) {
+      modalRef.current?.focus();
+    }
+  }, [open]);
+
+  const handleBackdropClick = () => !disableBackdrop && onClose && onClose();
+
+  const renderChildren = () =>
+    React.Children.map(children, child => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child as ReactElement, {
+          onClose: child.props.onClose ?? onClose
+        });
+      }
+      return child;
+    });
+
+  return (
+    <div ref={wrappingDivRef}>
+      {createPortal(
+        <div
+          {...rest}
+          ref={modalRef}
+          id={id}
+          className={`${classes["modal"]} ${open ? classes["visible"] : ""} ${className}`}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={labelledby ?? labelId(id)}
+          aria-describedby={describedby ?? descriptionId(id)}
+          aria-hidden={!open}
+          tabIndex={-1}
+          data-hidden={!open}
+          onKeyDown={handleEscKeyPress}
+          style={{ zIndex }}
+        >
+          {!hideBackdrop ? (
+            <div
+              {...backdropProps}
+              aria-hidden={true}
+              className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
+              onClick={handleBackdropClick}
+            ></div>
+          ) : null}
+          {forceContainerOpen ? (
+            <div
+              {...containerProps}
+              aria-hidden={!open}
+              data-element="dialog"
+              hidden={!open}
+              style={{ zIndex: zIndex && zIndex + 1 }}
+              className={`${classes["container"]} ${containerProps?.className ?? ""}`}
+            >
+              {renderChildren()}
+            </div>
+          ) : (
+            open && (
+              <div
+                {...containerProps}
+                data-element="dialog"
+                style={{ zIndex: zIndex && zIndex + 1 }}
+                className={`${classes["container"]} ${containerProps?.className ?? ""}`}
+              >
+                {renderChildren()}
+              </div>
+            )
+          )}
+        </div>,
+        root
+      )}
+    </div>
+  );
+};
+
+export const BaseModal = React.forwardRef(BaseModalComponent);

package/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.module.scss

@@ -0,0 +1,65 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.actions {
+  margin: 1.5rem 0 1rem;
+  padding: 1rem 1.5rem 0;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid var(--color-blue-grey100);
+
+  & > * + * {
+    margin-left: 2rem;
+  }
+
+  @media screen and (max-width: 640px) {
+    display: block;
+
+    .cancel-action {
+      display: none;
+    }
+
+    .primary-actions {
+      flex-direction: column;
+      align-items: flex-end;
+      margin-left: 0;
+
+      > * {
+        width: 100%;
+      }
+
+      > * + * {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+}
+
+.primary-actions {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+
+  button {
+    white-space: nowrap;
+  }
+
+  @media screen and (min-width: 640px) {
+    button + button {
+      margin-left: 0.5rem;
+    }
+  }
+}

package/src/components/Notifications/BaseModal/BaseModalActions/BaseModalActions.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef, useRef } from "react";
+import classes from "./BaseModalActions.module.scss";
+import { Button, Props as ButtonProps } from "../../../Button/Button";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children?: React.ReactNode;
+  onClose?: () => void;
+  cancelAction?: CancelAction;
+  cancelActionsClassName?: string;
+}
+
+export interface CancelAction {
+  label: string;
+  cancelButtonProps?: ButtonProps;
+}
+
+const BaseModalActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, cancelAction, cancelActionsClassName = "", onClose, className = "", ...rest }: Props,
+  ref
+) => {
+  const innerRef = (React.createRef() as React.RefObject<HTMLDivElement>) || ref;
+  const cancelButtonRef = useRef<HTMLDivElement>(null);
+  const primaryActionsRef = useRef<HTMLDivElement>(null);
+
+  const cancelButton = (
+    <Button variant="text" color="default" {...cancelAction?.cancelButtonProps} onClick={onClose}>
+      {cancelAction?.label}
+    </Button>
+  );
+
+  return (
+    <div {...rest} ref={innerRef} className={`${classes["actions"]} ${className}`}>
+      {cancelAction && onClose && (
+        <div
+          className={`${classes["cancel-action"]} ${cancelActionsClassName}`}
+          ref={cancelButtonRef}
+        >
+          {cancelButton}
+        </div>
+      )}
+      {children && (
+        <div ref={primaryActionsRef} className={classes["primary-actions"]}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const BaseModalActions = React.forwardRef(BaseModalActionsComponent);

package/src/components/Notifications/BaseModal/BaseModalContent/BaseModalContent.module.scss

@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.content {
+  padding: 1.25rem 1.5rem 0;
+  overflow-y: auto;
+  flex: 1;
+  outline: none;
+  font-size: var(--modal-content-font-size);
+  line-height: 1.43;
+  overflow-wrap: break-word;
+}

package/src/components/Notifications/BaseModal/BaseModalContent/BaseModalContent.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, {
+  ForwardRefRenderFunction,
+  ComponentPropsWithRef,
+  createRef,
+  useEffect
+} from "react";
+import classes from "./BaseModalContent.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  id?: string;
+  children: React.ReactNode;
+  className?: string;
+  disableAutoFocus?: boolean;
+}
+
+const BaseModalContentComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { id, children, className = "", disableAutoFocus = false, ...rest }: Props,
+  ref
+) => {
+  const contentRef = createRef<HTMLDivElement>();
+
+  useEffect(() => {
+    if (!disableAutoFocus && ref) {
+      (ref as React.RefObject<HTMLDivElement>).current?.focus();
+    } else if (!disableAutoFocus) {
+      contentRef.current?.focus();
+    }
+  }, []);
+
+  /**tabIndex is set to be able to do focus on that element which we need for catching keyDown events */
+  return (
+    <div
+      {...rest}
+      ref={ref ?? contentRef}
+      id={id}
+      className={`${classes["content"]} ${className}`}
+      tabIndex={-1}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const BaseModalContent = React.forwardRef(BaseModalContentComponent);

package/src/components/Notifications/BaseModal/BaseModalContext.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+export const labelId = (id: string) => `${id}-label`;
+export const descriptionId = (id: string) => `${id}-description`;

package/src/components/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.module.scss

@@ -0,0 +1,43 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.header {
+  min-width: 80px;
+  padding: 1.25rem 1.5rem 0;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+
+  .headline {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title-wrapper {
+      min-width: 0;
+    }
+
+    .title {
+      min-width: 0;
+      margin: 0;
+      color: var(--modal-title-color);
+      overflow-wrap: break-word;
+    }
+  }
+  .closeBtn {
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
+}

package/src/components/Notifications/BaseModal/BaseModalHeader/BaseModalHeader.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
+import classes from "./BaseModalHeader.module.scss";
+import { IconButton } from "../../../Button/IconButton";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { Typography } from "../../../Typography/Typography";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  id: string;
+  title: string;
+  description?: string;
+  children?: React.ReactNode;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const BaseModalHeaderComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { id, title, children, onClose, description, className, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div {...rest} ref={ref} className={`${classes["header"]} ${className}`}>
+      <div className={classes["headline"]}>
+        <div className={classes["title-wrapper"]}>
+          <Typography
+            id={id}
+            className={classes["title"]}
+            tag="h1"
+            spacing={{ marginBottom: 0 }}
+            variant="h4"
+          >
+            {title}
+          </Typography>
+          {description && (
+            <Typography
+              id={id}
+              className={classes["title"]}
+              tag="span"
+              spacing={{ marginBottom: 0 }}
+              variant="body"
+            >
+              {description}
+            </Typography>
+          )}
+        </div>
+        <IconButton onClick={onClose} className={classes["closeBtn"]} title="close modal">
+          <Icon icon={Icons.Times} />
+        </IconButton>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export const BaseModalHeader = React.forwardRef(BaseModalHeaderComponent);

package/src/components/Notifications/Dialog/Dialog.module.scss

@@ -0,0 +1,31 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+.dialog {
+  align-items: center;
+}
+
+@media only screen and (min-width: 50em) {
+  .container {
+    width: 30rem;
+    margin-top: 0;
+    max-height: 90%;
+  }
+}
+
+.content {
+  padding-top: 0;
+}