trepur_components 0.1.43 → 0.2.2

package/dist/components/Atoms/Collapsible/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _index = _interopRequireDefault(require("../Icon/index"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Collapsible = _ref => {
+  let {
+    title,
+    subtitle,
+    isDropdown,
+    textColor,
+    bgColor,
+    hoverTextColor,
+    hoverBgColor,
+    icon,
+    content,
+    boldTitle,
+    borderTop,
+    borderBottom,
+    contentBgColor,
+    contentTextColor,
+    showBottomLine,
+    iconSize,
+    children
+  } = _ref;
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  const [styles, setStyles] = (0, _react.useState)({
+    'background-color': bgColor ? bgColor : 'grey',
+    color: textColor ? textColor : 'white'
+  });
+  const [contentStyles, setContentStyles] = (0, _react.useState)({
+    'background-color': contentBgColor ? contentBgColor : 'white',
+    color: contentTextColor ? contentTextColor : 'black'
+  });
+
+  const toggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+
+  const setHoverState = isHovering => {
+    if (isHovering) {
+      setStyles({
+        'background-color': hoverBgColor ? hoverBgColor : 'black',
+        color: hoverTextColor ? hoverTextColor : 'white'
+      });
+    } else {
+      setStyles({
+        'background-color': bgColor ? bgColor : 'grey',
+        color: textColor ? textColor : 'white'
+      });
+    }
+  };
+
+  const padding = title && subtitle ? 'pt-7' : 'pt-4';
+  const sizeIcon = iconSize ? iconSize : '1';
+  const iconPadding = title && subtitle ? 'pt-6' : 'pt-4';
+  const textSubstitutePadding = !title && !subtitle ? 'pb-4' : '';
+  let borders = '';
+  borders += borderBottom ? 'border-b ' : '';
+  borders += borderTop ? 'border-t ' : '';
+  const bottomLine = showBottomLine ? 'border-b' : ''; // let alignment = ''
+  // alignment = contentAlignment && contentAlignment === 'left' && 'text-left'
+  // alignment = contentAlignment && contentAlignment === 'right' && 'text-right'
+  // alignment = contentAlignment && contentAlignment === 'center' && 'text-center'
+  // alignment = contentAlignment && contentAlignment === 'justified' && 'text-justify'
+
+  const contentWrapperClasses = 'expandable w-auto ' + bottomLine; //+ ' ' + alignment
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: styles,
+    onMouseOver: () => setHoverState(true),
+    onMouseOut: () => setHoverState(false),
+    onClick: () => toggleExpanded(),
+    className: 'w-auto flex text-center ' + borders
+  }, icon && /*#__PURE__*/_react.default.createElement("div", {
+    className: 'pl-4 text-left ' + iconPadding + ' ' + textSubstitutePadding
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: icon,
+    size: sizeIcon
+  }))), title || subtitle ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-full pl-4 py-4 text-left"
+  }, title && boldTitle ? /*#__PURE__*/_react.default.createElement("h1", null, /*#__PURE__*/_react.default.createElement("b", null, title)) : /*#__PURE__*/_react.default.createElement("h1", null, title), subtitle && /*#__PURE__*/_react.default.createElement("h2", null, /*#__PURE__*/_react.default.createElement("small", null, subtitle))) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'w-full pr-8 text-right ' + padding
+  }, isDropdown ? expanded ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: "arrow-up"
+  })) : /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: "arrow-down"
+  })) : null)), expanded ? /*#__PURE__*/_react.default.createElement("div", {
+    style: contentStyles,
+    className: contentWrapperClasses
+  }, children) : null);
+};
+
+var _default = Collapsible;
+exports.default = _default;

package/dist/components/Atoms/Column/Column.stories.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import Column from './index'
+import { columnOptions } from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/Atoms/Column',
+    component: Column,
+    parameters: {},
+    argTypes: {
+        ...columnOptions
+    },
+    args: {
+        sm: 1,
+        md: 1,
+        lg: 1,
+        xl: 1,
+        className: 'border h-16'
+    }
+}
+
+const Template = (args) => <Column {...args} />;
+
+export const _Column = Template.bind({});
+_Column.args = {};

