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

…-sprint-10 Form sprint 10
danskernesdigitalebibliotek · Apr 8, 2024 · 25f5deb · 25f5deb
2 parents 96f46a5 + c1f3ee5
commit 25f5deb
Show file tree

Hide file tree

Showing 45 changed files with 1,111 additions and 167 deletions.
diff --git a/base.scss b/base.scss
@@ -6,6 +6,7 @@
 @import "./src/styles/scss/legacy";
 
 // Library
+@import "./src/stories/Library/media-container/media-container";
 @import "./src/stories/Library/links/links";
 @import "./src/stories/Library/link-filters/link-filters";
 @import "./src/stories/Library/Arrows/arrows";
@@ -132,6 +133,10 @@
 @import "./src/stories/Library/icon-text-link/icon-text-link";
 @import "./src/stories/Library/material-grid/material-grid";
 @import "./src/stories/Library/error-message/error-message";
+@import "./src/stories/Library/dialog/dialog";
+@import "./src/stories/Library/opening-hours-editor/opening-hours-editor";
+@import "./src/stories/Library/opening-hours/opening-hours";
+@import "./src/stories/Library/opening-hours/opening-hours-skeleton";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "css:lint": "concurrently 'yarn:css:stylelint' 'yarn:css:prettier -- --check' --raw",
     "css:lint:watch": "chokidar 'src/**/*.scss' -c 'yarn css:lint'",
     "css:format": "concurrently 'yarn:css:stylelint -- --fix' 'yarn:css:prettier -- --write' --max-processes 1 --raw",
-    "css:build": "sass base.scss:src/styles/css/base.css wysiwyg.scss:src/styles/css/wysiwyg.css --style compressed",
+    "css:build": "sass base.scss:src/styles/css/base.css wysiwyg.scss:src/styles/css/wysiwyg.css src/stories/Library/opening-hours-editor/opening-hours-editor.scss:src/styles/css/opening-hours-editor.css --style compressed",
     "css:watch": "yarn css:build -- --watch",
     "build": "concurrently 'yarn:css:build' --raw",
     "markdown:lint": "markdownlint-cli2",

