pcm-shared-components 0.0.19 → 0.0.23

package/dist/components/Buttons/CustomFab/CustomFab.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import Tooltip from '@mui/material/Tooltip';
 import clsx from 'clsx';
 import '../../../styles/tailwind.css';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 const useStyles = makeStyles(() => ({
   rootFabElement: {
     margin: 2,
@@ -21,7 +22,7 @@ const useStyles = makeStyles(() => ({
     },
     boxShadow: ({
       boxShadow
-    }) => boxShadow,
+    }) => boxShadow ? '' : 'none',
     color: ({
       textColor
     }) => textColor
@@ -62,11 +63,11 @@ const CustomFab = props => {
 export default /*#__PURE__*/memo(CustomFab);
 CustomFab.defaultProps = {
   onClick: () => {},
-  Icon: undefined,
+  Icon: MoreVertIcon,
   iconLocation: 'left',
   buttonText: '',
   variant: 'circular',
-  boxShadow: PropTypes.oneOf(['none', undefined]),
+  boxShadow: true,
   size: 'small',
   tooltipText: '',
   backgroundColor: undefined,
@@ -96,7 +97,7 @@ CustomFab.propTypes = {
   tooltipText: PropTypes.string,
 
   /** Display the drop shadow or not [none or undefined] */
-  boxShadow: PropTypes.string,
+  boxShadow: PropTypes.bool,
 
   /** Background color */
   backgroundColor: PropTypes.string,

package/dist/components/Buttons/TestButton/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from 'prop-types';
+import '../../../styles/tailwind.css';
 export const TestButton = props => {
   const {
     text = 'hey'

package/dist/components/Theme/theme.js

@@ -0,0 +1,172 @@
+import lightBlue from '@mui/material/colors/lightBlue';
+import red from '@mui/material/colors/red';
+const fuseDark = {
+  50: '#eceeec',
+  100: '#96c545',
+  200: '#72b05c',
+  300: '#7d8c7d',
+  400: '#556f4c',
+  500: '#3d523c',
+  600: '#384835',
+  700: '#f1632f',
+  800: '#293326',
+  900: '#21291e',
+  A100: '#96c545',
+  A200: '#72b05c',
+  A400: '#556f4c',
+  A700: '#f1632f'
+};
+export const theme = {
+  default: {
+    palette: {
+      type: 'light',
+      primary: fuseDark,
+      secondary: {
+        light: lightBlue[400],
+        main: lightBlue[600],
+        dark: lightBlue[700]
+      },
+      error: red
+    },
+    status: {
+      danger: 'orange'
+    }
+  },
+  sunset: {
+    palette: {
+      type: 'light',
+      primary: {
+        light: '#ff908b',
+        main: '#d0605e',
+        dark: '#9b3134'
+      },
+      secondary: {
+        light: '#c76a1d',
+        main: '#ff994c',
+        dark: '#ffca7b',
+        contrastText: '#fff'
+      },
+      error: red
+    },
+    status: {
+      danger: 'orange'
+    }
+  },
+  greeny: {
+    palette: {
+      type: 'light',
+      primary: {
+        light: '#6cabd4',
+        main: '#387ca3',
+        dark: '#005074'
+      },
+      secondary: {
+        light: '#89f6cf',
+        main: '#55c39e',
+        dark: '#159270',
+        contrastText: '#fff'
+      },
+      error: red
+    },
+    status: {
+      danger: 'orange'
+    }
+  },
+  beach: {
+    palette: {
+      type: 'light',
+      primary: {
+        light: '#c4d8dd',
+        main: '#93a7ab',
+        dark: '#65787c',
+        contrastText: '#fff'
+      },
+      secondary: {
+        light: '#ffb281',
+        main: '#f18153',
+        dark: '#ba5228',
+        contrastText: '#fff'
+      }
+    }
+  },
+  pitchCamp: {
+    palette: {
+      type: 'light',
+      primary: {
+        light: '#96c545',
+        main: '#72b05c',
+        dark: '#556f4c',
+        contrastText: '#fff'
+      },
+      secondary: {
+        light: '#ffb883',
+        main: '#f1632f',
+        dark: '#dc3f05'
+      }
+    }
+  },
+  sweetHues: {
+    palette: {
+      type: 'light',
+      primary: {
+        light: '#d5c1eb',
+        main: '#a391b9',
+        dark: '#746389',
+        contrastText: '#fff'
+      },
+      secondary: {
+        light: '#90afd4',
+        main: '#6080a3',
+        dark: '#325474'
+      }
+    }
+  },
+  defaultDark: {
+    palette: {
+      type: 'dark',
+      primary: fuseDark,
+      secondary: {
+        light: lightBlue[400],
+        main: lightBlue[600],
+        dark: lightBlue[700]
+      },
+      error: red
+    },
+    status: {
+      danger: 'orange'
+    }
+  },
+  deepOcean: {
+    palette: {
+      type: 'dark',
+      primary: {
+        light: '#8f53e7',
+        main: '#5a24b4',
+        dark: '#1e0083'
+      },
+      secondary: {
+        light: '#ff61ff',
+        main: '#fe00e9',
+        dark: '#c600b6',
+        contrastText: '#fff'
+      }
+    }
+  },
+  slate: {
+    palette: {
+      type: 'dark',
+      primary: {
+        light: '#86fff7',
+        main: '#4ecdc4',
+        dark: '#009b94'
+      },
+      secondary: {
+        light: '#ff9d99',
+        main: '#ff6b6b',
+        dark: '#c73840',
+        contrastText: '#fff'
+      }
+    }
+  }
+};
+export default theme;

package/dist/index.js

@@ -2,4 +2,5 @@ import TestButton from './components/Buttons/TestButton';
 import CodeHighlight from './components/Tools/CodeHighlight/CodeHighlight';
 import CustomFab from './components/Buttons/CustomFab/CustomFab';
 import HelpButton from './components/Buttons/HelpButton/HelpButton';
-export { TestButton, CodeHighlight, CustomFab, HelpButton };
+import theme from './components/Theme/theme';
+export { TestButton, CodeHighlight, CustomFab, HelpButton, theme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "0.0.19",
+  "version": "0.0.23",
   "private": false,
   "main": "dist/index.js",
   "babel": {
@@ -30,7 +30,8 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@rollup/plugin-babel": "^5.3.1",
-    "@storybook/addon-actions": "^6.4.9",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-console": "^1.2.3",
     "@storybook/addon-essentials": "^6.4.9",
     "@storybook/addon-links": "^6.4.9",
     "@storybook/addon-postcss": "^2.0.0",