Add circleimage / milestone card component

src/scss/_components.scss

@@ -5,6 +5,7 @@
 @import 'components/BaseImagePlaceholder';
 @import 'components/BasePlaceholder';
 @import 'components/BackToTop';
+@import 'components/BlockCircleImageCard';
 @import 'components/BlockImageCarousel';
 @import 'components/BlockImageCarouselItem';
 @import 'components/BlockImageGallery';

src/scss/components/_BlockCircleImageCard.scss

@@ -0,0 +1,21 @@
+.BlockCircleImageCard {
+  --image-size: 90px;
+
+  display: flex;
+  align-items: center;
+  gap: calc(var(--image-size) / 2);
+
+  @screen lg {
+    --image-size: 130px;
+  }
+
+  .BaseImagePlaceholder {
+    width: var(--image-size);
+    height: var(--image-size);
+    margin: 0 calc(-1 * var(--image-size) / 2);
+  }
+
+  &.imageOnRight {
+    flex-direction: row-reverse;
+  }
+}

storybook/stories/_docs/overview_blocks.stories.mdx

@@ -168,5 +168,12 @@ Reserved for the top of the page. Learn more about our heroes on the [heroes ove
         'Features an image with a text overlay, with a hover effect. Recommended for use with shorter text. `BlockLinkTile` is an item type option available in `BlockLinkCarousel`.',
       storyId: 'components-blocks-blocklinktile--card',
     },
+    {
+      heading: 'BlockCircleImageCard',
+      description:
+        'Features a circular image alongside text, with a drop shadow and no hover effects. The image can be positioned on the left or the right.',
+      storyId: 'components-blocks-blockcircleimagecard--card',
+      fullWidth: true,
+    },
   ]}
 />

storybook/stories/components/BlockCircleImageCard/BlockCircleImageCard.js

@@ -0,0 +1,44 @@
+import { BaseImagePlaceholderTemplate } from '../BaseImagePlaceholder/BaseImagePlaceholder'
+import { BaseHeadingTemplate } from '../BaseHeading/BaseHeading'
+
+export const BlockCircleImageCardTemplate = ({
+  type = 'imageOnLeft',
+  imageOnRight = false,
+  title,
+  label,
+  secondaryLabel = '',
+  image,
+  customClass = '',
+}) => {
+  return `
+  <div class="BlockCircleImageCard shadow-jpl ${
+    imageOnRight ? 'imageOnRight' : ''
+  } ${customClass}">
+    ${BaseImagePlaceholderTemplate({
+      theme: 'transparent-theme',
+      src: image.src.url,
+      srcset: image.srcSet,
+      alt: image.alt,
+      width: image.src.width,
+      height: image.src.height,
+      objectFitClass: 'object-cover',
+      imageClass: 'rounded-full border-4 border-white',
+      wrapperClass: `h-full`,
+    })}
+    <div class="content relative px-8 py-8">
+      <div class="text-gray-dark text-subtitle mb-3">${label}</div>
+      ${
+        secondaryLabel
+          ? `<div class="text-gray-mid-dark text-subtitle">${secondaryLabel}</div>`
+          : ''
+      }
+      ${BaseHeadingTemplate({
+        text: title,
+        size: 'h5',
+        tag: 'h3',
+        headingClass: 'mt-3',
+      })}
+    </div>
+  </div>
+  `
+}

storybook/stories/components/BlockCircleImageCard/BlockCircleImageCard.stories.js

@@ -0,0 +1,65 @@
+import { BlockCircleImageCardTemplate } from './BlockCircleImageCard'
+
+export default {
+  title: 'Components/Blocks/BlockCircleImageCard',
+  argTypes: {
+    imageOnRight: {
+      type: { name: 'boolean', required: false },
+      description: 'Determines position of the image',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    title: {
+      type: { name: 'string', required: true },
+      description: 'Heading',
+    },
+    label: {
+      type: { name: 'string', required: true },
+      description: 'Subtitle',
+    },
+    secondaryLabel: {
+      type: { name: 'string', required: false },
+      description: 'Secondary subtitle',
+    },
+    image: {
+      type: { name: 'object', required: true },
+      description: 'Image object',
+    },
+  },
+  decorators: [
+    (Story) =>
+      `<div id="storyRoot" class="max-w-xl mx-auto container">${Story()}</div>`,
+  ],
+  parameters: {
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component:
+          'Features a circular image alongside text, with a drop shadow and no hover effects. The image can be positioned on the left or the right.',
+      },
+    },
+    html: {
+      root: '#storyRoot',
+    },
+  },
+}
+
+export const Card = BlockCircleImageCardTemplate.bind({})
+Card.storyName = 'BlockCircleImageCard'
+Card.args = {
+  imageOnRight: false,
+  title: 'First Flight of Technology for Returning Warheads from Space',
+  label: 'September 20, 1956',
+  secondaryLabel: 'Re-entry test vehicle program',
+  image: {
+    src: {
+      url: 'https://picsum.photos/130/130',
+      width: 130,
+      height: 130,
+    },
+    srcSet:
+      'https://picsum.photos/90/90 320w, https://picsum.photos/130/130 1024w',
+    alt: 'Alt text for image',
+  },
+}