reactive-bulma 1.12.0 → 1.13.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/cjs/index.js +17 -0
- package/dist/cjs/index.js.map +1 -1
- 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 +11 -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/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 +11 -1
- package/dist/esm/types/types/styleTypes.d.ts +1 -0
- package/dist/index.d.ts +18 -1
- package/package.json +1 -1
@@ -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;
|
@@ -53,4 +53,14 @@ export interface ImageProps extends BasicProps, React.ComponentPropsWithoutRef<'
|
|
53
53
|
}
|
54
54
|
export interface BoxProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
|
55
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
|
+
}
|
56
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
|