@hig/banner - npm Package Compare versions

Comparing version 0.2.0-alpha.7472a049 to 0.2.0-alpha.8ca13c8b

build/index.es.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import BasicIcon, { names, sizes } from '@hig/icon';
+import { polyfill } from 'react-lifecycles-compat';
+import Icon, { names, sizes } from '@hig/icon';
 import IconButton, { types } from '@hig/icon-button';
 import { Text } from '@hig/typography';
+import { ThemeContext } from '@hig/themes';
 
 /** @type {Object.<string, string>} */
 var placements = Object.freeze({
-  STANDARD: "standard",
-  TOP: "top",
-  BOTTOM: "bottom"
+  ABOVE: "above",
+  ABOVE_OVERLAY: "above-overlay",
+  BETWEEN: "between",
+  BELOW_OVERLAY: "below-overlay"
 });
@@ -32,2 +35,33 @@
 
+/** @type {Object.<string, string>} */
+var positions = Object.freeze({
+  TOP: "top",
+  BOTTOM: "bottom"
+});
+
+/** @type {string[]} */
+var AVAILABLE_POSITIONS = Object.freeze(Object.values(positions));
+
+var _placements$ABOVE$pla;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var animatorPropsByPlacement = (_placements$ABOVE$pla = {}, _defineProperty(_placements$ABOVE$pla, placements.ABOVE, {
+  position: positions.TOP,
+  hasBounce: true,
+  hasPush: true
+}), _defineProperty(_placements$ABOVE$pla, placements.ABOVE_OVERLAY, {
+  position: positions.TOP,
+  hasBounce: true,
+  hasPush: false
+}), _defineProperty(_placements$ABOVE$pla, placements.BETWEEN, {
+  position: positions.TOP,
+  hasBounce: false,
+  hasPush: true
+}), _defineProperty(_placements$ABOVE$pla, placements.BELOW_OVERLAY, {
+  position: positions.BOTTOM,
+  hasBounce: true,
+  hasPush: false
+}), _placements$ABOVE$pla);
+
 /**
@@ -69,31 +103,253 @@ * @typedef {Object} BannerActionProps
 
+var statuses = Object.freeze({
+  COLLAPSED: "COLLAPSED",
+  COLLAPSING: "COLLAPSING",
+  EXPANDED: "EXPANDED",
+  EXPANDING: "EXPANDING"
+});
+
+/** Transition ease for bounce effect */
+var BOUNCE_EASING = "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+/** Pixels; height added to the wrapper to show the bounce animation on the inner wrapper */
+var OVERLAY_HEIGHT_BUFFER = 20;
+/** Milliseconds; time for the banner to expand and collapse */
+var TRANSITION_DURATION = 300;
+/** Milliseconds; wait time for the inner wrapper to expand after the wrapper expands */
+var PUSH_DELAY = 300;
+/** Pixels; default banner height used when the component isn't mounted */
+var DEFAULT_HEIGHT = 50;
+
 /**
- * @typedef {Object} BannerAnimatorProps
- * @property {boolean} isVisible
- * @property {JSX.Element} children
+ * @typedef {Object} StyleUpdaterParams
+ * @property {HTMLDivElement} [innerWrapper]
+ * @property {boolean} hasPush
+ * @property {boolean} hasBounce
+ * @property {string} position
  */
 
 /**
- * @param {BannerAnimatorProps} props
- * @returns {JSX.Element}
- * @todo Complete implementation
+ * @typedef {function(StyleUpdaterParams): string} StyleUpdater
  */
