notifications-panel component (#1)

* notifications-panel component

* changing package name

* updating CHANGELOG.md

* removing @hig/flyout package

* updating README file

packages/notifications-panel/CHANGELOG.md

@@ -0,0 +1,6 @@
+### Features
+
+* this component leverages @hig/notifications-flyout@3.2.0 ([9b8069e](https://github.com/DynamoDS/hig/pull/1/commits/9b8069ec26b66cfad929b88edd20eb0c1a145676))
+* Addition of the 'Mark all as read' feature
+
+# [@hig/notifications-panel-v0.1.0](https://github.com/DynamoDS/hig/pull/1) (2022-08-04)

packages/notifications-panel/README.md

@@ -0,0 +1,50 @@
+# Notifications Panel
+
+The notifications panel provides information and warnings that products may recover from without user involvement. It is meant to be displayed in a flyout as a list of notifications. 
+
+## Getting started
+
+```bash
+yarn add @hig/notifications-panel @hig/theme-context @hig/theme-data
+```
+
+## Import the component
+
+```js
+import NotificationsPanel, { Notification } from "@hig/notifications-panel";
+```
+
+## Basic usage
+
+```jsx
+<NotificationsPanel>
+  <Notification>
+    <p>Your subscription expires May 5</p>
+  </Notification>
+</NotificationsPanel>
+```
+
+## Advanced usage
+
+```jsx
+import NotificationsPanel, { anchorPoints } from "@hig/notifications-panel";
+import Timestamp from "@hig/timestamp";
+
+<NotificationsPanel
+  open
+  heading="Alerts"
+  indicatorTitle="View application alerts"
+  notifications={[
+    {
+      id: "unique-id",
+      featured: true,
+      unread: true,
+      timestamp: <Timestamp timestamp="2018-08-20T20:24:50.333Z" />,
+      content: <p>Something happened</p>
+    },
+    {
+      content: "Hello world"
+    }
+  ]}
+/>
+```

packages/notifications-panel/__mocks__/@hig/progress-ring.js

@@ -0,0 +1,8 @@
+/** @todo Remove when `@hig/progress-ring` is migrated from vanilla */
+import React from "react";
+
+function ProgressRingMock(props) {
+  return <div data-props={JSON.stringify(props, null, 2)} />;
+}
+
+module.exports = jest.fn(ProgressRingMock);

packages/notifications-panel/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@hig/notifications-panel",
+  "version": "0.0.1",
+  "description": "HIG NotificationsPanel",
+  "author": "Autodesk Inc.",
+  "license": "Apache-2.0",
+  "homepage": "https://hig.autodesk.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DynamoDS/hig.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "build/index.js",
+  "module": "build/index.es.js",
+  "files": [
+    "build/*"
+  ],
+  "dependencies": {
+    "@hig/behaviors": "^2.1.0",
+    "@hig/icon-button": "^3.1.0",
+    "@hig/icons": "^4.1.0",
+    "@hig/progress-ring": "^2.2.0",
+    "@hig/rich-text": "^2.1.0",
+    "@hig/typography": "^2.1.0",
+    "@hig/utils": "^0.4.1",
+    "emotion": "^10.0.0",
+    "prop-types": "^15.7.1",
+    "react-transition-group": "^4.4.2"
+  },
+  "devDependencies": {
+    "@hig/avatar": "^2.1.0",
+    "@hig/babel-preset": "^0.1.1",
+    "@hig/eslint-config": "^0.1.0",
+    "@hig/jest-preset": "^0.1.0",
+    "@hig/scripts": "^0.1.2",
+    "@hig/semantic-release-config": "^0.1.0",
+    "@hig/text-link": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@hig/theme-context": "^4.2.0",
+    "@hig/theme-data": "^3.0.0",
+    "react": "^17.0.0"
+  },
+  "scripts": {
+    "build": "hig-scripts-build",
+    "lint": "hig-scripts-lint",
+    "test": "hig-scripts-test",
+    "release": "hig-scripts-release",
+    "publish:npm": "rm -rf dist && mkdir dist &&  babel src/component -d dist --copy-files"
+  },
+  "eslintConfig": {
+    "extends": "@hig"
+  },
+  "jest": {
+    "preset": "@hig/jest-preset"
+  },
+  "release": {
+    "extends": "@hig/semantic-release-config"
+  },
+  "babel": {
+    "env": {
+      "test": {
+        "presets": [
+          "@hig/babel-preset/test"
+        ]
+      }
+    }
+  }
+}

packages/notifications-panel/src/Notification.js

@@ -0,0 +1,127 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { ControlBehavior } from "@hig/behaviors";
+
+import NotificationBehavior from "./behaviors/NotificationBehavior";
+import NotificationPresenter from "./presenters/NotificationPresenter";
+
+const Notification = (props) => {
+  /**
+   * @param {NotificationShape} shape
+   * @returns {import("react").ReactElement}
+   */
+  const renderChildren = () => {
+    const { children, hideFlyout, onDismiss: dismiss } = props;
+
+    if (typeof children !== "function") {
+      return children;
+    }
+
+    return children({ dismiss, hideFlyout });
+  };
+
+  const {
+    dismissButtonTitle,
+    featured,
+    image,
+    onDismiss,
+    onNotificationClick,
+    onMouseEnter,
+    onMouseLeave,
+    // Featured notifications show the dismiss button by default
+    showDismissButton = featured,
+    stylesheet,
+    timestamp,
+    type,
+    unread,
+    ...otherProps
+  } = props;
+  const { className } = otherProps;
+
+  return (
+    <NotificationBehavior onDismiss={onDismiss}>
+      {({ handleDismissButtonClick, height, innerRef, transitionStatus }) => (
+        <ControlBehavior
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          {({
+            hasHover,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+          }) => (
+            <NotificationPresenter
+              className={className}
+              dismissButtonTitle={dismissButtonTitle}
+              featured={featured}
+              hasHover={hasHover}
+              height={height}
+              image={image}
+              innerRef={innerRef}
+              onDismissButtonClick={handleDismissButtonClick}
+              onNotificationClick={onNotificationClick}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+              showDismissButton={showDismissButton}
+              stylesheet={stylesheet}
+              timestamp={timestamp}
+              transitionStatus={transitionStatus}
+              type={type}
+              unread={unread}
+            >
+              {renderChildren()}
+            </NotificationPresenter>
+          )}
+        </ControlBehavior>
+      )}
+    </NotificationBehavior>
+  );
+};
+
+Notification.displayName = "Notification";
+
+Notification.propTypes = {
+  /** Notification content */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /** Title HTML attribute for the dismiss button */
+  dismissButtonTitle: PropTypes.string,
+  /** Determines whether the notification is featured */
+  featured: PropTypes.bool,
+  /** An action provided hide the flyout. This is provided to the `children` render prop */
+  hideFlyout: PropTypes.func,
+  /** An image to display such as an avatar or and icon */
+  image: PropTypes.node,
+  /** A callback called when user dismisses a featured notification */
+  onDismiss: PropTypes.func,
+  /** A callback when the user clicks anywhere within the notification */
+  onNotificationClick: PropTypes.func,
+  /**
+   * Triggers when the user's mouse is over the notification
+   */
+  onMouseEnter: PropTypes.func,
+  /**
+   * Triggers when the user's mouse is no longer over the notification
+   */
+  onMouseLeave: PropTypes.func,
+  /** Determines whether the dismiss button is shown */
+  showDismissButton: PropTypes.bool,
+  /** Function to modify the component's styles */
+  stylesheet: PropTypes.func,
+  /** Timestamp component */
+  timestamp: PropTypes.node,
+  /** Determines notification variant */
+  type: PropTypes.string,
+  /** Determines whether notification has not been read */
+  unread: PropTypes.bool,
+};
+
+Notification.defaultProps = {
+  /**
+   * This is an action that's provided to the consumer,
+   * as a result a value must always be available.
+   */
+  hideFlyout: () => {},
+  onNotificationClick: () => {},
+};
+
+export default Notification;