@apolitical/component-library 3.0.0 → 3.0.1-ac.0

package/index.mjs

@@ -1589,7 +1589,43 @@ const pl = ({ image: t, className: e, testId: n }) => /* @__PURE__ */ a.jsx(
   }
   return n ? K.createElement(n, { children: e, className: r, ...c }) : e;
 };
-const hl = ({ elementId: t, offset: e = 20 }) => {
+const hl = ({ currentStep: t = 1, steps: e = 1 }) => {
+  const [n, r] = te([]);
+  return ae(() => {
+    const i = [];
+    for (let s = 1; s < e + 1; s++)
+      i.push(s);
+    r(i);
+  }, [e]), /* @__PURE__ */ a.jsx("div", { className: "navigation-dots-wrapper", children: /* @__PURE__ */ a.jsx("div", { className: "dots-wrapper", children: n.map((i) => /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      className: "dot-wrapper",
+      "aria-label": `Step ${t} of ${i}`,
+      children: [
+        /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            className: S("dot", {
+              active: i === t,
+              completed: i < t
+            }),
+            "data-testid": "navigation-dot"
+          }
+        ),
+        /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            className: S("line", {
+              active: i < t
+            })
+          }
+        )
+      ]
+    },
+    i
+  )) }) });
+};
+const gl = ({ elementId: t, offset: e = 20 }) => {
   const n = G(), r = () => {
     const i = document.getElementById(t);
     if (!i)
@@ -1640,7 +1676,7 @@ const Vi = ({ isOpen: t = !1, isLoading: e = !1, children: n }) => {
     }
   );
 };
