UHF-8489 Helfi link button plugin

src/scss/05_objects/__index.scss

@@ -1,5 +1,6 @@
 @import 'icons/_index';
 @import 'button';
+@import 'button-v2';
 @import 'card';
 @import 'hyphenate';
 @import 'link';

src/scss/05_objects/_button-v2.scss

@@ -0,0 +1,169 @@
+// TODO: UHF-8792 If sensible lets try to get rid of the hdbt-icon class (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8792).
+// This is the first approach towards simplifying the HDS button and getting rid of hdbt-icon classes.
+a[data-variant][href] {
+  @include font('button');
+
+  --border-width: 2px;
+  --color: inherit;
+  --min-size: 44px;
+  --outline-gutter: 2px;
+  --outline-width: 3px;
+  align-content: flex-start;
+  align-items: center;
+  background-color: var(--background-color, transparent);
+  border: var(--border-width) solid var(--border-color, transparent);
+  border-radius: 0;
+  box-sizing: border-box;
+  color: var(--color);
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: $font-weight-medium;
+  gap: $spacing;
+  justify-content: center;
+  line-height: 1.25em;
+  min-height: var(--min-size);
+  min-width: var(--min-size);
+  padding: var(--spacing-s) var(--spacing-m);
+  text-decoration: none;
+  vertical-align: top;
+
+  &:hover,
+  &:focus,
+  &:active {
+    transition-duration: 85ms;
+    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
+    transition-property: background-color, border-color, color;
+    transition-timing-function: ease-out;
+  }
+
+  &:hover {
+    background-color: var(--background-color-hover, transparent);
+    color: var(--color-hover);
+  }
+
+  &:focus {
+    background-color: var(--background-color-focus, transparent);
+    color: var(--color-focus);
+  }
+
+  &:focus:hover {
+    background-color: var(--background-color-hover-focus, transparent);
+  }
+
+  &:active,
+  &:focus {
+    outline: var(--outline-width) solid var(--focus-outline-color);
+    outline-offset: var(--outline-gutter);
+  }
+
+  &[data-icon-start]::before {
+    @include pseudo-icon(null, $size: $spacing-and-half, $color: currentColor);
+    margin-block: -2px;
+
+    &:not(:last-child) {
+      margin-left: -8px;
+    }
+  }
+
+  &:where(
+    [data-is-external],
+    [data-protocol='tel'],
+    [data-protocol='mailto']
+  )::after {
+    @include pseudo-icon(null, $size: $spacing-and-half, $color: currentColor);
+    margin-block: -2px;
+
+    &:not(:first-child) {
+      margin-right: -8px;
+    }
+  }
+
+  &[data-is-external]::after {
+    @include pseudo-icon-replace('link-external');
+  }
+
+  &[data-protocol='tel']::after {
+    @include pseudo-icon-replace('tel');
+  }
+
+  &[data-protocol='mailto']::after {
+    @include pseudo-icon-replace('mailto');
+  }
+
+  &[data-variant='supplementary']:not([data-icon-start]):not(
+    [data-is-external],
+    [data-protocol='tel'],
+    [data-protocol='mailto']
+  )::before,
+  &[data-variant='supplementary'][data-icon-start]:not(
+    [data-is-external],
+    [data-protocol='tel'],
+    [data-protocol='mailto']
+  )::after {
+    @include pseudo-icon('arrow-right', $size: $spacing-and-half, $color: currentColor, $display: inline-block);
+    @include hover-link-arrow-transition;
+    margin-block: -2px;
+    order: 3;
+    position: static;
+    transform: scaleX(var(--lang-direction, 1));
+  }
+
+  // Content from HDS button.css starts
+  // .hds-button
+  &[data-variant='primary'] {
+    --background-color: var(--theme-bg1, var(--color-bus));
+    --background-color-hover: var(--theme-bg2, var(--color-bus-dark));
+    --background-color-focus: var(--theme-bg1, var(--color-bus));
+    --background-color-hover-focus: var(--theme-bg2, var(--color-bus-dark));
+    --background-color-disabled: var(--color-black-20);
+    --border-color: var(--theme-bg1, var(--color-bus));
+    --border-color-hover: var(--theme-bg1, var(--color-bus-dark));
+    --border-color-focus: var(--theme-bg1, var(--color-bus));
+    --border-color-hover-focus: var(--theme-bg1, var(--color-bus-dark));
+    --border-color-disabled: var(--color-black-20);
+    --color: var(--theme-fg1, var(--color-white));
+    --color-hover: var(--theme-fg2, var(--color-white));
+    --color-focus: var(--theme-fg1, var(--color-white));
+    --color-hover-focus: var(--theme-fg2, var(--color-white));
+    --color-disabled: var(--color-white);
+    --focus-outline-color: var(--theme-focus, var(--color-coat-of-arms));
+  }
+
+  &[data-variant='secondary'] {
+    --background-color: var(--theme-bg2, transparent);
+    --background-color-hover: var(--theme-bg1, var(--color-bus-light));
+    --background-color-focus: var(--theme-bg2, transparent);
+    --background-color-hover-focus: var(--theme-bg1, var(--color-bus-light));
+    --background-color-disabled: transparent;
+    --border-color: var(--theme-bg1, var(--color-bus));
+    --border-color-hover: var(--theme-bg2, var(--color-bus-dark));
+    --border-color-focus: var(--theme-bg1, var(--color-bus));
+    --border-color-hover-focus: var(--theme-bg2, var(--color-bus-dark));
+    --border-color-disabled: var(--color-black-50);
+    --color: var(--theme-fg2, var(--color-bus));
+    --color-hover: var(--theme-fg1, var(--color-bus-dark));
+    --color-focus: var(--theme-fg2, var(--color-bus));
+    --color-hover-focus: var(--theme-fg1, var(--color-bus-dark));
+    --color-disabled: var(--color-black-40);
+    --focus-outline-color: var(--theme-focus, var(--color-coat-of-arms));
+  }
+
+  &[data-variant='supplementary'] {
+    --background-color: var(--theme-bg2, transparent);
+    --background-color-hover: var(--theme-bg2, var(--color-bus-light));
+    --background-color-focus: var(--theme-bg2, transparent);
+    --background-color-hover-focus: var(--theme-bg2, var(--color-bus-light));
+    --background-color-disabled: transparent;
+    --border-color: var(--theme-bg2, transparent);
+    --border-color-hover: var(--theme-bg2, transparent);
+    --border-color-focus: var(--theme-bg2, var(--color-coat-of-arms));
+    --border-color-hover-focus: var(--theme-bg2, var(--color-coat-of-arms));
+    --border-color-disabled: transparent;
+    --color: var(--theme-fg2, var(--color-bus));
+    --color-hover: var(--theme-fg2, var(--color-bus-dark));
+    --color-focus: var(--theme-fg2, var(--color-bus));
+    --color-hover-focus: var(--theme-fg2, var(--color-bus-dark));
+    --color-disabled: var(--color-black-40);
+    --focus-outline-color: var(--theme-focus, transparent);
+  }
+}

