cfpb · anselmbradford · Aug 9, 2024 · Aug 9, 2024
diff --git a/docs/admin/index.html b/docs/admin/index.html
@@ -5,14 +5,14 @@
     <script>
       (function (w, d, s, l, i) {
         w[l] = w[l] || [];
-        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
         var f = d.getElementsByTagName(s)[0],
           j = d.createElement(s),
-          dl = l != "dataLayer" ? "&l=" + l : "";
+          dl = l != 'dataLayer' ? '&l=' + l : '';
         j.async = true;
-        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
         f.parentNode.insertBefore(j, f);
-      })(window, document, "script", "dataLayer", "GTM-WH4L8LB");
+      })(window, document, 'script', 'dataLayer', 'GTM-WH4L8LB');
     </script>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -27,6 +27,7 @@
   <body>
     <!-- Include the script that builds the page and powers Decap CMS -->
     <script src="../dist/admin/decap-cms.js"></script>
+
     <!-- Google Tag Manager code -->
     <iframe
       src="https://www.googletagmanager.com/ns.html?id=GTM-WH4L8LB"

diff --git a/docs/assets/js/admin/main-preview.js b/docs/assets/js/admin/main-preview.js
@@ -0,0 +1,15 @@
+// Script for the main preview pane in the admin.
+
+import {
+  Expandable,
+  ExpandableGroup,
+  Summary,
+  SummaryMinimal,
+  Multiselect,
+} from '@cfpb/cfpb-design-system';
+
+Summary.init();
+SummaryMinimal.init();
+ExpandableGroup.init();
+Expandable.init();
+Multiselect.init();
diff --git a/docs/assets/js/admin/widgets/pagePreviewTemplate.js b/docs/assets/js/admin/widgets/pagePreviewTemplate.js
@@ -5,7 +5,7 @@ import {
   TOGGLE_ATTRIBUTE,
   toggleDetails,
 } from '../../../../assets/js/toggle-details.js';
-import Tabs from '../../../../assets/js/Tabs.js';
+import Tabs from '../../../../assets/js/tabs.js';
 import { encode } from 'html-entities';
 import slugify from 'slugify';
 import template from '../../../../_includes/variation-content.html';
@@ -23,6 +23,11 @@ export default class Preview extends Component {
   constructor(props) {
     super(props);
 
+    const { document } = this.props;
+    const script = document.createElement('script');
+    script.src = '../dist/admin/main-preview.js';
+    document.head.appendChild(script);
+
     liquidEngine.registerFilter('slugify', (initial) =>
       slugify(initial || '', { lower: true }),
     );

diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
@@ -11,7 +11,7 @@ import {
   MaxHeightTransition,
   MoveTransition,
 } from '@cfpb/cfpb-design-system';
-import Tabs from './Tabs.js';
+import Tabs from './tabs.js';
 import redirectBanner from './redirect-banner.js';
 import sidebar from './sidebar.js';
 export * as MainStyles from '../css/main.scss';

diff --git a/docs/assets/js/Tabs.js → docs/assets/js/tabs.js b/docs/assets/js/Tabs.js → docs/assets/js/tabs.js
diff --git a/esbuild/docs/scripts.js b/esbuild/docs/scripts.js
@@ -5,6 +5,7 @@ const jsPaths = [
   './docs/assets/js/interstitial.js',
   './docs/assets/js/main.js',
   './docs/assets/js/admin/decap-cms.js',
+  './docs/assets/js/admin/main-preview.js',
   './docs/assets/js/search.js',
 ];
 

diff --git a/packages/cfpb-design-system/dist/abstracts/index.js b/packages/cfpb-design-system/dist/abstracts/index.js
diff --git a/packages/cfpb-design-system/dist/abstracts/index.js.map b/packages/cfpb-design-system/dist/abstracts/index.js.map
diff --git a/packages/cfpb-design-system/dist/base/index.css b/packages/cfpb-design-system/dist/base/index.css
diff --git a/packages/cfpb-design-system/dist/base/index.css.map b/packages/cfpb-design-system/dist/base/index.css.map
diff --git a/packages/cfpb-design-system/dist/base/index.js b/packages/cfpb-design-system/dist/base/index.js
diff --git a/packages/cfpb-design-system/dist/base/index.js.map b/packages/cfpb-design-system/dist/base/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-buttons/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-buttons/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-buttons/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-buttons/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js
diff --git a/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-expandables/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.js b/packages/cfpb-design-system/dist/components/cfpb-forms/index.js
diff --git a/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-forms/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-layout/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-layout/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-layout/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-layout/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-notifications/index.css b/packages/cfpb-design-system/dist/components/cfpb-notifications/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-notifications/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-notifications/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-notifications/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-notifications/index.js.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-typography/index.css b/packages/cfpb-design-system/dist/components/cfpb-typography/index.css
diff --git a/packages/cfpb-design-system/dist/components/cfpb-typography/index.css.map b/packages/cfpb-design-system/dist/components/cfpb-typography/index.css.map
diff --git a/packages/cfpb-design-system/dist/components/cfpb-typography/index.js.map b/packages/cfpb-design-system/dist/components/cfpb-typography/index.js.map
diff --git a/packages/cfpb-design-system/dist/index.css b/packages/cfpb-design-system/dist/index.css