-const gl = ({ className: t = "", image: e, ...n }) => e ? (typeof e == "string" && (e = {
+const vl = ({ className: t = "", image: e, ...n }) => e ? (typeof e == "string" && (e = {
   width: 1080,
   height: 200,
   type: "image/png",
@@ -1675,7 +1711,7 @@ const et = ({
     }
   );
 };
-const vl = ({ text: t, buttons: e, className: n = "" }) => {
+const bl = ({ text: t, buttons: e, className: n = "" }) => {
   const r = [];
   return e.forEach((i) => {
     r.push({
@@ -1706,7 +1742,7 @@ const Yi = ({ icon: t, description: e, ctaMessage: n, href: r, showEditButton: i
     /* @__PURE__ */ a.jsx("p", { children: e || o({ id: "edit_section_placeholder_description" }) }),
     i && /* @__PURE__ */ a.jsx(ie, { href: r, variant: "secondary", size: "small", onClick: () => ca({ href: r, setShowModal: s }), children: n || o({ id: "edit_section_placeholder_cta" }) })
   ] });
-}, bl = ({
+}, yl = ({
   children: t,
   className: e = "",
   formProps: n,
@@ -1750,7 +1786,7 @@ const Yi = ({ icon: t, description: e, ctaMessage: n, href: r, showEditButton: i
     c && /* @__PURE__ */ a.jsx(Re, {})
   ] });
 };
-const yl = ({
+const _l = ({
   title: t = !1,
   logos: e = [],
   className: n = ""
@@ -1879,7 +1915,7 @@ const Ki = [
       ] })
     }
   );
-}, _l = Fe(Gi);
+}, xl = Fe(Gi);
 const Qi = ({
   alignImage: t = "left",
   className: e,
@@ -1915,8 +1951,8 @@ const Qi = ({
       }
     )
   ] });
-}, xl = Fe(Qi);
-const wl = ({
+}, wl = Fe(Qi);
+const kl = ({
   variant: t = "primary",
   button: e = null,
   title: n,
@@ -1990,7 +2026,7 @@ const ts = ({ children: t, user: e }) => e.isLoading ? null : process.env.REACT_
 function Vn() {
   return Ce(Oe);
 }
-const rs = ({ children: t, user: e }) => /* @__PURE__ */ a.jsx(Oe.Provider, { value: e, children: t }), kl = ({ bootstrap: t, children: e, intl: n, showDevTools: r }) => {
+const rs = ({ children: t, user: e }) => /* @__PURE__ */ a.jsx(Oe.Provider, { value: e, children: t }), jl = ({ bootstrap: t, children: e, intl: n, showDevTools: r }) => {
   const [i, s] = te({ isLoading: !0 });
   return ae(() => {
     t().then((o) => {
@@ -2084,7 +2120,7 @@ const as = ({
     }
   ) : /* @__PURE__ */ a.jsx("p", { children: r })
 ] });
-const jl = ({
+const Tl = ({
   className: t = "",
   show: e = !1,
   hide: n = !1,
@@ -2324,7 +2360,7 @@ const ps = ({ author: t, authorCite: e, content: n }) => /* @__PURE__ */ a.jsxs(
   /* @__PURE__ */ a.jsx(Xe, { className: "testimonial", children: n }),
   t && /* @__PURE__ */ a.jsx("p", { className: "author text-small", children: t }),
   e && /* @__PURE__ */ a.jsx("p", { className: "author-cite text-small", children: /* @__PURE__ */ a.jsx("cite", { children: e }) })
-] }), Tl = Fe(ps);
+] }), El = Fe(ps);
 const hs = ({ progress: t = 0, text: e = !1, className: n = "" }) => {
   const r = G(), i = t > 75 ? 100 : t > 50 ? 75 : t > 25 ? 50 : t > 5 ? 25 : 0, s = { "--progress": `${t}%` };
   return /* @__PURE__ */ a.jsx(
@@ -2364,7 +2400,7 @@ const un = "loadingBlock_", vs = ({ progress: t = 0, steps: e = !1, className: n
       ]
     }
   );
-}, El = Fe(vs);
+}, Sl = Fe(vs);
 const Te = ({ element: t = "div", className: e = "", ...n }) => /* @__PURE__ */ a.jsx(
   Wn,
   {
@@ -5293,8 +5329,8 @@ const Ct = "passwordRules_", $a = "isMoreThanEightCharacters", Na = "includesNum
       )
     ) })
   ] });
-}, Sl = Fe($o);
-const Cl = ({
+}, Cl = Fe($o);
+const $l = ({
   text: t = {},
   topRating: e = 5,
   functions: {
@@ -5379,7 +5415,7 @@ const Cl = ({
     }) })
   ] });
 };
-const $l = ({
+const Nl = ({
   id: t = "form-toggle",
   label: e,
   options: n,
@@ -5438,7 +5474,7 @@ const $l = ({
     }
   );
 };
-function Nl({ className: t = "", userId: e, userName: n, src: r, setUserImage: i, uploadImage: s }) {
+function Pl({ className: t = "", userId: e, userName: n, src: r, setUserImage: i, uploadImage: s }) {
   const [o, c] = te(!1), [f, l] = te(!1), d = pe(null), u = async (m) => {
     c(!0), l(!1);
     try {
@@ -5962,7 +5998,7 @@ const Ao = {
   loadRecaptcha: !1,
   showSuccessMessage: !1,
   showError: !1
-}, Pl = ({
+}, Ml = ({
   className: t = "",
   functions: e = {
     validateEmail: () => Promise.resolve(),
@@ -6099,7 +6135,7 @@ const Ao = {
     }
   );
 };
-const Ml = ({
+const Rl = ({
   className: t,
   showModal: e = !0,
   title: n,
@@ -6133,7 +6169,7 @@ const Ml = ({
     )
   }
 );
-const Rl = ({ members: t }) => {
+const Fl = ({ members: t }) => {
   const [e, n] = te(!1), r = (i) => {
     const { fullName: s, jobTitle: o, organisation: c, photo: f } = i || {};
     return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
@@ -6672,7 +6708,7 @@ const Wo = ({
       ]
     }
   );
-}, Fl = ({
+}, Ol = ({
   carousels: t = [],
   isLoading: e,
   title: n,
@@ -6696,7 +6732,7 @@ const Wo = ({
         {
           cards: c,
           cardTypes: f,
-          title: { ...n, text: s, link: o },
+          title: n != null && n.hidden ? {} : { ...n, text: s, link: o },
           ...i
         }
       ),
@@ -6737,7 +6773,7 @@ const _n = "joinCommunityButton", Ra = ({
     }
   );
 };
-const xn = "communityDetails_", Ol = ({
+const xn = "communityDetails_", Dl = ({
   className: t = "",
   isMember: e = !1,
   slug: n,
@@ -6784,7 +6820,7 @@ const xn = "communityDetails_", Ol = ({
     )
   ] });
 };
-const Dl = ({ breadcrumbs: t, cutoff: e = 20, className: n = "" }) => {
+const Al = ({ breadcrumbs: t, cutoff: e = 20, className: n = "" }) => {
   const r = G();
   return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
     /* @__PURE__ */ a.jsx(
@@ -6808,7 +6844,7 @@ const Dl = ({ breadcrumbs: t, cutoff: e = 20, className: n = "" }) => {
     ) })
   ] });
 };
-const Al = ({
+const Il = ({
   options: t,
   allOption: e = !1,
   allowMultiple: n = !0,
@@ -6858,7 +6894,7 @@ const wn = {
   es: "Español",
   fr: "Français",
   pt: "Português"
-}, Nt = "languageSwitcher_", Il = ({
+}, Nt = "languageSwitcher_", Ll = ({
   currentLanguage: t,
   isOriginalLanguage: e = !1,
   isHumanTranslation: n = !1,
@@ -7130,7 +7166,7 @@ ${ct(e, "mailto", n)}&src=email`
     onClick: (r, i) => (r.preventDefault(), r.stopPropagation(), navigator.clipboard.writeText(i))
   }
 ];
-const Jo = "shareLinks_", Ll = ({
+const Jo = "shareLinks_", Bl = ({
   title: t,
   link: e,
   referrer: n,
@@ -7166,7 +7202,7 @@ const Jo = "shareLinks_", Ll = ({
     }) })
   ] });
 };
-const Bl = ({ tabs: t, className: e = "", preventLocationChange: n }) => {
+const ql = ({ tabs: t, className: e = "", preventLocationChange: n }) => {
   var l;
   const r = (d, u, m) => (d || (d = `panel-${window.btoa(u)}-${m}`), d);
   let i = t.findIndex((d) => d.current === !0);
@@ -7244,7 +7280,7 @@ const Xo = {
   return K.Children.count(r) === 1 && (s = K.Children.toArray(r)[0], s.props && (s = s.props.children)), /* @__PURE__ */ a.jsx("section", { className: S("columns", `layout-${t}`, n), children: K.Children.map(s, (o, c) => e !== !1 && c === e && i && i < Xo[t] ? null : o) });
 };
 let jn;
-const Tn = "contactFooter_", ql = ({ onSuccess: t = async () => {
+const Tn = "contactFooter_", Ul = ({ onSuccess: t = async () => {
 }, onFailure: e = () => {
 } }) => {
   const n = pe(null), [r, i] = K.useState(0), [s, o] = K.useState(!1), c = () => {
@@ -7281,7 +7317,7 @@ const Tn = "contactFooter_", ql = ({ onSuccess: t = async () => {
       }
     )
   ] }) });
-}, Ul = ({ activeLink: t, ...e }) => /* @__PURE__ */ a.jsx(et, { children: /* @__PURE__ */ a.jsx(ec, { layout: "1-3", children: /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+}, zl = ({ activeLink: t, ...e }) => /* @__PURE__ */ a.jsx(et, { children: /* @__PURE__ */ a.jsx(ec, { layout: "1-3", children: /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
   /* @__PURE__ */ a.jsx(Go, { activeLink: t }),
   /* @__PURE__ */ a.jsx(ms, { ...e })
 ] }) }) });
@@ -8014,30 +8050,44 @@ const rc = () => {
   className: o = "",
   locale: c = "en"
 }) => {
-  const { navigation: f = !0, footer: l = !0 } = i, { background: d = "default", variant: u = "default", circle: m = "default" } = s, p = $i();
+  const { navigation: f = !0, footer: l = !0 } = i, {
+    background: d = "default",
+    variant: u = "default",
+    circle: m = "default",
+    modal: p = "default"
+  } = s, v = $i();
   ae(() => {
     window.scrollTo(0, 0);
-  }, [p]);
-  const v = Ot(t, { locale: c }), y = Ot(e, {
+  }, [v]);
+  const y = Ot(t, { locale: c }), _ = Ot(e, {
     locale: c
-  }), _ = Ot(n, {
+  }), g = Ot(n, {
     locale: c
-  }), g = {};
-  return d !== "default" && (g[d] = !0), u !== "default" && (g[u] = !0), m !== "default" && (g[m] = !0), /* @__PURE__ */ a.jsx(xi, { onError: r, fallback: /* @__PURE__ */ a.jsx(rc, {}), children: /* @__PURE__ */ a.jsx(ui, { fallback: null, children: /* @__PURE__ */ a.jsxs(
+  }), b = {};
+  return d !== "default" && (b[d] = !0), u !== "default" && (b[u] = !0), m !== "default" && (b[m] = !0), /* @__PURE__ */ a.jsx(xi, { onError: r, fallback: /* @__PURE__ */ a.jsx(rc, {}), children: /* @__PURE__ */ a.jsx(ui, { fallback: null, children: /* @__PURE__ */ a.jsxs(
     "div",
     {
       id: "wrapper",
-      className: S(o, g, { "has-footer": l }),
+      className: S(o, b, { "has-footer": l }),
       children: [
         /* @__PURE__ */ a.jsx(Da, { showNavigation: f }),
         /* @__PURE__ */ a.jsxs("section", { id: "content-wrapper", children: [
-          y && /* @__PURE__ */ a.jsx("div", { className: "additional-content prepended", children: y }),
+          _ && /* @__PURE__ */ a.jsx(
+            "div",
+            {
+              className: S("additional-content prepended", {
+                "large-modal": p === "large"
+              }),
+              children: _
+            }
+          ),
           K.createElement(d === "bold" ? Sa : "div", {
             id: "content",
-            children: v
+            children: y,
+            className: S({ "large-modal": p === "large" })
           })
         ] }),
-        _ && /* @__PURE__ */ a.jsx("div", { className: "additional-content appended", children: _ }),
+        g && /* @__PURE__ */ a.jsx("div", { className: "additional-content appended", children: g }),
         l && /* @__PURE__ */ a.jsx(Oa, {}),
         /* @__PURE__ */ a.jsx(tc, {})
       ]
@@ -8074,7 +8124,7 @@ const rc = () => {
     return $n[t] ? (t = $n[t], { id: t, text: `${Br.default}${t}` }) : null;
   }
 };
-const zl = ({
+const Zl = ({
   tags: t = [],
   color: e = "default",
   forceOneLine: n = !1,
@@ -8114,7 +8164,7 @@ const zl = ({
     }
   );
 };
-const Zl = ({
+const Wl = ({
   members: { data: t = [], total: e = t.length },
   hasNextPage: n = !1,
   loadNextPage: r = () => {
@@ -9428,7 +9478,7 @@ function Mc(t) {
   var e;
   return ((e = t == null ? void 0 : t.pages) == null ? void 0 : e.reduce((n, { results: r }) => [...n, ...r], [])) || [];
 }
-const Wl = ({
+const Hl = ({
   basePath: t,
   parentId: e,
   isMember: n,
@@ -9548,7 +9598,7 @@ const Wl = ({
       }
     )
   ] });
-}, Hl = {
+}, Vl = {
   next: "id_lt=67ef0342-6f6e-4807-beea-5a9184ec140c&limit=5",
   results: [
     {
@@ -10631,7 +10681,7 @@ function Gc({
   });
   return i;
 }
-const Vl = ({
+const Yl = ({
   basePath: t,
   parentId: e,
   activityId: n,
@@ -10737,7 +10787,7 @@ const Vl = ({
       }
     )
   ] });
-}, Yl = ({
+}, Kl = ({
   id: t,
   data: { jobTitle: e, name: n, organization: r, thumbnail: i }
 }) => ({
@@ -10790,7 +10840,7 @@ const Vl = ({
     contributors: ["community"]
   }
 ];
-const Rt = "notFoundError_", Kl = () => {
+const Rt = "notFoundError_", Gl = () => {
   const t = G(), e = [];
   return Yr.forEach((n, r) => {
     n.title = t.formatMessage({ id: `${Rt}post_${r + 1}` }), e.push("solutionArticle");
@@ -10825,96 +10875,97 @@ const Rt = "notFoundError_", Kl = () => {
 };
 export {
   Ge as ASSETS_BUCKET,
-  Wl as ActivitiesFeed,
-  Vl as ActivitySection,
+  Hl as ActivitiesFeed,
+  Yl as ActivitySection,
   Aa as AddPost,
-  gl as Banner,
-  _l as BannerSection,
-  Dl as Breadcrumbs,
+  vl as Banner,
+  xl as BannerSection,
+  Al as Breadcrumbs,
   ie as Button,
   yt as ButtonWrapper,
   Ji as CacheProvider,
   Ma as Card,
   Uo as CardBlock,
-  Fl as Carousel,
+  Ol as Carousel,
   la as CollapsibleSection,
   ec as Columns,
-  Ol as CommunityDetails,
-  ql as ContactFooter,
+  Dl as CommunityDetails,
+  Ul as ContactFooter,
   No as ContactForm,
   ha as Contributors,
   Xn as ConversationContext,
   tc as CookieBanner,
-  Rl as Directory,
+  Fl as Directory,
   oc as DiscussionConversation,
   Jn as DiscussionForm,
   dc as DiscussionLikes,
   nn as DiscussionPost,
   mc as DiscussionThread,
   Re as Divider,
-  vl as DownloadSection,
+  bl as DownloadSection,
   lt as EMAILS,
-  bl as EditSection,
+  yl as EditSection,
   yo as EmailHelperTextBox,
   tt as EmptyStateBox,
-  Al as Filters,
+  Il as Filters,
   ts as FlagsProvider,
   Oa as Footer,
   Qn as Form,
   et as FullWidthSection,
-  kl as GlobalProviders,
+  jl as GlobalProviders,
   Da as Header,
   as as HelperTextBox,
   Wn as HiddenFromScreenReaders,
-  jl as HideShowTextBox,
-  xl as HighlightSection,
+  Tl as HideShowTextBox,
+  wl as HighlightSection,
   Ae as HighlightedTextBox,
   pl as ImageContainer,
   ns as IntlProvider,
   Po as InviteForm,
-  Ml as InviteModal,
+  Rl as InviteModal,
   Ra as JoinButton,
-  Il as LanguageSwitcher,
+  Ll as LanguageSwitcher,
   xt as Link,
   en as LoadMore,
-  El as LoadingBlock,
+  Sl as LoadingBlock,
   Te as LoadingPlaceholder,
   fa as LoadingState,
   Fa as Logo,
-  yl as LogoSection,
+  _l as LogoSection,
   It as MarkdownText,
-  wl as MarketingBlock,
+  kl as MarketingBlock,
   Yn as Member,
-  Zl as MembersList,
+  Wl as MembersList,
   Sa as Modal,
   Vo as MoreMenu,
   fl as NUMBER_OF_USERS,
+  hl as NavigationDots,
   Go as NavigationMenu,
-  Kl as NotFoundError,
+  Gl as NotFoundError,
   Xt as Overlay,
   ms as PageHeading,
   ac as PageLayout,
-  Sl as PasswordRules,
+  Cl as PasswordRules,
   Lt as Pill,
-  Nl as ProfileImageChange,
+  Pl as ProfileImageChange,
   ze as ProfilePicture,
   gs as ProgressBar,
-  Cl as Rating,
+  $l as Rating,
   Wc as RepliesFeed,
   fc as ResponsesHeading,
   _t as ResponsiveImage,
-  hl as ReturnToNavButton,
+  gl as ReturnToNavButton,
   Mo as SearchForm,
-  Ll as ShareLinks,
-  Pl as SignupForm,
+  Bl as ShareLinks,
+  Ml as SignupForm,
   us as Span,
   Bt as StatusBanner,
-  Bl as Tabs,
-  zl as Tags,
-  Tl as TestimonialBlock,
-  $l as Toggle,
+  ql as Tabs,
+  Zl as Tags,
+  El as TestimonialBlock,
+  Nl as Toggle,
   Vi as Tooltip,
-  Ul as TopLevelPage,
+  zl as TopLevelPage,
   Oe as UserContext,
   rs as UserProvider,
   be as VisuallyHidden,
@@ -10922,10 +10973,10 @@ export {
   Fi as generateCssIcon,
   pa as getMember,
   Yt as headerData,
-  Yl as mapGetStreamData,
+  Kl as mapGetStreamData,
   zi as pageReady,
   ml as passwordValidator,
-  Hl as repliesFeedMock,
+  Vl as repliesFeedMock,
   $i as useCurrentPath,
   gt as useEffectAfterMount,
   bt as useElementWidth,

package/layout/page-layout/page-layout.d.ts

@@ -19,6 +19,8 @@ interface Props {
         variant?: 'default' | 'inverted' | 'alt-1' | 'alt-2';
         /** The size of the circle on the `bold` background */
         circle?: 'default' | 'small';
+        /** The size of the white modal */
+        modal?: 'default' | 'large';
     };
     /** Optionally hide the header navigation and the footer, for pages where we need to focus the user's attention, like onboarding */
     forceShow?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apolitical/component-library",
-  "version": "3.0.0",
+  "version": "3.0.1-ac.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {