techsbcn-storybook 0.14.6 → 0.14.7

package/dist/components/fields/TextSimpleComponent/TextSimpleComponent.d.ts

@@ -2,7 +2,10 @@ import React from 'react';
 import './TextSimpleComponent.scss';
 interface TextSimpleComponentProps {
     label?: any;
+    skeletonLabel?: boolean;
+    isFormLabel?: boolean;
     value?: any;
+    classNameLabel?: string;
     className?: string;
     error?: boolean;
     startIcon?: React.ReactNode;
@@ -12,6 +15,11 @@ interface TextSimpleComponentProps {
     fullWidth?: boolean;
     noMargin?: boolean;
     isLoading?: boolean;
+    skeletonValue?: SkeletonProps;
+}
+interface SkeletonProps {
+    useSkeleton: boolean;
+    mineSkeleton?: any;
 }
 export declare const TextSimpleComponent: React.FC<TextSimpleComponentProps>;
 export {};

package/dist/stories/Fields/Fields.stories.d.ts

@@ -3,4 +3,4 @@ declare const meta: Meta;
 export default meta;
 export declare const TextField: Story<import("@storybook/react").Args>;
 export declare const SelectFieldTemplate: Story<import("@storybook/react").Args>;
-export declare const TextSimple: Story<import("@storybook/react").Args>;
+export declare const TextSimple: Story;

package/dist/techsbcn-storybook.cjs.development.js

@@ -1504,28 +1504,58 @@ var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n  color: #666666;
 styleInject(css_248z$e);
 
 var TextSimpleComponent = function TextSimpleComponent(props) {
+  var _props$classNameLabel, _props$classNameLabel2, _props$className;
+
+  function SkeletonCompleteDefault(skeleton) {
+    var _skeleton$mineSkeleto;
+
+    return (_skeleton$mineSkeleto = skeleton.mineSkeleton) != null ? _skeleton$mineSkeleto : React__default.createElement(_.Skeleton, {
+      width: props.fullWidth ? 'auto' : '200px',
+      sx: {
+        padding: props.noMargin ? '0' : '0.868rem'
+      },
+      variant: "rectangular",
+      animation: "wave"
+    });
+  }
+
+  var ChildrenValues = function ChildrenValues() {
+    return React__default.createElement(React__default.Fragment, null, props.startIcon && React__default.createElement(_.Box, {
+      mr: 1
+    }, props.startIcon), props.isLoading ? React__default.createElement(_.CircularProgress, {
+      className: "circular-progress-main-color",
+      size: 20
+    }) : props.value, props.endIcon && React__default.createElement(_.Box, {
+      ml: "" + (props.fullWidth ? 'auto' : 1)
+    }, props.endIcon));
+  };
+
   return React__default.createElement(_.Box, {
     className: "text-simple-component",
     display: "flex",
     flexDirection: "column"
-  }, props.label && React__default.createElement(_.FormLabel, null, props.label), React__default.createElement(_.Box, {
-    display: "" + (props.startIcon || props.endIcon ? 'flex' : 'block'),
+  }, props.skeletonLabel ? React__default.createElement(_.Skeleton, {
+    width: "10%",
+    animation: "wave"
+  }) : props.label ? props.isFormLabel ? React__default.createElement(_.FormLabel, {
+    className: "" + ((_props$classNameLabel = props.classNameLabel) != null ? _props$classNameLabel : '')
+  }, props.label) : React__default.createElement(_.Box, {
+    className: "" + ((_props$classNameLabel2 = props.classNameLabel) != null ? _props$classNameLabel2 : '')
+  }, props.label) : React__default.createElement(React__default.Fragment, null), React__default.createElement(_.Box, {
+    display: "" + (props.skeletonValue && props.skeletonValue.useSkeleton ? 'block' : props.startIcon || props.endIcon ? 'flex' : 'block'),
     alignItems: "center",
-    className: "text-simple-box " + (props.className ? props.className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : ''),
+    className: "text-simple-box " + ((_props$className = props.className) != null ? _props$className : '') + " " + (props.noMargin ? 'no-margin' : '') + " " + (props.noBorders || props.skeletonValue && props.skeletonValue.useSkeleton ? 'no-border' : '') + " " + (props.error ? 'has-error-border' : ''),
     width: "" + (props.fullWidth ? 'auto' : 'fit-content')
-  }, props.startIcon && React__default.createElement(_.Box, {
-    mr: 1
-  }, props.startIcon), props.isLoading ? React__default.createElement(_.CircularProgress, {
-    className: "circular-progress-main-color",
-    size: 20
-  }) : props.value, props.endIcon && React__default.createElement(_.Box, {
-    ml: "" + (props.fullWidth ? 'auto' : 1)
-  }, props.endIcon)), props.helperText && React__default.createElement(_.Box, {
+  }, props.skeletonValue && props.skeletonValue.useSkeleton ? React__default.createElement(SkeletonCompleteDefault, Object.assign({}, props.skeletonValue)) : React__default.createElement(ChildrenValues, null)), props.helperText && React__default.createElement(_.Box, {
     className: "helper-text " + (props.error ? 'has-error' : '')
-  }, props.helperText));
+  }, props.skeletonValue && props.skeletonValue.useSkeleton ? React__default.createElement(_.Skeleton, {
+    width: "15%",
+    animation: "wave"
+  }) : props.helperText));
 };
 TextSimpleComponent.defaultProps = {
-  noBorders: true
+  noBorders: true,
+  isFormLabel: true
 };
 
 var css_248z$f = ".select-field .MuiFormLabel-root {\n  color: #666666 !important;\n  font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n  transform: translate(0, 0.5px) scale(0.85);\n  transform-origin: top left;\n  text-overflow: initial !important;\n}\n.select-field .select {\n  font-size: 1rem;\n}\n.select-field .select__menu {\n  z-index: 3 !important;\n  background-color: white;\n}\n.select-field .select__control {\n  cursor: pointer;\n  border: 1px solid grey;\n  border-radius: 5px !important;\n  padding: 0.33rem 0.2rem;\n  font-size: 1rem;\n  color: grey !important;\n  background-color: transparent;\n}\n.select-field .select__option {\n  cursor: pointer;\n  color: #666666 !important;\n  background-color: white !important;\n}\n.select-field .select__option--is-focused {\n  background-color: rgba(0, 0, 0, 0.04) !important;\n  color: #666666 !important;\n}\n.select-field .select__option--is-selected {\n  color: white !important;\n}\n.select-field .select__indicator {\n  color: grey !important;\n}\n.select-field .select__indicator:hover {\n  color: black !important;\n}\n.select-field .select__placeholder {\n  text-overflow: ellipsis !important;\n  color: #666666 !important;\n  opacity: 1;\n}\n.select-field .select__single-value {\n  color: #666666 !important;\n}\n.select-field .select__multi-value__label {\n  color: #666666 !important;\n  font-size: 1rem;\n}\n.select-field .select__control--is-focused {\n  border-color: grey !important;\n  box-shadow: none !important;\n}\n.select-field .helper-text {\n  font-size: 0.85rem !important;\n  padding: 0 !important;\n  margin-top: 3px;\n  line-height: 1.66;\n  color: #666666 !important;\n  letter-spacing: 0.03333em;\n}\n.select-field .has-error {\n  color: #F24726 !important;\n}\n.select-field .has-error .select__control {\n  border: 1px #F24726 solid !important;\n}\n.select-field .has-error .select__control--is-focused {\n  border-color: #F24726 !important;\n  box-shadow: 0 0 0 1px #F24726;\n}";