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

package/src/Icon/Icon.module.scss

@@ -1,315 +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.
- */
-
-@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"),
-    url("../../font/icomoon.svg?9c63pa#icomoon") format("svg");
-  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/Link/Link.module.scss

@@ -1,82 +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";
-
-.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/Notifications/Banner/Banner.module.scss

@@ -1,76 +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.
- */
-
-.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: 1.5rem;
-  }
-
-  &.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/Notifications/BaseModal/BaseModal.module.scss

@@ -1,76 +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";
-
-$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/Notifications/BaseModal/BaseModal.test.tsx

@@ -1,159 +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 { 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", () => {
-    const { getByRole } = createBaseModal();
-
-    const modal = getByRole("dialog");
-
-    const backdrop = modal.querySelector(".backdrop")!;
-    expect(defaultParams.onClose).toHaveBeenCalledTimes(0);
-
-    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} />);
-  });
-});