trepur_components 0.1.6 → 0.1.10

package/dist/components/AlertBar/AlertBar.stories.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._AlertBarWithRightIcon = exports._AlertBar = exports.AlertBarWithLeftIcon = exports.AlertBarWithBothIcons = exports.AlertBarWarning = exports.AlertBarSuccess = exports.AlertBarError = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+require("../../index.css");
+
+var _index2 = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/AlertBar',
+  argTypes: {
+    text: {
+      name: 'Text',
+      description: 'The text the appears as an overlay on the Jumbotron',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'This is some text to display as an alert message'
+    },
+    type: {
+      name: 'Warning Type',
+      defaultValue: 'success',
+      control: {
+        type: 'select'
+      },
+      options: ['success', 'warning', 'error']
+    },
+    leftIcon: {
+      name: 'Left Icon',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'star'
+    },
+    rightIcon: {
+      name: 'Right Icon',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'star'
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  addParameters: {
+    oprions: {
+      showNav: false
+    }
+  }
+};
+exports.default = _default;
+
+const _AlertBar = args => {
+  return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    text: args.text,
+    type: args.type,
+    leftIcon: args.leftIcon,
+    rightIcon: args.rightIcon
+  });
+};
+
+exports._AlertBar = _AlertBar;
+
+const AlertBarSuccess = args => {
+  return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    text: "This is some text to display as an alert message",
+    type: "success"
+  });
+};
+
+exports.AlertBarSuccess = AlertBarSuccess;
+
+const AlertBarWarning = args => {
+  return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    text: "This is some text to display as an alert message",
+    type: "warning"
+  });
+};
+
+exports.AlertBarWarning = AlertBarWarning;
+
+const AlertBarError = args => {
+  return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    text: "This is some text to display as an alert message",
+    type: "error"
+  });
+};
+
+exports.AlertBarError = AlertBarError;
+
+const AlertBarWithLeftIcon = args => {
+  return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    text: args.text,
+    type: args.type,
+    leftIcon: args.leftIcon
+  });
+};
+
+exports.AlertBarWithLeftIcon = AlertBarWithLeftIcon;
+
+const _AlertBarWithRightIcon = args => {
+  return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    text: args.text,
+    type: args.type,
+    rightIcon: args.rightIcon
+  });
+};
+
+exports._AlertBarWithRightIcon = _AlertBarWithRightIcon;
+
+const AlertBarWithBothIcons = args => {
+  return /*#__PURE__*/_react.default.createElement(_index2.default, {
+    text: args.text,
+    type: args.type,
+    leftIcon: args.leftIcon,
+    rightIcon: args.rightIcon
+  });
+};
+
+exports.AlertBarWithBothIcons = AlertBarWithBothIcons;

package/dist/components/AlertBar/README.md

@@ -0,0 +1 @@
+# Jumbotron

package/dist/components/AlertBar/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _index = _interopRequireDefault(require("../Icon/index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const AlertBar = _ref => {
+  let {
+    type,
+    text,
+    leftIcon,
+    rightIcon
+  } = _ref;
+  let bgColor;
+  if (type === 'success') bgColor = 'bg-brand-success';
+  if (type === 'warning') bgColor = 'bg-brand-warning';
+  if (type === 'error') bgColor = 'bg-brand-error';
+  let iconLeft = leftIcon ? /*#__PURE__*/React.createElement(_index.default, {
+    type: leftIcon
+  }) : null;
+  let iconRight = rightIcon ? /*#__PURE__*/React.createElement(_index.default, {
+    type: rightIcon
+  }) : null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'w-parent flex text-center h-8 ' + bgColor
+  }, leftIcon && /*#__PURE__*/React.createElement("span", {
+    className: "pt-1 left-5 pl-8"
+  }, iconLeft), /*#__PURE__*/React.createElement("h3", {
+    className: "text-white w-full text-center pt-1 pl-8"
+  }, text), rightIcon && /*#__PURE__*/React.createElement("span", {
+    className: "px-8 pt-1 float-right"
+  }, iconRight));
+};
+
+var _default = AlertBar;
+exports.default = _default;

package/dist/{Components/Profile/Profile.stories.js → components/Breadcrumbs/Breadcrumbs.stories.js}

@@ -1,7 +1,5 @@
 "use strict";
 
