trepur_components 0.1.2 → 0.1.6

package/dist/Components/{Nav.js → Nav/index.js}

@@ -1,33 +1,72 @@
 "use strict";
 
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.define-property.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.function.name.js");
 
 var _react = require("react");
 
-var _Profile = _interopRequireDefault(require("./Profile"));
+var _index = _interopRequireDefault(require("../Profile/index"));
 
-var _Search = _interopRequireDefault(require("./Search"));
+var _index2 = _interopRequireDefault(require("../Search/index"));
 
 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 = [{
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Header = function Header(_ref) {
+  var links = _ref.links,
+      navPosition = _ref.navPosition,
+      alignNavAndLogo = _ref.alignNavAndLogo,
+      navClass = _ref.navClass,
+      navLinkClass = _ref.navLinkClass,
+      logoClass = _ref.logoClass,
+      showSearch = _ref.showSearch,
+      showProfile = _ref.showProfile;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      mobileMenuState = _useState2[0],
+      setmobileMenuState = _useState2[1];
+
+  var profileLinks = [{
     name: 'PROFILE ITEM 1',
     reference: '/'
   }, {
@@ -40,9 +79,9 @@ const Header = _ref => {
     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 ';
+  var combinedLogoClass = logoClass + ' hidden sm:inline-flex flex-1 flex items-center justify-center sm:items-stretch ';
+  var combinedMobileLogoClass = logoClass + ' sm:hidden block flex-1 flex items-center justify-center sm:items-stretch ';
+  var 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';
@@ -74,7 +113,9 @@ const Header = _ref => {
     id: "nav-collapse-btn-wrapper",
     className: "absolute inset-y-0 left-0 flex items-center"
   }, /*#__PURE__*/React.createElement("button", {
-    onClick: () => setmobileMenuState(!mobileMenuState),
+    onClick: function onClick() {
+      return 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",
@@ -123,7 +164,7 @@ const Header = _ref => {
   }, /*#__PURE__*/React.createElement("ul", {
     id: "nav-list",
     className: "list-none mx-auto flex flex-1"
-  }, links && links.map(link => {
+  }, links && links.map(function (link) {
     return /*#__PURE__*/React.createElement("li", {
       key: link.name,
       className: "flex px-4",
@@ -132,9 +173,9 @@ const Header = _ref => {
       className: navLinkClass,
       href: link.reference
     }, link.name));
-  })))), showSearch && /*#__PURE__*/React.createElement(_Search.default, {
+  })))), showSearch && /*#__PURE__*/React.createElement(_index2.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, {
+  }), showProfile && /*#__PURE__*/React.createElement(_index.default, {
     profileLinks: profileLinks
   }))), mobileMenuState && /*#__PURE__*/React.createElement("div", {
     className: "sm:hidden",
@@ -143,18 +184,18 @@ const Header = _ref => {
     className: "ml-3 h-8 w-8 rounded-full",
     src: "user.jpeg",
     alt: ""
-  }), showSearch && /*#__PURE__*/React.createElement(_Search.default, {
+  }), showSearch && /*#__PURE__*/React.createElement(_index2.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 => {
+  }, links && links.map(function (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 => {
+  }), showProfile && profileLinks && profileLinks.map(function (link) {
     return /*#__PURE__*/React.createElement("a", {
       key: link.name,
       href: link.reference,

package/dist/Components/Profile/Profile.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Breadcrumbs = 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 }; }
+
+var links = [{
+  link: '/',
+  name: 'link 1'
+}, {
+  link: '/',
+  name: 'link 2'
+}, {
+  link: '/',
+  name: 'Link 3'
+}];
+var _default = {
+  title: 'Components/Breadcrumbs',
+  argTypes: {},
+  decorators: [function (story) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-4"
+    }, story());
+  }],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+var _Breadcrumbs = function _Breadcrumbs(args) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, null);
+};
+
+exports._Breadcrumbs = _Breadcrumbs;

package/dist/Components/Profile/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.function.name.js");
+
+var _react = require("react");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Profile = function Profile(_ref) {
+  var profileLinks = _ref.profileLinks;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      profileState = _useState2[0],
+      setProfileState = _useState2[1];
+
+  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: function onClick() {
+      return 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(function (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/Search.stories.js

@@ -0,0 +1,76 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Search = exports.SearchWithPlaceholder = exports.SearchWithLabel = exports.SearchWithIcon = exports.SearchWithAll = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../index.css");
+
+var _index3 = _interopRequireDefault(require("../Icon/index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Search',
+  argTypes: {},
+  decorators: [function (story) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-4"
+    }, story());
+  }],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+var _Search = function _Search(args) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, null);
+};
+
+exports._Search = _Search;
+
+var SearchWithPlaceholder = function SearchWithPlaceholder(args) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    placeholder: "Enter some search item"
+  });
+};
+
+exports.SearchWithPlaceholder = SearchWithPlaceholder;
+
+var SearchWithLabel = function SearchWithLabel(args) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    text: "Label"
+  });
+};
+
+exports.SearchWithLabel = SearchWithLabel;
+
+var SearchWithIcon = function SearchWithIcon(args) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    leftIcon: "search"
+  });
+};
+
+exports.SearchWithIcon = SearchWithIcon;
+
+var SearchWithAll = function SearchWithAll(args) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    text: "Label",
+    leftIcon: "search",
+    placeholder: "Enter some search item"
+  });
+};
+
+exports.SearchWithAll = SearchWithAll;

