[v15] [Web] Create notification component

web/packages/design/src/theme/themes/bblpTheme.ts

@@ -102,6 +102,22 @@ const colors: ThemeColors = {
         'rgba(0, 162, 35, 0.18)',
         'rgba(0, 162, 35, 0.25)',
       ],
+      // TODO rudream: update bblp interactive tonal colors.
+      danger: [
+        'rgba(255, 98, 87, 0.1)',
+        'rgba(255, 98, 87, 0.18)',
+        'rgba(255, 98, 87, 0.25)',
+      ],
+      alert: [
+        'rgba(255, 171, 0, 0.1)',
+        'rgba(255, 171, 0, 0.18)',
+        'rgba(255, 171, 0, 0.25)',
+      ],
+      informational: [
+        'rgba(0, 158, 255, 0.1)',
+        'rgba(0, 158, 255, 0.18)',
+        'rgba(0, 158, 255, 0.25)',
+      ],
       neutral: neutralColors,
     },
   },
@@ -176,6 +192,13 @@ const colors: ThemeColors = {
     active: '#D64D22',
   },
 
+  // TODO rudream: update bblp accent colors.
+  accent: {
+    main: 'rgba(0, 158, 255, 1)',
+    hover: 'rgba(51, 177, 255, 1)',
+    active: 'rgba(102, 197, 255, 1)',
+  },
+
   notice: {
     background: '#282828', // elevated
   },

web/packages/design/src/theme/themes/darkTheme.ts

@@ -102,6 +102,21 @@ const colors: ThemeColors = {
         'rgba(0, 191, 166, 0.18)',
         'rgba(0, 191, 166, 0.25)',
       ],
+      danger: [
+        'rgba(255, 98, 87, 0.1)',
+        'rgba(255, 98, 87, 0.18)',
+        'rgba(255, 98, 87, 0.25)',
+      ],
+      alert: [
+        'rgba(255, 171, 0, 0.1)',
+        'rgba(255, 171, 0, 0.18)',
+        'rgba(255, 171, 0, 0.25)',
+      ],
+      informational: [
+        'rgba(0, 158, 255, 0.1)',
+        'rgba(0, 158, 255, 0.18)',
+        'rgba(0, 158, 255, 0.25)',
+      ],
       neutral: neutralColors,
     },
   },
@@ -182,6 +197,12 @@ const colors: ThemeColors = {
     active: '#FFCD66',
   },
 
+  accent: {
+    main: 'rgba(0, 158, 255, 1)',
+    hover: 'rgba(51, 177, 255, 1)',
+    active: 'rgba(102, 197, 255, 1)',
+  },
+
   notice: {
     background: '#344179', // elevated
   },

web/packages/design/src/theme/themes/lightTheme.ts

@@ -101,6 +101,21 @@ const colors: ThemeColors = {
         'rgba(0, 125, 107, 0.18)',
         'rgba(0, 125, 107, 0.25)',
       ],
+      danger: [
+        'rgba(204, 55, 45, 0.1)',
+        'rgba(204, 55, 45, 0.18)',
+        'rgba(204, 55, 45, 0.25)',
+      ],
+      alert: [
+        'rgba(255, 171, 0, 0.1)',
+        'rgba(255, 171, 0, 0.18)',
+        'rgba(255, 171, 0, 0.25)',
+      ],
+      informational: [
+        'rgba(0, 115, 186, 0.1)',
+        'rgba(0, 115, 186, 0.18)',
+        'rgba(0, 115, 186, 0.25)',
+      ],
       neutral: neutralColors,
     },
   },
@@ -181,6 +196,12 @@ const colors: ThemeColors = {
     active: '#996700',
   },
 
+  accent: {
+    main: 'rgba(0, 115, 186, 1)',
+    hover: 'rgba(0, 92, 149, 1)',
+    active: 'rgba(0, 69, 112, 1)',
+  },
+
   notice: {
     background: blue[50],
   },

web/packages/design/src/theme/themes/types.ts

@@ -60,6 +60,9 @@ export type ThemeColors = {
       primary: string[];
       neutral: string[];
       success: string[];
+      danger: string[];
+      alert: string[];
+      informational: string[];
     };
   };
 
@@ -143,6 +146,12 @@ export type ThemeColors = {
     active: string;
   };
 
+  accent: {
+    main: string;
+    hover: string;
+    active: string;
+  };
+
   notice: {
     background: string;
   };

web/packages/design/src/theme/typography.js

@@ -85,6 +85,11 @@ const typography = {
     fontSize: '10px',
     lineHeight: '16px',
   },
+  subtitle3: {
+    fontSize: '10px',
+    fontWeight: regular,
+    lineHeight: '14px',
+  },
 };
 
 export default typography;

