linting

package.json

@@ -24,7 +24,7 @@
     "build-storybook": "storybook build -c storybook -o storybook_compiled",
     "lint:js": "eslint --cache '**/*.{vue,js}' --report-unused-disable-directives --ignore-path .gitignore",
     "lint:style": "stylelint --cache '**/*.{vue,css,scss}' '!dist/**/*' --ignore-path .gitignore",
-    "lint:format": "prettier --check '**/?(.)*.{html,md,mdx,css,scss,js,ts,vue,json,yaml,yml}' '!dist/**/*' --ignore-path .gitignore",
+    "lint:format": "prettier --check '**/?(.)*.{html,md,mdx,css,scss,js,ts,vue,json,yaml,yml}' '!dist/**/*' --write --ignore-path .gitignore",
     "percy": "percy storybook http://localhost:6006",
     "percy:dry-run": "percy storybook http://localhost:6006 --dry-run"
   },

src/scss/_aspect-ratios.scss

@@ -98,5 +98,4 @@
   .aspect-ratio-square {
     @include aspect-ratio(1, 1);
   }
-
 }

src/scss/_components.scss

@@ -66,4 +66,4 @@
   @import 'components/MixinLayoutHelper';
   @import 'components/NavInternal';
   @import 'components/SearchResultCard';
-}
+}

src/scss/_grid.scss

@@ -81,4 +81,4 @@
       @apply -mt-29; // just a little more than -28 to get rid of the barely visible white line
     }
   }
-}
+}

src/scss/_polyfills.scss

@@ -22,4 +22,4 @@
   .object-scale-down {
     font-family: "object-fit: scale-down";/* stylelint-disable-line */
   }
-}
+}

src/scss/_typography.scss

@@ -269,15 +269,15 @@
   // use this in areas where text is overlaying an image
   // managed separately for the navigation since we can't @apply these classes there
 
-@layer utilities {
-  .text-contrast {
-    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-  }
+  @layer utilities {
+    .text-contrast {
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
+    }
 
-  .text-contrast-none {
-    text-shadow: none;
+    .text-contrast-none {
+      text-shadow: none;
+    }
   }
-}
 
   mark {
     @apply bg-alert-gold-light p-0.5 border border-alert-gold rounded;

src/scss/_vendors.scss

@@ -11,4 +11,4 @@
 @layer utilities {
   // vendor overrides
   @import 'vendors/fancybox_customizations';
-}
+}

src/scss/vendors/_fancybox_customizations.scss

@@ -13,4 +13,4 @@
   @screen lg {
     padding: 36px;
   }
-}
+}

storybook/customTheme.js

@@ -15,4 +15,3 @@ export default create({
   // brandUrl: 'https://example.com',
   brandImage: 'brand-jpl-logo.svg',
 })
-

storybook/preview.js

@@ -3,7 +3,7 @@ import customTheme from './customTheme.js'
 import '../dist/css/explorer-1.min.css'
 import '../dist/js/explorer-1.min.js'
 import './canvas.css'
