Migrate netlify-cms to decap-cms

.github/workflows/lighthouse.yml

@@ -47,7 +47,7 @@ jobs:
       # Build the documentation site.
       # This is needed so we can determine the list of URLs to test.
       - name: Build documentation site
-        run: yarn build-netlify
+        run: yarn build-decap
 
       # Run Lighthouse CI
       - name: Run Lighthouse CI

.sauce/config.yml

@@ -26,7 +26,7 @@ suites:
       testingType: e2e
       specPattern:
         - 'test/cypress/e2e/**/*.cy.js'
-      # Increase the VM's resolution for Netlify CMS tests that require a wider viewport.
+      # Increase the VM's resolution for Decap CMS tests that require a wider viewport.
       screenResolution: '1920x1200'
   - name: cypress - Windows 11 - edge
     browser: 'microsoftedge'
@@ -38,8 +38,8 @@ suites:
         - 'test/cypress/e2e/**/*.cy.js'
       screenResolution: '1920x1200'
       exclude:
-        # Netlify CMS is only tested with Chrome
-        - 'test/cypress/e2e/docs/netlify-cms.cy.js'
+        # Decap CMS is only tested with Chrome
+        - 'test/cypress/e2e/docs/decap-cms.cy.js'
   - name: cypress - Windows 10 - firefox
     browser: 'firefox'
     browserVersion: '123'
@@ -50,6 +50,6 @@ suites:
         - 'test/cypress/e2e/**/*.cy.js'
       screenResolution: '1920x1200'
       exclude:
-        # Netlify CMS is only tested with Chrome
-        - 'test/cypress/e2e/docs/netlify-cms.cy.js'
+        # Decap CMS is only tested with Chrome
+        - 'test/cypress/e2e/docs/decap-cms.cy.js'
 rootDir: .

CONTRIBUTING.md

@@ -55,11 +55,11 @@ and file a pull request by clicking the link to compare changes across forks.
 ### Updating Documentation
 
 The Design System's website lives in this repository's `docs/` directory and is
-powered by Netlify CMS and Jekyll.
+powered by Decap CMS and Jekyll.
 To edit any page of the website, click the edit button at the bottom right of
 the page.
 You'll need to be added as a contributor to this repository in order to
-authenticate with Netlify CMS.
+authenticate with Decap CMS.
 
 ### Testing components locally
 

README.md

@@ -57,12 +57,12 @@ Expandable.init(document.querySelector('#container'));
 
 The Design System's website is available at https://cfpb.github.io/design-system/.
 It lives in this repository's `docs/` directory
