v8.1.0 — 2023-05-04

v8.1.0 (2023-05-04)

Overview

Overhauled the multi-column layouts to enforce the new widths: 285px by default, or 400px opt-in using the modifier class .cd-layout__sidebar--wide. The code only renders multi-column layouts when certain requirements are met in the browser, so that we can begin offering "universal" and "modern" layout options without continuing to depend on JS libraries to shim older browsers.

Issue Summary

• CD-462: modernize multi-column layouts #391
• CD-469: cleanup to accomodate CD Demo #392

Steps to Upgrade

If you've overridden any of the following templates and you're using the default Sidebar regions, they'll need to reflect the new classnames adopted by our CD base-theme templates:

• node--full.html.twig
• maintenance-page.html.twig
• page--404.html.twig
• page--demo.html.twig
• page--facets.html.twig
• page.html.twig

v8.0.2 — 2023-04-12

8.0.2 (2023-04-12)

Bug Fixes

• adjust appearance of active trail on mobile/desktop (4296eb7)
• adopt focus-visible state and restyle cosmetically (48f4f25)
• alignment issues for footer copyright (1c98d48)
• CD Footer mandate adjustments (2aa69a1)
• clean up the footer focus styles (d5002c0)
• logical properties for text-align in footer (7fbec82)
• padding/position issues with various GH dropdowns (bffca47)
• remove carets from Global Header dropdowns (24c98d1)
• remove most RTL selectors from Global Header (9b808b0)
• restore positioning of last-child nav dropdown (24acf71)
• RTL cleanup for inline search (0229a3d)
• show focus styles when Search is expanded (8251666)
• update HR.info to be RWR (179c86d)
• use logical properties for CD Nav (3e67b9e)
• use the intended color for focus styles in base-theme (728fbe2)
• z-index issue with Site Logo and OCHA Services dropdown (0c26b0e)

v8.0.1 — 2023-03-22

8.0.1 (2023-03-22)

Bug Fixes

• cd-tabs: exclude tabs and styled lists from typography defaults (61cb937)
• cd-typography: revert the disruptive display:block on img tags (04d768d)

v8.0.0 — 2023-02-16

Overview

This is a much larger release than normal, containing multiple significant breaking changes:

⚠ BREAKING CHANGES

• sass: Remove Sass from base/sub-themes (27ada38)
• fonts: removed system-ui font-family declarations and CSS Var --cd-font--system (6837729)
• drupal: Drupal 9.5 is new minimum supported version. Drupal 8 no longer supported. (10b520e)
• security: upgrade to node.js LTS 16.19.0 / npm 8.19.3 (97cf22c)
• ie: remove IE10-specific fixes (3bdf787)
• ie: Physical dimensions were refactored to use logical properties and/or values, i.e. border-left for LTR turned into border-inline-start — meaning the associated RTL rules could be eliminated. This refactor wasn't absolute; many instances still remain but since this has an impact on IE11, it is a breaking change. Future removals will not be considered breaking changes because our support policy no longer includes IE11.
• infra: Project-specific Composer files will need to be updated to remove any references to Sass commands (or the old linting commands).

Steps to Upgrade

Depending on the age of your sub-theme, there are various manual clean-up tasks required. Please review each section and see if it applied to you. Start by requiring the newest CD release via composer:

composer require unocha/common_design:^8

Minimum Drupal versions were bumped

Drupal 8 is EOL and no longer supported. The new minimum Drupal core versions are:

• Drupal 9.5
• Drupal 10.0

node.js/npm minimum versions were bumped

Despite dropping sass, we still have several node.js tools for maintenance of the theme that may be run by your CI, so they were bumped as part of regular security updates. Make sure all references to node.js and npm use the following minimum versions:

  "engines": {
    "node": "^16.19.0",
    "npm": "^8.19.3"
  },

stylelint no longer searches Drupal core for config

The linter used to crash if you hadn't run yarn install inside your Drupal core directory (and the command was required after every core update). Copy the following files (relative to the base-theme root) into your sub-theme and that problem will never happen again:

• common_design_subtheme/.stylelintignore
• common_design_subtheme/.stylelintrc.core.json — our hard-coded copy of core linting rules
• common_design_subtheme/.stylelintrc.json — Beware: if you've customized your sub-theme linting rules, they will have to be merged with this file. The major change introduced in this release is inside the extends property near the top. There used to be three references prefixed with ../../../../, but now there's just one reference to the local copy.

npm commands have been renamed

• sass:lint is now css:lint
• sass:lint-fix is now css:lint-fix

Sass has been removed from the theme

Sass is no longer in this repo. All tooling and commands have been removed, including non-sass dependencies like autoprefixer, postcss, and SCSS-related linting plugins. If you want to continue using Sass, your existing sub-themes will still contain the same tooling within each project's respective git repo, but soon our infrastructure will no longer be able to run sass at build-time. You must compile and commit locally. The following npm commands have been removed from the base-theme and newly created sub-themes:

• sass:build
• sass:compile
• sass:compile-dev
• sass:postcss
• sass:watch

CSS is now driven entirely by Drupal Libraries. Overrides, extends, and replacements are all available by targeting the new libraries in the base-theme: cd-resets, cd-header, cd-footer, cd-other.