web/packages/teleport/src/Notifications/Notification.story.tsx

@@ -0,0 +1,185 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import { Flex } from 'design';
+
+import {
+  NotificationSubKind,
+  Notification as NotificationType,
+} from 'teleport/services/notifications';
+
+import { Notification } from './Notification';
+
+export default {
+  title: 'Teleport/Notifications',
+};
+
+export const Notifications = () => {
+  return (
+    <Flex
+      css={`
+        background: ${props => props.theme.colors.levels.surface};
+        padding: 24px;
+        width: fit-content;
+        height: fit-content;
+        flex-direction: column;
+        gap: 24px;
+      `}
+    >
+      {mockNotifications.map(notification => {
+        return (
+          <Notification notification={notification} key={notification.id} />
+        );
+      })}
+    </Flex>
+  );
+};
+
+const mockNotifications: NotificationType[] = [
+  {
+    id: '1',
+    title: '',
+    description: '',
+    subKind: NotificationSubKind.AccessRequestApproved,
+    createdDate: new Date(Date.now() - 30 * 1000), // 30 seconds ago
+    clicked: false,
+    labels: [
+      {
+        name: 'requested-resources',
+        value: 'node-1,node-2,db-1,db-2,db-3',
+      },
+      { name: 'reviewer', value: 'joe' },
+    ],
+  },
+  {
+    id: '2',
+    title: '',
+    description: '',
+    subKind: NotificationSubKind.AccessRequestApproved,
+    createdDate: new Date(Date.now() - 4 * 60 * 1000), // 4 minutes ago
+    clicked: false,
+    labels: [
+      {
+        name: 'requested-role',
+        value: 'auditor',
+      },
+      { name: 'reviewer', value: 'joe' },
+    ],
+  },
+  {
+    id: '3',
+    title: '',
+    description: '',
+    subKind: NotificationSubKind.AccessRequestDenied,
+    createdDate: new Date(Date.now() - 15 * 60 * 1000), // 15 minutes ago
+    clicked: false,
+    labels: [
+      {
+        name: 'requested-role',
+        value: 'auditor',
+      },
+      { name: 'reviewer', value: 'joe' },
+    ],
+  },
+  {
+    id: '4',
+    title: '',
+    description: '',
+    subKind: NotificationSubKind.AccessRequestPending,
+    createdDate: new Date(Date.now() - 3 * 60 * 60 * 1000), // 3 hours ago
+    clicked: true,
+    labels: [
+      {
+        name: 'requested-resources',
+        value: 'db-2,node-5',
+      },
+      { name: 'requester', value: 'bob' },
+    ],
+  },
+  {
+    id: '5',
+    title: '',
+    description: '',
+    subKind: NotificationSubKind.AccessRequestPending,
+    createdDate: new Date(Date.now() - 15 * 60 * 60 * 1000), // 15 hours ago
+    clicked: true,
+    labels: [
+      {
+        name: 'requested-role',
+        value: 'intern',
+      },
+      { name: 'requester', value: 'bob' },
+    ],
+  },
+  {
+    id: '6',
+    title: '',
+    description: '',
+    subKind: NotificationSubKind.AccessRequestNowAssumable,
+    createdDate: new Date(Date.now() - 24 * 60 * 60 * 1000), // 1 day ago
+    clicked: true,
+    labels: [
+      {
+        name: 'requested-resources',
+        value: 'db-2,node-5',
+      },
+      { name: 'requester', value: 'bob' },
+    ],
+  },
+  {
+    id: '7',
+    title: '',
+    description: '',
+    subKind: NotificationSubKind.AccessRequestNowAssumable,
+    createdDate: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), // 3 days ago
+    clicked: false,
+    labels: [
+      {
+        name: 'requested-resources',
+        value: 'node-5',
+      },
+      { name: 'requester', value: 'bob' },
+    ],
+  },
+  {
+    id: '8',
+    title: '',
+    description: '',
+    subKind: NotificationSubKind.AccessRequestNowAssumable,
+    createdDate: new Date(Date.now() - 2 * 7 * 24 * 60 * 60 * 1000), // 2 weeks ago
+    clicked: true,
+    labels: [
+      {
+        name: 'requested-role',
+        value: 'auditor',
+      },
+      { name: 'requester', value: 'bob' },
+    ],
+  },
+  {
+    id: '9',
+    title: 'This is an example user-created warning notification',
+    description: 'This is the text content of a warning notification.',
+    subKind: NotificationSubKind.UserCreatedWarning,
+    createdDate: new Date(Date.now() - 93 * 24 * 60 * 60 * 1000), // 3 months ago
+    clicked: true,
+    labels: [],
+  },
+];