Merge pull request #670 from danskernesdigitalebibliotek/develop

Release 2024.25.0

.github/workflows/chromatic.yml

@@ -34,7 +34,7 @@ jobs:
       - run: yarn css:build
 
       - name: Publish to Chromatic
-        uses: chromaui/action@v11.4.0
+        uses: chromaui/action@v11.5.4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: c6b96f9648b6

admin-base.scss

@@ -0,0 +1,6 @@
+@import "./src/styles/scss/tools";
+
+// CSS sheets that are used to style the admin interface.
+@import "./src/stories/Library/opening-hours-editor/opening-hours-editor";
+@import "./src/stories/Library/material-search/material-search";
+@import "./src/stories/Library/cover/cover";

base.scss

@@ -111,6 +111,7 @@
 @import "./src/stories/Library/card/card";
 @import "./src/stories/Library/paragraphs/paragraphs";
 @import "./src/stories/Library/video-embed/video-embed";
+@import "./src/stories/Library/video-embed/cookie-placeholder";
 @import "./src/stories/Library/card-grid/card-grid";
 @import "./src/stories/Library/promo-title/promo-title";
 @import "./src/stories/Library/Modals/group-modal-item-skeleton";
@@ -142,6 +143,7 @@
 @import "./src/stories/Library/opening-hours/opening-hours-skeleton";
 @import "./src/stories/Library/filtered-event-list/filtered-event-list";
 @import "./src/stories/Library/event-list-stacked/event-list-stacked";
+@import "./src/stories/Library/material-search/material-search";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

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 src/stories/Library/opening-hours-editor/opening-hours-editor.scss:src/styles/css/opening-hours-editor.css --style compressed",
+    "css:build": "sass base.scss:src/styles/css/base.css wysiwyg.scss:src/styles/css/wysiwyg.css admin-base.scss:src/styles/css/admin-base.css --style compressed",
     "css:watch": "yarn css:build -- --watch",
     "build": "concurrently 'yarn:css:build' --raw",
     "markdown:lint": "markdownlint-cli2",
@@ -48,7 +48,7 @@
     "@storybook/node-logger": "^6.3.7",
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/react": "^6.5.9",
-    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
@@ -83,7 +83,7 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-scripts": "^4.0.3",
-    "sass": "^1.77.4",
+    "sass": "^1.77.5",
     "skeleton-screen-css": "^1.1.0",
     "storybook-addon-designs": "^6.2.1",
     "stylelint": "^14.16.1",
@@ -92,7 +92,7 @@
     "stylelint-prettier": "^3.0.0",
     "stylelint-scss": "^5.3.2",
     "typescript": "^4.7.4",
-    "web-vitals": "^4.1.0"
+    "web-vitals": "^4.1.1"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"

src/stories/Library/card/Card.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import Card from "./Card";
-import ImageCredited from "../image-credited/ImageCredited";
+import CardImages from "./CardImages";
 
 export default {
   title: "Library / Card ('news card')",
@@ -30,7 +30,14 @@ export default {
     },
     image: {
       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" />
+        <CardImages
+          src="images/card_original.jpg"
+          alternativeSrcs={[
+            { name: "x-large", src: "images/card_x_large.jpg" },
+            { name: "large", src: "images/card_large.jpg" },
+            { name: "medium", src: "images/card_medium.jpg" },
+          ]}
+        />
       ),
     },
     placeholderText: {

src/stories/Library/card/CardImages.tsx

@@ -0,0 +1,46 @@
+import { FC } from "react";
+
+type ImageCreditedProps = {
+  src: string;
+  alternativeSrcs?: { name: string; src: string }[];
+  alt?: string;
+};
+
+const ImageCredited: FC<ImageCreditedProps> = ({
+  src,
+  alternativeSrcs,
+  alt = "",
+}) => {
+  // Card images are displayed in different aspect ratios, based on context.
+  // This is handled by object-fit centering, but generally speaking, we want
+  // different cropped images to be served.
+  // We get around this, by allowing to pass along alternative SRCs, that are
+  // presented as containers, set to display none and using background images.
+  // By doing it this way, and letting CSS decide when the display is allowed,
+  // the browser is smart enough only to load the image when necessary.
+  return (
+    <figure className="image-credited">
+      {src ? (
+        <div className="image-credited__image">
+          {alternativeSrcs &&
+            alternativeSrcs.map((alternativeSrc) => (
+              <div
+                className="card__override-images"
+                style={{
+                  display: "none",
+                  backgroundImage: `url(${alternativeSrc.src})`,
+                }}
+                data-card-style={alternativeSrc.name}
+              />
+            ))}
+
+          <img src={src} alt={alt} loading="lazy" />
+        </div>
+      ) : (
+        <div className="image-credited__no-image" />
+      )}
+    </figure>
+  );
+};
+
+export default ImageCredited;

src/stories/Library/card/card.scss

@@ -72,14 +72,38 @@
   }
 }
 
