wix-style-react/dist/es/stories/Typography/TextExample.js

wix-style-react

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; }

import React from 'react';
import { string, bool } from 'prop-types';
import classNames from 'classnames';

import typography from '../../src/Typography';
import styles from './styles.scss';

/** 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, '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 classNames(propsToClassNames(props).map(function (name) {
    return typography[name];
  }));
};

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

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

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

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

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

export function renderColorTable() {
  return React.createElement(
    'table',
    { className: styles.table },
    React.createElement(
      'thead',
      null,
      React.createElement(
        'tr',
        null,
        React.createElement(
          'th',
          null,
          'Skin'
        ),
        React.createElement(
          'th',
          null,
          'Link'
        ),
        React.createElement(
          'th',
          null,
          'Light'
        ),
        React.createElement(
          'th',
          null,
          'Secondary'
        ),
        React.createElement(
          'th',
          null,
          'Classes'
        ),
        React.createElement(
          'th',
          null,
          'Example'
        ),
        React.createElement(
          'th',
          null,
          'Notes'
        )
      )
    ),
    React.createElement(TextColorExample, null),
    React.createElement(TextColorExample, { skin: 'standard' }),
    React.createElement(TextColorExample, { skin: 'success' }),
    React.createElement(TextColorExample, { skin: 'error' }),
    React.createElement(TextColorExample, { skin: 'premium' }),
    React.createElement(TextColorExample, { link: true }),
    React.createElement(TextColorExample, { light: true }),
    React.createElement(TextColorExample, { secondary: true }),
    React.createElement(TextColorExample, { secondary: true, light: true }),
    React.createElement(TextColorExample, { skin: 'success', link: true, note: 'skin takes precedence' }),
    React.createElement(TextColorExample, { skin: 'success', light: true, note: 'skin takes precedence' }),
    React.createElement(TextColorExample, { skin: 'success', secondary: true, note: 'skin takes precedence' })
  );
}