@telkomdesign/styles v1.0.1

Tedis Icons

Styles utilites telkom design system

Installation

$ npm install --save @telkomdesign/styles

Usage

The idea is that you define a theme, wrap your application with ThemeProvider and pass the theme to ThemeProvider. ThemeProvider will pass it over context to your styles creator function and to your props. After that you may change your theme, and all your components will get the new theme automatically. And withStyles for inject your style into component.

Using ThemeProvider:

• It has a theme prop which should be an object or function:
  • If it is an Object and used in a root ThemeProvider then it's intact and being passed down the react tree.
  • If it is Object and used in a nested ThemeProvider then it's being merged with theme from a parent ThemeProvider and passed down the react tree.
  • If it is Function and used in a nested ThemeProvider then it's being applied to the theme from a parent ThemeProvider. If result is an Object it will be passed down the react tree, throws otherwise.
• ThemeProvider as every other component can render only single child, because it uses React.Children.only in render and throws otherwise.

import React from 'react'
import { withStyle, ThemeProvider } from '@telkomdesign/styles'

const Button = ({classes, children}) => (
  <button className={classes.button}>
    <span className={classes.label}>{children}</span>
  </button>
)

const styles = theme => ({
  button: {
    background: theme.colorPrimary
  },
  label: {
    fontWeight: 'bold'
  }
})

const StyledButton = withStyle(styles)(Button)

const theme = {
  colorPrimary: 'green'
}

const App = () => (
  <ThemeProvider theme={theme}>
    <StyledButton>I am a button with green background</StyledButton>
  </ThemeProvider>
)

License

MIT