@planningcenter/topbar 11.0.2 → 11.0.3-rc.0

package/dist/topbar.module.js

@@ -345,7 +345,7 @@ const X = ({
   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__default.createElement("svg", {
@@ -413,11 +413,14 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
   render() {
     const {
       style,
+      variant,
       ...platformProps
     } = this.props;
+    const isPromo = variant === "promo";
     return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles$b["announcement"], styles$b["announcement--platform"])
-    }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.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__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
       className: styles$b["announcement-content"],
       style: style,
       ...platformProps
@@ -440,10 +443,12 @@ class PlatformAnnouncements extends React__default.Component {
       env: this.props.env,
       initialAnnouncements: this.props.data,
       configuredFetch: this.props.configuredFetch
-    }, (data, actions) => Boolean(data.announcements.length > 0) ? (/*#__PURE__*/React__default.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
-      actions,
-      announcement
-    })))) : null));
+    }, (data, actions) => {
+      return data.announcements.length > 0 ? (/*#__PURE__*/React__default.createElement("div", null, data.announcements.map(announcement => this.props.renderItem({
+        actions,
+        announcement
+      })))) : null;
+    }));
   }
 }
 PlatformAnnouncements.defaultProps = {
@@ -451,33 +456,39 @@ PlatformAnnouncements.defaultProps = {
   renderItem: ({
     announcement,
     actions
-  }) => (/*#__PURE__*/React__default.createElement(DissmissibleAnnouncement, {
+  }) => (/*#__PURE__*/React__default.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__default.createElement("button", {
     type: "button",
-    className: styles$b.dismiss,
+    className: classnames(styles$b.dismiss, isPromo && styles$b["dismiss--promo"]),
     ...props
   }, /*#__PURE__*/React__default.createElement(X, {
-    fill: "white",
+    fill: isPromo ? "currentColor" : "white",
     style: {
       height: 20,
       width: 20
     }
   }));
 }
-function DissmissibleAnnouncement(props) {
-  return /*#__PURE__*/React__default.createElement(StyledAnnouncement$1, null, /*#__PURE__*/React__default.createElement("span", {
+function DismissibleAnnouncement(props) {
+  return /*#__PURE__*/React__default.createElement(StyledAnnouncement$1, {
+    variant: props.variant
+  }, /*#__PURE__*/React__default.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: props.html
     }
   }), /*#__PURE__*/React__default.createElement(StyledDismissButton$1, {
+    variant: props.variant,
     onClick: props.onClick
   }));
 }
@@ -674,6 +685,39 @@ const useJoltEffect = (channelSubscription, eventName, callback) => {
   }, [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] = useState(getMatches(query));
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  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) {
@@ -762,39 +806,6 @@ const useNotificationsHasUnread = ({
   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] = useState(getMatches(query));
-  function handleChange() {
-    setMatches(getMatches(query));
-  }
-  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();
@@ -2457,7 +2468,7 @@ function AccountSettingsLink({
     width: 24,
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/React__default.createElement(Accounts$1, {
-    color: "var(--t-icon-color-secondary",
+    color: "var(--t-icon-color-secondary)",
     key: "key2"
   })), /*#__PURE__*/React__default.createElement("span", null, "Account settings"));
 }
@@ -2705,8 +2716,8 @@ function useFragmentKey(key) {
     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];
 }
@@ -2720,9 +2731,9 @@ function useFragmentRouting() {
   }, [updateFragment]);
   const route = useMemo(() => {
     if (toolbarFragment) {
-      const [tool, ...rest] = toolbarFragment.split('/');
+      const [tool, ...rest] = toolbarFragment.split("/");
       return {
-        path: rest.join('/'),
+        path: rest.join("/"),
         tool
       };
     } else {
@@ -4256,11 +4267,11 @@ function useStableIframeSrcAttributeAndSyncFragmentRoute({
   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;
 }