10.8

.browserslistrc

@@ -1,4 +1 @@
-last 2 versions
-not dead
-> 1% in US
-ie 11
+defaults

.eslintrc.js

@@ -6,19 +6,12 @@
  */
 
 module.exports = {
-  extends: [
-    'airbnb-base',
-    'plugin:jest/recommended',
-    'plugin:vue/recommended',
-    'plugin:prettier/recommended',
-    'prettier/vue',
-  ],
-  plugins: ['prettier'],
+  extends: ['airbnb-base', 'plugin:jest/recommended', 'prettier'],
   root: true,
   globals: {
     Drupal: true,
     jQuery: true,
-    _: true,
+    // _: true,
     BUILD_TARGET: true,
   },
   env: {
@@ -27,6 +20,7 @@ module.exports = {
   },
   rules: {
     'no-console': [0], // turned off for now while we are console.logging everywhere.
+    // @TODO: return to this vv
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
   },
 };

.huskyrc

@@ -1,2 +1,2 @@
 hooks:
-  pre-commit: "pretty-quick --staged"
+  pre-commit: "pretty-quick --staged && npm run lint && npm test"

.prettierrc.js

@@ -1,8 +1,4 @@
 module.exports = {
-  plugins: ['./node_modules/prettier-plugin-twig-melody'],
   proseWrap: 'always',
   singleQuote: true,
-  twigAlwaysBreakObjects: true,
-  twigOutputEndblockName: true,
-  twigPrintWidth: 120,
 };

.travis.yml

@@ -4,9 +4,9 @@ php:
   - 7.2
 env:
   matrix:
-    - TRAVIS_NODE_VERSION="8"
     - TRAVIS_NODE_VERSION="10"
     - TRAVIS_NODE_VERSION="12"
+    - TRAVIS_NODE_VERSION="14"
 before_install:
   - '. $HOME/.nvm/nvm.sh'
   - nvm install $TRAVIS_NODE_VERSION
@@ -23,7 +23,7 @@ before_script:
   - node --version
   - npm --version
 script:
-  - npm run ci
+  - npm run verify
 notifications:
   email:
     on_success: always

apps/drupal-default/particle_theme/particle.info.yml

@@ -27,13 +27,13 @@ component-libraries:
     paths: []
   atoms:
     paths:
-      - ../../../dist/app-drupal/assets/atomic/_patterns/01-atoms
+      - dist/atomic/_patterns/01-atoms
   molecules:
     paths:
-      - ../../../dist/app-drupal/assets/atomic/_patterns/02-molecules
+      - dist/atomic/_patterns/02-molecules
   organisms:
     paths:
-      - ../../../dist/app-drupal/assets/atomic/_patterns/03-organisms
+      - dist/atomic/_patterns/03-organisms
   templates:
     paths: []
   pages:

apps/drupal-default/particle_theme/particle.libraries.yml

@@ -4,10 +4,10 @@
 core:
   css:
     theme:
-      ../../../dist/app-drupal/assets/app.styles.css:
+      dist/app.css:
         minified: true
   js:
-    ../../../dist/app-drupal/assets/app.js:
+    dist/app.js:
       preprocess: false
   # See all in Drupal's `core/core.libraries.yml`
   dependencies:
@@ -18,6 +18,6 @@ core:
 # See `libraries-override` in particle.info.yml
 jquery:
   js:
-    ../../../dist/app-drupal/assets/drupal-jquery.js:
+    dist/drupal-jquery.js:
       preprocess: false
       weight: -20

apps/drupal-default/webpack.config.js

@@ -3,31 +3,23 @@
  */
 
 const path = require('path');
-const { DefinePlugin } = require('webpack');
-
-// Plugins
-const RunScriptAfterEmit = require('../../tools/webpack/run-script-after-emit');
-const particle = require('../../particle');
 
-// Constants: environment
-const { NODE_ENV } = process.env;
-
-// Constants: root
-const { ASSETS_ATOMIC_FOLDER } = require('../../particle.root.config');
+const { DefinePlugin } = require('webpack');
+const { merge } = require('webpack-merge');
 
-// Constants: app
-const appConfig = require('./particle.app.config');
+// Get design system config
+const dsWebpackConfig = require('../../source/default/webpack.config');
 
-const { APP_NAME, APP_DESIGN_SYSTEM, APP_DIST, APP_DIST_PUBLIC } = appConfig;
+const APP_NAME = 'app-drupal';
 
-const shared = {
+const drupalWebpackConfig = {
   entry: {
     'drupal-jquery': [path.resolve(__dirname, 'drupal-jquery.js')],
     app: [path.resolve(__dirname, 'index.js')],
   },
   output: {
-    path: APP_DIST,
-    publicPath: APP_DIST_PUBLIC,
+    // Output all CSS/JS/images/twig to dist/ within drupal theme
+    path: path.resolve(__dirname, 'particle_theme/dist'),
   },
   module: {
     rules: [
@@ -36,8 +28,8 @@ const shared = {
         loader: 'file-loader',
         options: {
           name: '[path][name].[ext]',
-          outputPath: ASSETS_ATOMIC_FOLDER,
-          context: APP_DESIGN_SYSTEM,
+          outputPath: 'atomic/',
+          context: path.resolve(__dirname, '../../source/default/'),
           emit: true,
         },
       },
@@ -48,44 +40,13 @@ const shared = {
       BUILD_TARGET: JSON.stringify(APP_NAME),
     }),
   ],
-};
-
-const dev = {
-  stats: {
-    children: false,
-    entrypoints: false,
-  },
-  plugins: [
-    new RunScriptAfterEmit({
-      exec: [
-        // prettier-ignore
-        `echo \n🚀 Webpack Drupal ${NODE_ENV} build complete! Edit 
-        apps/drupal-default/webpack.config.js to replace this line with
-        anything you'd like run after rebuilding assets, e.g.
-        'drupal cr all'. 🚀\n`,
-      ],
-    }),
-  ],
   externals: {
     jquery: 'jQuery',
   },
-};
-
-const prod = {
   stats: {
     children: false,
-    entrypoints: false,
     chunks: false,
   },
 };
 
-module.exports = particle(
-  // app: webpack
-  { shared, dev, prod },
-  // app: config
-  appConfig,
-  // Use extract css
-  {
-    cssMode: 'extract',
-  }
-);
+module.exports = merge(dsWebpackConfig, drupalWebpackConfig);

apps/pl-default/index.js

@@ -19,8 +19,6 @@ import 'prismjs/components/prism-css.min';
 import 'prismjs/components/prism-scss.min';
 import 'prismjs/components/prism-markup.min';
 
-// Local config
-import { APP_NAME } from './particle.app.config';
 // Full design system. May dupe the above, but Webpack don't care.
 import { enableAllComponents } from '../../source/default';
 
@@ -32,9 +30,8 @@ const $context = $(document);
 
 // Configure PL-specific settings here
 const settings = {
-  // card wants to know if it should enable holder.js.
-  // BUILD_TARGET is either 'pl' or 'drupal', and comes from webpack
-  enableHolder: BUILD_TARGET === APP_NAME,
+  // Enable SVG placeholder images for PL demos
+  enableHolder: true,
   // a random drupalSetting
   color: '#ce8500',
 };

apps/pl-default/pattern-lab/_meta/_00-head.mustache

@@ -13,6 +13,5 @@
     <!-- End Pattern Lab -->
 
   </head>
-
   <body class="{{ bodyClass }}">
-
+    

apps/pl-default/pattern-lab/_meta/_00-head.twig

@@ -16,7 +16,7 @@
     <!-- End Pattern Lab -->
 
     {% if env == 'production' %}
-      <link rel="stylesheet" href="{{ paths.assets }}/app.styles.css?cacheBuster={{ random() }}" />
+      <link rel="stylesheet" href="{{ paths.assets }}/app.css?cacheBuster={{ random() }}" />
     {% endif %}
 
 		<style type="text/css">

apps/pl-default/pattern-lab/_meta/_01-foot.mustache

@@ -1,3 +1,4 @@
+
 <!--DO NOT REMOVE-->
 {{{ patternLabFoot }}}
 

apps/pl-default/pattern-lab/_patterns/00-protons-demo/typography.twig

@@ -88,7 +88,8 @@
                 <span class="{{ codeClasses }}">{{ textClass }}</span>
               </td>
               <td class="text-center {{ tdClasses }}">
-                <span class="{{ codeClasses }}">{{ value }}</span>
+                <p class="{{ codeClasses }}">Font size: {{ value[0] }}</p>
+                <p class="{{ codeClasses }}">Line height: {{ value[1].lineHeight }}</p>
               </td>
             </tr>
           {% endfor %}