Refactor content-list-item__description

Remove unnecessary `p` tag and set margin back to default `auto`, which is needed for the truncate to work properly.
danskernesdigitalebibliotek · May 3, 2024 · 0f1e1d2 · 0f1e1d2
1 parent 926b9b9
commit 0f1e1d2
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 11 deletions.
diff --git a/src/stories/Library/content-list-item/ContentListItem.tsx b/src/stories/Library/content-list-item/ContentListItem.tsx
@@ -47,9 +47,7 @@ export const ContentListItem: React.FC<ContentListItemProps> = ({
         )}
         <div className="content-list-item__date">{date}</div>
         <h2 className="content-list-item__title">{title}</h2>
-        <div className="content-list-item__description">
-          <p>{description}</p>
-        </div>
+        <div className="content-list-item__description">{description}</div>
         <div className="content-list-item__content-bottom-container">
           <p className="content-list-item__location">{location}</p>
         </div>

diff --git a/src/stories/Library/content-list-item/content-list-item.scss b/src/stories/Library/content-list-item/content-list-item.scss
@@ -107,9 +107,7 @@ $_stacked-reduce-width: 20px;
 .content-list-item__description {
   grid-area: description;
   margin-bottom: $s-lg;
-  p {
-    @include text-ellipsis-truncation(3);
-  }
+  @include text-ellipsis-truncation(3);
 }
 
 .content-list-item__content-bottom-container {
@@ -211,12 +209,9 @@ $_stacked-reduce-width: 20px;
   }
 
   .content-list-item__description {
-    margin-bottom: unset;
+    margin: auto;
     grid-area: description;
-
-    p {
-      @include text-ellipsis-truncation(2);
-    }
+    @include text-ellipsis-truncation(2);
   }
 
   .content-list-item__content-right-container {