Merge branch 'development'

.storybook/preview-head.html

@@ -1,4 +1,5 @@
 <link rel="stylesheet" type="text/css" href="oe-bcl-default.min.css" />
+<link rel="stylesheet" type="text/css" href="color-scheme.min.css" />
 <script
   type="text/javascript"
   src="oe-bcl-default.bundle.min.js"

CHANGELOG.md

@@ -3,7 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## v1.2.3 (2024-07-23)
+## v1.4.0 (2024-08-09)
+
+#### :rocket: New Feature
+* [#577](https://github.com/openeuropa/bootstrap-component-library/pull/577) EPHEH-313: Implement Color Scheme ([@tibi2303](https://github.com/tibi2303))
+
+#### :nail_care: Enhancement
+* [#600](https://github.com/openeuropa/bootstrap-component-library/pull/600) feat(file): Added download attributes. - OEL-2772 ([@tibi2303](https://github.com/tibi2303))
+* [#601](https://github.com/openeuropa/bootstrap-component-library/pull/601) feat(links-block): Check for links block if links are not present. - OEL-2793 ([@tibi2303](https://github.com/tibi2303))
+
+## v1.3.0 (2024-07-23)
 
 #### :nail_care: Enhancement
 * [#596](https://github.com/openeuropa/bootstrap-component-library/pull/596) OEL-3066: Replaced twitter icon. ([@tibi2303](https://github.com/tibi2303))

bootstrap/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-bootstrap",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "OE - BCL bootstrap 5 sources",
   "bin": {
     "plugins-builder": "./bin/build-plugins.js"

builder/README.md

@@ -40,3 +40,109 @@ commands which all supports multiple operations as items in an array.
 #### Sprite
 
 `sprite: [ { entry: (string), dest: (string), options: (object) { file: (string) (defaut: bcl-icons.svg), list: (array of file names) (optional), }, }, ],`
+
+---
+
+#### Color Scheme
+
+```javascript
+ * Example config object: {
+ colorScheme: [
+  {
+    entry: path.resolve("resources/sass/color-scheme-variables.scss"),
+    dest: path.resolve(outputFolder, "assets/css/color_scheme.min.css"),
+    options: {
+      includePaths,
+      sourceMap: "file",
+    },
+  },
+],
+```
+
+This following example is the entry of the colorScheme. The scss file should look like this. It also support multiple color schemes.
+Example SCSS file of color-scheme.scss:
+
+```scss
+$colors-schemes: (
+  "ocean": (
+    "primary": #4eac00,
+    "secondary": #fbff00,
+    "danger": #ff8800,
+    "success": #4dff00,
+    "text": #294d26,
+    "background": #ffdfb0,
+    "link": #7b00ff,
+  ),
+);
+```
+
+You can find multiple plugins here:
+[Postcss Plugins](https://github.com/postcss/postcss/blob/main/docs/plugins.md)
+
+The color-scheme enables the possibility to theme the colors used in BCL. It overrides the variables `$theme-colors` used by Bootstrap ([Bootstrap Theme Colors](https://getbootstrap.com/docs/5.0/customize/color/#theme-colors)).
+
+We've also added some new variables that overwrite and make use of extra classes:
+
+- `.text-color-default`: Text color is changed based on the 'text' variable, overriding all text colors inside a component.
+- `.bg-default`: Background color is changed based on the 'background' variable. It adds a background for the component but does not override if it already has a `bg` class (e.g., `bg-primary`).
+
+### Prerequisites
+
+- BCL-Builder version >= 1.2.1
+- BCL-Bootstrap version >= 1.2.1
+- BCL-Theme-Default >= 1.2.1
+
+### Setup Color Schema
+
+Step 1:
+Depending on your package manager:
+
+Yarn:
+
+- yarn add @openeuropa/bcl-builder --save
+- yarn add @openeuropa/bcl-bootstrap --save
+- yarn add @openeuropa/bcl-theme-default --save
+
+NPM:
+
+- npm install @openeuropa/bcl-builder --save
+- npm install @openeuropa/bcl-bootstrap --save
+- npm install @openeuropa/bcl-theme-default --save
+
+Step 2:
+Add the following bcl-builder.config.js file:
+
+```javascript
+  colorScheme: [
+    {
+      entry: path.resolve(outputFolder, "path to the color-scheme scss file"),
+      dest: path.resolve(outputFolder, "compiled "),
+      options: {
+        includePaths,
+        minify: true,
+        sourceMap: "file",
+      },
+    },
+  ],
+```
+
+Step 3:
+Add in your package.json the following command:
+
+```javascript
+  "build:color-scheme": "bcl-builder color-scheme",
+```
+
+Note: We are using ([npm-run-all package](https://www.npmjs.com/package/npm-run-all)) in BCL in order for all scripts for bcl-builder to be run at once:
+Example:
+
+```javascript
+    "build": "npm-run-all build:*",
+    "build:styles": "bcl-builder styles",
+    "build:color-scheme": "bcl-builder color-scheme",
+    "build:scripts": "bcl-builder scripts",
+    "build:copy": "bcl-builder copy",
+    "build:sprite": "bcl-builder sprite",
+```
+
+---

builder/bin/build.js

@@ -5,6 +5,7 @@ const program = require("commander");
 const buildScript = require("../scripts/scripts");
 const browserslist = require("browserslist");
 const { buildStyles } = require("../scripts/styles");
+const { buildColorScheme } = require("../scripts/colorScheme");
 const rename = require("../scripts/rename");
 const copyFiles = require("../scripts/copy");
 const makeSprite = require("../scripts/sprite");
@@ -57,6 +58,16 @@ program
     );
   });
 
+program
+  .command("color-scheme")
+  .description("compile Color scheme SCSS to CSS")
+  .action(() => {
+    const config = loadConfig(program.config);
+    config.colorScheme.forEach((conf) =>
+      buildColorScheme(conf.entry, conf.dest, conf.options)
+    );
+  });
+
 program
   .command("sprite")
   .description("make svg sprites")

builder/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-builder",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Bootstrap Component Library builder",
   "publishConfig": {
     "access": "public"

builder/scripts/colorScheme.js

@@ -0,0 +1,127 @@
+/**
+ * Compile scss files.
+ *
+ * @param {string} from - Path to a folder or file.
+ * @param {string} to - String to prefix, suffix or replace the current file name.
+ * @param {object} options - Object
+ *
+ * Example config object: {
+ *
+ *  color-scheme: [
+ *   {
+ *     entry: path.resolve("resources/sass/color-scheme-variables.scss"),
+ *     dest: path.resolve(outputFolder, "assets/css/color_scheme.min.css"),
+ *     options: {
+ *       includePaths,
+ *       sourceMap: "file",
+ *     },
+ *   },
+ * ],
+ */
+
+const sass = require("sass");
+const path = require("path");
+const fs = require("fs");
+const postcss = require("postcss");
+const cssnano = require("cssnano");
+const prefixer = require("postcss-prefix-selector");
+const autoprefixer = require("autoprefixer");
+
+const getPlugins = (options) => {
+  const plugins = [];
+
+  plugins.push(autoprefixer({ grid: "no-autoplace" }));
+
+  if (options.minify) {
+    plugins.push(cssnano({ safe: true }));
+  }
+
+  return plugins;
+};
+
+const buildColorScheme = (entry, dest, options) => {
+  const plugins = getPlugins(options);
+
+  let postcssSourceMap = false;
+  if (options.sourceMap === true) {
+    postcssSourceMap = true; // inline
+  } else if (options.sourceMap === "file") {
+    postcssSourceMap = options.sourceMap; // as a file
+  }
+
+  // Read contents of the entry file and the base color scheme SCSS file
+  const entryVariables = fs.readFileSync(entry, "utf8");
+  const imports = fs.readFileSync(
+    path.resolve(
+      ...(options.includePaths || []),
+      "@openeuropa/bcl-theme-default/src/scss/color-scheme.scss"
+    ),
+    "utf8"
+  );
+  const generator = fs.readFileSync(
+    path.resolve(
+      ...(options.includePaths || []),
+      "@openeuropa/bcl-theme-default/src/scss/color_scheme/generator.scss"
+    ),
+    "utf8"
+  );
+
+  // Concatenate the contents
+  const scssContent = imports + "\n" + entryVariables + "\n" + generator;
+
+  const sassResult = sass.renderSync({
+    data: scssContent,
+    outFile: dest,
+    noErrorCss: true,
+    outputStyle: "expanded",
+    sourceMap: options.sourceMap !== false,
+    sourceMapContents: options.sourceMap === true,
+    sourceMapEmbed: options.sourceMap === true,
+    includePaths: [
+      path.resolve(process.cwd(), "node_modules"),
+      ...(options.includePaths || []),
+    ],
+  });
+
+  postcss(plugins)
+    .use(
+      prefixer({
+        prefix: options.prefix ? options.prefix : "",
+
+        transform: function (
+          prefix,
+          selector,
+          prefixedSelector,
+          filePath,
+          rule
+        ) {
+          if (prefix) {
+            return prefixedSelector;
+          } else {
+            return selector;
+          }
+        },
+      })
+    )
+    .process(sassResult.css, {
+      map:
+        postcssSourceMap === "file"
+          ? { inline: false, prev: sassResult.map.toString() }
+          : postcssSourceMap,
+      from: entry,
+      to: dest,
+    })
+    .then((postcssResult) => {
+      fs.mkdirSync(path.dirname(dest), { recursive: true });
+      fs.writeFileSync(dest, postcssResult.css);
+
+      if (postcssResult.map) {
+        fs.writeFileSync(`${dest}.map`, postcssResult.map.toString());
+      }
+    });
+};
+
+module.exports = {
+  getPlugins,
+  buildColorScheme,
+};

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0",
+  "version": "1.4.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "changelog": {

patches/drupal-attribute+1.0.2.patch

@@ -0,0 +1,51 @@
+diff --git a/src/index.js b/src/index.js
+index 3197dc8..406abfe 100644
+--- a/node_modules/drupal-attribute/src/index.js
++++ b/node_modules/drupal-attribute/src/index.js
+@@ -100,6 +100,44 @@ class DrupalAttribute extends Map {
+
+     return result;
+   }
++
++  /**
++   * Merge another DrupalAttribute instance into this one.
++   * @param {DrupalAttribute} collection
++   * @returns {DrupalAttribute}
++  */
++  merge(collection) {
++    // Convert both the current attributes and the input collection's attributes to plain objects.
++    let currentAttributes = Object.fromEntries(this);
++    let newAttributes = Object.fromEntries(collection);
++
++    // Perform a deep merge.
++    let mergedAttributes = this.mergeDeep(currentAttributes, newAttributes);
++
++    // Clear the current Map and set the merged attributes.
++    this.clear();
++    for (let key in mergedAttributes) {
++      this.set(key, mergedAttributes[key]);
++    }
++
++    return this;
++  }
++  
++  // Helper function for deep merging.
++  mergeDeep(target, source) {
++    for (let key in source) {
++      if (source[key] instanceof Array) {
++        if (!target[key]) target[key] = [];
++        target[key] = Array.from(new Set(target[key].concat(source[key])));
++      } else if (source[key] instanceof Object) {
++        if (!target[key]) target[key] = {};
++        Object.assign(source[key], this.mergeDeep(target[key], source[key]));
++      } else {
++        target[key] = source[key];
++      }
++    }
++    return target;
++  }
+ }
+
+-module.exports = DrupalAttribute;
+\ No newline at end of file
++module.exports = DrupalAttribute;

scripts/watch.js

@@ -27,6 +27,18 @@ const handlers = [
       },
     ],
   },
+  {
+    pattern: `${path.resolve(__dirname, "..")}/src/themes/*/src/scss/**/*.scss`,
+    events: [
+      {
+        on: "change",
+        name: "scss change",
+        command: `lerna --scope \"@openeuropa/bcl-theme-${theme}\" run update:color-scheme`,
+        message: "New styles ready",
+        reload: "*.css",
+      },
+    ],
+  },
   {
     pattern: `${path.resolve(__dirname, "..")}/src/themes/*/src/js/**/*.js`,
     events: [

src/components/bcl-accordion/package.json

@@ -2,13 +2,13 @@
   "name": "@openeuropa/bcl-accordion",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "publishConfig": {
     "access": "public"
   },
   "description": "OE - BCL accordion",
   "dependencies": {
-    "@openeuropa/bcl-button": "^1.3.0"
+    "@openeuropa/bcl-button": "^1.4.0"
   },
   "repository": {
     "type": "git",