@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

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

@@ -0,0 +1,71 @@
+/*
+ * 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";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  open: boolean;
+  discardChangesButtonLabel: string;
+  keepEditingButtonLabel: string;
+  contentLabel: string;
+  titleLabel: string;
+  [dataAttribute: DataAttributeKey]: any;
+  onKeepEditing: () => void;
+  onDiscardChanges: () => void;
+}
+
+const DiscardChangesDialogComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    open,
+    onKeepEditing,
+    onDiscardChanges,
+    discardChangesButtonLabel,
+    keepEditingButtonLabel,
+    contentLabel,
+    titleLabel,
+    ...rest
+  }: Props,
+  ref
+) => {
+  return (
+    <Dialog
+      {...rest}
+      ref={ref}
+      open={open}
+      alignActions="left"
+      title={titleLabel}
+      onClose={onKeepEditing}
+      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.test.tsx

@@ -0,0 +1,178 @@
+/*
+ * 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, { useEffect, useRef } from "react";
+import { DiscardChangesModal, Props } from "./DiscardChangesModal";
+import { findByTestId, getAllByRole, render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const defaultParams: Props = {
+  id: "modal",
+  open: true,
+  hasUnsavedChanges: jest.fn(),
+  onClose: jest.fn(),
+  headerProps: {
+    title: "Header"
+  },
+  discardChangedDialogProps: {
+    "data-testid": "discardChangesDialog",
+    discardChangesButtonLabel: "Discard",
+    keepEditingButtonLabel: "Keep editing",
+    contentLabel: "Unsaved changes",
+    titleLabel: "Dialog"
+  },
+  children: <span>children</span>
+};
+
+const createDiscardChangesModal = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<DiscardChangesModal {...parameters} data-testid="discardChangesModal" />);
+  const discardChangesModal = queries.getByTestId("discardChangesModal");
+  const closeBtn = queries.getByRole("button", { name: "close modal" });
+
+  return {
+    ...queries,
+    discardChangesModal,
+    closeBtn
+  };
+};
+
+const getDiscardChangesButtons = (container: HTMLElement) =>
+  getAllByRole(container, "button", {
+    name: new RegExp(
+      `(${defaultParams.discardChangedDialogProps.discardChangesButtonLabel}|${defaultParams.discardChangedDialogProps.keepEditingButtonLabel})`
+    )
+  });
+
+const findDiscardChangesDialog = (container: HTMLElement) =>
+  findByTestId(container, "discardChangesDialog");
+
+describe("DiscardChangesModal should render", () => {
+  it("renders without crashing", () => {
+    const { discardChangesModal, container } = createDiscardChangesModal();
+
+    expect(discardChangesModal).toBeDefined();
+    expect(discardChangesModal).toHaveTextContent("children");
+    expect(discardChangesModal).toHaveTextContent(defaultParams.headerProps.title);
+    expect(container).not.toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
+  });
+
+  it("clicking on close button without making any changes close the modal", async () => {
+    (
+      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
+    ).mockReturnValue(false);
+    const { closeBtn } = createDiscardChangesModal();
+
+    await userEvent.click(closeBtn);
+    expect(defaultParams.onClose).toBeCalledTimes(1);
+  });
+});
+
+describe("DiscardChangesModal should show DiscardChangesDialog", () => {
+  it("showing DiscardChangesDialog and clicking on `keep editing` button", async () => {
+    (
+      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
+    ).mockReturnValue(true);
+    const { closeBtn } = createDiscardChangesModal();
+    const container = document.body;
+    expect(defaultParams.onClose).not.toBeCalled();
+
+    await userEvent.click(closeBtn);
+
+    expect(defaultParams.onClose).not.toBeCalled();
+    await findDiscardChangesDialog(container);
+    const [_, keepEditingBtn] = getDiscardChangesButtons(container);
+    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
+    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.contentLabel);
+
+    await userEvent.click(keepEditingBtn);
+    expect(defaultParams.onClose).not.toBeCalled();
+    await waitFor(() =>
+      expect(container).not.toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel)
+    );
+  });
+
+  it("showing DiscardChangesDialog and clicking on `discard` button", async () => {
+    (
+      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
+    ).mockReturnValue(true);
+    const { closeBtn } = createDiscardChangesModal();
+    const container = document.body;
+
+    await userEvent.click(closeBtn);
+
+    await findDiscardChangesDialog(container);
+    const [discardBtn] = getDiscardChangesButtons(container);
+    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
+
+    await userEvent.click(discardBtn);
+    expect(defaultParams.onClose).toBeCalled();
+  });
+});
+
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
+    const ExampleComponent = ({
+      propagateRef
+    }: {
+      propagateRef?: (
+        ref1: React.RefObject<HTMLElement>,
+        ref2: React.RefObject<HTMLElement>
+      ) => void;
+    }) => {
+      const modalRef = useRef(null);
+      const dialogRef = useRef(null);
+
+      useEffect(() => {
+        if (dialogRef.current && modalRef.current) {
+          propagateRef && propagateRef(modalRef, dialogRef);
+        }
+      }, [modalRef, dialogRef]);
+
+      return (
+        <DiscardChangesModal
+          modalRef={modalRef}
+          dialogRef={dialogRef}
+          data-ref="testing"
+          hasUnsavedChanges={jest.fn()}
+          onClose={jest.fn()}
+          headerProps={{ title: "test" }}
+          open={false}
+          children="test"
+          discardChangedDialogProps={{
+            contentLabel: "test",
+            discardChangesButtonLabel: "test",
+            keepEditingButtonLabel: "test",
+            titleLabel: "test",
+            "data-ref": "testing"
+          }}
+          title="test"
+          id="test"
+        />
+      );
+    };
+
+    const refCheck = (ref1: React.RefObject<HTMLElement>, ref2: React.RefObject<HTMLElement>) => {
+      expect(ref1.current).toHaveAttribute("data-ref", "testing");
+      expect(ref2.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { Modal } from "./Modal";
+
+describe("Modal", () => {
+  it("renders without crashing", () => {
+    const div = document.createElement("div");
+    const root = createRoot(div);
+
+    root.render(
+      <Modal id="modal" open={true} onClose={() => {}}>
+        test
+      </Modal>
+    );
+
+    root.unmount();
+  });
+});

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";

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

@@ -0,0 +1,54 @@
+/*!
+ * 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";
+
+.slide-in-modal {
+  justify-content: flex-end;
+
+  visibility: visible;
+
+  @include mixins.transition(transform, 0.5s, ease-in-out);
+  transform: translate(120%);
+
+  &.hide {
+    visibility: hidden;
+  }
+
+  &.visible {
+    visibility: visible;
+    transform: translate(0%);
+
+    #backdrop-slide {
+      background-color: transparent;
+    }
+  }
+}
+
+#backdrop-slide {
+  background-color: transparent;
+}
+
+@media only screen and (min-width: 50rem) {
+  .container {
+    margin-top: 0;
+    width: 50rem;
+    height: 100%;
+    max-height: unset;
+    border-radius: 0;
+    box-shadow: 0 1.875rem 3.125rem var(--modal-shadow-color);
+  }
+}

package/src/components/Notifications/SlideInModal/SlideInModal.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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,
+  TransitionEventHandler,
+  useState,
+  useRef,
+  useCallback,
+  useEffect
+} from "react";
+import { Props as ModalProps, Modal } from "../Modal/Modal";
+import classes from "./SlideInModal.module.scss";
+
+const SlideInModalComponent: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
+  { children, id, open, ...rest }: ModalProps,
+  ref
+) => {
+  const [classHideOnTransition, setClassHideOnTransition] = useState<string>("hide");
+  const [controlledOpen, setControlledOpen] = useState(false);
+  const containerRef = useRef(null);
+
+  const onTransitionEnd: TransitionEventHandler<HTMLDivElement> = useCallback(
+    e => {
+      if (e.target === containerRef.current) {
+        setClassHideOnTransition(prev => (prev ? "" : "hide"));
+        if (!open && controlledOpen) {
+          setControlledOpen(false);
+        }
+      }
+    },
+    [open]
+  );
+
+  useEffect(() => {
+    open && setControlledOpen(open);
+  }, [open]);
+
+  return (
+    <Modal
+      {...rest}
+      id={id}
+      open={controlledOpen}
+      className={`${classes["slide-in-modal"]} ${open ? classes["visible"] : ""} ${
+        !open ? classes[classHideOnTransition] : ""
+      }`}
+      containerProps={{ className: classes["container"] }}
+      backdropProps={{ id: classes["backdrop-slide"] }}
+      onTransitionEnd={onTransitionEnd}
+      ref={ref ?? containerRef}
+    >
+      {children}
+    </Modal>
+  );
+};
+
+export type { Props } from "../Modal/Modal";
+
+export const SlideInModal = React.forwardRef(SlideInModalComponent);

package/src/components/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -0,0 +1,55 @@
+/*!
+ * 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";
+
+.snackbars {
+  position: fixed;
+  z-index: 20;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  @include mixins.transition(height, 0.2s, ease-in-out);
+
+  &.bottom {
+    bottom: 3.5rem;
+  }
+
+  &.top {
+    top: 3.5rem;
+  }
+
+  &.start {
+    left: 0;
+  }
+
+  &.center {
+    left: 0;
+  }
+
+  &.end {
+    right: 0;
+  }
+}
+
+@media only screen and (min-width: 37.5em) {
+  .snackbars {
+    width: initial;
+
+    &.center {
+      left: calc(50% - 18.75rem);
+    }
+  }
+}

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -0,0 +1,153 @@
+/*!
+ * 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 "../../../../readyclasses.module.scss";
+@use "../../../../mixins.module.scss";
+
+.snackbar {
+  padding: 1rem 1.25rem;
+  border-radius: var(--snackbar-border-radius);
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  @include mixins.transition(height, 0.2s, ease-in-out);
+  flex-grow: 0;
+
+  &.info {
+    background-color: var(--snackbar-info-background-color);
+  }
+
+  &.success {
+    background-color: var(--snackbar-success-background-color);
+  }
+
+  &.error {
+    background-color: var(--snackbar-error-background-color);
+  }
+
+  & + & {
+    margin-top: 0.5rem;
+  }
+
+  .container {
+    flex: 1;
+  }
+
+  .headline {
+    display: flex;
+    color: var(--snackbar-text-color);
+  }
+
+  #close-btn {
+    color: var(--snackbar-text-color);
+
+    &:hover,
+    &:focus {
+      border-color: var(--snackbar-text-color);
+    }
+
+    &:active {
+      border-color: transparent;
+
+      &:after {
+        top: 0;
+        height: 100%;
+        background-color: var(--snackbar-text-color);
+      }
+    }
+  }
+
+  .icon {
+    color: var(--snackbar-text-color);
+    margin-top: 0.5rem;
+    font-size: 1.25rem;
+    line-height: var(--default-line-height);
+  }
+
+  .title {
+    color: var(--snackbar-text-color);
+    flex: 1;
+    margin: calc(0.5rem - 0.125rem) 1.25rem 0 0.75rem;
+  }
+
+  .content {
+    margin: 0.25rem 0.75rem 0 0.75rem;
+    color: var(--snackbar-text-color);
+  }
+
+  .actions {
+    margin: 0.5rem 0.75rem 0 0.75rem;
+    text-align: right;
+  }
+
+  .action-button {
+    border-width: var(--button-border-width);
+    border-style: var(--button-border-style);
+    border-radius: var(--button-border-radius);
+    font-size: var(--button-font-size);
+    line-height: var(--button-font-size);
+    font-weight: 700;
+    margin: 0;
+    padding: 0.625rem 1.25rem;
+    cursor: pointer;
+    transition: color, background-color, border-color 0.2s ease-in-out;
+    font-family: var(--font-family);
+    color: var(--snackbar-text-color);
+    background-color: transparent;
+    border-color: transparent;
+
+    &:disabled {
+      color: var(--greyed-out);
+      cursor: not-allowed;
+    }
+
+    @include readyclasses.focusOutline(var(--snackbar-text-color));
+
+    &:not(:disabled):hover,
+    &:not(:disabled):focus {
+      border-color: var(--snackbar-text-color);
+    }
+
+    &:active {
+      position: relative;
+      border: 0 transparent;
+      padding: calc(0.625rem + var(--button-border-width))
+        calc(1.25rem + var(--button-border-width));
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--snackbar-text-color);
+        border-radius: var(--button-border-radius);
+        filter: opacity(0.1);
+      }
+    }
+
+    & + .action-button {
+      margin-left: 1rem;
+    }
+  }
+}
+
+@media only screen and (min-width: 37.5em) {
+  .snackbar {
+    width: 37.5rem;
+  }
+}