message: feat(carousel): added story for cards with images
  ### Related Ticket(s)
  ### Description
  Added Cards with Images variant for Carousel stories
diff: @@ -26,6 +26,8 @@ import '../carousel';
  import styles from './carousel.stories.scss';
  import readme from './README.stories.mdx';
  +import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--005.jpg';
  +
  const hrefDefault = 'https://www.ibm.com/standards/web/carbon-for-ibm-dotcom';
  const headingDefault = 'Lorem ipsum dolor sit amet';
  const copyDefault = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.';
  @@ -44,10 +46,15 @@ const cardSizes8 = {
  '1 for all breakpoints': 'dds-ce-demo-devenv--carousel--center-8--large',
  };
  -const Card = ({ copy = copyDefault, heading = headingDefault, href = hrefDefault } = {}) => html`
  +const Card = ({ copy = copyDefault, heading = headingDefault, href = hrefDefault, image = undefined } = {}) => html`
  <dds-card href="${ifNonNull(href)}">
  <dds-card-heading>${heading}</dds-card-heading>
  ${copy}
  + ${image
  + ? html`
  + <dds-image slot="image" alt="example image" default-src="${image}"></dds-image>
  + `
  + : null}
  <dds-card-footer>
  ${ArrowRight20({ slot: 'icon' })}
  </dds-card-footer>
  @@ -66,6 +73,21 @@ export const Default = ({ parameters }) => {
  `;
  };
  +export const CardsWithImages = ({ parameters }) => {
  + const { cardSize } = parameters?.props?.Carousel ?? {};
  + const classes = classMap({
  + [cardSize]: cardSize,
  + });
  + return html`
  + <dds-carousel class="${classes}">
  + ${Card({ image: imgLg2x1 })}${Card({ copy: copyOdd, image: imgLg2x1 })}${Card({ image: imgLg2x1 })}${Card({
  + copy: copyOdd,
  + image: imgLg2x1,
  + })}${Card({ image: imgLg2x1 })}
  + </dds-carousel>
  + `;
  +};
  +
  Default.story = {
  parameters: {
  gridCarouselClass: 'dds-ce-demo-devenv--simple-grid--carousel--full-16',
  @@ -82,6 +104,22 @@ Default.story = {
  },
  };
  +CardsWithImages.story = {
  + parameters: {
  + gridCarouselClass: 'dds-ce-demo-devenv--simple-grid--carousel--full-16',
  + knobs: {
  + Carousel: ({ groupId }) => ({
  + cardSize: select(
  + 'Number of cards per page (--dds--carousel-page-size CSS custom property)',
  + cardSizes16,
  + cardSizes16['1 for sm, 2 for md, 4 for lg and beyond'],
  + groupId
  + ),
  + }),
  + },
  + },
  +};
  +
  export const Right12Columns = context => Default(context);
  Right12Columns.story = {
  