wix-style-react
Version:
wix-style-react
296 lines (289 loc) • 7.89 kB
JavaScript
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; }
import React from 'react';
import Text from 'wix-style-react/Text';
import Tooltip from 'wix-style-react/Tooltip';
import { ExampleWrapper, capitalize, propsToJsxString } from './utils';
import styles from './styles.scss';
var TextExample = function TextExample(props) {
var children = props.children,
rest = _objectWithoutProperties(props, ['children']);
var size = capitalize(props.size);
var weight = capitalize(props.weight);
var secondary = props.secondary ? '.Secondary' : '';
var skin = props.skin ? '.' + capitalize(props.skin === 'error' ? 'Destructive' : '' + props.skin) : '';
var light = props.light ? '.Light' : secondary || skin ? '' : '.Dark';
var code = '<Text' + propsToJsxString(rest) + '>' + children + '</Text>';
return React.createElement(
Tooltip,
{ content: code, popover: true, maxWidth: 900, padding: 24 },
React.createElement(
'div',
{ style: { backgroundColor: props.light ? '#162d3d' : undefined } },
React.createElement(
ExampleWrapper,
{
label: 'Text.' + size + '.' + weight + light + secondary + skin
},
React.createElement(
'div',
null,
React.createElement(
Text,
rest,
children
)
)
)
)
);
};
export { TextExample };
TextExample.propTypes = Text.propTypes;
var darkMedium = function darkMedium() {
return React.createElement(
'div',
{ style: { padding: '24px' } },
React.createElement(
'table',
{ className: styles.textTable },
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'thin' },
'Running Text'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'thin', light: true },
'Running Text'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'thin', skin: 'error' },
'Destructive Message, Inline Link'
)
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'thin', secondary: true },
'Form Field Label, Secondary Text'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'thin', light: true, secondary: true },
'Form Field Label, Secondary Text'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'thin', skin: 'premium' },
'Premium Message, Inline Link'
)
)
),
React.createElement(
'tr',
null,
React.createElement('td', null),
React.createElement('td', null),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'thin', skin: 'success' },
'Success Message, Inline Link'
)
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'normal' },
'Form Field, Button'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'normal', light: true },
'Button, Text Button'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'normal', skin: 'error' },
'Destructive Message, Button, Text Button'
)
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'normal', secondary: true },
'\u2014 Unasigned \u2014'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'normal', light: true, secondary: true },
'Input\u2019s placeholder'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'normal', skin: 'premium' },
'Premium Message, Button, Text Button'
)
)
),
React.createElement(
'tr',
null,
React.createElement('td', null),
React.createElement('td', null),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'normal', skin: 'success' },
'Success Message, Button, Text Button'
)
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'bold' },
'Emphasized Text'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'bold', light: true },
'Emphasized Text'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'bold', skin: 'error' },
'Emphasized Destructive Text'
)
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'bold', secondary: true },
'\u2014 Unasigned \u2014'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'bold', light: true, secondary: true },
'\u2014 Unasigned \u2014'
)
),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'bold', skin: 'premium' },
'Emphasized Premium Text'
)
)
),
React.createElement(
'tr',
null,
React.createElement('td', null),
React.createElement('td', null),
React.createElement(
'td',
null,
React.createElement(
TextExample,
{ size: 'medium', weight: 'bold', skin: 'success' },
'Emphasized Success Text'
)
)
)
)
);
};
export default (function () {
return React.createElement(
'div',
{ style: { display: 'flex' } },
darkMedium()
);
});