Update prettier to v2 (#567)

* Update prettier to v2

* Automated changes by prettier

* Remove renovate override for prettier

Author: calebeby

.remarkrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: ['remark-preset-lint-recommended', 'remark-preset-prettier']
+  plugins: ['remark-preset-lint-recommended', 'remark-preset-prettier'],
 };

.storybook/cloud-four-theme.js

@@ -5,5 +5,5 @@ export default create({
 
   brandTitle: 'Cloud Four Patterns',
   brandUrl: 'https://cloudfour.com',
-  brandImage: '/logo.svg'
+  brandImage: '/logo.svg',
 });

.storybook/main.js

@@ -17,18 +17,18 @@ module.exports = {
           implementation: require('sass'),
           sassOptions: {
             // Import Theo design tokens as SCSS variables
-            importer: [require('./theo-importer')]
-          }
-        }
-      }
+            importer: [require('./theo-importer')],
+          },
+        },
+      },
     },
     // Community addons
-    'storybook-addon-themes'
+    'storybook-addon-themes',
   ],
-  webpackFinal: async config => {
+  webpackFinal: async (config) => {
     // Remove default SVG processing from default config.
     // @see https://github.com/storybookjs/storybook/issues/5708#issuecomment-515384927
-    config.module.rules = config.module.rules.map(data => {
+    config.module.rules = config.module.rules.map((data) => {
       if (/svg\|/.test(String(data.test))) {
         data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
       }
@@ -39,20 +39,20 @@ module.exports = {
     config.module.rules.push(
       {
         test: /\.twig$/,
-        use: 'twigjs-loader'
+        use: 'twigjs-loader',
       },
       {
         // Import Theo design tokens as JS objects
         test: /\.ya?ml$/,
-        use: resolve(__dirname, './theo-loader.js')
+        use: resolve(__dirname, './theo-loader.js'),
       },
       {
         // Optimize and process SVGs as React elements for use in documentation
         test: /\.svg$/,
-        use: '@svgr/webpack'
+        use: '@svgr/webpack',
       }
     );
 
     return config;
-  }
+  },
 };

.storybook/manager.js

@@ -2,5 +2,5 @@ import { addons } from '@storybook/addons';
 import cloudFourTheme from './cloud-four-theme';
 
 addons.setConfig({
-  theme: cloudFourTheme
+  theme: cloudFourTheme,
 });

.storybook/theo-importer.js

@@ -28,13 +28,13 @@ function theoImporter(url, prev, done) {
     .convert({
       transform: {
         file: tokenPath,
-        type: 'web'
+        type: 'web',
       },
       format: {
-        type: 'default.scss' // Variables will have `!default` appended
-      }
+        type: 'default.scss', // Variables will have `!default` appended
+      },
     })
-    .then(scssString => {
+    .then((scssString) => {
       done({ contents: scssString }); // Pass result to Sass
     })
     .catch(({ message }) => {

.storybook/theo-loader.js

@@ -18,7 +18,7 @@ function theoLoader(source) {
   // By processing import paths beforehand, we give Webpack the info it needs
   // to refresh files accurately and clear its cache.
   if (def.imports) {
-    def.imports.forEach(importPath => {
+    def.imports.forEach((importPath) => {
       // Import paths are relative to the requesting file.
       this.addDependency(resolve(tokenPath, importPath));
     });
@@ -28,14 +28,14 @@ function theoLoader(source) {
     .convert({
       transform: {
         file: tokenPath,
-        type: 'web'
+        type: 'web',
       },
       format: {
         // Outputs ES modules: `export const propertyName = value;`
-        type: 'module.js'
-      }
+        type: 'module.js',
+      },
     })
-    .then(result => {
+    .then((result) => {
       done(null, result);
     })
     .catch(({ message }) => {

gulpfile.js/tasks/svg-to-twig.js

@@ -23,7 +23,7 @@ const dynamicSvgProps = [
   'role',
   'style',
   'viewBox',
-  'width'
+  'width',
 ];
 
 /**
@@ -46,13 +46,13 @@ function templatizeSvgString(src) {
   svg.children = [...prepend.children, ...svg.children, ...append.children];
 
   // Identify props already in use in the SVG versus those yet to be used
-  const usedProps = dynamicSvgProps.filter(prop => Boolean(svg.attrs[prop]));
-  const unusedProps = dynamicSvgProps.filter(prop => !svg.attrs[prop]);
+  const usedProps = dynamicSvgProps.filter((prop) => Boolean(svg.attrs[prop]));
+  const unusedProps = dynamicSvgProps.filter((prop) => !svg.attrs[prop]);
 
   // Properties already in use should have their value set to a conditional.
   // The `default` filter would be less code, but things get tricky when it
   // comes to managing quotation marks in XML.
-  usedProps.forEach(prop => {
+  usedProps.forEach((prop) => {
     const current = svg.attrs[prop];
     // Dashes have meaning in Twig expressions, so we replace them with
     // underscores in property names.
@@ -69,7 +69,7 @@ function templatizeSvgString(src) {
     // We build a big string of attribute name/value pairs for any properties
     // yet to be used for this asset.
     const unusedPropHtml = unusedProps
-      .map(prop => {
+      .map((prop) => {
         const twigProp = prop.replace(/-/g, '_');
         return `{% if ${twigProp} %} ${prop}="{{${twigProp}}}"{% endif %}`;
       })

gulpfile.js/tasks/theo-to-mdx.js

@@ -13,11 +13,11 @@ function theoToMdx() {
     .pipe(
       gulpTheo({
         transform: {
-          type: 'web'
+          type: 'web',
         },
         format: {
-          type: 'stories.mdx'
-        }
+          type: 'stories.mdx',
+        },
       })
     )
     .pipe(dest('src/design-tokens/generated'));

gulpfile.js/tasks/watch.js

@@ -2,7 +2,7 @@ const { watch } = require('gulp');
 const svgToTwig = require('./svg-to-twig');
 const theoToMdx = require('./theo-to-mdx');
 
-module.exports = function() {
+module.exports = function () {
   watch('src/assets/**/*.svg', svgToTwig);
   watch('src/design-tokens/**/*.yml', theoToMdx);
 };

gulpfile.js/theo-formats/stories.mdx.js

@@ -102,7 +102,7 @@ function mdxStoriesFormat(result) {
   const title = startCase(slug);
   const props = result.get('props').toJS();
   const categories = groupBy(props, 'category');
-  const mdxCategories = Object.keys(categories).map(category =>
+  const mdxCategories = Object.keys(categories).map((category) =>
     categoryToMdx(category, categories[category])
   );
   return `