DETHER.IO Design System

UX guidelines, HTML/CSS framework, and React components working together to craft exceptional experiences at Dether.

Getting started

Install

$ yarn add @dether.io/dether-ui

Past this line in the header of the index.html file

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

Usage

AppBar

import AppBar from '@dether.io/dether-ui/AppBar';

Or

import { AppBar } from '@dether.io/dether-ui';

// Default
<AppBar />;

// Background color
<AppBar background={color}/>;

// With box shadow
<AppBar raised />;

// With bottom border
<AppBar separator />;

Avatar

import Avatar from '@dether.io/dether-ui/Avatar';

Or

import { Avatar } from '@dether.io/dether-ui';

// Default
<Avatar />;

// With source file
<Avatar src={'https://goo.gl/TLBLDM'}/>;

// Small avatar
<Avatar src={'https://goo.gl/TLBLDM' size="small"}/>;

// Large avatar
<Avatar src={'https://goo.gl/TLBLDM' size="large"}/>;

Button

import Button from '@dether.io/dether-ui/Button';

Or

import { Button } from '@dether.io/dether-ui';

// Default
<Button />;

// Appearance
<Button appearance="countained"/>;
<Button appearance="outlined"/>;
<Button appearance="textOnly"/>;

// Style
<Button color="primary"/>;
<Button color="secondary"/>;

// Rounded
<Button rounded/>;

// Responsive
<Button responsive/>;

// dropShadow
<Button dropShadow/>;

Checkbox

import Checkbox from '@dether.io/dether-ui/Checkbox';

Or

import { Checkbox } from '@dether.io/dether-ui';

// Default
<Checkbox />;

// color
<Checkbox color="primary"/>;
<Checkbox color="secondary"/>;

// onChange event
<Checkbox onChange={() => {}}/>;

// onClick event
<Checkbox onClick={() => {}}/>;

Colors

import Colors from '@dether.io/dether-ui/Colors';

Or

import { Colors } from '@dether.io/dether-ui';

// Primary
Colors.primary.light
Colors.primary.medium
Colors.primary.dark

// Secondary
Colors.secondary.light
Colors.secondary.medium
Colors.secondary.dark

// Black
Colors.black.light
Colors.black.medium
Colors.black.dark
Colors.black.darker

// White
Colors.white

// Yellow
Colors.yellow

// Red
Colors.red

Headings

import { H1, H2, H3, H4, H5, H6 } from '@dether.io/dether-ui/Headings'

const Title = (
  <div>
    <H1>Title h1</H1>
    <H2>Title h2</H2>
    <H3>Title h3</H3>
    <H4>Title h4</H4>
    <H5>Title h5</H5>
    <H6>Title h6</H6>
  </div>
)

const TitleUnderline = <H1 underline>Title h1</H1>
const TitleAlignCenter = <H1>Title h1</H1>
const TitleAlignRight = <H1 right>Title h1</H1>
const TitleAlignLeft = <H1 left>Title h1</H1>
const TitleAlignJustify = <H1 justify>Title h1</H1>

Or

import { Headings } from '@dether.io/dether-ui'

const Title = (
  <div>
    <Headings.H1>Title h1</Headings.H1>
    <Headings.H2>Title h2</Headings.H2>
    <Headings.H3>Title h3</Headings.H3>
    <Headings.H4>Title h4</Headings.H4>
    <Headings.H5>Title h5</Headings.H5>
    <Headings.H6>Title h6</Headings.H6>
  </div>
)

const TitleUnderline = <Headings.H1 underline>Title h1</Headings.H1>
const TitleAlignCenter = <Headings.H1>Title h1</Headings.H1>
const TitleAlignRight = <Headings.H1 right>Title h1</Headings.H1>
const TitleAlignLeft = <Headings.H1 left>Title h1</Headings.H1>
const TitleAlignJustify = <Headings.H1 justify>Title h1</Headings.H1>

Icon

import Icon from '@dether.io/dether-ui/Icon';

Or

import { Icon } from '@dether.io/dether-ui';

// Default
<Icon />;

// Color
<Icon color={color}/>;

// Size
<Icon size="sm"/>;
<Icon size="md"/>;
<Icon size="lg"/>;

// Icons
<Icon name="accessTime"/>;
const iconNames = [
  'accessTime',
  'add',
  'addShoppingCart',
  'airplaneModeActive',
  'arrowDropDown',
  'arrowDropUp',
  'arrowLeft',
  'arrowRight',
  'checkbox',
  'checkCircle',
  'circle',
  'close',
  'event',
  'favorite',
  'fingerprint',
  'flightLand',
  'flightTakeoff',
  'fullscreen',
  'fullscreenExit',
  'keyboardArrowDown',
  'keyboardArrowUp',
  'keyboardArrowLeft',
  'keyboardArrowRight',
  'localisation',
  'locationOn',
  'menu',
  'map',
  'permIdentity',
  'poll',
  'profile',
  'qrCode',
  'radio',
  'save',
  'search',
  'sell',
  'share',
  'shop',
  'shoppingCart',
  'thumbsUp',
  'token',
  'translate',
  'tune',
  'user',
  'visibility',
  'wallet',
  'whatshot',
]

Input

import Input from '@dether.io/dether-ui/Input';

Or

import { Input } from '@dether.io/dether-ui';

// Default
<Input />;

// onChange event
<Input onChange={() => {}} />;

// onClick event
<Input onClick={() => {}} />;

// Clear Input function
<Input handleClearInput={() => {}} />;

// isValid
<Input isValid />;
<Input isValid={true} />;
<Input isValid={false} />;

// Value
<Input value={value} />;

// Error Message
<Input errorMessage={errorMessage} />;

// Hint
<Input hint={hint} />;

// Disabled
<Input disabled />;

