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

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

@@ -1,71 +0,0 @@
-/*
- * 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/Notifications/DiscardChangesModal/DiscardChangesModal.test.tsx

@@ -1,178 +0,0 @@
-/*
- * 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", () => {
-    (
-      defaultParams.hasUnsavedChanges as jest.MockedFunction<typeof defaultParams.hasUnsavedChanges>
-    ).mockReturnValue(false);
-    const { closeBtn } = createDiscardChangesModal();
-
-    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();
-
-    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);
-
-    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;
-
-    userEvent.click(closeBtn);
-
-    await findDiscardChangesDialog(container);
-    const [discardBtn] = getDiscardChangesButtons(container);
-    expect(container).toHaveTextContent(defaultParams.discardChangedDialogProps.titleLabel);
-
-    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/Notifications/Modal/Modal.test.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import * as ReactDOM from "react-dom";
-import { Modal } from "./Modal";
-
-describe("Modal", () => {
-  it("renders without crashing", () => {
-    const div = document.createElement("div");
-    ReactDOM.render(
-      <Modal id="modal" open={true} onClose={() => {}}>
-        test
-      </Modal>,
-      div
-    );
-    ReactDOM.unmountComponentAtNode(div);
-  });
-});

package/src/Notifications/Modal/Modal.tsx

@@ -1,17 +0,0 @@
-/*
- * 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, Props } from "../BaseModal/BaseModal";

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

@@ -1,20 +0,0 @@
-/*
- * 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,
-  Props
-} from "../../BaseModal/BaseModalActions/BaseModalActions";

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

@@ -1,20 +0,0 @@
-/*
- * 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,
-  Props
-} from "../../BaseModal/BaseModalContent/BaseModalContent";

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

@@ -1,20 +0,0 @@
-/*
- * 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,
-  Props
-} from "../../BaseModal/BaseModalHeader/BaseModalHeader";

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

@@ -1,54 +0,0 @@
-/*!
- * 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/Notifications/SlideInModal/SlideInModal.tsx

@@ -1,72 +0,0 @@
-/*
- * 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 { Props } from "../Modal/Modal";
-
-export const SlideInModal = React.forwardRef(SlideInModalComponent);

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

@@ -1,55 +0,0 @@
-/*!
- * 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/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -1,153 +0,0 @@
-/*!
- * 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: 1.5rem;
-  }
-
-  .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;
-  }
-}