Merge pull request #224 from forumone/5.x-RC

5.2.0 release PR

.storybook/main.js

@@ -1,8 +1,15 @@
 const { resolve } = require('path');
 const path = require('path');
 
-module.exports = {
+const config = {
   stories: ['../source/**/*.stories.mdx', '../source/**/*.stories.@(js|jsx)'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { fastRefresh: true },
+  },
+  typescript: {
+    check: false,
+  },
   addons: [
     '@storybook/addon-links',
     {
@@ -79,7 +86,5 @@ module.exports = {
 
     return config;
   },
-  core: {
-    builder: 'webpack5',
-  },
 };
+export default config;

.storybook/preview.js

@@ -1,5 +1,4 @@
 import Twig from 'twig';
-import { addDecorator } from '@storybook/react';
 import { useEffect } from '@storybook/client-api';
 import twigDrupal from 'twig-drupal-filters';
 import twigAttributes from 'add-attributes-twig-extension';
@@ -23,26 +22,31 @@ function setupTwig(twig) {
 
 setupTwig(Twig);
 
-addDecorator(storyFn => {
-  useEffect(() => Drupal.attachBehaviors(), []);
-  return storyFn();
-});
+export const decorators = [
+  storyFn => {
+    useEffect(() => Drupal.attachBehaviors(), []);
+    return storyFn();
+  },
+];
 
-export const parameters = {
-  layout: 'fullscreen',
-  options: {
-    storySort: {
-      method: 'alphabetical',
-      order: [
-        'Global',
-        ['Color Palette', '*'],
-        'USWDS',
-        'Layouts',
-        'Components',
-        'Templates',
-        'Pages',
-      ],
-      includeName: true,
+const preview = {
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          'Global',
+          ['Color Palette', '*'],
+          'USWDS',
+          'Layouts',
+          'Components',
+          'Templates',
+          'Pages',
+        ],
+        includeName: true,
+      },
     },
   },
 };
+export default preview;

README.md

@@ -208,6 +208,25 @@ DO NOT prefix the name of your JS file with `_`. Import your JS file at the top
 of your Storybook file. See `dropdown-menu.stories.jsx` for an example. Don’t
 forget to add it to the `gesso.libraries.yml` file as well.
 
+### common.js
+
+Any library you create in `guswds.libraries.yml` that includes an individual
+component script must include `guswds/common` as a dependency. (In most cases, you
+will also add `core/drupal` as a dependency, if you are using the `Drupal`
+object anywhere in your code.) common.js is generated on **production** builds
+(so you will not notice it missing until you deploy to a staging server) and
+contains JavaScript that is shared across two or more components, so that it is
+not bundled multiple times on the page. The recommended practice is for each
+library to declare its dependencies, even if some of them are repeated across
+multiple libraries and/or shared with global. This ensures that Drupal will
+always load the dependencies before loading any library that depends on them.
+
+The common JS file is created using the [Webpack SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/).
+To change how it behaves, update `webpack.production.js`. You may also need to
+update `guswds_library_info_build` in `libraries.inc` to change what files are
+included in the `guswds/common` library. We recommend using the default setup
+unless you have a specific use case that requires advanced configuration.
+
 ### JS Linting
 
 ESLint and Prettier are used to lint JavaScript files. If you have a valid

babel.config.json

@@ -1,4 +1,5 @@
 {
+  "sourceType": "unambiguous",
   "presets": [
     "@babel/preset-react",
     [
@@ -9,6 +10,7 @@
         "corejs": 3,
         "loose": true
       }
-    ]
+    ],
+    "@babel/preset-typescript"
   ]
 }

config/install/block.block.guswds_page_title.yml

@@ -5,13 +5,13 @@ dependencies:
     - guswds
 id: guswds_page_title
 theme: guswds
-region: disabled
+region: title
 weight: 0
 provider: null
 plugin: page_title_block
 settings:
   id: page_title_block
   label: 'Page title'
-  provider: core
   label_display: '0'
+  provider: core
 visibility: {  }

gesso_helper/gesso_helper.info.yml

@@ -1,4 +1,4 @@
 name: Gesso Helper
 description: Provides additional functionality for the Gesso theme
 type: module
-core_version_requirement: ^8.9 || ^9
+core_version_requirement: ^8.9 || ^9 || ^10

gesso_helper/src/Commands/GessoHelperCommands.php

@@ -111,7 +111,7 @@ public function gesso(
     $this->io()->text(dt('Setting up the theme. This may take a while...'));
     // Get theme paths.
     $drupalRoot = Drush::bootstrapManager()->getRoot();
-    $gesso_path = Path::join($drupalRoot, drupal_get_path('theme', 'gesso'));
+    $gesso_path = Path::join($drupalRoot, \Drupal::service('extension.list.theme')->getPath('guswds'));
     $theme_path = substr($gesso_path, 0, strrpos($gesso_path, '/'));
     $new_path = Path::join($theme_path, $machine_name);
 
@@ -132,7 +132,7 @@ public function gesso(
         $this->gessoFileStrReplace(
           $file->getPathname(),
           [
-            "/(?<!\[('|\")drupalSettings('|\")\]\[('|\"))guswds(?!_image_path)/",
+            "/(?<!\[('|\")drupalSettings('|\")\]\[('|\"))guswds/",
             '/Gesso/',
           ],
           [$machine_name, $name]

gesso_helper/src/TwigExtension/UniqueIdTwigExtension.php

@@ -2,6 +2,8 @@
 
 namespace Drupal\gesso_helper\TwigExtension;
 
+use Drupal\Component\Utility\Crypt;
+use Drupal\Component\Utility\Html;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFilter;
 
@@ -11,19 +13,26 @@
 class UniqueIdTwigExtension extends AbstractExtension {
 
   /**
-   * @inheritdoc
+   * Provide helper name.
    */
   public function getName() {
     return 'gesso_helper_unique_id';
   }
 
   /**
-   * @inheritdoc
+   * Add unique_id Twig filter.
    */
   public function getFilters() {
     $filters = parent::getFilters();
-    $filters[] = new TwigFilter('unique_id', '\Drupal\Component\Utility\Html::getUniqueId');
+    $filters[] = new TwigFilter('unique_id', [$this, 'uniqueId']);
     return $filters;
   }
 
+  /**
+   * Add random string to an ID.
+   */
+  public function uniqueId($id) {
+    return Html::getId($id) . '--' . Crypt::randomBytesBase64(8);
+  }
+
 }

guswds.info.yml

@@ -3,12 +3,14 @@ type: theme
 base theme: false
 description: 'Storybook-based starter theme based on Gesso and the United States Web Design System.'
 package: Custom
-core_version_requirement: ^8.9 || ^9
+core_version_requirement: ^8.9 || ^9 || ^10
 libraries:
   - guswds/global
 libraries-override:
   core/drupal.dropbutton: guswds/dropbutton
 ckeditor_stylesheets:
+  - dist/css/ckeditor4-styles.css
+ckeditor5-stylesheets:
   - dist/css/editor-styles.css
 dependencies:
   - components
@@ -30,6 +32,7 @@ regions:
   breadcrumb: Breadcrumbs
   help: Help
   preface: Preface
+  title: 'Page title'
   status: 'Status messages & Tabs'
   content: Content
   postscript: Postscript

guswds.libraries.yml

@@ -14,6 +14,29 @@ back_to_top:
       dist/css/back-to-top.css: {}
   js:
     dist/js/back-to-top.es6.js: {}
+  dependencies:
+    - core/drupal
+    - core/once
+
+block:
+  css:
+    theme:
+      dist/css/block.css: {}
+
+breadcrumb:
+  css:
+    theme:
+      dist/css/breadcrumb.css: {}
+
+card:
+  css:
+    theme:
+      dist/css/card.css: {}
+
+details:
+  css:
+    theme:
+      dist/css/details.css: {}
 
 dropbutton:
   css:
@@ -22,7 +45,77 @@ dropbutton:
   js:
     dist/js/dropbutton.es6.js: {}
   dependencies:
-    - core/jquery
     - core/drupal
     - core/drupalSettings
+    - core/jquery
     - core/once
+
+file:
+  css:
+    theme:
+      dist/css/file.css: {}
+  dependencies:
+    - guswds/icon_link
+
+icon_link:
+  css:
+    theme:
+      dist/css/icon-link.css: {}
+
+image_teaser:
+  css:
+    theme:
+      dist/css/image-teaser.css: {}
+
+pager:
+  css:
+    theme:
+      dist/css/pager.css: {}
+
+pager_mini:
+  css:
+    theme:
+      dist/css/pager--mini.css: {}
+  dependencies:
+    - guswds/pager
+
+progress:
+  css:
+    theme:
+      dist/css/progress.css: {}
+
+read_more_link:
+  css:
+    theme:
+      dist/css/rss-more-link.css: {}
+  dependencies:
+    - guswds/icon_link
+
+rss_feed:
+  css:
+    theme:
+      dist/css/rss-feed.css: {}
+  dependencies:
+    - guswds/icon_link
+
+tag_link:
+  css:
+    theme:
+      dist/css/tag-link.css: {}
+
+tag_list:
+  css:
+    theme:
+      dist/css/tag-list.css: {}
+  dependencies:
+    - guswds/tag_link
+
+teaser:
+  css:
+    theme:
+      dist/css/teaser.css: {}
+
+video:
+  css:
+    theme:
+      dist/css/video.css: {}

guswds.theme

@@ -7,6 +7,7 @@
 
 require_once dirname(__FILE__) . '/includes/block.inc';
 require_once dirname(__FILE__) . '/includes/field.inc';
+require_once dirname(__FILE__) . '/includes/file.inc';
 require_once dirname(__FILE__) . '/includes/form.inc';
 require_once dirname(__FILE__) . '/includes/html.inc';
 require_once dirname(__FILE__) . '/includes/libraries.inc';

includes/file.inc

@@ -0,0 +1,16 @@
+<?php
+
+/**
+ * @file
+ * File-related hook implementations.
+ */
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function guswds_preprocess_file_link(array &$variables) {
+  // Replace file classes with c-file.
+  if (isset($variables['attributes']['class'])) {
+    $variables['attributes']['class'] = preg_replace('/file/', 'c-file', $variables['attributes']['class']);
+  }
+}

includes/html.inc

@@ -10,7 +10,7 @@
  */
 function guswds_preprocess(array &$variables) {
   if (!empty($variables['directory'])) {
-    $variables['gesso_image_path'] = '/' . $variables['directory'] . '/dist/images';
+    $variables['image_path'] = '/' . $variables['directory'] . '/dist/images';
   }
 }