Instantly share code, notes, and snippets.

View parcel-test.js
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];
}
View BaseComponent.js
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 =>
View Breadcrumb.js
import React from 'react';
import { PureComponent } from './BaseComponent';
import { opacity, space } from '../theme';
const data = [
{
id: 'your-policy',
children: 'Your Policy',
},
{
View file.diff
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",
View combine.js
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])
};
})
View RESPONSIVE.md

Responsive

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

Usage

View gray.js
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({
View Column.js
import React from 'react';
import PropTypes from 'prop-types';
import { Box } from 'reflexbox';
const Column = ({ children, size, ...props }) => (
<Box w={size} {...props}>
{children}
</Box>
);
View GRID.md

Grid

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

Principles

View typography.js
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)`]: {