trepur_components 0.1.43 → 0.2.2

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import AlertBar from './index';
+
+export default {
+    title: 'Trepur Components/Atoms/AlertBar',
+    component: AlertBar,
+    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'
+    }
+}
+
+const Template = (args) => <AlertBar {...args} />
+
+export const _AlertBar = Template.bind({});
+_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,41 @@
+import React from 'react'
+import Breadcrumbs from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Breadcrumbs',
+    components: Breadcrumbs,
+    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'
+            }
+        ]
+    }
+}
+
+const Template = (args) => <Breadcrumbs {...args} />;
+
+export const _Breadcrumbs = Template.bind({});
+_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,86 @@
+import React from 'react'
+import Column from '../Column';
+import BreadcrumbsItem from './index'
+import './index.css';
+
+export default {
+    title: 'Trepur Components/Atoms/Breadcrumbs Item',
+    components: BreadcrumbsItem,
+    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',
+    },
+}
+
+const Template = (args) => <Column sm={1}><BreadcrumbsItem {...args} /></Column>
+
+export const _BreadcrumbsItem = Template.bind({});
+_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,68 @@
+import React from 'react'
+import Button from './index'
+import { action } from '@storybook/addon-actions'
+import './Styles.css'
+import { buttonOptions } from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/Atoms/Button',
+    component: Button,
+    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: {
+        ...buttonOptions
+    },
+    args: {
+    },
+};
+
+const Template = (args) => <Button {...args} />;
+
+export const HoverButton = Template.bind({});
+HoverButton.args = {
+    ctaText: 'This is a button',
+};
+
+export const SocialButtonFacebook = Template.bind({});
+SocialButtonFacebook.args = {
+    onClick: action('button-click'),
+    buttonCenterIcon: 'facebook-f',
+    hoverButtonBgColor: 'white',
+    buttonBgColor: '#3b5999',
+    buttonTextColor: 'white',
+    hoverButtonTextColor: '#3b5999',
+    hoverButtonBorderColor: '#3b5999',
+    buttonType: 'social',
+    url: '/'
+};
+
+export const SocialButtonWhatsapp = Template.bind({});
+SocialButtonWhatsapp.args = {
+    onClick: action('button-click'),
+    buttonCenterIcon: 'whatsapp',
+    hoverButtonBgColor: 'white',
+    buttonBgColor: '#25d366',
+    buttonTextColor: 'white',
+    hoverButtonTextColor: '#25d366',
+    hoverButtonBorderColor: '#25d366',
+    buttonType: 'social',
+    url: '/'
+};
+
+export const SocialButtonTwitter = Template.bind({});
+SocialButtonTwitter.args = {
+    onClick: action('button-click'),
+    buttonCenterIcon: 'twitter',
+    hoverButtonBgColor: 'white',
+    buttonBgColor: '#55acee',
+    buttonTextColor: 'white',
+    hoverButtonTextColor: '#55acee',
+    hoverButtonBorderColor: '#55acee',
+    buttonType: 'social',
+    url: '/'
+};

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;

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

@@ -0,0 +1,144 @@
+import React from 'react'
+import Collapsible from './index';
+
+export default {
+    title: 'Trepur Components/Atoms/Collapsible',
+    components: Collapsible,
+    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: [<p>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?</p>]
+    },
+}
+
+const Template = (args) => <Collapsible {...args} />;
+
+export const _Collapsible = Template.bind({});
+_Collapsible.args = {};