Merge pull request #909 from City-of-Helsinki/UHF-9497

UHF-9497

hdbt.theme

@@ -5,7 +5,7 @@
  * Functions to support theming in the hdbt theme.
  */
 
-declare(strict_types = 1);
+declare(strict_types=1);
 
 use Drupal\Core\Entity\ContentEntityInterface;
 use Drupal\Core\Language\LanguageInterface;

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "dev": "webpack --progress --mode=development --config  webpack.config.js --watch",
     "build": "webpack --progress --mode=production --config webpack.config.js",
-    "preinstall": "npx browserslist@latest --update-db",
+    "preinstall": "npx update-browserslist-db@latest",
     "postinstall": "husky install",
     "lint": "lint-staged --allow-empty",
     "lint:js": "eslint src/",

src/scss/05_objects/_button.scss

@@ -539,11 +539,6 @@ p > a.hds-button.hds-button--supplementary:first-child {
   --outline-width: 3px;
 }
 
-// Hide target blank explanation text from others than screen-readers
-.hds-button__target-blank {
-  @include visually-hidden;
-}
-
 // Combat ckeditor leaking spans from inside buttons and hds setting these spans stupid paddings and margins
 :not(.hds-button) > .hds-button__label {
   margin: 0;

src/scss/06_components/paragraphs/_banner.scss

@@ -45,7 +45,7 @@
   padding-top: $spacing-double;
 }
 
-a.banner__button {
+.component--banner .banner__content-wrapper > a[data-hds-component='button'] {
   margin: $spacing-double auto 0;
 }
 
@@ -76,7 +76,7 @@ a.banner__button {
   }
 
   &.component--banner-has-icon {
-    .banner__button {
+    a {
       @include breakpoint($breakpoint-l) {
         margin-left: auto;
         margin-right: 0;

templates/module/helfi_api_base/helfi-link.html.twig

@@ -14,7 +14,11 @@
 
   {# Check if we want to render old link icons, the new links with data-hds="button" use pseudo elements instead #}
   {% set render_old_link = false %}
-  {% if 'data-hds-component' not in attributes|keys or attributes['data-hds-component'] != 'button' %}
+
+  {% if
+    ('data-hds-component' not in attributes|keys or attributes['data-hds-component'] != 'button') and
+    ('data-hds-component' not in url.options.attributes|keys or url.options.attributes['data-hds-component'] != 'button')
+  %}
     {% set render_old_link = true %}
   {% endif %}
 
@@ -24,6 +28,10 @@
     {% endif %}
   {% endif %}
 
+  {% if 'data-open-in-new-tab' in url.options.attributes|keys %}
+    <span class="visually-hidden">({{ 'The link opens in a new tab'|t({}, {'context': 'Explanation for users that the link opens in a new tab instead of the expected current tab'}) }}.)</span>
+  {% endif %}
+
   {% if 'data-is-external' in attributes|keys %}
     {%- set attribute_icon -%}
       {%- if render_old_link -%}

templates/navigation/link-button.html.twig

@@ -4,11 +4,9 @@
  * - label: String for the label visible in link.
  * - url: String for the url to link to.
  * - type: primary, secondary or supplementary type of button.
- * - size: small or unset.
  * - open_in_a_new_window: Boolean for opening in a new window and showing explanation.
  * - icon: Boolean if first icon is enabled
  * - icon_type: String for first icon type
- * - class: Optional String to be added to the class list
  *
  * Usage example:
  * {% include '@hdbt/navigation/link-button.html.twig' with {
@@ -21,44 +19,18 @@
  *
  * TODO: UHF-8793 Refactor hds-button (https://helsinkisolutionoffice.atlassian.net/browse/UHF-8793).
  */
- #}
-
-{% if type == 'primary' %}
-  {% set type_class = 'hds-button--primary' %}
-{% elseif type == 'secondary' %}
-  {% set type_class = 'hds-button--secondary' %}
-{% elseif type == 'supplementary' %}
-  {% set type_class = 'hds-button--supplementary' %}
-{% endif %}
-
-{% set classes = [
-  'hds-button',
-  'hds-button--link',
-  type_class,
-  size == 'small' ? 'hds-button--small',
-  class,
-] %}
-
-
-{% set explain = null %}
-{% set link_options = {class: classes|join(' ')} %}
+#}
+{% set link_options = {
+  'data-hds-component':'button',
+  'data-hds-variant': type,
+} %}
 
 {% if open_in_a_new_window %}
-  {%- set explain -%}
-    <span class="hds-button__target-blank">({{ 'The link opens in a new tab'|t({}, {'context': 'Explanation for users that the link opens in a new tab instead of the expected current tab'}) }}.)</span>
-  {%- endset -%}
-  {% set link_options = link_options|merge({target: '_blank'}) %}
+  {% set link_options = link_options|merge({target: '_blank', 'data-open-in-new-tab': true}) %}
 {% endif %}
 
-{% if icon == true %}
-  {% set link_options = link_options|merge({'data-selected-icon': icon_type}) %}
+{% if icon and icon_type %}
+  {% set link_options = link_options|merge({'data-hds-icon-start': icon_type}) %}
 {% endif %}
 
-{% set title %}
-  <span class="hds-button__label">
-    {{ label }}
-    {{ explain }}
-  </span>
-{% endset %}
-
-{{ link(title, url, link_options) }}
+{{ link(label, url, link_options) }}

templates/paragraphs/paragraph--banner.html.twig

@@ -40,9 +40,8 @@
 {% set link = content.field_banner_link.0['#url'] %}
 {% set text = content.field_banner_link.0['#title'] %}
 {% set link_type = content.field_banner_link_design[0]['#markup'] %}
-{% set open_in_a_new_window = content.field_banner_link.0['#options']['target_new'] %}
-{% set icon = content.field_banner_link.0['#options']['icon'] %}
-
+{% set open_in_a_new_window = link.options.target_new %}
+{% set icon = link.options.icon %}
 {% block paragraph %}
   {% if has_content %}
     {% embed "@hdbt/misc/component.twig" with
@@ -75,7 +74,6 @@
               type: link_type|clean_class,
               label: text,
               url: link,
-              class: 'banner__button',
               open_in_a_new_window: open_in_a_new_window,
               icon: icon ? true : false,
               icon_type: icon ? icon|clean_class,

templates/paragraphs/paragraph--hearings.html.twig

@@ -25,8 +25,6 @@
           type: 'primary',
           label: 'See all hearings'|t({},{'context': 'See all hearings link text'}),
           url: 'https://kerrokantasi.hel.fi/hearings/list?lang=' ~ current_langcode,
-          class: 'hearings__link',
-          is_external: true,
         } %}
       {% else %}
         <section class="hearings__results">
@@ -36,8 +34,6 @@
           type: 'primary',
           label: 'See all already closed hearings'|t({},{'context': 'See closed hearings link text'}),
           url: 'https://kerrokantasi.hel.fi/hearings/list?lang=' ~ current_langcode,
-          class: 'hearings__link',
-          is_external: true,
         } %}
       {% endif %}
     {% endblock component_content %}