@hyphen/hyphen-components 6.6.0 → 6.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Box/Box.d.ts +13 -2
- package/dist/components/Box/Box.stories.d.ts +2 -0
- package/dist/css/utilities.css +65 -1
- package/dist/css/variables.css +10 -2
- package/dist/hyphen-components.cjs.development.js +7 -3
- package/dist/hyphen-components.cjs.development.js.map +1 -1
- package/dist/hyphen-components.cjs.production.min.js +1 -1
- package/dist/hyphen-components.cjs.production.min.js.map +1 -1
- package/dist/hyphen-components.esm.js +7 -3
- package/dist/hyphen-components.esm.js.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/Box/Box.stories.tsx +140 -0
- package/src/components/Box/Box.tsx +20 -1
- package/src/types/index.ts +6 -0
|
@@ -255,7 +255,7 @@ Component, props, getDefault) {
|
|
|
255
255
|
|
|
256
256
|
var styles$A = {"box-transition":"Box-module_box-transition__eQx8C"};
|
|
257
257
|
|
|
258
|
-
var _excluded$Q = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "wrap", "whiteSpace", "width", "wordBreak", "zIndex"];
|
|
258
|
+
var _excluded$Q = ["as", "alignItems", "alignContent", "alignSelf", "background", "borderColor", "borderWidth", "children", "childGap", "className", "color", "columnGap", "cursor", "display", "direction", "flex", "fontFamily", "fontSize", "focus", "fontWeight", "gap", "height", "hover", "justifyContent", "margin", "maxHeight", "minHeight", "maxWidth", "minWidth", "overflow", "padding", "position", "radius", "rowGap", "shadow", "style", "textAlign", "textTransform", "textWrap", "wrap", "whiteSpace", "width", "wordBreak", "zIndex"];
|
|
259
259
|
/**
|
|
260
260
|
* A `<Box>` is a layout component to build UIs with consistent padding and spacing between
|
|
261
261
|
* elements.
|
|
@@ -336,6 +336,10 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
336
336
|
style = _ref$style === void 0 ? {} : _ref$style,
|
|
337
337
|
_ref$textAlign = _ref.textAlign,
|
|
338
338
|
textAlign = _ref$textAlign === void 0 ? undefined : _ref$textAlign,
|
|
339
|
+
_ref$textTransform = _ref.textTransform,
|
|
340
|
+
textTransform = _ref$textTransform === void 0 ? undefined : _ref$textTransform,
|
|
341
|
+
_ref$textWrap = _ref.textWrap,
|
|
342
|
+
textWrap = _ref$textWrap === void 0 ? undefined : _ref$textWrap,
|
|
339
343
|
_ref$wrap = _ref.wrap,
|
|
340
344
|
wrap = _ref$wrap === void 0 ? undefined : _ref$wrap,
|
|
341
345
|
_ref$whiteSpace = _ref.whiteSpace,
|
|
@@ -392,7 +396,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
392
396
|
};
|
|
393
397
|
var hoverClasses = getStatefulClasses('hover', hover);
|
|
394
398
|
var focusClasses = getStatefulClasses('focus', focus);
|
|
395
|
-
var boxClasses = classNames.apply(void 0, [className, cssShorthandToClasses('m', margin), cssShorthandToClasses('p', padding), cssShorthandToClasses('br', radius), cssShorthandToClasses('g', gap), cssShorthandToClasses('cg', columnGap), cssShorthandToClasses('rg', rowGap), heightCss.classes, maxHeightCss.classes, minHeightCss.classes, maxWidthCss.classes, minWidthCss.classes, widthCss.classes, flexDirectionClasses, generateResponsiveClasses('display', display), generateResponsiveClasses('justify-content', justifyContent), generateResponsiveClasses('align-items', alignItems), generateResponsiveClasses('align-content', alignContent), generateResponsiveClasses('align-self', alignSelf), generateResponsiveClasses('font-family', fontFamily), generateResponsiveClasses('font-size', fontSize), generateResponsiveClasses('overflow', overflow), generateResponsiveClasses('shadow', shadow), generateResponsiveClasses('flex', flex), cssShorthandToClasses('bw', borderWidth), generateResponsiveClasses('font-weight', fontWeight), generateResponsiveClasses('text-align', textAlign), generateResponsiveClasses('position', position), generateResponsiveClasses('z-index', zIndex), generateResponsiveClasses('whitespace', whiteSpace), generateResponsiveClasses('break', wordBreak)].concat(hoverClasses != null ? hoverClasses : [], focusClasses != null ? focusClasses : [], [(_ref3 = {
|
|
399
|
+
var boxClasses = classNames.apply(void 0, [className, cssShorthandToClasses('m', margin), cssShorthandToClasses('p', padding), cssShorthandToClasses('br', radius), cssShorthandToClasses('g', gap), cssShorthandToClasses('cg', columnGap), cssShorthandToClasses('rg', rowGap), heightCss.classes, maxHeightCss.classes, minHeightCss.classes, maxWidthCss.classes, minWidthCss.classes, widthCss.classes, flexDirectionClasses, generateResponsiveClasses('display', display), generateResponsiveClasses('justify-content', justifyContent), generateResponsiveClasses('align-items', alignItems), generateResponsiveClasses('align-content', alignContent), generateResponsiveClasses('align-self', alignSelf), generateResponsiveClasses('font-family', fontFamily), generateResponsiveClasses('font-size', fontSize), generateResponsiveClasses('overflow', overflow), generateResponsiveClasses('shadow', shadow), generateResponsiveClasses('flex', flex), cssShorthandToClasses('bw', borderWidth), generateResponsiveClasses('font-weight', fontWeight), generateResponsiveClasses('text-align', textAlign), generateResponsiveClasses('transform', textTransform), generateResponsiveClasses('text-wrap', textWrap), generateResponsiveClasses('position', position), generateResponsiveClasses('z-index', zIndex), generateResponsiveClasses('whitespace', whiteSpace), generateResponsiveClasses('break', wordBreak)].concat(hoverClasses != null ? hoverClasses : [], focusClasses != null ? focusClasses : [], [(_ref3 = {
|
|
396
400
|
'flex-wrap': isFlexBox && wrap,
|
|
397
401
|
'flex-nowrap': isFlexBox && wrap === false
|
|
398
402
|
}, _ref3["background-color-" + background] = background, _ref3["font-color-" + color] = color, _ref3["border-color-" + borderColor] = borderColor, _ref3["cursor-" + cursor] = cursor, _ref3[styles$A['box-transition']] = hover || focus, _ref3)]));
|
|
@@ -495,7 +499,7 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
495
499
|
ref: ref
|
|
496
500
|
}, restProps), children !== null && children !== undefined ? decoratedChildren : null);
|
|
497
501
|
});
|
|
498
|
-
var boxPropsKeys = ['as', 'alignItems', 'alignContent', 'alignSelf', 'background', 'borderColor', 'borderWidth', 'className', 'childGap', 'children', 'color', 'columnGap', 'cursor', 'direction', 'display', 'flex', 'focus', 'fontFamily', 'fontSize', 'fontWeight', 'gap', 'height', 'hover', 'justifyContent', 'margin', 'maxHeight', 'minHeight', 'maxWidth', 'minWidth', 'overflow', 'padding', 'position', 'radius', 'rowGap', 'shadow', 'style', 'textAlign', 'wrap', 'width', 'zIndex'];
|
|
502
|
+
var boxPropsKeys = ['as', 'alignItems', 'alignContent', 'alignSelf', 'background', 'borderColor', 'borderWidth', 'className', 'childGap', 'children', 'color', 'columnGap', 'cursor', 'direction', 'display', 'flex', 'focus', 'fontFamily', 'fontSize', 'fontWeight', 'gap', 'height', 'hover', 'justifyContent', 'margin', 'maxHeight', 'minHeight', 'maxWidth', 'minWidth', 'overflow', 'padding', 'position', 'radius', 'rowGap', 'shadow', 'style', 'textAlign', 'textTransform', 'textWrap', 'wrap', 'width', 'zIndex'];
|
|
499
503
|
|
|
500
504
|
var _excluded$P = ["className", "name", "color", "size"];
|
|
501
505
|
var Icon = /*#__PURE__*/forwardRef(function (_ref, ref) {
|