Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@cloudflare/component-box

Package Overview
Dependencies
Maintainers
26
Versions
509
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cloudflare/component-box - npm Package Compare versions

Comparing version 1.0.17 to 2.0.0

22

CHANGELOG.md

@@ -6,3 +6,19 @@ # Change Log

<a name="1.0.17"></a>
<a name="2.0.0"></a>
# [2.0.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@1.0.17...@cloudflare/component-box@2.0.0) (2018-07-12)
### Features
* **style-const:** UI-700: removed deprecated color definitions ([781e1aa](http://stash.cfops.it:7999/fe/stratus/commits/781e1aa))
### BREAKING CHANGES
* **style-const:** deprecated colors are no longer accessible from the base 'theme' object
<a name="1.0.17"></a>
## [1.0.17](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@1.0.16...@cloudflare/component-box@1.0.17) (2018-07-03)

@@ -15,3 +31,3 @@

<a name="1.0.16"></a>
<a name="1.0.16"></a>
## [1.0.16](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@1.0.15...@cloudflare/component-box@1.0.16) (2018-06-29)

@@ -24,3 +40,3 @@

<a name="1.0.15"></a>
<a name="1.0.15"></a>

@@ -27,0 +43,0 @@ ## [1.0.15](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-box@1.0.14...@cloudflare/component-box@1.0.15) (2018-06-29)

54

es/Box.js

@@ -1,3 +0,5 @@

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

@@ -7,6 +9,3 @@ import PropTypes from 'prop-types';

import propertiesSpec from './propertiesSpec';
var propertyNames = Object.keys(propertiesSpec);
// Generates styles given the provided props.
var propertyNames = Object.keys(propertiesSpec); // Generates styles given the provided props.
//

@@ -24,20 +23,17 @@ // 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) {
// Lookup the spec for the property
var spec = propertiesSpec[name];
var spec = propertiesSpec[name]; // Ignore non-style props
// Ignore non-style props
if (spec === undefined) {
return;
}
} // Get the style value from props
// Get the style value from props
var value = props[name];
// pre-process the value with all pre-processors
var value = props[name]; // pre-process the value with all pre-processors
if (spec.preprocessWith) {

@@ -50,5 +46,4 @@ spec.preprocessWith.forEach(function (fn) {

styles[name] = value;
});
}); // Only do checks in dev mode
// Only do checks in dev mode
if (process.env.NODE_ENV !== 'production') {

@@ -63,11 +58,7 @@ checkForViolations(styles);

var className = props.className,
children = props.children;
children = props.children; // Render the div with the fela classname
// Render the div with the fela classname
return React.createElement(
'div',
{ className: className },
children
);
return React.createElement("div", {
className: className
}, children);
};

@@ -81,12 +72,9 @@

if (!props[propName] || !spec.conflictsWith) return;
spec.conflictsWith.forEach(function (otherPropName) {
if (props[propName] && props[otherPropName]) {
var msg = propName + ' cannot be set in conjunction with ' + otherPropName;
var msg = "".concat(propName, " cannot be set in conjunction with ").concat(otherPropName);
console.error(msg);
}
});
});
// TODO: To pull this check off, we'll need re-evaluate our baseline.
}); // TODO: To pull this check off, we'll need re-evaluate our baseline.
// current is 22.5px

@@ -137,16 +125,15 @@ // checkLineHeightViolations(props);

*/
// Extract proptypes from the propertiesSpec
// Extract proptypes from the propertiesSpec
var extractPropTypes = function extractPropTypes() {
var propTypes = {};
var propTypes = {}; // Loop through all property specs and pluck the prop type
// Loop through all property specs and pluck the prop type
propertyNames.forEach(function (name) {
propTypes[name] = propertiesSpec[name].propType;
});
return propTypes;
};
Box.propTypes = _extends({
Box.propTypes = _objectSpread({
className: PropTypes.string,

@@ -156,3 +143,2 @@ children: PropTypes.node

Box.displayName = 'Box';
export default createStyledComponent(styles, Box);

2

es/index.js
import { applyTheme } from '@cloudflare/style-container';
import BoxUnstyled from './Box';
import BoxTheme from './BoxTheme';
var Box = applyTheme(BoxUnstyled, BoxTheme);
export { BoxUnstyled, Box, BoxTheme };

49

es/propertiesSpec.js

@@ -5,3 +5,2 @@ import PropTypes from 'prop-types';

import { rem } from 'polished';
var numberOrString = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);

@@ -13,6 +12,5 @@

}
return value;
};
// The export of this module is a datastructuer containing metadata
}; // The export of this module is a datastructuer containing metadata
// which powers:

@@ -56,2 +54,4 @@ // - the creation of fela style rules

//
export default {

@@ -78,3 +78,2 @@ margin: {

},
padding: {

@@ -100,7 +99,5 @@ propType: numberOrString,

},
overflow: {
propType: PropTypes.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit', 'initial', 'unset'])
},
border: {

@@ -110,3 +107,2 @@ propType: PropTypes.string,

},
borderColor: {

@@ -128,3 +124,2 @@ propType: PropTypes.string,

},
borderStyle: {

@@ -146,3 +141,2 @@ propType: PropTypes.string,

},
borderWidth: {

@@ -164,3 +158,2 @@ propType: PropTypes.number,

},
lineHeight: {

@@ -184,5 +177,4 @@ propType: PropTypes.number,

propType: PropTypes.string,
default: variables.fontColor
default: variables.colors.gray[1]
},
backgroundColor: {

@@ -192,19 +184,14 @@ propType: PropTypes.string,

},
backgroundImage: {
propType: PropTypes.string
},
backgroundPosition: {
propType: PropTypes.string
},
backgroundPositionX: {
propType: PropTypes.string
},
backgroundPositionY: {
propType: PropTypes.string
},
display: {

@@ -214,3 +201,2 @@ propType: PropTypes.oneOf(['inline', 'block', 'inline-block', 'flex', 'inline-flex', 'table', 'table-cell', 'none']),

},
position: {

@@ -220,7 +206,5 @@ propType: PropTypes.oneOf(['static', 'relative', 'absolute', 'fixed']),

},
float: {
propType: PropTypes.oneOf(['left', 'right', 'none', 'inline-start', 'inline-end'])
},
top: {

@@ -246,3 +230,2 @@ propType: numberOrString,

},
width: {

@@ -278,3 +261,2 @@ propType: numberOrString,

},
verticalAlign: {

@@ -284,7 +266,5 @@ propType: numberOrString,

},
transform: {
propType: PropTypes.string
},
flexDirection: {

@@ -294,3 +274,2 @@ propType: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),

},
flexWrap: {

@@ -300,3 +279,2 @@ propType: PropTypes.oneOf(['nowrap', 'wrap', 'wrap-reverse']),

},
justifyContent: {

@@ -306,3 +284,2 @@ propType: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around']),

},
alignItems: {

@@ -312,3 +289,2 @@ propType: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),

},
alignContent: {

@@ -318,3 +294,2 @@ propType: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch']),

},
order: {

@@ -324,3 +299,2 @@ propType: PropTypes.number,

},
flexGrow: {

@@ -330,3 +304,2 @@ propType: PropTypes.number,

},
flexShrink: {

@@ -336,3 +309,2 @@ propType: PropTypes.number,

},
flexBasis: {

@@ -342,7 +314,5 @@ propType: numberOrString,

},
flex: {
propType: PropTypes.string
},
alignSelf: {

@@ -352,3 +322,2 @@ propType: PropTypes.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']),

},
zIndex: {

@@ -358,3 +327,2 @@ propType: numberOrString,

},
textAlign: {

@@ -364,3 +332,2 @@ propType: PropTypes.oneOf(['left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent']),

},
textDecoration: {

@@ -370,3 +337,2 @@ propType: PropTypes.oneOf(['none', 'underline', 'overline', 'line-through', 'initial', 'inherit']),

},
textTransform: {

@@ -376,3 +342,2 @@ propType: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'full-width']),

},
opacity: {

@@ -382,3 +347,2 @@ propType: numberOrString,

},
userSelect: {

@@ -388,3 +352,2 @@ propType: PropTypes.oneOf(['none', 'auto', 'text', 'container', 'all']),

},
wordWrap: {

@@ -394,3 +357,2 @@ propType: PropTypes.oneOf(['normal', 'break-word', 'inherit', 'initial', 'unset']),

},
clear: {

@@ -401,3 +363,2 @@ propType: PropTypes.oneOf(['none', 'left', 'right', 'both', 'initial', 'inherit']),

};
/*

@@ -404,0 +365,0 @@ * Need support for:

101

lib/Box.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,24 +6,19 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
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; };
var _react = _interopRequireDefault(require("react"));
var _react = require('react');
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react2 = _interopRequireDefault(_react);
var _styleContainer = require("@cloudflare/style-container");
var _propTypes = require('prop-types');
var _propertiesSpec = _interopRequireDefault(require("./propertiesSpec"));
var _propTypes2 = _interopRequireDefault(_propTypes);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _styleContainer = require('@cloudflare/style-container');
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; }
var _propertiesSpec = require('./propertiesSpec');
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; }
var _propertiesSpec2 = _interopRequireDefault(_propertiesSpec);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const propertyNames = Object.keys(_propertiesSpec2.default);
// Generates styles given the provided props.
var propertyNames = Object.keys(_propertiesSpec.default); // Generates styles given the provided props.
//

@@ -41,22 +36,19 @@ // This is driven by the metadata provided in propertiesSpec

//
const styles = props => {
let styles = {};
const propKeys = Object.keys(props);
propKeys.forEach(name => {
var styles = function styles(props) {
var styles = {};
var propKeys = Object.keys(props);
propKeys.forEach(function (name) {
// Lookup the spec for the property
const spec = _propertiesSpec2.default[name];
var spec = _propertiesSpec.default[name]; // Ignore non-style props
// Ignore non-style props
if (spec === undefined) {
return;
}
} // Get the style value from props
// Get the style value from props
let value = props[name];
// pre-process the value with all pre-processors
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);

@@ -67,5 +59,4 @@ });

styles[name] = value;
});
}); // Only do checks in dev mode
// Only do checks in dev mode
if (process.env.NODE_ENV !== 'production') {

@@ -78,29 +69,24 @@ checkForViolations(styles);

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
// Render the div with the fela classname
return _react2.default.createElement(
'div',
{ className: className },
children
);
return _react.default.createElement("div", {
className: className
}, children);
};
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 = _propertiesSpec.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 = "".concat(propName, " cannot be set in conjunction with ").concat(otherPropName);
console.error(msg);
}
});
});
// TODO: To pull this check off, we'll need re-evaluate our baseline.
}); // TODO: To pull this check off, we'll need re-evaluate our baseline.
// current is 22.5px

@@ -151,21 +137,22 @@ // checkLineHeightViolations(props);

*/
// Extract proptypes from the propertiesSpec
const extractPropTypes = () => {
let propTypes = {};
// Loop through all property specs and pluck the prop type
propertyNames.forEach(name => {
propTypes[name] = _propertiesSpec2.default[name].propType;
var extractPropTypes = function extractPropTypes() {
var propTypes = {}; // Loop through all property specs and pluck the prop type
propertyNames.forEach(function (name) {
propTypes[name] = _propertiesSpec.default[name].propType;
});
return propTypes;
};
Box.propTypes = _extends({
className: _propTypes2.default.string,
children: _propTypes2.default.node
Box.propTypes = _objectSpread({
className: _propTypes.default.string,
children: _propTypes.default.node
}, extractPropTypes());
Box.displayName = 'Box';
exports.default = (0, _styleContainer.createStyledComponent)(styles, Box);
var _default = (0, _styleContainer.createStyledComponent)(styles, Box);
exports.default = _default;

11

lib/BoxTheme.js

@@ -6,3 +6,12 @@ "use strict";

});
exports.default = void 0;
exports.default = ({}) => ({});
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
var _default = function _default(_ref) {
_objectDestructuringEmpty(_ref);
return {};
};
exports.default = _default;

33

lib/index.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,20 +6,25 @@ Object.defineProperty(exports, "__esModule", {

});
exports.BoxTheme = exports.Box = exports.BoxUnstyled = undefined;
Object.defineProperty(exports, "BoxUnstyled", {
enumerable: true,
get: function get() {
return _Box.default;
}
});
Object.defineProperty(exports, "BoxTheme", {
enumerable: true,
get: function get() {
return _BoxTheme.default;
}
});
exports.Box = void 0;
var _styleContainer = require('@cloudflare/style-container');
var _styleContainer = require("@cloudflare/style-container");
var _Box = require('./Box');
var _Box = _interopRequireDefault(require("./Box"));
var _Box2 = _interopRequireDefault(_Box);
var _BoxTheme = _interopRequireDefault(require("./BoxTheme"));
var _BoxTheme = require('./BoxTheme');
var _BoxTheme2 = _interopRequireDefault(_BoxTheme);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const Box = (0, _styleContainer.applyTheme)(_Box2.default, _BoxTheme2.default);
exports.BoxUnstyled = _Box2.default;
exports.Box = Box;
exports.BoxTheme = _BoxTheme2.default;
var Box = (0, _styleContainer.applyTheme)(_Box.default, _BoxTheme.default);
exports.Box = Box;

160

lib/propertiesSpec.js

@@ -1,2 +0,2 @@

'use strict';
"use strict";

@@ -6,23 +6,22 @@ Object.defineProperty(exports, "__esModule", {

});
exports.default = void 0;
var _propTypes = require('prop-types');
var _propTypes = _interopRequireDefault(require("prop-types"));
var _propTypes2 = _interopRequireDefault(_propTypes);
var _styleConst = require("@cloudflare/style-const");
var _styleConst = require('@cloudflare/style-const');
var _polished = require("polished");
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
// eslint-disable-line behance/no-deprecated
var numberOrString = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]);
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 value;
};
// The export of this module is a datastructuer containing metadata
}; // The export of this module is a datastructuer containing metadata
// which powers:

