@cloudflare/component-box
Advanced tools
Comparing version 1.0.6 to 1.0.7
@@ -6,2 +6,10 @@ # Change Log | ||
<a name="1.0.7"></a> | ||
## [1.0.7](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@1.0.6...@cloudflare/component-box@1.0.7) (2018-06-05) | ||
**Note:** Version bump only for package @cloudflare/component-box | ||
<a name="1.0.6"></a> | ||
@@ -8,0 +16,0 @@ ## [1.0.6](http://stash.cfops.it:7999/www/cf-ux/compare/@cloudflare/component-box@1.0.5...@cloudflare/component-box@1.0.6) (2018-05-25) |
@@ -0,10 +1,25 @@ | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { createStyledComponent } from '@cloudflare/style-container'; | ||
import propertiesSpec from './propertiesSpec'; | ||
var _react = require('react'); | ||
var propertyNames = Object.keys(propertiesSpec); | ||
var _react2 = _interopRequireDefault(_react); | ||
var _propTypes = require('prop-types'); | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
var _index = require('@cloudflare/style-container/src/index.js'); | ||
var _propertiesSpec = require('./propertiesSpec'); | ||
var _propertiesSpec2 = _interopRequireDefault(_propertiesSpec); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
var propertyNames = Object.keys(_propertiesSpec2.default); | ||
// Generates styles given the provided props. | ||
@@ -30,3 +45,3 @@ // | ||
// Lookup the spec for the property | ||
var spec = propertiesSpec[name]; | ||
var spec = _propertiesSpec2.default[name]; | ||
@@ -65,3 +80,3 @@ // Ignore non-style props | ||
return React.createElement( | ||
return _react2.default.createElement( | ||
'div', | ||
@@ -77,3 +92,3 @@ { className: className }, | ||
propertyNames.forEach(function (propName) { | ||
var spec = propertiesSpec[propName]; | ||
var spec = _propertiesSpec2.default[propName]; | ||
if (!props[propName] || !spec.conflictsWith) return; | ||
@@ -142,3 +157,3 @@ | ||
propertyNames.forEach(function (name) { | ||
propTypes[name] = propertiesSpec[name].propType; | ||
propTypes[name] = _propertiesSpec2.default[name].propType; | ||
}); | ||
@@ -150,7 +165,7 @@ | ||
Box.propTypes = _extends({ | ||
className: PropTypes.string, | ||
children: PropTypes.node | ||
className: _propTypes2.default.string, | ||
children: _propTypes2.default.node | ||
}, extractPropTypes()); | ||
Box.displayName = 'Box'; | ||
export default createStyledComponent(styles, Box); | ||
exports.default = (0, _index.createStyledComponent)(styles, Box); |
@@ -0,7 +1,11 @@ | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); } | ||
export default (function (_ref) { | ||
exports.default = function (_ref) { | ||
_objectDestructuringEmpty(_ref); | ||
return {}; | ||
}); | ||
}; |
@@ -1,7 +0,22 @@ | ||
import { applyTheme } from '@cloudflare/style-container'; | ||
import BoxUnstyled from './Box'; | ||
import BoxTheme from './BoxTheme'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.BoxTheme = exports.Box = exports.BoxUnstyled = undefined; | ||
var Box = applyTheme(BoxUnstyled, BoxTheme); | ||
var _index = require('@cloudflare/style-container/src/index.js'); | ||
export { BoxUnstyled, Box, BoxTheme }; | ||
var _Box = require('./Box'); | ||
var _Box2 = _interopRequireDefault(_Box); | ||
var _BoxTheme = require('./BoxTheme'); | ||
var _BoxTheme2 = _interopRequireDefault(_BoxTheme); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
var Box = (0, _index.applyTheme)(_Box2.default, _BoxTheme2.default); | ||
exports.BoxUnstyled = _Box2.default; | ||
exports.Box = Box; | ||
exports.BoxTheme = _BoxTheme2.default; |
@@ -1,11 +0,20 @@ | ||
import PropTypes from 'prop-types'; | ||
import { variables } from '@cloudflare/style-const'; // eslint-disable-line behance/no-deprecated | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
import { rem } from 'polished'; | ||
var _propTypes = require('prop-types'); | ||
var numberOrString = PropTypes.oneOfType([PropTypes.string, PropTypes.number]); | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
var _index = require('@cloudflare/style-const/src/index.js'); | ||
var _polished = require('polished'); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
var numberOrString = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]); // eslint-disable-line behance/no-deprecated | ||
var pxToRem = function pxToRem(value) { | ||
if (typeof value === 'number' || /\d+px/.test(value)) { | ||
return rem(value, variables.fontSize); | ||
return (0, _polished.rem)(value, _index.variables.fontSize); | ||
} | ||
@@ -54,3 +63,3 @@ return value; | ||
// | ||
export default { | ||
exports.default = { | ||
margin: { | ||
@@ -99,7 +108,7 @@ propType: numberOrString, | ||
overflow: { | ||
propType: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit', 'initial', 'unset']) | ||
propType: _propTypes2.default.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit', 'initial', 'unset']) | ||
}, | ||
border: { | ||
propType: PropTypes.string, | ||
propType: _propTypes2.default.string, | ||
conflictsWith: ['borderStyle', 'borderColor', 'borderWidth', 'borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth'] | ||
@@ -109,75 +118,75 @@ }, | ||
borderColor: { | ||
propType: PropTypes.string, | ||
propType: _propTypes2.default.string, | ||
conflictsWith: ['borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor'] | ||
}, | ||
borderTopColor: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
borderBottomColor: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
borderLeftColor: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
borderRightColor: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
borderStyle: { | ||
propType: PropTypes.string, | ||
propType: _propTypes2.default.string, | ||
conflictsWith: ['borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle'] | ||
}, | ||
borderTopStyle: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
borderBottomStyle: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
borderLeftStyle: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
borderRightStyle: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
borderWidth: { | ||
propType: PropTypes.number, | ||
propType: _propTypes2.default.number, | ||
conflictsWith: ['borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth'] | ||
}, | ||
borderTopWidth: { | ||
propType: PropTypes.number | ||
propType: _propTypes2.default.number | ||
}, | ||
borderBottomWidth: { | ||
propType: PropTypes.number | ||
propType: _propTypes2.default.number | ||
}, | ||
borderLeftWidth: { | ||
propType: PropTypes.number | ||
propType: _propTypes2.default.number | ||
}, | ||
borderRightWidth: { | ||
propType: PropTypes.number | ||
propType: _propTypes2.default.number | ||
}, | ||
lineHeight: { | ||
propType: PropTypes.number, | ||
default: variables.lineHeight | ||
propType: _propTypes2.default.number, | ||
default: _index.variables.lineHeight | ||
}, | ||
fontSize: { | ||
propType: numberOrString, | ||
default: variables.fontSize | ||
default: _index.variables.fontSize | ||
}, | ||
fontWeight: { | ||
propType: numberOrString, | ||
default: variables.fontWeight | ||
default: _index.variables.fontWeight | ||
}, | ||
fontFamily: { | ||
propType: PropTypes.string, | ||
default: variables.fontFamily | ||
propType: _propTypes2.default.string, | ||
default: _index.variables.fontFamily | ||
}, | ||
color: { | ||
propType: PropTypes.string, | ||
default: variables.fontColor | ||
propType: _propTypes2.default.string, | ||
default: _index.variables.fontColor | ||
}, | ||
backgroundColor: { | ||
propType: PropTypes.string, | ||
propType: _propTypes2.default.string, | ||
default: 'transparent' | ||
@@ -187,19 +196,19 @@ }, | ||
backgroundImage: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
backgroundPosition: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
backgroundPositionX: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
backgroundPositionY: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
display: { | ||
propType: PropTypes.oneOf(['inline', 'block', 'inline-block', 'flex', 'inline-flex', 'table', 'table-cell', 'none']), | ||
propType: _propTypes2.default.oneOf(['inline', 'block', 'inline-block', 'flex', 'inline-flex', 'table', 'table-cell', 'none']), | ||
default: 'block' | ||
@@ -209,3 +218,3 @@ }, | ||
position: { | ||
propType: PropTypes.oneOf(['static', 'relative', 'absolute', 'fixed']), | ||
propType: _propTypes2.default.oneOf(['static', 'relative', 'absolute', 'fixed']), | ||
default: 'static' | ||
@@ -215,3 +224,3 @@ }, | ||
float: { | ||
propType: PropTypes.oneOf(['left', 'right', 'none', 'inline-start', 'inline-end']) | ||
propType: _propTypes2.default.oneOf(['left', 'right', 'none', 'inline-start', 'inline-end']) | ||
}, | ||
@@ -277,7 +286,7 @@ | ||
transform: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
flexDirection: { | ||
propType: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']), | ||
propType: _propTypes2.default.oneOf(['row', 'row-reverse', 'column', 'column-reverse']), | ||
default: 'row' | ||
@@ -287,3 +296,3 @@ }, | ||
flexWrap: { | ||
propType: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']), | ||
propType: _propTypes2.default.oneOf(['nowrap', 'wrap', 'wrap-reverse']), | ||
default: 'nowrap' | ||
@@ -293,3 +302,3 @@ }, | ||
justifyContent: { | ||
propType: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around']), | ||
propType: _propTypes2.default.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around']), | ||
default: 'flex-start' | ||
@@ -299,3 +308,3 @@ }, | ||
alignItems: { | ||
propType: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']), | ||
propType: _propTypes2.default.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']), | ||
default: 'stretch' | ||
@@ -305,3 +314,3 @@ }, | ||
alignContent: { | ||
propType: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch']), | ||
propType: _propTypes2.default.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch']), | ||
default: 'stretch' | ||
@@ -311,3 +320,3 @@ }, | ||
order: { | ||
propType: PropTypes.number, | ||
propType: _propTypes2.default.number, | ||
default: 0 | ||
@@ -317,3 +326,3 @@ }, | ||
flexGrow: { | ||
propType: PropTypes.number, | ||
propType: _propTypes2.default.number, | ||
default: 0 | ||
@@ -323,3 +332,3 @@ }, | ||
flexShrink: { | ||
propType: PropTypes.number, | ||
propType: _propTypes2.default.number, | ||
default: 1 | ||
@@ -334,7 +343,7 @@ }, | ||
flex: { | ||
propType: PropTypes.string | ||
propType: _propTypes2.default.string | ||
}, | ||
alignSelf: { | ||
propType: PropTypes.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']), | ||
propType: _propTypes2.default.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']), | ||
default: 'auto' | ||
@@ -349,3 +358,3 @@ }, | ||
textAlign: { | ||
propType: PropTypes.oneOf(['left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent']), | ||
propType: _propTypes2.default.oneOf(['left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent']), | ||
default: 'start' | ||
@@ -355,3 +364,3 @@ }, | ||
textDecoration: { | ||
propType: PropTypes.oneOf(['none', 'underline', 'overline', 'line-through', 'initial', 'inherit']), | ||
propType: _propTypes2.default.oneOf(['none', 'underline', 'overline', 'line-through', 'initial', 'inherit']), | ||
default: 'initial' | ||
@@ -361,3 +370,3 @@ }, | ||
textTransform: { | ||
propType: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'full-width']), | ||
propType: _propTypes2.default.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'full-width']), | ||
default: 'none' | ||
@@ -372,3 +381,3 @@ }, | ||
userSelect: { | ||
propType: PropTypes.oneOf(['none', 'auto', 'text', 'container', 'all']), | ||
propType: _propTypes2.default.oneOf(['none', 'auto', 'text', 'container', 'all']), | ||
default: 'auto' | ||
@@ -378,3 +387,3 @@ }, | ||
wordWrap: { | ||
propType: PropTypes.oneOf(['normal', 'break-word', 'inherit', 'initial', 'unset']), | ||
propType: _propTypes2.default.oneOf(['normal', 'break-word', 'inherit', 'initial', 'unset']), | ||
default: 'normal' | ||
@@ -384,3 +393,3 @@ }, | ||
clear: { | ||
propType: PropTypes.oneOf(['none', 'left', 'right', 'both', 'initial', 'inherit']), | ||
propType: _propTypes2.default.oneOf(['none', 'left', 'right', 'both', 'initial', 'inherit']), | ||
default: 'none' | ||
@@ -387,0 +396,0 @@ } |
@@ -17,3 +17,3 @@ 'use strict'; | ||
var _styleContainer = require('@cloudflare/style-container'); | ||
var _index = require('@cloudflare/style-container/src/index.js'); | ||
@@ -26,3 +26,3 @@ var _propertiesSpec = require('./propertiesSpec'); | ||
const propertyNames = Object.keys(_propertiesSpec2.default); | ||
var propertyNames = Object.keys(_propertiesSpec2.default); | ||
@@ -42,10 +42,10 @@ // Generates styles given the provided props. | ||
// | ||
const styles = props => { | ||
let styles = {}; | ||
var styles = function styles(props) { | ||
var styles = {}; | ||
const propKeys = Object.keys(props); | ||
var propKeys = Object.keys(props); | ||
propKeys.forEach(name => { | ||
propKeys.forEach(function (name) { | ||
// Lookup the spec for the property | ||
const spec = _propertiesSpec2.default[name]; | ||
var spec = _propertiesSpec2.default[name]; | ||
@@ -58,7 +58,7 @@ // Ignore non-style props | ||
// Get the style value from props | ||
let value = props[name]; | ||
var value = props[name]; | ||
// pre-process the value with all pre-processors | ||
if (spec.preprocessWith) { | ||
spec.preprocessWith.forEach(fn => { | ||
spec.preprocessWith.forEach(function (fn) { | ||
value = fn(value); | ||
@@ -79,6 +79,8 @@ }); | ||
const Box = props => { | ||
const { className, children } = props; | ||
var Box = function Box(props) { | ||
var className = props.className, | ||
children = props.children; | ||
// Render the div with the fela classname | ||
return _react2.default.createElement( | ||
@@ -91,12 +93,12 @@ 'div', | ||
const checkForViolations = props => { | ||
var checkForViolations = function checkForViolations(props) { | ||
// Check for conflicts given the spec's conflictsWith property | ||
// See propertySpec.js for more detail | ||
propertyNames.forEach(propName => { | ||
const spec = _propertiesSpec2.default[propName]; | ||
propertyNames.forEach(function (propName) { | ||
var spec = _propertiesSpec2.default[propName]; | ||
if (!props[propName] || !spec.conflictsWith) return; | ||
spec.conflictsWith.forEach(otherPropName => { | ||
spec.conflictsWith.forEach(function (otherPropName) { | ||
if (props[propName] && props[otherPropName]) { | ||
const msg = `${propName} cannot be set in conjunction with ${otherPropName}`; | ||
var msg = propName + ' cannot be set in conjunction with ' + otherPropName; | ||
console.error(msg); | ||
@@ -155,7 +157,7 @@ } | ||
// Extract proptypes from the propertiesSpec | ||
const extractPropTypes = () => { | ||
let propTypes = {}; | ||
var extractPropTypes = function extractPropTypes() { | ||
var propTypes = {}; | ||
// Loop through all property specs and pluck the prop type | ||
propertyNames.forEach(name => { | ||
propertyNames.forEach(function (name) { | ||
propTypes[name] = _propertiesSpec2.default[name].propType; | ||
@@ -173,2 +175,2 @@ }); | ||
exports.default = (0, _styleContainer.createStyledComponent)(styles, Box); | ||
exports.default = (0, _index.createStyledComponent)(styles, Box); |
@@ -7,2 +7,8 @@ "use strict"; | ||
exports.default = ({}) => ({}); | ||
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); } | ||
exports.default = function (_ref) { | ||
_objectDestructuringEmpty(_ref); | ||
return {}; | ||
}; |
@@ -8,3 +8,3 @@ 'use strict'; | ||
var _styleContainer = require('@cloudflare/style-container'); | ||
var _index = require('@cloudflare/style-container/src/index.js'); | ||
@@ -21,3 +21,3 @@ var _Box = require('./Box'); | ||
const Box = (0, _styleContainer.applyTheme)(_Box2.default, _BoxTheme2.default); | ||
var Box = (0, _index.applyTheme)(_Box2.default, _BoxTheme2.default); | ||
@@ -24,0 +24,0 @@ exports.BoxUnstyled = _Box2.default; |
@@ -11,3 +11,3 @@ 'use strict'; | ||
var _styleConst = require('@cloudflare/style-const'); | ||
var _index = require('@cloudflare/style-const/src/index.js'); | ||
@@ -20,5 +20,5 @@ var _polished = require('polished'); | ||
const pxToRem = value => { | ||
var pxToRem = function pxToRem(value) { | ||
if (typeof value === 'number' || /\d+px/.test(value)) { | ||
return (0, _polished.rem)(value, _styleConst.variables.fontSize); | ||
return (0, _polished.rem)(value, _index.variables.fontSize); | ||
} | ||
@@ -172,19 +172,19 @@ return value; | ||
propType: _propTypes2.default.number, | ||
default: _styleConst.variables.lineHeight | ||
default: _index.variables.lineHeight | ||
}, | ||
fontSize: { | ||
propType: numberOrString, | ||
default: _styleConst.variables.fontSize | ||
default: _index.variables.fontSize | ||
}, | ||
fontWeight: { | ||
propType: numberOrString, | ||
default: _styleConst.variables.fontWeight | ||
default: _index.variables.fontWeight | ||
}, | ||
fontFamily: { | ||
propType: _propTypes2.default.string, | ||
default: _styleConst.variables.fontFamily | ||
default: _index.variables.fontFamily | ||
}, | ||
color: { | ||
propType: _propTypes2.default.string, | ||
default: _styleConst.variables.fontColor | ||
default: _index.variables.fontColor | ||
}, | ||
@@ -191,0 +191,0 @@ |
{ | ||
"name": "@cloudflare/component-box", | ||
"description": "Cloudflare Box Component\n\nThis is styling component similar to cf-component-flex which allows for arbitrary styling.\n\n This component should only be used when the built in style doesn't quite fit the bill and when it can't be done with fela. Ideally, cfui components should have the right styling built in for most cases. In the few edge cases that pop up in real world feature development, this is an alternative to wrapping your component in a `<div>` or `<span>` and styling it with css to accomodate one-offs. \n\n Also, note that using Box effectively performs a component level CSS reset, as all props not provided will be pulled from the default theme. These defaults, outlined in propertiesSpec, either match the browser defaults, or are taken from our global styles as defined by cf-style-const.", | ||
"version": "1.0.6", | ||
"version": "1.0.7", | ||
"main": "lib/index.js", | ||
@@ -15,4 +15,4 @@ "module": "es/index.js", | ||
"dependencies": { | ||
"@cloudflare/style-const": "^1.0.5", | ||
"@cloudflare/style-container": "^1.0.6", | ||
"@cloudflare/style-const": "^1.0.6", | ||
"@cloudflare/style-container": "^1.0.7", | ||
"polished": "^1.9.2", | ||
@@ -19,0 +19,0 @@ "prop-types": "^15.6.0" |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
60636
1562