Toggle Utility; toggles target's children tabindex, Pa11y Config, and other small fixes

Updates the Toggle Utility to switch tabindex of the target's children. This further helps hide nested content from screen readers in hidden elements. See src/utilities/toggle/readme.md for details.

Other fixes

• Updates the base configuration for the pa11y module settings.
  • Sets standard to WCAG2 AA
  • Adds an [data-pa11y="disable"] attribute that will hide an element from linting.
• Remove serving from start script. Updates the package.json.
• Update readme with same token used in cli alerts

CLI Updates

Updates to make messaging from the CLI more consistent. Specifically, display IN/OUT file paths for cmd + click quick inspection (supported by the VsCode terminal). Minor updates to alert tokens.

Make template file source update

Make Templates

Migrated make to source template files from the config/make/ directory. Previously template files were stored in the config/make.js file as strings;

const templates = {
  'markup': [
      "/",
      "/ {{ Pattern }}",
      "/",
      "",
      "div class=\"{{ prefix }}{{ pattern }}\""
    ].join("\n"),
  'markdown': [
      "",
      "**Source:** `src/{{ type }}/{{ pattern }}/{{ pattern }}`",
      "",
      "About the {{ Pattern }} {{ type }}.",
    ].join("\n"),
  'styles': [
    ...
  ],
  ...
}

Templates are now sourced from actual files in the config/make/ directory;

config/make/markdown.md
config/make/markup.slm
config/make/readme.md
config/make/view.slm
config/make/script.js
config/make/config.scss
config/make/style.scss

The contents of the files remain the same.

Migration

• Move contents of the templates object in the config/make.js into newly created files listed above. If you do not wish to create your own templates you can simply omit the file and rely on the framework's defaults.
• Remove the variable and module.export instance of templates from the config/make.js file.

Other optional suggestions

• Update the keys in each config/make.js configuration object from views, scripts and styles to their singular view, script and style. This allows you to type npx pttrn make component view when you need to add an extra file to a pattern (slightly easier to remember?).
• Add 'readme' to the patterns and optional constant so that it isn't created automatically.

Recursive

Make now implements the recursive option for making files. If a directory for a pattern does not exist in a project it will be created.

Web Share, Tooltips, and pre-release of Newsletter Utility

See:

• src/utilities/web-share/readme.md
• src/utilities/tooltips/readme.md

... for more details.

Svgs Async

This update converts the use of callbacks in the svgs script to async/await functions. It also removes the dependency of the shelljs package to run the svgo and svgstore packages using their respective command line interfaces.

The only migration steps necessary are to...

• Update the config/svgs.js to the new format. See the example in this repository.
• The default path to the icon sprite has changed from dist/icons.svg to dist/svg/icons.svg. The Icons Utility has been updated to reference this default path.

Additional Enhancements

Optimizing svgs with svgo

The svgo package optimizes svgs through various plugins. The use of these plugins can now be configured by the config/svgs.js file.

Creating an svg sprite with svgstore

svgstore creates an svg sprite that can be embedded into a webpage for easier use of svgs for iconography or graphics. The Icons Utility can be used to call this file and embed it onto the page. There are now a few configuration options for this plugin available in the config.

Slm Async and Configuration Enhancement, Serve Async, Cross Env

Previously the Slm script was updated to use the chokidar package in place of nodemon for compiling slm and md files that have changed. This release includes that and an update to the script to use async/await methods as well as replace (the opinionated) prettier with beautify-js and markdown-js (deprecated) with marked. The configuration for both packages is exposed in the config. Additionally, the method for including markdown files in slm templates has been updated.

Migration

slm Command

pttrn slm

Update config/slm.js (potentially slm files)

Use the updated config/slm.js for guidance on how to update dependency settings and include variables for slm files.

Slm files may have used variables included through a scripts/locals.js script that wasn't previously available for configuration. Any local variables included in that script have been removed and exposed to the config/slm.js script for more control. As a result, some variable paths may have changed in the process for existing slm files.

this.site.

References to this.site. should be replaced with this. (remove the site path). Example

this.site.versions.package

...becomes ...

this.versions.package

this.site.author

this.site.author

...becomes ...

this.package.author

NODE_ENV

- if this.env.NODE_ENV === 'production'

...becomes ...

- if this.process.env.NODE_ENV === 'production'

See the example here.

Update include methods

The include method for escaped code has changed for simplicity, taking advantage of including functions in slm's output method.

Include compiled and escaped slm templates in slm files;

= this.include('utilities/toggle/toggle');

... replaces the previous template tag method for including escaped HTML for component demo pages;

= 'code{{ utilities/toggle/toggle.slm }}'

Include md files in slm files

== this.include('utilities/toggle/toggle.md');

... replaces the previous template tag method for including md in slm files.

= 'md{{ utilities/toggle/toggle }}'

The double == is important, see slm docs for details.

Include slm in md files

include{{ utilities/toggle/toggle.slm }}

... replaces the previous template tag method for including slm in md files.

slm{{ utilities/toggle/toggle }}

Explore your options for exporting node methods and the Beautify-js and Marked packages the slm config!

• Slm Output Methods
• Beautify-js
• Marked

serve Command

pttrn serve

The Serve function has been updated as well and works a bit more intuitively. No migration is needed but be sure the reload script is properly being called in your HTML files for automatic reloading;

/ The reload script. This should not be compile during production builds
/ @source https://www.npmjs.com/package/reload
- if this.process.env.NODE_ENV !== 'production'
  script src='/reload/reload.js' 	   

NPM Scripts and cross-env

cross-env, the package for making node.js env variables work for Windows is now an optional dependency and must be included in a framework project separately.

Tokens Config

The key opts in the config/tokens.js has been changed to config for consistency.

const tokens = {
  config: {
    output: '"./src/config/_tokens.scss"',
    prefix: '"$tokens:"'
  },
  ...

... becomes...

const tokens = {
  config: {
    output: '"./src/config/_tokens.scss"',
    prefix: '"$tokens:"'
  },
  ...

Design Tokens, Async Styles and Chokidar, and Slm Chokidar

Design Tokens

The variables script and command have been renamed to tokens. The configuration for this script can be modified to for backwards compatibility by changing settings in the config/tokens.js opts object for the json-to-sass package (see the framework's config for a full list of options). In order to fully migrate, the following steps can be followed;

• (required) Rename config/variables.js to config/tokens.js
• (required) Replace const variables = require('./variables.js'); with const variables = require('./variables.js'); in config/tailwind.js
• Replace const variables = with const tokens = in config/tailwind.js
• Replace all instances of variables. with tokens. in config/tailwind.js
• Replace all instances of @import 'config/variables'; with @import 'config/tokens'; in .scss files.
• Replace all instances of $variables with $tokens in .scss files.
• Replace all instances of this.variables with this.tokens in .slm files.

Async Styles

Styles have been refactored to be asynchronous, insuring that tokens, sass, and postcss tasks run in order. It may be necessary to update your Sass include paths from;

  includePaths: [
    './node_modules', './src'
  ]

to;

  includePaths: [
    './src/',
    './node_modules/@nycopportunity/',
    './node_modules/animate.scss/'
  ]

Chokidar

The Chokidar package has been implemented in the Styles and Slm --watch commands for running only on files that have changed. No steps to migrate are necessary.