-require("core-js/modules/es.object.define-property.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,7 @@ require("../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var links = [{
+const links = [{
   link: '/',
   name: 'link 1'
 }, {
@@ -30,11 +28,9 @@ var links = [{
 var _default = {
   title: 'Components/Breadcrumbs',
   argTypes: {},
-  decorators: [function (story) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "p-4"
-    }, story());
-  }],
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
   parameters: {
     readme: {
       sidebar: _README.default
@@ -43,8 +39,10 @@ var _default = {
 };
 exports.default = _default;
 
-var _Breadcrumbs = function _Breadcrumbs(args) {
-  return /*#__PURE__*/_react.default.createElement(_index.default, null);
+const _Breadcrumbs = () => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links
+  });
 };
 
 exports._Breadcrumbs = _Breadcrumbs;

package/dist/components/Breadcrumbs/README.md

@@ -0,0 +1,27 @@
+# Breadcrumbs
+
+Basic breadcrumbs
+
+## Example
+
+```
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+ <BreadCrumbs links={links} />
+```
+
+## Parameters
+`links={array} (default=null)`

package/dist/{Components → components}/Breadcrumbs/index.js

@@ -1,28 +1,20 @@
 "use strict";
 
-require("core-js/modules/es.object.define-property.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.array.map.js");
-
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/es.string.link.js");
-
-var Breadcrumbs = function Breadcrumbs(_ref) {
-  var className = _ref.className,
-      links = _ref.links;
-  var linksLength = Object.keys(links).length;
-  var classes = className + ' flex py-2 px-8 ';
+const Breadcrumbs = _ref => {
+  let {
+    className,
+    links
+  } = _ref;
+  const linksLength = Object.keys(links).length;
+  let classes = className + ' flex py-2 px-8 ';
   return /*#__PURE__*/React.createElement("ul", {
     className: classes
-  }, links && links.map(function (link, i) {
+  }, links && links.map((link, i) => {
     return /*#__PURE__*/React.createElement("div", {
       key: link.name
     }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("div", {

package/dist/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._BreadcrumbsBordered = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const links = [{
+  link: '/',
+  name: 'link 1'
+}, {
+  link: '/',
+  name: 'link 2'
+}, {
+  link: '/',
+  name: 'Link 3'
+}];
+var _default = {
+  title: 'Components/BreadcrumbsBordered',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _BreadcrumbsBordered = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links
+  });
+};
+
+exports._BreadcrumbsBordered = _BreadcrumbsBordered;

package/dist/components/BreadcrumbsBordered/README.md

@@ -0,0 +1,27 @@
+# Breadcrumbs
+
+Breadcrumbs with a bit of styling
+
+## Example
+
+```
+const links = [
+    {
+        link: '/', 
+        name: 'link 1'
+    },
+    {
+        link: '/', 
+        name: 'link 2'
+    },
+    {
+        link: '/', 
+        name: 'Link 3'
+    },
+]
+
+ <BreadCrumbs links={links} />
+```
+
+## Parameters
+`links={array} (default=null)`

package/dist/components/BreadcrumbsBordered/index.css

@@ -0,0 +1,57 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
+
+.right-arrow {
+    @apply w-0;
+    @apply h-0;
+    border-top: 17px solid transparent;
+    border-bottom: 15px solid transparent;
+    border-left: 16px solid theme('colors.brand-border');
+    @apply absolute;
+    right: -16px;
+    @apply top-0;
+}
+
+.test-arrow-bottom {
+    @apply w-0;
+    @apply h-0;
+    border-top: 17px solid theme('colors.brand-border');
+    border-bottom: 18px solid transparent;
+    border-left: 17px solid transparent;
+    @apply absolute;
+    left: -17px;
+    bottom: -0px;
+    -webkit-transform: scaleY(-1);
+    transform: scaleY(-1);
+}
+
+.test-arrow-top {
+    @apply w-0;
+    @apply h-0;
+    border-top: 18px solid theme('colors.brand-border');
+    border-bottom: 17px solid transparent;
+    border-left: 17px solid transparent;
+    @apply absolute;
+    left: -17px;
+    top: 0px;
+}
+
+.bc-item {
+    @apply relative;
+}
+
+.item:hover .right-arrow {
+    border-left-color: theme('colors.brand-secondary');
+}
+.item:hover .test-arrow-bottom {
+    border-top-color: theme('colors.brand-secondary');
+}
+.item:hover .test-arrow-top {
+    border-top-color: theme('colors.brand-secondary');
+}
+
+.bc-item:focus {
+    @apply border-0;
+}

package/dist/components/BreadcrumbsBordered/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const Breadcrumbs = _ref => {
+  let {
+    className,
+    links
+  } = _ref;
+  const linksLength = Object.keys(links).length;
+  let classes = 'flex py-2 px-8 ' + className;
+  return /*#__PURE__*/React.createElement("ul", {
+    className: classes
+  }, links && links.map((link, i) => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: link.name,
+      className: "item"
+    }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("div", {
+      className: " bc-item px-4 mx-3 hover:bg-brand-secondary bg-brand-border border-brand-secondary h-8"
+    }, i + 1 < linksLength ? i === 0 ? /*#__PURE__*/React.createElement("a", {
+      href: link.link
+    }, /*#__PURE__*/React.createElement("p", {
+      className: i !== 0 ? 'pl-2 pt-1 text-social-facebook hover:underline' : 'pt-1 text-social-facebook hover:underline'
+    }, link.name, /*#__PURE__*/React.createElement("span", {
+      className: "right-arrow"
+    }))) : /*#__PURE__*/React.createElement("a", {
+      href: link.link
+    }, /*#__PURE__*/React.createElement("p", {
+      className: i !== 0 ? 'pl-2 pt-1 text-social-facebook hover:underline' : 'pt-1 text-social-facebook hover:underline'
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "test-arrow-bottom"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "test-arrow-top"
+    }), link.name, /*#__PURE__*/React.createElement("span", {
+      className: "right-arrow"
+    }))) : /*#__PURE__*/React.createElement("p", {
+      className: "pt-1"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "test-arrow-bottom"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "test-arrow-top"
+    }), link.name, /*#__PURE__*/React.createElement("span", {
+      className: "right-arrow"
+    })))));
+  }));
+};
+
+var _default = Breadcrumbs;
+exports.default = _default;

package/dist/components/Button/Button.stories.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Button = exports.WithOnClickMethod = exports.WithIconRight = exports.WithIconLeft = exports.WithBothIcons = exports.ButtonAsInternalLink = exports.ButtonAsExternalLink = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Button',
+  argTypes: {
+    text: {
+      name: 'Button Text',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Button 1'
+    },
+    type: {
+      name: 'Type',
+      defaultValue: 'primary',
+      control: {
+        type: 'select'
+      },
+      options: ['primary', 'secondary', 'ghost']
+    },
+    iconPlacement: {
+      name: 'Icon',
+      defaultValue: 'none',
+      control: {
+        type: 'select'
+      },
+      options: ['left', 'right', 'both', 'none']
+    },
+    leftIcon: {
+      name: 'Left Icon',
+      defaultValue: 'thumbs-down',
+      control: {
+        type: 'select'
+      },
+      options: ['thumbs-up', 'thumbs-down', 'search', 'th']
+    },
+    rightIcon: {
+      name: 'Right Icon',
+      defaultValue: 'thumbs-up',
+      control: {
+        type: 'select'
+      },
+      options: ['thumbs-up', 'thumbs-down', 'search', 'th']
+    },
+    padded: {
+      name: 'Padded',
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    social: {
+      name: 'Social',
+      defaultValue: 'None',
+      control: {
+        type: 'select'
+      },
+      options: ['Facebook', 'Twitter', 'Whatsapp', 'None']
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Button = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    ctaText: args.text
+  });
+};
+
+exports._Button = _Button;
+
+const WithIconRight = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    rightIcon: args.rightIcon,
+    ctaText: args.text
+  });
+};
+
+exports.WithIconRight = WithIconRight;
+
+const WithIconLeft = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    leftIcon: args.leftIcon,
+    ctaText: args.text
+  });
+};
+
+exports.WithIconLeft = WithIconLeft;
+
+const WithBothIcons = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    leftIcon: args.leftIcon,
+    rightIcon: args.rightIcon,
+    ctaText: args.text
+  });
+};
+
+exports.WithBothIcons = WithBothIcons;
+
+const ButtonAsExternalLink = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    as: "a-external",
+    ctaText: args.text
+  });
+};
+
+exports.ButtonAsExternalLink = ButtonAsExternalLink;
+
+const ButtonAsInternalLink = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    as: "Link",
+    ctaText: args.text,
+    url: "/"
+  });
+};
+
+exports.ButtonAsInternalLink = ButtonAsInternalLink;
+
+const WithOnClickMethod = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    ctaText: args.text,
+    onClick: (0, _addonActions.action)('button-click')
+  });
+};
+
+exports.WithOnClickMethod = WithOnClickMethod;

