shawnbot

{
  "private": true,
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "babel-preset-env": "1.7.0",
    "jest": "23.4.1",
    "styled-system": "3.0.2"
  },

shawnbot

const resolveIdRefs = require('resolve-id-refs')

class RemoteSummary extends HTMLElement {
  clicking = false

  onToggle = event => {
    if (this.clicking) {
      return
    }
    const {target} = event

shawnbot

.m-0 {
  margin: 0 !important; }

.mt-0 {
  margin-top: 0 !important; }

.mr-0 {
  margin-right: 0 !important; }

.mb-0 {

shawnbot

import React from 'react'

const pass = props => props

export default function chameleon(defaultTag, mapProps = pass) {
  const Component = ({tag: Tag = defaultTag, ...rest}) => <Tag {...mapProps(rest)} />
  Component.as = tag => chameleon(tag, mapProps || pass)
  // if we don't want these to be infinitely as()-able, we could do this instead:
  // Component.as = Tag => ({tag, ...rest}) => <Tag {...mapProps(rest)} />
  return Component

shawnbot

{
  "presets": ["env", "react"]
}

shawnbot

const invariant = require('invariant')

const HIDE = 'd-none'
const SHOW = ['d-block', 'd-flex', 'd-inline', 'd-inline-block']
const DISPLAY = [HIDE].concat(SHOW)

module.exports = function displayClassToHidden(fileInfo, api, options) {
  const j = api.jscodeshift

  let replaced = false

shawnbot

gistup

shawnbot

[Details toggle]

The Details toggle component is what we used to use for most toggle-able content today.

The good

1. It's simple and well understood.
2. Because it's CSS-based, there's no flash of unstyled content: what should be invisible is, and vice-versa.

The bad

1. The class names Details-content--shown and Details-content--hidden can be confusing. (If you thought that "shown" was shown when the details are "on", you were wrong just like me!)

shawnbot

colorBlue: '#00f'
colorGreen: '#0f0'
colorRed: '#f00'

shawnbot

U.S. Web Design Standards + node-sass

This is a very simple example of how to set up [node-sass] to build on the [U.S. Web Design Standards][uswds]. To run it:

1. Install [Node.js].

2. Install node-sass and the Standards source files with:

npm install