ComponentSize.tsx

import { IconRegistry } from '@dna/core/icon';
import { faArrowsH, faArrowsV } from '@fortawesome/pro-regular-svg-icons';
import { styled } from '@storybook/theming';
import React, { FunctionComponent } from 'react';

IconRegistry.addIcons(faArrowsH, faArrowsV);

export interface ComponentSizeProps {
  children?: JSX.Element;
  height?: string;
  width?: string;
}

export const ComponentSize: FunctionComponent<ComponentSizeProps> = ({ children, width, height }) => {
  const DIV = styled('div')`
    align-self: flex-start;
    display: inline-grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;

    .ruler {
      align-items: center;
      display: inline-flex;
      font-size: 12px;
      gap: 0.25rem;

      em {
        font-style: normal;
      }

      dna-icon {
        --icon-size: 12px;
      }
    }

    .height {
      gap: 0;
      grid-column: 2 / 3;

      em {
        transform: rotate(90deg);
      }
    }

    .width {
      grid-row: 2 / 3;
      justify-self: center;
    }
`;

  return (
    <DIV>
      {children}
      {height
        ? <span className="ruler height">
            <em>{height}</em>
            <dna-icon name="far-arrows-v"></dna-icon>
          </span>
        : ''}
      {width
        ? <span className="ruler width">
            <em>{width}</em>
            <dna-icon name="far-arrows-h"></dna-icon>
          </span>
        : ''}
    </DIV>
  );
};

ExampleGrid.tsx

import { styled } from '@storybook/theming';
import React, { FunctionComponent } from 'react';

export interface ExampleGridProps {
  children?: JSX.Element[];
}

export const ExampleGrid: FunctionComponent<ExampleGridProps> = ({ children }) => {
  const DIV = styled('div')`
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
`;

  return (
    <DIV>{children}</DIV>
  );
}

GoodBadList.tsx

import '@dna/core/card/register';
import { IconRegistry } from '@dna/core/icon';
import { faCheckCircle, faTimesCircle } from '@fortawesome/pro-solid-svg-icons';
import { styled } from '@storybook/theming';
import React, { FunctionComponent } from 'react';

declare global {
  namespace JSX {
    interface IntrinsicElements {
      'dna-card': any;
      'dna-icon': any;
    }
  }
}

IconRegistry.addIcons(faCheckCircle, faTimesCircle);

export interface GoodBadListProps {
  children?: JSX.Element[];
}

export interface BadProps {
  children?: JSX.Element;
}

export interface GoodProps {
  children?: JSX.Element;
}

export const Bad: FunctionComponent<BadProps> = ({ children }) => {
  return children;
};

export const Good: FunctionComponent<GoodProps> = ({ children }) => {
  return children;
};

export const GoodBadList: FunctionComponent<GoodBadListProps> = ({ children }) => {
  const good = children.filter(child => child.props.mdxType === 'Good'),
    bad = children.filter(child => child.props.mdxType === 'Bad');

  const DIV = styled('div')`
    display: flex;
    gap: 1rem;
    margin: 1rem 0;

    > dna-card {
      flex-basis: 50%;

      &:first-of-type {
        --feature: var(--dna-success);
      }

      &:last-of-type {
        --feature: var(--dna-danger);
      }
    }
`;

  const UL = styled('ul')`
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      align-items: center;
      display: flex;
      gap: 1rem;
      padding: 1rem 0;

      + li {
        border-top: 1px solid #ccc;
      }

      > dna-icon {
        --icon-size: 1.5rem;
        color: var(--feature);
      }
    }

`;

  return (
    <DIV>
      <dna-card feature>
        <UL>
          {good.map((item, index) => {
            return (
              <li key={index}>
                <dna-icon name="fas-check-circle"></dna-icon>
                {item}
              </li>
            );
          })}
        </UL>
      </dna-card>

      <dna-card feature>
        <UL>
          {bad.map((item, index) => {
            return (
              <li key={index}>
                <dna-icon name="fas-times-circle"></dna-icon>
                {item}
              </li>
            );
          })}
        </UL>
      </dna-card>
    </DIV>
  );
};