-function BannerAnimator(_ref) {
-  var isVisible = _ref.isVisible,
-      children = _ref.children;
 
-  return isVisible ? children : null;
+/**
+ * @param {HTMLDivElement} [innerWrapper]
+ * @returns {number}
+ */
+function getInnerWrapperheight(innerWrapper) {
+  return innerWrapper ? innerWrapper.offsetHeight : DEFAULT_HEIGHT;
 }
 
-BannerAnimator.defaultProps = {
-  isVisible: true
-};
+/** @returns {Object.<string, string>} */
+function getWrapperReset() {
+  return {
+    transition: "",
+    overflow: "",
+    height: ""
+  };
+}
 
-BannerAnimator.propTypes = {
-  /** Animation; Determines the visibility of the banner */
-  isVisible: PropTypes.bool.isRequired,
-  /** The component to be animated */
-  children: PropTypes.node.isRequired
-};
+/** @returns {Object.<string, string>} */
+function getInnerWrapperReset() {
+  return {
+    transition: "",
+    transform: ""
+  };
+}
 
+/** @type {StyleUpdater} */
+function getWrapperTransition(_ref) {
+  var hasPush = _ref.hasPush;
+
+  return hasPush ? TRANSITION_DURATION + "ms height ease" : "";
+}
+
+/** @type {StyleUpdater} */
+function getInnerWrapperExpandingTransition(_ref2) {
+  var hasBounce = _ref2.hasBounce,
+      hasPush = _ref2.hasPush;
+
+  var duration = TRANSITION_DURATION + "ms";
+  var property = "transform";
+  var easing = hasBounce ? BOUNCE_EASING : "ease";
+  var transition = [duration, property, easing];
+
+  if (hasPush && hasBounce) {
+    transition.push(PUSH_DELAY + "ms");
+  }
+
+  return transition.join(" ");
+}
+
+/** @type {StyleUpdater} */
+function getInnerWrapperCollapsingTransition() {
+  return TRANSITION_DURATION + "ms transform ease";
+}
+
+/** @type {StyleUpdater} */
+function getWrapperExpandedHeight(_ref3) {
+  var hasBounce = _ref3.hasBounce,
+      innerWrapper = _ref3.innerWrapper;
+
+  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  var offset = hasBounce ? OVERLAY_HEIGHT_BUFFER : 0;
+  var result = innerWrapperHeight + offset;
+
+  return result + "px";
+}
+
+/** @type {StyleUpdater} */
+function getWrapperCollapsedHeight(_ref4) {
+  var hasPush = _ref4.hasPush,
+      innerWrapper = _ref4.innerWrapper;
+
+  if (hasPush) return "0";
+
+  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  var result = innerWrapperHeight + OVERLAY_HEIGHT_BUFFER;
+
+  return result + "px";
+}
+
+/** @type {StyleUpdater} */
+function getInnerWrapperCollapsedTransform(_ref5) {
+  var innerWrapper = _ref5.innerWrapper,
+      position = _ref5.position;
+
+  var isBottomPlacement = position === positions.BOTTOM;
+  var modifier = isBottomPlacement ? 1 : -1;
+  var offset = isBottomPlacement ? OVERLAY_HEIGHT_BUFFER : 0;
+  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  var result = innerWrapperHeight * modifier + offset;
+
+  return "translateY(" + result + "px)";
+}
+
+/** @type {StyleUpdater} */
+function getInnerWrapperExpandingTransform(_ref6) {
+  var hasBounce = _ref6.hasBounce,
+      position = _ref6.position;
+
+  if (hasBounce && position === positions.BOTTOM) {
+    return "translateY(" + OVERLAY_HEIGHT_BUFFER + "px)";
+  }
+
+  return "";
+}
+
+/** @typedef {import("./BannerAnimator").BannerAnimatorState} BannerAnimatorState */
+/** @typedef {import("./BannerAnimator").BannerAnimatorProps} BannerAnimatorProps */
+// eslint-disable-next-line max-len
+/** @typedef {function(BannerAnimatorState, BannerAnimatorProps): BannerAnimatorState} BannerAnimatorUpdater */
+
+/**
+ * @param {BannerAnimatorState} [prevState]
+ * @param {BannerAnimatorProps} [props]
+ * @returns {import("./styles").StyleUpdaterParams}
+ */
+function getParams() {
+  var prevState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var innerWrapper = prevState.innerWrapper;
+  var hasPush = props.hasPush,
+      hasBounce = props.hasBounce,
+      position = props.position;
+
+
+  return {
+    innerWrapper: innerWrapper,
+    hasBounce: hasBounce,
+    hasPush: hasPush,
+    position: position
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function startExpand() {
+  return {
+    status: statuses.EXPANDING
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function startCollapse() {
+  return {
+    status: statuses.COLLAPSING
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function endExpand() {
+  return {
+    status: statuses.EXPANDED,
+    wrapperStyle: getWrapperReset(),
+    innerWrapperStyle: getInnerWrapperReset()
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function endCollapse(prevState, props) {
+  var params = getParams(prevState, props);
+
+  return {
+    status: statuses.COLLAPSED,
+    wrapperStyle: {
+      transition: "",
+      overflow: "hidden",
+      height: "0"
+    },
+    innerWrapperStyle: {
+      transition: "",
+      transform: getInnerWrapperCollapsedTransform(params)
+    }
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function prepareCollapse(prevState, props) {
+  var params = getParams(prevState, props);
+
+  return {
+    wrapperStyle: {
+      transition: "",
+      overflow: "hidden",
+      height: getWrapperExpandedHeight(params)
+    },
+    innerWrapperStyle: getInnerWrapperReset()
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function animateCollapse(prevState, props) {
+  var params = getParams(prevState, props);
+
+  return {
+    wrapperStyle: {
+      transition: getWrapperTransition(params),
+      overflow: "hidden",
+      height: getWrapperCollapsedHeight(params)
+    },
+    innerWrapperStyle: {
+      transition: getInnerWrapperCollapsingTransition(params),
+      transform: getInnerWrapperCollapsedTransform(params)
+    }
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function animateExpand(prevState, props) {
+  var params = getParams(prevState, props);
+
+  return {
+    wrapperStyle: {
+      transition: getWrapperTransition(params),
+      overflow: "hidden",
+      height: getWrapperExpandedHeight(params)
+    },
+    innerWrapperStyle: {
+      transition: getInnerWrapperExpandingTransition(params),
+      transform: getInnerWrapperExpandingTransform(params)
+    }
+  };
+}
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -108,2 +364,298 @@
 /**
+ * @typedef {Object} BannerAnimatorProps
+ * @property {boolean} [isVisible]
+ * @property {boolean} [hasBounce]
+ * @property {boolean} [hasPush]
+ * @property {string} [position]
+ * @property {function(ContainerBag): JSX.Element} children
+ */
+
+/**
+ * @typedef {Object} BannerAnimatorState
+ * @property {string} [status]
+ * @property {Object.<string, string>} [wrapperStyle]
+ * @property {Object.<string, string>} [innerWrapperStyle]
+ * @property {HTMLDivElement} [wrapper]
+ * @property {HTMLDivElement} [innerWrapper]
+ */
+
+/** @type {Component<BannerAnimatorProps, BannerAnimatorState>} */
+
+var BannerAnimator = function (_Component) {
+  _inherits(BannerAnimator, _Component);
+
+  function BannerAnimator() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, BannerAnimator);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BannerAnimator.__proto__ || Object.getPrototypeOf(BannerAnimator)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.handleReady = function () {
+      var status = _this.state.status;
+
+
+      if (status === statuses.EXPANDING) {
+        _this.expand();
+      }
+    }, _this.handleTransitionEnd = function (event) {
+      var innerWrapper = _this.state.innerWrapper;
+
+
+      if (event.target !== innerWrapper) return;
+
+      var status = _this.state.status;
+
+
+      if (status === statuses.COLLAPSING) {
+        window.requestAnimationFrame(function () {
+          _this.setState(endCollapse);
+        });
+        return;
+      }
+
+      if (status === statuses.EXPANDING) {
+        window.requestAnimationFrame(function () {
+          _this.setState(endExpand);
+        });
+      }
+    }, _this.refWrapper = function (wrapper) {
+      _this.setState({ wrapper: wrapper });
+    }, _this.refInnerWrapper = function (innerWrapper) {
+      _this.setState({ innerWrapper: innerWrapper });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(BannerAnimator, [{
+    key: "componentDidUpdate",
+
+
+    /**
+     * @param {BannerAnimatorProps} prevProps
+     * @param {BannerAnimatorState} prevState
+     */
+    value: function componentDidUpdate(prevProps, prevState) {
+      var prevStatus = prevState.status;
+      var status = this.state.status;
+
+
+      if (prevStatus === statuses.EXPANDED && status === statuses.COLLAPSING) {
+        this.collapseFromExpanded();
+        return;
+      }
+      if (prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING) {
+        this.expand();
+        return;
+      }
+      if (prevStatus === statuses.EXPANDING && status === statuses.COLLAPSING) {
+        this.collapse();
+      }
+    }
+  }, {
+    key: "expand",
+    value: function expand() {
+      var _this2 = this;
+
+      window.requestAnimationFrame(function () {
+        _this2.setState(animateExpand);
+      });
+    }
+  }, {
+    key: "collapse",
+    value: function collapse() {
+      var _this3 = this;
+
+      window.requestAnimationFrame(function () {
+        _this3.setState(animateCollapse);
+      });
+    }
+  }, {
+    key: "collapseFromExpanded",
+    value: function collapseFromExpanded() {
+      var _this4 = this;
+
+      window.requestAnimationFrame(function () {
+        _this4.setState(prepareCollapse, function () {
+          _this4.collapse();
+        });
+      });
+    }
+
+    /** @type {BannerAnimatorProps} */
+
+
+    /** @param {TransitionEvent} event */
+
+
+    /** @param {HTMLDivElement} wrapper */
+
+
+    /** @param {HTMLDivElement} innerWrapper */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var renderChildren = this.props.children;
+      var _state = this.state,
+          status = _state.status,
+          wrapperStyle = _state.wrapperStyle,
+          innerWrapperStyle = _state.innerWrapperStyle;
+      var handleReady = this.handleReady,
+          handleTransitionEnd = this.handleTransitionEnd,
+          refInnerWrapper = this.refInnerWrapper,
+          refWrapper = this.refWrapper;
+
+      var children = status === statuses.COLLAPSED ? null : renderChildren({ handleReady: handleReady });
+      var isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
+
+      return React.createElement(
+        "div",
+        {
+          "aria-busy": isBusy,
+          "aria-expanded": status === statuses.EXPANDED,
+          style: wrapperStyle,
+          onTransitionEnd: handleTransitionEnd,
+          ref: refWrapper
+        },
+        React.createElement(
+          "div",
+          { style: innerWrapperStyle, ref: refInnerWrapper },
+          children
+        )
+      );
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+
+    /**
+     * @param {BannerAnimatorProps} nextProps
+     * @param {BannerAnimatorState} prevState
+     * @returns {BannerAnimatorState | null}
+     */
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var isVisible = nextProps.isVisible;
+      var status = prevState.status;
+
+
+      if (!status) {
+        return isVisible ? endExpand() : endCollapse();
+      }
+
+      switch (status) {
+        case statuses.COLLAPSED:
+        case statuses.COLLAPSING:
+          return isVisible ? startExpand() : null;
+        case statuses.EXPANDED:
+        case statuses.EXPANDING:
+          return isVisible ? null : startCollapse();
+        default:
+          // eslint-disable-next-line no-console
+          console.warn("Invalid status", { status: status });
+          return null;
+      }
+    }
+
+    /** @type {BannerAnimatorState} */
+
+  }]);
+
+  return BannerAnimator;
+}(Component);
+
+BannerAnimator.defaultProps = {
+  isVisible: true,
+  hasBounce: true,
+  hasPush: true,
+  position: positions.TOP
+};
+BannerAnimator.propTypes = {
+  /* eslint-disable react/no-unused-prop-types */
+  /** Determines the visibility of the banner */
+  isVisible: PropTypes.bool.isRequired,
+  /** Determines the type of animation used */
+  hasBounce: PropTypes.bool.isRequired,
+  /** Determines the type of animation used */
+  hasPush: PropTypes.bool.isRequired,
+  /** Determines the direction of the animation */
+  position: PropTypes.oneOf(AVAILABLE_POSITIONS),
+  /* eslint-enable react/no-unused-prop-types */
+  /** A render prop, that renders the component to be animated */
+  children: PropTypes.func.isRequired
+};
+
+
+var BannerAnimator$1 = polyfill(BannerAnimator);
+BannerAnimator.__docgenInfo = {
+  "description": "@type {Component<BannerAnimatorProps, BannerAnimatorState>}",
+  "displayName": "BannerAnimator",
+  "props": {
+    "isVisible": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Determines the visibility of the banner",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "hasBounce": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Determines the type of animation used",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "hasPush": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Determines the type of animation used",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "position": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_POSITIONS"
+      },
+      "required": false,
+      "description": "Determines the direction of the animation",
+      "defaultValue": {
+        "value": "positions.TOP",
+        "computed": true
+      }
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "A render prop, that renders the component to be animated"
+    }
+  }
+};
+
+var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
  * @typedef {Object} PresenterBag
@@ -120,2 +672,3 @@ * @property {boolean} isWrappingContent
  * @property {any} [actions]
+ * @property {Function} [onReady]
  * @property {function(PresenterBag): any} [children]
@@ -140,3 +693,3 @@ */
 var BannerContainer = function (_Component) {
-  _inherits(BannerContainer, _Component);
+  _inherits$1(BannerContainer, _Component);
 
@@ -148,3 +701,3 @@ function BannerContainer() {
 
-    _classCallCheck(this, BannerContainer);
+    _classCallCheck$1(this, BannerContainer);
 
@@ -155,3 +708,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BannerContainer.__proto__ || Object.getPrototypeOf(BannerContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = BannerContainer.__proto__ || Object.getPrototypeOf(BannerContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       isWrappingActions: false,
@@ -167,3 +720,3 @@ isWrappingContent: false
       _this.updateWrapping();
-    }, _this.updateContentWrapping = function () {
+    }, _this.updateContentWrapping = function (callback) {
       var update = { isWrappingContent: _this.shouldWrapContent() };
@@ -173,10 +726,14 @@
         delete _this.wrappingFrame;
+
+        if (callback) callback();
       });
-    }, _this.updateActionWrapping = function () {
+    }, _this.updateActionWrapping = function (callback) {
       var update = { isWrappingActions: _this.shouldWrapActions() };
 
       _this.setState(update, function () {
-        _this.wrappingFrame = window.requestAnimationFrame(_this.updateContentWrapping);
+        _this.wrappingFrame = window.requestAnimationFrame(function () {
+          _this.updateContentWrapping(callback);
+        });
       });
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
   }
@@ -187,7 +744,7 @@
 
-  _createClass(BannerContainer, [{
+  _createClass$1(BannerContainer, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.bindResize();
-      this.updateWrapping();
+      this.updateWrapping(this.props.onReady);
     }
@@ -281,2 +838,12 @@ }, {
     }
+
+    /**
+     * @param {Function} callback
+     */
+
+
+    /**
+     * @param {Function} callback
+     */
+
   }, {
@@ -288,7 +855,12 @@ key: "updateWrapping",
      * Asynchronously updates the wrapping behavior of the presenter
+     * @param {Function} callback
      */
-    value: function updateWrapping() {
+    value: function updateWrapping(callback) {
+      var _this2 = this;
+
       if (this.wrappingFrame !== undefined) return;
 
-      this.wrappingFrame = window.requestAnimationFrame(this.updateActionWrapping);
+      this.wrappingFrame = window.requestAnimationFrame(function () {
+        _this2.updateActionWrapping(callback);
+      });
     }
@@ -370,2 +942,4 @@ }, {
   actions: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /** Called after the component has been mounted, and dynamically resized */
+  onReady: PropTypes.func,
   /** A render prop function to render a `BannerPresenter` */
@@ -390,2 +964,9 @@ children: PropTypes.func.isRequired
     },
+    "onReady": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called after the component has been mounted, and dynamically resized"
+    },
     "children": {
@@ -518,9 +1099,2 @@ "type": {
 
-var _wrapperModifiersByTy, _iconNamesByType;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/** @todo Reference from constant on `Text` component */
-var TEXT_COLOR = "hig-cool-gray-70";
-
 /** @type {Object.<string, string>} */
@@ -546,7 +1120,11 @@ var classNames$1 = Object.freeze({
 
-/** @type {Object.<string, string>} */
-var wrapperModifiersByType = (_wrapperModifiersByTy = {}, _defineProperty(_wrapperModifiersByTy, types$1.PRIMARY, classNames$1.wrapperPrimary), _defineProperty(_wrapperModifiersByTy, types$1.COMPLETE, classNames$1.wrapperComplete), _defineProperty(_wrapperModifiersByTy, types$1.WARNING, classNames$1.wrapperWarning), _defineProperty(_wrapperModifiersByTy, types$1.URGENT, classNames$1.wrapperUrgent), _wrapperModifiersByTy);
+var _wrapperModifiersByTy;
 
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/** @todo Reference from constant on `Text` component */
+var TEXT_COLOR = "hig-cool-gray-70";
+
 /** @type {Object.<string, string>} */
-var iconNamesByType = (_iconNamesByType = {}, _defineProperty(_iconNamesByType, types$1.PRIMARY, names.INFO), _defineProperty(_iconNamesByType, types$1.COMPLETE, names.COMPLETE), _defineProperty(_iconNamesByType, types$1.WARNING, names.ISSUE), _defineProperty(_iconNamesByType, types$1.URGENT, names.ERROR), _iconNamesByType);
+var wrapperModifiersByType = (_wrapperModifiersByTy = {}, _defineProperty$1(_wrapperModifiersByTy, types$1.PRIMARY, classNames$1.wrapperPrimary), _defineProperty$1(_wrapperModifiersByTy, types$1.COMPLETE, classNames$1.wrapperComplete), _defineProperty$1(_wrapperModifiersByTy, types$1.WARNING, classNames$1.wrapperWarning), _defineProperty$1(_wrapperModifiersByTy, types$1.URGENT, classNames$1.wrapperUrgent), _wrapperModifiersByTy);
 
@@ -581,13 +1159,23 @@ /**
 
-  var classes = classnames(classNames$1.wrapper, wrapperModifiersByType[type], hasActions ? classNames$1.wrapperInteractive : undefined, isWrappingContent ? classNames$1.wrapperWrapContent : undefined);
+  function classes(themeClass) {
+    return classnames(classNames$1.wrapper, wrapperModifiersByType[type], hasActions ? classNames$1.wrapperInteractive : undefined, isWrappingContent ? classNames$1.wrapperWrapContent : undefined, themeClass);
+  }
 
   return React.createElement(
-    "div",
-    {
-      role: "alert",
-      "aria-label": label,
-      "aria-labelledby": labelledBy,
-      className: classes
-    },
-    children
+    ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var themeClass = _ref.themeClass;
+      return React.createElement(
+        "div",
+        {
+          role: "alert",
+          "aria-label": label,
+          "aria-labelledby": labelledBy,
+          "aria-live": type === types$1.URGENT ? "assertive" : "polite",
+          className: classes(themeClass)
+        },
+        children
+      );
+    }
   );
@@ -600,5 +1188,5 @@ }
  */
-function Content(_ref) {
-  var innerRef = _ref.innerRef,
-      children = _ref.children;
+function Content(_ref2) {
+  var innerRef = _ref2.innerRef,
+      children = _ref2.children;
 
@@ -622,5 +1210,5 @@ return React.createElement(
  */
-function DismissButton(_ref2) {
-  var title = _ref2.title,
-      onClick = _ref2.onClick;
+function DismissButton(_ref3) {
+  var title = _ref3.title,
+      onClick = _ref3.onClick;
 
@@ -641,21 +1229,2 @@ return React.createElement(
 /**
- * @typedef {Object} IconProps
- * @property {string} type
- */
-
-/**
- * @param {IconProps} props
- * @returns {JSX.Element}
- */
-function Icon(_ref3) {
-  var type = _ref3.type;
-
-  return React.createElement(
-    "figure",
-    { className: classNames$1.iconBackground },
-    React.createElement(BasicIcon, { name: iconNamesByType[type], size: sizes.MEDIUM })
-  );
-}
-
-/**
  * @param {StyledProps} props
@@ -708,3 +1277,36 @@ * @returns {JSX.Element}
 
+var _iconNamesByType;
+
+function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/** @type {Object.<string, string>} */
+var iconNamesByType = (_iconNamesByType = {}, _defineProperty$2(_iconNamesByType, types$1.PRIMARY, names.INFO), _defineProperty$2(_iconNamesByType, types$1.COMPLETE, names.COMPLETE), _defineProperty$2(_iconNamesByType, types$1.WARNING, names.ISSUE), _defineProperty$2(_iconNamesByType, types$1.URGENT, names.ERROR), _iconNamesByType);
+
 /**
+ * @typedef {Object} IconProps
+ * @property {string} type
+ */
+
+/**
+ * @param {IconProps} props
+ * @returns {JSX.Element}
+ */
+function IconBackground(_ref) {
+  var type = _ref.type;
+
+  return React.createElement(
+    ThemeContext.Consumer,
+    null,
+    function (_ref2) {
+      var themeClass = _ref2.themeClass;
+      return React.createElement(
+        "figure",
+        { className: classnames(classNames$1.iconBackground, themeClass) },
+        React.createElement(Icon, { name: iconNamesByType[type], size: sizes.MEDIUM })
+      );
+    }
+  );
+}
+
+/**
  * @typedef {Object} BannerPresenterProps
@@ -754,3 +1356,3 @@ * @property {string} [type]
     },
-    React.createElement(Icon, { type: type }),
+    React.createElement(IconBackground, { type: type }),
     React.createElement(
@@ -914,11 +1516,11 @@ Content,
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -941,3 +1543,3 @@ /**
 var Banner = function (_Component) {
-  _inherits$1(Banner, _Component);
+  _inherits$2(Banner, _Component);
 
@@ -949,3 +1551,3 @@ function Banner() {
 
-    _classCallCheck$1(this, Banner);
+    _classCallCheck$2(this, Banner);
 
@@ -956,3 +1558,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Banner.__proto__ || Object.getPrototypeOf(Banner)).call.apply(_ref, [this].concat(args))), _this), _this.renderPresenter = function (presenterBag) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = Banner.__proto__ || Object.getPrototypeOf(Banner)).call.apply(_ref, [this].concat(args))), _this), _this.renderPresenter = function (presenterBag) {
       var presenterProps = _extends({}, _this.props, presenterBag);
@@ -968,3 +1570,15 @@
       );
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+    }, _this.renderContainer = function (_ref2) {
+      var handleReady = _ref2.handleReady;
+      var actions = _this.props.actions;
+      var _this2 = _this,
+          renderPresenter = _this2.renderPresenter;
+
+
+      return React.createElement(
+        BannerContainer,
+        { actions: actions, onReady: handleReady },
+        renderPresenter
+      );
+    }, _temp), _possibleConstructorReturn$2(_this, _ret);
   }
@@ -980,3 +1594,8 @@
 
-  _createClass$1(Banner, [{
+  /**
+   * @param {import("./BannerAnimator").ContainerBag} containerBag
+   */
+
+
+  _createClass$2(Banner, [{
     key: "render",
@@ -986,14 +1605,12 @@ value: function render() {
           isVisible = _props.isVisible,
-          actions = _props.actions;
-      var renderPresenter = this.renderPresenter;
+          placement = _props.placement;
+      var renderContainer = this.renderContainer;
 
 
       return React.createElement(
-        BannerAnimator,
-        { isVisible: isVisible },
-        React.createElement(
-          BannerContainer,
-          { actions: actions },
-          renderPresenter
-        )
+        BannerAnimator$1,
+        _extends({
+          isVisible: isVisible
+        }, animatorPropsByPlacement[placement]),
+        renderContainer
       );
@@ -1113,2 +1730,2 @@ }
 export default Banner;
-export { BannerAction, BannerAnimator, BannerInteractions, BannerPresenter, placements, AVAILABLE_PLACEMENTS, types$1 as types, AVAILABLE_TYPES };
+export { BannerAction, BannerAnimator$1 as BannerAnimator, BannerInteractions, BannerPresenter, placements, AVAILABLE_PLACEMENTS, types$1 as types, AVAILABLE_TYPES };

build/index.js

@@ -10,13 +10,16 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
-var BasicIcon = require('@hig/icon');
-var BasicIcon__default = _interopDefault(BasicIcon);
+var reactLifecyclesCompat = require('react-lifecycles-compat');
+var Icon = require('@hig/icon');
+var Icon__default = _interopDefault(Icon);
 var IconButton = require('@hig/icon-button');
 var IconButton__default = _interopDefault(IconButton);
 var typography = require('@hig/typography');
+var themes = require('@hig/themes');
 
 /** @type {Object.<string, string>} */
 var placements = Object.freeze({
-  STANDARD: "standard",
-  TOP: "top",
-  BOTTOM: "bottom"
+  ABOVE: "above",
+  ABOVE_OVERLAY: "above-overlay",
+  BETWEEN: "between",
+  BELOW_OVERLAY: "below-overlay"
 });
@@ -42,2 +45,33 @@
 
+/** @type {Object.<string, string>} */
+var positions = Object.freeze({
+  TOP: "top",
+  BOTTOM: "bottom"
+});
+
+/** @type {string[]} */
+var AVAILABLE_POSITIONS = Object.freeze(Object.values(positions));
+
+var _placements$ABOVE$pla;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var animatorPropsByPlacement = (_placements$ABOVE$pla = {}, _defineProperty(_placements$ABOVE$pla, placements.ABOVE, {
+  position: positions.TOP,
+  hasBounce: true,
+  hasPush: true
+}), _defineProperty(_placements$ABOVE$pla, placements.ABOVE_OVERLAY, {
+  position: positions.TOP,
+  hasBounce: true,
+  hasPush: false
+}), _defineProperty(_placements$ABOVE$pla, placements.BETWEEN, {
+  position: positions.TOP,
+  hasBounce: false,
+  hasPush: true
+}), _defineProperty(_placements$ABOVE$pla, placements.BELOW_OVERLAY, {
+  position: positions.BOTTOM,
+  hasBounce: true,
+  hasPush: false
+}), _placements$ABOVE$pla);
+
 /**
@@ -79,31 +113,253 @@ * @typedef {Object} BannerActionProps
 
+var statuses = Object.freeze({
+  COLLAPSED: "COLLAPSED",
+  COLLAPSING: "COLLAPSING",
+  EXPANDED: "EXPANDED",
+  EXPANDING: "EXPANDING"
+});
+
+/** Transition ease for bounce effect */
+var BOUNCE_EASING = "cubic-bezier(0.175, 0.885, 0.32, 1.275)";
+/** Pixels; height added to the wrapper to show the bounce animation on the inner wrapper */
+var OVERLAY_HEIGHT_BUFFER = 20;
+/** Milliseconds; time for the banner to expand and collapse */
+var TRANSITION_DURATION = 300;
+/** Milliseconds; wait time for the inner wrapper to expand after the wrapper expands */
+var PUSH_DELAY = 300;
+/** Pixels; default banner height used when the component isn't mounted */
+var DEFAULT_HEIGHT = 50;
+
 /**
- * @typedef {Object} BannerAnimatorProps
- * @property {boolean} isVisible
- * @property {JSX.Element} children
+ * @typedef {Object} StyleUpdaterParams
+ * @property {HTMLDivElement} [innerWrapper]
+ * @property {boolean} hasPush
+ * @property {boolean} hasBounce
+ * @property {string} position
  */
 
 /**
- * @param {BannerAnimatorProps} props
- * @returns {JSX.Element}
- * @todo Complete implementation
+ * @typedef {function(StyleUpdaterParams): string} StyleUpdater
  */
-function BannerAnimator(_ref) {
-  var isVisible = _ref.isVisible,
-      children = _ref.children;
 
-  return isVisible ? children : null;
+/**
+ * @param {HTMLDivElement} [innerWrapper]
+ * @returns {number}
+ */
+function getInnerWrapperheight(innerWrapper) {
+  return innerWrapper ? innerWrapper.offsetHeight : DEFAULT_HEIGHT;
 }
 
-BannerAnimator.defaultProps = {
-  isVisible: true
-};
+/** @returns {Object.<string, string>} */
+function getWrapperReset() {
+  return {
+    transition: "",
+    overflow: "",
+    height: ""
+  };
+}
 
-BannerAnimator.propTypes = {
-  /** Animation; Determines the visibility of the banner */
-  isVisible: PropTypes.bool.isRequired,
-  /** The component to be animated */
-  children: PropTypes.node.isRequired
-};
+/** @returns {Object.<string, string>} */
+function getInnerWrapperReset() {
+  return {
+    transition: "",
+    transform: ""
+  };
+}
 
+/** @type {StyleUpdater} */
+function getWrapperTransition(_ref) {
+  var hasPush = _ref.hasPush;
+
+  return hasPush ? TRANSITION_DURATION + "ms height ease" : "";
+}
+
+/** @type {StyleUpdater} */
+function getInnerWrapperExpandingTransition(_ref2) {
+  var hasBounce = _ref2.hasBounce,
+      hasPush = _ref2.hasPush;
+
+  var duration = TRANSITION_DURATION + "ms";
+  var property = "transform";
+  var easing = hasBounce ? BOUNCE_EASING : "ease";
+  var transition = [duration, property, easing];
+
+  if (hasPush && hasBounce) {
+    transition.push(PUSH_DELAY + "ms");
+  }
+
+  return transition.join(" ");
+}
+
+/** @type {StyleUpdater} */
+function getInnerWrapperCollapsingTransition() {
+  return TRANSITION_DURATION + "ms transform ease";
+}
+
+/** @type {StyleUpdater} */
+function getWrapperExpandedHeight(_ref3) {
+  var hasBounce = _ref3.hasBounce,
+      innerWrapper = _ref3.innerWrapper;
+
+  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  var offset = hasBounce ? OVERLAY_HEIGHT_BUFFER : 0;
+  var result = innerWrapperHeight + offset;
+
+  return result + "px";
+}
+
+/** @type {StyleUpdater} */
+function getWrapperCollapsedHeight(_ref4) {
+  var hasPush = _ref4.hasPush,
+      innerWrapper = _ref4.innerWrapper;
+
+  if (hasPush) return "0";
+
+  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  var result = innerWrapperHeight + OVERLAY_HEIGHT_BUFFER;
+
+  return result + "px";
+}
+
+/** @type {StyleUpdater} */
+function getInnerWrapperCollapsedTransform(_ref5) {
+  var innerWrapper = _ref5.innerWrapper,
+      position = _ref5.position;
+
+  var isBottomPlacement = position === positions.BOTTOM;
+  var modifier = isBottomPlacement ? 1 : -1;
+  var offset = isBottomPlacement ? OVERLAY_HEIGHT_BUFFER : 0;
+  var innerWrapperHeight = getInnerWrapperheight(innerWrapper);
+  var result = innerWrapperHeight * modifier + offset;
+
+  return "translateY(" + result + "px)";
+}
+
+/** @type {StyleUpdater} */
+function getInnerWrapperExpandingTransform(_ref6) {
+  var hasBounce = _ref6.hasBounce,
+      position = _ref6.position;
+
+  if (hasBounce && position === positions.BOTTOM) {
+    return "translateY(" + OVERLAY_HEIGHT_BUFFER + "px)";
+  }
+
+  return "";
+}
+
+/** @typedef {import("./BannerAnimator").BannerAnimatorState} BannerAnimatorState */
+/** @typedef {import("./BannerAnimator").BannerAnimatorProps} BannerAnimatorProps */
+// eslint-disable-next-line max-len
+/** @typedef {function(BannerAnimatorState, BannerAnimatorProps): BannerAnimatorState} BannerAnimatorUpdater */
+
+/**
+ * @param {BannerAnimatorState} [prevState]
+ * @param {BannerAnimatorProps} [props]
+ * @returns {import("./styles").StyleUpdaterParams}
+ */
+function getParams() {
+  var prevState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var innerWrapper = prevState.innerWrapper;
+  var hasPush = props.hasPush,
+      hasBounce = props.hasBounce,
+      position = props.position;
+
+
+  return {
+    innerWrapper: innerWrapper,
+    hasBounce: hasBounce,
+    hasPush: hasPush,
+    position: position
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function startExpand() {
+  return {
+    status: statuses.EXPANDING
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function startCollapse() {
+  return {
+    status: statuses.COLLAPSING
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function endExpand() {
+  return {
+    status: statuses.EXPANDED,
+    wrapperStyle: getWrapperReset(),
+    innerWrapperStyle: getInnerWrapperReset()
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function endCollapse(prevState, props) {
+  var params = getParams(prevState, props);
+
+  return {
+    status: statuses.COLLAPSED,
+    wrapperStyle: {
+      transition: "",
+      overflow: "hidden",
+      height: "0"
+    },
+    innerWrapperStyle: {
+      transition: "",
+      transform: getInnerWrapperCollapsedTransform(params)
+    }
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function prepareCollapse(prevState, props) {
+  var params = getParams(prevState, props);
+
+  return {
+    wrapperStyle: {
+      transition: "",
+      overflow: "hidden",
+      height: getWrapperExpandedHeight(params)
+    },
+    innerWrapperStyle: getInnerWrapperReset()
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function animateCollapse(prevState, props) {
+  var params = getParams(prevState, props);
+
+  return {
+    wrapperStyle: {
+      transition: getWrapperTransition(params),
+      overflow: "hidden",
+      height: getWrapperCollapsedHeight(params)
+    },
+    innerWrapperStyle: {
+      transition: getInnerWrapperCollapsingTransition(params),
+      transform: getInnerWrapperCollapsedTransform(params)
+    }
+  };
+}
+
+/** @type {BannerAnimatorUpdater} */
+function animateExpand(prevState, props) {
+  var params = getParams(prevState, props);
+
+  return {
+    wrapperStyle: {
+      transition: getWrapperTransition(params),
+      overflow: "hidden",
+      height: getWrapperExpandedHeight(params)
+    },
+    innerWrapperStyle: {
+      transition: getInnerWrapperExpandingTransition(params),
+      transform: getInnerWrapperExpandingTransform(params)
+    }
+  };
+}
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -118,2 +374,298 @@
 /**
+ * @typedef {Object} BannerAnimatorProps
+ * @property {boolean} [isVisible]
+ * @property {boolean} [hasBounce]
+ * @property {boolean} [hasPush]
+ * @property {string} [position]
+ * @property {function(ContainerBag): JSX.Element} children
+ */
+
+/**
+ * @typedef {Object} BannerAnimatorState
+ * @property {string} [status]
+ * @property {Object.<string, string>} [wrapperStyle]
+ * @property {Object.<string, string>} [innerWrapperStyle]
+ * @property {HTMLDivElement} [wrapper]
+ * @property {HTMLDivElement} [innerWrapper]
+ */
+
+/** @type {Component<BannerAnimatorProps, BannerAnimatorState>} */
+
+var BannerAnimator = function (_Component) {
+  _inherits(BannerAnimator, _Component);
+
+  function BannerAnimator() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, BannerAnimator);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BannerAnimator.__proto__ || Object.getPrototypeOf(BannerAnimator)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.handleReady = function () {
+      var status = _this.state.status;
+
+
+      if (status === statuses.EXPANDING) {
+        _this.expand();
+      }
+    }, _this.handleTransitionEnd = function (event) {
+      var innerWrapper = _this.state.innerWrapper;
+
+
+      if (event.target !== innerWrapper) return;
+
+      var status = _this.state.status;
+
+
+      if (status === statuses.COLLAPSING) {
+        window.requestAnimationFrame(function () {
+          _this.setState(endCollapse);
+        });
+        return;
+      }
+
+      if (status === statuses.EXPANDING) {
+        window.requestAnimationFrame(function () {
+          _this.setState(endExpand);
+        });
+      }
+    }, _this.refWrapper = function (wrapper) {
+      _this.setState({ wrapper: wrapper });
+    }, _this.refInnerWrapper = function (innerWrapper) {
+      _this.setState({ innerWrapper: innerWrapper });
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(BannerAnimator, [{
+    key: "componentDidUpdate",
+
+
+    /**
+     * @param {BannerAnimatorProps} prevProps
+     * @param {BannerAnimatorState} prevState
+     */
+    value: function componentDidUpdate(prevProps, prevState) {
+      var prevStatus = prevState.status;
+      var status = this.state.status;
+
+
+      if (prevStatus === statuses.EXPANDED && status === statuses.COLLAPSING) {
+        this.collapseFromExpanded();
+        return;
+      }
+      if (prevStatus === statuses.COLLAPSING && status === statuses.EXPANDING) {
+        this.expand();
+        return;
+      }
+      if (prevStatus === statuses.EXPANDING && status === statuses.COLLAPSING) {
+        this.collapse();
+      }
+    }
+  }, {
+    key: "expand",
+    value: function expand() {
+      var _this2 = this;
+
+      window.requestAnimationFrame(function () {
+        _this2.setState(animateExpand);
+      });
+    }
+  }, {
+    key: "collapse",
+    value: function collapse() {
+      var _this3 = this;
+
+      window.requestAnimationFrame(function () {
+        _this3.setState(animateCollapse);
+      });
+    }
+  }, {
+    key: "collapseFromExpanded",
+    value: function collapseFromExpanded() {
+      var _this4 = this;
+
+      window.requestAnimationFrame(function () {
+        _this4.setState(prepareCollapse, function () {
+          _this4.collapse();
+        });
+      });
+    }
+
+    /** @type {BannerAnimatorProps} */
+
+
+    /** @param {TransitionEvent} event */
+
+
+    /** @param {HTMLDivElement} wrapper */
+
+
+    /** @param {HTMLDivElement} innerWrapper */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var renderChildren = this.props.children;
+      var _state = this.state,
+          status = _state.status,
+          wrapperStyle = _state.wrapperStyle,
+          innerWrapperStyle = _state.innerWrapperStyle;
+      var handleReady = this.handleReady,
+          handleTransitionEnd = this.handleTransitionEnd,
+          refInnerWrapper = this.refInnerWrapper,
+          refWrapper = this.refWrapper;
+
+      var children = status === statuses.COLLAPSED ? null : renderChildren({ handleReady: handleReady });
+      var isBusy = status === statuses.EXPANDING || status === statuses.COLLAPSING;
+
+      return React__default.createElement(
+        "div",
+        {
+          "aria-busy": isBusy,
+          "aria-expanded": status === statuses.EXPANDED,
+          style: wrapperStyle,
+          onTransitionEnd: handleTransitionEnd,
+          ref: refWrapper
+        },
+        React__default.createElement(
+          "div",
+          { style: innerWrapperStyle, ref: refInnerWrapper },
+          children
+        )
+      );
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+
+    /**
+     * @param {BannerAnimatorProps} nextProps
+     * @param {BannerAnimatorState} prevState
+     * @returns {BannerAnimatorState | null}
+     */
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var isVisible = nextProps.isVisible;
+      var status = prevState.status;
+
+
+      if (!status) {
+        return isVisible ? endExpand() : endCollapse();
+      }
+
+      switch (status) {
+        case statuses.COLLAPSED:
+        case statuses.COLLAPSING:
+          return isVisible ? startExpand() : null;
+        case statuses.EXPANDED:
+        case statuses.EXPANDING:
+          return isVisible ? null : startCollapse();
+        default:
+          // eslint-disable-next-line no-console
+          console.warn("Invalid status", { status: status });
+          return null;
+      }
+    }
+
+    /** @type {BannerAnimatorState} */
+
+  }]);
+
+  return BannerAnimator;
+}(React.Component);
+
+BannerAnimator.defaultProps = {
+  isVisible: true,
+  hasBounce: true,
+  hasPush: true,
+  position: positions.TOP
+};
+BannerAnimator.propTypes = {
+  /* eslint-disable react/no-unused-prop-types */
+  /** Determines the visibility of the banner */
+  isVisible: PropTypes.bool.isRequired,
+  /** Determines the type of animation used */
+  hasBounce: PropTypes.bool.isRequired,
+  /** Determines the type of animation used */
+  hasPush: PropTypes.bool.isRequired,
+  /** Determines the direction of the animation */
+  position: PropTypes.oneOf(AVAILABLE_POSITIONS),
+  /* eslint-enable react/no-unused-prop-types */
+  /** A render prop, that renders the component to be animated */
+  children: PropTypes.func.isRequired
+};
+
+
+var BannerAnimator$1 = reactLifecyclesCompat.polyfill(BannerAnimator);
+BannerAnimator.__docgenInfo = {
+  "description": "@type {Component<BannerAnimatorProps, BannerAnimatorState>}",
+  "displayName": "BannerAnimator",
+  "props": {
+    "isVisible": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Determines the visibility of the banner",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "hasBounce": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Determines the type of animation used",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "hasPush": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Determines the type of animation used",
+      "defaultValue": {
+        "value": "true",
+        "computed": false
+      }
+    },
+    "position": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "AVAILABLE_POSITIONS"
+      },
+      "required": false,
+      "description": "Determines the direction of the animation",
+      "defaultValue": {
+        "value": "positions.TOP",
+        "computed": true
+      }
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "A render prop, that renders the component to be animated"
+    }
+  }
+};
+
+var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/**
  * @typedef {Object} PresenterBag
@@ -130,2 +682,3 @@ * @property {boolean} isWrappingContent
  * @property {any} [actions]
+ * @property {Function} [onReady]
  * @property {function(PresenterBag): any} [children]
@@ -150,3 +703,3 @@ */
 var BannerContainer = function (_Component) {
-  _inherits(BannerContainer, _Component);
+  _inherits$1(BannerContainer, _Component);
 
@@ -158,3 +711,3 @@ function BannerContainer() {
 
-    _classCallCheck(this, BannerContainer);
+    _classCallCheck$1(this, BannerContainer);
 
@@ -165,3 +718,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BannerContainer.__proto__ || Object.getPrototypeOf(BannerContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = BannerContainer.__proto__ || Object.getPrototypeOf(BannerContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       isWrappingActions: false,
@@ -177,3 +730,3 @@ isWrappingContent: false
       _this.updateWrapping();
-    }, _this.updateContentWrapping = function () {
+    }, _this.updateContentWrapping = function (callback) {
       var update = { isWrappingContent: _this.shouldWrapContent() };
@@ -183,10 +736,14 @@
         delete _this.wrappingFrame;
+
+        if (callback) callback();
       });
-    }, _this.updateActionWrapping = function () {
+    }, _this.updateActionWrapping = function (callback) {
       var update = { isWrappingActions: _this.shouldWrapActions() };
 
       _this.setState(update, function () {
-        _this.wrappingFrame = window.requestAnimationFrame(_this.updateContentWrapping);
+        _this.wrappingFrame = window.requestAnimationFrame(function () {
+          _this.updateContentWrapping(callback);
+        });
       });
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
   }
@@ -197,7 +754,7 @@
 
-  _createClass(BannerContainer, [{
+  _createClass$1(BannerContainer, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.bindResize();
-      this.updateWrapping();
+      this.updateWrapping(this.props.onReady);
     }
@@ -291,2 +848,12 @@ }, {
     }
+
+    /**
+     * @param {Function} callback
+     */
+
+
+    /**
+     * @param {Function} callback
+     */
+
   }, {
@@ -298,7 +865,12 @@ key: "updateWrapping",
      * Asynchronously updates the wrapping behavior of the presenter
+     * @param {Function} callback
      */
-    value: function updateWrapping() {
+    value: function updateWrapping(callback) {
+      var _this2 = this;
+
       if (this.wrappingFrame !== undefined) return;
 
-      this.wrappingFrame = window.requestAnimationFrame(this.updateActionWrapping);
+      this.wrappingFrame = window.requestAnimationFrame(function () {
+        _this2.updateActionWrapping(callback);
+      });
     }
@@ -380,2 +952,4 @@ }, {
   actions: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  /** Called after the component has been mounted, and dynamically resized */
+  onReady: PropTypes.func,
   /** A render prop function to render a `BannerPresenter` */
@@ -400,2 +974,9 @@ children: PropTypes.func.isRequired
     },
+    "onReady": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called after the component has been mounted, and dynamically resized"
+    },
     "children": {
@@ -528,9 +1109,2 @@ "type": {
 
-var _wrapperModifiersByTy, _iconNamesByType;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/** @todo Reference from constant on `Text` component */
-var TEXT_COLOR = "hig-cool-gray-70";
-
 /** @type {Object.<string, string>} */
@@ -556,7 +1130,11 @@ var classNames$1 = Object.freeze({
 
-/** @type {Object.<string, string>} */
-var wrapperModifiersByType = (_wrapperModifiersByTy = {}, _defineProperty(_wrapperModifiersByTy, types.PRIMARY, classNames$1.wrapperPrimary), _defineProperty(_wrapperModifiersByTy, types.COMPLETE, classNames$1.wrapperComplete), _defineProperty(_wrapperModifiersByTy, types.WARNING, classNames$1.wrapperWarning), _defineProperty(_wrapperModifiersByTy, types.URGENT, classNames$1.wrapperUrgent), _wrapperModifiersByTy);
+var _wrapperModifiersByTy;
 
+function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/** @todo Reference from constant on `Text` component */
+var TEXT_COLOR = "hig-cool-gray-70";
+
 /** @type {Object.<string, string>} */
-var iconNamesByType = (_iconNamesByType = {}, _defineProperty(_iconNamesByType, types.PRIMARY, BasicIcon.names.INFO), _defineProperty(_iconNamesByType, types.COMPLETE, BasicIcon.names.COMPLETE), _defineProperty(_iconNamesByType, types.WARNING, BasicIcon.names.ISSUE), _defineProperty(_iconNamesByType, types.URGENT, BasicIcon.names.ERROR), _iconNamesByType);
+var wrapperModifiersByType = (_wrapperModifiersByTy = {}, _defineProperty$1(_wrapperModifiersByTy, types.PRIMARY, classNames$1.wrapperPrimary), _defineProperty$1(_wrapperModifiersByTy, types.COMPLETE, classNames$1.wrapperComplete), _defineProperty$1(_wrapperModifiersByTy, types.WARNING, classNames$1.wrapperWarning), _defineProperty$1(_wrapperModifiersByTy, types.URGENT, classNames$1.wrapperUrgent), _wrapperModifiersByTy);
 
@@ -591,13 +1169,23 @@ /**
 
-  var classes = classnames(classNames$1.wrapper, wrapperModifiersByType[type], hasActions ? classNames$1.wrapperInteractive : undefined, isWrappingContent ? classNames$1.wrapperWrapContent : undefined);
+  function classes(themeClass) {
+    return classnames(classNames$1.wrapper, wrapperModifiersByType[type], hasActions ? classNames$1.wrapperInteractive : undefined, isWrappingContent ? classNames$1.wrapperWrapContent : undefined, themeClass);
+  }
 
   return React__default.createElement(
-    "div",
-    {
-      role: "alert",
-      "aria-label": label,
-      "aria-labelledby": labelledBy,
-      className: classes
-    },
-    children
+    themes.ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var themeClass = _ref.themeClass;
+      return React__default.createElement(
+        "div",
+        {
+          role: "alert",
+          "aria-label": label,
+          "aria-labelledby": labelledBy,
+          "aria-live": type === types.URGENT ? "assertive" : "polite",
+          className: classes(themeClass)
+        },
+        children
+      );
+    }
   );
@@ -610,5 +1198,5 @@ }
  */
-function Content(_ref) {
-  var innerRef = _ref.innerRef,
-      children = _ref.children;
+function Content(_ref2) {
+  var innerRef = _ref2.innerRef,
+      children = _ref2.children;
 
@@ -632,5 +1220,5 @@ return React__default.createElement(
  */
-function DismissButton(_ref2) {
-  var title = _ref2.title,
-      onClick = _ref2.onClick;
+function DismissButton(_ref3) {
+  var title = _ref3.title,
+      onClick = _ref3.onClick;
 
@@ -642,3 +1230,3 @@ return React__default.createElement(
       type: IconButton.types.TRANSPARENT,
-      name: BasicIcon.names.CLOSE_NOTIFICATION,
+      name: Icon.names.CLOSE_NOTIFICATION,
       title: title,
@@ -652,21 +1240,2 @@ "aria-label": title,
 /**
- * @typedef {Object} IconProps
- * @property {string} type
- */
-
-/**
- * @param {IconProps} props
- * @returns {JSX.Element}
- */
-function Icon(_ref3) {
-  var type = _ref3.type;
-
-  return React__default.createElement(
-    "figure",
-    { className: classNames$1.iconBackground },
-    React__default.createElement(BasicIcon__default, { name: iconNamesByType[type], size: BasicIcon.sizes.MEDIUM })
-  );
-}
-
-/**
  * @param {StyledProps} props
@@ -719,3 +1288,36 @@ * @returns {JSX.Element}
 
+var _iconNamesByType;
+
+function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/** @type {Object.<string, string>} */
+var iconNamesByType = (_iconNamesByType = {}, _defineProperty$2(_iconNamesByType, types.PRIMARY, Icon.names.INFO), _defineProperty$2(_iconNamesByType, types.COMPLETE, Icon.names.COMPLETE), _defineProperty$2(_iconNamesByType, types.WARNING, Icon.names.ISSUE), _defineProperty$2(_iconNamesByType, types.URGENT, Icon.names.ERROR), _iconNamesByType);
+
 /**
+ * @typedef {Object} IconProps
+ * @property {string} type
+ */
+
+/**
+ * @param {IconProps} props
+ * @returns {JSX.Element}
+ */
+function IconBackground(_ref) {
+  var type = _ref.type;
+
+  return React__default.createElement(
+    themes.ThemeContext.Consumer,
+    null,
+    function (_ref2) {
+      var themeClass = _ref2.themeClass;
+      return React__default.createElement(
+        "figure",
+        { className: classnames(classNames$1.iconBackground, themeClass) },
+        React__default.createElement(Icon__default, { name: iconNamesByType[type], size: Icon.sizes.MEDIUM })
+      );
+    }
+  );
+}
+
+/**
  * @typedef {Object} BannerPresenterProps
@@ -765,3 +1367,3 @@ * @property {string} [type]
     },
-    React__default.createElement(Icon, { type: type }),
+    React__default.createElement(IconBackground, { type: type }),
     React__default.createElement(
@@ -925,11 +1527,11 @@ Content,
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
@@ -952,3 +1554,3 @@ /**
 var Banner = function (_Component) {
-  _inherits$1(Banner, _Component);
+  _inherits$2(Banner, _Component);
 
@@ -960,3 +1562,3 @@ function Banner() {
 
-    _classCallCheck$1(this, Banner);
+    _classCallCheck$2(this, Banner);
 
@@ -967,3 +1569,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Banner.__proto__ || Object.getPrototypeOf(Banner)).call.apply(_ref, [this].concat(args))), _this), _this.renderPresenter = function (presenterBag) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = Banner.__proto__ || Object.getPrototypeOf(Banner)).call.apply(_ref, [this].concat(args))), _this), _this.renderPresenter = function (presenterBag) {
       var presenterProps = _extends({}, _this.props, presenterBag);
@@ -979,3 +1581,15 @@
       );
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+    }, _this.renderContainer = function (_ref2) {
+      var handleReady = _ref2.handleReady;
+      var actions = _this.props.actions;
+      var _this2 = _this,
+          renderPresenter = _this2.renderPresenter;
+
+
+      return React__default.createElement(
+        BannerContainer,
+        { actions: actions, onReady: handleReady },
+        renderPresenter
+      );
+    }, _temp), _possibleConstructorReturn$2(_this, _ret);
   }
@@ -991,3 +1605,8 @@
 
-  _createClass$1(Banner, [{
+  /**
+   * @param {import("./BannerAnimator").ContainerBag} containerBag
+   */
+
+
+  _createClass$2(Banner, [{
     key: "render",
@@ -997,14 +1616,12 @@ value: function render() {
           isVisible = _props.isVisible,
-          actions = _props.actions;
-      var renderPresenter = this.renderPresenter;
+          placement = _props.placement;
+      var renderContainer = this.renderContainer;
 
 
       return React__default.createElement(
-        BannerAnimator,
-        { isVisible: isVisible },
-        React__default.createElement(
-          BannerContainer,
-          { actions: actions },
-          renderPresenter
-        )
+        BannerAnimator$1,
+        _extends({
+          isVisible: isVisible
+        }, animatorPropsByPlacement[placement]),
+        renderContainer
       );
@@ -1125,3 +1742,3 @@ }
 exports.BannerAction = BannerAction;
-exports.BannerAnimator = BannerAnimator;
+exports.BannerAnimator = BannerAnimator$1;
 exports.BannerInteractions = BannerInteractions;
@@ -1128,0 +1745,0 @@ exports.BannerPresenter = BannerPresenter;

package.json

 {
   "name": "@hig/banner",
-  "version": "0.2.0-alpha.7472a049",
+  "version": "0.2.0-alpha.8ca13c8b",
   "description": "HIG Banner",
@@ -9,7 +9,11 @@ "author": "Autodesk Inc.",
   "module": "build/index.es.js",
-  "css": "build/index.es.css",
+  "style": "build/index.css",
+  "files": [
+    "build/*"
+  ],
   "devDependencies": {
-    "@hig/eslint-config": "0.2.0-alpha.7472a049",
-    "@hig/scripts": "0.2.0-alpha.7472a049",
-    "@hig/styles": "0.1.0-alpha.7472a049"
+    "@hig/eslint-config": "0.2.0-alpha.8ca13c8b",
+    "@hig/scripts": "0.2.0-alpha.8ca13c8b",
+    "@hig/styles": "0.1.0-alpha.8ca13c8b",
+    "hig-react": "0.29.0-alpha.8ca13c8b"
   },
@@ -25,6 +29,8 @@ "peerDependencies": {
   "dependencies": {
-    "@hig/icon": "0.1.0-alpha.7472a049",
-    "@hig/icon-button": "0.1.0-alpha.7472a049",
-    "@hig/icons": "0.1.0-alpha.7472a049",
-    "@hig/typography": "0.1.0-alpha.7472a049"
+    "@hig/icon": "0.1.0-alpha.8ca13c8b",
+    "@hig/icon-button": "0.1.0-alpha.8ca13c8b",
+    "@hig/icons": "0.1.0-alpha.8ca13c8b",
+    "@hig/themes": "0.1.0-alpha.8ca13c8b",
+    "@hig/typography": "0.1.0-alpha.8ca13c8b",
+    "react-lifecycles-compat": "^2.0.0"
   },
@@ -36,5 +42,4 @@ "eslintConfig": {
     "*.scss",
-    "*.json",
-    "*.js.snap"
+    "*.json"
   ]
 }

README.md

@@ -7,2 +7,15 @@ # Banner
 
+## Getting started
+
+```
+yarn add @hig/banner
+```
+
+## Import the component and CSS
+
+```
+import Banner from '@hig/banner';
+import '@hig/banner/build/index.css';
+```
+
 ## Basic usage
@@ -9,0 +22,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

137022

increased by15.44%

Lines of code

3775

increased by22.68%

Number of lines in readme file

63

increased by26%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

8

increased by33.33%

Dev dependency count

4

increased by33.33%

Number of package files

6

decreased by-85.37%

Dependency changes

• + Added@hig/themes@0.1.0-alpha.8ca13c8b

• + Addedreact-lifecycles-compat@^2.0.0

• + Added@hig/icon@0.1.0-alpha.8ca13c8b(transitive)

• + Added@hig/icon-button@0.1.0-alpha.8ca13c8b(transitive)

• + Added@hig/icons@0.1.0-alpha.8ca13c8b(transitive)

• + Added@hig/themes@0.1.0-alpha.8ca13c8b(transitive)

• + Added@hig/typography@0.1.0-alpha.8ca13c8b(transitive)

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

• - Removed@hig/icon@0.1.0-alpha.7472a049(transitive)

• - Removed@hig/icon-button@0.1.0-alpha.7472a049(transitive)

• - Removed@hig/icons@0.1.0-alpha.7472a049(transitive)

• - Removed@hig/typography@0.1.0-alpha.7472a049(transitive)

• Updated@hig/icon@0.1.0-alpha.8ca13c8b

• Updated@hig/icon-button@0.1.0-alpha.8ca13c8b

• Updated@hig/icons@0.1.0-alpha.8ca13c8b

• Updated@hig/typography@0.1.0-alpha.8ca13c8b