@planningcenter/topbar 11.0.2 → 11.0.3-rc.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,14 @@
     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"], styles$b[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+        "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform"
+      }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
         className: styles$b["announcement-content"],
         style: style,
         ...platformProps
@@ -451,10 +454,12 @@
         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) => {
+        return data.announcements.length > 0 ? (/*#__PURE__*/React.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
+          actions,
+          announcement
+        })))) : null;
+      }));
     }
   }
   PlatformAnnouncements.defaultProps = {
@@ -462,33 +467,39 @@
     renderItem: ({
       announcement,
       actions
-    }) => (/*#__PURE__*/React.createElement(DissmissibleAnnouncement, {
+    }) => (/*#__PURE__*/React.createElement(DismissibleAnnouncement, {
       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
       }
     }));
   }
-  function DissmissibleAnnouncement(props) {
-    return /*#__PURE__*/React.createElement(StyledAnnouncement$1, null, /*#__PURE__*/React.createElement("span", {
+  function DismissibleAnnouncement(props) {
+    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
     }));
   }
@@ -685,6 +696,39 @@
     }, [channelSubscription, callback]);
   };
 
+  function useMediaQuery(query) {
+    const getMatches = query => {
+      // Prevents SSR issues
+      if (typeof window !== "undefined") {
+        return window.matchMedia(query).matches;
+      }
+      return false;
+    };
+    const [matches, setMatches] = React.useState(getMatches(query));
+    function handleChange() {
+      setMatches(getMatches(query));
+    }
+    React.useEffect(() => {
+      const matchMedia = window.matchMedia(query);
+      // Triggered at the first client-side load and if query changes
+      handleChange();
+      // Listen matchMedia
+      if (matchMedia.addListener) {
+        matchMedia.addListener(handleChange);
+      } else {
+        matchMedia.addEventListener("change", handleChange);
+      }
+      return () => {
+        if (matchMedia.removeListener) {
+          matchMedia.removeListener(handleChange);
+        } else {
+          matchMedia.removeEventListener("change", handleChange);
+        }
+      };
+    }, [query]);
+    return matches;
+  }
+
   const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);
   const RESOLVED_COLOR_MODE_ATTRIBUTE = "data-resolved-color-mode";
   function resolveColorMode(colorMode) {
@@ -773,39 +817,6 @@
     return storedValue;
   };
 
-  function useMediaQuery(query) {
-    const getMatches = query => {
-      // Prevents SSR issues
-      if (typeof window !== "undefined") {
-        return window.matchMedia(query).matches;
-      }
-      return false;
-    };
-    const [matches, setMatches] = React.useState(getMatches(query));
-    function handleChange() {
-      setMatches(getMatches(query));
-    }
-    React.useEffect(() => {
-      const matchMedia = window.matchMedia(query);
-      // Triggered at the first client-side load and if query changes
-      handleChange();
-      // Listen matchMedia
-      if (matchMedia.addListener) {
-        matchMedia.addListener(handleChange);
-      } else {
-        matchMedia.addEventListener("change", handleChange);
-      }
-      return () => {
-        if (matchMedia.removeListener) {
-          matchMedia.removeListener(handleChange);
-        } else {
-          matchMedia.removeEventListener("change", handleChange);
-        }
-      };
-    }, [query]);
-    return matches;
-  }
-
   function createStore(initialState) {
     let currentState = initialState;
     const listeners = new Set();
@@ -2468,7 +2479,7 @@
       width: 24,
       xmlns: "http://www.w3.org/2000/svg"
     }, /*#__PURE__*/React.createElement(Accounts$1, {
-      color: "var(--t-icon-color-secondary",
+      color: "var(--t-icon-color-secondary)",
       key: "key2"
     })), /*#__PURE__*/React.createElement("span", null, "Account settings"));
   }
@@ -2716,8 +2727,8 @@
       function onHashChange() {
         updateFragment(location.hash);
       }
-      window.addEventListener('hashchange', onHashChange);
-      return () => window.removeEventListener('hashchange', onHashChange);
+      window.addEventListener("hashchange", onHashChange);
+      return () => window.removeEventListener("hashchange", onHashChange);
     }, [updateFragment]);
     return [value, updateFragment];
   }
@@ -2731,9 +2742,9 @@
     }, [updateFragment]);
     const route = React.useMemo(() => {
       if (toolbarFragment) {
-        const [tool, ...rest] = toolbarFragment.split('/');
+        const [tool, ...rest] = toolbarFragment.split("/");
         return {
-          path: rest.join('/'),
+          path: rest.join("/"),
           tool
         };
       } else {
@@ -4267,11 +4278,11 @@
     return iframeSrc;
   }
   function encodeQueryString(path) {
-    const [pathPart, queryPart] = path.split('?', 2);
+    const [pathPart, queryPart] = path.split("?", 2);
     return queryPart ? `${pathPart}?${encodeURIComponent(queryPart)}` : pathPart;
   }
   function decodeQueryString(path) {
-    const [pathPart, queryPart] = path.split('?', 2);
+    const [pathPart, queryPart] = path.split("?", 2);
     return queryPart ? `${pathPart}?${decodeURIComponent(queryPart)}` : pathPart;
   }