consonance/docs/components/Demo.jsx

Fix your typographic scale

const R = require('ramda');
const React = require('react');
const ScaleLine = require('./ScaleLine.jsx');
const consonance = require('../../index.js');
const Scale = require('./Scale.jsx');
const ms = require('simple-modular-scale');

const Demo = React.createClass({
  render() {
    const options = {
      base: 16,
      ratios: [3/2, 4/3],
      length: 8
    }
    const scale = ms(options);
    const processed = consonance(this.props.fixtures.github, options);
    const count = processed.length;
    const gx = R.groupBy(R.prop('output'), processed);

    const groups = R.mapObjIndexed(this.buildGroup, gx);

    return (
      <div className='container flex flex-column px2'>
        <p className='mb3'>Found <strong>{count}</strong> different font sizes on <a href="https://github.com/">GitHub.com</a> 😰</p>
        <Scale input={this.props.fixtures.github} scale={scale} />
        <div className='py3'>
          {groups}
        </div>
      </div>
    )
  },

  buildGroup(group, key) {
    return (
      <div className='flex border-top mb2 py3 mxn2'>
        <div className='sm-col sm-col-6 px2'>
          {R.map((line, i) => { return <ScaleLine size={line.input} /> })(group)}
        </div>
        <div className='sm-col sm-col-6 px2'>
          <ScaleLine size={key} />
        </div>
      </div>
    )
  }
});
module.exports = Demo;