MDX/ArticleImage

Default

slug

caption

Component Source

article-image.tsx

import type { FunctionComponent } from 'preact';
import { ResponsiveImage } from '@/components/responsive-image';
import { captionClass } from '../caption-class';

export interface ArticleImageProps {
  slug: string;
  caption?: string;
}

const figureClass = 'w-full pt-vgap-sm pb-vgap-lg';

const imgClass = 'lg:mx-auto lg:max-w-[85%]';

export const ArticleImage: FunctionComponent<ArticleImageProps> = ({ slug, caption }) => {
  return (
    <figure className={figureClass} aria-label={caption ? undefined : slug.replace(/-/g, ' ')}>
      <div className={imgClass}>
        <ResponsiveImage slug={slug} alt={caption ? '' : slug.replace(/-/g, ' ')} />
      </div>
      {caption && <figcaption className={captionClass}>{caption}</figcaption>}
    </figure>
  );
};

Story Source

import { ArticleImage } from './article-image';
import type { ControlsMap } from '../../../sub-packages/styleguide/src/data/control-types';

export const meta = {
  title: 'MDX/ArticleImage',
};

export const controls: ControlsMap = {
  slug: { type: 'text', default: 'oxi-cap-ep1-front-panel' },
  caption: { type: 'text', default: 'OXI ONE MKII front panel overview' },
};

/**
 * Default - with caption
 */
export const Default = {
  args: { slug: 'oxi-cap-ep1-front-panel', caption: 'OXI ONE MKII front panel overview' },
  render: ({ slug, caption }: { slug: string; caption: string }) => (
    <ArticleImage slug={slug} caption={caption || undefined} />
  ),
};

export const WithCaption = () => (
  <ArticleImage slug="oxi-cap-ep1-front-panel" caption="OXI ONE MKII front panel overview" />
);

export const WithoutCaption = () => <ArticleImage slug="oxi-cap-ep1-grid-notes" />;