Feature/notification carousel

package.json

@@ -14,6 +14,7 @@
     "src"
   ],
   "dependencies": {
+    "@floating-ui/react": "^0.25.1",
     "react-icons": "^4.10.1",
     "styled-components": "^6.0.7",
     "styled-system": "^5.1.5"

src/components/Notification/Notification.stories.tsx

@@ -78,3 +78,13 @@ VeryLongText.args = {
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque non lacus vitae tempus. Nullam at vehicula erat. Aliquam erat volutpat. Pellentesque et fringilla purus, ac blandit odio. Ut volutpat, mauris sed luctus hendrerit, dui nunc sodales erat, non volutpat nisi lorem eu dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque non lacus vitae tempus. Nullam at vehicula erat. Aliquam erat volutpat. Pellentesque et fringilla purus, ac blandit odio. Ut volutpat, mauris sed luctus hendrerit, dui nunc sodales erat, non volutpat nisi lorem eu dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque non lacus vitae tempus. Nullam at vehicula erat. Aliquam erat volutpat. Pellentesque et fringilla purus, ac blandit odio. Ut volutpat, mauris sed luctus hendrerit, dui nunc sodales erat, non volutpat nisi lorem eu dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus scelerisque non lacus vitae tempus. Nullam at vehicula erat. Aliquam erat volutpat. Pellentesque et fringilla purus, ac blandit odio. Ut volutpat, mauris sed luctus hendrerit, dui nunc sodales erat, non volutpat nisi lorem eu dolor.',
   notificationSeverity: 'info',
 };
+
+/**
+ * Timed notification
+ */
+export const Timed = Template.bind({});
+Timed.args = {
+  message: 'Timed notification',
+  title: 'Should disappear in 10 seconds',
+  duration: 10000,
+};

src/components/Notification/Notification.tsx

@@ -56,6 +56,21 @@ export interface NotificationProps
    * Aria-label for the close button
    */
   closeButtonAriaLabel?: string;
+
+  /**
+   * How long the notification is shown in milliseconds (indefinitely, if undefined)
+   */
+  duration?: number;
+
+  /**
+   * Function that is called when notification should be deleted from view (close button, or duration elapsed)
+   */
+  deleteNotification?: (index: number) => void;
+
+  /**
+   * Index of the notification, which can assist with deleteNotification
+   */
+  index?: number;
 }
 
 /**
@@ -166,6 +181,9 @@ export const Notification = ({
   notificationSeverity,
   showLoadingIndicator,
   closeButtonAriaLabel,
+  duration,
+  deleteNotification,
+  index,
   ...restProps
 }: NotificationProps) => {
   const props = {
@@ -174,11 +192,20 @@ export const Notification = ({
     notificationSeverity,
     showLoadingIndicator,
     closeButtonAriaLabel,
+    duration,
+    deleteNotification,
+    index,
     ...restProps,
   };
 
   const [hidden, setHidden] = React.useState(false);
 
+  duration &&
+    setTimeout(() => {
+      setHidden(true);
+      deleteNotification && deleteNotification(index || -1);
+    }, duration);
+
   return (
     !hidden && (
       <Wrapper
@@ -193,13 +220,18 @@ export const Notification = ({
           ></NotificationIcon>
           <NotificationMessageWrapper>
             <NotificationTitleParagraph>{title}</NotificationTitleParagraph>
-            <NotificationMessageParagraph>
-              {message}
-            </NotificationMessageParagraph>
+            {message && (
+              <NotificationMessageParagraph>
+                {message}
+              </NotificationMessageParagraph>
+            )}
           </NotificationMessageWrapper>
           <NotificationCloseButtonWrapper>
             <IconButton
-              onClick={() => setHidden(true)}
+              onClick={() => {
+                setHidden(true);
+                deleteNotification && deleteNotification(index || 0);
+              }}
               aria-label={
                 closeButtonAriaLabel || 'Close button for a notification'
               }

src/components/NotificationCarousel/NotificationCarousel.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import { NotificationCarousel } from './NotificationCarousel';
+
+export default {
+  title: 'Components/NotificationCarousel',
+  component: NotificationCarousel,
+  args: {
+    // Shaping the stories through args composition.
+    carouselItems: [
+      {
+        title: 'First notification',
+        closeButtonAriaLabel: 'Close the first notification',
+        hidden: false,
+      },
+      {
+        title: 'Second notification',
+        message: 'Should disappear in 10 seconds',
+        duration: 10000,
+        closeButtonAriaLabel: 'Close the second notification',
+      },
+      {
+        title: 'Third notification',
+        closeButtonAriaLabel: 'Close the third notification',
+      },
+    ],
+    maxNotifications: 2,
+  },
+  parameters: {
+    design: [
+      {
+        name: 'light',
+        type: 'figma',
+        url: '',
+      },
+      {
+        name: 'dark',
+        type: 'figma',
+        url: '',
+      },
+    ],
+  },
+} as Meta<typeof NotificationCarousel>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: StoryFn<typeof NotificationCarousel> = (args) => {
+  return <NotificationCarousel {...args} />;
+};
+
+/**
+ * Default
+ */
+export const Default = Template.bind({});