package/dist/components/Button/README.md

@@ -0,0 +1,18 @@
+# Button
+
+A basic button
+
+## Example
+
+```
+<Search
+    placeholder={args.placeholder}
+    text={args.text}
+    leftIcon={args.leftIcon}>
+</Search>
+```
+
+## Parameters
+`placeholder={string} (default=null)`
+`text={string} (default=null)`
+`leftIcon={string} (default=null)`

package/dist/{Components → components}/Button/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-require("core-js/modules/es.object.define-property.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,18 +9,20 @@ var _index = _interopRequireDefault(require("../Icon/index"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Button = function Button(_ref) {
-  var ctaText = _ref.ctaText,
-      ctaLink = _ref.ctaLink,
-      className = _ref.className,
-      onClick = _ref.onClick,
-      leftIcon = _ref.leftIcon,
-      rightIcon = _ref.rightIcon;
-  var classes = className + ' py-2 px-8 rounded-lg text-black border-2 border-black border-gray-300 bg-white hover:bg-red hover:text-black transition-background-color duration-500 transform';
-  var iconLeft = /*#__PURE__*/React.createElement(_index.default, {
+const Button = _ref => {
+  let {
+    ctaText,
+    ctaLink,
+    className,
+    onClick,
+    leftIcon,
+    rightIcon
+  } = _ref;
+  let classes = className + ' py-2 px-8 rounded-lg text-black border-2 border-black border-gray-300 bg-white hover:bg-red hover:text-black transition-background-color duration-500 transform';
+  let iconLeft = /*#__PURE__*/React.createElement(_index.default, {
     type: leftIcon
   });
-  var iconRight = /*#__PURE__*/React.createElement(_index.default, {
+  let iconRight = /*#__PURE__*/React.createElement(_index.default, {
     type: rightIcon
   });
   return /*#__PURE__*/React.createElement("button", {