trepur_components 0.1.0

package/dist/Components/Icon/Icon.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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); }
+
+const Icon = _ref => {
+  let {
+    type,
+    size,
+    className,
+    onClick
+  } = _ref;
+  if (!type) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  let classList = "fa fa-".concat(type, " fa-x ");
+  classList += size ? "fa-".concat(size, "x ") : "";
+  classList += className ? " ".concat(className) : "";
+  return /*#__PURE__*/_react.default.createElement("span", _extends({
+    className: classList,
+    role: "img",
+    "aria-hidden": "true",
+    "aria-label": type
+  }, onClick && {
+    onClick: onClick
+  }));
+};
+
+Icon.propTypes = {
+  type: _propTypes.default.string,
+  className: _propTypes.default.string,
+  onClick: _propTypes.default.func
+};
+var _default = Icon;
+exports.default = _default;

package/dist/Components/Icon/Icon.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withSizeTwo = exports.withSizeThree = exports.withSizeFour = exports.withSizeFive = exports.default = exports._Icon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _Icon2 = _interopRequireDefault(require("./Icon"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Icon',
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Icon = args => {
+  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+    type: "thumbs-up"
+  });
+};
+
+exports._Icon = _Icon;
+
+const withSizeTwo = args => {
+  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+    type: "thumbs-up",
+    size: "2"
+  });
+};
+
+exports.withSizeTwo = withSizeTwo;
+
+const withSizeThree = args => {
+  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+    type: "thumbs-up",
+    size: "3"
+  });
+};
+
+exports.withSizeThree = withSizeThree;
+
+const withSizeFour = args => {
+  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+    type: "thumbs-up",
+    size: "4"
+  });
+};
+
+exports.withSizeFour = withSizeFour;
+
+const withSizeFive = args => {
+  return /*#__PURE__*/_react.default.createElement(_Icon2.default, {
+    type: "thumbs-up",
+    size: "5"
+  });
+};
+
+exports.withSizeFive = withSizeFive;

package/dist/Components/Icon/README.md

@@ -0,0 +1 @@
+hello this is a button

package/dist/Components/Jumbotron/Jumbotron.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Jumbotron = _ref => {
+  let {
+    image,
+    altText,
+    text,
+    ctaText,
+    ctaText2,
+    ctaLink,
+    ctaLink2
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-screen text-center"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: altText
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-10 lg:top-20 w-full"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "text-white text-4xl"
+  }, text), /*#__PURE__*/React.createElement("div", {
+    className: "pt-2 lg:pt-8 text-white"
+  }, ctaText && /*#__PURE__*/React.createElement(_Button.default, {
+    className: "mx-2",
+    ctaText: ctaText
+  }), ctaText2 && /*#__PURE__*/React.createElement(_Button.default, {
+    className: "mx-2",
+    ctaText: ctaText2
+  }))));
+};
+
+var _default = Jumbotron;
+exports.default = _default;

package/dist/Components/Jumbotron/Jumbotron.stories.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Jumbotron = exports.JumbotronWithTwoBtns = exports.JumbotronWithTextAndBtns = exports.JumbotronWithOneBtn = exports.JumbotronWithCenterText = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _Jumbotron2 = _interopRequireDefault(require("./Jumbotron"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Jumbotron',
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Jumbotron = args => {
+  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+    altText: "image",
+    image: "https://picsum.photos/1500/400"
+  });
+};
+
+exports._Jumbotron = _Jumbotron;
+
+const JumbotronWithOneBtn = args => {
+  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+    altText: "image",
+    image: "https://picsum.photos/1500/400",
+    ctaText: "This is a button"
+  });
+};
+
+exports.JumbotronWithOneBtn = JumbotronWithOneBtn;
+
+const JumbotronWithTwoBtns = args => {
+  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+    altText: "image",
+    image: "https://picsum.photos/1500/400",
+    ctaText: "This is a button",
+    ctaText2: "This is another button"
+  });
+};
+
+exports.JumbotronWithTwoBtns = JumbotronWithTwoBtns;
+
+const JumbotronWithCenterText = args => {
+  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+    altText: "image",
+    image: "https://picsum.photos/1500/400",
+    text: "Some text here"
+  });
+};
+
+exports.JumbotronWithCenterText = JumbotronWithCenterText;
+
+const JumbotronWithTextAndBtns = args => {
+  return /*#__PURE__*/_react.default.createElement(_Jumbotron2.default, {
+    altText: "image",
+    image: "https://picsum.photos/1500/400",
+    text: "Some text here",
+    ctaText: "This is a button",
+    ctaText2: "This is another button"
+  });
+};
+
+exports.JumbotronWithTextAndBtns = JumbotronWithTextAndBtns;

