Changelog

Components

Accordion

• Drop-shadows were removed in favor of solid borders for better visual coherence with the rest of the framework.
• The chevron icon SVG (used in the panel headers) has been upgraded to Font Awesome v6.1.1.

Breadcrumb

Multiple instances of the breadcrumb component now support keyboard/interaction functionality.

Modal

• Linking between modals now works as expected.
• The times icon SVG (used in the close buttons) has been upgraded to Font Awesome v6.1.1.

Nav

• Vertically scrolling navigation lists now use a custom .cwf-nav__list--scroll class instead of utilizing the built-in vertical scrolling utility class.
• Improved accessibility by providing more context to screen readers when interacting with nav toggles.

Notification

The times icon SVG (used in the close buttons) has been upgraded to Font Awesome v6.1.1.

Footer

The direct edit link is now optional in the component for non-T4 websites.

Tabs

• Panels now have a max-width set by --cwf-tabs__panel--max-width when visible to prevent them from overflowing outside the main content area.
• Tabs panels will no longer increase their z-index when focused to prevent odd rendering behavior.
• Fixed a regression where linking to a tab panel wouldn’t automatically open it.

Developer

Changes

• The recommended LTS version of Node.js has been bumped to v16.13.2 (Gallium).
• The recommended version of NPM has been bumped to v.8.3.0.
• All dependencies have been updated to their latest versions.
• Faker.js has been replaced by the community package.
• The gulpfile.js file has been updated to simplify and reorganize the build system for improved maintainability.
• Package tree shaking has been improved:
  • Module bundles, such as components/index.js, have been updated to only export child modules as-is. In this example, while you can no longer get an array of all component classes via import { components } from ‘cwf/components/index.js’;, you can get an object of all component classes via import * as components from ‘cwf/components/index.js’;.
  • The root JS and SCSS files have been updated to only export the entire framework, not act as prebuilt, site-ready code; For that, you can pull from the dist directory instead.
  • Prebuilt CSS and CommonJS can now be found in the dist directory to better distinguish them from their source code counterparts.
  • JS modules no longer have a default export; Named exports must be used.
• Font Awesome was updated to v6.1.1.
• The print mixin within the shared/media SCSS module now works as expected.

New

All reset, utility, and component JS is now provided as prebuilt CommonJS under the dist directory for projects not using ESM in Node.js.

Terminalfour

Plugin updates only on T41

Per the WUG communication sent back in January by the Platform Services team, only T41 will receive feature updates moving forward. For the release of Compass v1.7.0, this includes the “Accordion Panel”, “Modal”, “Notification”, and “Tab Panel” plugins.

Plugin “Injectors” fields

Moving away from “Name” field injectors/keywords towards a dedicated “Injectors” field within the plugin system has been a long-term project for Platform Services. You may have noticed that all of the Compass content types and newer plugins only support an “Injectors” field. For the release of Compass v1.7.0, the “Accordion Panel” and “Modal” plugins will receive a new “Injectors” field. “Name” field injectors/keywords will still work, but injectors from the “Injectors” field will take precedence over them when used. We advise everyone to begin switching your injectors over to the new, dedicated field when possible.

Upcoming

Button variations

We’re researching and prototyping new button variations. These will come in handy to better create visual/interaction hierarchies on web pages.

Carousel

We’ve continued to work on the upcoming carousel component, with more rounds of design/UX refinement. We hope to deliver a polished component to users within the next release.

Template engine

We’ve begun researching/working on a replacement to the Twig template engine, as the Node.js implementation of Twig isn’t well maintained. Switching to something more modern will allow us to use HTML logic in more places and implementations.