(HDS-1833) Link changes

CHANGELOG.md

@@ -14,7 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Component] What are the breaking changes?
 - [Tag] Rewritten Tag component
 - [Button] Renewed Button component with theming support
-- [Accordion] Changed size prop to use AccordionSize enum (AccordionSize.Small, AccordionSize.Medium and AccordionSize.Large) or without usin Typescript ("small", "medium" and "large"). Also theming has changed variables.
+- [Accordion] Changed size prop to use AccordionSize enum (AccordionSize.Small, AccordionSize.Medium and AccordionSize.Large) or without using Typescript ("small", "medium" and "large"). Also theming has changed variables.
+- [Link] iconLeft prop is renamed to iconStart, size prop is now enum (LinkSize.Small, .Medium and .Large). Aria-label is now native so ariaLabel prop is now obsolete -> use aria-label.
 
 #### Added
 
@@ -37,6 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Component] What are the breaking changes?
 - [Tag] Rewritten Tag component
 - [Button] Renewed Button component with theming support
+- [Link] Renamed hds-icon-left class to hds-icon-start
 
 #### Added
 

packages/core/src/components/link/link.css

@@ -73,17 +73,17 @@
   margin-left: var(--spacing-s);
 }
 
-.hds-link--small .hds-icon-left {
+.hds-link--small .hds-icon-start {
   margin-right: 4px;
   vertical-align: text-top;
 }
 
-.hds-link--medium .hds-icon-left {
+.hds-link--medium .hds-icon-start {
   margin-right: 8px;
   vertical-align: sub;
 }
 
-.hds-link--large .hds-icon-left {
+.hds-link--large .hds-icon-start {
   margin-right: 16px;
   vertical-align: middle;
 }

packages/core/src/components/link/link.stories.js

@@ -91,7 +91,7 @@ export const standaloneLink = () => `
 
 export const withCustomIcon = () => `
   <a href="https://hds.hel.fi" class="hds-link hds-link--medium" aria-label="Document link. Opens in external domain">
-    <span class="hds-icon-left"><i class="hds-icon hds-icon--document hds-icon--size-s" aria-hidden="true"></i></span>Document link
+    <span class="hds-icon-start"><i class="hds-icon hds-icon--document hds-icon--size-s" aria-hidden="true"></i></span>Document link
   </a>
 `
 withCustomIcon.storyName = 'With a custom icon';

packages/react/src/components/breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`<Breadcrumb /> spec renders the component 1`] = `
         class="listItem"
       >
         <a
-          class="link linkM link"
+          class="link link-medium link"
           href="/"
         >
           Home
@@ -43,7 +43,7 @@ exports[`<Breadcrumb /> spec renders the component 1`] = `
         class="listItem"
       >
         <a
-          class="link linkM link"
+          class="link link-medium link"
           href="/level1"
         >
           Level 1
@@ -73,7 +73,7 @@ exports[`<Breadcrumb /> spec renders the component 1`] = `
         class="listItem"
       >
         <a
-          class="link linkM link"
+          class="link link-medium link"
           href="/level2"
         >
           Level 2
@@ -103,7 +103,7 @@ exports[`<Breadcrumb /> spec renders the component 1`] = `
         class="listItem"
       >
         <a
-          class="link linkM link"
+          class="link link-medium link"
           href="/level3"
         >
           Level 3
@@ -164,7 +164,7 @@ exports[`<Breadcrumb /> spec renders the component 1`] = `
         </svg>
       </span>
       <a
-        class="link linkM link"
+        class="link link-medium link"
         href="/level3"
       >
         Level 3

packages/react/src/components/footer/__snapshots__/Footer.test.tsx.snap

@@ -60,7 +60,7 @@ exports[`<Footer /> spec renders the component 1`] = `
             class="logoWrapper"
           >
             <a
-              class="link linkM item"
+              class="link link-medium item"
               tabindex="0"
             >
               <img

packages/react/src/components/footer/components/footerBase/__snapshots__/FooterBase.test.tsx.snap

@@ -60,7 +60,7 @@ exports[`<Footer.Base /> spec renders the component 1`] = `
             class="logoWrapper"
           >
             <a
-              class="link linkM item"
+              class="link link-medium item"
               tabindex="0"
             >
               <img
@@ -83,7 +83,7 @@ exports[`<Footer.Base /> spec renders the component 1`] = `
                 |
               </span>
               <a
-                class="link linkM item base"
+                class="link link-medium item base"
               >
                 <span>
                   Link 1
@@ -96,7 +96,7 @@ exports[`<Footer.Base /> spec renders the component 1`] = `
                 |
               </span>
               <a
-                class="link linkM item base"
+                class="link link-medium item base"
               >
                 <span>
                   Link 2
@@ -109,7 +109,7 @@ exports[`<Footer.Base /> spec renders the component 1`] = `
                 |
               </span>
               <a
-                class="link linkM item base"
+                class="link link-medium item base"
               >
                 <span>
                   Link 3

packages/react/src/components/footer/components/footerLink/__snapshots__/FooterLink.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Link /> spec renders the base variant 1`] = `
 <DocumentFragment>
   <a
-    class="link linkM item base"
+    class="link link-medium item base"
   >
     <span>
       Link
@@ -62,7 +62,7 @@ exports[`<Link /> spec renders the component 1`] = `
           Bar
         </h2>
         <a
-          class="link linkM item"
+          class="link link-medium item"
         >
           <span>
             Link
@@ -77,7 +77,7 @@ exports[`<Link /> spec renders the component 1`] = `
 exports[`<Link /> spec renders the navigation variant 1`] = `
 <DocumentFragment>
   <a
-    class="link linkM item navigation"
+    class="link link-medium item navigation"
   >
     <span>
       Link
@@ -89,7 +89,7 @@ exports[`<Link /> spec renders the navigation variant 1`] = `
 exports[`<Link /> spec renders the utility variant 1`] = `
 <DocumentFragment>
   <a
-    class="link linkM item utility"
+    class="link link-medium item utility"
   >
     <span>
       Link

packages/react/src/components/footer/components/footerNavigation/__snapshots__/FooterNavigation.test.tsx.snap

@@ -53,21 +53,21 @@ exports[`<Footer.Navigation /> spec renders the component 1`] = `
           class="navigation"
         >
           <a
-            class="link linkM item navigation"
+            class="link link-medium item navigation"
           >
             <span>
               Link 1
             </span>
           </a>
           <a
-            class="link linkM item navigation"
+            class="link link-medium item navigation"
           >
             <span>
               Link 2
             </span>
           </a>
           <a
-            class="link linkM item navigation"
+            class="link link-medium item navigation"
           >
             <span>
               Link 3

packages/react/src/components/footer/components/footerNavigationGroup/__snapshots__/FooterNavigationGroup.test.tsx.snap

@@ -53,21 +53,21 @@ exports[`<Footer.NavigationGroup /> spec renders the navigation groups 1`] = `
           class="navigation"
         >
           <a
-            class="link linkM item navigation"
+            class="link link-medium item navigation"
           >
             <span>
               Link 1
             </span>
           </a>
           <a
-            class="link linkM item navigation"
+            class="link link-medium item navigation"
           >
             <span>
               Link 2
             </span>
           </a>
           <a
-            class="link linkM item navigation"
+            class="link link-medium item navigation"
           >
             <span>
               Link 3

packages/react/src/components/footer/components/footerUtilities/__snapshots__/FooterUtilities.test.tsx.snap

@@ -60,23 +60,23 @@ exports[`<Footer.Utilities /> spec renders the component 1`] = `
             class="links widerLinks"
           >
             <a
-              class="link linkM item utility"
+              class="link link-medium item utility"
               href="https://hel.fi/helsinki/fi/kaupunki-ja-hallinto/osallistu-ja-vaikuta/ota-yhteytta/ota-yhteytta"
             >
               <span>
                 Yhteystiedot
               </span>
             </a>
             <a
-              class="link linkM item utility"
+              class="link link-medium item utility"
               href="https://hel.fi/helsinki/fi/kaupunki-ja-hallinto/osallistu-ja-vaikuta/palaute/anna-palautetta"
             >
               <span>
                 Anna ja lue palautetta
               </span>
             </a>
             <a
-              class="link linkM item utility"
+              class="link link-medium item utility"
               href="https://hel.fi/kanslia/neuvonta-fi"
             >
               <span>

packages/react/src/components/footer/components/footerUtilityGroup/__snapshots__/FooterUtilityGroup.test.tsx.snap

@@ -72,15 +72,15 @@ exports[`<Footer.UtilityGroup /> spec renders the utility groups 1`] = `
                   Main Page
                 </a>
                 <a
-                  class="link linkM item utility"
+                  class="link link-medium item utility"
                   href="https://google.com"
                 >
                   <span>
                     Sub page
                   </span>
                 </a>
                 <a
-                  class="link linkM item utility"
+                  class="link link-medium item utility"
                   href="https://google.com"
                 >
                   <span>
@@ -101,8 +101,8 @@ exports[`<Footer.UtilityGroup /> spec renders the utility groups 1`] = `
                   Social media
                 </span>
                 <a
-                  aria-label="Helsingin kaupungin Facebook-tili"
-                  class="link linkM item utility"
+                  aria-label="Helsingin kaupungin Facebook-tili."
+                  class="link link-medium item utility"
                   href="https://facebook.com/helsinginkaupunki/"
                   title="Helsingin kaupungin Facebook-tili"
                 >
@@ -126,8 +126,8 @@ exports[`<Footer.UtilityGroup /> spec renders the utility groups 1`] = `
                   </span>
                 </a>
                 <a
-                  aria-label="Helsingin kaupungin Facebook-tili"
-                  class="link linkM item utility"
+                  aria-label="Helsingin kaupungin Facebook-tili."
+                  class="link link-medium item utility"
                   href="https://facebook.com/helsinginkaupunki/"
                   title="Helsingin kaupungin Facebook-tili"
                 >