package/dist/Components/Nav.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = require("react");
+
+var _Profile = _interopRequireDefault(require("./Profile"));
+
+var _Search = _interopRequireDefault(require("./Search"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Header = _ref => {
+  let {
+    links,
+    navPosition,
+    alignNavAndLogo,
+    navClass,
+    navLinkClass,
+    logoClass,
+    showSearch,
+    showProfile
+  } = _ref;
+  const [mobileMenuState, setmobileMenuState] = (0, _react.useState)(false);
+  const profileLinks = [{
+    name: 'PROFILE ITEM 1',
+    reference: '/'
+  }, {
+    name: 'PROFILE ITEM 2',
+    reference: '/'
+  }, {
+    name: 'PROFILE ITEM 3',
+    reference: '/'
+  }, {
+    name: 'PROFILE ITEM 4',
+    reference: '/'
+  }];
+  let combinedLogoClass = logoClass + ' hidden sm:inline-flex flex-1 flex items-center justify-center sm:items-stretch ';
+  let combinedMobileLogoClass = logoClass + ' sm:hidden block flex-1 flex items-center justify-center sm:items-stretch ';
+  let linkContainerClass = 'flex-1 flex items-center justify-center sm:items-stretch ';
+
+  if (alignNavAndLogo) {
+    combinedLogoClass = ' hidden sm:inline-flex pl-4 pt-8 absolute inset-y-0 h-8 left-0 flex items-center';
+  } else {
+    combinedLogoClass += ' flex-1';
+  }
+
+  if (navPosition === '0') {
+    linkContainerClass += 'sm:justify-start';
+  }
+
+  if (navPosition === '1') {
+    linkContainerClass += 'sm:justify-center';
+  }
+
+  if (navPosition === '2') {
+    linkContainerClass += 'sm:justify-end';
+  }
+
+  return /*#__PURE__*/React.createElement("nav", {
+    id: "nav",
+    className: navClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "px-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "sm-nav",
+    className: "relative flex items-center justify-between h-16 sm:hidden"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "nav-collapse-btn-wrapper",
+    className: "absolute inset-y-0 left-0 flex items-center"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => setmobileMenuState(!mobileMenuState),
+    type: "button",
+    className: "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",
+    "aria-controls": "mobile-menu",
+    "aria-expanded": "false"
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: "block h-6 w-6",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4 6h16M4 12h16M4 18h16"
+  })), /*#__PURE__*/React.createElement("svg", {
+    className: "hidden h-6 w-6",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 18L18 6M6 6l12 12"
+  })))), /*#__PURE__*/React.createElement("div", {
+    id: "logo",
+    className: combinedMobileLogoClass
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "h-8 w-auto",
+    src: "logo.png",
+    alt: " Logo "
+  }))), /*#__PURE__*/React.createElement("div", {
+    clas: true,
+    Name: "hidden sm:block pt-2 items-center justify-between sm:items-stretch text-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "logo",
+    className: combinedLogoClass
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "h-8 w-auto",
+    src: "logo.png",
+    alt: " Logo "
+  })), /*#__PURE__*/React.createElement("div", {
+    id: "nav-container",
+    className: linkContainerClass
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "nav-block",
+    className: "hidden sm:inline-flex sm:ml-6"
+  }, /*#__PURE__*/React.createElement("ul", {
+    id: "nav-list",
+    className: "list-none mx-auto flex flex-1"
+  }, links && links.map(link => {
+    return /*#__PURE__*/React.createElement("li", {
+      key: link.name,
+      className: "flex px-4",
+      onClick: link.onClick
+    }, /*#__PURE__*/React.createElement("a", {
+      className: navLinkClass,
+      href: link.reference
+    }, link.name));
+  })))), showSearch && /*#__PURE__*/React.createElement(_Search.default, {
+    className: "hidden sm:inline-flex pl-4 pt-8 absolute inset-y-0 h-8 right-16 flex items-center"
+  }), showProfile && /*#__PURE__*/React.createElement(_Profile.default, {
+    profileLinks: profileLinks
+  }))), mobileMenuState && /*#__PURE__*/React.createElement("div", {
+    className: "sm:hidden",
+    id: "mobile-menu"
+  }, showProfile && /*#__PURE__*/React.createElement("img", {
+    className: "ml-3 h-8 w-8 rounded-full",
+    src: "user.jpeg",
+    alt: ""
+  }), showSearch && /*#__PURE__*/React.createElement(_Search.default, {
+    className: "flex flex-1 ml-4"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "px-2 pt-2 pb-3 space-y-1"
+  }, links && links.map(link => {
+    return /*#__PURE__*/React.createElement("a", {
+      key: link.name,
+      href: link.reference,
+      className: "text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium",
+      "aria-current": "page"
+    }, link.name);
+  }), showProfile && profileLinks && profileLinks.map(link => {
+    return /*#__PURE__*/React.createElement("a", {
+      key: link.name,
+      href: link.reference,
+      className: "text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium",
+      role: "menuitem",
+      tabindex: "-1",
+      id: "user-menu-item-0"
+    }, link.name);
+  }))));
+};
+
+var _default = Header;
+exports.default = _default;

