@hig/banner - npm Package Compare versions

Comparing version 0.1.0-alpha to 0.2.0-alpha.2cdf05db

package.json

 {
   "name": "@hig/banner",
-  "version": "0.1.0-alpha",
+  "version": "0.2.0-alpha.2cdf05db",
   "description": "HIG Banner",
@@ -9,5 +9,6 @@ "author": "Autodesk Inc.",
   "module": "build/index.es.js",
+  "css": "build/index.es.css",
   "devDependencies": {
-    "@hig/scripts": "^0.1.0",
-    "@hig/styles": "^0.1.0-alpha"
+    "@hig/scripts": "0.2.0-alpha.2cdf05db",
+    "@hig/styles": "0.1.0-alpha.2cdf05db"
   },
@@ -22,4 +23,4 @@ "peerDependencies": {
   "dependencies": {
-    "hig-react": "^0.28.36"
+    "hig-react": "0.29.0-alpha.2cdf05db"
   }
 }

src/Banner.js

@@ -17,6 +17,6 @@ import React, { Component } from "react";
  * @property {string} [label]
- * @property {string} [message]
+ * @property {string} [labelledBy]
+ * @property {any} [actions]
  * @property {string} [dismissButtonTitle]
  * @property {Function} [onDismiss]
- * @property {string} [labelId]
  * @property {boolean} [isVisible]
@@ -44,4 +44,6 @@ * @property {any} [children]
     label: PropTypes.string,
-    /** The displayed message */
-    message: PropTypes.string,
+    /** The ID used for ARIA labeling */
+    labelledBy: PropTypes.string,
+    /** Banner actions; Any JSX, or a render prop function */
+    actions: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     /** Accessibility text for the dismiss button */
@@ -51,8 +53,6 @@ dismissButtonTitle: PropTypes.string,
     onDismiss: PropTypes.func,
-    /** The ID used for ARIA labeling */
-    labelId: PropTypes.string,
     /** Animation; Determines the visibility of the banner */
     isVisible: PropTypes.bool,
-    /** Banner actions; Any JSX, or a render prop function */
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
+    /** The displayed message */
+    children: PropTypes.string
   };
