General updates applying BEM and USWDS structures (#19)

README.md

@@ -32,10 +32,4 @@ lando php web/core/scripts/drupal generate-theme --starterkit starter_theme my_n
 lando drush cr
 ```
 
-## Remove these lines from your custom theme info file
-```
-hidden: true
-starterkit: true
-```
-
 ## Install the theme dependencies and set your custom theme as the default

bixaluswds.info.yml

@@ -3,7 +3,7 @@ type: theme
 description: "Drupal base theme for use with USWDS. Check the README for further instructions."
 core_version_requirement: "^10"
 base theme: false
-version: '0.0.0'
+version: '1.0.0'
 hidden: true
 dependencies:
   - drupal:twig_tweak

bixaluswds.theme

@@ -6,6 +6,7 @@
  */
 
 require_once dirname(__FILE__) . '/preprocess/global.inc';
+require_once dirname(__FILE__) . '/preprocess/block.inc';
 require_once dirname(__FILE__) . '/preprocess/form.inc';
 require_once dirname(__FILE__) . '/preprocess/navigation.inc';
 require_once dirname(__FILE__) . '/preprocess/taxonomy.inc';

preprocess/block.inc

@@ -0,0 +1,13 @@
+<?php
+
+/**
+ * @file
+ * Preprocess function for blocks.
+ */
+
+/**
+ * Implements hook_preprocess_block().
+ */
+function bixaluswds_preprocess_block(&$variables) {
+  $variables['content']['#attributes']['block'] = $variables['attributes']['id'];
+}

preprocess/global.inc

@@ -13,4 +13,5 @@ function bixaluswds_preprocess(&$variables) {
   $language = Drupal::languageManager()->getCurrentLanguage();
   $variables['language'] = $language->getId();
   $variables['uswds_img_path'] = '/themes/custom/bixaluswds/dist/img';
+  $variables['class_prefix'] = 'bx-';
 }

starter_theme/config/install/block.block.bixaluswds_main_menu.yml

@@ -0,0 +1,24 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - system.menu.main
+  module:
+    - system
+  theme:
+    - starter_theme
+id: bixaluswds_main_menu
+theme: starter_theme
+region: header
+weight: 0
+provider: null
+plugin: 'system_menu_block:main'
+settings:
+  id: 'system_menu_block:main'
+  label: 'Main navigation'
+  label_display: '0'
+  provider: system
+  level: 1
+  depth: 2
+  expand_all_items: true
+visibility: {  }

starter_theme/config/install/block.block.bixaluswds_sitebranding.yml

@@ -0,0 +1,22 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - starter_theme
+id: bixaluswds_sitebranding
+theme: starter_theme
+region: header
+weight: -2
+provider: null
+plugin: system_branding_block
+settings:
+  id: system_branding_block
+  label: 'Site branding'
+  label_display: '0'
+  provider: system
+  use_site_logo: true
+  use_site_name: true
+  use_site_slogan: false
+visibility: {  }

starter_theme/config/install/block.block.starter_theme_content.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - starter_theme
+id: starter_theme_content
+theme: starter_theme
+region: content
+weight: -3
+provider: null
+plugin: system_main_block
+settings:
+  id: system_main_block
+  label: 'Main page content'
+  label_display: '0'
+  provider: system
+visibility: {  }

starter_theme/config/install/block.block.starter_theme_messages.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - system
+  theme:
+    - starter_theme
+id: starter_theme_messages
+theme: starter_theme
+region: admin
+weight: -3
+provider: null
+plugin: system_messages_block
+settings:
+  id: system_messages_block
+  label: 'Status messages'
+  label_display: '0'
+  provider: system
+visibility: {  }

starter_theme/config/install/block.block.starter_theme_page_title.yml

@@ -0,0 +1,17 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - starter_theme
+id: starter_theme_page_title
+theme: starter_theme
+region: content
+weight: -4
+provider: null
+plugin: page_title_block
+settings:
+  id: page_title_block
+  label: 'Page title'
+  label_display: '0'
+  provider: core
+visibility: {  }

starter_theme/config/install/block.block.starter_theme_primary_local_tasks.yml

@@ -0,0 +1,19 @@
+langcode: en
+status: true
+dependencies:
+  theme:
+    - starter_theme
+id: starter_theme_primary_local_tasks
+theme: starter_theme
+region: admin
+weight: -4
+provider: null
+plugin: local_tasks_block
+settings:
+  id: local_tasks_block
+  label: 'Primary tabs'
+  label_display: '0'
+  provider: core
+  primary: true
+  secondary: false
+visibility: {  }

starter_theme/gulpfile.js

@@ -1,6 +1,65 @@
 const uswds = require("@uswds/compile");
 const {parallel, watch, series, src} = require("gulp");
 const gulp = require("gulp");
+const uglifyes = require('uglify-es');
+const composer = require('gulp-uglify/composer');
+const uglify = composer(uglifyes, console);
+
+const settings = {
+  sass: {
+    src: ['./src/sass/**/*.scss']
+  },
+  js: {
+    dest: './dist/js',
+    minDest: './dist/js/min',
+    minSrc: './src/js/**/*.js',
+    src: './src/js/**/*.js',
+  }
+}
+
+// JS build function.
+function buildJS() {
+  return src(settings.js.src)
+    .pipe(uglify())
+    .pipe(gulp.dest(settings.js.dest));
+}
+
+// Watch changes on JS files and trigger functions at the end.
+function watchJSFiles() {
+  watch(
+    [
+      './src/js/**/*.js'
+    ],
+    {
+      events: 'all',
+      ignoreInitial: false
+    },
+    series(
+      buildJS
+    )
+  );
+}
+
+// Compile CSS from scss.
+function buildCompStyles() {
+  return src(settings.sass.src);
+}
+
+// Watch changes on sass files and trigger functions at the end.
+function watchCompFiles() {
+  watch(
+    [
+      './src/sass/**/*.scss',
+    ],
+    {
+      events: 'all',
+      ignoreInitial: false
+    },
+    series(
+      buildCompStyles
+    )
+  );
+}
 
 /**
  * USWDS version
@@ -15,20 +74,20 @@ uswds.settings.version = 3;
  */
 
 uswds.paths.dist.theme = './src/sass';
-uswds.paths.src.projectSass = './src/sass';
 uswds.paths.dist.css = './dist/css';
-uswds.paths.dist.img = './dist/img';
-uswds.paths.dist.fonts = './dist/fonts';
+uswds.paths.dist.img = './dist/assets/img';
+uswds.paths.dist.fonts = './dist/assets/fonts';
 uswds.paths.dist.js = './dist/js';
+uswds.paths.src.projectSass = './src/sass';
 
 /**
  * Exports
  * Add as many as you need
  */
 
 // Various compile functions.
-exports.default = series(uswds.copyAssets, uswds.compile);
-exports.init = uswds.init;
+exports.build = series(uswds.copyAssets, buildJS, uswds.compile);
 exports.compile = uswds.compile;
+exports.default = exports.watch = parallel(watchCompFiles, uswds.watch, watchJSFiles);
 exports.update = uswds.updateUswds;
 exports.copyAssets = uswds.copyAssets;

starter_theme/package.json

@@ -4,13 +4,21 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx gulp",
-    "postinstall": "npx gulp"
+    "postinstall": "npx gulp build",
+    "build": "npx gulp build",
+    "dev": "npx gulp"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@uswds/compile": "^1.0.0",
-    "@uswds/uswds": "^3.6.1"
+    "@uswds/compile": "^1.1.0",
+    "@uswds/uswds": "^3.8.1",
+    "gulp": "^5.0.0",
+    "gulp-uglify": "^3.0.2",
+    "uglify-es": "^3.3.9"
+  },
+  "overrides": {
+    "glob-parent": "6.0.2",
+    "postcss": "^8.4.31"
   }
 }

starter_theme/src/js/external-links.js

@@ -0,0 +1,24 @@
+/*
+  Processing External Links
+ */
+
+(() => {
+
+  // Enable external links behavior.
+  // `extlinkjs-ignore` attribute should be added to all icons in order to not render the uswds external links icon
+  const externalLinks = document.querySelectorAll('a[href^="https"]:not([extlinkjs-ignore])');
+  const title_translated = Drupal.t('External link opens in new window');
+
+  // Process external links.
+  if (externalLinks.length) {
+    for (let i = 0; i < externalLinks.length; i++) {
+      externalLinks[i].classList.add('usa-link--external');
+      externalLinks[i].setAttribute('target', '_blank');
+      externalLinks[i].setAttribute('title', title_translated);
+      if (!new URL(externalLinks[i].href).hostname.endsWith(".gov")) {
+        externalLinks[i].setAttribute('rel', 'noreferrer');
+      }
+    }
+  }
+
+})();