@compositor/kit/dist/TypeScale.js

Components for development environments, style guides, and demos

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Specimen = exports.StepLabel = exports.Step = undefined;

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _nanoStyle = require('nano-style');

var _nanoStyle2 = _interopRequireDefault(_nanoStyle);

var _ui = require('./ui');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Row = (0, _nanoStyle2.default)(_ui.Flex)({ minHeight: '64px' });

var Step = exports.Step = (0, _nanoStyle2.default)(_ui.Text)({
  fontWeight: 'normal',
  lineHeight: 1.25,
  minWidth: '0px',
  flex: 1,
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis'
});

var StepLabel = exports.StepLabel = (0, _nanoStyle2.default)(_ui.Text)({
  display: 'inline-block',
  fontWeight: 'normal'
});

var Specimen = exports.Specimen = function Specimen(_ref) {
  var text = _ref.text,
      value = _ref.value,
      n = _ref.n,
      fontFamily = _ref.fontFamily,
      color = _ref.color;
  return _react2.default.createElement(
    _react.Fragment,
    null,
    _react2.default.createElement(
      Row,
      { mb: 2, align: 'baseline' },
      _react2.default.createElement(
        Step,
        {
          style: {
            fontFamily: fontFamily,
            fontSize: value,
            color: color
          }
        },
        _react2.default.createElement(StepLabel, { f: 0, mr: 2, children: n }),
        ' ',
        text
      ),
      _react2.default.createElement(
        _ui.Flex,
        { w: 96, style: { alignSelf: 'baseline' }, align: 'baseline', ml: 'auto' },
        _react2.default.createElement(
          _ui.Text,
          { mr: 1 },
          value
        ),
        _react2.default.createElement(
          _ui.Text,
          { f: 0 },
          'px'
        )
      )
    )
  );
};

var TypeScale = function TypeScale(_ref2) {
  var text = _ref2.text,
      value = _ref2.value,
      fontFamily = _ref2.fontFamily,
      color = _ref2.color;
  return _react2.default.createElement(
    _react.Fragment,
    null,
    [].concat((0, _toConsumableArray3.default)(value)).reverse().map(function (fontSize, i) {
      return _react2.default.createElement(Specimen, {
        key: fontSize,
        n: value.length - 1 - i,
        value: fontSize,
        text: text,
        fontFamily: fontFamily,
        color: color
      });
    })
  );
};
TypeScale.defaultProps = {
  text: 'Aa The quick brown fox jumps over the lazy dog'
};

exports.default = TypeScale;