diff --git a/src/stories/Blocks/event-page/EventPage.stories.tsx b/src/stories/Blocks/event-page/EventPage.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import Event from "./EventPage";
+import ImageCredited from "../../Library/image-credited/ImageCredited";
 
 export default {
   title: "Blocks / Event page",
@@ -16,8 +17,16 @@ export default {
       type: "string",
     },
     image: {
-      defaultValue:
-        "https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
+      defaultValue: (
+        <ImageCredited
+          description="Photo by Smith on Unsplash"
+          year="©2021"
+          src="https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080"
+        />
+      ),
+    },
+    placeholderText: {
+      defaultValue: "Noget spændende tekst",
       type: "string",
     },
     descriptionDescription: {

diff --git a/src/stories/Blocks/event-page/EventPage.tsx b/src/stories/Blocks/event-page/EventPage.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import Hero from "../../Library/Heros/hero/Hero";
 import EventDescription, {
   EventDescriptionProps,
@@ -8,12 +8,14 @@ import { EventParagraphs } from "../../Library/paragraphs/Paragraphs";
 type EventPageProps = {
   title: string;
   date: string;
-  image: string;
+  placeholderText?: string;
+  image?: ReactNode;
 } & EventDescriptionProps;
 
 const EventPage: FC<EventPageProps> = ({
   title,
   date,
+  placeholderText,
   image,
   descriptionDescription,
   horizontalTermLineData,
@@ -25,6 +27,7 @@ const EventPage: FC<EventPageProps> = ({
         title={title}
         date={date}
         image={image}
+        placeholderText={placeholderText}
         cta="Køb billet"
         tag="Arrangement"
       />

diff --git a/src/stories/Blocks/page/Page.stories.tsx b/src/stories/Blocks/page/Page.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import Page from "./Page";
+import ImageCredited from "../../Library/image-credited/ImageCredited";
 
 export default {
   title: "Blocks / Pages",
@@ -25,6 +26,7 @@ const Template: ComponentStory<typeof Page> = (args) => <Page {...args} />;
 export const frontPage = Template.bind({});
 frontPage.args = {
   hero: {
+    placeholderText: "Forsiden har intet billede",
     contentType: "Arrangement",
     date: "06 Dec 2022",
     title: "Stine Pilgaard vinder De Gyldne Laurbær",
@@ -36,8 +38,13 @@ frontPage.args = {
 export const branchPage = Template.bind({});
 branchPage.args = {
   hero: {
-    image:
-      "https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
+    image: (
+      <ImageCredited
+        src="https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080"
+        description="Photo by Unsplash"
+        year="©2021"
+      />
+    ),
     contentType: "Fillial",
     title: "Søborg",
     description:

diff --git a/src/stories/Blocks/page/Page.tsx b/src/stories/Blocks/page/Page.tsx
@@ -14,6 +14,7 @@ const Page: FC<PageProps> = ({ hero }) => {
           <Paragraph modifier="hero">
             <Hero
               image={hero.image}
+              placeholderText={hero.placeholderText}
               contentType={hero.contentType}
               date={hero.date}
               title={hero.title}

diff --git a/src/stories/Library/Heros/hero-link/HeroLink.stories.tsx b/src/stories/Library/Heros/hero-link/HeroLink.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import HeroLink from "./HeroLink";
+import ImageCredited from "../../image-credited/ImageCredited";
 
 export default {
   title: "Library / Hero with link",
@@ -19,10 +20,17 @@ export default {
       control: { type: "text" },
     },
     image: {
-      name: "Image",
-      defaultValue:
-        "https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
-      control: { type: "text" },
+      defaultValue: (
+        <ImageCredited
+          src="https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080"
+          description="Photo by Unsplash"
+          year="©2021"
+        />
+      ),
+    },
+    placeholderText: {
+      defaultValue: "En spændende tekst",
+      type: "string",
     },
     contentType: {
       name: "Type",

diff --git a/src/stories/Library/Heros/hero-link/HeroLink.tsx b/src/stories/Library/Heros/hero-link/HeroLink.tsx
@@ -11,6 +11,7 @@ export type HeroLinkProps = {
 const HeroLink: React.FunctionComponent<HeroLinkProps> = ({
   url,
   image,
+  placeholderText,
   contentType,
   date,
   title,
@@ -34,7 +35,7 @@ const HeroLink: React.FunctionComponent<HeroLinkProps> = ({
         />
       </a>
 
-      <HeroVisual image={image} />
+      <HeroVisual image={image} placeholderText={placeholderText} />
     </section>
   );
 };

diff --git a/src/stories/Library/Heros/hero/Hero.stories.tsx b/src/stories/Library/Heros/hero/Hero.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import Hero from "./Hero";
+import ImageCredited from "../../image-credited/ImageCredited";
 
 export default {
   title: "Library / Hero",
@@ -14,10 +15,18 @@ export default {
   },
   argTypes: {
     image: {
-      name: "Image",
-      defaultValue:
-        "https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
-      control: { type: "text" },
+      defaultValue: (
+        <ImageCredited
+          src="https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=8
+0&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080"
+          description="Photo by Unsplash"
+          year="©2021"
+        />
+      ),
+    },
+    placeholderText: {
+      defaultValue: "Stine Pilgaard vinder De Gyldne Laurbær",
+      type: "string",
     },
     contentType: {
       name: "Type",

diff --git a/src/stories/Library/Heros/hero/Hero.tsx b/src/stories/Library/Heros/hero/Hero.tsx
@@ -1,14 +1,16 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import clsx from "clsx";
 import HeroInner, { HeroInnerProps } from "./HeroInner";
 import HeroVisual from "./HeroVisual";
 
 export type HeroProps = {
-  image?: string;
+  image?: ReactNode;
+  placeholderText?: string;
 } & HeroInnerProps;
 
 const HeroLink: React.FunctionComponent<HeroProps> = ({
   image,
+  placeholderText,
   contentType,
   date,
   title,
@@ -35,7 +37,7 @@ const HeroLink: React.FunctionComponent<HeroProps> = ({
         />
       </div>
 
-      <HeroVisual image={image} />
+      <HeroVisual image={image} placeholderText={placeholderText} />
     </section>
   );
 };

diff --git a/src/stories/Library/Heros/hero/HeroVisual.tsx b/src/stories/Library/Heros/hero/HeroVisual.tsx
@@ -1,21 +1,19 @@
-import React from "react";
-import ImageCredited from "../../image-credited/ImageCredited";
+import React, { ReactNode } from "react";
+import MediaContainer from "../../media-container/MediaContainer";
 
 export type HeroInnerProps = {
-  image?: string;
+  image?: ReactNode;
+  placeholderText?: string;
 };
 
-const HeroVisual: React.FunctionComponent<HeroInnerProps> = ({ image }) => {
+const HeroVisual: React.FunctionComponent<HeroInnerProps> = ({
+  image,
+  placeholderText,
+}) => {
   return (
     <div className="hero__visual">
       <div className="hero__visual-inner">
-        {image && (
-          <ImageCredited
-            src={image}
-            description="Photo by Unsplash"
-            year="©2021"
-          />
-        )}
+        <MediaContainer placeholderText={placeholderText} media={image} />
       </div>
     </div>
   );

diff --git a/src/stories/Library/Heros/hero/hero.scss b/src/stories/Library/Heros/hero/hero.scss
@@ -1,5 +1,13 @@
 $_hero-column-breakpoint: "small";
 
+// On mobile, it makes no sense to show the placeholder text,
+// as it just serves the purpose to fill out the hero on desktop.
+@include media-query__name($_hero-column-breakpoint, "max-width") {
+  .hero--has-no-media .hero__visual {
+    display: none;
+  }
+}
+
 .hero__content,
 .hero__visual {
   @include media-query__name($_hero-column-breakpoint) {
@@ -15,8 +23,8 @@ $_hero-column-breakpoint: "small";
 }
 
 .hero__visual-inner {
-  height: 100%;
   width: 100%;
+  aspect-ratio: 5/4;
 }
 
 .hero {
@@ -38,14 +46,6 @@ $_hero-column-breakpoint: "small";
   }
 }
 
-@include media-query__name($_hero-column-breakpoint) {
-  .hero.hero--has-no-media {
-    .hero__visual-inner {
-      @include identity-placeholder;
-    }
-  }
-}
-
 .hero__description {
   @include typography($typo__body-placeholder);
   flex-grow: 1;

diff --git a/src/stories/Library/card-grid/card-grid.scss b/src/stories/Library/card-grid/card-grid.scss
@@ -5,10 +5,7 @@ $_card-grid-gap: $s-lg;
 
 .card-grid {
   @include layout-container();
-
-  .card__placeholder-text {
-    @include typography($typo__card-placeholder--grid);
-  }
+  @include media-container--grid;
 }
 
 .card-grid--full-width {
@@ -129,9 +126,7 @@ $_card-grid-gap: $s-lg;
         // there, there is plenty of space.
         @if ($name == "small") {
           @include media-query__small {
-            .card__placeholder-text {
-              font-size: 0;
-            }
+            @include media-container--small;
           }
         }
       }

diff --git a/src/stories/Library/card/Card.stories.tsx b/src/stories/Library/card/Card.stories.tsx
@@ -24,10 +24,6 @@ export default {
       defaultValue: "Bøger som har gjort en forskel for romanens udvikling",
       type: "string",
     },
-    placeholderText: {
-      defaultValue: "Stine Pilgaard vinder De Gyldne Laurbær",
-      type: "string",
-    },
     href: {
       defaultValue: "https://google.com",
       type: "string",
@@ -36,7 +32,9 @@ export default {
       defaultValue: (
         <ImageCredited src="https://images.unsplash.com/photo-1585779034823-7e9ac8faec70?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
       ),
-
+    },
+    placeholderText: {
+      defaultValue: "Stine Pilgaard vinder De Gyldne Laurbær",
       type: "string",
     },
   },

diff --git a/src/stories/Library/card/Card.tsx b/src/stories/Library/card/Card.tsx
@@ -1,5 +1,6 @@
 import { FC, ReactNode } from "react";
 import clsx from "clsx";
+import MediaContainer from "../media-container/MediaContainer";
 
 type CardProps = {
   variant?: string;
@@ -19,18 +20,16 @@ const Card: FC<CardProps> = ({
   dateTag,
 }) => {
   const classes = clsx("card", {
-    "card--has-no-image": !image,
-    "card--has-image": image,
+    "card--has-no-media": !image,
+    "card--has-media": !!image,
   });
 
   return (
     <article className={classes} data-variant={variant}>
       <a href="https://google.com">
-        <figure className="card__media">
-          {image || (
-            <div className="card__placeholder-text">{placeholderText}</div>
-          )}
-        </figure>
+        <div className="card__media">
+          <MediaContainer placeholderText={placeholderText} media={image} />
+        </div>
         <div className="card__tags">
           {typeTag ? (
             <span className="card__tag card__tag--type">{typeTag}</span>