trepur_components 0.1.41 → 0.2.0

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

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._AlertBar = 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/AlertBar',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    text: {
+      description: 'The text the appears as an overlay on the Jumbotron',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    textColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    type: {
+      description: 'Select',
+      options: ['success', 'warning', 'error'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        category: ''
+      }
+    },
+    leftIcon: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    leftIconColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    rightIcon: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    rightIconColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    }
+  },
+  args: {
+    text: 'this is a message',
+    type: 'success'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _AlertBar = Template.bind({});
+
+exports._AlertBar = _AlertBar;
+_AlertBar.args = {};

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

@@ -0,0 +1,66 @@
+"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 _Icon = _interopRequireDefault(require("../../Atoms/Icon"));
+
+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 AlertBar = _ref => {
+  let {
+    type,
+    text,
+    leftIcon,
+    rightIcon,
+    textColor,
+    leftIconColor,
+    rightIconColor
+  } = _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.default.createElement(_Icon.default, {
+    type: leftIcon
+  }) : null;
+  let iconRight = rightIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: rightIcon
+  }) : null;
+  const [styles, setStyles] = (0, _react.useState)({
+    'color': textColor
+  });
+  const [leftIconStyles, setLeftIconStyles] = (0, _react.useState)({
+    'color': leftIconColor
+  });
+  const [rightIconStyles, setRightIconStyles] = (0, _react.useState)({
+    'color': rightIconColor
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'w-parent flex text-center h-8 ' + bgColor
+  }, leftIcon && /*#__PURE__*/_react.default.createElement("span", {
+    style: leftIconStyles,
+    className: "pt-1 left-5 pl-8"
+  }, iconLeft), /*#__PURE__*/_react.default.createElement("h3", {
+    style: styles,
+    className: "w-full text-center pt-1 pl-8"
+  }, text), rightIcon && /*#__PURE__*/_react.default.createElement("span", {
+    style: rightIconStyles,
+    className: "px-8 pt-1 float-right"
+  }, iconRight));
+};
+
+var _default = AlertBar;
+exports.default = _default;

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

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Breadcrumbs = 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/Breadcrumbs',
+  components: _index.default,
+  argTypes: {
+    links: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    links: [{
+      link: '/',
+      name: 'link 1'
+    }, {
+      link: '/',
+      name: 'link 2'
+    }, {
+      link: '/',
+      name: 'link 3'
+    }, {
+      link: '/',
+      name: 'link 4'
+    }]
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Breadcrumbs = Template.bind({});
+
+exports._Breadcrumbs = _Breadcrumbs;
+_Breadcrumbs.args = {};

package/dist/components/{Breadcrumbs → Atoms/Breadcrumbs}/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 Breadcrumbs = _ref => {

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

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._BreadcrumbsItem = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Column = _interopRequireDefault(require("../Column"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Breadcrumbs Item',
+  components: _index.default,
+  parameters: {},
+  argTypes: {
+    link: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    name: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    textColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    bgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    borderColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    hoverBgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors',
+        subcategory: 'Hover'
+      }
+    },
+    hoverTextColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors',
+        subcategory: 'Hover'
+      }
+    },
+    hoverBorderColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors',
+        subcategory: 'Hover'
+      }
+    },
+    type: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    name: 'Link 1'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_Column.default, {
+  sm: 1
+}, /*#__PURE__*/_react.default.createElement(_index.default, args));
+
+const _BreadcrumbsItem = Template.bind({});
+
+exports._BreadcrumbsItem = _BreadcrumbsItem;
+_BreadcrumbsItem.args = {};

package/dist/components/Atoms/BreadcrumbsItem/index.css

@@ -0,0 +1,42 @@
+.right-arrow {
+  @apply w-0;
+  @apply h-0;
+  border-top: 17px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-left: 16px solid;
+  @apply absolute;
+  right: -16px;
+  @apply top-0;
+}
+
+.test-arrow-bottom {
+  @apply w-0;
+  @apply h-0;
+  border-top: 17px solid;
+  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;
+  border-bottom: 17px solid transparent;
+  border-left: 17px solid transparent;
+  @apply absolute;
+  left: -17px;
+  top: 0px;
+}
+
+.bc-item {
+  @apply relative;
+}
+
+.bc-item:focus {
+  @apply border-0;
+}