@@ -74,3 +74,3 @@
   render() {
-    const { isVisible, children: actions } = this.props;
+    const { isVisible, actions } = this.props;
     const { renderPresenter } = this;
@@ -77,0 +77,0 @@

src/Banner.test.js

@@ -7,21 +7,22 @@ import { mount } from "enzyme";
 describe("banner/Banner", () => {
-  describe("Action", () => {
-    it("exposes the `Action` component", () => {
-      expect(Banner).toHaveProperty("Action", expect.any(Function));
-    });
-  });
+  const exposedComponents = ["Action", "Interactions", "Presenter"];
+  const componentMatcher = expect.any(Function);
 
-  describe("Interactions", () => {
-    it("exposes the `Interactions` component", () => {
-      expect(Banner).toHaveProperty("Interactions", expect.any(Function));
+  exposedComponents.forEach(componentName => {
+    describe(componentName, () => {
+      it(`exposes the \`${componentName}\` component`, () => {
+        expect(Banner).toHaveProperty(componentName, componentMatcher);
+      });
     });
   });
 
-  describe("Presenter", () => {
-    it("exposes the `Presenter` component", () => {
-      expect(Banner).toHaveProperty("Presenter", expect.any(Function));
-    });
-  });
+  describe("rendering", () => {
+    const renderedComponents = [
+      "BannerAnimator",
+      "BannerContainer",
+      "BannerPresenter"
+    ];
 
-  describe("rendering", () => {
+    let wrapper;
+
     beforeAll(() => {
@@ -31,2 +32,6 @@ window.requestAnimationFrame = jest.fn();
 
+    beforeEach(() => {
+      wrapper = mount(<Banner />);
+    });
+
     afterAll(() => {
@@ -36,20 +41,10 @@ delete window.requestAnimationFrame;
 
-    it("renders the `BannerAnimator`", () => {
-      const wrapper = mount(<Banner />);
-
-      expect(wrapper.find("BannerAnimator")).toBePresent();
+    renderedComponents.forEach(componentName => {
+      describe(componentName, () => {
+        it(`renders a \`${componentName}\` component`, () => {
+          expect(wrapper.find(componentName)).toBePresent();
+        });
+      });
     });
-
-    it("renders the `BannerContainer`", () => {
-      const wrapper = mount(<Banner />);
-
-      expect(wrapper.find("BannerContainer")).toBePresent();
-    });
-
-    it("renders the `BannerPresenter`", () => {
-      const wrapper = mount(<Banner />);
-
-      expect(wrapper.find("BannerPresenter")).toBePresent();
-    });
   });
 });

src/BannerContainer.js

@@ -193,3 +193,3 @@ import { Component } from "react";
       refInteractionsWrapper,
-      children: this.renderActions()
+      actions: this.renderActions()
     };
@@ -196,0 +196,0 @@ }

src/BannerContainer.test.js

@@ -28,3 +28,3 @@ import { shallow } from "enzyme";
     expect(presenterBag).toMatchObject({
-      children: "foobar",
+      actions: "foobar",
       isWrappingContent: false,
@@ -31,0 +31,0 @@ refContent: expect.any(Function),

src/BannerPresenter/BannerPresenter.js

@@ -5,3 +5,2 @@ import React from "react";
 import { types, AVAILABLE_TYPES } from "../types";
-import { placements, AVAILABLE_PLACEMENTS } from "../placements";
 
@@ -22,8 +21,7 @@ import {
  * @property {string} [type]
- * @property {string} [placement]
  * @property {string} [label]
- * @property {string} [message]
+ * @property {string} [labelledBy]
+ * @property {any} [actions]
  * @property {string} [dismissButtonTitle]
  * @property {Function} [onDismiss]
- * @property {string} [labelId]
  * @property {boolean} [isWrappingContent]
@@ -44,8 +42,7 @@ * @property {function(HTMLDivElement): any} [refContent]
     type,
-    placement,
     label,
-    message,
+    labelledBy,
+    actions,
     dismissButtonTitle,
     onDismiss,
-    labelId,
     isWrappingContent,
@@ -55,8 +52,8 @@ refContent,
     refInteractionsWrapper,
-    children
+    children: message,
   } = props;
 
   const hasLabel = !!label;
-  const hasActions = React.Children.count(children) > 0;
-  const wrapperLabelledBy = hasLabel ? labelId : undefined;
+  const hasActions = React.Children.count(actions) > 0;
+  const wrapperLabelledBy = hasLabel ? labelledBy : undefined;
 
@@ -66,3 +63,2 @@ return (
       type={type}
-      placement={placement}
       hasActions={hasActions}
@@ -75,3 +71,2 @@ isWrappingContent={isWrappingContent}
         <Notification innerRef={refNotification}>
-          {hasLabel ? <Label id={labelId}>{label}</Label> : null}
           <Message>{message}</Message>
@@ -81,3 +76,3 @@ </Notification>
           <InteractionsWrapper innerRef={refInteractionsWrapper}>
-            {children}
+            {actions}
           </InteractionsWrapper>
@@ -94,6 +89,5 @@ ) : null}
   type: types.PRIMARY,
-  placement: placements.STANDARD,
-  message: "Message",
   dismissButtonTitle: "Dismiss",
-  isWrappingContent: false
+  isWrappingContent: false,
+  children: "Message"
 };
@@ -104,8 +98,8 @@
   type: PropTypes.oneOf(AVAILABLE_TYPES),
-  /** Determines the intended placement of banner */
-  placement: PropTypes.oneOf(AVAILABLE_PLACEMENTS),
   /** The label of the message displayed */
   label: PropTypes.string,
-  /** The displayed message */
-  message: PropTypes.string,
+  /** The ID used for ARIA labeling */
+  labelledBy: PropTypes.string,
+  /** Banner actions */
+  actions: PropTypes.node,
   /** Accessibility text for the dismiss button */
@@ -115,4 +109,2 @@ dismissButtonTitle: PropTypes.string,
   onDismiss: PropTypes.func,
-  /** The ID used for ARIA labeling */
-  labelId: PropTypes.string,
   /** Determines whether the banner content wraps */
@@ -126,4 +118,4 @@ isWrappingContent: PropTypes.bool,
   refInteractionsWrapper: PropTypes.func,
-  /** Banner actions */
+  /** The displayed message */
   children: PropTypes.node
 };

src/BannerPresenter/BannerPresenter.test.js

 import React from "react";
 import renderer from "react-test-renderer";
 
-import { placements } from "../placements";
 import { types } from "../types";
@@ -19,23 +18,22 @@ import BannerPresenter from "./BannerPresenter";
         label: "HELLO",
-        message: "World"
+        children: "World"
       }
     },
     {
-      description: "renders with a string as children",
+      description: "renders with a string as actions",
       props: {
-        placement: placements.TOP,
-        children: "foobar"
+        actions: "foobar"
       }
     },
     {
-      description: "renders with a node as children",
+      description: "renders with a node as actions",
       props: {
         dismissButtonTitle: "boom",
-        children: <span>foo</span>
+        actions: <span>foo</span>
       }
     },
     {
-      description: "renders with a fragment as children",
+      description: "renders with a fragment as actions",
       props: {
-        children: [<span key="0">bar</span>, <div key="1">baz</div>]
+        actions: [<span key="0">bar</span>, <div key="1">baz</div>]
       }
@@ -42,0 +40,0 @@ }

src/BannerPresenter/presenters.js

@@ -6,9 +6,7 @@ /* eslint-disable react/prop-types */
 
+import { Icon as BasicIcon, IconButton, Text } from "hig-react";
+
 import "./banner-presenter.scss";
-
-import { placements } from "../placements";
 import { types } from "../types";
 
-import { Icon as BasicIcon, IconButton, Text } from "hig-react";
-
 /** @todo Reference from constant on `Text` component */
@@ -28,3 +26,3 @@ const TEXT_COLOR = "hig-cool-gray-70";
   interactionsWrapper: "hig__banner__interactions-wrapper",
-  notification: "hig__banner__notification",
+  notification: "hig__banner__message",
   wrapper: "hig__banner",
@@ -42,8 +40,2 @@ wrapperBottom: "hig__banner--bottom",
 /** @type {Object.<string, string>} */
-const wrapperModifiersByPlacement = {
-  [placements.BOTTOM]: classNames.wrapperBottom,
-  [placements.TOP]: classNames.wrapperTop
-};
-
-/** @type {Object.<string, string>} */
 const wrapperModifiersByType = {
@@ -73,3 +65,2 @@ [types.PRIMARY]: classNames.wrapperPrimary,
  * @property {string} type
- * @property {string} placement
  * @property {boolean} hasActions
@@ -88,4 +79,4 @@ * @property {string | undefined} [labelledBy]
     type,
-    placement,
     hasActions,
+    label,
     labelledBy,
@@ -99,3 +90,2 @@ isWrappingContent,
     wrapperModifiersByType[type],
-    wrapperModifiersByPlacement[placement],
     hasActions ? classNames.wrapperInteractive : undefined,
@@ -106,3 +96,8 @@ isWrappingContent ? classNames.wrapperWrapContent : undefined
   return (
-    <div role="alert" aria-labelledby={labelledBy} className={classes}>
+    <div
+      role="alert"
+      aria-label={label}
+      aria-labelledby={labelledBy}
+      className={classes}
+    >
       {children}
@@ -179,16 +174,2 @@ </div>
 /**
- * @typedef {Object} LabelProps
- * @property {string} [id]
- * @property {any} [children]
- */
-
-/**
- * @param {LabelProps} props
- * @returns {JSX.Element}
- */
-export function Label({ id, children }) {
-  return <Text color={TEXT_COLOR} id={id}>{`${children}: `}</Text>;
-}
-
-/**
  * @param {StyledProps} props
@@ -202,6 +183,2 @@ * @returns {JSX.Element}
 
-  if (typeof children === "function") {
-    return children();
-  }
-
   return children;
@@ -208,0 +185,0 @@ }

src/index.js

@@ -0,1 +1,2 @@
+import "./external.scss";
 export { default } from "./Banner";
@@ -2,0 +3,0 @@ export { default as BannerAction } from "./BannerAction";

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

44258

decreased by-91.92%

Number of package files

31

decreased by-3.12%

Lines of code

925

decreased by-45.78%

Dependency changes

• + Added@babel/runtime@7.26.0(transitive)

• + Addeddom-helpers@3.4.0(transitive)

• + Addedhig-interface@0.2.0-alpha.2cdf05db(transitive)

• + Addedhig-react@0.29.0-alpha.2cdf05db(transitive)

• + Addedhig-vanilla@0.2.0-alpha.2cdf05db(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedreact-flip-move@3.0.5(transitive)

• + Addedreact-lifecycles-compat@3.0.4(transitive)

• + Addedreact-transition-group@2.9.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removedhig-interface@0.1.19(transitive)

• - Removedhig-react@0.28.36(transitive)

• - Removedhig-vanilla@0.1.27(transitive)

• Updatedhig-react@0.29.0-alpha.2cdf05db