Updated : Issue 1750 - Made the image in news feed clickable

visual-framework · Aug 26, 2024 · fcc9a07 · fcc9a07
1 parent 0ed7bb5
commit fcc9a07
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 7 deletions.
diff --git a/components/vf-news-container/CHANGELOG.md b/components/vf-news-container/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 1.1.1
+
+* Updated: Made the image in news feed clickable  [Tracking issue](https://github.com/visual-framework/vf-core/issues/1750)
+
 ### 1.1.0
 
 * Standardizes the featured news variant as 4 columns.

diff --git a/components/vf-news-container/README.md b/components/vf-news-container/README.md
@@ -6,6 +6,10 @@
 
 Use this component to show a section of news content. It also offers a `vf-news-container--featured` variant with support for `vf-summary` for when news is a higher level and, well, featured content on layout.
 
+### Recommendations
+
+In a case where the descriptive text on the image is a repetition of the adjacent text, it is recommended to use a null alternative text on the image
+
 ## Install
 
 This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-news-container` with this command.

diff --git a/components/vf-news-container/vf-news-container--featured.njk b/components/vf-news-container/vf-news-container--featured.njk
@@ -3,31 +3,31 @@
 
   <div class="vf-news-container__content | vf-grid vf-grid__col-4">
     {% render '@vf-summary--news-has-image', {
-      summary__href: 'JavaScript:Void(0);',
+      summary__href: '',
       summary__image: "../../assets/vf-summary/assets/vf-summary--news-has-image.jpg",
       summary__image_alt: "BioSamples",
       summary__title: "news article summary",
       "summary__text": "",
       summary__date: "4 September 2019"
     } %}
     {% render '@vf-summary--news-has-image', {
-      summary__href: 'JavaScript:Void(0);',
+      summary__href: '',
       summary__image: "../../assets/vf-summary/assets/vf-summary--news-has-image.jpg",
       summary__image_alt: "BioSamples",
       summary__title: "news article summary",
       "summary__text": "",
       summary__date: "4 September 2019"
     } %}
     {% render '@vf-summary--news-has-image', {
-      summary__href: 'JavaScript:Void(0);',
+      summary__href: '',
       summary__image: "../../assets/vf-summary/assets/vf-summary--news-has-image.jpg",
       summary__image_alt: "BioSamples",
       summary__title: "news article summary",
       "summary__text": "",
       summary__date: "4 September 2019"
     } %}
     {% render '@vf-summary--news-has-image', {
-      summary__href: 'JavaScript:Void(0);',
+      summary__href: '',
       summary__image: "../../assets/vf-summary/assets/vf-summary--news-has-image.jpg",
       summary__image_alt: "BioSamples",
       summary__title: "news article summary",

diff --git a/components/vf-news-container/vf-news-container.njk b/components/vf-news-container/vf-news-container.njk
@@ -2,9 +2,38 @@
   {% render '@vf-section-header'%}
 
   <div class="vf-news-container__content">
-    {% render '@vf-summary--news-has-image' %}
-    {% render '@vf-summary--news-has-image' %}
-    {% render '@vf-summary--news-has-image' %}
+    {% render '@vf-summary--news-has-image', {
+      summary__image: "../../assets/vf-summary/assets/vf-summary--news-has-image.jpg",
+      summary__image_alt: "News image alt",
+      summary__text: "Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.",
+      summary__date: "4 September 2019",
+      summary__href: "",
+      summary__title: "news article summary"
+    } %}
+    {% render '@vf-summary--news-has-image', {
+      summary__image: "../../assets/vf-summary/assets/vf-summary--news-has-image.jpg",
+      summary__image_alt: "News image alt",
+      summary__text: "Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.",
+      summary__date: "4 September 2019",
+      summary__href: "",
+      summary__title: "news article summary"
+    } %}
+    {% render '@vf-summary--news-has-image', {
+      summary__image: "../../assets/vf-summary/assets/vf-summary--news-has-image.jpg",
+      summary__image_alt: "News image alt",
+      summary__text: "Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.",
+      summary__date: "4 September 2019",
+      summary__href: "",
+      summary__title: "news article summary"
+    } %}
+    {% render '@vf-summary--news-has-image', {
+      summary__image: "../../assets/vf-summary/assets/vf-summary--news-has-image.jpg",
+      summary__image_alt: "News image alt",
+      summary__text: "Combinations of cancer drugs can be quickly and cheaply tested using a novel microfluidic device.",
+      summary__date: "4 September 2019",
+      summary__href: "",
+      summary__title: "news article summary"
+    } %}
   </div>
 
   <!--

diff --git a/components/vf-news-container/vf-news-container.scss b/components/vf-news-container/vf-news-container.scss
@@ -8,10 +8,55 @@
  * Version: #{map-get($componentInfo, 'version')}
  * Location: #{map-get($componentInfo, 'location')}
  */
+ .vf-news-container {
+  .vf-summary {
+    .vf-summary__link {
+      @include set-type(text-body--2, $custom-margin-bottom: 0);
+
+      display: inline-block;
+      color: #3b6fb6;
+
+      &::after {
+        bottom: 0px;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 750px;
+        top: 0;
+        z-index: 512;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+ }
 
 .vf-news-container--featured {
   .vf-summary {
     grid-template-columns: none;
+
+    .vf-summary__link {
+      @include set-type(text-body--2, $custom-margin-bottom: 0);
+
+      display: inline-block;
+      color: #3b6fb6;
+
+      &::after {
+        bottom: 25px;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 512;
+      }
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
 
   .vf-summary > .vf-summary__date {