package/dist/components/{BreadcrumbsBorderedItem → Atoms/BreadcrumbsItem}/index.js

@@ -9,6 +9,8 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+require("../../../../index.css");
+
 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); }

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

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SocialButtonWhatsapp = exports.SocialButtonTwitter = exports.SocialButtonFacebook = exports.HoverButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+require("./Styles.css");
+
+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/Button',
+  component: _index.default,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A Button which can either be internal, external or social as well as a standard design or a slide design.'
+      }
+    }
+  },
+  argTypes: _objectSpread({}, _controls.buttonOptions),
+  args: {}
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const HoverButton = Template.bind({});
+exports.HoverButton = HoverButton;
+HoverButton.args = {
+  ctaText: 'This is a button'
+};
+const SocialButtonFacebook = Template.bind({});
+exports.SocialButtonFacebook = SocialButtonFacebook;
+SocialButtonFacebook.args = {
+  onClick: (0, _addonActions.action)('button-click'),
+  buttonCenterIcon: 'facebook-f',
+  hoverButtonBgColor: 'white',
+  buttonBgColor: '#3b5999',
+  buttonTextColor: 'white',
+  hoverButtonTextColor: '#3b5999',
+  hoverButtonBorderColor: '#3b5999',
+  buttonType: 'social',
+  url: '/'
+};
+const SocialButtonWhatsapp = Template.bind({});
+exports.SocialButtonWhatsapp = SocialButtonWhatsapp;
+SocialButtonWhatsapp.args = {
+  onClick: (0, _addonActions.action)('button-click'),
+  buttonCenterIcon: 'whatsapp',
+  hoverButtonBgColor: 'white',
+  buttonBgColor: '#25d366',
+  buttonTextColor: 'white',
+  hoverButtonTextColor: '#25d366',
+  hoverButtonBorderColor: '#25d366',
+  buttonType: 'social',
+  url: '/'
+};
+const SocialButtonTwitter = Template.bind({});
+exports.SocialButtonTwitter = SocialButtonTwitter;
+SocialButtonTwitter.args = {
+  onClick: (0, _addonActions.action)('button-click'),
+  buttonCenterIcon: 'twitter',
+  hoverButtonBgColor: 'white',
+  buttonBgColor: '#55acee',
+  buttonTextColor: 'white',
+  hoverButtonTextColor: '#55acee',
+  hoverButtonBorderColor: '#55acee',
+  buttonType: 'social',
+  url: '/'
+};

package/dist/components/Atoms/Button/button.stories.mdx

@@ -0,0 +1,72 @@
+<!-- // import { Canvas, Meta, Story } from "@storybook/addon-docs";
+
+// import { Button } from "./index";
+
+// <Meta title="MDX/Button" component={Button} />
+
+// # Button
+
+// Let's define a story for our `Button` component:
+
+// export const Template = (args) => <Button {...args} />;
+
+// <Canvas>
+//   <Story
+//     name="facebook"
+//     args={{
+//       onClick: action("button-click"),
+//       centerIcon: "facebook-f",
+//       hoverBgColor: "white",
+//       bgColor: "#3b5999",
+//       textColor: "white",
+//       hoverTextColor: "black",
+//       buttonType: "social",
+//       url: "/",
+//     }}
+//   >
+//     {Template.bind({})}
+//   </Story>
+//   <Story
+//     name="whatsapp"
+//     args={{
+//       onClick: action("button-click"),
+//       centerIcon: "facebook-f",
+//       hoverBgColor: "white",
+//       bgColor: "#3b5999",
+//       textColor: "white",
+//       hoverTextColor: "black",
+//       buttonType: "social",
+//       url: "/",
+//     }}
+//   >
+//     {Template.bind({})}
+//   </Story>
+//   <Story
+//     name="twitter"
+//     args={{
+//       onClick: action("button-click"),
+//       centerIcon: "facebook-f",
+//       hoverBgColor: "white",
+//       bgColor: "#3b5999",
+//       textColor: "white",
+//       hoverTextColor: "black",
+//       buttonType: "social",
+//       url: "/",
+//     }}
+//   >
+//     {Template.bind({})}
+//   </Story>
+// </Canvas>
+
+
+// <Canvas>
+//     <Story>
+//         {SocialButton}
+//     </Story>
+//     <Story>
+//         {SocialButton2}
+//     </Story>
+//     <Story>
+//         {SocialButton2}
+//     </Story>
+// </Canvas> -->

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

