feat(notifications): notification board components

src/components/notifications/notification-item/index.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CalendarIcon from 'assets/icons/calendar.svg';
+import InfoIcon from 'assets/icons/info-rounded.svg';
+import LayersIcon from 'assets/icons/layers.svg';
+import WarningIcon from 'assets/icons/warning.svg';
+import { NotificationItemWrapper } from './styles';
+
+const NotificationItem = ({ title, description, date, icon }) => {
+  const renderIcon = (option) => {
+    switch (option) {
+      case 'layers':
+        return <LayersIcon />;
+      case 'warning':
+        return <WarningIcon />;
+      case 'calendar':
+        return <CalendarIcon />;
+      default:
+        return <InfoIcon />;
+    }
+  };
+
+  return (
+    <NotificationItemWrapper data-component-type="notification-item">
+      <div>{renderIcon(icon)}</div>
+      <div>
+        <div className="text">
+          <div className="header">
+            <div className="title">{title}</div>
+            <div className="date">{date}</div>
+          </div>
+          <div
+            className="description"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
+        </div>
+      </div>
+    </NotificationItemWrapper>
+  );
+};
+
+NotificationItem.propTypes = {
+  /** Title of notification. */
+  title: PropTypes.string,
+  /** Description, it supports basic HTML. */
+  description: PropTypes.string,
+  /** YYY-MM-DD */
+  date: PropTypes.string,
+  /** It can be one of the following options: info | warning | calendar | layers */
+  icon: PropTypes.string,
+};
+
+export default NotificationItem;

src/components/notifications/notification-item/notification-item.md

@@ -0,0 +1,12 @@
+Notification item.
+
+```js
+<NotificationItem
+  icon="layers"
+  title="Upcoming Event: Notification Title"
+  description={`
+  Lorem Ipsum is simply <b>dummy text of the printing</b> and typesetting industry. <a href="/#">Lorem Ipsum</a> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+  `}
+  date="2023-08-23"
+/>
+```

src/components/notifications/notification-item/styles.js

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+
+export const NotificationItemWrapper = styled.div`
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  padding: 20px;
+
+  .text {
+    padding-left: 20px;
+    padding-right: 20px;
+
+    .header {
+      display: flex;
+      flex-direction: row;
+      font-size: 16px;
+
+      .title {
+        font-weight: 500;
+        width: 75%;
+      }
+
+      .date {
+        color: #555555;
+        font-weight: 400;
+        text-align: right;
+        width: 25%;
+      }
+    }
+
+    .description {
+      font-size: 14px;
+      line-height: 22.4px;
+      padding-bottom: 10px;
+      padding-top: 10px;
+      text-align: justify;
+
+      > b,
+      strong {
+        font-weight: 500;
+      }
+
+      > a {
+        color: #7d953b;
+        font-weight: 500;
+      }
+    }
+  }
+`;

src/docs/notifications.md

@@ -0,0 +1,4 @@
+<br />
+Notification components for Notifications Board.
+<br />
+<br />

src/index.js

@@ -38,6 +38,7 @@ export { default as NoContent } from './components/no-content';
 export { default as Switch } from './components/switch';
 export { default as Tooltip } from './components/tooltip';
 export { default as CookiesBanner } from './components/cookies-banner';
+export { default as NotificationItem } from './components/notifications/notification-item';
 
 // Forms
 export { default as ContactUsForm } from './components/forms/contact-us';

styleguide.config.js

@@ -79,6 +79,11 @@ module.exports = {
       content: 'src/docs/modals.md',
       components: 'src/components/modals/*/index.js',
     },
+    {
+      name: 'Notification Board',
+      content: 'src/docs/notifications.md',
+      components: 'src/components/notifications/*/index.jsx',
+    },
     {
       name: 'Form components',
       content: 'src/docs/form-components.md',