@@ -66,3 +65,5 @@ // - the creation of fela style rules

//
exports.default = {
var _default = {
margin: {

@@ -88,3 +89,2 @@ propType: numberOrString,

},
padding: {

@@ -110,65 +110,59 @@ propType: numberOrString,

},
overflow: {
propType: _propTypes2.default.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit', 'initial', 'unset'])
propType: _propTypes.default.oneOf(['visible', 'hidden', 'scroll', 'auto', 'inherit', 'initial', 'unset'])
},
border: {
propType: _propTypes2.default.string,
propType: _propTypes.default.string,
conflictsWith: ['borderStyle', 'borderColor', 'borderWidth', 'borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth']
},
borderColor: {
propType: _propTypes2.default.string,
propType: _propTypes.default.string,
conflictsWith: ['borderTopColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor']
},
borderTopColor: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
borderBottomColor: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
borderLeftColor: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
borderRightColor: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
borderStyle: {
propType: _propTypes2.default.string,
propType: _propTypes.default.string,
conflictsWith: ['borderTopStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderRightStyle']
},
borderTopStyle: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
borderBottomStyle: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
borderLeftStyle: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
borderRightStyle: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
borderWidth: {
propType: _propTypes2.default.number,
propType: _propTypes.default.number,
conflictsWith: ['borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth']
},
borderTopWidth: {
propType: _propTypes2.default.number
propType: _propTypes.default.number
},
borderBottomWidth: {
propType: _propTypes2.default.number
propType: _propTypes.default.number
},
borderLeftWidth: {
propType: _propTypes2.default.number
propType: _propTypes.default.number
},
borderRightWidth: {
propType: _propTypes2.default.number
propType: _propTypes.default.number
},
lineHeight: {
propType: _propTypes2.default.number,
propType: _propTypes.default.number,
default: _styleConst.variables.lineHeight

@@ -185,45 +179,36 @@ },

fontFamily: {
propType: _propTypes2.default.string,
propType: _propTypes.default.string,
default: _styleConst.variables.fontFamily
},
color: {
propType: _propTypes2.default.string,
default: _styleConst.variables.fontColor
propType: _propTypes.default.string,
default: _styleConst.variables.colors.gray[1]
},
backgroundColor: {
propType: _propTypes2.default.string,
propType: _propTypes.default.string,
default: 'transparent'
},
backgroundImage: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
backgroundPosition: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
backgroundPositionX: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
backgroundPositionY: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
display: {
propType: _propTypes2.default.oneOf(['inline', 'block', 'inline-block', 'flex', 'inline-flex', 'table', 'table-cell', 'none']),
propType: _propTypes.default.oneOf(['inline', 'block', 'inline-block', 'flex', 'inline-flex', 'table', 'table-cell', 'none']),
default: 'block'
},
position: {
propType: _propTypes2.default.oneOf(['static', 'relative', 'absolute', 'fixed']),
propType: _propTypes.default.oneOf(['static', 'relative', 'absolute', 'fixed']),
default: 'static'
},
float: {
propType: _propTypes2.default.oneOf(['left', 'right', 'none', 'inline-start', 'inline-end'])
propType: _propTypes.default.oneOf(['left', 'right', 'none', 'inline-start', 'inline-end'])
},
top: {

@@ -249,3 +234,2 @@ propType: numberOrString,

},
width: {

@@ -281,3 +265,2 @@ propType: numberOrString,

},
verticalAlign: {

@@ -287,47 +270,37 @@ propType: numberOrString,

},
transform: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
flexDirection: {
propType: _propTypes2.default.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
propType: _propTypes.default.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
default: 'row'
},
flexWrap: {
propType: _propTypes2.default.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
propType: _propTypes.default.oneOf(['nowrap', 'wrap', 'wrap-reverse']),
default: 'nowrap'
},
justifyContent: {
propType: _propTypes2.default.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around']),
propType: _propTypes.default.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around']),
default: 'flex-start'
},
alignItems: {
propType: _propTypes2.default.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
propType: _propTypes.default.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
default: 'stretch'
},
alignContent: {
propType: _propTypes2.default.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch']),
propType: _propTypes.default.oneOf(['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch']),
default: 'stretch'
},
order: {
propType: _propTypes2.default.number,
propType: _propTypes.default.number,
default: 0
},
flexGrow: {
propType: _propTypes2.default.number,
propType: _propTypes.default.number,
default: 0
},
flexShrink: {
propType: _propTypes2.default.number,
propType: _propTypes.default.number,
default: 1
},
flexBasis: {

@@ -337,12 +310,9 @@ propType: numberOrString,

},
flex: {
propType: _propTypes2.default.string
propType: _propTypes.default.string
},
alignSelf: {
propType: _propTypes2.default.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
propType: _propTypes.default.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
default: 'auto'
},
zIndex: {

@@ -352,18 +322,14 @@ propType: numberOrString,

},
textAlign: {
propType: _propTypes2.default.oneOf(['left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent']),
propType: _propTypes.default.oneOf(['left', 'right', 'center', 'justify', 'justify-all', 'start', 'end', 'match-parent']),
default: 'start'
},
textDecoration: {
propType: _propTypes2.default.oneOf(['none', 'underline', 'overline', 'line-through', 'initial', 'inherit']),
propType: _propTypes.default.oneOf(['none', 'underline', 'overline', 'line-through', 'initial', 'inherit']),
default: 'initial'
},
textTransform: {
propType: _propTypes2.default.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'full-width']),
propType: _propTypes.default.oneOf(['none', 'capitalize', 'uppercase', 'lowercase', 'full-width']),
default: 'none'
},
opacity: {

@@ -373,19 +339,15 @@ propType: numberOrString,

},
userSelect: {
propType: _propTypes2.default.oneOf(['none', 'auto', 'text', 'container', 'all']),
propType: _propTypes.default.oneOf(['none', 'auto', 'text', 'container', 'all']),
default: 'auto'
},
wordWrap: {
propType: _propTypes2.default.oneOf(['normal', 'break-word', 'inherit', 'initial', 'unset']),
propType: _propTypes.default.oneOf(['normal', 'break-word', 'inherit', 'initial', 'unset']),
default: 'normal'
},
clear: {
propType: _propTypes2.default.oneOf(['none', 'left', 'right', 'both', 'initial', 'inherit']),
propType: _propTypes.default.oneOf(['none', 'left', 'right', 'both', 'initial', 'inherit']),
default: 'none'
}
};
/*

@@ -397,2 +359,4 @@ * Need support for:

box-shadow
*/
*/
exports.default = _default;

6

package.json
{
"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.17",
"version": "2.0.0",
"main": "lib/index.js",

@@ -15,4 +15,4 @@ "module": "es/index.js",

"dependencies": {
"@cloudflare/style-const": "^1.0.12",
"@cloudflare/style-container": "^2.0.3",
"@cloudflare/style-const": "^2.0.0",
"@cloudflare/style-container": "^3.0.0",
"polished": "^1.9.2",

@@ -19,0 +19,0 @@ "prop-types": "^15.6.0"

2

src/propertiesSpec.js

@@ -219,3 +219,3 @@ import PropTypes from 'prop-types';

propType: PropTypes.string,
default: variables.fontColor
default: variables.colors.gray[1]
},

@@ -222,0 +222,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc