Contrib.social

Update Drupal theme to use UI Kit as a library

Open on Drupal.org →
Created on 19 January 2024, 11 months ago
Updated 26 March 2024, 9 months ago

Description

CivicTheme UIKit is already split in code from the Drupal theme - the code resides in civictheme/civictheme_library.

This ticket is to update the way the UI Kit is included into the Drupal theme.

Acceptance Criteria

AC1 - UIKit code location in the civictheme directory

Given I am a developer on the consumer site
When I download the civictheme (via composer or ZIP-file from Drupal.org)
Then I see the pre-compiled UI Kit code residing in lib/uikit directory of the CivicTheme Drupal theme root
And the Drupal theme’s components is a symlink to lib/uikit/components UI Kit’s directory

AC2 - UIKit code is automatically added during publishing to Drupal.org
Given I am a developer of the CivicTheme
When I push code to develop branch of the CT Source repository
Then the UIKit is automatically added at the specific version set in package.json in the CivicTheme Drupal theme root
And the version is set to the latest published version of the UI Kit

Note: The latest published version can be found in the NPM repo: npm: @civictheme/uikit

AC3 - UIKit code can be updated for development of the Drupal theme
Given I am a developer of the CivicTheme
And I want to use a custom code version of the UIKit located on the specific branch in GitHub
When I follow the provided documentation in the Drupal theme to update the version of the UI Kit
Then I can see the U Kit code from the feature branch available in the Drupal theme when it is deployed

Solution Direction

Update the build script in the monorepo-drupal repo to install UIKit into node_modules based on the value of set in the package.json and then copy it to lib/uikit

Update PHPCS exclusion script to add the PHPCS exclusion comment (// phpcs:ignoreFile) to UI Kit’s files.

Update Bats tests to make sure that the build script has correctly sourced the UIKit codebase into the directory AND updated the symlink to components directory.

Update Bats tests to make sure that only expected UIKIt assets exists in the baked version of the Drupal theme.

Update the .gitignore file to ignore lib/uikit directory.

Update the .gitignore.artifact file to not ignore lib/uikit directory.

Provide documentation on how to switch the version of the UIKit for development.

Testing Notes

AC1 and AC2 can be tested by QA by inspecting the code in Drupal.org

AC3 can be tested by a developer or a QA with a development background by following the steps:

  1. Create a feature branch in the UIKIt repo with a minor change
  2. Create a feature branch in the monorepo-drupal repo
  3. Follow the documentation in the root of the Drupal theme’s readme file on how to switch the branch.
  4. Opening a PR in the monorepo-drupal repo
  5. Asserting that the change done in the UI Kit’s feature branch was propagated to the monorepo’s PR environment.

A “minor change” could be something visual, like altering a width of the border of an element. For example Accordion’s panel border width https://github.com/civictheme/uikit/blob/main/components/02-molecules/ac...

📌 Task
Status

Fixed

Version

1.0

Component

Code

Created by

🇦🇺Australia alex.skrypnyk Melbourne

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024