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

package/src/components/Icon/Icon.module.scss

@@ -0,0 +1,314 @@
+/*!
+ * 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.
+ */
+
+@font-face {
+  font-family: "icomoon";
+  src: url("../../font/icomoon.eot?9c63pa");
+  src: url("../../font/icomoon.eot?9c63pa#iefix") format("embedded-opentype"),
+    url("../../font/icomoon.ttf?9c63pa") format("truetype"),
+    url("../../font/icomoon.woff?9c63pa") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+@mixin fontProperties() {
+  font-family: "icomoon", sans-serif !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon {
+  line-height: 0;
+  font-size: 0.875rem;
+}
+
+.icon-file-outline:before {
+  content: "\e941";
+  @include fontProperties();
+}
+.icon-file-upload-outline:before {
+  content: "\e942";
+  @include fontProperties();
+}
+.icon-file-download-outline:before {
+  content: "\e943";
+  @include fontProperties();
+}
+.icon-image:before {
+  content: "\e900";
+  @include fontProperties();
+}
+.icon-bookmark:before {
+  content: "\e901";
+  @include fontProperties();
+}
+.icon-bookmark-alt:before {
+  content: "\e902";
+  @include fontProperties();
+}
+.icon-equal:before {
+  content: "\e903";
+  @include fontProperties();
+}
+.icon-build:before {
+  content: "\e904";
+  @include fontProperties();
+}
+.icon-refresh:before {
+  content: "\e905";
+  @include fontProperties();
+}
+.icon-calendar:before {
+  content: "\e906";
+  @include fontProperties();
+}
+.icon-checkmark-circle:before {
+  content: "\e907";
+  @include fontProperties();
+}
+.icon-checkmark-circle-alt:before {
+  content: "\e908";
+  @include fontProperties();
+}
+.icon-clock:before {
+  content: "\e909";
+  @include fontProperties();
+}
+.icon-trash:before {
+  content: "\e90a";
+  @include fontProperties();
+}
+.icon-heart:before {
+  content: "\e90b";
+  @include fontProperties();
+}
+.icon-search:before {
+  content: "\e90c";
+  @include fontProperties();
+}
+.icon-gearwheel:before {
+  content: "\e90d";
+  @include fontProperties();
+}
+.icon-star:before {
+  content: "\e90e";
+  @include fontProperties();
+}
+.icon-star-alt:before {
+  content: "\e90f";
+  @include fontProperties();
+}
+.icon-undo:before {
+  content: "\e910";
+  @include fontProperties();
+}
+.icon-eye:before {
+  content: "\e911";
+  @include fontProperties();
+}
+.icon-times-circle-alt:before {
+  content: "\e912";
+  @include fontProperties();
+}
+.icon-info-circle:before {
+  content: "\e913";
+  @include fontProperties();
+}
+.icon-info-bell:before {
+  content: "\e914";
+  @include fontProperties();
+}
+.icon-checkmark-circle-breakout:before {
+  content: "\e915";
+  @include fontProperties();
+}
+.icon-warning:before {
+  content: "\e916";
+  @include fontProperties();
+}
+.icon-plus:before {
+  content: "\e917";
+  @include fontProperties();
+}
+.icon-copy:before {
+  content: "\e918";
+  @include fontProperties();
+}
+.icon-edit:before {
+  content: "\e919";
+  @include fontProperties();
+}
+.icon-filter:before {
+  content: "\e91a";
+  @include fontProperties();
+}
+.icon-link:before {
+  content: "\e91b";
+  @include fontProperties();
+}
+.icon-change:before {
+  content: "\e91c";
+  @include fontProperties();
+}
+.icon-filter-alt-arrow:before {
+  content: "\e91d";
+  @include fontProperties();
+}
+.icon-filter-alt:before {
+  content: "\e91e";
+  @include fontProperties();
+}
+.icon-filter-alt-times:before {
+  content: "\e91f";
+  @include fontProperties();
+}
+.icon-grid:before {
+  content: "\e920";
+  @include fontProperties();
+}
+.icon-triangle-down:before {
+  content: "\e921";
+  @include fontProperties();
+}
+.icon-triangle-down-circle:before {
+  content: "\e922";
+  @include fontProperties();
+}
+.icon-triangle-up:before {
+  content: "\e923";
+  @include fontProperties();
+}
+.icon-triangle-right:before {
+  content: "\e924";
+  @include fontProperties();
+}
+.icon-chevron-left:before {
+  content: "\e925";
+  @include fontProperties();
+}
+.icon-chevron-right:before {
+  content: "\e926";
+  @include fontProperties();
+}
+.icon-times:before {
+  content: "\e927";
+  @include fontProperties();
+}
+.icon-times-circle:before {
+  content: "\e928";
+  @include fontProperties();
+}
+.icon-times-thin:before {
+  content: "\e929";
+  @include fontProperties();
+}
+.icon-chevron-up:before {
+  content: "\e92a";
+  @include fontProperties();
+}
+.icon-chevron-down:before {
+  content: "\e92b";
+  @include fontProperties();
+}
+.icon-navigation-first:before {
+  content: "\e92c";
+  @include fontProperties();
+}
+.icon-fullscreen:before {
+  content: "\e92d";
+  @include fontProperties();
+}
+.icon-fullscreen-exit:before {
+  content: "\e92e";
+  @include fontProperties();
+}
+.icon-navigation-last:before {
+  content: "\e92f";
+  @include fontProperties();
+}
+.icon-hamburger:before {
+  content: "\e930";
+  @include fontProperties();
+}
+.icon-ellipsis:before {
+  content: "\e931";
+  @include fontProperties();
+}
+.icon-triangle-left:before {
+  content: "\e932";
+  @include fontProperties();
+}
+.icon-ellipsis-alt:before {
+  content: "\e933";
+  @include fontProperties();
+}
+.icon-bell:before {
+  content: "\e934";
+  @include fontProperties();
+}
+.icon-bell-alt:before {
+  content: "\e935";
+  @include fontProperties();
+}
+.icon-share:before {
+  content: "\e936";
+  @include fontProperties();
+}
+.icon-forbidden:before {
+  content: "\e937";
+  @include fontProperties();
+}
+.icon-checkmark:before {
+  content: "\e938";
+  @include fontProperties();
+}
+.icon-checkmark-square:before {
+  content: "\e939";
+  @include fontProperties();
+}
+.icon-square:before {
+  content: "\e93a";
+  @include fontProperties();
+}
+.icon-minus-square:before {
+  content: "\e93b";
+  @include fontProperties();
+}
+.icon-radio:before {
+  content: "\e93c";
+  @include fontProperties();
+}
+.icon-error-circle:before {
+  content: "\e93d";
+  @include fontProperties();
+}
+.icon-circle:before {
+  content: "\e93e";
+  @include fontProperties();
+}
+.icon-table-search:before {
+  content: "\e93f";
+  @include fontProperties();
+}

package/src/components/Link/Link.module.scss

@@ -0,0 +1,82 @@
+/*!
+ * 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";
+
+.link {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-style: normal;
+  font-variant: normal;
+  line-height: var(--default-line-height);
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: 0;
+
+  &:focus,
+  &:hover,
+  &:active {
+    text-decoration-thickness: 0.125rem;
+    outline: 0;
+  }
+
+  &.primary {
+    color: var(--color-primary);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--color-primary);
+    }
+  }
+
+  &.secondary {
+    color: var(--color-secondary);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--color-primary);
+    }
+  }
+
+  &.tertiary {
+    color: var(--color-tertiary);
+
+    &:focus-visible {
+      outline: 0.5px dashed var(--color-primary);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    color: var(--greyed-out);
+  }
+}
+
+.button {
+  @include mixins.buttonBase("link");
+
+  text-decoration: none;
+
+  &.fill {
+    @include mixins.button("fill", "link");
+  }
+
+  &.outline {
+    @include mixins.button("outline", "link");
+  }
+
+  &.text {
+    @include mixins.button("text", "link");
+  }
+}

package/src/components/Notifications/Banner/Banner.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.
+ */
+
+.banner {
+  padding: 1rem 1.25rem;
+  background-color: var(--light);
+  display: flex;
+  border-width: var(--banner-border-width);
+  border-style: solid;
+  flex-grow: 0;
+  border-radius: var(--banner-border-radius);
+
+  .container {
+    display: block;
+    margin-left: 1rem;
+    flex: 1;
+    color: var(--default);
+  }
+
+  .headline {
+    margin-bottom: 0.25rem;
+  }
+  .content {
+    margin-bottom: 0;
+  }
+
+  .icon {
+    margin-top: 0.1rem;
+    font-size: 1.25rem;
+    line-height: var(--default-line-height);
+  }
+
+  &.info {
+    border-color: var(--info);
+    .icon {
+      color: var(--info);
+    }
+    .headline {
+      color: var(--info);
+    }
+  }
+
+  &.warning {
+    border-color: var(--warning);
+    .icon {
+      color: var(--warning);
+    }
+
+    .headline {
+      color: var(--warning);
+    }
+  }
+  &.error {
+    border-color: var(--error);
+    .icon {
+      color: var(--error);
+    }
+
+    .headline {
+      color: var(--error);
+    }
+  }
+}

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";
+
+$zIndex: 10;
+$marginTop: 3.125rem;
+
+.modal {
+  position: fixed;
+  z-index: $zIndex;
+  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;
+    @include mixins.transition(background-color, 0.5s, ease);
+  }
+
+  &.visible {
+    visibility: visible;
+
+    .backdrop {
+      background-color: var(--default);
+      opacity: 0.75;
+    }
+  }
+}
+
+.container {
+  background-color: var(--modal-background-color);
+  z-index: $zIndex + 1;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+}
+
+@media only screen and (min-width: 50em) {
+  .container {
+    margin-top: $marginTop;
+    width: 50rem;
+    height: auto;
+    max-height: calc(90% - $marginTop);
+    border-radius: 8px;
+    box-shadow: 0 30px 50px var(--modal-shadow-color);
+  }
+}

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

@@ -0,0 +1,159 @@
+/*
+ * 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 { BaseModal, Props } from "./BaseModal";
+import { render, getByText, queryByText, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const classNames = ["class11", "class12"];
+const containerClassNames = ["class21", "class22"];
+
+const defaultParams: Props = {
+  id: "modal",
+  open: true,
+  onClose: jest.fn(),
+  className: classNames.join(" "),
+  containerProps: { className: containerClassNames.join(" ") },
+  children: "This is example dialog content."
+};
+
+const createBaseModal = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<BaseModal {...parameters} data-testid="BaseModal" />);
+  const slideInModal = queries.getByTestId("BaseModal");
+
+  return {
+    ...queries,
+    slideInModal
+  };
+};
+
+describe("BaseModal", () => {
+  it("renders without crashing", () => {
+    const { getByRole } = createBaseModal();
+    const dialog = getByRole("dialog");
+
+    expect(dialog).toHaveAttribute("aria-modal", "true");
+    expect(dialog).toHaveAttribute("aria-labelledby", "modal-label");
+    expect(dialog).toHaveAttribute("aria-describedby", "modal-description");
+    expect(dialog).toHaveAttribute("data-hidden", "false");
+    expect(dialog).toHaveAttribute("aria-hidden", "false");
+    expect(getByText(dialog, defaultParams.children as string)).toBeDefined();
+    expect(document.body).toHaveStyle("overflow: hidden");
+  });
+
+  it("should render closed modal without content", () => {
+    const { queryByRole } = createBaseModal(params => ({ ...params, open: false }));
+
+    const dialogByRole = queryByRole("dialog");
+    const dialog = document.body.children[1] as HTMLElement;
+
+    expect(dialogByRole).toBeNull();
+    expect(dialog).toHaveAttribute("aria-hidden", "true");
+    expect(queryByText(dialog, defaultParams.children as string)).toBeNull();
+  });
+
+  it("should render closed modal with content when forceContainerOpen is provided", () => {
+    const { getByRole } = createBaseModal(params => ({
+      ...params,
+      open: false,
+      forceContainerOpen: true
+    }));
+
+    const modal = getByRole("dialog", { hidden: true });
+    const container = modal.querySelector(".container") as HTMLElement;
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("propagates containerProps to container element", () => {
+    const { getByRole } = createBaseModal(params => ({
+      ...params,
+      open: true,
+      containerProps: {
+        id: "container"
+      }
+    }));
+
+    const modal = getByRole("dialog");
+    const container = modal.querySelector(".container") as HTMLElement;
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveAttribute("id", "container");
+  });
+
+  it("propagates backdropProps to backdrop element", () => {
+    const { getByRole } = createBaseModal(params => ({
+      ...params,
+      open: true,
+      backdropProps: {
+        id: "backdrop"
+      }
+    }));
+
+    const modal = getByRole("dialog");
+    const backdrop = modal.querySelector(".backdrop") as HTMLElement;
+
+    expect(backdrop).toBeInTheDocument();
+    expect(backdrop).toHaveAttribute("id", "backdrop");
+  });
+
+  it("should handle clicking on backdrop & ESC key", async () => {
+    const { getByRole } = createBaseModal();
+
+    const modal = getByRole("dialog");
+
+    const backdrop = modal.querySelector(".backdrop")!;
+    expect(defaultParams.onClose).toHaveBeenCalledTimes(0);
+
+    await userEvent.click(backdrop);
+    expect(defaultParams.onClose).toHaveBeenCalledTimes(1);
+
+    fireEvent.keyDown(modal, { key: "Escape" });
+    expect(defaultParams.onClose).toHaveBeenCalledTimes(2);
+  });
+});
+
+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?: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        if (ref.current) {
+          propagateRef && propagateRef(ref);
+        }
+      }, [ref]);
+
+      return <BaseModal id="test" children="test" open={true} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
+    };
+
+    render(<ExampleComponent propagateRef={refCheck} />);
+  });
+});