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/decap.scss

@@ -0,0 +1,42 @@
+.o-editor {
+  position: fixed;
+  bottom: 60px;
+  right: 30px;
+  z-index: 100;
+
+  &#toggle-details {
+    bottom: 105px;
+  }
+
+  .a-btn {
+    border-radius: 8px;
+    box-shadow: 1px 1px 3px #999;
+    display: inline-block;
+  }
+
+  .a-btn__text {
+    display: inline;
+  }
+
+  .a-btn__icon {
+    padding-left: 0.6875em;
+    border-left: 1px solid #80b9e7;
+    margin-left: 0.4375em;
+  }
+
+  // Hide the admin buttons when printing
+  @include respond-to-print {
+    display: none;
+  }
+}
+
+// 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/netlify.scss

@@ -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/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: ""
 ---