Merge pull request #682 from danskernesdigitalebibliotek/DDFFORM-917-…

…sliderheadline-title-underline Refactored Underlined Title for `Slider`
danskernesdigitalebibliotek · Jul 29, 2024 · 8decd5d · 8decd5d
2 parents cb1b89d + e56846d
commit 8decd5d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/src/stories/Library/slider/Slider.stories.tsx b/src/stories/Library/slider/Slider.stories.tsx
@@ -17,7 +17,7 @@ export default {
   },
   argTypes: {
     title: {
-      defaultValue: "Inspiration",
+      defaultValue: "Get <u>new</u> Inspiration",
       type: "string",
     },
     items: {

diff --git a/src/stories/Library/slider/Slider.tsx b/src/stories/Library/slider/Slider.tsx
@@ -24,7 +24,14 @@ const Slider: FC<SliderProps> = ({ title, items }) => {
 
       <div className="slider swiper">
         <div className="slider__header">
-          {title ? <h2 className="slider__title">{title}</h2> : ""}
+          {title && (
+            <h2
+              className="slider__title"
+              // We need to be able to replicate our WYSIWYG field in Drupal that makes it possible to underline (<u>) words.
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: title }}
+            />
+          )}
 
           <div className="slider__controls" data-glide-el="controls">
             <button

diff --git a/src/stories/Library/slider/slider.scss b/src/stories/Library/slider/slider.scss
@@ -6,10 +6,8 @@
 }
 
 .slider__title {
-  @extend %title-underline;
   @include typography($typo__h2);
-
-  display: flex;
+  @include u-extending-underline-style;
 }
 
 .slider__controls {

diff --git a/src/styles/scss/tools/placeholder.scss b/src/styles/scss/tools/placeholder.scss
@@ -16,6 +16,7 @@
   }
 }
 
+// Todo: Should be removed. Use @mixin u-extending-underline-style instead.
 %title-underline {
   position: relative;
   &::before {
@@ -32,6 +33,7 @@
   }
 }
 
+// Todo: Should be removed. Use @mixin u-extending-underline-style instead.
 %title-underline--narrow {
   @extend %title-underline;