example component

button__index.js

// all of our components are in their own directories with local css
// so we use index.js (node resolution paradigm) so we can write:
//   `import Button from 'components/button'`
//  rather than:
//    `import Button from 'components/button/button'`
//
// eg. dir structure
//   /components/button
//   /components/button/index.js
//   /components/button/button.js
//   /components/button/button.css
export {default as default} from './button';

type__type.js

import React from 'react';
import cx from 'classnames';

import styles from './styles.css'

// heading implements all the styling logic
export function Heading({size, weight, ...props}) {
  const Component = `H${size}`;
  return (
    <Component
      className={cx({
        [`size-${size}`]: true,
        [`weight-${weight}`]: true
      })}
      {...props}
    />
  );
}

// make composable components for easier styleguide-conformant usage
export function H1(props) {
  return (
    <Heading size={1} weight="bold" {...props} />
  );
}

// recompose library is great for this
export const H2 = Recompose.withProps({size: 2, weight: 'semi-bold'})(Heading);