@@ -11,7 +11,11 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _index = _interopRequireDefault(require("../Icon/index"));
+var _Icon = _interopRequireDefault(require("../../Atoms/Icon"));
+
+require("../../../../index.css");
+
+require("./Styles.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -26,14 +30,14 @@ const Button = _ref => {
     ctaText,
     className,
     onClick,
-    leftIcon,
-    rightIcon,
-    centerIcon,
-    bgColor,
-    textColor,
+    buttonLeftIcon,
+    buttonRightIcon,
+    buttonCenterIcon,
+    buttonBgColor,
+    buttonTextColor,
     borderColor,
-    hoverBgColor,
-    hoverTextColor,
+    hoverButtonBgColor,
+    hoverButtonTextColor,
     hoverBorderColor,
     hoverCtaText,
     url,
@@ -54,24 +58,24 @@ const Button = _ref => {
     classes = slideClasses;
   }
 
-  let iconLeft = leftIcon && /*#__PURE__*/_react.default.createElement(_index.default, {
+  let iconLeft = buttonLeftIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     className: "pr-2",
-    type: leftIcon
+    type: buttonLeftIcon
   });
 
-  let iconRight = rightIcon && /*#__PURE__*/_react.default.createElement(_index.default, {
+  let iconRight = buttonRightIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
     className: "pl-2",
-    type: rightIcon
+    type: buttonRightIcon
   });
 
-  let iconCenter = centerIcon && /*#__PURE__*/_react.default.createElement(_index.default, {
-    type: centerIcon
+  let iconCenter = buttonCenterIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    type: buttonCenterIcon
   }); //---------- Styling ---------------
 
 
   const [styles, setStyles] = (0, _react.useState)({
-    'backgroundColor': bgColor ? bgColor : 'white',
-    color: textColor ? textColor : 'black',
+    'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
+    color: buttonTextColor ? buttonTextColor : 'black',
     'borderColor': borderColor ? borderColor : 'black'
   });
   const [hovering, setHovering] = (0, _react.useState)(false);
@@ -80,15 +84,15 @@ const Button = _ref => {
     if (isHovering) {
       setHovering(true);
       setStyles({
-        'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
-        color: hoverTextColor ? hoverTextColor : 'white',
+        'backgroundColor': hoverButtonBgColor ? hoverButtonBgColor : 'black',
+        color: hoverButtonTextColor ? hoverButtonTextColor : 'white',
         'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
       });
     } else {
       setHovering(false);
       setStyles({
-        'backgroundColor': bgColor ? bgColor : 'white',
-        color: textColor ? textColor : 'black',
+        'backgroundColor': buttonBgColor ? buttonBgColor : 'white',
+        color: buttonTextColor ? buttonTextColor : 'black',
         'borderColor': borderColor ? borderColor : 'black'
       });
     }
@@ -105,7 +109,7 @@ const Button = _ref => {
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
       className: classes
-    }, leftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, rightIcon && iconRight));
+    }, buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight));
   } else if (buttonType === 'internal') {
     return /*#__PURE__*/_react.default.createElement("a", {
       href: url,
@@ -115,7 +119,7 @@ const Button = _ref => {
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
       className: classes
-    }, leftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, rightIcon && iconRight));
+    }, buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight));
   } else if (buttonType === 'social') {
     return /*#__PURE__*/_react.default.createElement("a", {
       href: url,
@@ -126,7 +130,7 @@ const Button = _ref => {
       onMouseOver: () => setHoverState(true),
       onMouseOut: () => setHoverState(false),
       className: classes
-    }, centerIcon && iconCenter));
+    }, buttonCenterIcon && iconCenter));
   }
 
   return /*#__PURE__*/_react.default.createElement("button", _extends({
@@ -138,7 +142,7 @@ const Button = _ref => {
   }, {
     href: url,
     className: classes
-  }), leftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, rightIcon && iconRight);
+  }), buttonLeftIcon && iconLeft, hovering ? hoverCtaText ? hoverCtaText : ctaText : ctaText, buttonRightIcon && iconRight);
 };
 
 var _default = Button;