This Drupal module contains many UX components and enhancements, and their supporting code.
Warning: while this is generally production-ready, it's not guaranteed to maintain a stable API and may occasionally contain bugs, being a work-in-progress. Stable releases may be provided at a later date.
-
PHP 8.1
Before attempting to install this, you must add the Composer repositories as described in the installation instructions for these dependencies:
- The
ambientimpact_coreandambientimpact_iconmodules.
To build front-end assets for this project, Node.js and Yarn are required.
Ensure that you have your Drupal installation set up with the correct Composer
installer types such as those provided by the drupal/recommended-project
template.
If you're starting from scratch, simply requiring that template and following
the Drupal.org Composer
documentation
should get you up and running.
In your root composer.json, add the following to the "repositories" section:
"drupal/ambientimpact_ux": {
"type": "vcs",
"url": "https://github.com/Ambient-Impact/drupal-ambientimpact-ux.git"
}Once you've completed all of the above, run composer require "drupal/ambientimpact_ux:^2.0@dev" in the root of your project to have
Composer install this and its required dependencies for you.
To build front-end assets for this project, you'll need to install Node.js and Yarn.
This package makes use of Yarn
Workspaces and references other local
workspace dependencies. In the package.json in the root of your Drupal
project, you'll need to add the following:
"workspaces": [
"<web directory>/modules/custom/*"
],where <web directory> is your public Drupal directory name, web by default.
Once those are defined, add the following to the "dependencies" section of
your top-level package.json:
"drupal-ambientimpact-ux": "workspace:^2"Then run yarn install and let Yarn do the rest.
While not required, yarn.BUILD is recommended to make building all of the front-end assets even easier.
This uses Webpack and Symfony Webpack Encore to automate most of the build process. These will have been installed for you if you followed the Yarn installation instructions above.
If you have yarn.BUILD installed, you can run:
yarn build
from the root of your Drupal site. If you want to build just this package, run:
yarn workspace drupal-ambientimpact-ux run build
The following major version bumps indicate breaking changes:
-
1.x:
-
Has been
git subtree splitfromAmbient-Impact/drupal-modulesinto a standalone package; version has been reset to 1.x. -
Requires Drupal 9.5 or Drupal 10.
-
Increases minimum version of Hook Event Dispatcher to 3.1, removes deprecated code, and adds support for 4.0 which supports Drupal 10.
-
-
2.x:
-
Requires Drupal 10.
-
Removed
.nvmrcfile as Node.js is stable enough nowadays to no longer warrant this. -
Increases minimum version of Hook Event Dispatcher to 4.0.
-
Multiple components have been removed that are no longer needed and/or better alternatives exist:
-
abbr: Removed as part of thetooltipcomponent rewrite farther down; this is now expected to be handled by the theme. -
content_visibility: This was only ever used on one page on ambientimpact.com, which is no longer used, and as a component was over-engineered. -
gin: This only existed to auto toggle between light and dark modes, and this functionality is now in the Gin theme itself. -
toolbar: This was a port of improvements layered on top of the old Drupal 7 Navbar to Drupal 8 but was no longer used if the Gin theme was the admin theme; note that this also removes thedata-drupal-themeattribute that was added to the<html>element as that was the only use for it. -
seven: The Seven theme was removed from Drupal core 10.0 in favour of Claro.
-
-
Complete rewrite of
tooltipcomponent for Tippy.js 6.x:-
Previous spaghetti code has been re-implemented as various Tippy.js plug-ins, which means they're now configured using Tippy.js constructor (or global default) properties.
-
The old nested config has been removed as part of the above, with all configuration being sent to Tippy.js, simplifying the way tooltips are constructed.
-
Removed all tooltip stylesheets as these are now the responsibility of the theme. If the theme doesn't provide any styles, the default Tippy.js tooltip theme is used.
-
-