src/components/NotificationCarousel/NotificationCarousel.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ComponentBaseProps, generateRandomString } from '../../shared';
+import { Notification } from '../Notification/Notification';
+import { Wrapper, WrapperProps } from '../Wrapper';
+import { notificationSpacing } from './styles';
+
+/**
+ * Notification carousel component properties
+ * Extends html label attributes
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#attributes
+ */
+export interface NotificationCarouselProps
+  extends WrapperProps,
+    ComponentBaseProps<HTMLLabelElement>,
+    React.LabelHTMLAttributes<HTMLLabelElement> {
+  /**
+   * List of items (notifications) to stack to each other
+   */
+  carouselItems?: CarouselItem[];
+
+  /**
+   * Maximum amount of notifications to be shown at once
+   */
+  maxNotifications?: number;
+}
+
+/**
+ * Each notification shown on the carousel is specified thru CarouselItem
+ */
+export interface CarouselItem {
+  /**
+   * ID for the carousel item, or randomly generated if undefined
+   */
+  id?: string;
+
+  /**
+   * Title for the notification
+   */
+  title?: string;
+
+  /**
+   * Message for the notification (optional)
+   */
+  message?: string;
+
+  /**
+   * Aria-label for the close button
+   */
+  closeButtonAriaLabel?: string;
+
+  /**
+   * How long the notification is shown (indefinitely if undefined)
+   */
+  duration?: number;
+}
+
+/**
+ * Wrap notifications to each other vertically with padding
+ */
+const NotificationCarouselItemWrapper = styled.div`
+  padding-bottom: ${notificationSpacing};
+  pointer-events: auto;
+`;
+
+/**
+ * NotificationCarousel component
+ * @param props NotificationCarousel props
+ * @returns NotificationCarousel component
+ */
+export const NotificationCarousel = ({
+  carouselItems,
+  maxNotifications,
+}: NotificationCarouselProps) => {
+  const [carouselItemsState, setCarouselItemsState] = useState(
+    carouselItems || []
+  );
+
+  return (
+    <Wrapper
+      style={{
+        overflow: 'hidden',
+        pointerEvents: 'none',
+      }}
+    >
+      {carouselItemsState
+        .filter((_, index) =>
+          maxNotifications ? index < maxNotifications : true
+        )
+        .map((item, index) => (
+          <NotificationCarouselItemWrapper
+            key={item.id || generateRandomString(5)}
+          >
+            <Notification
+              title={item.title}
+              message={item.message}
+              closeButtonAriaLabel={item.closeButtonAriaLabel}
+              duration={item.duration}
+              index={index}
+              deleteNotification={(deleteIndex) => {
+                setCarouselItemsState(
+                  carouselItemsState.filter((_, index) => index !== deleteIndex)
+                );
+              }}
+            />
+          </NotificationCarouselItemWrapper>
+        ))}
+    </Wrapper>
+  );
+};

src/components/NotificationCarousel/styles.ts

@@ -0,0 +1,6 @@
+import { pxToRem } from '../../shared/styles';
+
+/**
+ * Spacing between two notifications in the notification carousel
+ */
+export const notificationSpacing = pxToRem(16);