@onewelcome/react-lib-components 6.7.1 → 7.1.0

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -1,219 +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, { ReactNode, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { SnackbarContextProvider } from "./SnackbarStateProvider";
-import {
-  Actions,
-  EnqueueSnackbarProps,
-  SnackbarOptionsProps,
-  Variant,
-  isNewEnqueueSnackbarInterface
-} from "../interfaces";
-import { Placement, SnackbarContainer } from "../SnackbarContainer/SnackbarContainer";
-import { generateID } from "../../../../util/helper";
-import { SnackbarItem } from "../SnackbarItem/SnackbarItem";
-import { useGetDomRoot } from "../../../../hooks/useGetDomRoot";
-
-/** Short msg is when only title is provided. Long one when content or/and actions are provided (or type is error). */
-interface Duration {
-  long: number;
-  short: number;
-}
-
-/**
- * @deprecated
- */
-export interface Props {
-  closeButtonTitle: string;
-  children?: ReactNode;
-  placement?: Placement;
-  stackSize?: number;
-  domRoot?: HTMLElement;
-  autoHideDuration?: Duration;
-  className?: string;
-}
-
-/**
- * @deprecated
- */
-export interface Item {
-  id: string;
-  title?: string;
-  duration: number;
-  className?: string;
-  height: number;
-  variant: Variant;
-  content?: string;
-  actions?: Actions;
-  onClose?: () => void;
-}
-
-/**
- * @deprecated
- */
-export const SnackbarProvider = (
-  {
-    closeButtonTitle,
-    placement = { vertical: "bottom", horizontal: "center" },
-    autoHideDuration = { long: 8000, short: 4000 },
-    stackSize = 3,
-    domRoot,
-    children,
-    className
-  }: Props = { closeButtonTitle: "" }
-) => {
-  const [snackbars, setSnackbars] = useState<Item[]>([]);
-  const wrappingDivRef = useRef(null);
-  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
-
-  const addSnackbar = (item: Item) => {
-    setSnackbars(items => [...items, item]);
-  };
-
-  const setSnackbarHeight = (id: string, height: number) => {
-    const newSnackbarsState = snackbars.map(snackbar => {
-      if (snackbar.id !== id) {
-        return snackbar;
-      }
-
-      return { ...snackbar, height };
-    });
-
-    setSnackbars(newSnackbarsState);
-  };
-
-  const getDuration = (variant: Variant, actions?: Actions, content?: string) => {
-    const hasError = variant === "error";
-    const hasContentOrActions = content ?? actions;
-    if (hasError || hasContentOrActions) {
-      return autoHideDuration.long;
-    }
-    return autoHideDuration.short;
-  };
-
-  const enqueueSnackbar = (
-    propsOrTitle: EnqueueSnackbarProps | string | undefined,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): void => {
-    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
-    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
-    const {
-      variant = "info",
-      actions,
-      duration = getDuration(variant, actions, props.content),
-      onClose
-    } = props;
-    const item: Item = {
-      title: props.title,
-      content: props.content,
-      variant,
-      className: props.className,
-      actions,
-      duration,
-      height: 0,
-      id: generateID(15, props.title),
-      onClose
-    };
-    addSnackbar(item);
-  };
-
-  const mapToNewInterface = (
-    title?: string,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): EnqueueSnackbarProps => {
-    return {
-      title,
-      content,
-      ...options
-    };
-  };
-
-  const enqueueSuccessSnackbar = (
-    propsOrTitle: EnqueueSnackbarProps | string | undefined,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): void => {
-    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
-    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
-    enqueueSnackbar({ ...props, variant: "success" });
-  };
-
-  const enqueueErrorSnackbar = (
-    propsOrTitle: EnqueueSnackbarProps | string | undefined,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): void => {
-    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
-    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
-    enqueueSnackbar({ ...props, variant: "error" });
-  };
-
-  const enqueueWarningSnackbar = (
-    propsOrTitle: EnqueueSnackbarProps | string | undefined,
-    content?: string,
-    options: SnackbarOptionsProps = {}
-  ): void => {
-    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
-    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
-    enqueueSnackbar({ ...props, variant: "warning" });
-  };
-
-  const onItemClosed = (id: string) => {
-    setSnackbars(items => [...items].filter(item => item.id !== id));
-  };
-
-  const snackbarList = snackbars.map((item, index) =>
-    index < stackSize ? (
-      <SnackbarItem
-        {...item}
-        key={item.id}
-        className={item.className}
-        onClose={() => {
-          onItemClosed(item.id);
-          item.onClose?.();
-        }}
-        closeButtonTitle={closeButtonTitle}
-      />
-    ) : null
-  );
-
-  const snackbarPortal = createPortal(
-    <SnackbarContainer placement={placement} className={className}>
-      {snackbarList}
-    </SnackbarContainer>,
-    root
-  );
-
-  return (
-    <SnackbarContextProvider
-      initialState={{
-        enqueueSnackbar,
-        enqueueSuccessSnackbar,
-        enqueueErrorSnackbar,
-        enqueueWarningSnackbar,
-        setSnackbarHeight,
-        snackbars
-      }}
-    >
-      {children}
-      <div ref={wrappingDivRef}>{snackbarPortal}</div>
-    </SnackbarContextProvider>
-  );
-};

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.tsx

@@ -1,57 +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, { createContext } from "react";
-import { DeprecatedEnqueueSnackbarType } from "../interfaces";
-import { Item } from "./SnackbarProvider";
-
-/**
- * @deprecated
- */
-interface SnackbarContextProps {
-  enqueueSnackbar: DeprecatedEnqueueSnackbarType;
-  enqueueSuccessSnackbar: DeprecatedEnqueueSnackbarType;
-  enqueueWarningSnackbar: DeprecatedEnqueueSnackbarType;
-  enqueueErrorSnackbar: DeprecatedEnqueueSnackbarType;
-  setSnackbarHeight: (id: string, height: number) => void;
-  snackbars: Item[];
-}
-
-/**
- * @deprecated
- */
-const SnackbarContext = createContext<SnackbarContextProps>({
-  enqueueSnackbar: () => null,
-  enqueueSuccessSnackbar: () => null,
-  enqueueErrorSnackbar: () => null,
-  enqueueWarningSnackbar: () => null,
-  setSnackbarHeight: () => null,
-  snackbars: []
-});
-
-interface Props {
-  initialState: SnackbarContextProps;
-  children?: React.ReactNode;
-}
-
-/**
- * @deprecated
- */
-const SnackbarContextProvider = ({ children, initialState }: Props) => {
-  return <SnackbarContext.Provider value={initialState}>{children}</SnackbarContext.Provider>;
-};
-
-export { SnackbarContextProvider, SnackbarContext, SnackbarContextProps };

package/src/components/Notifications/Snackbar/interfaces.ts

@@ -1,62 +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 { ButtonHTMLAttributes } from "react";
-
-/**
- * @deprecated
- */
-export type Variant = "info" | "success" | "error" | "warning";
-
-/**
- * @deprecated
- */
-export type Actions = (ButtonHTMLAttributes<HTMLButtonElement> & { label: string })[];
-
-/**
- * @deprecated
- */
-export interface SnackbarOptionsProps {
-  actions?: Actions;
-  className?: string;
-  variant?: Variant;
-  duration?: number;
-  onClose?: () => void;
-}
-
-/**
- * @deprecated
- */
-export interface EnqueueSnackbarProps extends SnackbarOptionsProps {
-  title?: string;
-  content?: string;
-}
-
-/**
- * @deprecated
- */
-export type DeprecatedEnqueueSnackbarType = (
-  propsOrTitle: EnqueueSnackbarProps | string | undefined,
-  content?: string,
-  options?: SnackbarOptionsProps
-) => void;
-
-/**
- * @deprecated
- */
-export function isNewEnqueueSnackbarInterface(args: unknown): args is EnqueueSnackbarProps {
-  return args !== null && typeof args === "object" && ("title" in args || "content" in args);
-}

package/src/components/Notifications/Snackbar/useSnackbar.ts

@@ -1,32 +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 { useContext } from "react";
-import { SnackbarContext } from "./SnackbarProvider/SnackbarStateProvider";
-
-/**
- * @deprecated
- */
-export const useSnackbar = () => {
-  const ctx = useContext(SnackbarContext);
-
-  return {
-    enqueueWarningSnackbar: ctx.enqueueWarningSnackbar,
-    enqueueErrorSnackbar: ctx.enqueueErrorSnackbar,
-    enqueueSuccessSnackbar: ctx.enqueueSuccessSnackbar,
-    enqueueSnackbar: ctx.enqueueSnackbar
-  };
-};

package/src/components/StatusIndicator/StatusIndicator.module.scss

@@ -1,43 +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.
- */
-
-.status-indicator {
-  display: flex;
-  align-items: center;
-}
-
-.status-badge {
-  width: 0.75rem;
-  height: 0.75rem;
-  margin-right: 0.5rem;
-  border-radius: 50%;
-}
-
-.active {
-  background-color: var(--success);
-}
-
-.error {
-  background-color: var(--error);
-}
-
-.neutral {
-  background-color: var(--greyed-out);
-}
-
-.warning {
-  background-color: var(--warning);
-}

package/src/components/StatusIndicator/StatusIndicator.tsx

@@ -1,44 +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, ReactNode } from "react";
-import { Typography, Props as TypographyProps } from "../Typography/Typography";
-import classes from "./StatusIndicator.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  children?: ReactNode;
-  status: "active" | "error" | "neutral" | "warning";
-  badgeProps?: ComponentPropsWithRef<"div">;
-  typographyProps?: TypographyProps;
-}
-
-const StatusIndicatorComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { children, status, badgeProps, typographyProps, ...rest }: Props,
-  ref
-) => {
-  return (
-    <div {...rest} className={classes["status-indicator"]} ref={ref}>
-      <div
-        className={`${classes["status-badge"]} ${classes[status]} ${badgeProps?.className ?? ""}`}
-      />
-      <Typography {...typographyProps} spacing={{ margin: "0" }} variant="body" tag="div">
-        {typographyProps?.children ?? children}
-      </Typography>
-    </div>
-  );
-};
-
-export const StatusIndicator = React.forwardRef(StatusIndicatorComponent);

