Add "identity" CSS class for handling cases with missing images

- Implement `%identity-background` to set the background color and apply a bold border.
- Introduce `image-credited__no-image` class that extends `%identity-background`.

src/stories/Blocks/event-page/EventPage.stories.tsx

@@ -109,3 +109,7 @@ export default {
 const Template: ComponentStory<typeof Event> = (args) => <Event {...args} />;
 
 export const Default = Template.bind({});
+export const withOutImage = Template.bind({});
+withOutImage.args = {
+  image: "",
+};

src/stories/Library/image-credited/ImageCredited.stories.tsx

@@ -38,3 +38,7 @@ const Template: ComponentStory<typeof ImageCredited> = (args) => (
 );
 
 export const Default = Template.bind({});
+export const withOutImage = Template.bind({});
+withOutImage.args = {
+  src: "",
+};

src/stories/Library/image-credited/ImageCredited.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx";
-import { FC } from "react";
 
 type ImageCreditedProps = {
   src: string;
@@ -9,7 +8,7 @@ type ImageCreditedProps = {
   className?: string;
 };
 
-const ImageCredited: FC<ImageCreditedProps> = ({
+const ImageCredited: React.FC<ImageCreditedProps> = ({
   src,
   alt = "",
   description,
@@ -18,11 +17,17 @@ const ImageCredited: FC<ImageCreditedProps> = ({
 }) => {
   return (
     <figure className={clsx("image-credited", className)}>
-      <img src={src} className="image-credited__img" alt={alt} />
-      <div className="image-credited__info">
-        <span>{description}</span>
-        <span>{year}</span>
-      </div>
+      {src ? (
+        <>
+          <img src={src} className="image-credited__img" alt={alt} />
+          <figcaption className="image-credited__info">
+            <span>{description}</span>
+            <span>{year}</span>
+          </figcaption>
+        </>
+      ) : (
+        <div className="image-credited__no-image" />
+      )}
     </figure>
   );
 };

src/stories/Library/image-credited/image-credited.scss

@@ -8,3 +8,8 @@
   display: flex;
   justify-content: space-between;
 }
+
+.image-credited__no-image {
+  aspect-ratio: 16 / 9;
+  @extend %identity-background;
+}

src/styles/scss/shared.scss

@@ -85,3 +85,8 @@
   display: inline;
   margin: 0 0 -5px 5px;
 }
+
+%identity-background {
+  background-color: var(--tint-color-120);
+  border: $s-2xl solid $color__identity-primary;
+}