reactive-bulma 1.13.0 → 1.14.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { IconProps } from '../../../interfaces/atomProps';
3
+ declare const Icon: React.FC<IconProps>;
4
+ export default Icon;
@@ -5,3 +5,4 @@ export { default as Block } from './Block';
5
5
  export { default as Tag } from './Tag';
6
6
  export { default as Box } from './Box';
7
7
  export { default as Title } from './Title';
8
+ export { default as Icon } from './Icon';
@@ -8,7 +8,7 @@ export declare const parseClasses: (_classes: Array<string | null>) => string;
8
8
  * @param { ParseTestIdProps } config Configuration object
9
9
  * @param { string } config.tag Required. Component tag used between to build the final testId string.
10
10
  * @param { string } config.parsedClasses Required. A single string of previously parsed classes what will be joined with `tag` property.
11
- * @param { string } config.separator Optional. `''` by default. Will replace final string empty spaces with a configurable string.
11
+ * @param { { usedRegExp?: RegExp, regExpReplacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
12
12
  * @returns A single string product of merge all classNames, separated by `separator` value
13
13
  */
14
14
  export declare const parseTestId: (config: ParseTestIdProps) => string;
@@ -1,2 +1,3 @@
1
1
  import '../node_modules/bulma/css/bulma.min.css';
2
+ import '../node_modules/@mdi/font/css/materialdesignicons.min.css';
2
3
  export * from './components/atoms';
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, sizeType, titleSize } from '../types/styleTypes';
2
+ import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, sizeType, textColorType, titleSize } from '../types/styleTypes';
3
3
  interface BasicProps {
4
4
  testId?: string;
5
5
  style?: React.CSSProperties;
@@ -63,4 +63,12 @@ export interface TitleProps {
63
63
  main?: TitleSectionProps;
64
64
  secondary?: TitleSectionProps;
65
65
  }
66
+ export interface IconProps extends BasicProps {
67
+ iconLabel: string;
68
+ text?: string;
69
+ color?: textColorType;
70
+ size?: Exclude<sizeType, 'is-normal'>;
71
+ colorMode?: iconColorModeType;
72
+ isSpinning?: boolean;
73
+ }
66
74
  export {};
@@ -1,5 +1,11 @@
1
+ interface RegExpRule {
2
+ usedRegExp?: RegExp;
3
+ regExpReplacer?: string;
4
+ }
1
5
  export interface ParseTestIdProps {
2
6
  tag: string;
3
7
  parsedClasses: string;
8
+ rules?: RegExpRule[];
4
9
  separator?: string;
5
10
  }
11
+ export {};
@@ -0,0 +1,5 @@
1
+ export declare enum IconSizeEnum {
2
+ 'is-small' = 24,
3
+ 'is-medium' = 36,
4
+ 'is-large' = 48
5
+ }
@@ -2,5 +2,7 @@ export type columnSizeType = 'is-three-quarters' | 'is-two-thirds' | 'is-half' |
2
2
  export type titleSize = 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6';
3
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';
4
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';
5
+ export type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-light' | 'has-text-dark' | 'has-text-primary' | 'has-text-link' | 'has-text-info' | 'has-text-success' | 'has-text-warning' | 'has-text-danger';
5
6
  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';
6
7
  export type sizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
8
+ export type iconColorModeType = 'light' | 'dark';