package/src/components/Wizard/BaseWizardSteps/BaseWizardSteps.module.scss

@@ -1,214 +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.
- */
-
-@mixin clickable-element {
-  &:enabled:hover,
-  &:focus,
-  &:enabled:active {
-    cursor: pointer;
-
-    .number-wrapper {
-      .number {
-        background-color: var(--color-primary);
-        color: var(--light);
-      }
-    }
-
-    .label {
-      text-decoration: underline;
-    }
-  }
-
-  &:enabled:active {
-    .number-wrapper {
-      .number {
-        border: none;
-        margin: 2px;
-      }
-    }
-  }
-}
-
-@mixin disabled-element {
-  &:disabled {
-    .number-wrapper {
-      .number {
-        border: 2px solid var(--disabled);
-        color: var(--disabled);
-      }
-    }
-
-    .label {
-      color: var(--greyed-out);
-    }
-  }
-}
-
-.wizard {
-  padding: 1rem;
-  display: flex;
-}
-
-.wizard-element {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  background-color: transparent;
-  border: 0;
-  align-items: stretch;
-  padding: 0;
-  margin: 0;
-
-  &:focus-visible {
-    outline: 1px dashed var(--color-primary);
-    outline-offset: 1px;
-  }
-
-  // Completed/finished state
-  &.finished {
-    .number-wrapper {
-      .number {
-        border: 2px solid var(--color-primary);
-        color: var(--color-primary);
-        font-weight: normal;
-      }
-
-      &:before,
-      &:after {
-        border-bottom: 2px solid var(--color-primary);
-      }
-    }
-
-    .label {
-      color: var(--color-primary);
-    }
-    @include disabled-element;
-    @include clickable-element;
-  }
-
-  //Active/current step
-  &.current {
-    .number-wrapper {
-      .number {
-        color: var(--light);
-        border: 2px solid var(--color-primary);
-        background-color: var(--color-primary);
-      }
-
-      &:before {
-        border-bottom: 2px solid var(--color-primary);
-      }
-    }
-
-    .label {
-      font-weight: 700;
-      color: var(--color-primary);
-    }
-
-    .two-line-text-overflow {
-      display: unset;
-    }
-  }
-
-  //Future state for clickable elements - future state is a default one
-  &.future.clickable {
-    .number-wrapper {
-      .number {
-        border: 2px solid var(--color-primary);
-        color: var(--color-primary);
-      }
-    }
-
-    .label {
-      color: var(--color-primary);
-    }
-
-    @include clickable-element;
-    @include disabled-element;
-  }
-
-  &:first-child {
-    .number-wrapper:before {
-      border-bottom: none;
-    }
-  }
-
-  &:last-child {
-    .number-wrapper:after {
-      border-bottom: none;
-    }
-  }
-}
-
-.number-wrapper {
-  display: flex;
-  flex-direction: row;
-
-  &:after,
-  &:before {
-    content: " ";
-    margin-bottom: 0.8125rem;
-    width: 100%;
-    border-bottom: 2px solid var(--greyed-out);
-  }
-}
-
-.number {
-  font-family: var(--font-family);
-  font-size: 1rem;
-  font-weight: normal;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid var(--wizard-step-indicator-future-color);
-  border-radius: 50%;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  color: var(--wizard-step-indicator-future-color);
-  line-height: var(--default-line-height);
-  background-color: var(--light);
-  box-sizing: content-box;
-}
-
-.two-line-text-overflow {
-  max-height: 2rem;
-  display: none;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  padding: 0.25rem 1rem 0;
-}
-
-.label {
-  font-family: var(--font-family);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  overflow: hidden;
-  color: var(--default);
-  text-align: center;
-}
-
-.checkmark {
-  font-size: 0.875rem;
-}
-
-@media only screen and (min-width: 30em) {
-  .two-line-text-overflow {
-    display: unset;
-  }
-}