@onewelcome/react-lib-components 8.3.0 → 8.5.0

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

@@ -0,0 +1,96 @@
+/*!
+ * 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 {
+  right: 0;
+  left: auto;
+
+  justify-content: flex-end;
+
+  min-width: 25rem;
+  width: 33vw;
+  max-width: 40rem;
+
+  visibility: visible;
+
+  transform: translate(calc(100% - 0.5rem));
+  @include mixins.transition(transform, 0.5s, ease-in-out);
+
+  &.hide {
+    visibility: hidden;
+  }
+
+  &.visible {
+    visibility: visible;
+    transform: translate(0%);
+
+    #backdrop-slide {
+      background-color: transparent;
+    }
+  }
+}
+
+.handle {
+  position: absolute;
+  top: 13.25rem;
+  left: -1.5rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 1.5rem;
+  height: 2.5rem;
+  padding: 0.5rem 0;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background-color: var(--modal-background-color);
+  box-shadow:
+    -4px 4px 5px 0px var(--side-sheet-shadow-color-one),
+    -4px 3px 14px 0px var(--side-sheet-shadow-color-two),
+    -4px 8px 10px 0px var(--side-sheet-shadow-color-two);
+}
+
+.handle-button {
+  transform: rotateY(180deg);
+}
+
+.collapsed-sheet {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0.5rem;
+  height: 100vh;
+  background-color: var(--modal-background-color);
+  box-shadow:
+    0px 4px 5px 0px var(--side-sheet-shadow-color-one),
+    0px 3px 14px 0px var(--side-sheet-shadow-color-two),
+    0px 8px 10px 0px var(--side-sheet-shadow-color-two);
+}
+
+.container {
+  margin-top: 0;
+  width: 50rem;
+  height: 100%;
+  max-height: unset;
+  border-radius: 0;
+  box-shadow:
+    0px 4px 5px 0px var(--side-sheet-shadow-color-one),
+    0px 3px 14px 0px var(--side-sheet-shadow-color-two),
+    0px 8px 10px 0px var(--side-sheet-shadow-color-two);
+}

package/src/components/Notifications/SideSheet/SideSheet.tsx

@@ -0,0 +1,114 @@
+/*
+ * 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 "./SideSheet.module.scss";
+import { IconButton } from "../../Button/IconButton";
+import { Icon, Icons } from "../../Icon/Icon";
+
+export interface Props extends Omit<ModalProps, "hideBackdrop" | "disableBackdrop"> {
+  handleButtonProps?: {
+    onOpen: () => void;
+    onClose: () => void;
+    title?: string;
+  };
+}
+
+const SideSheetComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  { children, id, open, handleButtonProps, ...rest }: Props,
+  ref
+) => {
+  const [classHideOnTransition, setClassHideOnTransition] = useState<string>("hide");
+  const [controlledOpen, setControlledOpen] = useState(false);
+  const containerRef = useRef(null);
+  const handleTitle = handleButtonProps?.title ?? "Side sheet handle";
+  const handleButtonStyle = {
+    width: "1.5rem",
+    height: "3.5rem",
+    borderTopLeftRadius: "4px",
+    borderBottomLeftRadius: "4px"
+  };
+
+  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 (
+    <>
+      {handleButtonProps && !open && (
+        <div className={classes["collapsed-sheet"]}>
+          <div className={classes["handle"]}>
+            <IconButton
+              style={handleButtonStyle}
+              className={classes["handle-button"]}
+              onClick={handleButtonProps.onOpen}
+              title={handleTitle}
+            >
+              <Icon size="0.9rem" icon={Icons.SideSheetHandle} />
+            </IconButton>
+          </div>
+        </div>
+      )}
+      <Modal
+        {...rest}
+        id={id}
+        open={controlledOpen}
+        className={`${classes["slide-in-modal"]} ${open ? classes["visible"] : ""} ${
+          !open ? classes[classHideOnTransition] : ""
+        }`}
+        containerProps={{ className: classes["container"] }}
+        hideBackdrop={true}
+        onTransitionEnd={onTransitionEnd}
+        ref={ref ?? containerRef}
+      >
+        {handleButtonProps && (
+          <div className={classes["handle"]}>
+            <IconButton
+              style={handleButtonStyle}
+              title={handleTitle}
+              onClick={handleButtonProps.onClose}
+            >
+              <Icon size="0.9rem" icon={Icons.SideSheetHandle} />
+            </IconButton>
+          </div>
+        )}
+        {children}
+      </Modal>
+    </>
+  );
+};
+
+export const SideSheet = React.forwardRef(SideSheetComponent);

package/src/components/Notifications/SideSheet/SideSheetActions/SideSheetActions.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 SideSheetActions } from "../../BaseModal/BaseModalActions/BaseModalActions";
+export type { Props } from "../../BaseModal/BaseModalActions/BaseModalActions";

package/src/components/Notifications/SideSheet/SideSheetContent/SideSheetContent.module.scss

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+.side-sheet-content {
+  padding: 1.5rem;
+}

package/src/components/Notifications/SideSheet/SideSheetContent/SideSheetContent.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 from "react";
+import { BaseModalContent, Props } from "../../BaseModal/BaseModalContent/BaseModalContent";
+import classes from "./SideSheetContent.module.scss";
+
+export const SideSheetContent: React.FC<Props> = ({ className, ...rest }) => (
+  <BaseModalContent {...rest} className={`${classes["side-sheet-content"]} ${className}`} />
+);
+
+export { Props } from "../../BaseModal/BaseModalContent/BaseModalContent";

package/src/components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader.module.scss

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+.side-sheet-header {
+  padding: 1rem 1.5rem;
+}

package/src/components/Notifications/SideSheet/SideSheetHeader/SideSheetHeader.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 from "react";
+import { BaseModalHeader, Props } from "../../BaseModal/BaseModalHeader/BaseModalHeader";
+import classes from "./SideSheetHeader.module.scss";
+
+export const SideSheetHeader: React.FC<Props> = ({ className, ...rest }) => (
+  <BaseModalHeader {...rest} className={`${classes["side-sheet-header"]} ${className}`} />
+);
+
+export { Props } from "../../BaseModal/BaseModalHeader/BaseModalHeader";

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

@@ -25,6 +25,9 @@ import React, {
 import { Props as ModalProps, Modal } from "../Modal/Modal";
 import classes from "./SlideInModal.module.scss";
 
+/**
+ * @deprecated use the new `SideSheet` component
+ */
 const SlideInModalComponent: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
   { children, id, open, ...rest }: ModalProps,
   ref

