@onewelcome/react-lib-components 8.2.0 → 8.4.0

package/src/components/Form/Input/Input.module.scss

@@ -105,7 +105,6 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  @include mixins.transition(all, 0.2s, ease-in-out);
   background-color: transparent;
   z-index: 1;
 
@@ -122,7 +121,10 @@
     width: auto;
   }
 
-  @include mixins.browserOutlineDisabled;
+  & {
+    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.browserOutlineDisabled;
+  }
 }
 
 @include mixins.outline;
@@ -140,9 +142,10 @@
 
 .input-wrapper [data-prefix],
 .input-wrapper [data-suffix] {
-  @include mixins.transition(all, 0.2s, ease-in-out);
   display: block;
   z-index: 1;
+
+  @include mixins.transition(all, 0.2s, ease-in-out);
 }
 
 @media only screen and (min-width: 30em) {

package/src/components/Form/Select/MultiSelect/MultiSelect.module.scss

@@ -22,12 +22,13 @@ $listItemHeight: 2.5rem;
 .select {
   position: relative;
   box-sizing: border-box;
-  @include mixins.transition(all, 0.2s, ease-in-out);
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   font-size: var(--form-control-font-size);
 
+  @include mixins.transition(all, 0.2s, ease-in-out);
+
   [data-display] {
     color: var(--color-default);
     font-family: var(--font-family);
@@ -66,6 +67,7 @@ $listItemHeight: 2.5rem;
     border-width: var(--input-border-width);
     border-radius: var(--input-border-radius);
     font-size: var(--form-control-font-size);
+
     @include mixins.transition(all, 0.2s, ease-in-out);
 
     &:focus {
@@ -149,7 +151,6 @@ $listItemHeight: 2.5rem;
         outline: none;
 
         &::before {
-          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
           content: "";
           position: absolute;
           top: 0;
@@ -158,6 +159,8 @@ $listItemHeight: 2.5rem;
           width: calc(100% - 0.25rem);
           opacity: 1;
           z-index: calc(variables.$popover-z-index + 1);
+
+          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
         }
       }
 

package/src/components/Form/Select/SingleSelect/Select.module.scss

@@ -22,12 +22,13 @@ $listItemHeight: 2.5rem;
 .select {
   position: relative;
   box-sizing: border-box;
-  @include mixins.transition(all, 0.2s, ease-in-out);
   border: 0;
   border-radius: var(--input-border-radius);
   background-color: var(--input-background-color);
   font-size: var(--form-control-font-size);
 
+  @include mixins.transition(all, 0.2s, ease-in-out);
+
   [data-display] {
     color: var(--color-default);
     font-family: var(--font-family);
@@ -128,7 +129,6 @@ $listItemHeight: 2.5rem;
         outline: none;
 
         &::before {
-          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
           content: "";
           position: absolute;
           top: 0;
@@ -137,6 +137,8 @@ $listItemHeight: 2.5rem;
           width: calc(100% - 0.25rem);
           opacity: 1;
           z-index: calc(variables.$popover-z-index + 1);
+
+          @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
         }
       }
 

package/src/components/Form/Textarea/Textarea.module.scss

@@ -56,7 +56,6 @@
   box-sizing: border-box;
   border: 0;
   border-radius: var(--input-border-radius);
-  @include mixins.transition(all, 0.2s, ease-in-out);
   font-family: var(--font-family);
   font-size: var(--form-control-font-size);
   color: var(--color-blue-grey900);
@@ -74,11 +73,14 @@
     color: var(--greyed-out);
   }
 
-  @include mixins.browserOutlineDisabled();
+  & {
+    @include mixins.transition(all, 0.2s, ease-in-out);
+    @include mixins.browserOutlineDisabled();
+  }
 }
 
-@include mixins.outline();
-
 .error {
   border-color: var(--error);
 }
+
+@include mixins.outline();

package/src/components/Form/Toggle/Toggle.module.scss

@@ -134,10 +134,11 @@ $borderRadius: 2.5rem;
   background-color: var(--toggle-background-color);
   border-radius: $borderRadius;
   position: relative;
-  @include mixins.transition(background-color, 0.2s, ease-in-out);
   display: block;
   pointer-events: none;
 
+  @include mixins.transition(background-color, 0.2s, ease-in-out);
+
   &:before {
     content: "";
     width: 1rem;

package/src/components/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -30,12 +30,13 @@ input {
 
 .input-wrapper {
   [data-icon]:before {
-    @include mixins.transition(all, 0.2s, ease-in-out);
     transform: translateY(0px);
     font-size: 1.125rem;
     display: flex;
     align-items: center;
     justify-content: center;
+
+    @include mixins.transition(all, 0.2s, ease-in-out);
   }
 
   [data-prefix],

package/src/components/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -19,7 +19,6 @@
 .textarea-wrapper {
   &:after {
     content: "";
-    @include mixins.transition(all, 0.15s, ease-in-out);
     display: block;
     width: calc(95%);
     background-color: var(--light);
@@ -28,6 +27,8 @@
     left: 1px;
     top: 1px;
     border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
+
+    @include mixins.transition(all, 0.15s, ease-in-out);
   }
 
   &.disabled:after {

package/src/components/Form/Wrapper/Wrapper/Wrapper.module.scss

@@ -28,8 +28,8 @@
     top: 1.3125rem;
     left: variables.$form-element-horizontal-padding-mobile;
     transform-origin: left top;
-    @include mixins.transition(all, 0.2s, ease-in-out);
     pointer-events: none;
+    @include mixins.transition(all, 0.2s, ease-in-out);
 
     &.error {
       color: var(--error);

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

@@ -377,3 +377,8 @@
   content: "\e950";
   @include fontProperties();
 }
+
+.icon-sidesheet-handle:before {
+  content: "\e951";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -100,7 +100,8 @@ export enum Icons {
   ZoomIn = "zoom-in",
   ZoomOut = "zoom-out",
   ArrowUp = "arrow-up",
-  ExternalLink = "external-link"
+  ExternalLink = "external-link",
+  SideSheetHandle = "sidesheet-handle"
 }
 
 type Tag = "span" | "div" | "i";

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

@@ -88,10 +88,10 @@
 }
 
 .button {
-  @include mixins.buttonBase("link");
-
   text-decoration: none;
 
+  @include mixins.buttonBase("link");
+
   &.fill {
     @include mixins.button("fill", "link");
   }

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

@@ -44,6 +44,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   describedby?: string;
   disableEscapeKeyDown?: boolean;
   disableBackdrop?: boolean;
+  hideBackdrop?: boolean;
   forceContainerOpen?: boolean;
   zIndex?: number;
   domRoot?: HTMLElement;
@@ -84,6 +85,7 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
     describedby,
     disableEscapeKeyDown = false,
     disableBackdrop = false,
+    hideBackdrop = false,
     forceContainerOpen = false,
     zIndex,
     domRoot,
@@ -141,12 +143,14 @@ const BaseModalComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
           onKeyDown={handleEscKeyPress}
           style={{ zIndex }}
         >
-          <div
-            {...backdropProps}
-            aria-hidden={true}
-            className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
-            onClick={handleBackdropClick}
-          ></div>
+          {!hideBackdrop ? (
+            <div
+              {...backdropProps}
+              aria-hidden={true}
+              className={`${classes["backdrop"]} ${backdropProps?.className ?? ""}`}
+              onClick={handleBackdropClick}
+            ></div>
+          ) : null}
           {forceContainerOpen ? (
             <div
               {...containerProps}

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

@@ -23,16 +23,17 @@ import { Typography } from "../../../Typography/Typography";
 export interface Props extends ComponentPropsWithRef<"div"> {
   id: string;
   title: string;
+  description?: string;
   children?: React.ReactNode;
   onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 const BaseModalHeaderComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { id, title, children, onClose, ...rest }: Props,
+  { id, title, children, onClose, description, className, ...rest }: Props,
   ref
 ) => {
   return (
-    <div {...rest} ref={ref} className={classes["header"]}>
+    <div {...rest} ref={ref} className={`${classes["header"]} ${className}`}>
       <div className={classes["headline"]}>
         <div className={classes["title-wrapper"]}>
           <Typography
@@ -44,6 +45,17 @@ const BaseModalHeaderComponent: ForwardRefRenderFunction<HTMLDivElement, Props>
           >
             {title}
           </Typography>
+          {description && (
+            <Typography
+              id={id}
+              className={classes["title"]}
+              tag="span"
+              spacing={{ marginBottom: 0 }}
+              variant="body"
+            >
+              {description}
+            </Typography>
+          )}
         </div>
         <IconButton onClick={onClose} className={classes["closeBtn"]} title="close modal">
           <Icon icon={Icons.Times} />

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.module.scss

@@ -21,8 +21,8 @@
 
   visibility: visible;
 
-  @include mixins.transition(transform, 0.5s, ease-in-out);
   transform: translate(120%);
+  @include mixins.transition(transform, 0.5s, ease-in-out);
 
   &.hide {
     visibility: hidden;

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/Tiles/Tile.module.scss

@@ -22,9 +22,10 @@
   box-sizing: border-box;
   padding: 0 0 2rem;
   background-color: var(--light);
-  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
   font-family: var(--font-family);
 
+  @include mixins.transition(box-shadow, 0.2s, ease-in-out);
+
   &:hover {
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.29);
   }
@@ -71,18 +72,20 @@
 
     .image {
       margin-top: 2.5rem;
-      @include mixins.skeletonLoading();
       border-radius: 0.5rem;
       width: 3rem;
       height: 3rem;
+
+      @include mixins.skeletonLoading();
     }
 
     .title {
-      @include mixins.skeletonLoading();
       color: transparent;
       display: inline-block;
       width: 70%;
       border-radius: 0.5rem;
+
+      @include mixins.skeletonLoading();
     }
   }
 }