[CIVIC-1295] Added content components support for CKEditor. (#1156)

* [CIVIC-1295] fix ckeditor5 styles

* [CIVIC-1295] refactored the import

* [CIVIC-1295] added more comment

* [CIVIC-1295] imported color variables

* [CIVIC-1295] fix linting and remove unused extend statement

* [CIVIC-1295] updated the storybook for editor-content

* Removed editor styles component from UI Kit.

* Fixed links not being styled by default in Basic content component.

* Fixed editor styles not being applied in Drupal.

* Added colours variables to ckeditor.

---------

Co-authored-by: Alex Skrypnyk <alex@drevops.com>

web/themes/contrib/civictheme/assets/sass/theme.editor.scss

@@ -0,0 +1,14 @@
+//
+// Editor styles.
+//
+// stylelint-disable scss/at-import-partial-extension
+
+// Import only required partials to minimize CSS output.
+@import 'components/00-base/variables';
+@import 'components/00-base/**/mixins/*.scss';
+@import 'components/00-base/**/fonts';
+
+.ck-editor__editable {
+  @include ct-content();
+  @include ct-content-light();
+}

web/themes/contrib/civictheme/civictheme.info.yml

@@ -89,6 +89,12 @@ components:
 
 ckeditor5-stylesheets:
   - dist/civictheme.editor.css
+  - dist/civictheme.variables.css
+  # Using colors from the Color Selector is not supported until the issue
+  # below is resolved.
+  # @see https://www.drupal.org/project/drupal/issues/3406959
+  # - /sites/default/files/css-variables.civictheme.css
+
 #;< DEVELOPMENT
 # Configuration shipped with this theme.
 # Update the list of the configuration below and run `drush cde civictheme`.

web/themes/contrib/civictheme/civictheme_library/components/00-base/mixins/_content-link.scss

@@ -0,0 +1,60 @@
+//
+// Content Link mixins.
+//
+
+@mixin ct-content-link-base() {
+  text-decoration: underline;
+  text-decoration-thickness: ct-particle(0.25);
+  text-underline-offset: ct-particle(0.375);
+  padding: ct-spacing(0.375) 0 ct-spacing(0.25);
+  word-break: break-word;
+
+  &:hover {
+    text-decoration: none;
+    padding: ct-spacing(0.375) 0 ct-spacing(0.5);
+  }
+
+  &,
+  &.ct-theme-light {
+    color: $ct-content-link-light-color;
+
+    &:focus {
+      @include ct-outline();
+    }
+
+    &:hover {
+      background-color: $ct-content-link-light-hover-background-color;
+      color: $ct-content-link-light-hover-color;
+    }
+  }
+
+  &.ct-theme-dark {
+    color: $ct-content-link-dark-color;
+
+    &:focus {
+      @include ct-outline(true);
+    }
+
+    &:hover {
+      background-color: $ct-content-link-dark-hover-background-color;
+      color: $ct-content-link-dark-hover-color;
+    }
+  }
+
+  &:visited {
+    @include ct-content-link-visited();
+  }
+}
+
+@mixin ct-content-link-visited() {
+  $root: &;
+
+  @include ct-component-theme($root) using($root, $theme) {
+    color: ct-component-var($root, $theme, visited, color);
+
+    &:hover {
+      @include ct-component-property($root, $theme, visited, hover, border-color);
+      @include ct-component-property($root, $theme, visited, hover, color);
+    }
+  }
+}

web/themes/contrib/civictheme/civictheme_library/components/00-base/mixins/_content.scss

@@ -91,6 +91,10 @@
     }
   }
 
