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

package/src/components/Notifications/Dialog/Dialog.tsx

@@ -0,0 +1,143 @@
+/*
+ * 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, useState } from "react";
+import { BaseModal } from "../BaseModal/BaseModal";
+import { BaseModalContent } from "../BaseModal/BaseModalContent/BaseModalContent";
+import { DialogActions } from "./DialogActions/DialogActions";
+import classes from "./Dialog.module.scss";
+import { DialogTitle } from "./DialogTitle/DialogTitle";
+import { Button, Props as ButtonProps } from "../../Button/Button";
+import { labelId, descriptionId } from "../BaseModal/BaseModalContext";
+import { generateID } from "../../../util/helper";
+import { CancelAction } from "../BaseModal/BaseModalActions/BaseModalActions";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  id?: string;
+  open: boolean;
+  children: React.ReactNode;
+  onClose?: () => void;
+  title: string;
+  primaryAction: Action;
+  secondaryAction?: Action;
+  cancelAction?: CancelAction;
+  zIndex?: number;
+  disableEscapeKeyDown?: boolean;
+  titleIcon?: React.ReactNode;
+  caption?: string;
+}
+
+export interface Action extends Omit<ButtonProps, "variant" | "ref"> {
+  label: string;
+  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => unknown;
+}
+
+const hideFromAccessibility: React.InputHTMLAttributes<HTMLInputElement> = {
+  // it's new HTML attribute
+  inert: true
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+} as any;
+
+const DialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    id,
+    open,
+    children,
+    onClose,
+    title,
+    primaryAction,
+    secondaryAction,
+    cancelAction,
+    zIndex,
+    titleIcon,
+    caption,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const [dialogId] = useState(id ?? generateID(20));
+  const { label: primaryLabel, ...restOfPrimaryAction } = primaryAction;
+  const PrimaryButton = (
+    <Button key="primary" {...restOfPrimaryAction}>
+      {primaryLabel}
+    </Button>
+  );
+
+  const SecondaryButton =
+    secondaryAction &&
+    (function () {
+      const { label: secondaryLabel, ...restOfSecondaryAction } = secondaryAction;
+      return (
+        <Button key="tertiary" variant="outline" {...restOfSecondaryAction}>
+          {secondaryLabel}
+        </Button>
+      );
+    })();
+
+  const onHiddenInputKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    /** It has to be here because then we will need to check if user doesn't click tab to select action button and want to do another action then primary one? */
+    if (event.key === "Enter") {
+      primaryAction.onClick();
+    }
+  };
+
+  return (
+    <BaseModal
+      {...rest}
+      ref={ref}
+      id={dialogId}
+      className={classes["dialog"]}
+      containerProps={{ className: classes["container"] }}
+      open={open}
+      onClose={onClose}
+      zIndex={zIndex}
+      disableContentAutoFocus
+    >
+      <DialogTitle
+        titleIcon={titleIcon}
+        caption={caption}
+        id={labelId(dialogId)}
+        title={title}
+        onClose={onClose}
+      />
+      <BaseModalContent
+        id={descriptionId(dialogId)}
+        className={classes["content"]}
+        disableAutoFocus
+      >
+        {children}
+      </BaseModalContent>
+      <DialogActions onClose={onClose} cancelAction={cancelAction}>
+        {[SecondaryButton, PrimaryButton]}
+      </DialogActions>
+      <input
+        autoFocus
+        {...hideFromAccessibility}
+        style={{
+          position: "absolute",
+          width: 0,
+          height: 0,
+          opacity: 0
+        }}
+        maxLength={0}
+        tabIndex={-1}
+        onKeyDown={onHiddenInputKeyPress}
+      />
+    </BaseModal>
+  );
+};
+
+export const Dialog = React.forwardRef(DialogComponent);

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

