Merge pull request #1141 from City-of-Helsinki/UHF-10907_external_icon

UHF-10907 external icon

dist/icons.json

@@ -1 +1 @@
-["zoom-text","zoom-out","zoom-in","youth","wifi","wifi-crossed","virus","vaccine","user","upload","upload-cloud","traveler","trash","ticket","star","star-fill","speechbubble","speechbubble-text","sort","sort-descending","sort-ascending","sort-alphabetical-descending","sort-alphabetical-ascending","signout","signin","share","senior","search","refresh","question-circle","question-circle-fill","printer","podcast","plus","plus-circle","plus-circle-fill","photo","phone","person-wheelchair","person-male","person-female","paperclip","occupation","mover","mobile","minus","minus-circle","minus-circle-fill","menu-hamburger","menu-dots","map","location","locate","link","layers","key","info-circle","info-circle-fill","home","home-smoke","heart","heart-fill","group","glyph-euro","glyph-at","globe","family","face-smile","face-sad","face-neutral","eye","eye-crossed","error","error-fill","envelope","entrepreneur","download","download-cloud","document","display","customer-bot-neutral","cross","cross-circle","cross-circle-fill","company","cogwheel","clock","children","check","check-circle","check-circle-fill","camera","calendar","calendar-clock","arrow-up","arrow-right","arrow-left","angle-up","angle-right","angle-left","angle-down","alert-circle","alert-circle-fill","youtube","yle","whatsapp","vimeo","twitter","twitch","tiktok","snapchat","rss","linkedin","instagram","google","facebook","discord","tel","printableform","mailto","link-external","info","hero-arrow-mobile","hero-arrow-desktop","abstract-6","abstract-5","abstract-4","abstract-3","abstract-2","abstract-1","email","helsinki","helsinki-sv","helsinki-ru"]
+["zoom-text","zoom-out","zoom-in","youth","wifi","wifi-crossed","virus","vaccine","user","upload","upload-cloud","traveler","trash","ticket","star","star-fill","speechbubble","speechbubble-text","sort","sort-descending","sort-ascending","sort-alphabetical-descending","sort-alphabetical-ascending","signout","signin","share","senior","search","refresh","question-circle","question-circle-fill","printer","podcast","plus","plus-circle","plus-circle-fill","photo","phone","person-wheelchair","person-male","person-female","paperclip","occupation","mover","mobile","minus","minus-circle","minus-circle-fill","menu-hamburger","menu-dots","map","location","locate","link","layers","key","info-circle","info-circle-fill","home","home-smoke","heart","heart-fill","group","glyph-euro","glyph-at","globe","family","face-smile","face-sad","face-neutral","eye","eye-crossed","error","error-fill","envelope","entrepreneur","download","download-cloud","document","display","customer-bot-neutral","cross","cross-circle","cross-circle-fill","company","cogwheel","clock","children","check","check-circle","check-circle-fill","camera","calendar","calendar-clock","arrow-up","arrow-right","arrow-left","angle-up","angle-right","angle-left","angle-down","alert-circle","alert-circle-fill","youtube","yle","whatsapp","vimeo","twitter","twitch","tiktok","snapchat","rss","linkedin","instagram","google","facebook","discord","tel","printableform","mailto","link-external","link-external-part2","link-external-part1","info","hero-arrow-mobile","hero-arrow-desktop","abstract-6","abstract-5","abstract-4","abstract-3","abstract-2","abstract-1","email","helsinki","helsinki-sv","helsinki-ru"]

src/scss/02_mixins/_animation_mixins.scss

@@ -13,3 +13,11 @@
     transition: none;
   }
 }
+
+@mixin hover-external-arrow-transition() {
+  transition: mask-position 0.2s linear;
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+}

src/scss/02_mixins/_mixins.scss

@@ -47,7 +47,15 @@
   content: '';
   display: $display;
   height: $size;
-  mask-image: icon_url($icon);
+  @if type-of($icon) == list {
+    $mask-images: ();
+    @each $item in $icon {
+      $mask-images: append($mask-images, icon_url($item), comma);
+    }
+    mask-image: $mask-images;
+  } @else {
+    mask-image: icon_url($icon);
+  }
   mask-position: center;
   mask-repeat: no-repeat;
   mask-size: #{$size} #{$size};

src/scss/05_objects/_button.scss

@@ -816,26 +816,40 @@ a[href][data-hds-component='button']:not([class*='hds-button']) {
     padding-inline: $spacing;
   }
 
