Add story-book skeleton for materialgrid & use CLSX in recommended-ma…

…terial.

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

DDFFORM-490

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,10 @@ export default {
 export const App: ComponentStory<typeof MaterialGridAutomatic> = (
   args: MaterialGridAutomaticEntryProps & GlobalEntryTextProps
 ) => <MaterialGridAutomatic {...args} />;
+
+const SkeletonTemplate: ComponentStory<typeof MaterialGridAutomatic> = (
+  args
+) => {
+  return <MaterialGridSkeleton />;
+};
+export const Skeleton = SkeletonTemplate.bind({});

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> = (args) => {
+  return <MaterialGridSkeleton />;
+};
+export const Skeleton = SkeletonTemplate.bind({});

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