trepur_components 0.1.41 → 0.2.0

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

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Collapsible = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Collapsible',
+  components: _index.default,
+  parameters: {},
+  argTypes: {
+    title: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    subtitle: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    isDropdown: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    icon: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    content: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    boldTitle: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    borderTop: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    borderBottom: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    showBottomLine: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    children: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    },
+    contentBgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    contentTextColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    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'
+      }
+    },
+    iconSize: {
+      description: 'Between 1 and 5',
+      control: 'number',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    title: 'This is a title',
+    subtitle: 'This is a subtitle',
+    isDropdown: true,
+    icon: 'th',
+    boldTitle: true,
+    children: [/*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde perferendis quibusdam eos repellendus vero rerum sunt reiciendis velit autem odio, fuga molestiae perspiciatis dolor voluptatum mollitia quos ipsa! Doloribus? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis ducimus, dolorum tempore unde earum aspernatur placeat magnam, alias neque, blanditiis esse tenetur dignissimos in optio nihil libero cum cupiditate debitis?")]
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Collapsible = Template.bind({});
+
+exports._Collapsible = _Collapsible;
+_Collapsible.args = {};

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,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Column = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _controls = require("../../../utils/controls");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Column',
+  component: _index.default,
+  parameters: {},
+  argTypes: _objectSpread({}, _controls.columnOptions),
+  args: {
+    sm: 1,
+    md: 1,
+    lg: 1,
+    xl: 1,
+    className: 'border h-16'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Column = Template.bind({});
+
+exports._Column = _Column;
+_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,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Icon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _controls = require("../../../utils/controls");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Icon',
+  components: _index.default,
+  parameters: {},
+  argTypes: _objectSpread({}, _controls.iconOptions),
+  args: {
+    type: 'th',
+    size: 3
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Icon = Template.bind({});
+
+exports._Icon = _Icon;
+_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,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Image = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _logoWhite = _interopRequireDefault(require("../../../Assets/Images/logoWhite.png"));
+
+var _controls = require("../../../utils/controls");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Image',
+  components: _index.default,
+  parameters: {},
+  argTypes: _objectSpread({}, _controls.imageOptions),
+  args: {
+    image: _logoWhite.default
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Image = Template.bind({});
+
+exports._Image = _Image;
+_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,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._InformationIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Information Icon',
+  components: _index.default,
+  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
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _InformationIcon = Template.bind({});
+
+exports._InformationIcon = _InformationIcon;
+_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",