From 3a84bab9b2bc01d50b18d3131a3286864bd037a2 Mon Sep 17 00:00:00 2001
From: LasseStaus <l.stausgaard@gmail.com>
Date: Mon, 22 Apr 2024 13:55:12 +0200
Subject: [PATCH] Add story-book skeleton for materialgrid & use CLSX in
 recommended-material.

Recommended-material was rendering "False" for the partOfGrid prop because it was not using clsx.

DDFFORM-490
---
 .../material-grid/automatic/MaterialGridAutomatic.dev.tsx | 6 ++++++
 src/apps/material-grid/manual/MaterialGridManual.dev.tsx  | 6 ++++++
 src/apps/recommended-material/RecommendedMaterial.tsx     | 8 +++++---
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/apps/material-grid/automatic/MaterialGridAutomatic.dev.tsx b/src/apps/material-grid/automatic/MaterialGridAutomatic.dev.tsx
index 4eafc015d6..99fbe9b727 100644
--- 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
index 835f549436..a62ddd00a3 100644
--- 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
index 44069b876e..6fcf7fa73f 100644
--- 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