NEO-1804 PR #2 (#242)

* Completed preliminary re-factor of Notification Component: re-worked CSS, provided for more modular actions, created new timestamp, badge and text truncation features, allowed for inline vs not-inline functionality, updated stories

* Commented out failing Notification tests to re-work in second PR

* Added temporary test to quiet test suite error until new tests written in PR 2

* Added missing CSS style

* Update src/components/Notification/Notification.tsx

Include default value for `navigator` object

Co-authored-by: JoeS <55896546+joe-s-avaya@users.noreply.github.com>

* Switched inline styles out for class name

* Commiting changes in progress in order to switch to previous branch

* Changed font size and color for timestamp, used Neo typography classes for same

* Picke up design feedback on PR

* Changed variable name as per feedback

* Continued re-building Notification Component - updated tests, added logic for improved text truncation, added aria-label translations

* Ran yarn all

* Ran yarn all

* Restored use of PopUpManager, re-factored truncation logic to fix issues w/ using PopUpManager and description text wrapping, picked up misc. feedback suggestions

* Re-factored truncation behavior to avoid unnecessary dependencies in Component, added Tooltip to Badge, fixed bug in truncation behavior

* Allowed for default/custom width in PopUpManager

* Removed console.logs, renamed function for clarity

* git doesn't like changing capitalization of file names

* Fixed missing logic in textWidth function

---------

Co-authored-by: JoeS <55896546+joe-s-avaya@users.noreply.github.com>

src/components/Notification/Actions/ButtonAction/SecondaryButton.tsx

@@ -1,15 +1,18 @@
 import { Button } from "components/Button";
+
 import { SecondaryButtonProps } from "./ButtonActionTypes";
 
 export const SecondaryButton = ({
   children,
+  notificationType = "info",
   ...rest
 }: SecondaryButtonProps) => {
   return (
     <Button
       className="neo-notification__button"
       size="compact"
       variant="secondary"
+      status={notificationType}
       {...rest}
     >
       {children}

src/components/Notification/Actions/CounterAction.tsx

@@ -1,4 +1,8 @@
 export type CounterActionProps = { count: string };
 export const CounterAction = ({ count }: CounterActionProps) => {
-  return <div className="neo-notification__counter">{count}</div>;
+  return (
+    <div className="neo-notification__counter" aria-label={count}>
+      {count}
+    </div>
+  );
 };

src/components/Notification/EventNotification.stories.tsx

@@ -21,6 +21,13 @@ Event.args = {
   header: "Event",
   description: "This is an event.",
   isElevated: true,
+  isInline: true,
+  actions: {
+    closable: {
+      onClick: () => alert("closed"),
+      "aria-label": "Click this button will close this notification",
+    },
+  },
 };
 
 export const EventCloseAlert = EventTemplate.bind({});

src/components/Notification/Helpers/index.ts

@@ -0,0 +1 @@
+export * from "./translations";

src/components/Notification/Helpers/translations.ts

@@ -0,0 +1,15 @@
+export interface INotificationTranslations {
+  icon: string;
+  badge: string;
+  textTruncation: string;
+  closeAction: string;
+  counterAction: string;
+}
+
+export const defaultTranslations: INotificationTranslations = {
+  icon: "icon",
+  badge: "Badge representing number of times notification has occured: ",
+  textTruncation: "Expand/collapse",
+  closeAction: "Close notification",
+  counterAction: "Counter: ",
+};

src/components/Notification/NonEventNotification.stories.tsx

@@ -22,6 +22,7 @@ export const Info: Story = {
     header: "Info",
     description: "This is some info.",
     isElevated: false,
+    isInline: true,
   },
 };
 
@@ -31,6 +32,7 @@ export const Success: Story = {
     header: "Success",
     description: "You are successful.",
     isElevated: true,
+    isInline: true,
   },
 };
 
@@ -40,6 +42,7 @@ export const Warning: Story = {
     header: "Warning",
     description: "This is a warning.",
     isElevated: true,
+    isInline: true,
   },
 };
 
@@ -49,6 +52,7 @@ export const Alert: Story = {
     header: "Alert",
     description: "This is an alert.",
     isElevated: false,
+    isInline: true,
   },
 };
 
@@ -57,6 +61,7 @@ export const AlertCloseAlert: Story = {
     type: "alert",
     header: "Alert",
     description: "This is an alert.",
+    isInline: true,
     actions: {
       closable: {
         onClick: () => alert("closed"),
@@ -74,7 +79,6 @@ export const AlertCounter: Story = {
     description:
       "Body copy placeholder, single line of text before it is truncated. Body copy placeholder, single line of text before it is truncated. Body copy placeholder, single line of text before it is truncated.",
     isElevated: false,
-    isInline: false,
     occurences: 4,
     actions: {
       closable: {