@planningcenter/topbar 11.0.2 → 11.1.0-qa-759.0

package/dist/topbar.umd.js

@@ -356,7 +356,7 @@
     fill: fill
   })));
 
-  var styles$b = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU"};
+  var styles$b = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
 
   function AnnouncementIcon() {
     return /*#__PURE__*/React.createElement("svg", {
@@ -424,11 +424,13 @@
     render() {
       const {
         style,
+        variant,
         ...platformProps
       } = this.props;
+      const isPromo = variant === "promo";
       return /*#__PURE__*/React.createElement("div", {
-        className: classnames(styles$b["announcement"], styles$b["announcement--platform"])
-      }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
+        className: classnames(styles$b["announcement"], isPromo ? styles$b["announcement--promo"] : styles$b["announcement--platform"])
+      }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
         className: styles$b["announcement-content"],
         style: style,
         ...platformProps
@@ -451,10 +453,14 @@
         env: this.props.env,
         initialAnnouncements: this.props.data,
         configuredFetch: this.props.configuredFetch
-      }, (data, actions) => Boolean(data.announcements.length > 0) ? (/*#__PURE__*/React.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
-        actions,
-        announcement
-      })))) : null));
+      }, (data, actions) => {
+        const isNative = typeof document !== "undefined" && document.documentElement.getAttribute("data-app-context") === "native";
+        const visibleAnnouncements = data.announcements.filter(a => !(isNative && a.data.style === "promo"));
+        return visibleAnnouncements.length > 0 ? (/*#__PURE__*/React.createElement("div", null, visibleAnnouncements.map(announcement => this.props.renderItem({
+          actions,
+          announcement
+        })))) : null;
+      }));
     }
   }
   PlatformAnnouncements.defaultProps = {
@@ -465,18 +471,21 @@
     }) => (/*#__PURE__*/React.createElement(DissmissibleAnnouncement, {
       key: announcement.id,
       html: announcement.data.html,
+      variant: announcement.data.style,
       onClick: () => actions.dismissAnnouncements(announcement.id)
     }))
   };
   function StyledDismissButton$1({
+    variant,
     ...props
   }) {
+    const isPromo = variant === "promo";
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$b.dismiss,
+      className: classnames(styles$b.dismiss, isPromo && styles$b["dismiss--promo"]),
       ...props
     }, /*#__PURE__*/React.createElement(X, {
-      fill: "white",
+      fill: isPromo ? "currentColor" : "white",
       style: {
         height: 20,
         width: 20
@@ -484,11 +493,14 @@
     }));
   }
   function DissmissibleAnnouncement(props) {
-    return /*#__PURE__*/React.createElement(StyledAnnouncement$1, null, /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(StyledAnnouncement$1, {
+      variant: props.variant
+    }, /*#__PURE__*/React.createElement("span", {
       dangerouslySetInnerHTML: {
         __html: props.html
       }
     }), /*#__PURE__*/React.createElement(StyledDismissButton$1, {
+      variant: props.variant,
       onClick: props.onClick
     }));
   }