knoword-ui v0.7.5

Knoword UI

Knoword UI is a library of simple React components, a stylesheet reset, and several handy LESS variables designed to cut out a lot of the basic grunt work involved in building a website or a React web app. It follows the design style of Knoword, a fun vocabulary-building word game.

Follow @knoword or @trevorblades on Twitter for news and updates on this package.

Installation

You can install Knoword UI using npm:

$ npm install --save knoword-ui

React components

Knoword UI components are simple, handy elements that help web apps get off the ground quickly. They are flexible and can be configured easily using props.

Usage

Before you start using Knoword UI components, you should be using React in your web project. Include the knoword-ui package in your React app with import or require to use the individual components.

// Using an ES6 transpiler, like babel
import React from 'react';
import {Button, Checkbox, Dropdown} from 'knoword-ui';

// Not using an ES6 transpiler
var React = require('react');
var Button = require('knoword-ui').Button;
var Checkbox = require('knoword-ui').Checkbox;
var Dropdown = require('knoword-ui').Dropdown;

...and then include the components in your React app!

const Component = React.createClass({
  render: function() {
    return (
      <div className="kw-component">
        <Button>Click me</Button>
        <Checkbox label="Check me"/>
        <Dropdown items={['Option 1', 'Option 2', 'Option 3']}/>
      </div>
    );
  }
});

export default Component;

Button

A simple button that can be configured in a variety of ways. It uses the <button> HTML element and accepts optional tabIndex and type props that make the component behave identically to it's HTML counterpart. The button is a wrapper component, and it requires that children are passed into it. This can be a string or any HTML node.

<Button>Click me</Button>

Props

• children: node required
• className: string
• isDisabled: boolean
• isLarge: boolean
• isPrimary: boolean
• isSecondary: boolean
• isTransparent: boolean
• onClick: function
• tabIndex: number
• type: string

Checkbox

A replacement for the <input type="checkbox"> HTML element styled to look prettier than the default browser checkbox. It takes an optional name prop so that you can use the component as an input in an HTML form context.

<Checkbox label="Check me"/>

Props

• isDefaultChecked: boolean
• isRight: boolean
• label: string or node
• name: string
• onCheck: function

Dialog

A useful modal dialog component. It is hidden and shown depending on what its isHidden prop is set to. If the optional actions prop is supplied, it will render one or more Button components in its bottom right corner. The objects that make up the array passed along as the actions prop can use any of the props available to Button components, as well as a text property that gets passed used as the button's children. The optional message prop can also be used to show some floated small print in the bottom left corner of the dialog.

var actions = [
  {
    text: 'Submit',
    isPrimary: true,
    onClick: this._onSubmitClick
  },
  {
    text: 'Cancel',
    onClick: this._onCancelClick
  }
];

<Dialog actions={actions} title="I am a dialog">
  <p>Hear me roar!</p>
</Dialog>

Props

• actions: array
• children: node
• className: string
• isHidden: boolean
• message: string or node
• onClose: function
• title: string

Dropdown

A handy dropdown component that makes use of the Button component as a trigger. As such, it can use a selection of the Button component's display props: isPrimary, isSecondary, and isTransparent. The content of the button is filled by either the dropdown's provided children, or the currently selected element in the required items array. When a dropdown option is clicked, the optional onChange function receives the item's index as an argument.

<Dropdown items={['Option 1', 'Option 2', 'Option 3']}/>

Props

• children: node
• className: string
• isPrimary: boolean
• isRight: boolean
• isSecondary: boolean
• isTransparent: boolean
• items: array required
• label: string
• onChange: function
• selectedIndex: number
• tabIndex: number

Overlay

A fullscreen semitransparent black panel. It can optionally take children to display inside the overlay. Its visibility is controlled by the isHidden prop, and you can handle click events on the black faded part of the overlay (not the children) by passing a function to the onDimmerClick prop.

<Overlay>
  <h1>I am an overlay</h1>
  <p>Hear me roar!</p>
</Overlay>

Props

• children: node
• isHidden: boolean
• onDimmerClick: function

Tooltip

A simple tooltip component to help describe elements. It requires some amount of text as children, and positions itself relative to its parent (or the next relatively or absolutely positioned element going up the DOM tree.) Its position can be controlled using the position prop. It can be one of 'top', 'bottom', 'left', or 'right'.

<Tooltip position="left">This is a left-aligned tooltip</Tooltip>

Props

• children: node required
• position: string

LESS variables

Grays

• @gray-lightest: #f2f2f2
• @gray-lighter: #d9d9d9
• @gray-light: #b3b3b3
• @gray: #808080
• @gray-dark: #4d4d4d
• @gray-darker: #262626
• @gray-darkest: #0d0d0d

Colors

• @brand-primary: #f36a2b
• @brand-secondary: #38bdbb
• @brand-tertiary: #8b82eb
• @brand-success: #bde65c
• @brand-failure: #71182a

Faded blacks

• @black-faded-lighter: rgba(0, 0, 0, 0.05)
• @black-faded-light: rgba(0, 0, 0, 0.1)
• @black-faded: rgba(0, 0, 0, 0.25)
• @black-faded-dark: rgba(0, 0, 0, 0.5)
• @black-faded-darker: rgba(0, 0, 0, 0.7)

Font families

• @font-family-sans-serif: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif
• @font-family-serif: Georgia, Times, serif
• @font-family-monospace: 'Inconsolata', 'Courier New', Courier, monospace

Border radiuses

• @border-radius-small: 2px
• @border-radius-base: 3px
• @border-radius-large: 4px

Box shadows

• @box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.25)
• @box-shadow-base: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25)
• @box-shadow-large: 0 0 20px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25)

Padding

• @padding-base: 1.125em
• @padding-small: 0.75em
• @padding-smaller: 0.6em
• @padding-smallest: 0.2em
• @padding-large: 1.75em
• @padding-larger: 2.25em
• @padding-largest: 3em

Font sizes

• @font-size-base: 16px
• @font-size-small: 0.8125em

Transition durations

• @transition-duration-fast: 100ms
• @transition-duration-medium: 300ms
• @transition-duration-slow: 800ms

Timing functions

• @timing-function-bounce-out: cubic-bezier(0.175, 0.885, 0.32, 1.275)
• @timing-function-bounce-in: cubic-bezier(0.6, -0.28, 0.735, 0.045)

Media query breakpoints

These handy breakpoint variables make it easy to define media queries in your app. They target screens at various degrading widths.

• @desktop-large: 1280px and narrower
• @desktop: 1024px and narrower
• @tablet: 768px and narrower
• @tablet-small: 600px and narrower
• @mobile: 480px and narrower

// Usage
.my-class {
  width: 50%;
  margin: @padding-larger 0;
  @media @tablet {
    margin-top: 0;
  }
  @media @mobile {
    // Tablet styles are carried over for smaller sizes
    width: 100%;
  }
}