Merge pull request #1142 from danskernesdigitalebibliotek/DDFFORM-490…

…-adjust-css DDFFORM 490 adjust css
danskernesdigitalebibliotek · Apr 22, 2024 · eb1c3e9 · eb1c3e9
2 parents bf81918 + 3a84bab
commit eb1c3e9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/apps/material-grid/automatic/MaterialGridAutomatic.dev.tsx b/src/apps/material-grid/automatic/MaterialGridAutomatic.dev.tsx
@@ -9,6 +9,7 @@ import serviceUrlArgs from "../../../core/storybook/serviceUrlArgs";
 import MaterialGridAutomatic, {
   MaterialGridAutomaticEntryProps
 } from "./MaterialGridAutomatic.entry";
+import MaterialGridSkeleton from "../MaterialGridSkeleton";
 
 export default {
   title: "Apps / Material Grid / Automatic",
@@ -79,3 +80,8 @@ export default {
 export const App: ComponentStory<typeof MaterialGridAutomatic> = (
   args: MaterialGridAutomaticEntryProps & GlobalEntryTextProps
 ) => <MaterialGridAutomatic {...args} />;
+
+const SkeletonTemplate: ComponentStory<typeof MaterialGridAutomatic> = () => {
+  return <MaterialGridSkeleton />;
+};
+export const Skeleton = SkeletonTemplate.bind({});
diff --git a/src/apps/material-grid/manual/MaterialGridManual.dev.tsx b/src/apps/material-grid/manual/MaterialGridManual.dev.tsx
@@ -9,6 +9,7 @@ import serviceUrlArgs from "../../../core/storybook/serviceUrlArgs";
 import MaterialGridManual, {
   MaterialGridManualEntryProps
 } from "./MaterialGridManual.entry";
+import MaterialGridSkeleton from "../MaterialGridSkeleton";
 
 // 31 materials. Intentionally not using 32 in order to demonstrate the
 // logic for only displaying intervals of 4 materials.
@@ -103,3 +104,8 @@ export default {
 export const App: ComponentStory<typeof MaterialGridManual> = (
   args: MaterialGridManualEntryProps & GlobalEntryTextProps
 ) => <MaterialGridManual {...args} />;
+
+const SkeletonTemplate: ComponentStory<typeof MaterialGridManual> = () => {
+  return <MaterialGridSkeleton />;
+};
+export const Skeleton = SkeletonTemplate.bind({});
diff --git a/src/apps/recommended-material/RecommendedMaterial.tsx b/src/apps/recommended-material/RecommendedMaterial.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import clsx from "clsx";
 import { useDispatch } from "react-redux";
 import { useQueryClient } from "react-query";
 import ButtonFavourite, {
@@ -79,9 +80,10 @@ const RecommendedMaterial: React.FC<RecommendedMaterialProps> = ({
 
   return (
     <div
-      className={`recommended-material ${
-        partOfGrid && "recommended-material--in-grid "
-      }`}
+      className={clsx(
+        "recommended-material",
+        partOfGrid && "recommended-material--in-grid"
+      )}
     >
       <div className="recommended-material__icon">
         <ButtonFavourite