src/scss/ckeditor.scss

@@ -10,6 +10,10 @@
 @import '01_variables/_index';
 @import '02_mixins/_index';
 
+// The hds-button styles depend on hds_base variables.
+// TODO: UHF-8794 We should fix the 05_objects/_button to use our own variables and not hds variables (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8794).
+@import '03_generic/_hds_base';
+
 .ck-content {
   @import '03_generic/_index';
 
@@ -27,6 +31,8 @@
 
   // Import only the styles that are needed for the ckeditor content creation and not the whole __index.scss
   @import '05_objects/_quote';
+  @import '05_objects/_button';
+  @import '05_objects/_button-v2';
 }
 
 // Additional styling for links.
@@ -48,6 +54,23 @@
     @include pseudo-icon('tel', calc(var(--line-height) * 1em), currentColor, inline-block);
     overflow: hidden;
   }
+
+  // Button styles rely on data-attributes which are not available in CKE5.
+  // TODO: UHF-8794 We should fix the 05_objects/_button to drop the support for data-attributes like data-selected-icon (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8794).
+  &.hds-button:not([data-selected-icon], [data-is-external='true'])::before {
+    content: none !important;
+  }
+
+  // Switch HDS button label cursor to default to indicate user for an editable element.
+  &[data-variant] {
+    cursor: text;
+  }
+
+  // Fix the cursor bug when clicking outside of button link.
+  &.ck-editor__editable ~ a:not(.ck-editor__editable) {
+    margin-inline-end: 3px;
+    margin-inline-start: 3px;
+  }
 }
 
 // CKEditor5 overrides for lists.

