Package Exports

decentraland-ui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (decentraland-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Decentraland UI

This is basically semantic-ui-react themed with Decentrland's look & feel + some of our own components

See: ui.decentraland.org

Usage

Install it:

npm install --save decentraland-ui

Import Decentraland UI's styles in your App's entry point

import 'decentraland-ui/lib/styles.css'

Now you can use Decentraland UI's components

import React from 'react'
import { Button } from 'decentraland-ui'

export class MyApp extends React.Component {
  render() {
    return <Button>Sabe</Button>
  }
}

Without React

You can also use decentraland-ui as a CSS framework just by adding this tag in your <head>:

<link href="https://ui.decentraland.org/styles.css" rel="stylesheet">

And then using Semantic UI classes like this:

<button class="ui button">Sabe</button>

🏌

Alternative themes

You can use one of our alternative themes by importing in after Decentraland UI's styles, like this:

import 'decentraland-ui/lib/styles.css'
import 'decentraland-ui/lib/dark-theme.css'

Or you can create your own theme like this:

/* my-theme.css */
:root {
  /* colors */
  --primary: #ff0044;
  --primary-light: #ff9a74;
  --primary-dark: #d10038;
  --secondary: #f2f2f5;
  --accent: #00d9ff;
  --background: #ffffff;
  --danger: #ffa900;

  /* text */
  --text: #0a0f1f;
  --secondary-text: #7d8499;
  --text-on-primary: #ffffff;
  --text-on-secondary: #0a0f1f;

  /* borders */
  --radius: 8px;
  --outline: #e0e2e8;
}

Development

Install dependencies and start Storybook

$ npm install
$ npm start

Tests

Run coverage tests:

npm run test:coverage

Run visual tests

npm run test:visual

To update the snapshots add -- -u after the test you want to update, i.e: npm run test:visual -- -u

IMPORTANT

You need to npm run build:storybook before running npm run test:visual!

CI/CD

We run coverage + visual tests on CircleCI for every PR. When merged to master we send coverage reports to CodeCov, deploy automatically to ui.decentraland.org and release a new version via semantic-release