wix-style-react
Version:
wix-style-react
316 lines (299 loc) • 9.03 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TextExample = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Text = require('wix-style-react/Text');
var _Text2 = _interopRequireDefault(_Text);
var _Tooltip = require('wix-style-react/Tooltip');
var _Tooltip2 = _interopRequireDefault(_Tooltip);
var _utils = require('./utils');
var _styles = require('./styles.scss');
var _styles2 = _interopRequireDefault(_styles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var TextExample = function TextExample(props) {
var children = props.children,
rest = _objectWithoutProperties(props, ['children']);
var size = (0, _utils.capitalize)(props.size);
var weight = (0, _utils.capitalize)(props.weight);
var secondary = props.secondary ? '.Secondary' : '';
var skin = props.skin ? '.' + (0, _utils.capitalize)(props.skin === 'error' ? 'Destructive' : '' + props.skin) : '';
var light = props.light ? '.Light' : secondary || skin ? '' : '.Dark';
var code = '<Text' + (0, _utils.propsToJsxString)(rest) + '>' + children + '</Text>';
return _react2.default.createElement(
_Tooltip2.default,
{ content: code, popover: true, maxWidth: 900, padding: 24 },
_react2.default.createElement(
'div',
{ style: { backgroundColor: props.light ? '#162d3d' : undefined } },
_react2.default.createElement(
_utils.ExampleWrapper,
{
label: 'Text.' + size + '.' + weight + light + secondary + skin
},
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
_Text2.default,
rest,
children
)
)
)
)
);
};
exports.TextExample = TextExample;
TextExample.propTypes = _Text2.default.propTypes;
var darkMedium = function darkMedium() {
return _react2.default.createElement(
'div',
{ style: { padding: '24px' } },
_react2.default.createElement(
'table',
{ className: _styles2.default.textTable },
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'thin' },
'Running Text'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'thin', light: true },
'Running Text'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'thin', skin: 'error' },
'Destructive Message, Inline Link'
)
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'thin', secondary: true },
'Form Field Label, Secondary Text'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'thin', light: true, secondary: true },
'Form Field Label, Secondary Text'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'thin', skin: 'premium' },
'Premium Message, Inline Link'
)
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement('td', null),
_react2.default.createElement('td', null),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'thin', skin: 'success' },
'Success Message, Inline Link'
)
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'normal' },
'Form Field, Button'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'normal', light: true },
'Button, Text Button'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'normal', skin: 'error' },
'Destructive Message, Button, Text Button'
)
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'normal', secondary: true },
'\u2014 Unasigned \u2014'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'normal', light: true, secondary: true },
'Input\u2019s placeholder'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'normal', skin: 'premium' },
'Premium Message, Button, Text Button'
)
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement('td', null),
_react2.default.createElement('td', null),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'normal', skin: 'success' },
'Success Message, Button, Text Button'
)
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'bold' },
'Emphasized Text'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'bold', light: true },
'Emphasized Text'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'bold', skin: 'error' },
'Emphasized Destructive Text'
)
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'bold', secondary: true },
'\u2014 Unasigned \u2014'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'bold', light: true, secondary: true },
'\u2014 Unasigned \u2014'
)
),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'bold', skin: 'premium' },
'Emphasized Premium Text'
)
)
),
_react2.default.createElement(
'tr',
null,
_react2.default.createElement('td', null),
_react2.default.createElement('td', null),
_react2.default.createElement(
'td',
null,
_react2.default.createElement(
TextExample,
{ size: 'medium', weight: 'bold', skin: 'success' },
'Emphasized Success Text'
)
)
)
)
);
};
exports.default = function () {
return _react2.default.createElement(
'div',
{ style: { display: 'flex' } },
darkMedium()
);
};