Lint files

docs/admin/src/widgets/genericPreviewTemplate.js

@@ -7,7 +7,7 @@ import template from '../../../_includes/generic-content.html';
 export default class Preview extends Component {
   componentDidMount() {
     liquidEngine.registerFilter('markdownify', (initial) =>
-      marked(initial || '')
+      marked(initial || ''),
     );
   }
 

docs/admin/src/widgets/navigationPreviewTemplate.js

@@ -9,10 +9,10 @@ export default class Preview extends Component {
     liquidEngine.registerFilter('size', (initial) => initial.length || 1);
     liquidEngine.registerFilter(
       'relative_url',
-      (initial) => `/design-system/${initial}`
+      (initial) => `/design-system/${initial}`,
     );
     liquidEngine.registerFilter('slugify', (initial) =>
-      slugify(initial || '', { lower: true })
+      slugify(initial || '', { lower: true }),
     );
   }
 

docs/admin/src/widgets/pagePreviewTemplate.js

@@ -15,23 +15,23 @@ import template from '../../../_includes/variation-content.html';
 // replace instances of {% include icons/XXXXX.svg %} with the inlined SVG
 const templateWithIcons = template.replace(
   /{%\s+include\s+\/?icons\/([\w-]+)\.svg\s+%}/g,
-  (match, icon) => import(`../../../_includes/icons/${icon}.svg`)
+  (match, icon) => import(`../../../_includes/icons/${icon}.svg`),
 );
 
 export default class Preview extends Component {
   constructor(props) {
     super(props);
 
     liquidEngine.registerFilter('slugify', (initial) =>
-      slugify(initial || '', { lower: true })
+      slugify(initial || '', { lower: true }),
     );
     liquidEngine.registerFilter('xml_escape', (initial) => encode(initial));
     liquidEngine.registerFilter('markdownify', (initial) =>
-      marked(initial || '')
+      marked(initial || ''),
     );
     liquidEngine.registerFilter(
       'strip',
-      (initial) => initial && initial.trim()
+      (initial) => initial && initial.trim(),
     );
 
     this.containerRef = React.createRef();
@@ -51,7 +51,7 @@ export default class Preview extends Component {
   componentDidUpdate(props) {
     // Tabs show under the show/hide details button on a pattern.
     const tabsContainerDom = props.document.querySelectorAll(
-      `.${Tabs.BASE_CLASS}`
+      `.${Tabs.BASE_CLASS}`,
     );
     if (tabsContainerDom.length > 0) {
       let tabsInst;

docs/assets/css/skip-nav.less

@@ -20,7 +20,9 @@
     width: 1px;
     overflow: hidden;
     background: transparent;
-    transition: transform 1s ease, background 0.5s linear;
+    transition:
+      transform 1s ease,
+      background 0.5s linear;
     z-index: 11;
 
     &:focus {
@@ -35,7 +37,9 @@
       width: auto;
       overflow: visible;
       outline: 0;
-      transition: transform 0.1s ease, background 0.2s linear;
+      transition:
+        transform 0.1s ease,
+        background 0.2s linear;
     }
 
     &__flush-left:focus {

docs/assets/js/Tabs.js

@@ -21,7 +21,7 @@ function Tabs(dom) {
   function changeTab(index) {
     // Remove classes from prior selected tab and panel.
     _tabsItemsDom[_selectedTabIndex].classList.remove(
-      `${BASE_CLASS}_list-item-selected`
+      `${BASE_CLASS}_list-item-selected`,
     );
     _tabsPanelsDom[_selectedTabIndex].classList.add('u-hidden');
 
@@ -30,7 +30,7 @@ function Tabs(dom) {
 
     // Add classes for the new selected tab and panel.
     _tabsItemsDom[_selectedTabIndex].classList.add(
-      `${BASE_CLASS}_list-item-selected`
+      `${BASE_CLASS}_list-item-selected`,
     );
     _tabsPanelsDom[_selectedTabIndex].classList.remove('u-hidden');
 

docs/assets/js/interstitial.js

@@ -18,7 +18,7 @@ if (page && window.PAGES_ALLOWED[page]) {
   if (localStorage.getItem('cms-directions-last-seen')) {
     const now = new Date();
     const lastSeen = Date.parse(
-      localStorage.getItem('cms-directions-last-seen')
+      localStorage.getItem('cms-directions-last-seen'),
     );
     const daysSinceDirectionsSeen = (now - lastSeen) / 1000 / 60 / 60 / 24;
     if (daysSinceDirectionsSeen <= 14) {

docs/assets/js/redirect-banner.js

@@ -26,7 +26,7 @@ function getSource(match) {
 function displayBanner(sourceName, sourceUrl) {
   const banner = document.querySelector('#redirect-banner');
   const sourceNames = banner.querySelectorAll(
-    'span[data-redirect=source-name]'
+    'span[data-redirect=source-name]',
   );
   const links = banner.querySelectorAll('a[data-redirect=archive-website]');
 

docs/assets/js/search.js

@@ -30,7 +30,7 @@ function displaySearchResults(elm, results, store) {
     // Show some preview text under each search results item.
     let previewText = '';
     const searchMatchWordFragment = Object.keys(
-      results[i].matchData.metadata
+      results[i].matchData.metadata,
     )[0];
     const searchMatchFields =
       results[i].matchData.metadata[searchMatchWordFragment];

docs/assets/js/toggle-details.js

@@ -61,7 +61,7 @@ function toggleAllDetails(toggleBtn) {
     toggleDetails(
       buttonElm,
       window.document,
-      isShowingAllDetails ? STATE_HIDE : STATE_SHOW
+      isShowingAllDetails ? STATE_HIDE : STATE_SHOW,
     );
   }
 

docs/pages/paragraphs.md

@@ -13,7 +13,7 @@ variation_groups:
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 
           aliquip ex ea commodo consequat.</p>
-        variation_description: ""
+        variation_description: ''
         variation_name: Body text
         variation_implementation: >-
           #### Vertical spacing
@@ -53,7 +53,7 @@ variation_groups:
           quis nostrud exercitation
 
           ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        variation_description: ""
+        variation_description: ''
         variation_name: Lead paragraph
         variation_specs: >-
           * Also referred to as a subheading
@@ -66,7 +66,7 @@ variation_groups:
               Lorem ipsum dolor sit amet
           </p>
         variation_name: Microcopy
-        variation_implementation: ""
+        variation_implementation: ''
         variation_specs: |-
           * Good for highlighting small pieces of text, typically legal copy.
           * Avenir Next Regular
@@ -79,7 +79,7 @@ variation_groups:
         variation_specs: |-
           * Avenir Next Regular
           * 11pt / 16pt
-        variation_code_snippet: ""
+        variation_code_snippet: ''
         variation_description: >-
           <p style="font-size: 11pt; font-weight: 400; line-height:16pt">Avenir
           Next Regular, 11pt / 16pt. Lorem ipsum dolor sit amet, ut labore et
@@ -93,9 +93,9 @@ variation_groups:
         variation_specs: |-
           * Avenir Next Regular
           * 16pt / 20pt
-        variation_code_snippet: ""
+        variation_code_snippet: ''
         variation_description: >-
-          
+
 
           <p style="font-size: 16pt; font-weight: 400; line-height:20pt">Avenir Next Regular, 16pt / 20pt. Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
@@ -109,12 +109,12 @@ title: Paragraphs
 description: Paragraph text should provide an efficient and pleasant experience
   on every viewport size. Readable text makes good use of alignment, spacing,
   line length and height, and contrast.
-use_cases: ""
-behavior: ""
-accessibility: ""
+use_cases: ''
+behavior: ''
+accessibility: ''
 related_items: "* [Typography
   variables](https://cfpb.github.io/design-system/development/variables#typogra\
   phy)"
 last_updated: 2020-01-06T20:28:04.952Z
-research: ""
+research: ''
 ---

packages/cfpb-atomic-component/src/utilities/behavior/FlyoutMenu.js

@@ -282,7 +282,7 @@ function FlyoutMenu(element, autoHideContent = true) {
     if (hasTransition) {
       _transition.addEventListener(
         BaseTransition.END_EVENT,
-        _collapseEndBinded
+        _collapseEndBinded,
       );
     }
 
@@ -306,7 +306,7 @@ function FlyoutMenu(element, autoHideContent = true) {
     if (_transition) {
       _transition.removeEventListener(
         BaseTransition.END_EVENT,
-        _expandEndBinded
+        _expandEndBinded,
       );
     }
     this.dispatchEvent('expandend', { target: this, type: 'expandend' });
@@ -327,7 +327,7 @@ function FlyoutMenu(element, autoHideContent = true) {
     if (_transition) {
       _transition.removeEventListener(
         BaseTransition.END_EVENT,
-        _collapseEndBinded
+        _collapseEndBinded,
       );
     }
 

packages/cfpb-atomic-component/src/utilities/media-helpers.js

@@ -9,7 +9,7 @@
  */
 function isMobileUserAgent() {
   const regex = new RegExp(
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i,
   );
   if (regex.test(navigator.userAgent)) {
     return true;

packages/cfpb-atomic-component/src/utilities/transition/BaseTransition.js

@@ -30,7 +30,7 @@ function BaseTransition(element, classes, child) {
   ) {
     throw new Error(
       'Transitions require CSS_PROPERTY and BASE_CLASS ' +
-        'to be passed into BaseTransition.'
+        'to be passed into BaseTransition.',
     );
   }
 
@@ -209,7 +209,7 @@ function BaseTransition(element, classes, child) {
     setElement(_dom);
     if (!initialClass) {
       throw new Error(
-        'Transition needs to be passed an initial CSS class on initialization!'
+        'Transition needs to be passed an initial CSS class on initialization!',
       );
     }
     _dom.classList.add(initialClass);

packages/cfpb-core/src/breakpoint-state.js

@@ -57,7 +57,7 @@ function getBreakpointState(width) {
   for (rangeKey in varsBreakpoints) {
     breakpointState[rangeKey] = _inBreakpointRange(
       varsBreakpoints[rangeKey],
-      width
+      width,
     );
   }
 

packages/cfpb-expandables/src/Expandable.js

@@ -66,7 +66,7 @@ function Expandable(element) {
     _flyout.setTransition(
       _transition,
       _transition.maxHeightZero,
-      _transition.maxHeightDefault
+      _transition.maxHeightDefault,
     );
 
     _flyout.init(isExpanded);

packages/cfpb-expandables/src/ExpandableGroup.js

@@ -72,7 +72,7 @@ ExpandableGroup.init = (scope) => {
     const expandables = instantiateAll(
       `.${Expandable.BASE_CLASS}`,
       Expandable,
-      expandableGroupDom
+      expandableGroupDom,
     );
     const expandableGroup = new ExpandableGroup(expandableGroupDom);
     expandableGroup.init(expandables);

packages/cfpb-expandables/src/Summary.js

@@ -64,12 +64,12 @@ function Summary(element) {
     _transition.init(
       _suspended
         ? MaxHeightTransition.CLASSES.MH_SUMMARY
-        : MaxHeightTransition.CLASSES.MH_DEFAULT
+        : MaxHeightTransition.CLASSES.MH_DEFAULT,
     );
     _flyout.setTransition(
       _transition,
       _transition.maxHeightSummary,
-      _transition.maxHeightDefault
+      _transition.maxHeightDefault,
     );
     _flyout.addEventListener('triggerclick', _triggerClickHandler);
     _flyout.init();

packages/cfpb-expandables/src/SummaryMinimal.js

@@ -58,7 +58,7 @@ function SummaryMinimal(element) {
     _flyout.setTransition(
       _transition,
       _transition.maxHeightSummary,
-      _transition.maxHeightDefault
+      _transition.maxHeightDefault,
     );
     _flyout.init();
 

packages/cfpb-forms/src/molecules/form-fields.less

@@ -161,14 +161,16 @@
       &:focus:checked + .a-label::before,
       &.focus:checked + .a-label::before {
         border-color: @input-border__focused;
-        box-shadow: 0 0 0 1px @input-border__focused,
+        box-shadow:
+          0 0 0 1px @input-border__focused,
           inset 0 0 0 2px @form-field-inset;
       }
 
       &:hover:checked + .a-label::before,
       &.hover:checked + .a-label::before {
         border-color: @input-border__hover;
-        box-shadow: 0 0 0 1px @input-border__hover,
+        box-shadow:
+          0 0 0 1px @input-border__hover,
           inset 0 0 0 2px @form-field-inset;
       }
     }

packages/cfpb-forms/src/organisms/Multiselect.js

@@ -223,7 +223,7 @@ function Multiselect(element) {
     if (event.key === KEY_SPACE || event.key === KEY_RETURN) {
       const label = event.target.querySelector('label');
       const checkbox = _optionsDom.querySelector(
-        '#' + label.getAttribute('for')
+        '#' + label.getAttribute('for'),
       );
       checkbox.click();
     }
@@ -264,7 +264,7 @@ function Multiselect(element) {
     selectionsItemLabelDom.addEventListener('click', _selectionClickHandler);
     selectionsItemLabelDom.addEventListener(
       'keydown',
-      _selectionKeyDownHandler
+      _selectionKeyDownHandler,
     );
   }
 

packages/cfpb-icons/src/icons-svg-inline.js

@@ -44,7 +44,7 @@ module.exports = {
       // eslint-disable-next-line no-sync
       let svg = less.fs.readFileSync(
         path.join(__dirname, `./icons/${svgName.value}.svg`),
-        'utf8'
+        'utf8',
       );
 
       /* Replace the cf-icon-svg class (used only in the embedded markup)

packages/cfpb-layout/src/molecules/card.less

@@ -158,7 +158,9 @@
     }
 
     &:hover {
-      box-shadow: 0 8px 0 0 inset @green, 2px 0 0 0 inset @gray-20,
+      box-shadow:
+        0 8px 0 0 inset @green,
+        2px 0 0 0 inset @gray-20,
         -2px 0 0 0 inset @gray-20;
     }
 
@@ -209,7 +211,9 @@
 
     &:hover {
       > a {
-        box-shadow: 0 2px 0 0 inset @gray-20, 2px 0 0 0 inset @gray-20,
+        box-shadow:
+          0 2px 0 0 inset @gray-20,
+          2px 0 0 0 inset @gray-20,
           -2px 0 0 0 inset @gray-20;
       }
 
@@ -267,7 +271,9 @@
 
     &:hover {
       .m-card_inner-wrapper {
-        box-shadow: 0 2px 0 0 inset @gray-20, 2px 0 0 0 inset @gray-20,
+        box-shadow:
+          0 2px 0 0 inset @gray-20,
+          2px 0 0 0 inset @gray-20,
           -2px 0 0 0 inset @gray-20;
       }
 
@@ -299,7 +305,9 @@
 
     &:hover {
       > a {
-        box-shadow: 0 2px 0 0 inset @green-40, 2px 0 0 0 inset @green-40,
+        box-shadow:
+          0 2px 0 0 inset @green-40,
+          2px 0 0 0 inset @green-40,
           -2px 0 0 0 inset @green-40;
       }