package/dist/Components/Profile.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = require("react");
+
+const Profile = _ref => {
+  let {
+    profileLinks
+  } = _ref;
+  const [profileState, setProfileState] = (0, _react.useState)(false);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "hidden sm:inline-flex pt-8 absolute inset-y-0 h-8 right-4 flex items-center"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => setProfileState(!profileState),
+    type: "button",
+    className: "bg-gray-800 flex rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "h-10 w-10 rounded-full",
+    src: "user.jpeg",
+    alt: ""
+  }))), profileState && /*#__PURE__*/React.createElement("div", {
+    className: "w-48 right-4 absolute rounded-md shadow-lg bg-white"
+  }, profileLinks && profileLinks.map((link, i) => {
+    return /*#__PURE__*/React.createElement("a", {
+      href: link.reference,
+      className: "block px-4 py-2 text-sm text-gray-700",
+      role: "menuitem",
+      tabindex: "-1",
+      id: "user-menu-item-" + i
+    }, link.name);
+  })));
+};
+
+var _default = Profile;
+exports.default = _default;

package/dist/Components/Search.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Icon = _interopRequireDefault(require("./Icon/Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Search = _ref => {
+  let {
+    className,
+    onChange: _onChange,
+    placeholder,
+    text,
+    leftIcon
+  } = _ref;
+  let classes = className + ' flex';
+  let iconLeft = /*#__PURE__*/React.createElement(_Icon.default, {
+    type: leftIcon
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: "search",
+    className: classes
+  }, text && /*#__PURE__*/React.createElement("h2", null, text), /*#__PURE__*/React.createElement("label", {
+    className: "relative block"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Search"), /*#__PURE__*/React.createElement("span", {
+    className: "absolute inset-y-0 left-5 flex items-center pl-2"
+  }, leftIcon && iconLeft), /*#__PURE__*/React.createElement("input", {
+    className: "ml-4 pr-32 border-2 border-gray-300 h-10 px-5 placeholder:italic placeholder:text-gray-400 rounded-md py-2 pl-9 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1",
+    onChange: e => _onChange(e.target.value),
+    placeholder: placeholder,
+    type: "text",
+    name: "search"
+  })));
+};
+
+var _default = Search;
+exports.default = _default;

package/dist/Components/SignedInLinks.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const LinksList = _ref => {
+  let {
+    links
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "container flex"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "list-none mx-auto flex flex-1"
+  }, links && links.map(link => {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "flex px-4"
+    }, /*#__PURE__*/React.createElement("a", {
+      className: "flex-1",
+      href: link.url
+    }, link.name));
+  })));
+};
+
+var _default = LinksList;
+exports.default = _default;

package/dist/Components/SignedOutLinks.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+const SignedInLinks = _ref => {
+  let {
+    links
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "container mx-auto px-4 flex"
+  }, links && links.map(link => {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "flex-1"
+    }, link);
+  }));
+};
+
+var _default = SignedInLinks;
+exports.default = _default;

package/dist/index.css

@@ -0,0 +1,67 @@
+@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: 17px solid transparent;
+    border-left: 15px solid theme('colors.brand-border');
+    @apply absolute;
+    right: -15px;
+    @apply top-0;
+}
+
+.let-arrow {
+    @apply w-0;
+    @apply h-0;
+    border-top: 17px solid transparent;
+    border-bottom: 17px solid transparent;
+    border-left: 17px solid theme('colors.white');
+    @apply absolute;
+    left: 0px;
+    @apply top-0;
+}
+
+.test-arrow {
+    @apply w-0;
+    @apply h-0;
+    border-top: 17px solid transparent;
+    border-bottom: 17px solid transparent;
+    border-left: 15px solid theme('colors.brand-border');
+    @apply absolute;
+    left: -8px;
+    bottom: -11px;
+    transform: rotate(48deg);
+}
+
+.test-arrow-top {
+    @apply w-0;
+    @apply h-0;
+    border-top: 15px solid theme('colors.brand-border');
+    border-bottom: 17px solid transparent;
+    border-left: 17px solid transparent;
+    @apply absolute;
+    left: -17px;
+    top: 0px;
+}
+
+.voucherCode__btn {
+    @apply relative;
+}
+
+.voucherCode__btn:hover .right-arrow {
+    border-left-color: theme('colors.brand-primary');
+}
+.voucherCode__btn:hover .test-arrow {
+    border-left-color: theme('colors.brand-primary');
+}
+.voucherCode__btn:hover .test-arrow-top {
+    border-top-color: theme('colors.brand-primary');
+}
+
+.voucherCode__code:focus {
+    @apply border-0;
+}

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("./index.css");
+
+var components = _interopRequireWildcard(require("./Components"));
+
+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; }
+
+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; }
+
+module.exports = _objectSpread({}, components);