Merge pull request #577 from danskernesdigitalebibliotek/release/form…

…-sprint-11 Formidling sprint 11
danskernesdigitalebibliotek · Apr 16, 2024 · bc3c62d · bc3c62d
2 parents 3f48244 + 1992625
commit bc3c62d
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 37 deletions.
diff --git a/src/stories/Library/Heros/hero/hero.scss b/src/stories/Library/Heros/hero/hero.scss
@@ -111,6 +111,7 @@ $_hero-column-breakpoint: "small";
 
 .hero__title {
   @include typography($typo__h1);
+  word-break: break-word;
   margin-bottom: $s-md;
 
   @include media-query__name($_hero-column-breakpoint) {

diff --git a/src/stories/Library/disclosure/Disclosure.tsx b/src/stories/Library/disclosure/Disclosure.tsx
@@ -69,7 +69,7 @@ const Disclosure: React.FC<DisclosureProps> = ({
         />
       </summary>
       {contentPadding ? (
-        <div className="disclosure__content-padding">{children}</div>
+        <div className="disclosure__content-padding rich-text">{children}</div>
       ) : (
         children
       )}

diff --git a/src/stories/Library/material-grid/MaterialGridData.tsx b/src/stories/Library/material-grid/MaterialGridData.tsx
@@ -5,191 +5,191 @@ const MaterialGridData: RecommendedMaterialProps[] = [
     author: "Daniel Lee (2023)",
     description: "Advanced Woodworking",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_6.jpg",
     alt: "",
   },
   {
     author: "Emma Clark (2024)",
     description: "Modern Home Gardening",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_2.jpg",
     alt: "",
   },
   {
     author: "George Martin (2023)",
     description: "The Art of Pottery",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_3.jpg",
     alt: "",
   },
   {
     author: "Isabella Brown (2022)",
     description: "Creative Writing Essentials",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_4.jpg",
     alt: "",
   },
   {
     author: "Jack Taylor (2021)",
     description: "Beginners Guide to Knitting",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_5.jpg",
     alt: "",
   },
   {
     author: "Lucy White (2020)",
     description: "Healthy Vegetarian Recipes",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_1.jpg",
     alt: "",
   },
   {
     author: "Max Johnson (2019)",
     description: "DIY Furniture Making",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_2.jpg",
     alt: "",
   },
   {
     author: "Nora Edwards (2024)",
     description: "Interior Design on a Budget",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_3.jpg",
     alt: "",
   },
   {
     author: "Oliver Smith (2023)",
     description: "Landscaping for Your Home",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_4.jpg",
     alt: "",
   },
   {
     author: "Penelope Jones (2022)",
     description: "Easy and Fun Science Experiments",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_5.jpg",
     alt: "",
   },
   {
     author: "Quinn Davis (2021)",
     description: "Photography for Nature Lovers",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_1.jpg",
     alt: "",
   },
   {
     author: "Ryan Wilson (2020)",
     description: "The Beginner's Guide to Drawing",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_2.jpg",
     alt: "",
   },
   {
     author: "Daniel Lee (2023)",
     description: "Advanced Woodworking",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_6.jpg",
     alt: "",
   },
   {
     author: "Emma Clark (2024)",
     description: "Modern Home Gardening",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_2.jpg",
     alt: "",
   },
   {
     author: "George Martin (2023)",
     description: "The Art of Pottery",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_3.jpg",
     alt: "",
   },
   {
     author: "Isabella Brown (2022)",
     description: "Creative Writing Essentials",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_4.jpg",
     alt: "",
   },
   {
     author: "Jack Taylor (2021)",
     description: "Beginners Guide to Knitting",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_5.jpg",
     alt: "",
   },
   {
     author: "Lucy White (2020)",
     description: "Healthy Vegetarian Recipes",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_1.jpg",
     alt: "",
   },
   {
     author: "Max Johnson (2019)",
     description: "DIY Furniture Making",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_2.jpg",
     alt: "",
   },
   {
     author: "Nora Edwards (2024)",
     description: "Interior Design on a Budget",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_3.jpg",
     alt: "",
   },
   {
     author: "Oliver Smith (2023)",
     description: "Landscaping for Your Home",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_4.jpg",
     alt: "",
   },
   {
     author: "Penelope Jones (2022)",
     description: "Easy and Fun Science Experiments",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_5.jpg",
     alt: "",
   },
   {
     author: "Quinn Davis (2021)",
     description: "Photography for Nature Lovers",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_1.jpg",
     alt: "",
   },
   {
     author: "Ryan Wilson (2020)",
     description: "The Beginner's Guide to Drawing",
     favoriteFill: false,
-    coverUrl: "#",
+    materialUrl: "#",
     src: "images/book_cover_2.jpg",
     alt: "",
   },

diff --git a/src/stories/Library/paragraphs/Paragraphs.tsx b/src/stories/Library/paragraphs/Paragraphs.tsx
@@ -50,7 +50,7 @@ export const ArticleParagraphs = () => {
             src: "images/book_cover_6.jpg",
             alt: "book cover",
             favoriteFill: false,
-            coverUrl: "#",
+            materialUrl: "#",
           }}
         />
       </Paragraph>
@@ -67,7 +67,7 @@ export const ArticleParagraphs = () => {
             src: "images/book_cover_6.jpg",
             alt: "book cover",
             favoriteFill: false,
-            coverUrl: "#",
+            materialUrl: "#",
           }}
         />
       </Paragraph>

diff --git a/src/stories/Library/recommended-material/RecommendedMaterial.tsx b/src/stories/Library/recommended-material/RecommendedMaterial.tsx
@@ -7,7 +7,7 @@ export type RecommendedMaterialProps = {
   src: string;
   alt: string;
   favoriteFill?: boolean;
-  coverUrl?: string;
+  materialUrl?: string;
   partOfGrid?: boolean;
 };
 
@@ -17,7 +17,7 @@ export const RecommendedMaterial: React.FC<RecommendedMaterialProps> = ({
   src,
   alt,
   favoriteFill = true,
-  coverUrl,
+  materialUrl,
   partOfGrid = false,
 }) => {
   return (
@@ -35,12 +35,16 @@ export const RecommendedMaterial: React.FC<RecommendedMaterialProps> = ({
         animate={false}
         tint="80"
         shadow="medium"
-        coverUrl={coverUrl}
+        coverUrl={materialUrl}
         alt={alt}
       />
       <div className="recommended-material__texts">
-        <p className="recommended-material__description">{description}</p>
-        <p className="recommended-material__author">{author}</p>
+        <a href={materialUrl} className="recommended-material__description">
+          {description}
+        </a>
+        <a href={materialUrl} className="recommended-material__author">
+          {author}
+        </a>
       </div>
     </div>
   );

diff --git a/src/stories/Library/recommended-material/RecommendedMaterialArgs.ts b/src/stories/Library/recommended-material/RecommendedMaterialArgs.ts
@@ -4,7 +4,7 @@ const recommendedMaterialArgs: RecommendedMaterialProps = {
   author: "Pia Deges (2019)",
   description: "Børnenes Naturhobbybog",
   favoriteFill: false,
-  coverUrl: "#",
+  materialUrl: "#",
   src: "images/book_cover_6.jpg",
   alt: "book cover",
 };

diff --git a/src/stories/Library/recommended-material/recommended-material.scss b/src/stories/Library/recommended-material/recommended-material.scss
@@ -41,6 +41,7 @@ $_material-image-box-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
 .recommended-material__author {
   @include typography($typo__body-small);
   @include text-ellipsis-truncation(1);
+  text-decoration: none;
 }
 .recommended-material__description {
   font-weight: $font__weight--bold;

diff --git a/src/stories/Library/rich-text/RichText.tsx b/src/stories/Library/rich-text/RichText.tsx
@@ -30,10 +30,12 @@ export const RichText = () => {
       <h3>
         Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.
       </h3>
-      <p>
-        Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum
-        surprise baby season ranks. I bid you all a very fond farewell.
-      </p>
+      <blockquote>
+        <p>
+          Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum
+          surprise baby season ranks. I bid you all a very fond farewell.
+        </p>
+      </blockquote>
       <ol>
         <li>Narsil.</li>
         <li>Elros.</li>

diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss
@@ -75,6 +75,25 @@ $_max-width-rich-text: $block-max-width__small;
     }
   }
 
+  blockquote {
+    $_quote-indicator-width: 10px;
+
+    position: relative;
+    padding-top: $s-md;
+    padding-bottom: $s-md;
+    padding-left: $_quote-indicator-width + $s-md;
+
+    &::before {
+      position: absolute;
+      content: "";
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: $_quote-indicator-width;
+      background-color: $color__identity-primary;
+    }
+  }
+
   table {
     // There is no perfect way of making tables responsive.
     // A quick fix, is to make the text smaller on smaller screens.