package/dist/Components/{Search.js → Search/index.js}

@@ -1,24 +1,24 @@
 "use strict";
 
+require("core-js/modules/es.object.define-property.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _Icon = _interopRequireDefault(require("./Icon/Icon"));
+var _index = _interopRequireDefault(require("../Icon/index"));
 
 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, {
+var Search = function Search(_ref) {
+  var className = _ref.className,
+      _onChange = _ref.onChange,
+      placeholder = _ref.placeholder,
+      text = _ref.text,
+      leftIcon = _ref.leftIcon;
+  var classes = className + ' flex';
+  var iconLeft = /*#__PURE__*/React.createElement(_index.default, {
     type: leftIcon
   });
   return /*#__PURE__*/React.createElement("div", {
@@ -28,11 +28,13 @@ const Search = _ref => {
     className: "relative block"
   }, /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, "Search"), /*#__PURE__*/React.createElement("span", {
+  }, "Search"), leftIcon && /*#__PURE__*/React.createElement("span", {
     className: "absolute inset-y-0 left-5 flex items-center pl-2"
-  }, leftIcon && iconLeft), /*#__PURE__*/React.createElement("input", {
+  }, 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),
+    onChange: function onChange(e) {
+      return _onChange(e.target.value);
+    },
     placeholder: placeholder,
     type: "text",
     name: "search"

package/dist/Components/SignedInLinks/SignedInLinks.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._SignedInLinks = 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 }; }
+
+var links = [{
+  link: '/',
+  name: 'link 1'
+}, {
+  link: '/',
+  name: 'link 2'
+}, {
+  link: '/',
+  name: 'Link 3'
+}];
+var _default = {
+  title: 'Components/SignedInLinks',
+  argTypes: {},
+  decorators: [function (story) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-4"
+    }, story());
+  }],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+var _SignedInLinks = function _SignedInLinks(args) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links
+  });
+};
+
+exports._SignedInLinks = _SignedInLinks;

package/dist/Components/{SignedInLinks.js → SignedInLinks/index.js}

@@ -1,19 +1,23 @@
 "use strict";
 
+require("core-js/modules/es.object.define-property.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-const LinksList = _ref => {
-  let {
-    links
-  } = _ref;
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.function.name.js");
+
+var LinksList = function LinksList(_ref) {
+  var links = _ref.links;
   return /*#__PURE__*/React.createElement("div", {
     className: "container flex"
   }, /*#__PURE__*/React.createElement("ul", {
     className: "list-none mx-auto flex flex-1"
-  }, links && links.map(link => {
+  }, links && links.map(function (link) {
     return /*#__PURE__*/React.createElement("li", {
       className: "flex px-4"
     }, /*#__PURE__*/React.createElement("a", {

package/dist/Components/SignedOutLinks/SignedOutLinks.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._SignedOutLinks = 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 }; }
+
+var links = [{
+  link: '/',
+  name: 'link 1'
+}, {
+  link: '/',
+  name: 'link 2'
+}, {
+  link: '/',
+  name: 'Link 3'
+}];
+var _default = {
+  title: 'Components/SignedOutLinks',
+  argTypes: {},
+  decorators: [function (story) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "p-4"
+    }, story());
+  }],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+var _SignedOutLinks = function _SignedOutLinks(args) {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links
+  });
+};
+
+exports._SignedOutLinks = _SignedOutLinks;

package/dist/Components/SignedOutLinks/index.js

@@ -0,0 +1,31 @@
+"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.array.map.js");
+
+require("core-js/modules/es.function.name.js");
+
+var SignedInLinks = function SignedInLinks(_ref) {
+  var links = _ref.links;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "container flex"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "list-none mx-auto flex flex-1"
+  }, links && links.map(function (link) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: "flex px-4"
+    }, /*#__PURE__*/React.createElement("a", {
+      className: "flex-1",
+      href: link.url
+    }, link.name));
+  })));
+};
+
+var _default = SignedInLinks;
+exports.default = _default;

package/dist/index.css

@@ -1,67 +1,4 @@
 @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;
-}
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');