package/dist/components/{Column → Atoms/Column}/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+require("../../../../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Column = _ref => {
@@ -17,8 +19,23 @@ const Column = _ref => {
     md,
     lg,
     xl,
-    children
+    children,
+    id
   } = _ref;
+  const widthOptions = {
+    1: 'w-1/12',
+    2: 'w-2/12',
+    3: 'w-3/12',
+    4: 'w-4/12',
+    5: 'w-5/12',
+    6: 'w-6/12',
+    7: 'w-7/12',
+    8: 'w-8/12',
+    9: 'w-9/12',
+    10: 'w-10/12',
+    11: 'w-11/12',
+    12: 'w-12/12'
+  };
 
   const calculateWidth = size => {
     let width;
@@ -26,13 +43,13 @@ const Column = _ref => {
     if (size === 12) {
       width = 'w-full';
     } else {
-      width = 'w-' + size + '/12';
+      width = widthOptions[size];
     }
 
     return width;
   };
 
-  let classes = className + ' ';
+  let classes = className ? className + ' ' : '';
 
   if (xs) {
     let xsClass;
@@ -42,7 +59,7 @@ const Column = _ref => {
 
   if (sm) {
     let smClass;
-    smClass = 'sm:' + calculateWidth(sm);
+    smClass = calculateWidth(sm);
     classes += smClass + ' ';
   }
 
@@ -65,6 +82,7 @@ const Column = _ref => {
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
     className: classes
   }, children);
 };

package/dist/components/Atoms/Icon/Icon.stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Icon from './index'
+import { iconOptions } from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/Atoms/Icon',
+    components: Icon,
+    parameters: {},
+    argTypes: {
+        ...iconOptions
+    },
+    args: {
+        type: 'th',
+        size: 3
+    }
+}
+
+const Template = (args) => <Icon {...args} />;
+
+export const _Icon = Template.bind({});
+_Icon.args = {};

package/dist/components/{Icon → Atoms/Icon}/index.js

@@ -9,6 +9,8 @@ require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+require("../../../../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

package/dist/components/Atoms/Image/Image.stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import Image from './index'
+import logo from '../../../Assets/Images/logoWhite.png'
+import { imageOptions } from '../../../utils/controls' 
+
+export default {
+    title: 'Trepur Components/Atoms/Image',
+    components: Image,
+    parameters: {},
+    argTypes: {
+        ...imageOptions
+    },
+    args: {
+        image: logo
+    }
+}
+
+const Template = (args) => <Image {...args} />;
+
+export const _Image = Template.bind({});
+_Image.args = {};

package/dist/components/Atoms/Image/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Image = _ref => {
+  let {
+    id,
+    image,
+    altText,
+    height,
+    width,
+    classNames
+  } = _ref;
+  const widthOptions = {
+    2: 'w-2',
+    4: 'w-4',
+    8: 'w-8',
+    12: 'w-12',
+    16: 'w-16',
+    20: 'w-20',
+    24: 'w-24',
+    28: 'w-28',
+    32: 'w-32'
+  };
+  const heightOptions = {
+    2: 'h-2',
+    4: 'h-4',
+    8: 'h-8',
+    12: 'h-12',
+    16: 'h-16',
+    20: 'h-20',
+    24: 'h-24',
+    28: 'h-28',
+    32: 'h-32'
+  };
+
+  const getWidth = width => {
+    return widthOptions[width];
+  };
+
+  const getHeight = height => {
+    return heightOptions[height];
+  };
+
+  const imgWidth = width && getWidth(width);
+  const imgHeight = height && getHeight(height);
+  const classes = imgWidth + ' ' + imgHeight + ' ' + classNames;
+  return /*#__PURE__*/_react.default.createElement("img", {
+    id: id,
+    className: classes,
+    src: image,
+    alt: altText
+  });
+};
+
+var _default = Image;
+exports.default = _default;

package/dist/components/Atoms/InformationIcon/InformationIcon.stories.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import InformationIcon from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Information Icon',
+    components: InformationIcon,
+    parameters: {},
+    argTypes: {
+        type: {
+            description: 'The name of the icon you wish to use',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        text: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        number: {
+            description: '',
+            control: 'number',
+            table: {
+                category: '',
+            }
+        },
+        size: {
+            description: 'An integer between 1 and 5 to dictate the magnification of the icon',
+            control: 'number',
+            table: {
+                category: '',
+            }
+        },
+        bordered: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            }
+        },
+        rounded: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            }
+        },
+        bgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+            }
+        },
+        textColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+            }
+        },
+        hoverBgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        hoverTextColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+    },
+    args: {
+        type: 'th',
+        text: 'Text',
+        number: 21,
+        size: 3,
+        bordered: true,
+        rounded: true
+    }
+}
+
+const Template = (args) => <InformationIcon {...args} />;
+
+export const _InformationIcon = Template.bind({});
+_InformationIcon.args = {};

package/dist/components/{InformationIcon → Atoms/InformationIcon}/index.js

@@ -9,6 +9,8 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+require("../../../../index.css");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -59,13 +61,12 @@ const Icon = _ref => {
   }; //-----------------------------------
 
 