-import { withGlobals } from "./withGlobals"
+import { withGlobals } from './withGlobals'
 
 // viewports that match our tailwind config
 const customViewports = {
@@ -54,21 +54,17 @@ const customViewports = {
 const preview = {
   globalTypes: {
     themesConfig: {
-      defaultValue: [
-        "ThemeLight",
-        "ThemeInternal",
-        "ThemeDark",
-      ],
-      method: 'css', 
+      defaultValue: ['ThemeLight', 'ThemeInternal', 'ThemeDark'],
+      method: 'css',
     },
     theme: {
       description: 'Global theme for components',
-      defaultValue: "ThemeLight",
+      defaultValue: 'ThemeLight',
       toolbar: {
         title: 'Theme',
         // https://storybook.js.org/docs/faq#what-icons-are-available-for-my-toolbar-or-my-addon
         icon: 'eye',
-        items: [ 
+        items: [
           { value: 'ThemeLight', icon: 'circlehollow', title: 'Light' },
           { value: 'ThemeDark', icon: 'circle', title: 'Dark' },
           { value: 'ThemeInternal', icon: 'collapse', title: 'Internal' },
@@ -77,9 +73,7 @@ const preview = {
       },
     },
   },
-  decorators: [
-    withGlobals
-  ],
+  decorators: [withGlobals],
   parameters: {
     controls: {
       matchers: {
@@ -105,7 +99,7 @@ const preview = {
     // sort stories in the sidebar
     options: {
       storySort: {
-        method: "alphabetical",
+        method: 'alphabetical',
         order: [
           'Introduction',
           'Roadmap',
@@ -158,21 +152,25 @@ const preview = {
             'Search',
             ['Overview'],
             'Mixins',
-            ['Overview', 'MixinAnimationCaret', 'MixinVideoBg', 'MixinCarousel'],
+            [
+              'Overview',
+              'MixinAnimationCaret',
+              'MixinVideoBg',
+              'MixinCarousel',
+            ],
             'Utilities',
-            ['Overview', '*']
+            ['Overview', '*'],
           ],
         ],
       },
     },
     backgrounds: {
-      default: "light",
+      default: 'light',
       grid: {
         disable: true,
       },
     },
   },
 }
 
-
 export default preview

storybook/stories/_docs/foundation/grid.docs.mdx

@@ -56,7 +56,6 @@ Some common component layouts:
 
 <Canvas className="sbdocs-preview-full-width" of={Stories.ComponentB} />
 
-
 ---
 
 <span id="mixed-bleed"></span>
@@ -107,7 +106,10 @@ These named lines are used to construct the following `col-start-` and `col-end-
 
 Note the usage of `.px-0` in addition to `.container` in the example below:
 
-<Canvas className="sbdocs-preview-full-width" of={Stories.MixedBleedGridLines} />
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.MixedBleedGridLines}
+/>
 
 <span id="example-usage-1"></span>
 

storybook/stories/_docs/foundation/grid.stories.js

@@ -25,20 +25,22 @@ const BaseGridTemplate = () => `<div class="max-w-screen-3xl mx-auto">
 </div>`
 
 export const BaseGrid = {
-  render: BaseGridTemplate.bind({})
+  render: BaseGridTemplate.bind({}),
 }
 
-const ComponentATemplate = () => `<div class="BaseGrid container mx-auto border border-jpl-red-light">
+const ComponentATemplate =
+  () => `<div class="BaseGrid container mx-auto border border-jpl-red-light">
   <div class="col-start-4 col-end-10 bg-black text-white px-4 py-10">
     Starts at col 4 and ends at the col 10 line.
   </div>
 </div>`
 
 export const ComponentA = {
-  render: ComponentATemplate.bind({})
+  render: ComponentATemplate.bind({}),
 }
 
-const ComponentBTemplate = () => `<div class="BaseGrid container mx-auto border border-jpl-red-light">
+const ComponentBTemplate =
+  () => `<div class="BaseGrid container mx-auto border border-jpl-red-light">
   <div class="col-start-2 col-end-8 bg-black text-white px-4 py-10">
     Primary content
   </div>
@@ -48,10 +50,11 @@ const ComponentBTemplate = () => `<div class="BaseGrid container mx-auto border
 </div>`
 
 export const ComponentB = {
-  render: ComponentBTemplate.bind({})
+  render: ComponentBTemplate.bind({}),
 }
 
-const MixedBleedGridLinesTemplate = () => `<div class="max-w-screen-3xl mx-auto bg-white">
+const MixedBleedGridLinesTemplate =
+  () => `<div class="max-w-screen-3xl mx-auto bg-white">
   <div class="BaseGrid container px-0 mx-auto bg-gray-light-mid mb-5">
     <div class="text-center text-white bg-gray-mid-dark py-4">1</div>
     <div class="text-center text-white bg-gray-mid-dark py-4">2</div>
@@ -96,7 +99,7 @@ const MixedBleedGridLinesTemplate = () => `<div class="max-w-screen-3xl mx-auto
 </div>`
 
 export const MixedBleedGridLines = {
-  render: MixedBleedGridLinesTemplate.bind({})
+  render: MixedBleedGridLinesTemplate.bind({}),
 }
 const MixedBleedTemplate = () => `<div class="MixedBleedGrid">
   <div class="col-start-indent-col-2 col-end-bleed text-white bg-black px-4 py-10">
@@ -105,7 +108,7 @@ const MixedBleedTemplate = () => `<div class="MixedBleedGrid">
 </div>`
 
 export const MixedBleed = {
-  render: MixedBleedTemplate.bind({})
+  render: MixedBleedTemplate.bind({}),
 }
 
 const MixedBleedComplexTemplate = () => `<div>
@@ -125,7 +128,7 @@ const MixedBleedComplexTemplate = () => `<div>
 </div>`
 
 export const MixedBleedComplex = {
-  render: MixedBleedComplexTemplate.bind({})
+  render: MixedBleedComplexTemplate.bind({}),
 }
 
 const PageLayoutTemplate = () => `<!-- first section -->
@@ -162,10 +165,11 @@ const PageLayoutTemplate = () => `<!-- first section -->
 </div>`
 
 export const PageLayout = {
-  render: PageLayoutTemplate.bind({})
+  render: PageLayoutTemplate.bind({}),
 }
 
-const FullPageExampleTemplate = () => `<div class="bg-black text-white py-5 mb-10">
+const FullPageExampleTemplate =
+  () => `<div class="bg-black text-white py-5 mb-10">
   <div class="max-w-screen-2xl mx-auto border border-white p-3">
     Top Hat
   </div>
@@ -247,6 +251,5 @@ const FullPageExampleTemplate = () => `<div class="bg-black text-white py-5 mb-1
 </div>`
 
 export const FullPageExample = {
-  render: FullPageExampleTemplate.bind({})
+  render: FullPageExampleTemplate.bind({}),
 }
-

storybook/stories/_docs/foundation/grid_layouthelpers.stories.js

@@ -2,15 +2,17 @@ export default {
   title: 'Foundation/Grid and Layout/Column Layout Helpers',
 }
 
-const BaseWidthTemplate = () => `<div class="BaseGrid container mx-auto border border-black py-4">
+const BaseWidthTemplate =
+  () => `<div class="BaseGrid container mx-auto border border-black py-4">
   <div class="indent-col-base border border-success-green p-4">
     <code>.indent-col-base</code>
   </div>
 </div>`
 
 export const BaseWidth = BaseWidthTemplate.bind()
 
-const ColTwoStartTemplate = () => `<div class="BaseGrid container mx-auto border border-black py-4">
+const ColTwoStartTemplate =
+  () => `<div class="BaseGrid container mx-auto border border-black py-4">
   <div class="indent-col-base indent-col-2 border border-success-green p-4">
     <code>.indent-col-base.indent-col-2</code>
   </div>
@@ -28,7 +30,8 @@ ColTwoStart.parameters = {
   },
 }
 
-const ColThreeStartTemplate = () => `<div class="BaseGrid container mx-auto border border-black py-4">
+const ColThreeStartTemplate =
+  () => `<div class="BaseGrid container mx-auto border border-black py-4">
   <div class="indent-col-base indent-col-3 border border-success-green p-4">
     <code>.indent-col-base.indent-col-3</code>
   </div>
@@ -39,7 +42,8 @@ export const ColThreeStart = {
   render: ColThreeStartTemplate.bind({}),
 }
 
-const ColFourStartTemplate = () => `<div class="BaseGrid container mx-auto border border-black py-4">
+const ColFourStartTemplate =
+  () => `<div class="BaseGrid container mx-auto border border-black py-4">
   <div class="indent-col-base indent-col-4 border border-success-green p-4">
     <code>.indent-col-base.indent-col-4</code>
   </div>
@@ -49,4 +53,3 @@ export const ColFourStart = {
   name: 'Start at col-4',
   render: ColFourStartTemplate.bind({}),
 }
-

storybook/stories/_docs/foundation/themes.stories.js

@@ -28,7 +28,7 @@ const InternalTemplate = () => `<div>
 </div>`
 
 export const Internal = {
-  render: InternalTemplate.bind({})
+  render: InternalTemplate.bind({}),
 }
 
 const AdaptiveTextTemplate = () => `<p class="ThemeLight p-4">
@@ -55,6 +55,5 @@ const AdaptiveTextTemplate = () => `<p class="ThemeLight p-4">
 </div>`
 
 export const AdaptiveText = {
-  render: AdaptiveTextTemplate.bind({})
+  render: AdaptiveTextTemplate.bind({}),
 }
-

storybook/stories/_docs/foundation/typography.stories.js

@@ -92,7 +92,7 @@ const FontsTemplate = () => `<div class="Fonts md:grid-cols-2 grid gap-2 mt-4">
 </div>`
 
 export const Fonts = {
-  render: FontsTemplate.bind({})
+  render: FontsTemplate.bind({}),
 }
 
 const TextColorTemplate = () => `<div>
@@ -127,7 +127,7 @@ const TextColorTemplate = () => `<div>
 </div>`
 
 export const TextColor = {
-  render: TextColorTemplate.bind({})
+  render: TextColorTemplate.bind({}),
 }
 
 const TextStylesTemplate = () => `<div>
@@ -160,7 +160,7 @@ const TextStylesTemplate = () => `<div>
 </div>`
 
 export const TextStyles = {
-  render: TextStylesTemplate.bind({})
+  render: TextStylesTemplate.bind({}),
 }
 
 const testHeadingIcon = IconLocationTemplate({
@@ -185,10 +185,11 @@ const HeadingIconsTemplate = () => `<div>
 </div>`
 
 export const HeadingIcons = {
-  render: HeadingIconsTemplate.bind({})
+  render: HeadingIconsTemplate.bind({}),
 }
 
-const TextContrastTemplate = () => `<div style="background-image: url(http://source.unsplash.com/b-P6xrDMFSU); background-color: #000;" class="bg-cover bg-no-repeat bg-center">
+const TextContrastTemplate =
+  () => `<div style="background-image: url(http://source.unsplash.com/b-P6xrDMFSU); background-color: #000;" class="bg-cover bg-no-repeat bg-center">
   <div class="p-10 bg-black/30">
     <span class="text-h3 text-white text-contrast">
       This text uses a text shadow that increases readability when used with a semi-transparent overlay.
@@ -197,6 +198,5 @@ const TextContrastTemplate = () => `<div style="background-image: url(http://sou
 </div>`
 
 export const TextContrast = {
-  render: TextContrastTemplate.bind({})
+  render: TextContrastTemplate.bind({}),
 }
-

storybook/stories/components/AppBarInternal/AppBarInternal.stories.js

@@ -7,9 +7,10 @@ export default {
     viewMode: 'docs',
     docs: {
       description: {
-        component: 'Displays JPL branding, the org or name of the site, and optionally a sign in/out widget.'
-      }
-    }
+        component:
+          'Displays JPL branding, the org or name of the site, and optionally a sign in/out widget.',
+      },
+    },
   },
 }