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

@@ -25,8 +25,8 @@
     </style>
   </head>
   <body>
-    <!-- Include the script that builds the page and powers Netlify CMS -->
-    <script src="../dist/js/admin/netlify-cms.js"></script>
+    <!-- Include the script that builds the page and powers Decap CMS -->
+    <script src="../dist/js/admin/decap-cms.js"></script>
     <!-- Google Tag Manager code -->
     <iframe
       src="https://www.googletagmanager.com/ns.html?id=GTM-WH4L8LB"

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

@@ -30,7 +30,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.less

@@ -29,7 +29,7 @@
 @import (less) 'main-content.less';
 @import (less) 'code.less';
 @import (less) 'grid-demo.less';
-@import (less) 'netlify.less';
+@import (less) 'decap.less';
 @import (less) 'tabs.less';
 @import (less) 'toggle-code-button.less';
 @import (less) 'variation.less';

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,13 +3,14 @@ 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: ''
+    variation_group_description: ""
     variations:
       - variation_code_snippet: >-
           <button class="a-btn" title="Default state">Default state</button>
@@ -22,8 +23,7 @@ variation_groups:
 
 
           <button class="a-btn active" title="Active state">Active state</button>
-        variation_description:
-          Use a primary button for an action that goes to the next
+        variation_description: Use a primary button for an action that goes to the next
           step. Avoid using multiple primary buttons on a single page; there can
           be multiple secondary buttons per page.
         variation_implementation: >-
@@ -34,7 +34,7 @@ variation_groups:
 
 
           Apply the `a-btn` class to a link, button and submit input field to receive the atomic button styles. For more information, see [cf.gov refresh documentation on atomic styles](https://cfpb.github.io/cfgov-refresh/atomic-structure/).
-        variation_specs: ''
+        variation_specs: ""
         variation_name: Primary button
       - variation_code_snippet: >-
           <button class="a-btn a-btn--secondary" title="Default state">Default
@@ -50,7 +50,7 @@ variation_groups:
           <button class="a-btn a-btn--secondary active" title="Active state">Active state</button>
         variation_description: Use a secondary button for actions that happen on the current page.
         variation_name: Secondary button
-        variation_specs: ''
+        variation_specs: ""
       - variation_code_snippet: >-
           <button class="a-btn a-btn--disabled" title="Default state"
           disabled>Default state</button>
@@ -61,7 +61,7 @@ variation_groups:
 
           <button class="a-btn a-btn--disabled focus" title="Focused state" disabled>Focused state</button>
         variation_name: Disabled button
-        variation_specs: ''
+        variation_specs: ""
       - variation_code_snippet: >-
           <button class="a-btn a-btn--warning" title="Default state">Default
           state</button>
@@ -72,7 +72,7 @@ variation_groups:
 
           <button class="a-btn a-btn--warning focus" title="Focused state">Focused state</button>
         variation_name: Destructive button
-        variation_specs: ''
+        variation_specs: ""
       - variation_name: Destructive action
         variation_code_snippet: >-
           <div class="m-btn-group">
@@ -82,7 +82,7 @@ variation_groups:
         variation_description: When paired with a primary action, indicate the
           destructive action using a destructive action button link to the right
           of the primary button.
-        variation_specs: ''
+        variation_specs: ""
       - variation_is_deprecated: false
         variation_name: Full-width button (on x-small screens)
         variation_description: Reduce screen size to see this button in action.
@@ -108,8 +108,7 @@ variation_groups:
           </div>
       - variation_is_deprecated: false
         variation_name: Button with icon
-        variation_description:
-          An icon should appear after the text it represents. The
+        variation_description: An icon should appear after the text it represents. The
           only exception is the back button, in which the icon should appear
           before the button’s text. Each icon should be used exclusively and
           consistently for one action. Icons should never be underlined.
@@ -162,7 +161,7 @@ guidelines: >-
   * Use clear, succinct, and informative language.
 
   * Limit the copy length to 22 characters.
-behavior: ''
+behavior: ""
 restrictions:
   - restrictions_do: <button class="a-btn" title="Test button">Short label</button>
     restrictions_do_not: <button class="a-btn" title="Test button">This label is
@@ -184,10 +183,10 @@ restrictions:
           </span>
       </button>
 eyebrow: Components
-accessibility: ''
+accessibility: ""
 related_items: "* [Button
   variables](https://cfpb.github.io/design-system/development/variables#buttons\
   )"
 last_updated: 2020-01-28T15:55:47.394Z
-research: ''
+research: ""
 ---

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>