adding notifications panel (#16)

* adding notifications panel

* assigning comments

* mode misspelling

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamods/notifications-center",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Notification center maintained by Dynamo Team@Autodesk",
   "author": "Autodesk Inc.",
   "license": "MIT",
@@ -28,10 +28,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@filipeop/notifications-panel": "^0.0.2",
     "@babel/core": "^7.18.6",
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-react": "^7.18.6",
-    "@hig/notifications-flyout": "^3.2.0",
     "@hig/timestamp": "^2.1.0",
     "axios": "^0.27.2",
     "babel-loader": "^8.2.5",

src/App.js

@@ -1,8 +1,9 @@
 import './App.css';
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
-import NotificationsFlyout, { anchorPoints } from '@hig/notifications-flyout';
+import NotificationsPanel from '@filipeop/notifications-panel';
 import Timestamp from '@hig/timestamp';
+import PropTypes from 'prop-types'
 
 function App() {
     let notificationData = [];
@@ -34,14 +35,11 @@ function App() {
     }
 
     return (
-        <div className="App">
-            <NotificationsFlyout class="NotificationsFlyout"
-                heading="Notifications"
-                indicatorTitle="View application alerts"
-                anchorPoint={anchorPoints.TOP_LEFT}
-                notifications={notificationData}>
-            </NotificationsFlyout>
-        </div>
+        <NotificationsPanel class="NotificationsFlyout"
+            heading="Notifications"
+            indicatorTitle="View application alerts"
+            notifications={notificationData}>
+        </NotificationsPanel>
     );
 }
 

webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
+    mode: 'none',
     entry: {
         app: './src/index.js',
     },