+  a {
+    @include ct-content-link-base();
+  }
+
   blockquote {
     @include ct-typography('quote');
 

web/themes/contrib/civictheme/civictheme_library/components/01-atoms/content-link/content-link.scss

@@ -1,69 +1,5 @@
 //
-// Link component.
-//
-
-//
-// Mixins.
-//
-@mixin ct-content-link-base() {
-  text-decoration: underline;
-  text-decoration-thickness: ct-particle(0.25);
-  text-underline-offset: ct-particle(0.375);
-  padding: ct-spacing(0.375) 0 ct-spacing(0.25);
-  word-break: break-word;
-
-  &:hover {
-    text-decoration: none;
-    padding: ct-spacing(0.375) 0 ct-spacing(0.5);
-  }
-
-  &,
-  &.ct-theme-light {
-    color: $ct-content-link-light-color;
-
-    &:focus {
-      @include ct-outline();
-    }
-
-    &:hover {
-      background-color: $ct-content-link-light-hover-background-color;
-      color: $ct-content-link-light-hover-color;
-    }
-  }
-
-  &.ct-theme-dark {
-    color: $ct-content-link-dark-color;
-
-    &:focus {
-      @include ct-outline(true);
-    }
-
-    &:hover {
-      background-color: $ct-content-link-dark-hover-background-color;
-      color: $ct-content-link-dark-hover-color;
-    }
-  }
-
-  &:visited {
-    @include ct-content-link-visited ();
-  }
-}
-
-@mixin ct-content-link-visited() {
-  $root: &;
-
-  @include ct-component-theme($root) using($root, $theme) {
-    color: ct-component-var($root, $theme, visited, color);
-
-    &:hover {
-      @include ct-component-property($root, $theme, visited, hover, border-color);
-      @include ct-component-property($root, $theme, visited, hover, color);
-    }
-  }
-}
-
-//
-// Classes.
+// Content Link component.
 //
 
 .ct-content-link {

web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.editor.scss

@@ -0,0 +1,14 @@
+//
+// Editor styles.
+//
+// stylelint-disable scss/at-import-partial-extension
+
+// Import only required partials to minimize CSS output.
+@import 'components_combined/00-base/variables';
+@import 'components_combined/00-base/**/mixins/*.scss';
+@import 'components_combined/00-base/**/fonts';
+
+.ck-editor__editable {
+  @include ct-content();
+  @include ct-content-light();
+}

web/themes/contrib/civictheme/civictheme_starter_kit/assets/sass/theme.scss

@@ -7,4 +7,3 @@
 // These overrides will not be visible in the Storybook.
 // @todo Refactor webpack config to use direct import from the CivicTheme theme.
 @import 'block/local-tasks';
-@import 'editor';

web/themes/contrib/civictheme/civictheme_starter_kit/civictheme_starter_kit.info.yml

@@ -49,6 +49,11 @@ libraries-override:
 
 ckeditor5-stylesheets:
   - dist/styles.editor.css
+  - dist/styles.variables.css
+  # Using colors from the Color Selector is not supported until the issue
+  # below is resolved.
+  # @see https://www.drupal.org/project/drupal/issues/3406959
+  # - /sites/default/files/css-variables.civictheme_starter_kit.css
 
 components:
   namespaces:

web/themes/contrib/civictheme/civictheme_starter_kit/webpack/editor_css.js

@@ -2,4 +2,4 @@
  * Import current Drupal CK Editor styles to be discoverable by the loader.
  */
 
-import '../components_combined/style.editor.scss';
+import '../assets/sass/theme.editor.scss';

web/themes/contrib/civictheme/civictheme_starter_kit/webpack/webpack.common.js

@@ -2,9 +2,10 @@
 
 const path = require('path');
 const glob = require('glob');
-const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const magicImporter = require('node-sass-magic-importer');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// eslint-disable-next-line import/no-useless-path-segments
 const { isOutdated, printHeader } = require('../../../../contrib/civictheme/civictheme_library/webpack/info');
 
 printHeader();
@@ -68,7 +69,7 @@ module.exports = {
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: ({chunk}) => (chunk.name === 'main' ? 'styles.css' : `styles.${chunk.name}.css`),
+      filename: ({ chunk }) => (chunk.name === 'main' ? 'styles.css' : `styles.${chunk.name}.css`),
     }),
     new CleanWebpackPlugin({
       dry: false,

web/themes/contrib/civictheme/config/install/editor.editor.civictheme_rich_text.yml

@@ -82,7 +82,7 @@ settings:
           element: '<a class="ct-button ct-theme-light ct-button--secondary ct-button--regular">'
         -
           label: 'Large primary button'
-          element: '<a class="ct-button ct-theme-light ct-button--secondary ct-button--large">'
+          element: '<a class="ct-button ct-theme-light ct-button--primary ct-button--large">'
         -
           label: 'Large secondary large'
           element: '<a class="ct-button ct-theme-light ct-button--secondary ct-button--large">'

web/themes/contrib/civictheme/webpack/editor_css.js

@@ -2,4 +2,4 @@
  * Import current Drupal CK Editor styles to be discoverable by the loader.
  */
 
-import '../components/style.editor.scss';
+import '../assets/sass/theme.editor.scss';