Revert to old Cover

src/stories/Library/autosuggest-material/AutosuggestMaterial.tsx

@@ -18,7 +18,7 @@ export const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
         return (
           <li className="autosuggest__material-item">
             <div className="autosuggest__material-card">
-              <Cover size="xsmall" animate src={item.cover} shadow />
+              <Cover size="xsmall" animate src={item.cover} />
               <div className="autosuggest__info">
                 <div className="text-body-medium-medium autosuggest__title">
                   {item.title}

src/stories/Library/cover/Cover.stories.tsx

@@ -1,6 +1,5 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
-
 import Cover from "./Cover";
 
 export default {
@@ -71,10 +70,3 @@ CoverLinked.args = {
   coverUrl: "/",
   description: "Cover of Audrey Hepburn",
 };
-
-export const SrcNotWork = Template.bind({});
-SrcNotWork.args = {
-  src: "abe",
-  tint: "100",
-  coverUrl: "",
-};

src/stories/Library/cover/Cover.tsx

@@ -1,65 +1,50 @@
 import clsx from "clsx";
-import { FC, useState } from "react";
-import CoverImage from "./CoverImage";
-import { tintClasses } from "./helper";
-import { CoverProps } from "./types";
 
-const Cover: FC<CoverProps> = ({
-  size,
-  animate,
-  src,
-  tint,
-  coverUrl,
-  description,
-  shadow,
-  ariaLabel = "Link to the material",
-}) => {
-  const [imageLoaded, setImageLoaded] = useState<boolean | null>(null);
+export type CoverProps = {
+  src: string;
+  animate: boolean;
+  size: "xsmall" | "small" | "medium" | "large" | "xlarge";
+  tint?: "20" | "40" | "80" | "100" | "120";
+  coverUrl?: string;
+  description?: string;
+};
+
+const Cover = (props: CoverProps) => {
+  const { size, animate, src, tint, coverUrl, description } = props;
+
+  type TintClassesType = {
+    [key: string]: string;
+  };
+  const tintClasses: TintClassesType = {
+    default: "bg-identity-tint-120",
+    "120": "bg-identity-tint-120",
+    "100": "bg-identity-tint-100",
+    "80": "bg-identity-tint-80",
+    "40": "bg-identity-tint-40",
+    "20": "bg-identity-tint-20",
+  };
 
   const classes = {
-    wrapper: clsx(
-      "cover",
-      `cover--size-${size}`,
-      `cover--aspect-${size}`,
-      imageLoaded || tintClasses[tint || "default"]
-    ),
+    wrapper: clsx(`cover cover--${size}`, tintClasses[tint || "default"], {
+      cover__animate: animate,
+    }),
   };
 
-  if (coverUrl && description) {
-    // Images inside links must have an non-empty alt text to meet accessibility requirements.
-    // Only render the cover as a link if we have both an url and a description.
-    return (
-      <a
-        className={classes.wrapper}
-        href={coverUrl}
-        aria-label={ariaLabel}
-        aria-labelledby="cover labelled by"
-        title="cover title text"
-      >
-        <CoverImage
-          setImageLoaded={() => setImageLoaded(true)}
-          src={src}
-          description={description}
-          size={size}
-          animate={animate}
-          tint={tint}
-          shadow={shadow}
-        />
-      </a>
-    );
-  }
+  const materialCover = src && <img src={src} alt={description || ""} />;
 
   return (
-    <div className={classes.wrapper}>
-      <CoverImage
-        setImageLoaded={() => setImageLoaded(true)}
-        src={src}
-        description={description}
-        size={size}
-        animate={animate}
-        tint={tint}
-        shadow={shadow}
-      />
+    <div className="cover-container">
+      {/**
+       * Images inside links must have an non-empty alt text to meet accessibility requirements.
+       * Only render the cover as a link if we have both an url and a description.
+       */}
+      {coverUrl && description ? (
+        <a href={coverUrl} className={classes.wrapper}>
+          {materialCover}
+        </a>
+      ) : (
+        <span className={classes.wrapper}>{materialCover}</span>
+      )}
     </div>
   );
 };

src/stories/Library/cover/cover.scss

@@ -6,89 +6,78 @@ $MATERIAL_MEDIUM_MOBILE: 137px;
 $MATERIAL_MEDIUM_DESKTOP: 216px;
 $MATERIAL_LARGE_MOBILE: 216px;
 $MATERIAL_LARGE_DESKTOP: 216px;
-$MATERIAL_XLARGE_MOBILE: 284px;
-$MATERIAL_XLARGE_DESKTOP: 460px;
+$MATERIAL_XLARGE_MOBILE: 408px;
+$MATERIAL_XLARGE_DESKTOP: 408px;
 
-.cover--size {
-  &-xsmall {
-    border-radius: 3px;
+.cover-container {
+  display: flex;
+}
+
+.cover {
+  display: inline-block;
+  overflow: hidden;
+
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &--xsmall {
+    aspect-ratio: 0.69;
     height: $MATERIAL_XSMALL_MOBILE;
+    border-radius: 3px;
+
     @include breakpoint-s {
       height: $MATERIAL_XSMALL_DESKTOP;
     }
   }
 
-  &-small {
+  &--small {
+    aspect-ratio: 0.69;
     height: $MATERIAL_SMALL_MOBILE;
+
     @include breakpoint-s {
       height: $MATERIAL_SMALL_DESKTOP;
     }
   }
 
-  &-medium {
+  &--medium {
+    aspect-ratio: 0.69;
     height: $MATERIAL_LARGE_MOBILE;
+
     @include breakpoint-s {
       height: $MATERIAL_LARGE_DESKTOP;
     }
   }
 
-  &-large {
+  &--large {
+    aspect-ratio: 0.79;
     height: $MATERIAL_LARGE_MOBILE;
+
     @include breakpoint-s {
       height: $MATERIAL_LARGE_DESKTOP;
     }
   }
 
-  &-xlarge {
+  &--xlarge {
+    aspect-ratio: 0.79;
     height: $MATERIAL_XLARGE_MOBILE;
+
     @include breakpoint-s {
       height: $MATERIAL_XLARGE_DESKTOP;
     }
   }
 }
 
-.cover--aspect {
-  &-xsmall {
-    aspect-ratio: 0.69;
-  }
-
-  &-small {
-    aspect-ratio: 0.69;
-  }
-
-  &-medium {
-    aspect-ratio: 0.69;
-  }
-
-  &-large {
-    aspect-ratio: 0.79;
-  }
-
-  &-xlarge {
-    aspect-ratio: 0.79;
-  }
-}
-
-a.cover {
-  display: block;
-}
-
-.cover__img {
-  height: 100%;
-  margin: 0 auto;
-  object-fit: contain;
-
-  &.cover__img--animate {
+.cover__animate {
+  > img {
     animation: 0.3s ease-out 0s 1 CoverFadeIn;
   }
-
-  &.cover__img--shadow {
-    filter: drop-shadow(0 4px 40px rgb(0 0 0 / 15%));
-  }
 }
+
 // In this case we do not want to use kebab case
-@keyframes CoverFadeIn {
-  /* stylelint-disable-line */
+@keyframes CoverFadeIn { /* stylelint-disable-line */
   0% {
     opacity: 0;
     transform: scale(1.05) translateY(5px);

src/stories/Library/material-header/MaterialHeader.tsx

@@ -55,7 +55,6 @@ const MaterialHeader: React.FC<MaterialHeaderProps> = ({
           size="xlarge"
           tint="120"
           animate
-          shadow
         />
       </div>
       <div className="material-header__content">