techsbcn-storybook 0.22.7 → 0.23.1

package/dist/components/wrappers/CardComponent/CardComponent.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './CardComponent.scss';
+declare type BackgroundType = 'gradiant-green' | 'gradiant-violet' | 'main-background-color' | 'white' | 'grey';
+interface CardComponentProps {
+    children?: React.ReactNode;
+    height?: string;
+    backgroundType?: BackgroundType;
+    className?: string;
+    loading?: boolean;
+    onClick?: () => void;
+}
+export declare const CardComponent: React.FC<CardComponentProps>;
+export {};

package/dist/index.d.ts

@@ -21,3 +21,4 @@ export * from './components/modals/ModalComponent';
 export * from './components/wrappers/TabsComponent/TabsComponent';
 export * from './components/wrappers/LinearProgressComponent/LinearProgressComponent';
 export * from './components/fields/DatePickerComponent/DatePickerComponent';
+export * from './components/wrappers/CardComponent/CardComponent';

package/dist/stories/Wrappers/Card.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const CardComponentProps: Story<import("@storybook/react").Args>;

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

@@ -3231,9 +3231,37 @@ DatePickerComponent.defaultProps = {
   fullWidth: true
 };
 
+var css_248z$i = ".card-component {\n  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);\n  background-color: white;\n}\n.card-component.gradiant-green {\n  background: linear-gradient(-135deg, #1de9b6, #1dc4e9);\n  color: white;\n}\n.card-component.gradiant-violet {\n  background: linear-gradient(-135deg, #899fd4, #a389d4);\n  color: white;\n}\n.card-component.grey {\n  background: #A9A9A9;\n  color: white;\n}\n.card-component.main-background-color {\n  color: white;\n}\n.card-component .MuiCircularProgress-root {\n  color: white;\n}";
+styleInject(css_248z$i);
+
+var CardComponent = function CardComponent(props) {
+  var _props$className, _props$height;
+
+  return React__default.createElement(material.Box, {
+    className: "card-component " + props.backgroundType + " " + ((_props$className = props.className) != null ? _props$className : ''),
+    height: "" + ((_props$height = props.height) != null ? _props$height : '100%'),
+    onClick: props.onClick
+  }, React__default.createElement(material.Box, {
+    p: 3.125,
+    py: 3.75,
+    height: '100%'
+  }, props.loading ? React__default.createElement(material.Box, {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: '100%'
+  }, React__default.createElement(material.CircularProgress, {
+    className: "" + (props.backgroundType === 'white' ? 'circular-progress-main-color' : '')
+  })) : props.children && props.children));
+};
+CardComponent.defaultProps = {
+  backgroundType: 'white'
+};
+
 exports.AppHeader = AppHeader;
 exports.AppSidebar = AppSidebar;
 exports.ButtonComponent = ButtonComponent;
+exports.CardComponent = CardComponent;
 exports.ChangePasswordForm = ChangePasswordForm;
 exports.DatePickerComponent = DatePickerComponent;
 exports.DrawerSidebar = DrawerSidebar;