@@ -0,0 +1,35 @@
+/*!
+ * 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-left: 0.5rem;
+  }
+
+  @media screen and (max-width: 640px) {
+    .cancel-action {
+      display: block;
+      flex-direction: column;
+      align-items: flex-end;
+      margin-left: 0;
+      margin-bottom: 0.5rem;
+
+      > * {
+        width: 100%;
+      }
+    }
+  }
+}

package/src/components/Notifications/Dialog/DialogActions/DialogActions.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 {
+  BaseModalActions,
+  Props as BaseModalActionsProps,
+  CancelAction
+} from "../../BaseModal/BaseModalActions/BaseModalActions";
+import classes from "./DialogActions.module.scss";
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export interface Props extends ComponentPropsWithRef<any>, BaseModalActionsProps {
+  cancelAction?: CancelAction;
+}
+
+const DialogActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, cancelAction, onClose, ...rest }: Props,
+  ref
+) => {
+  return (
+    <BaseModalActions
+      {...rest}
+      cancelAction={cancelAction}
+      cancelActionsClassName={classes["cancel-action"]}
+      onClose={onClose}
+      ref={ref}
+      className={classes["actions"]}
+    >
+      {children}
+    </BaseModalActions>
+  );
+};
+
+export const DialogActions = React.forwardRef(DialogActionsComponent);

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

@@ -0,0 +1,58 @@
+/*!
+ * 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 {
+  margin: 1rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .headline {
+    display: flex;
+    min-width: 0;
+
+    &.with-caption {
+      align-items: flex-start;
+    }
+
+    &.no-caption {
+      align-items: center;
+    }
+
+    .title-wrapper {
+      min-width: 0;
+    }
+
+    .title {
+      margin: 0;
+      line-height: 1;
+      color: var(--modal-title-color);
+      overflow-wrap: break-word;
+
+      &-icon > [data-icon] {
+        font-size: var(--font-size-big);
+      }
+    }
+  }
+
+  .caption {
+    color: var(--color-blue-grey500);
+  }
+
+  .close-button {
+    flex-shrink: 0;
+  }
+}

package/src/components/Notifications/Dialog/DialogTitle/DialogTitle.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 { Typography } from "../../../Typography/Typography";
+import classes from "./DialogTitle.module.scss";
+import { Icon, Icons } from "../../../Icon/Icon";
+import { IconButton } from "../../../Button/IconButton";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  id: string;
+  title: string;
+  titleIcon?: React.ReactNode;
+  caption?: string;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const DialogTitleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { id, title, titleIcon, caption, onClose, ...rest }: Props,
+  ref
+) => {
+  return (
+    <div {...rest} ref={ref} className={classes["header"]}>
+      <div
+        className={`${classes["headline"]} ${caption ? classes["with-caption"] : classes["no-caption"]}`}
+      >
+        {titleIcon && (
+          <div className={classes["title-icon"]}>
+            {typeof titleIcon === "boolean" ? <Icon icon={Icons.InfoCircle} /> : titleIcon}
+          </div>
+        )}
+        <div className={classes["title-wrapper"]}>
+          <Typography
+            id={id}
+            className={classes["title"]}
+            spacing={titleIcon && { marginLeft: 2 }}
+            tag="h1"
+            variant="h4"
+          >
+            {title}
+          </Typography>
+          {caption && (
+            <Typography
+              className={classes["caption"]}
+              spacing={{ marginLeft: 2 }}
+              variant="sub-text"
+            >
+              {caption}
+            </Typography>
+          )}
+        </div>
+      </div>
+      {onClose && (
+        <IconButton onClick={onClose} className={classes["close-button"]} title="close modal">
+          <Icon icon={Icons.Times} />
+        </IconButton>
+      )}
+    </div>
+  );
+};
+
+export const DialogTitle = React.forwardRef(DialogTitleComponent);

package/src/components/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 { Dialog } from "../../Dialog/Dialog";
+import { Typography } from "../../../Typography/Typography";
+import { DataAttributeKey } from "../../../../interfaces";
+import { CancelAction } from "../../BaseModal/BaseModalActions/BaseModalActions";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  open: boolean;
+  discardChangesButtonLabel: string;
+  keepEditingButtonLabel: string;
+  cancelAction?: CancelAction;
+  contentLabel: string;
+  titleLabel: string;
+
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  [dataAttribute: DataAttributeKey]: any;
+
+  onKeepEditing: () => void;
+  onDiscardChanges: () => void;
+}
+
+const DiscardChangesDialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    open,
+    onKeepEditing,
+    onDiscardChanges,
+    discardChangesButtonLabel,
+    keepEditingButtonLabel,
+    contentLabel,
+    titleLabel,
+    cancelAction,
+    ...rest
+  }: Props,
+  ref
+) => {
+  return (
+    <Dialog
+      {...rest}
+      ref={ref}
+      open={open}
+      title={titleLabel}
+      onClose={onKeepEditing}
+      cancelAction={cancelAction}
+      primaryAction={{
+        label: discardChangesButtonLabel,
+        onClick: onDiscardChanges
+      }}
+      secondaryAction={{
+        label: keepEditingButtonLabel,
+        onClick: onKeepEditing
+      }}
+      disableEscapeKeyDown={false}
+    >
+      <Typography variant="body" spacing={{ margin: 0 }}>
+        {contentLabel}
+      </Typography>
+    </Dialog>
+  );
+};
+
+export const DiscardChangesDialog = React.forwardRef(DiscardChangesDialogComponent);

package/src/components/Notifications/DiscardChangesModal/DiscardChangesModal.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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, { Fragment, useState } from "react";
+import { Modal, Props as ModalProps } from "../Modal/Modal";
+import { ModalHeader, Props as ModalHeaderProps } from "../Modal/ModalHeader/ModalHeader";
+import {
+  DiscardChangesDialog,
+  Props as DiscardChangesDialogProps
+} from "./DiscardChangesDialog/DiscardChangesDialog";
+
+export interface Props extends Omit<ModalProps, "onClose"> {
+  hasUnsavedChanges: () => boolean;
+  onClose: (event?: React.MouseEvent<HTMLElement>) => unknown;
+  headerProps: Omit<ModalHeaderProps, "onClose" | "id">;
+  discardChangedDialogProps: Omit<
+    DiscardChangesDialogProps,
+    "open" | "onKeepEditing" | "onDiscardChanges"
+  >;
+  modalRef?: React.RefObject<HTMLDivElement>;
+  dialogRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const DiscardChangesModal = ({
+  id,
+  children,
+  headerProps,
+  discardChangedDialogProps,
+  modalRef,
+  dialogRef,
+  onClose,
+  hasUnsavedChanges,
+  ...rest
+}: Props) => {
+  const [openDiscardChangesDialog, setOpenDiscardChangesDialog] = useState(false);
+
+  const onCloseWrapper = () =>
+    hasUnsavedChanges() ? setOpenDiscardChangesDialog(true) : onClose();
+
+  const onDialogKeepEditing = () => {
+    setOpenDiscardChangesDialog(false);
+  };
+
+  const onDialogDiscardChanges = () => {
+    setOpenDiscardChangesDialog(false);
+    onClose();
+  };
+
+  return (
+    <Fragment>
+      <Modal id={id} ref={modalRef} onClose={onCloseWrapper} {...rest}>
+        <ModalHeader {...headerProps} id={`${id}-label`} onClose={onCloseWrapper} />
+        {children}
+      </Modal>
+      <DiscardChangesDialog
+        {...discardChangedDialogProps}
+        ref={dialogRef}
+        open={openDiscardChangesDialog}
+        onKeepEditing={onDialogKeepEditing}
+        onDiscardChanges={onDialogDiscardChanges}
+      />
+    </Fragment>
+  );
+};

package/src/components/Notifications/Modal/Modal.tsx

@@ -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 { BaseModal as Modal } from "../BaseModal/BaseModal";
+export type { Props } from "../BaseModal/BaseModal";

package/src/components/Notifications/Modal/ModalActions/ModalActions.tsx

@@ -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 { BaseModalActions as ModalActions } from "../../BaseModal/BaseModalActions/BaseModalActions";
+export type { Props } from "../../BaseModal/BaseModalActions/BaseModalActions";

package/src/components/Notifications/Modal/ModalContent/ModalContent.tsx

@@ -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 { BaseModalContent as ModalContent } from "../../BaseModal/BaseModalContent/BaseModalContent";
+export type { Props } from "../../BaseModal/BaseModalContent/BaseModalContent";

package/src/components/Notifications/Modal/ModalHeader/ModalHeader.tsx

@@ -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 { BaseModalHeader as ModalHeader } from "../../BaseModal/BaseModalHeader/BaseModalHeader";
+export type { Props } from "../../BaseModal/BaseModalHeader/BaseModalHeader";