Ajustement Tuile document et tuile en vedette (#119)

Signed-off-by: Alexis Boulerice <[email protected]>
VilledeMontreal · Jun 4, 2024 · 44f3858 · 44f3858
1 parent 1fcd1e5
commit 44f3858
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-## [5.4.0] - Unreleased
+## [5.5.0] - unreleased
+
+## Added
+- Components - Tuiles: Ajout d'une classe card-link-icon pour gerer le link label pour tuile horizontale document et tuile en vedette.
+
+
+## [5.4.0] - 2024-05-30
 
 ### Added
 - Components - Message ciblé: Ajout de la variante hyperlien.

diff --git a/source/_patterns/02-components/tuiles/_card-item-featured.mustache b/source/_patterns/02-components/tuiles/_card-item-featured.mustache
@@ -21,17 +21,17 @@
         {{# card-type }}
         <span class="card-type">{{ card-type }}</span>
         {{/ card-type}}
-        
+
         {{# card-title }}
         <span class="card-title">{{ card-title }}</span>
         {{/ card-title }}
-        
+
         {{# card-text }}
         <p class="card-text">{{{ card-text }}}</p>
         {{/ card-text }}
 
         {{# card-link }}
-        <div class="card-link">{{ card-link }} <span class="icon icon-arrow-right" aria-hidden="true"></span></div>
+        <div class="card-link card-link-icon"><span class="link-label">{{ card-link }}</span><span class="icon-nowrap">&#xFEFF;<span class="icon icon-arrow-right" aria-hidden="true"></span></span></div>
         {{/ card-link }}
       </div>
     </div>
@@ -46,13 +46,13 @@
     {{# card-title }}
     <span class="card-title">{{ card-title }}</span>
     {{/ card-title }}
-    
+
     {{# card-text }}
     <p class="card-text">{{{ card-text }}}</p>
     {{/ card-text }}
 
     {{# card-link }}
-    <div class="card-link">{{ card-link }} <span class="icon icon-arrow-right" aria-hidden="true"></span></div>
+    <div class="card-link card-link-icon"><span class="link-label">{{ card-link }}</span><span class="icon-nowrap">&#xFEFF;<span class="icon icon-arrow-right" aria-hidden="true"></span></span></div>
     {{/ card-link }}
   </div>
   {{/ fullwidth}}

diff --git a/source/_patterns/02-components/tuiles/_card-item-full-width-profile.mustache b/source/_patterns/02-components/tuiles/_card-item-full-width-profile.mustache
@@ -15,13 +15,13 @@
     {{# card-title }}
     <span class="card-title">{{ card-title }}</span>
     {{/ card-title }}
-    
+
     {{# card-text }}
     <p class="card-text">{{{ card-text }}}</p>
     {{/ card-text }}
 
     {{# card-link }}
-    <div class="card-link">{{ card-link }} <span class="icon icon-arrow-right" aria-hidden="true"></span></div>
+    <div class="card-link card-link-icon"><span class="link-label">{{ card-link }}</span><span class="icon-nowrap">&#xFEFF;<span class="icon icon-arrow-right" aria-hidden="true"></span></span></div>
     {{/ card-link }}
   </div>
 

diff --git a/source/_patterns/02-components/tuiles/_card-item-full-width.mustache b/source/_patterns/02-components/tuiles/_card-item-full-width.mustache
@@ -63,7 +63,7 @@
         {{/ card-text-interface }}
 
         {{# card-link }}
-        <div class="card-link mt-2">{{ card-link }} <span class="icon{{^card-link-icon}} icon-arrow-right{{/card-link-icon}}{{#card-link-icon}} {{card-link-icon}}{{/card-link-icon}}" aria-hidden="true"></span></div>
+        <div class="card-link card-link-icon"><span class="link-label">{{ card-link }}</span><span class="icon-nowrap">&#xFEFF;<span class="icon icon-arrow-right" aria-hidden="true"></span></span></div>
         {{/ card-link }}
 
       </div>

diff --git a/source/_patterns/02-components/tuiles/_card-item.mustache b/source/_patterns/02-components/tuiles/_card-item.mustache
@@ -72,7 +72,7 @@
     {{/ card-cta }}
 
     {{# card-link }}
-      <div class="card-link">{{ card-link }}</div>
+    <div class="card-link">{{ card-link }}</div>
     {{/ card-link }}
 
   </div>

diff --git a/source/css/scss/_card.scss b/source/css/scss/_card.scss
@@ -61,16 +61,14 @@
   }
 
   .card-img {
-    width: 198px;
+    width: calc(100% - 4rem);
     @include border-radius(0);
-    border: $card-border-width solid $card-border-color;
     margin: 2rem 2rem 0 2rem;
     align-self: flex-start;
 
     &.img-placeholder {
       width: calc(100% - 4rem);
       max-height: 200px;
-      border: none;
       align-items: center;
       justify-content: center;
       display: flex;
@@ -85,6 +83,7 @@
     // 576px and up
     @include media-breakpoint-up(sm) {
       margin: 2rem 0 2rem 2rem;
+      width: 200px;
 
       &.img-placeholder {
         width: 200px;
@@ -157,10 +156,30 @@
     display: inline-flex;
     font-weight: $font-weight-bold;
     line-height: $line-height-md;
+    margin-right: 0;
     .icon {
       @include icon-color($action);
       margin-left: .25rem;
     }
+    &:hover,
+    &:focus {
+      background-color: transparent;
+    }
+
+    &.card-link-icon {
+      display: inline;
+      .icon-nowrap {
+        display: inline;
+        white-space: nowrap;
+        vertical-align: -6px;
+        line-height: 1;
+      }
+      .icon {
+        display: inline;
+        margin-right: 0;
+        line-height: 1;
+      }
+    }
   }
 
   // Define cards using 32px padding
@@ -240,14 +259,6 @@
         margin-top: 1rem;
       }
     }
-    // Optionnal bottom link-label
-    .card-link {
-      color: $action;
-      display: inline-flex;
-      font-weight: $font-weight-bold;
-      line-height: $line-height-md;
-      padding-top: 1rem;
-    }
   }
 
   // Card profile
@@ -380,16 +391,6 @@
         line-height: 2rem;
         margin-bottom: 1rem;
       }
-      .card-link {
-        color: $action;
-        display: inline-flex;
-        font-weight: $font-weight-bold;
-        line-height: $line-height-md;
-        .icon {
-          @include icon-color($action);
-          margin-left: .25rem;
-        }
-      }
     }
 
     @include media-breakpoint-up(md) {

diff --git a/source/css/scss/utilities/_text.scss b/source/css/scss/utilities/_text.scss
@@ -252,6 +252,31 @@ a.text-muted {
   }
 }
 
+// Allow inline icon that wraps with label and leave no orphan
+.link-inline-icon {
+  display: inline !important;
+  margin-right: 0 !important;
+  text-decoration: none;
+  .icon-nowrap {
+    display: inline;
+    white-space: nowrap;
+    vertical-align: -6px;
+    line-height: 1;
+  }
+  .icon {
+    display: inline;
+    margin-left: 0.25rem;
+    margin-right: 0;
+  }
+  &:hover,
+  &:focus {
+    background-color: transparent;
+    .link-label {
+      background-color: $highlight-light;
+    }
+  }
+}
+
 
 // Utility class for font-size