+  &[data-is-external]:not([data-protocol='tel'], [data-protocol='mailto']){
+    &::after{
+      @include hover-external-arrow-transition;
+    }
+
+    &:is(
+      :focus-visible,
+      :hover
+    )::after {
+      $mask-move: 0.166666666em;
+      mask-position: center, $mask-move (-1 * $mask-move);
+    }
+  }
+
   &:is(
-    [data-is-external],
     [data-protocol='tel'],
     [data-protocol='mailto']
   ){
     &::after{
       @include hover-link-arrow-transition;
+      transform: scaleX(var(--lang-direction, 1)) translateY(-50%);
     }
 
     &:is(
       :focus-visible,
       :hover
     )::after {
-      transform: scaleX(var(--lang-direction, 1))  translateY(-50%) var(--external-icon-move);
+      transform: scaleX(var(--lang-direction, 1)) translateY(-50%) var(--external-icon-move);
     }
   }
 
-
   &[data-is-external]::after {
-    @include pseudo-icon-replace('link-external');
+    $icons: 'link-external-part1', 'link-external-part2';
+    @include pseudo-icon($icons, calc(var(--line-height) * 1em), currentColor, inline-block);
 
     --external-icon-move: translate(3px, -3px);
   }

src/scss/05_objects/_link.scss

@@ -1,13 +1,13 @@
 .link__type {
-  @include pseudo-icon('link-external', calc(var(--line-height) * 1em), currentColor, inline-block);
-  @include hover-link-arrow-transition;
+  $icons: 'link-external-part1', 'link-external-part2';
+  @include pseudo-icon($icons, calc(var(--line-height) * 1em), currentColor, inline-block);
 
-  --external-icon-move: scaleX(var(--lang-direction, 1)) translate(3px, -3px);
+  --external-icon-move: scaleX(var(--lang-direction, 1));
   overflow: hidden;
   transform: scaleX(var(--lang-direction, 1));
 
   @media (prefers-reduced-motion) {
-    --external-icon-move: scale(1);
+    --external-icon-move: scaleX(var(--lang-direction, 1)); // This overrides the tel and mailto transitions
   }
 }
 
@@ -16,14 +16,27 @@ a:hover .link__type {
   transform: var(--external-icon-move);
 }
 
+.link__type--external {
+  @include hover-external-arrow-transition;
+}
+
+a:focus .link__type--external,
+a:hover .link__type--external {
+  $mask-move: 0.166666666em;
+  mask-position: center, $mask-move (-1 * $mask-move);
+}
+
+.link__type--tel,
+.link__type--mailto {
+  @include hover-link-arrow-transition;
+
+  --external-icon-move: scaleX(var(--lang-direction, 1)) rotate(calc(15deg * var(--lang-direction, 1)));
+}
+
 .link__type--tel {
   @include pseudo-icon-replace('tel');
-
-  --external-icon-move: scaleX(var(--lang-direction, 1)) rotate(15deg);
 }
 
 .link__type--mailto {
   @include pseudo-icon-replace('mailto');
-
-  --external-icon-move: scaleX(var(--lang-direction, 1)) rotate(15deg);
 }

src/scss/ckeditor.scss

@@ -221,9 +221,37 @@ a.hds-button.hds-button--supplementary:not([data-selected-icon], [data-is-extern
   position: static;
 }
 
-[data-is-external]::after {
-  mask-image: var(--hel-icon--link-external);
-  position: static;
+[data-is-external]{
+  &::after {
+    @include hover-external-arrow-transition;
+    mask-image: var(--hel-icon--link-external-part1), var(--hel-icon--link-external-part2);
+    position: static;
+  }
+
+  &:hover::after,
+  &:focus-visible::after {
+    $mask-move: 0.166666666em;
+    mask-position: center, $mask-move (-1 * $mask-move);
+  }
+}
+
+[data-protocol='mailto'],
+[data-protocol='tel'] {
+  &::after {
+    @include hover-link-arrow-transition;
+
+    --external-icon-move: scaleX(var(--lang-direction, 1)) rotate(calc(15deg * var(--lang-direction, 1)));
+    transform: scaleX(var(--lang-direction, 1));
+
+    @media (prefers-reduced-motion) {
+      --external-icon-move: scaleX(var(--lang-direction, 1)); // This overrides the tel and mailto transitions
+    }
+  }
+
+  &:hover::after,
+  &:focus-visible::after {
+    transform: var(--external-icon-move);
+  }
 }
 
 [data-protocol='mailto']::after {