rafaelrinaldi

parcelRequire = (function (init) {
  // Save the require from previous bundle to this closure if any
  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
  var nodeRequire = typeof require === 'function' && require;
  var modules = {};

  function localRequire(name, jumped) {
    if (name in modules) {
      return modules[name];
    }

rafaelrinaldi

import React from 'react';
import { StyleSheet, css } from 'aphrodite/no-important';
import helpers from '../theme/helpers';

/**
 * Base component that reduces boilerplate and enforces consistency.
 * Highly inspired by the work done by the Hyperterm team.
 */

const hoc = Component =>

rafaelrinaldi

import React from 'react';
import { PureComponent } from './BaseComponent';
import { opacity, space } from '../theme';

const data = [
  {
    id: 'your-policy',
    children: 'Your Policy',
  },
  {

rafaelrinaldi

4,27c4
<     "name": "MYGA - 3 Years",
<     "brand": "Gainbridge",
<     "type": "MYGA",
<     "period": 36,
<     "term": 3,
<     "activation": "2017-01-01T00:00:00-05:00",
<     "termination": "2040-12-31T00:00:00-05:00",
<     "states": [
<       "IL",

rafaelrinaldi

const combine = (...args) =>
  [].slice.call(args).reduce((next, value) => {
    // Create an object with duplicates combined
    const duplicates = Object.keys(value)
      .filter(key => next.hasOwnProperty(key))
      .map(key => {
        return {
          [key]: Object.assign(value[key], next[key])
        };
      })

rafaelrinaldi

Responsive

Quick guide on how we're approaching responsive style properties in components

Usage

rafaelrinaldi

import { get as scale } from '../../utils';
import { Colors } from './colors';
import chroma from 'chroma-js';

const darken = alpha =>
  chroma(Colors.BLACK)
    .alpha(alpha)
    .css();

export const gray = scale({

rafaelrinaldi

import React from 'react';
import PropTypes from 'prop-types';
import { Box } from 'reflexbox';

const Column = ({ children, size, ...props }) => (
  <Box w={size} {...props}>
    {children}
  </Box>
);

rafaelrinaldi

Grid

Quick guide on how to make use of the project's grid system

Principles

rafaelrinaldi

const calc = (minWidth, maxWidth, minFontSize, maxFontSize) =>
  `calc(${minFontSize}px + (${maxFontSize} - ${minFontSize}) * ((100vw - ${minWidth}px) / (${maxWidth} - ${minWidth})))`;

const fluidType = (minWidth, maxWidth, minFontSize, maxFontSize) => ({
  fontSize: minFontSize,
  [`@media screen and (min-width: ${minWidth}px)`]: {
    fontSize: calc(minWidth, maxWidth, minFontSize, maxFontSize),
  },

  [`@media screen and (min-width: ${maxWidth}px)`]: {