CSS groups have been refactored within the Drupal Libraries. As a consequence, the CSS is output in a different order on Drupal sites. For example the CD resets are using base while most components use component — previously our compiled Sass all lived inside theme which is the last group to be output in source order. Depending on how a particular website was built, this may impact the styles. If you find that your site-specific styles are getting overridden, double check that they use the theme group so that they're loaded after the reset/layout/base styles.

⚠️ Composer and Docker-related files should be modified to stop compiling Sass at build-time: we will be removing node.js build-steps on 4 April 2023.

Markup for social menu in Footer was refactored to use Flexbox

If you overrode cd-social-menu.html.twig in a website, it will need to be updated. Add an extra <ul> and <li> tags around the social links with classnames as demonstrated below. See the base-theme's common_design_subtheme/templates/cd/cd-footer/cd-social-menu.html.twig for a complete reference:

{% embed '@common_design/cd/cd-footer/cd-social-menu.html.twig' %}
  {% block social_media %}
    <ul class="cd-footer-social__list" role="list">
      <li class="cd-footer-social__item">
        <!-- existing social link markup goes here unchanged -->
      </li>
    </ul>
  {% endblock %}
{% endembed %}

Default webfont Roboto is defined in HTML

Instead of using @import within the CSS, the fonts are now loaded in HTML. Our docs contain example markup if you implement the theme outside Drupal.

The system-ui font-face declaration has been removed

The base-theme no longer used it for quite some time, and OCHA brand guidelines recommend the use of Roboto as the default font for titles and body copy.

v7.4.1 — 2023-01-10

Overview

Fixes need for manual label when upgrading to v7.4.0. Should be a hands-free update now!

Issue Summary

• CD-254: code changes to make user menu upgrade work automatically #362

Steps to Upgrade

composer require unocha/common_design:^7

This release cancels the need for upgrade steps that appeared in the v7.4.0 release regarding the user menu. For sites that just have a "My account" link in the header, there are no additional steps needed after updating via composer.

Now the "Edit my account" and "Log out" child links are added automatically. You can still add additional actions to the user menu when logged in as an admin.

v7.4.0 — 2022-12-21

Overview

We've updated the language switcher to conform more closely to UN Multilingual Guidelines. The language switcher expands to a list of all visible options when space permits. The list of languages now displays item in its native language, instead of two-letter language codes.

The user menu no longer has as many configurations, and as a result takes up less space in the Global Header.

Issue Summary v7.4.0 (2022-12-21)

• Language Switcher conforms to UN Multilingual guidelines (bd4a2e1)
• Clean up User menu inside new Global Header (fbfcd5b)
• Regular security updates

Steps to Upgrade

First, upgrade with Composer:

composer require unocha/common_design:^7

If you've overridden either of the following templates, be sure to copy the changes made to the base-theme templates into your overrides. See PR for the minimal changes.

• templates/block/block--language-block.html.twig
• templates/navigation/links--language-block.html.twig

If the Language Switcher expands too soon, causing wrapping on your site:

1. Copy the new component from the base-theme's common_design_subtheme/components/cd-language-switcher into your site's active sub-theme. Don't forget to define it in your sub-theme's libraries.yml file!
2. Add the component to your global-styling library or elsewhere that ensures it is enabled site-wide.
3. Modify the component's media queries to meet your site's layout requirements.

Changes required to the User menu

• The top-level "My account" should be created by you, with the custom text My account instead of %username%. Do not choose your own label. We want consistency across OCHA sites, plus the standard label can be automatically translated.
• The nested "My account" link should be the system-defined one that prevents you from editing the label. When logged in, the label automatically changes to "Edit my account" in English.

v7.3.0 — 2022-11-16

Overview

• Typography overhaul based on conversations with SCB, ReliefWeb, and Digital Services Section. The defaults have been tightened up and reduced in size, with the large typography being retained in a "Spacious" variant that you can apply to containers.
• A new Card variant exists, whose entire surface is clickable.

Features

• CD Clickable Card (4467d04)
• Clickable variant for CD Card (e8a57de)

Bug Fixes

• avoid abbreviations in visually-hidden logo text (8bb19fc)
• update typography based on coordination with SCB and RW (1fdf272), #341 #342
• Regular security updates

Full Changelog: v7.2.1..v7.3.0

Steps to Upgrade

Updating the base theme with Composer is the only step:

composer require unocha/common_design:^7

v7.2.1 - 2022-08-01

Overview

Improves the display of the search and refines the styles for the active menu items when Javascript is disabled. No manual changes required on a stock sub-theme.

Issue Summary

• CD-397: Improve styles when Javascript is disabled by @left23 in #329

Full Changelog: v7.2.0...v7.2.1

Steps to Upgrade

composer require unocha/common_design:^7

v7.2.0 - 2022-07-04

Overview

Adopt --brand color variables in all CD Components

Issue Summary

• CD-394: adopt --brand colors in all CD Components #327
• CD-401: namespace page embeds to avoid conflict with sub theme overrides #333

Steps to Upgrade

composer require unocha/common_design

v7.1.0 - 2022-06-29

Overview

Uses brand colours for CD Button, adds visual indicator for unpublished nodes, and fixes a typo in the libraries yml file that was causing errors.

Issue Summary

• CD-388: Adopt brand vars for CD Button and update default --brand color in base-theme #326
• CD-372: Remove pesky dash that was causing errors #330
• CD-387: Update contributor docs #324
• CD-382: Visual indicator for unpublished nodes #325
• Regular security updates #323

Steps to Upgrade

composer require unocha/common_design