wix-style-react/dist/stories/Typography/TextClassesExample.js

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.renderSizeAndWeightTable = renderSizeAndWeightTable;
exports.renderColorTable = renderColorTable;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Typography = require('../../src/Typography');

var _Typography2 = _interopRequireDefault(_Typography);

var _styles = require('./styles.scss');

var _styles2 = _interopRequireDefault(_styles);

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/** Capitalize first character */
function capitalize(str) {
  if (!str) {
    return undefined;
  }
  return str[0].toUpperCase() + str.substring(1);
}

var DEFAULT_SIZE = 'medium';
var DEFAULT_WEIGHT = 'thin';
var DEFAULT_SKIN = 'standard';

var propsToClassNames = function propsToClassNames(props) {
  var _names;

  var names = (_names = {
    text: true
  }, _defineProperty(_names, 'size' + capitalize(props.size), !!props.size), _defineProperty(_names, 'weight' + capitalize(props.weight), !!props.weight), _defineProperty(_names, 'skin' + capitalize(props.skin), !!props.skin), _defineProperty(_names, 'link', !!props.link), _defineProperty(_names, 'disabled', !!props.disabled), _defineProperty(_names, 'light', !!props.light), _defineProperty(_names, 'secondary', !!props.secondary), _names);
  return Object.entries(names).reduce(function (acc, entry) {
    if (entry[1]) {
      acc.push(entry[0]);
    }
    return acc;
  }, []);
};

var textClasses = function textClasses(props) {
  return (0, _classnames2.default)(propsToClassNames(props).map(function (name) {
    return _Typography2.default[name];
  }));
};

var TextSizeWeightExample = function TextSizeWeightExample(props) {
  var classes = textClasses(props);
  return _react2.default.createElement(
    'tr',
    null,
    _react2.default.createElement(
      'td',
      null,
      props.size ? props.size : '[' + DEFAULT_SIZE + ']'
    ),
    _react2.default.createElement(
      'td',
      null,
      props.weight ? props.weight : '[' + DEFAULT_WEIGHT + ']'
    ),
    _react2.default.createElement(
      'td',
      null,
      propsToClassNames(props).join(' ')
    ),
    _react2.default.createElement(
      'td',
      null,
      _react2.default.createElement(
        'span',
        { className: classes },
        'This is a text'
      )
    )
  );
};

TextSizeWeightExample.propTypes = {
  size: _propTypes.string,
  weight: _propTypes.string
};

var TextColorExample = function TextColorExample(props) {
  var boolLabel = function boolLabel(val) {
    return val === undefined ? '-' : val ? 'true' : 'false';
  };
  var link = boolLabel(props.link);
  var disabled = boolLabel(props.disabled);
  var light = boolLabel(props.light);
  var secondary = boolLabel(props.secondary);
  return _react2.default.createElement(
    'tr',
    null,
    _react2.default.createElement(
      'td',
      null,
      props.skin ? props.skin : '[' + DEFAULT_SKIN + ']'
    ),
    _react2.default.createElement(
      'td',
      null,
      link
    ),
    _react2.default.createElement(
      'td',
      null,
      disabled
    ),
    _react2.default.createElement(
      'td',
      null,
      light
    ),
    _react2.default.createElement(
      'td',
      null,
      secondary
    ),
    _react2.default.createElement(
      'td',
      null,
      propsToClassNames(props).join(' ')
    ),
    _react2.default.createElement(
      'td',
      { style: { backgroundColor: props.light ? 'black' : 'white' } },
      _react2.default.createElement(
        'span',
        { className: textClasses(props) },
        'This is a text'
      )
    ),
    _react2.default.createElement(
      'td',
      null,
      props.note
    )
  );
};

TextColorExample.propTypes = {
  skin: _propTypes.string,
  link: _propTypes.bool,
  disabled: _propTypes.bool,
  light: _propTypes.bool,
  secondary: _propTypes.bool,
  note: _propTypes.string
};

function renderSizeAndWeightTable() {
  return _react2.default.createElement(
    'table',
    { className: _styles2.default.table },
    _react2.default.createElement(
      'thead',
      null,
      _react2.default.createElement(
        'tr',
        null,
        _react2.default.createElement(
          'th',
          null,
          'Size'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Weight'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Classes'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Example'
        )
      )
    ),
    _react2.default.createElement(TextSizeWeightExample, null),
    _react2.default.createElement(TextSizeWeightExample, { size: 'medium' }),
    _react2.default.createElement(TextSizeWeightExample, { size: 'small' }),
    _react2.default.createElement(TextSizeWeightExample, { size: 'tiny' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'thin' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'normal' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'bold' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'thin', size: 'tiny' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'normal', size: 'tiny' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'bold', size: 'tiny' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'thin', size: 'small' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'normal', size: 'small' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'bold', size: 'small' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'thin', size: 'medium' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'normal', size: 'medium' }),
    _react2.default.createElement(TextSizeWeightExample, { weight: 'bold', size: 'medium' })
  );
}

function renderColorTable() {
  return _react2.default.createElement(
    'table',
    { className: _styles2.default.table },
    _react2.default.createElement(
      'thead',
      null,
      _react2.default.createElement(
        'tr',
        null,
        _react2.default.createElement(
          'th',
          null,
          'Skin'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Link'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Disabled'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Light'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Secondary'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Classes'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Example'
        ),
        _react2.default.createElement(
          'th',
          null,
          'Notes'
        )
      )
    ),
    _react2.default.createElement(TextColorExample, null),
    _react2.default.createElement(TextColorExample, { skin: 'standard' }),
    _react2.default.createElement(TextColorExample, { skin: 'success' }),
    _react2.default.createElement(TextColorExample, { skin: 'error' }),
    _react2.default.createElement(TextColorExample, { skin: 'premium' }),
    _react2.default.createElement(TextColorExample, { link: true }),
    _react2.default.createElement(TextColorExample, { disabled: true }),
    _react2.default.createElement(TextColorExample, { light: true }),
    _react2.default.createElement(TextColorExample, { secondary: true }),
    _react2.default.createElement(TextColorExample, { secondary: true, light: true }),
    _react2.default.createElement(TextColorExample, {
      skin: 'standard',
      link: true,
      note: 'default skin class is explicitly set'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'standard',
      disabled: true,
      note: 'default skin class is explicitly set'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'standard',
      light: true,
      note: 'default skin class is explicitly set'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'standard',
      secondary: true,
      note: 'default skin class is explicitly set'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'error',
      link: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'error',
      disabled: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'error',
      light: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'error',
      secondary: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'success',
      link: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'success',
      disabled: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'success',
      light: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'success',
      secondary: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'premium',
      link: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'premium',
      disabled: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'premium',
      light: true,
      note: 'boolean flags have no affect on non standard skin'
    }),
    _react2.default.createElement(TextColorExample, {
      skin: 'premium',
      secondary: true,
      note: 'boolean flags have no affect on non standard skin'
    })
  );
}