Donation Modal - made sure rich text string does get rendered as HTML (#12322)

* Donation Modal - made sure rich text string does get rendered as HTML

* replaced Bootstrap's 'text-center' with Tailwind's 'tw-text-center'

source/js/components/petition/donation-modal.jsx

@@ -102,15 +102,22 @@ class DonationModal extends Component {
         </button>
 
         <div className={classNames(`modal-body`, MODAL_BODY_CLASS)}>
-          <h3 className={classNames(`tw-h2-heading`, `text-center`)}>
+          <h3 className={classNames(`tw-h2-heading`, `tw-text-center`)}>
             {this.props.heading}
           </h3>
-          <p className={classNames(`tw-body-large`, `text-center`)}>
-            {this.props.bodyText}
-          </p>
+          <div
+            className={classNames(
+              `tw-rich-text-wrapper`,
+              `tw-body-large`,
+              `tw-text-center`
+            )}
+            dangerouslySetInnerHTML={{
+              __html: this.props.bodyText,
+            }}
+          />
         </div>
 
-        <div className="text-center">
+        <div className="tw-text-center">
           <a
             ref={(e) => (this.userElectedToDonateLink = e)}
             className="tw-btn-primary"
@@ -121,7 +128,7 @@ class DonationModal extends Component {
           </a>
         </div>
 
-        <div className="text-center">
+        <div className="tw-text-center">
           <button
             ref={(e) => (this.userElectedToShareLink = e)}
             className={SKIP_DONATE_BUTTON_CLASS}

tailwind-plugins/wagtail.js

@@ -0,0 +1,20 @@
+const plugin = require("tailwindcss/plugin");
+
+function shared(theme) {
+  const media = (breakpoint) => `@media (min-width: ${breakpoint})`;
+
+  return {
+    // apply this class to the parent element (e.g., div) of a rich text string generated by Wagtail
+    ".rich-text-wrapper": {
+      b: {
+        fontWeight: theme("fontWeight.bold"),
+      },
+    },
+  };
+}
+
+module.exports = [
+  plugin(function ({ addComponents, theme }) {
+    addComponents([shared(theme)]);
+  }),
+];

tailwind.config.js

@@ -7,6 +7,7 @@ const typePlugins = require("./tailwind-plugins/type");
 const glyphPlugins = require("./tailwind-plugins/glyph");
 const formControlPlugins = require("./tailwind-plugins/form-control");
 const siteNavPlugins = require("./tailwind-plugins/site-nav");
+const wagtailPlugins = require("./tailwind-plugins/wagtail");
 
 module.exports = {
   content: ["./source/js/**/*.{js,jsx}", "./network-api/networkapi/**/*.html"],
@@ -26,6 +27,7 @@ module.exports = {
     },
     "tw-nav-mobile-dropdown",
     "tw-nav-desktop-dropdown",
+    "tw-rich-text-wrapper",
   ],
   plugins: [
     plugin(function ({ addUtilities }) {
@@ -72,6 +74,7 @@ module.exports = {
     ...glyphPlugins,
     ...formControlPlugins,
     ...siteNavPlugins,
+    ...wagtailPlugins,
     require("@tailwindcss/forms")({ strategy: "class" }),
   ],
   theme: {