-  if (!type) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: styles,
     className: classes,
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false)
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, type && /*#__PURE__*/_react.default.createElement("span", {
     className: classList,
     role: "img",
     "aria-hidden": "true",

package/dist/components/Atoms/Input/Input.stories.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import Input from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Input',
+    component: Input,
+    parameters: {},
+    argTypes: {
+        label: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        placeholder: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        inputType: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            }
+        },
+        bold: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            }
+        }
+    },
+    args: {
+        label: 'This is a label',
+        placeholder: 'This is a placeholder'
+    }
+}
+
+const Template = (args) => <Input {...args} />;
+
+export const _Input = Template.bind({});
+_Input.args = {};

package/dist/components/Atoms/Input/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Input = _ref => {
+  let {
+    id,
+    label,
+    placeholder,
+    inputType,
+    bold,
+    classNames
+  } = _ref;
+  let classes = 'flex flex-col w-96 ' + classNames;
+  let labelClasses = bold ? 'font-bold w-auto' : 'w-auto';
+  let inputClasses = 'border h-12 pl-2';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, label && /*#__PURE__*/_react.default.createElement("label", {
+    className: labelClasses,
+    htmlFor: id
+  }, /*#__PURE__*/_react.default.createElement("b", null, label)), /*#__PURE__*/_react.default.createElement("input", {
+    className: inputClasses,
+    type: inputType,
+    id: id,
+    placeholder: placeholder
+  }));
+};
+
+var _default = Input;
+exports.default = _default;

package/dist/components/Atoms/NavItem/NavItem.stories.js

@@ -0,0 +1,100 @@
+import React from 'react'
+import Column from '../Column';
+import NavItem from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Nav Item',
+    component: NavItem,
+    parameters: {},
+    argTypes: {
+        name: {
+            description: '',
+            control: 'text',
+            table: {
+                category: 'Standard',
+                subcategory: 'Content',
+            },
+        },
+        url: {
+            description: '',
+            control: 'text',
+            table: {
+                category: 'Standard',
+                subcategory: 'Content',
+            },
+        },
+        bgColor: {
+            description: '',
+            control: 'color',
+            table: {
+              category: 'Standard',
+              subcategory: 'Colors',
+            },
+        },
+        textColor: {
+            description: '',
+            control: 'color',
+            table: {
+              category: 'Standard',
+              subcategory: 'Colors',
+            },
+        },
+        borderColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Standard',
+                subcategory: 'Colors',
+            },
+        },
+        hoverBgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Hover',
+                subcategory: 'Colors',
+            },
+        },
+        hoverTextColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Hover',
+                subcategory: 'Colors',
+            },
+        },
+        hoverBorderColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Hover',
+                subcategory: 'Colors',
+            },
+        },
+        rounded: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            },
+        },
+        bordered: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: '',
+            },
+        }
+    },
+    args: {
+        name: 'Home',
+        bordered: true,
+        rounded: true
+    }
+}
+
+
+const Template = (args) => <Column sm={1}><NavItem {...args} /></Column>
+
+export const _NavItem = Template.bind({});
+_NavItem.args = {};

package/dist/components/{NavItem → Atoms/NavItem}/index.js

@@ -9,6 +9,8 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+require("../../../../index.css");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,27 +29,26 @@ const NavItem = _ref => {
     hoverTextColor,
     hoverBgColor,
     bordered,
-    rounded
+    rounded,
+    underlineOnHover
   } = _ref;
-  let linkClasses = linkClassNames ? linkClassNames : ''; //---------- Styling ---------------
+  let linkClasses = linkClassNames ? linkClassNames : '';
+  const underline = underlineOnHover ? ' hover:underline' : ''; //---------- Styling ---------------
 
   const [styles, setStyles] = (0, _react.useState)({
     'backgroundColor': bgColor ? bgColor : 'white',
     color: textColor ? textColor : 'black',
     'borderColor': borderColor ? borderColor : 'black'
   });
-  const [hovering, setHovering] = (0, _react.useState)(false);
 
   const setHoverState = isHovering => {
     if (isHovering) {
-      setHovering(true);
       setStyles({
         'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
         color: hoverTextColor ? hoverTextColor : 'white',
         'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
       });
     } else {
-      setHovering(false);
       setStyles({
         'backgroundColor': bgColor ? bgColor : 'white',
         color: textColor ? textColor : 'black',
@@ -68,7 +69,7 @@ const NavItem = _ref => {
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
     key: name,
-    className: "px-4 mx-2 " + linkClasses + borderClass + round,
+    className: "px-4 mx-2 mb-4 text-center " + linkClasses + borderClass + round + underline,
     onClick: onClick
   }, name)));
 };