-and is powered by [Netlify CMS](https://www.netlifycms.org/)
+and is powered by [Decap CMS](https://decapcms.org/)
 and [Jekyll](https://jekyllrb.com/).
 To edit any page of the website,
 click the edit button at the bottom right of the page.
 You'll need to be added as a contributor to this repository in order to
-authenticate with Netlify CMS.
+authenticate with Decap CMS.
 
 ### Running the documentation website locally
 
@@ -89,8 +89,7 @@ yarn start
 ```
 
 Visit http://localhost:4000/design-system/ to view the site.
-Editing a page locally will change your local files, using
-[an experimental Netlify CMS feature](https://www.netlifycms.org/docs/beta-features/#working-with-a-local-git-repository).
+Editing a page locally will change your local files.
 
 To run accessibility tests against your local files:
 

docs/_layouts/homepage.html

@@ -10,7 +10,7 @@
       href="
             {{- '/admin/#/collections/special-pages/entries/home' | relative_url
             -}}"
-      title="Edit this page in Netlify CMS"
+      title="Edit this page in Decap CMS"
     >
       <span class="a-btn__text">Edit page</span>
       <span class="a-btn__icon">{% include icons/edit.svg %}</span>

docs/_layouts/variation.html

@@ -21,7 +21,7 @@
       <a
         class="a-btn"
         href="/design-system/updating-this-website?page={{ page.title | url_encode }}"
-        title="Edit this page in Netlify CMS"
+        title="Edit this page in Decap CMS"
       >
         <span class="a-btn__text">Edit page</span>
         <span class="a-btn__icon">{% include icons/edit.svg %}</span>

docs/admin/config.yml

@@ -10,11 +10,11 @@ backend:
     delete: Delete "{{slug}}" page
 
 # When running locally, try to use a local proxy server instead of GitHub, if
-# one is running (yarn serve-netlify, which uses netlify-cms-proxy-server).
+# one is running (yarn serve-decap, which uses decap-server).
 local_backend: true
 
 site_url: https://cfpb.github.io/design-system
-logo_url: https://cfpb.github.io/design-system/assets/img/cfpb-netlify-logo.png
+logo_url: https://cfpb.github.io/design-system/assets/img/cfpb-cms-logo.png
 publish_mode: editorial_workflow
 media_folder: docs/images/uploads
 public_folder: /design-system/images/uploads

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" />
@@ -25,8 +25,8 @@
     </style>
   </head>
   <body>
-    <!-- Include the script that builds the page and powers Netlify CMS -->
-    <script src="../dist/admin/netlify-cms.js"></script>
+    <!-- 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"

docs/assets/css/netlify.scss → docs/assets/css/decap.scss

@@ -32,7 +32,13 @@
   }
 }
 
-// Don't show the toggle code button in the Netlify CMS preview pane
+// Don't show the toggle code button in the Decap CMS preview pane
 .frame-content #toggle-code {
   display: none;
 }
+
+// By default the preview pane doesn't have any padding.
+.frame-content {
+  padding-left: 20px;
+  padding-right: 20px;
+}

docs/assets/css/main.scss

@@ -17,7 +17,7 @@
 @use 'main-content' as *;
 @use 'code' as *;
 @use 'grid-demo' as *;
-@use 'netlify' as *;
+@use 'decap' as *;
 @use 'tabs' as *;
 @use 'toggle-code-button' as *;
 @use 'variation' as *;

docs/assets/js/admin/netlify-cms.js → docs/assets/js/admin/decap-cms.js

@@ -1,10 +1,12 @@
-import CMS from 'netlify-cms';
+import CMS from 'decap-cms-app';
 import { StringTrimmedControl } from './widgets/StringTrimmed.js';
 import { StringWithInstructionsControl } from './widgets/StringWithInstructions.js';
 import genericPreviewTemplate from './widgets/genericPreviewTemplate.js';
 import navigationPreviewTemplate from './widgets/navigationPreviewTemplate.js';
 import pagePreviewTemplate from './widgets/pagePreviewTemplate.js';
 
+CMS.init();
+
 CMS.registerWidget('string-trimmed', StringTrimmedControl);
 CMS.registerWidget('string-with-instructions', StringWithInstructionsControl);
 

docs/assets/js/admin/widgets/pagePreviewTemplate.js

@@ -46,19 +46,16 @@ export default class Preview extends Component {
     if (target.matches(`[${TOGGLE_ATTRIBUTE}]`)) {
       event.preventDefault();
       toggleDetails(target, this.containerRef.current);
-    }
-  }
 
-  componentDidUpdate(props) {
-    // Tabs show under the show/hide details button on a pattern.
-    const tabsContainerDom = props.document.querySelectorAll(
-      `.${Tabs.BASE_CLASS}`,
-    );
-    if (tabsContainerDom.length > 0) {
-      let tabsInst;
-      for (let i = 0, len = tabsContainerDom.length; i < len; i++) {
-        tabsInst = new Tabs(tabsContainerDom[i]);
-        tabsInst.init();
+      const tabsContainerDom = this.props.document.querySelectorAll(
+        `.${Tabs.BASE_CLASS}`,
+      );
+      if (tabsContainerDom.length > 0) {
+        let tabsInst;
+        for (let i = 0, len = tabsContainerDom.length; i < len; i++) {
+          tabsInst = new Tabs(tabsContainerDom[i]);
+          tabsInst.init();
+        }
       }
     }
   }

docs/pages/buttons.md

@@ -3,10 +3,11 @@ title: Buttons
 layout: variation
 section: components
 status: Released
-description: Buttons signal actions. They should be used sparingly; each
-  additional button on a page reduces the visual prominence of a call to action.
-  In contrast, [links](https://cfpb.github.io/design-system/components/links)
-  should lead users to another page or further information.
+description: Buttons are UI elements that signal actions. They should be used
+  sparingly; each additional button on a page reduces the visual prominence of a
+  call to action. In contrast,
+  [links](https://cfpb.github.io/design-system/components/links) should lead
+  users to another page or further information.
 variation_groups:
   - variation_group_name: Types
     variation_group_description: ''

docs/special-pages/home.md

@@ -16,7 +16,7 @@ description: >-
   <div class="content-25 content-last" markdown="1">
 
 
-  ![Homepage image](/design-system/images/uploads/cfpb_ds_home.png) 
+  ![Homepage image](/design-system/images/uploads/cfpb_ds_home.png)
 
 
   </div>
@@ -25,7 +25,7 @@ description: >-
   ## Getting started
 
 
-  Our [general principles](https://cfpb.github.io/design-system/general-principles) form the strategic underpinnings for the CFPB’s design and development standards. Our [accessibility principles](https://cfpb.github.io/design-system/guidelines/accessibility-principles) lay the foundation for ensuring that our web content is available for all users. 
+  Our [general principles](https://cfpb.github.io/design-system/general-principles) form the strategic underpinnings for the CFPB’s design and development standards. Our [accessibility principles](https://cfpb.github.io/design-system/guidelines/accessibility-principles) lay the foundation for ensuring that our web content is available for all users.
 
 
   <br>
@@ -39,7 +39,7 @@ description: >-
 
   ### Foundation
 
-  This section includes our visual identity standards, such as color, grid, and typography. It forms the foundation for the CFPB’s website and external-facing materials. 
+  This section includes our visual identity standards, such as color, grid, and typography. It forms the foundation for the CFPB’s website and external-facing materials.
 
   <p><a href="https://cfpb.github.io/design-system/foundation/">Browse foundation</a></p></div>
 
@@ -49,7 +49,7 @@ description: >-
 
   ### Components
 
-  Components contain the key building blocks of the design system that, when combined, can be used to create a website. Examples of components include buttons, text inputs, tables, and alerts. 
+  Components contain the key building blocks of the design system that, when combined, can be used to create a website. Examples of components include buttons, text inputs, tables, and alerts.
 
   <p><a href="https://cfpb.github.io/design-system/components/">Browse components</a></p>
 
@@ -61,7 +61,7 @@ description: >-
 
   ### Patterns
 
-  Patterns are combinations of components used in conjunction to achieve a goal. Interaction patterns are best practice design solutions to common user tasks. Layout patterns are used by designers to organize content into clear, accessible web pages. 
+  Patterns are combinations of components used in conjunction to achieve a goal. Interaction patterns are best practice design solutions to common user tasks. Layout patterns are used by designers to organize content into clear, accessible web pages.
 
   <p><a href="https://cfpb.github.io/design-system/patterns/">Browse patterns</a></p>
 
@@ -73,7 +73,7 @@ description: >-
 
   ### Pages
 
-  Find out more about the common page types that we use within our content management system, which are documented for easy reference. 
+  Find out more about the common page types that we use within our content management system, which are documented for easy reference.
 
   <p><a href="https://cfpb.github.io/design-system/pages/">Browse pages</a></p>
 
@@ -85,7 +85,7 @@ description: >-
 
   ### Development
 
-  The development section includes utilities, such as variables, helper classes, and mixins, and layout options, such as blocks. 
+  The development section includes utilities, such as variables, helper classes, and mixins, and layout options, such as blocks.
 
   <p><a href="https://cfpb.github.io/design-system/development/">Browse development</a></p>
 
@@ -97,7 +97,7 @@ description: >-
 
   ### Guidelines
 
-  This section includes guidelines for creating specific product experiences not covered in other sections. 
+  This section includes guidelines for creating specific product experiences not covered in other sections.
 
   <p><a href="https://cfpb.github.io/design-system/guidelines/">Browse guidelines</a></p>
 
@@ -134,7 +134,7 @@ description: >-
   ### Using source code
 
 
-  The Design System also includes the source code for the common components that power the design of [consumerfinance.gov](https://www.consumerfinance.gov). 
+  The Design System also includes the source code for the common components that power the design of [consumerfinance.gov](https://www.consumerfinance.gov).
 
   <p>
 
@@ -149,7 +149,7 @@ description: >-
   ## Contribute to the Design System
 
 
-  We strongly encourage you to participate in the growth and maintenance of the Design System. To make contribution easier, the Design System is built on a tool called Netlify CMS, which allows for editing of pages in a web browser, without needing to use git or other command-line tools. 
+  We strongly encourage you to participate in the growth and maintenance of the Design System. To make contribution easier, the Design System is built on a tool called Decap CMS, which allows for editing of pages in a web browser, without needing to use git or other command-line tools.
 
   <p><a href="https://cfpb.github.io/design-system/updating-this-website/">View instructions for contributing to the Design System</a></p>