@cloudflare/component-box
Advanced tools
Comparing version 2.0.14 to 2.0.15
@@ -6,3 +6,11 @@ # Change Log | ||
<a name="2.0.14"></a> | ||
<a name="2.0.15"></a> | ||
## [2.0.15](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@2.0.14...@cloudflare/component-box@2.0.15) (2018-08-22) | ||
**Note:** Version bump only for package @cloudflare/component-box | ||
<a name="2.0.14"></a> | ||
## [2.0.14](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@2.0.13...@cloudflare/component-box@2.0.14) (2018-08-17) | ||
@@ -15,3 +23,3 @@ | ||
<a name="2.0.13"></a> | ||
<a name="2.0.13"></a> | ||
## [2.0.13](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@2.0.12...@cloudflare/component-box@2.0.13) (2018-08-01) | ||
@@ -24,3 +32,3 @@ | ||
<a name="2.0.12"></a> | ||
<a name="2.0.12"></a> | ||
## [2.0.12](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@2.0.11...@cloudflare/component-box@2.0.12) (2018-07-31) | ||
@@ -27,0 +35,0 @@ |
@@ -9,3 +9,3 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } | ||
import propertiesSpec from './propertiesSpec'; | ||
var propertyNames = Object.keys(propertiesSpec); // Generates styles given the provided props. | ||
const propertyNames = Object.keys(propertiesSpec); // Generates styles given the provided props. | ||
// | ||
@@ -24,8 +24,8 @@ // This is driven by the metadata provided in propertiesSpec | ||
var styles = function styles(props) { | ||
var styles = {}; | ||
var propKeys = Object.keys(props); | ||
propKeys.forEach(function (name) { | ||
const styles = props => { | ||
let styles = {}; | ||
const propKeys = Object.keys(props); | ||
propKeys.forEach(name => { | ||
// Lookup the spec for the property | ||
var spec = propertiesSpec[name]; // Ignore non-style props | ||
const spec = propertiesSpec[name]; // Ignore non-style props | ||
@@ -37,6 +37,6 @@ if (spec === undefined) { | ||
var value = props[name]; // pre-process the value with all pre-processors | ||
let value = props[name]; // pre-process the value with all pre-processors | ||
if (spec.preprocessWith) { | ||
spec.preprocessWith.forEach(function (fn) { | ||
spec.preprocessWith.forEach(fn => { | ||
value = fn(value); | ||
@@ -56,5 +56,7 @@ }); | ||
var Box = function Box(props) { | ||
var className = props.className, | ||
children = props.children; // Render the div with the fela classname | ||
const Box = props => { | ||
const { | ||
className, | ||
children | ||
} = props; // Render the div with the fela classname | ||
@@ -66,11 +68,11 @@ return React.createElement("div", { | ||
var checkForViolations = function checkForViolations(props) { | ||
const checkForViolations = props => { | ||
// Check for conflicts given the spec's conflictsWith property | ||
// See propertySpec.js for more detail | ||
propertyNames.forEach(function (propName) { | ||
var spec = propertiesSpec[propName]; | ||
propertyNames.forEach(propName => { | ||
const spec = propertiesSpec[propName]; | ||
if (!props[propName] || !spec.conflictsWith) return; | ||
spec.conflictsWith.forEach(function (otherPropName) { | ||
spec.conflictsWith.forEach(otherPropName => { | ||
if (props[propName] && props[otherPropName]) { | ||
var msg = "".concat(propName, " cannot be set in conjunction with ").concat(otherPropName); | ||
const msg = `${propName} cannot be set in conjunction with ${otherPropName}`; | ||
console.error(msg); | ||
@@ -128,6 +130,6 @@ } | ||
var extractPropTypes = function extractPropTypes() { | ||
var propTypes = {}; // Loop through all property specs and pluck the prop type | ||
const extractPropTypes = () => { | ||
let propTypes = {}; // Loop through all property specs and pluck the prop type | ||
propertyNames.forEach(function (name) { | ||
propertyNames.forEach(name => { | ||
propTypes[name] = propertiesSpec[name].propType; | ||
@@ -134,0 +136,0 @@ }); |
@@ -1,7 +0,1 @@ | ||
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); } | ||
export default (function (_ref) { | ||
_objectDestructuringEmpty(_ref); | ||
return {}; | ||
}); | ||
export default (({}) => ({})); |
import { applyTheme } from '@cloudflare/style-container'; | ||
import BoxUnstyled from './Box'; | ||
import BoxTheme from './BoxTheme'; | ||
var Box = applyTheme(BoxUnstyled, BoxTheme); | ||
const Box = applyTheme(BoxUnstyled, BoxTheme); | ||
export { BoxUnstyled, Box, BoxTheme }; |
@@ -7,3 +7,3 @@ import PropTypes from 'prop-types'; | ||
var pxToRem = function pxToRem(value) { | ||
const pxToRem = value => { | ||
if (typeof value === 'number' || /\d+px/.test(value)) { | ||
@@ -10,0 +10,0 @@ return rem(value, variables.fontSize); |
@@ -22,3 +22,3 @@ "use strict"; | ||
var propertyNames = Object.keys(_propertiesSpec.default); // Generates styles given the provided props. | ||
const propertyNames = Object.keys(_propertiesSpec.default); // Generates styles given the provided props. | ||
// | ||
@@ -37,8 +37,8 @@ // This is driven by the metadata provided in propertiesSpec | ||
var styles = function styles(props) { | ||
var styles = {}; | ||
var propKeys = Object.keys(props); | ||
propKeys.forEach(function (name) { | ||
const styles = props => { | ||
let styles = {}; | ||
const propKeys = Object.keys(props); | ||
propKeys.forEach(name => { | ||
// Lookup the spec for the property | ||
var spec = _propertiesSpec.default[name]; // Ignore non-style props | ||
const spec = _propertiesSpec.default[name]; // Ignore non-style props | ||
@@ -50,6 +50,6 @@ if (spec === undefined) { | ||
var value = props[name]; // pre-process the value with all pre-processors | ||
let value = props[name]; // pre-process the value with all pre-processors | ||
if (spec.preprocessWith) { | ||
spec.preprocessWith.forEach(function (fn) { | ||
spec.preprocessWith.forEach(fn => { | ||
value = fn(value); | ||
@@ -69,5 +69,7 @@ }); | ||
var Box = function Box(props) { | ||
var className = props.className, | ||
children = props.children; // Render the div with the fela classname | ||
const Box = props => { | ||
const { | ||
className, | ||
children | ||
} = props; // Render the div with the fela classname | ||
@@ -79,11 +81,11 @@ return _react.default.createElement("div", { | ||
var checkForViolations = function checkForViolations(props) { | ||
const checkForViolations = props => { | ||
// Check for conflicts given the spec's conflictsWith property | ||
// See propertySpec.js for more detail | ||
propertyNames.forEach(function (propName) { | ||
var spec = _propertiesSpec.default[propName]; | ||
propertyNames.forEach(propName => { | ||
const spec = _propertiesSpec.default[propName]; | ||
if (!props[propName] || !spec.conflictsWith) return; | ||
spec.conflictsWith.forEach(function (otherPropName) { | ||
spec.conflictsWith.forEach(otherPropName => { | ||
if (props[propName] && props[otherPropName]) { | ||
var msg = "".concat(propName, " cannot be set in conjunction with ").concat(otherPropName); | ||
const msg = `${propName} cannot be set in conjunction with ${otherPropName}`; | ||
console.error(msg); | ||
@@ -141,6 +143,6 @@ } | ||
var extractPropTypes = function extractPropTypes() { | ||
var propTypes = {}; // Loop through all property specs and pluck the prop type | ||
const extractPropTypes = () => { | ||
let propTypes = {}; // Loop through all property specs and pluck the prop type | ||
propertyNames.forEach(function (name) { | ||
propertyNames.forEach(name => { | ||
propTypes[name] = _propertiesSpec.default[name].propType; | ||
@@ -147,0 +149,0 @@ }); |
@@ -8,10 +8,4 @@ "use strict"; | ||
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); } | ||
var _default = ({}) => ({}); | ||
var _default = function _default(_ref) { | ||
_objectDestructuringEmpty(_ref); | ||
return {}; | ||
}; | ||
exports.default = _default; |
@@ -8,3 +8,3 @@ "use strict"; | ||
enumerable: true, | ||
get: function get() { | ||
get: function () { | ||
return _Box.default; | ||
@@ -15,3 +15,3 @@ } | ||
enumerable: true, | ||
get: function get() { | ||
get: function () { | ||
return _BoxTheme.default; | ||
@@ -30,3 +30,3 @@ } | ||
var Box = (0, _styleContainer.applyTheme)(_Box.default, _BoxTheme.default); | ||
const Box = (0, _styleContainer.applyTheme)(_Box.default, _BoxTheme.default); | ||
exports.Box = Box; |
@@ -19,3 +19,3 @@ "use strict"; | ||
var pxToRem = function pxToRem(value) { | ||
const pxToRem = value => { | ||
if (typeof value === 'number' || /\d+px/.test(value)) { | ||
@@ -22,0 +22,0 @@ return (0, _polished.rem)(value, _styleConst.variables.fontSize); |
{ | ||
"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": "2.0.14", | ||
"version": "2.0.15", | ||
"main": "lib/index.js", | ||
@@ -16,3 +16,3 @@ "module": "es/index.js", | ||
"@cloudflare/style-const": "^2.0.6", | ||
"@cloudflare/style-container": "^4.0.10", | ||
"@cloudflare/style-container": "^4.0.11", | ||
"polished": "^1.9.3", | ||
@@ -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
64916
1527