webpack.svgToSprite.js

@@ -91,9 +91,11 @@ class svgToSprite {
     // SVG to CSS.
     // Create styles for the icons.
     compiler.hooks.emit.tapAsync('svgToCss', (compilation, callback) => {
-      let useOldClass = true; // TODO: UHF-8792 If sensible lets try to get rid of the hdbt-icon class. If that can be done, remove this (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8792).
+      // TODO: UHF-8792 If sensible lets try to get rid of the hdbt-icon class. If that can be done, remove this (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8792).
+      // TODO: Related to UHF-8792 and UHF-8489, turned off the "useOldClass". This, and the code related to hdbt-icon classes can be removed in UHF-8792.
+      let useOldClass = false;
 
-      // Create --hel-icon--{icon name} CSS variables.
+      // Create --hel-icon--{icon name} and [data-icon-start:'{icon name}'] CSS variables.
       let cssVariables = [];
 
       while(this.cssVariables.length) {
@@ -104,13 +106,13 @@ class svgToSprite {
       }
       cssVariables = `:root{${ cssVariables.join(';') }}`;
 
-      // Create .hel-icon--{icon name} or {theme-name}--{icon name} css classes.
+      // Create .hel-icon--{icon name} & [data-icon-start:'{icon name}'] or {theme-name}--{icon name} css classes.
       let cssClasses = '';
       while(this.classes.length) {
         let fullFilename = this.classes.shift();
         let filename = fullFilename.replace(/^.*[\\\/]/, '')
         let name = filename.split('.');
-        cssClasses += `.${this.iconClass}-icon--${name[0]}{--url:var(--${this.iconClass}-icon--${name[0]})}`;
+        cssClasses += `.${this.iconClass}-icon--${name[0]},[data-icon-start='${name[0]}']{--url:var(--${this.iconClass}-icon--${name[0]})}`;
 
         // TODO: UHF-8792 If sensible lets try to get rid of the hdbt-icon class. If that can be done, remove this (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8792).
         if (useOldClass) {
@@ -121,7 +123,7 @@ class svgToSprite {
       // Add a URL as a CSS variable to the hel-icon mask-image.
       // If icons are used elsewhere (f.e. in a separate theme or module) this
       // variable will provide the correct URL for the icon.
-      let hdbtIconUrl = `.${this.iconClass}-icon{` +
+      let hdbtIconUrl = `.${this.iconClass}-icon,[data-icon-start]::before{` +
         `-webkit-mask-image:var(--url);` +
         `mask-image:var(--url)` +
       `}`;
@@ -160,7 +162,7 @@ class svgToSprite {
         let fullFilename = this.ckeditorVariables.shift();
         let filename = fullFilename.replace(/^.*[\\\/]/, '')
         let name = filename.split('.');
-        cssClasses += `[data-selected-icon=${name[0]}]::before{` +
+        cssClasses += `[data-icon-start=${name[0]}]::before,[data-selected-icon=${name[0]}]::before{` +
           `-webkit-mask-image:var(--${this.iconClass}-icon--${name[0]});` +
           `mask-image:var(--${this.iconClass}-icon--${name[0]})` +
           `}`;