@onewelcome/react-lib-components 0.2.6 → 1.0.0

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

@@ -1,3 +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.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import classes from "./BaseModalHeader.module.scss";
 import { IconButton } from "../../../Button/IconButton";
@@ -8,7 +24,7 @@ export interface Props extends ComponentPropsWithRef<"div"> {
   id: string;
   title: string;
   children?: React.ReactNode;
-  onClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 export const BaseModalHeader = React.forwardRef<HTMLDivElement, Props>(

package/src/Notifications/Dialog/Dialog.module.scss

@@ -1,3 +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.
+ */
+
 .dialog {
   align-items: center;
 }

package/src/Notifications/Dialog/Dialog.test.tsx

@@ -1,3 +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.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { Dialog, Props } from "./Dialog";
 import { render, getAllByRole } from "@testing-library/react";
@@ -29,7 +45,7 @@ describe("Dialog", () => {
 
     expect(getByText(initParams.title)).toBeDefined();
     expect(getByText(initParams.children as string)).toBeDefined();
-    const actionsDiv = primaryButton.closest("footer");
+    const actionsDiv = primaryButton.closest("div");
     expect(actionsDiv).toHaveClass("left");
     expect(actionsDiv?.children[0]).toEqual(primaryButton);
     expect(actionsDiv?.children[1]).toEqual(secondaryButton);
@@ -41,7 +57,7 @@ describe("Dialog", () => {
     render(<Dialog {...initParams} alignActions="right" />);
     const [secondaryButton, primaryButton] = getButtons(document.body);
 
-    const actionsDiv = primaryButton.closest("footer");
+    const actionsDiv = primaryButton.closest("div");
     expect(actionsDiv).not.toHaveClass("left");
     expect(actionsDiv?.children[0]).toEqual(secondaryButton);
     expect(actionsDiv?.children[1]).toEqual(primaryButton);

package/src/Notifications/Dialog/Dialog.tsx

@@ -1,3 +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.
+ */
+
 import React, { ComponentPropsWithRef, useState } from "react";
 import { BaseModal } from "../BaseModal/BaseModal";
 import { BaseModalContent } from "../BaseModal/BaseModalContent/BaseModalContent";

package/src/Notifications/Dialog/DialogActions/DialogActions.module.scss

@@ -1,3 +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.
+ */
+
 .actions {
   margin: 1.5rem 1.25rem 1.25rem;
 

package/src/Notifications/Dialog/DialogActions/DialogActions.test.tsx

@@ -1,3 +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.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { DialogActions, Props } from "./DialogActions";
 import { render } from "@testing-library/react";

package/src/Notifications/Dialog/DialogActions/DialogActions.tsx

@@ -1,3 +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.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import {
   BaseModalActions,
@@ -9,7 +25,7 @@ export interface Props extends ComponentPropsWithRef<any>, BaseModalActionsProps
   align: "left" | "right";
 }
 
-export const DialogActions = React.forwardRef<HTMLElement, Props>(
+export const DialogActions = React.forwardRef<HTMLDivElement, Props>(
   ({ children, align, ...rest }: Props, ref) => {
     return (
       <BaseModalActions

package/src/Notifications/Dialog/DialogTitle/DialogTitle.module.scss

@@ -1,3 +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.
+ */
+
 .header {
   margin: 1.5rem 1.25rem 1.25rem;
 }

package/src/Notifications/Dialog/DialogTitle/DialogTitle.test.tsx

@@ -1,3 +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.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { DialogTitle, Props } from "./DialogTitle";
 import { render, getByText } from "@testing-library/react";

package/src/Notifications/Dialog/DialogTitle/DialogTitle.tsx

@@ -1,3 +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.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import { Typography } from "../../../Typography/Typography";
 import classes from "./DialogTitle.module.scss";

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.test.tsx

@@ -1,3 +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.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { DiscardChangesDialog, Props } from "./DiscardChangesDialog";
 import { render } from "@testing-library/react";

package/src/Notifications/DiscardChangesModal/DiscardChangesDialog/DiscardChangesDialog.tsx

@@ -1,3 +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.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import { Dialog } from "../../Dialog/Dialog";
 import { Typography } from "../../../Typography/Typography";

package/src/Notifications/DiscardChangesModal/DiscardChangesModal.test.tsx

@@ -1,3 +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.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { DiscardChangesModal, Props } from "./DiscardChangesModal";
 import { findByTestId, getAllByRole, render, waitFor } from "@testing-library/react";

package/src/Notifications/DiscardChangesModal/DiscardChangesModal.tsx

@@ -1,3 +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.
+ */
+
 import React, { Fragment, useState } from "react";
 import { Modal, Props as ModalProps } from "../Modal/Modal";
 import { ModalHeader, Props as ModalHeaderProps } from "../Modal/ModalHeader/ModalHeader";

package/src/Notifications/Modal/Modal.tsx

@@ -1 +1,17 @@
+/*
+ * 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 { BaseModal as Modal, Props } from "../BaseModal/BaseModal";

package/src/Notifications/Modal/ModalActions/ModalActions.tsx

@@ -1,3 +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.
+ */
+
 export {
   BaseModalActions as ModalActions,
   Props

package/src/Notifications/Modal/ModalContent/ModalContent.tsx

@@ -1,3 +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.
+ */
+
 export {
   BaseModalContent as ModalContent,
   Props

package/src/Notifications/Modal/ModalHeader/ModalHeader.tsx

@@ -1,3 +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.
+ */
+
 export {
   BaseModalHeader as ModalHeader,
   Props

package/src/Notifications/SlideInModal/SlideInModal.module.scss

@@ -1,3 +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.
+ */
+
 .slide-in-modal {
   justify-content: flex-end;
 

package/src/Notifications/SlideInModal/SlideInModal.test.tsx

@@ -1,3 +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.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { SlideInModal } from "./SlideInModal";
 import { Props } from "../Modal/Modal";

package/src/Notifications/SlideInModal/SlideInModal.tsx

@@ -1,3 +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.
+ */
+
 import React, { TransitionEventHandler, useState, useRef } from "react";
 import { Props as ModalProps, Modal } from "../Modal/Modal";
 import classes from "./SlideInModal.module.scss";

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -1,7 +1,26 @@
+/*!
+ * 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.
+ */
+
 .snackbars {
   position: fixed;
   z-index: 20;
   width: 100%;
+  transition: height 0.2s ease-in-out;
+  display: flex;
+  flex-direction: column;
 
   &.bottom {
     bottom: 3.5rem;

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.test.tsx

@@ -1,3 +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.
+ */
+
 import React from "react";
 import { SnackbarContainer, Props } from "./SnackbarContainer";
 import { render } from "@testing-library/react";

package/src/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.tsx

@@ -1,5 +1,22 @@
-import React from "react";
+/*
+ * 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, { useContext, useEffect, useState } from "react";
 import classes from "./SnackbarContainer.module.scss";
+import { SnackbarContext } from "../SnackbarProvider/SnackbarStateProvider";
 
 export interface Placement {
   vertical: "top" | "bottom";
@@ -13,11 +30,49 @@ export interface Props {
   className?: string;
 }
 
+const useSnackbarContainerHeightAnimation = () => {
+  const { snackbars } = useContext(SnackbarContext);
+  const [height, setHeight] = useState(0);
+  const [justifyContent, setJustifyContent] = useState<"flex-start" | "flex-end">("flex-start");
+  const spaceBetweenSnackbars = 8;
+  const exceedsMaximumVisibleSnackbars = snackbars.length >= 3;
+
+  useEffect(() => {
+    const allHeights = snackbars.map(snackbar => snackbar.height);
+
+    let totalHeight = allHeights.reduce((prev, curr) => prev + curr, 0);
+
+    totalHeight += (Math.min(snackbars.length, 3) - 1) * spaceBetweenSnackbars;
+
+    /**
+     * Once we reach the maximum amount of snackbars, they will start to disappear. We have to wait with reversing the justify-content until the last snackbar
+     * has completed their animationIn. This is around 500ms. Then we want to reverse it, because otherwise whenever a snackbar disappears they shift up
+     * and then down again, which looks really bad.
+     * */
+    if (exceedsMaximumVisibleSnackbars)
+      setTimeout(() => {
+        setJustifyContent("flex-end");
+      }, 500);
+
+    if (height > totalHeight && justifyContent !== "flex-end") {
+      setJustifyContent("flex-end");
+    } else if (height < totalHeight && justifyContent !== "flex-start") {
+      setJustifyContent("flex-start");
+    }
+
+    setHeight(totalHeight);
+  }, [snackbars]);
+
+  return { height, justifyContent };
+};
+
 export const SnackbarContainer = ({ placement, children, zIndex, className, ...rest }: Props) => {
+  const { height, justifyContent } = useSnackbarContainerHeightAnimation();
+
   return (
     <div
       {...rest}
-      style={{ zIndex }}
+      style={{ zIndex, height, justifyContent }}
       className={`${classes["snackbars"]} ${classes[placement.horizontal]} ${
         classes[placement.vertical]
       } ${className ?? ""}`}

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -1,3 +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.
+ */
+
 @import "../../../readyclasses.module.scss";
 
 .snackbar {
@@ -6,6 +22,8 @@
   display: flex;
   width: 100%;
   box-sizing: border-box;
+  transition: height 0.2s ease-in-out;
+  flex-grow: 0;
 
   &.info {
     background-color: var(--snackbar-info-background-color);

package/src/Notifications/Snackbar/SnackbarItem/SnackbarItem.test.tsx

@@ -1,3 +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.
+ */
+
 import React from "react";
 import { render, getByRole, waitFor } from "@testing-library/react";
 import { SnackbarItem, Props } from "./SnackbarItem";