+.card__override-images {
+  display: none;
+  height: 100%;
+  width: 100%;
+  background-size: contain;
+}
+
+@mixin cardStyle($style_name) {
+  .card__override-images[data-card-style="#{$style_name}"] {
+    // Overwrite inline styling.
+    &[style] {
+      display: block !important;
+    }
+
+    // Hide the initial image.
+    ~ img {
+      display: none;
+    }
+  }
+}
+
 %card-variant--large,
 .card[data-variant="large"] {
   @extend %card-variant--default;
+
+  @include cardStyle("large");
 }
 
 %card-variant--x-large,
 .card[data-variant="x-large"] {
   @include media-container--card;
+  @include cardStyle("x-large");
 
   width: 200px;
 
@@ -106,6 +130,8 @@
 
 %card-variant--small,
 .card[data-variant="small"] {
+  @include cardStyle("small");
+
   width: 206px;
 
   // stylelint-disable-next-line no-descending-specificity -- Stylelint wants us to re-order the file, but it actually would make it less readable.
@@ -136,6 +162,8 @@
 
 %card-variant--medium,
 .card[data-variant="medium"] {
+  @include cardStyle("medium");
+
   width: 200px;
 
   @include media-query__name($breakpoint__large-card) {

src/stories/Library/cover/Cover.tsx

@@ -6,6 +6,7 @@ import { CoverProps } from "./types";
 
 const Cover: FC<CoverProps> = ({
   size,
+  displaySize,
   animate,
   src,
   tint,
@@ -16,11 +17,13 @@ const Cover: FC<CoverProps> = ({
 }) => {
   const [imageLoaded, setImageLoaded] = useState<boolean | null>(null);
 
+  const coverDisplaySize = displaySize || size;
+
   const classes = {
     wrapper: clsx(
       "cover",
-      `cover--size-${size}`,
-      `cover--aspect-${size}`,
+      `cover--size-${coverDisplaySize}`,
+      `cover--aspect-${coverDisplaySize}`,
       imageLoaded || tintClasses[tint || "default"]
     ),
   };

src/stories/Library/cover/cover.scss

@@ -1,3 +1,5 @@
+$MATERIAL_2XSMALL_MOBILE: 52px;
+$MATERIAL_2XSMALL_DESKTOP: 68.5px;
 $MATERIAL_XSMALL_MOBILE: 104px;
 $MATERIAL_XSMALL_DESKTOP: 104px;
 $MATERIAL_SMALL_MOBILE: 104px;
@@ -10,6 +12,14 @@ $MATERIAL_XLARGE_MOBILE: 284px;
 $MATERIAL_XLARGE_DESKTOP: 460px;
 
 .cover--size {
+  &-2xsmall {
+    border-radius: 3px;
+    height: $MATERIAL_2XSMALL_MOBILE;
+    @include media-query__small {
+      height: $MATERIAL_2XSMALL_DESKTOP;
+    }
+  }
+
   &-xsmall {
     border-radius: 3px;
     height: $MATERIAL_XSMALL_MOBILE;
@@ -48,6 +58,10 @@ $MATERIAL_XLARGE_DESKTOP: 460px;
 }
 
 .cover--aspect {
+  &-2xsmall {
+    aspect-ratio: 0.69;
+  }
+
   &-xsmall {
     aspect-ratio: 0.69;
   }

src/stories/Library/cover/types.ts

@@ -1,7 +1,11 @@
+type Sizes = "xsmall" | "small" | "medium" | "large" | "xlarge";
+type DisplaySizes = "2xsmall" | Sizes;
+
 export type CoverProps = {
   src: string;
   animate: boolean;
-  size: "xsmall" | "small" | "medium" | "large" | "xlarge";
+  size: Sizes;
+  displaySize?: DisplaySizes;
   tint?: "20" | "40" | "80" | "100" | "120";
   coverUrl?: string;
   alt?: string;

src/stories/Library/material-grid/MaterialGrid.stories.tsx

@@ -10,6 +10,10 @@ export default {
       control: "text",
       description: "Title of the recommendation",
     },
+    description: {
+      control: "text",
+      description: "This is a description of the materials selected",
+    },
     selectedAmountOfMaterialsForDisplay: {
       control: {
         type: "select",
@@ -28,6 +32,8 @@ export default {
   },
   args: {
     title: "Recommended materials",
+    description:
+      "This is a long description of the materials selected, or whatever else you want to put in here",
     selectedAmountOfMaterialsForDisplay: 4,
     materials: MaterialGridData,
     buttonText: "Show more",
@@ -47,6 +53,20 @@ const Template: ComponentStory<typeof MaterialGrid> = (args) => (
 export const Default = Template.bind({});
 
 export const GridWithMoreMaterials = Template.bind({});
+
 GridWithMoreMaterials.args = {
   selectedAmountOfMaterialsForDisplay: 8,
 };
+
+export const GridWithNoDescription = Template.bind({});
+
+GridWithNoDescription.args = {
+  description: "",
+};
+
+export const GridWithNoTitleOrDescription = Template.bind({});
+
+GridWithNoTitleOrDescription.args = {
+  title: "",
+  description: "",
+};

src/stories/Library/material-grid/MaterialGrid.tsx

@@ -1,18 +1,21 @@
 import React, { useState } from "react";
+import clsx from "clsx";
 import {
   RecommendedMaterial,
   RecommendedMaterialProps,
 } from "../recommended-material/RecommendedMaterial";
 
 export type MaterialGridProps = {
   title: string;
+  description: string;
   selectedAmountOfMaterialsForDisplay: 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32;
   materials: RecommendedMaterialProps[];
   buttonText: string;
 };
 
 export const MaterialGrid: React.FC<MaterialGridProps> = ({
   title,
+  description,
   selectedAmountOfMaterialsForDisplay,
   materials,
   buttonText,
@@ -38,9 +41,20 @@ export const MaterialGrid: React.FC<MaterialGridProps> = ({
     setCurrentMaterialsDisplayed(selectedAmountOfMaterialsForDisplay);
   }
 
+  const titleClasses = clsx("material-grid__title", {
+    "material-grid__title--no-description": !description,
+  });
+
   return (
     <div className="material-grid">
-      <h2 className="material-grid__title">{title}</h2>
+      {(title || description) && (
+        <div className="material-grid__text-wrapper">
+          {title && <h2 className={titleClasses}>{title}</h2>}
+          {description && (
+            <p className="material-grid__description">{description}</p>
+          )}
+        </div>
+      )}
       <ul className="material-grid__items">
         {materials
           .slice(0, currentMaterialsDisplayed)

src/stories/Library/material-grid/material-grid.scss

@@ -2,13 +2,30 @@
   @include layout-container($layout__max-width--large, 0);
 }
 
-.material-grid__title {
-  @include typography($typo__h2);
+.material-grid__text-wrapper {
   @include layout-container();
+  margin-bottom: $s-lg;
+  display: flex;
+  flex-direction: column;
+  gap: $s-lg;
+}
 
+.material-grid__title {
+  @include typography($typo__h2);
   @extend %title-underline--narrow;
-  margin-bottom: calc($s-lg * 2);
+
+  &--no-description {
+    margin-bottom: $s-lg;
+  }
 }
+
+.material-grid__description {
+  @include typography($typo__body-placeholder);
+  @include media-query__medium {
+    max-width: 600px;
+  }
+}
+
 .material-grid__items {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -19,7 +36,7 @@
   margin: $s-lg auto 0 auto;
 }
 
-@include media-query__medium {
+@include media-query__small {
   .material-grid__items {
     grid-template-columns: repeat(4, 1fr);
   }