ValueLabel component

This component is extremely simple. It takes a single prop color, which is used only to modify styles.

This particular component is not exposed to users. It is used as a sub-component of the Value component, which is the next sample.

styles.js

import _ from 'lodash';

export default {
  fontSize:      '11px',
  marginTop:     '5px',
  textTransform: 'uppercase',
  color:         'mediumGray'   // this color key is translated by middleware
};

export function dynamicStyle({props, componentTheme}) {
  return Object.assign(
    {}, 
    componentTheme,
    props.color && {color: props.color}   // use the color prop to set the text color
  );
}

value-label.js

This is a minimal styled component. We actually have quite a few that look like this in our own UI library. The render callback does almost nothing. Because the component is private, we don't pass a themeName prop to Styled, nor do we pass down props onto the div.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Styled} from 'styletron-themer';
import staticStyle, {dynamicStyle} from './styles';

export default class ValueLabel extends Component {
  static propTypes = {color: PropTypes.string};

  render() {
    return (
      <Styled
        staticStyle = {staticStyle}
        dynamicStyle = {dynamicStyle}
        {...this.props}
      >
        {className => <div className={className}>{this.props.children}</div>}
      </Styled>
  }
}