react-howl/stories/theme/ThemeSpacing.jsx

A unified design system.

import React from 'react';
import { withStyles, withStylesPropTypes } from ':styles';

const ThemeSpacing = ({ classNames, theme }) => {
  const { spacing } = theme;

  return (
    <div>
      <div className={classNames.spacing}>
        <div className={classNames.spacingType}>BASE</div>
        <div>
          <div
            className={classNames.spacer}
            style={{ padding: spacing.base }}
          />
        </div>
      </div>

      <div className={classNames.spacing}>
        <div className={classNames.spacingType}>XL</div>
        <div className={classNames.spacer} style={{ padding: spacing.xl }} />
      </div>

      <div className={classNames.spacing}>
        <div className={classNames.spacingType}>LG</div>
        <div>
          <div className={classNames.spacer} style={{ padding: spacing.lg }} />
        </div>
      </div>

      <div className={classNames.spacing}>
        <div className={classNames.spacingType}>MD</div>
        <div>
          <div className={classNames.spacer} style={{ padding: spacing.md }} />
        </div>
      </div>

      <div className={classNames.spacing}>
        <div className={classNames.spacingType}>SM</div>
        <div>
          <div className={classNames.spacer} style={{ padding: spacing.sm }} />
        </div>
      </div>

      <div className={classNames.spacing}>
        <div className={classNames.spacingType}>XS</div>
        <div>
          <div className={classNames.spacer} style={{ padding: spacing.xs }} />
        </div>
      </div>
    </div>
  );
};

ThemeSpacing.propTypes = {
  ...withStylesPropTypes,
};

export default withStyles(() => ({
  spacing: {
    width: '100%',
    padding: 25,
  },

  spacingType: {
    fontSize: 20,
    fontWeight: 600,
    marginBottom: 10,
  },

  spacer: {
    display: 'inline-block',
    background: 'white',
    border: '2px solid black',
  },
}))(ThemeSpacing);