package/src/components/Spinner/Spinner.module.scss

@@ -0,0 +1,33 @@
+/*!
+ * 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 "../../mixins.module.scss";
+
+.spinner {
+  --orbit-color: var(--color-blue-grey100);
+  --arch-color: var(--color-blue-grey900);
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  .arch {
+    animation: rotate 1s linear infinite;
+    transform-origin: center;
+  }
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 from "react";
+import classes from "./Spinner.module.scss";
+
+export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+  thickness?: number;
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({ size = 32, thickness, ...props }) => {
+  if (!thickness) {
+    thickness = size / 16;
+  }
+  return (
+    <svg
+      {...props}
+      className={classes["spinner"]}
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={(size - thickness) / 2}
+        stroke="var(--orbit-color)"
+        strokeWidth={thickness}
+        fill="none"
+      ></circle>
+      <circle
+        className={classes["arch"]}
+        cx={size / 2}
+        cy={size / 2}
+        r={(size - thickness) / 2}
+        stroke="var(--arch-color)"
+        strokeWidth={thickness}
+        strokeLinecap="round"
+        fill="none"
+        strokeDasharray={`${size}`}
+        transform="rotate(-90 25 25)"
+      />
+    </svg>
+  );
+};

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -116,6 +116,8 @@ interface CSSProperties {
   modalShadowColor?: string;
   modalBackgroundColor?: string;
   modalBackdropColor?: string;
+  sideSheetShadowColorOne?: string;
+  sideSheetShadowColorTwo?: string;
   skeletonBackgroundColor?: string;
   skeletonAnimationColorRgb?: string;
 
@@ -310,6 +312,8 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     modalShadowColor: "rgba(0, 0, 0, 0.16)",
     modalBackgroundColor: "var(--light)",
     modalBackdropColor: "var(--default)",
+    sideSheetShadowColorOne: "#01053214",
+    sideSheetShadowColorTwo: "#0105320a",
     skeletonBackgroundColor: "var(--disabled)",
     skeletonAnimationColorRgb: "255, 255, 255",
 

package/src/font/icomoon.svg

@@ -88,5 +88,8 @@
 <glyph unicode="&#xe94e;" glyph-name="ZoomIn" d="M731.85 315.975h-46.258l-16.391 15.808c57.379 66.744 91.917 153.395 91.917 247.657 0 210.187-170.371 380.561-380.557 380.561s-380.561-170.374-380.561-380.561c0-210.187 170.374-380.557 380.561-380.557 94.262 0 180.913 34.538 247.657 91.917l15.808-16.391v-46.258l292.736-292.151 87.239 87.239-292.151 292.736zM380.561 315.975c-145.784 0-263.465 117.681-263.465 263.465s117.681 263.465 263.465 263.465c145.784 0 263.465-117.681 263.465-263.465s-117.681-263.465-263.465-263.465zM409.835 725.809h-58.548v-117.095h-117.095v-58.548h117.095v-117.095h58.548v117.095h117.095v58.548h-117.095v117.095z" />
 <glyph unicode="&#xe94f;" glyph-name="arrow-up" d="M0.001 448.003l90.24-90.24 357.76 357.117v-778.879h128.002v778.879l357.12-357.762 90.877 90.885-512.002 511.996-511.996-511.996z" />
 <glyph unicode="&#xe950;" glyph-name="external-link" d="M910.225 49.775h-796.448v796.448h398.223v113.777h-398.223c-63.146 0-113.777-51.2-113.777-113.777v-796.448c0-62.575 50.631-113.775 113.777-113.775h796.448c62.575 0 113.775 51.2 113.775 113.775v398.225h-113.775v-398.225zM625.777 960v-113.777h204.232l-559.218-559.218 80.213-80.213 559.221 559.218v-204.232h113.775v398.223h-398.223z" />
+<glyph unicode="&#xe951;" glyph-name="sidesheet-handle" horiz-adv-x="1317" d="M1316.785 960v-146.286h-292.571v146.286h292.571zM1316.785 667.429v-146.286h-292.571v146.286h292.571zM1316.785 228.571v146.286h-292.571v-146.286h292.571zM1316.785 82.286v-146.286h-292.571v146.286h292.571zM660.044 508.952h-659.83v-121.904h659.83l-203.662-218.819 80.213-85.943 341.334 365.714-341.334 365.714-80.213-85.943 203.662-218.819z" />
+<glyph unicode="&#xe952;" glyph-name="pending-circle" d="M511.997 959.999c-282.621 0-511.997-229.375-511.997-511.998 0-282.62 229.376-512.001 511.997-512.001 282.623 0 512.003 229.38 512.003 512.001 0 282.623-229.38 511.998-512.003 511.998zM511.997 38.402c-226.302 0-409.598 183.294-409.598 409.598s183.295 409.6 409.598 409.6c226.308 0 409.601-183.296 409.601-409.6s-183.294-409.598-409.601-409.598zM255.999 371.203c42.415 0 76.8 34.382 76.8 76.796s-34.385 76.8-76.8 76.8c-42.415 0-76.8-34.385-76.8-76.8s34.385-76.796 76.8-76.796zM511.997 371.203c42.418 0 76.8 34.382 76.8 76.796s-34.382 76.8-76.8 76.8c-42.414 0-76.797-34.385-76.797-76.8s34.385-76.796 76.797-76.796zM767.998 371.203c42.412 0 76.8 34.382 76.8 76.796s-34.388 76.8-76.8 76.8c-42.418 0-76.8-34.385-76.8-76.8s34.382-76.796 76.8-76.796z" />
+<glyph unicode="&#xe953;" glyph-name="minus-circle" d="M255.999 499.2v-102.401h511.999v102.401h-511.999zM511.997 959.999c-282.621 0-511.997-229.375-511.997-511.998 0-282.62 229.376-512.001 511.997-512.001 282.623 0 512.003 229.38 512.003 512.001 0 282.623-229.38 511.998-512.003 511.998zM511.997 38.402c-225.789 0-409.598 183.81-409.598 409.598 0 225.792 183.808 409.6 409.598 409.6 225.792 0 409.601-183.808 409.601-409.6 0-225.788-183.81-409.598-409.601-409.598z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>