fix(default-css): Fixing rules for links inside lists, fixing descrip…

…tion list - FRONT-4676 (#3711) * fix(default-css): Fixing rules for links inside lists, fixing desription list - FRONT-4676 * feat(html-tag): Using example link in the demo - FRONT-4676
ec-europa · Nov 20, 2024 · 5c00b2d · 5c00b2d · github-actions · Nov 20, 2024
1 parent cf4d988
commit 5c00b2d
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 6 deletions.
diff --git a/src/implementations/twig/utilities/html-tag/index.story.js b/src/implementations/twig/utilities/html-tag/index.story.js
@@ -1,6 +1,9 @@
 import withCode from '@ecl/storybook-addon-code';
 import getSystem from '@ecl/builder/utils/getSystem';
 
+const publicUrl = process.env.PUBLIC_URL || '';
+const exampleLink = `${publicUrl}/example`;
+
 export default {
   title: 'Utilities/HTML tag styling',
   decorators: [withCode],
@@ -18,7 +21,7 @@ export const Default = () => `
     <summary><strong>Link and button</strong></summary>
     <br>
     <div class="ecl">
-      <a href="#">Link</a><br><br>
+      <a href="${exampleLink}">Link</a><br><br>
       <button>Button</button>
     </div>
   </details>
@@ -44,7 +47,7 @@ export const Default = () => `
         <li>Unordered list</li>
         <li>Unordered list
           <ul>
-            <li>Nested unordered list</li>
+            <li><a href="${exampleLink}">Nested unordered list</a></li>
             <li>Nested unordered list</li>
           </ul>
         </li>
@@ -54,7 +57,7 @@ export const Default = () => `
         <li>Ordered list</li>
         <li>Ordered list
           <ol>
-            <li>Nested ordered list</li>
+            <li><a href="${exampleLink}"class="ecl-link">Nested ordered list</a></li>
             <li>Nested ordered list</li>
           </ol>
         </li>

diff --git a/src/implementations/vanilla/components/description-list/description-list.scss b/src/implementations/vanilla/components/description-list/description-list.scss
@@ -187,7 +187,8 @@ $description-list: null !default;
         var(--max-w)
       );
 
-    .ecl-description-list__term {
+    .ecl-description-list__term,
+    %ecl-description-list__term {
       margin-bottom: 0;
       margin-top: var(--s-l);
     }

diff --git a/src/implementations/vanilla/components/ordered-list/ordered-list.scss b/src/implementations/vanilla/components/ordered-list/ordered-list.scss
@@ -42,7 +42,8 @@ $list: null !default;
     padding-bottom: var(--s-2xs);
   }
 
-  .ecl-link {
+  .ecl-link,
+  %ecl-ordered-list-link {
     text-decoration: none;
 
     &:hover {

diff --git a/src/implementations/vanilla/components/unordered-list/unordered-list.scss b/src/implementations/vanilla/components/unordered-list/unordered-list.scss
@@ -36,7 +36,8 @@ $list: null !default;
     padding-bottom: 0;
   }
 
-  .ecl-link {
+  .ecl-link,
+  %ecl-unordered-list-link {
     text-decoration: none;
 
     &:hover {

diff --git a/src/presets/ec/src/ec-default.scss b/src/presets/ec/src/ec-default.scss
@@ -110,6 +110,10 @@
 .ecl ul li:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']),
 .ecl ul li:is([class*='ecl-u-']) {
   @extend %ecl-unordered-list__item;
+
+  a {
+    @extend %ecl-unordered-list-link;
+  }
 }
 
 .ecl ul ol li:not([class*='ecl-'], [class*='wt-'], [class*='highcharts-']),
@@ -132,6 +136,10 @@
 .ecl ol li:not([class*='ecl-'], [class*='wt-']),
 .ecl ol li:is([class*='ecl-u-']) {
   @extend %ecl-ordered-list__item;
+
+  a {
+    @extend %ecl-ordered-list-link;
+  }
 }
 
 .ecl dl:not([class*='ecl-'], [class*='wt-']),