// Sizes ( with labels )
<Input size="sm" />;
<Input size="md" />;
<Input size="lg" />;

// Sizes ( in pixels )
<Input size={250} />;

List

import List from '@dether.io/dether-ui/List';

Or

import { List } from '@dether.io/dether-ui';

// Default
<List>
    <List.Item key={item.key}>
      <List.Content>
        <List.Header>{item.header}</List.Header>
      </List.Content>
    </List.Item>
</List>

// Right aligned action
<List>
    <List.Item key={item.key}>
      <List.Content>
        <List.Header>{item.header}</List.Header>
        <List.Description>{item.description}</List.Description>
      </List.Content>
      <List.Content right>
        <List.Action>
          <Icon name="search" />
        </List.Action>
      </List.Content>
    </List.Item>
  </List>

// Left aligned action
<List type="content">
  <List.Item key={item.key}>
    <List.Content left>
      <List.Action>
        <Icon name="favorite" />
      </List.Action>
    </List.Content>
    <List.Content>
      <List.Header>{item.header}</List.Header>
    </List.Content>
    <List.Content right>
      <Icon name="search" />
    </List.Content>
  </List.Item>
</List>

Loader

import { CircularLoader, LinearLoader, PointLoader } from '@dether.io/dether-ui/Loader'

// Circular Loader
<CircularLoader />

// Linear Loader
<LinearLoader />

// Point Loader
<PointLoader />

Or

import { Loader } from '@dether.io/dether-ui'

// Circular Loader
<Loader.CircularLoader />

// Linear Loader
<Loader.LinearLoader />

// Point Loader
<Loader.PointLoader />

// Circular Loader color
<CircularLoader color="primary"/>
<CircularLoader color="secondary"/>
<CircularLoader color="black"/>

// Circular Loader contained
<CircularLoader contained/>

// Circular Loader paused
<CircularLoader paused/>

// Linear Loader color
<LinearLoader color="primary"/>
<LinearLoader color="secondary"/>
<LinearLoader color="black"/>

// Linear Loader progress (0 to 100)
<LinearLoader color={10}/>

// Point Loader color
<PointLoader color="primary"/>
<PointLoader color="secondary"/>
<PointLoader color="black"/>

// Point Loader paused
<PointLoader paused/>

Logo

import Logo from '@dether.io/dether-ui/Logo';

Or

import { Logo } from '@dether.io/dether-ui';

<Logo />;

// Display only Dether's logo
<Logo display="logo" />;

// Display only Dether's brand name
<Logo display="name" />;

// Display both logo and name
<Logo display="all" />;

// Sizes
<Logo size="sm" />;
<Logo size="md" />;
<Logo size="lg" />;

Margin

import { Margin, Padding } from '@dether.io/dether-ui/Margin';

Margin.body;
Margin.button;
Margin.iconToText;
Margin.iconToIcon;

Padding.button;
Padding.buttonWithIcon;
Padding.modalBody;
Padding.modalFooter;

Or

import { Margin } from '@dether.io/dether-ui';

Margin.Margin.body;
Margin.Margin.button;
Margin.Margin.iconToText;
Margin.Margin.iconToIcon;

Margin.Padding.button;
Margin.Padding.buttonWithIcon;
Margin.Padding.modalBody;
Margin.Padding.modalFooter;

Navigation

import Navigation from '@dether.io/dether-ui/Navigation';

Or

import { Navigation } from '@dether.io/dether-ui';

// Default
<Navigation />;

// With separator
<Navigation separator/>;

// Active element key
<Navigation defaultActiveItem={itemKey}>

Radio

import Radio from '@dether.io/dether-ui/Radio';

Or

import { Radio } from '@dether.io/dether-ui';

// Default
<Radio />;

// onChange event
<Radio onChange={() => {}} />

// onClick event
<Radio onClick={() => {}} />

// Color
<Radio color="primary" />
<Radio color="secondary" />
<Radio color="black" />

Range

import Range from '@dether.io/dether-ui/Range';

Or

import { Range } from '@dether.io/dether-ui';

// Default
<Range />;

// Color
<Range color="primary">
<Range color="secondary">
<Range color="black">

Text

import Text from '@dether.io/dether-ui/Text'

<Text variant="body1">
  Apparently we had reached a great height in the atmosphere...
</Text>

<Text variant="body2">
  Apparently we had reached a great height in the atmosphere...
</Text>

<Text variant="caption">
  Apparently we had reached a great height in the atmosphere...
</Text>

<Text variant="button">
  Apparently we had reached a great height in the atmosphere...
</Text>

<Text underline>
  Apparently we had reached a great height in the atmosphere...
</Text>

Typography

import { FontSize, LetterSpacing, FontFamily, FontWeight } from '@dether.io/dether-ui/Typography';

// Font Sizes
FontSize.h1;
FontSize.h2;
FontSize.h3;
FontSize.h4;
FontSize.h5;
FontSize.h6;
FontSize.body1;
FontSize.body2;
FontSize.button;
FontSize.caption;

// Letter Spacing
LetterSpacing.h1;
LetterSpacing.h2;
LetterSpacing.h3;
LetterSpacing.h4;
LetterSpacing.h5;
LetterSpacing.h6;
LetterSpacing.body1;
LetterSpacing.body2;
LetterSpacing.button;
LetterSpacing.caption;

// Font Family
FontFamily;

// Font Weight
FontWeight.regular;
FontWeight.medium;
FontWeight.bold;

Contributing

$ git clone https://github.com/dethertech/dether-ui.git
$ cd dether-ui
$ yarn install
$ yarn test
$ yarn test:watch
$ yarn test:coverage
$ yarn run:storybook
$ yarn build:storybook
$ yarn lint
$ yarn build:esdoc
$ yarn publish:esdoc