grantglidewell

{"version":1,"keyboard":{"keys":[{"id":0,"legend":"~\n`","state":{"x":0,"y":1,"r":0,"rx":0,"ry":0,"w":1,"h":1,"x2":0,"y2":0,"w2":0,"h2":0},"row":0,"col":0,"keycodes":[{"id":"KC_GRV","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]}]},{"id":1,"legend":"!\n1","state":{"x":1,"y":1,"r":0,"rx":0,"ry":0,"w":1,"h":1,"x2":0,"y2":0,"w2":0,"h2":0},"row":0,"col":1,"keycodes":[{"id":"KC_1","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},{"id":"KC_TRNS","fields":[]},

grantglidewell

[{y:1},"~\n`","!\n1","@\n2","#\n3","$\n4","%\n5","^\n6","&\n7","*\n8","(\n9",")\n0","_\n-","+\n=",{a:6,w:2},"Backspace","Home"],
[{a:4,w:1.5},"Tab","Q","W","E","R","T","Y","U","I","O","P","{\n[","}\n]",{w:1.5},"|\n\\",{a:6},"Page Up"],
[{a:4,w:1.75},"Caps Lock","A","S","D","F","G","H","J","K","L",":\n;","\"\n'",{a:6,w:2.25},"Enter","Page Down"],
[{w:2.25},"Shift",{a:4},"Z","X","C","V","B","N","M","<\n,",">\n.","?\n/",{a:6,w:1.75},"Shift",{a:7},"↑",{a:6},"End"],
[{w:1.25},"Ctrl",{w:1.25},"Win",{w:1.25},"Alt",{a:7,w:6.25},"",{a:6},"Alt","Fn","Ctrl",{a:7},"←","↓","→"]

grantglidewell

// this is example data and will be replaced with the actual components when they are made public
import React, { Component } from 'react'
import { connect } from 'react-redux'

import styles from './Confirm.less'

const Confirm = props => {
  return (
    (props.isOpen && (
      <section className={styles.confirmWrapper}>

grantglidewell

export function Button(props) {
  return (
    <button
      {...props}
      className={cx(styles.button, props.className, styles[props.type])}
    >
      {props.text}
      {React.Children.map(
        React.Children.toArray(props.children),
        (child, i) => {

grantglidewell

export function ButtonGroup(props) {
  let opts = {
    className: cx(styles.ButtonGroup, props.className)
  };
  return (
    <div {...opts}>
      {React.Children.map(props.children, child => {
        if (child) {
          return React.cloneElement(child, {
            className: cx(styles.child, child.props.className)

grantglidewell

export function Card(props) {
  return (
    <article {...props} className={cx(styles.Card, props.className)}>
      {props.children}
    </article>
  );
}

export function CardHeader(props) {
  return (

grantglidewell

<Card>
  <CardHeader>This is the card Header</CardHeader>
  <CardContent>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.

grantglidewell

export function Divider(props) {
  return <hr className={cx(styles.Divider, props.className)} />;
}
  
usage: <Divider />

grantglidewell

export function Loader() {
  return (
    <div className={styles.loader}>
      <span className={styles.bar} />
      <span className={styles.bar} />
      <span className={styles.bar} />
      <span className={styles.bar} />
      <span className={styles.bar} />
    </div>
  );

grantglidewell

export function Option({ value, html, text, onClick }) {
  if (html) {
    return (
      <li
        data-value={value}
        onClick={onClick}
        dangerouslySetInnerHTML={{ __html: html }}
      />
    )
  } else {