reactive-bulma 1.11.1 → 1.13.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.js +17 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/Box/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/Title/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +2 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +13 -1
- package/dist/cjs/types/types/styleTypes.d.ts +1 -0
- package/dist/esm/index.js +16 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/Box/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/Title/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +2 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +13 -1
- package/dist/esm/types/types/styleTypes.d.ts +1 -0
- package/dist/index.d.ts +18 -1
- package/package.json +28 -28
@@ -3,3 +3,5 @@ export { default as Column } from './Column';
|
|
3
3
|
export { default as ProgressBar } from './ProgressBar';
|
4
4
|
export { default as Block } from './Block';
|
5
5
|
export { default as Tag } from './Tag';
|
6
|
+
export { default as Box } from './Box';
|
7
|
+
export { default as Title } from './Title';
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, sizeType } from '../types/styleTypes';
|
2
|
+
import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, sizeType, titleSize } from '../types/styleTypes';
|
3
3
|
interface BasicProps {
|
4
4
|
testId?: string;
|
5
5
|
style?: React.CSSProperties;
|
@@ -51,4 +51,16 @@ export interface ImageProps extends BasicProps, React.ComponentPropsWithoutRef<'
|
|
51
51
|
fixedSize?: fixedImageSizeType;
|
52
52
|
isRounded?: boolean;
|
53
53
|
}
|
54
|
+
export interface BoxProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
|
55
|
+
}
|
56
|
+
export interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
|
57
|
+
text: string;
|
58
|
+
size?: titleSize;
|
59
|
+
prop: 'title' | 'subtitle';
|
60
|
+
isSpaced?: boolean;
|
61
|
+
}
|
62
|
+
export interface TitleProps {
|
63
|
+
main?: TitleSectionProps;
|
64
|
+
secondary?: TitleSectionProps;
|
65
|
+
}
|
54
66
|
export {};
|
@@ -1,4 +1,5 @@
|
|
1
1
|
export type columnSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' | 'is-one-third' | 'is-one-quarter' | 'is-full' | 'is-four-fifths' | 'is-three-fifths' | 'is-two-fifths' | 'is-one-fifth' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8' | 'is-9' | 'is-10' | 'is-11' | 'is-12';
|
2
|
+
export type titleSize = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
|
2
3
|
export type columnOffsetType = 'is-offset-1' | 'is-offset-2' | 'is-offset-3' | 'is-offset-4' | 'is-offset-5' | 'is-offset-6' | 'is-offset-7' | 'is-offset-8' | 'is-offset-9' | 'is-offset-10' | 'is-offset-11' | 'is-offset-12';
|
3
4
|
export type basicColorType = 'is-white' | 'is-light' | 'is-dark' | 'is-black' | 'is-text' | 'is-ghost' | 'is-primary' | 'is-link' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
|
4
5
|
export type fixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
|
package/dist/esm/index.js
CHANGED
@@ -2912,5 +2912,20 @@ const Tag = ({ text, testId = null, style = null, color = null, isLight = null,
|
|
2912
2912
|
withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick || undefined })) : null));
|
2913
2913
|
};
|
2914
2914
|
|
2915
|
-
|
2915
|
+
const Box = ({ testId = 'test-box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'box', style: style || undefined }, children)) : null;
|
2916
|
+
|
2917
|
+
const renderTitleSection = (section) => {
|
2918
|
+
var _a, _b;
|
2919
|
+
const sectionClasses = parseClasses([
|
2920
|
+
section === null || section === void 0 ? void 0 : section.prop,
|
2921
|
+
(_a = section === null || section === void 0 ? void 0 : section.size) !== null && _a !== void 0 ? _a : 'is-6',
|
2922
|
+
(section === null || section === void 0 ? void 0 : section.prop) === 'title' && (section === null || section === void 0 ? void 0 : section.isSpaced) ? 'is-spaced' : null
|
2923
|
+
]);
|
2924
|
+
return section ? (React.createElement("p", { "data-testid": (_b = section === null || section === void 0 ? void 0 : section.testId) !== null && _b !== void 0 ? _b : `${section === null || section === void 0 ? void 0 : section.prop}-test`, className: sectionClasses, style: section.style || undefined }, section === null || section === void 0 ? void 0 : section.text)) : null;
|
2925
|
+
};
|
2926
|
+
const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
|
2927
|
+
renderTitleSection(main),
|
2928
|
+
renderTitleSection(secondary)));
|
2929
|
+
|
2930
|
+
export { Block, Box, Button, Column, ProgressBar, Tag, Title };
|
2916
2931
|
//# sourceMappingURL=index.js.map
|