mrcthms

const Grid = () => (
  <Row>
    <Col>I am a Col</Col>
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    

mrcthms

import React from 'react'
import Animation from 'invision-helios/lib/Animation'

class Parent extends React.Component {
  state = {
    hovered: false
  }
  
  onHover = () => {
    this.setState({ hovered: !this.state.hover })

mrcthms

components/
 - Logo/
 --- Logo.js
 --- Logo.spec.js
 --- Logo.css
 --- index.js
 - MainNavigation/
 --- MainNavigation.js
 --- MainNavigation.spec.js
 --- MainNavigation.css

mrcthms

QuoteAndCTA/_styles.scss:

.bnc-quote-and-cta {
  @extend %padded-bottom-big;
  @extend %padded-top-big;
  text-align: center;

  &__quote {
    @extend %text-giga;
    @extend %spaced-bottom-small;

mrcthms

<div class="form-wrapper">
  <form id="my-form" action="/posts/new" method="post">
    <input id="name" name="name" type="text" />
    <button type="submit">Submit</button>
  </form>
</div>
<div class="totally-different-element">
  <input form="my-form id="password" name="password" type="text" />
  <!-- this will still be part of the form data when submitted 😱 -->
</div>

mrcthms

import React from 'react';
import PropTypes from 'prop-types';

export const oneOfProps = {
  colour: ['red', 'green', 'blue'],
  size: ['small', 'medium', 'large']
};

export const propTypes = {
  name: PropTypes.string.isRequired,

mrcthms

import React from 'react';
import PropTypes from 'prop-types';
import './Table.css';

const getRows = propTypes => Object.keys(propTypes).map(prop => (
  <tr key={prop}>
    <td>{prop}</td>
    <td>{propTypes[prop].type}</td>
    <td>{propTypes[prop].required.toString()}</td>
    <td>{propTypes[prop].description}</td>

mrcthms

import React from 'react';
import deepAssign from 'deep-assign';
import Badge from './components/Badge';
import data from './data';
import Table from './ui/Table';
import './App.css';
import propTypesToObject from './helpers/propTypesToObject';
import propTypesToDescriptions from './helpers/propTypesToDescriptions';

const propTypes = propTypesToObject({

mrcthms

const propTypesToDescriptions = ({ propTypes, data }) => Object.keys(propTypes).reduce((obj, curr) => ({
  ...obj,
  [curr]: {
    description: data[curr]
  }
}), {});

export default propTypesToDescriptions;

mrcthms

export default {
  propTypes: {
    Badge: {
      withHeading: 'Whether we should show some additional messaging within the Badge.',
      heading: 'If withHeading is true, this is the content of the additional messaging that will be shown.',
      children: 'The main content of the Badge.'
    }
  }
}