trepur_components 0.1.24 → 0.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.js +17 -4
  2. package/dist/components/BreadcrumbsBordered/index.js +29 -36
  3. package/dist/components/BreadcrumbsBorderedItem/BreadcrumbsBorderedItem.stories.js +57 -0
  4. package/dist/components/BreadcrumbsBorderedItem/README.md +28 -0
  5. package/dist/components/{BreadcrumbsBordered → BreadcrumbsBorderedItem}/index.css +8 -8
  6. package/dist/components/BreadcrumbsBorderedItem/index.js +158 -0
  7. package/dist/components/CardImageLink/index.js +1 -1
  8. package/dist/components/Jumbotron/index.js +1 -1
  9. package/dist/components/Nav/Nav.stories.js +96 -17
  10. package/dist/components/Nav/README.md +20 -0
  11. package/dist/components/Nav/index.js +130 -50
  12. package/dist/components/NavItem/NavItem.stories.js +150 -0
  13. package/dist/components/NavItem/README.md +36 -0
  14. package/dist/components/NavItem/index.js +77 -0
  15. package/dist/components/Profile/index.js +3 -2
  16. package/dist/index.js +58 -109
  17. package/package.json +1 -1
  18. package/dist/components/index.js +0 -16
package/dist/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports._BreadcrumbsBordered = exports.WithOnlyOneLink = void 0;
6
+ exports.default = exports._BreadcrumbsBordered = exports.WithOnlyOneLink = exports.WithColors = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
@@ -11,8 +11,6 @@ var _README = _interopRequireDefault(require("./README.md"));
11
11
 
12
12
  var _index = _interopRequireDefault(require("./index"));
13
13
 
14
- require("./index.css");
15
-
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
15
 
18
16
  const links = [{
@@ -45,12 +43,27 @@ exports.default = _default;
45
43
 
46
44
  const _BreadcrumbsBordered = args => {
47
45
  return /*#__PURE__*/_react.default.createElement(_index.default, {
48
- links: links
46
+ links: links,
47
+ textColor: "white"
49
48
  });
50
49
  };
51
50
 
52
51
  exports._BreadcrumbsBordered = _BreadcrumbsBordered;
53
52
 
53
+ const WithColors = args => {
54
+ return /*#__PURE__*/_react.default.createElement(_index.default, {
55
+ links: links,
56
+ bgColor: "#38B6FF",
57
+ borderColor: "white",
58
+ textColor: "white",
59
+ hoverTextColor: "#38B6FF",
60
+ hoverBgColor: "white",
61
+ hoverBorderColor: "#38B6FF"
62
+ });
63
+ };
64
+
65
+ exports.WithColors = WithColors;
66
+
54
67
  const WithOnlyOneLink = args => {
55
68
  return /*#__PURE__*/_react.default.createElement(_index.default, {
56
69
  links: link
package/dist/components/BreadcrumbsBordered/index.js CHANGED
@@ -7,54 +7,47 @@ exports.default = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
10
- require("./index.css");
10
+ var _index = _interopRequireDefault(require("../BreadcrumbsBorderedItem/index"));
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
 
14
14
  const Breadcrumbs = _ref => {
15
15
  let {
16
16
  className,
17
- links
17
+ links,
18
+ textColor,
19
+ bgColor,
20
+ borderColor,
21
+ hoverTextColor,
22
+ hoverBgColor,
23
+ hoverBorderColor
18
24
  } = _ref;
19
25
  const linksLength = Object.keys(links).length;
20
26
  let classes = 'flex py-2 px-8 ' + className;
21
27
  return /*#__PURE__*/_react.default.createElement("ul", {
22
28
  className: classes
23
29
  }, links && links.map((link, i) => {
24
- return /*#__PURE__*/_react.default.createElement("div", {
25
- key: link.name,
26
- className: "item"
27
- }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("div", {
28
- className: " bc-item px-4 mx-3 hover:bg-brand-secondary bg-brand-border border-brand-secondary h-8"
29
- }, linksLength !== 1 ? i + 1 < linksLength ? i === 0 ? /*#__PURE__*/_react.default.createElement("a", {
30
- href: link.link
31
- }, /*#__PURE__*/_react.default.createElement("p", {
32
- className: i !== 0 ? 'pl-2 pt-1 text-social-facebook hover:underline' : 'pt-1 hover:underline'
33
- }, link.name, /*#__PURE__*/_react.default.createElement("span", {
34
- className: "right-arrow"
35
- }))) : /*#__PURE__*/_react.default.createElement("a", {
36
- href: link.link
37
- }, /*#__PURE__*/_react.default.createElement("p", {
38
- className: i !== 0 ? 'pl-2 pt-1 hover:underline' : 'pt-1 text-social-facebook hover:underline'
39
- }, /*#__PURE__*/_react.default.createElement("span", {
40
- className: "test-arrow-bottom"
41
- }), /*#__PURE__*/_react.default.createElement("span", {
42
- className: "test-arrow-top"
43
- }), link.name, /*#__PURE__*/_react.default.createElement("span", {
44
- className: "right-arrow"
45
- }))) : /*#__PURE__*/_react.default.createElement("p", {
46
- className: "pt-1"
47
- }, /*#__PURE__*/_react.default.createElement("span", {
48
- className: "test-arrow-bottom"
49
- }), /*#__PURE__*/_react.default.createElement("span", {
50
- className: "test-arrow-top"
51
- }), link.name, /*#__PURE__*/_react.default.createElement("span", {
52
- className: "right-arrow"
53
- })) : /*#__PURE__*/_react.default.createElement("p", {
54
- className: "pt-1"
55
- }, link.name, /*#__PURE__*/_react.default.createElement("span", {
56
- className: "right-arrow"
57
- })))));
30
+ let margin = i === 0 ? ' mr-3' : ' mx-3';
31
+ let first = i === 0 ? true : false;
32
+ let bType = 'standard';
33
+
34
+ if (linksLength >= 1 && i + 1 < linksLength) {
35
+ bType = 'link';
36
+ }
37
+
38
+ return /*#__PURE__*/_react.default.createElement(_index.default, {
39
+ classNames: margin,
40
+ name: link.name,
41
+ link: link.link,
42
+ type: bType,
43
+ firstItem: first,
44
+ textColor: textColor,
45
+ bgColor: bgColor,
46
+ borderColor: borderColor,
47
+ hoverTextColor: hoverTextColor,
48
+ hoverBgColor: hoverBgColor,
49
+ hoverBorderColor: hoverBorderColor
50
+ });
58
51
  }));
59
52
  };
60
53
 
package/dist/components/BreadcrumbsBorderedItem/BreadcrumbsBorderedItem.stories.js ADDED
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports._BreadcrumbsItem = exports.WithColors = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _README = _interopRequireDefault(require("./README.md"));
11
+
12
+ var _index = _interopRequireDefault(require("./index"));
13
+
14
+ require("./index.css");
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ const link = '/';
19
+ const name = 'link 1';
20
+ var _default = {
21
+ title: 'Components/BreadcrumbsItem',
22
+ argTypes: {},
23
+ decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
24
+ className: "p-4"
25
+ }, story())],
26
+ parameters: {
27
+ readme: {
28
+ sidebar: _README.default
29
+ }
30
+ }
31
+ };
32
+ exports.default = _default;
33
+
34
+ const _BreadcrumbsItem = args => {
35
+ return /*#__PURE__*/_react.default.createElement(_index.default, {
36
+ link: link,
37
+ name: name,
38
+ textColor: "white"
39
+ });
40
+ };
41
+
42
+ exports._BreadcrumbsItem = _BreadcrumbsItem;
43
+
44
+ const WithColors = args => {
45
+ return /*#__PURE__*/_react.default.createElement(_index.default, {
46
+ link: link,
47
+ name: name,
48
+ bgColor: "#38B6FF",
49
+ borderColor: "white",
50
+ textColor: "white",
51
+ hoverTextColor: "#38B6FF",
52
+ hoverBgColor: "white",
53
+ hoverBorderColor: "#38B6FF"
54
+ });
55
+ };
56
+
57
+ exports.WithColors = WithColors;
package/dist/components/BreadcrumbsBorderedItem/README.md ADDED
@@ -0,0 +1,28 @@
1
+ # Breadcrumbs
2
+
3
+ Breadcrumbs with a bit of styling
4
+
5
+ ## Example
6
+
7
+ ```
8
+ const links = [
9
+ {
10
+ link: '/',
11
+ name: 'link 1'
12
+ },
13
+ {
14
+ link: '/',
15
+ name: 'link 2'
16
+ },
17
+ {
18
+ link: '/',
19
+ name: 'Link 3'
20
+ },
21
+ ]
22
+
23
+ <BreadCrumbs links={links} />
24
+ ```
25
+
26
+ ## Parameters
27
+ `links={array} (default=null)`
28
+ `classNames={string} (default=null)`
package/dist/components/{BreadcrumbsBordered → BreadcrumbsBorderedItem}/index.css RENAMED
@@ -8,7 +8,7 @@
8
8
  @apply h-0;
9
9
  border-top: 17px solid transparent;
10
10
  border-bottom: 15px solid transparent;
11
- border-left: 16px solid theme('colors.brand-border');
11
+ border-left: 16px solid ;
12
12
  @apply absolute;
13
13
  right: -16px;
14
14
  @apply top-0;
@@ -17,7 +17,7 @@
17
17
  .test-arrow-bottom {
18
18
  @apply w-0;
19
19
  @apply h-0;
20
- border-top: 17px solid theme('colors.brand-border');
20
+ border-top: 17px solid ;
21
21
  border-bottom: 18px solid transparent;
22
22
  border-left: 17px solid transparent;
23
23
  @apply absolute;
@@ -30,7 +30,7 @@
30
30
  .test-arrow-top {
31
31
  @apply w-0;
32
32
  @apply h-0;
33
- border-top: 18px solid theme('colors.brand-border');
33
+ border-top: 18px solid ;
34
34
  border-bottom: 17px solid transparent;
35
35
  border-left: 17px solid transparent;
36
36
  @apply absolute;
@@ -42,15 +42,15 @@
42
42
  @apply relative;
43
43
  }
44
44
 
45
- .item:hover .right-arrow {
46
- border-left-color: theme('colors.brand-secondary');
45
+ /* .item:hover .right-arrow {
46
+ border-left-color: theme('colors.white');
47
47
  }
48
48
  .item:hover .test-arrow-bottom {
49
- border-top-color: theme('colors.brand-secondary');
49
+ border-top-color: theme('colors.white');
50
50
  }
51
51
  .item:hover .test-arrow-top {
52
- border-top-color: theme('colors.brand-secondary');
53
- }
52
+ border-top-color: theme('colors.white');
53
+ } */
54
54
 
55
55
  .bc-item:focus {
56
56
  @apply border-0;
package/dist/components/BreadcrumbsBorderedItem/index.js ADDED
@@ -0,0 +1,158 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ require("core-js/modules/web.dom-collections.iterator.js");
9
+
10
+ var _react = _interopRequireWildcard(require("react"));
11
+
12
+ require("./index.css");
13
+
14
+ 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); }
15
+
16
+ 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; }
17
+
18
+ const BreadcrumbsItem = _ref => {
19
+ let {
20
+ classNames,
21
+ name,
22
+ link,
23
+ type,
24
+ firstItem,
25
+ textColor,
26
+ bgColor,
27
+ borderColor,
28
+ hoverTextColor,
29
+ hoverBgColor,
30
+ hoverBorderColor
31
+ } = _ref;
32
+ //---------- Styling ---------------
33
+ const [styles, setStyles] = (0, _react.useState)({
34
+ 'background-color': bgColor ? bgColor : 'gray',
35
+ color: textColor ? textColor : 'black',
36
+ 'borderColor': borderColor ? borderColor : 'white'
37
+ });
38
+ const [hoverStyles, setHoverStyles] = (0, _react.useState)({
39
+ 'background-color': 'transparent',
40
+ 'border-left-color': bgColor ? bgColor : 'gray'
41
+ });
42
+ const [hoverStylesBackArrows, setHoverStylesBackArrows] = (0, _react.useState)({
43
+ 'background-color': 'transparent',
44
+ 'color': bgColor ? bgColor : 'gray',
45
+ 'border-left-color': 'transparent'
46
+ });
47
+
48
+ const setHoverState = isHovering => {
49
+ if (isHovering) {
50
+ setStyles({
51
+ 'background-color': hoverBgColor ? hoverBgColor : 'black',
52
+ color: hoverTextColor ? hoverTextColor : 'white',
53
+ 'borderColor': hoverBorderColor ? hoverBorderColor : 'white'
54
+ });
55
+ setHoverStyles({
56
+ 'background-color': 'transparent',
57
+ 'border-left-color': hoverBgColor ? hoverBgColor : 'black'
58
+ });
59
+ setHoverStylesBackArrows({
60
+ 'background-color': 'transparent',
61
+ 'color': hoverBgColor ? hoverBgColor : 'black',
62
+ 'border-left-color': 'transparent'
63
+ });
64
+ } else {
65
+ setStyles({
66
+ 'background-color': bgColor ? bgColor : 'grey',
67
+ color: textColor ? textColor : 'black',
68
+ 'border-color': borderColor ? borderColor : 'white'
69
+ });
70
+ setHoverStyles({
71
+ 'background-color': 'transparent',
72
+ 'border-left-color': bgColor ? bgColor : 'gray'
73
+ });
74
+ setHoverStylesBackArrows({
75
+ 'background-color': 'transparent',
76
+ 'color': bgColor ? bgColor : 'gray',
77
+ 'border-left-color': 'transparent'
78
+ });
79
+ }
80
+ }; //-----------------------------------
81
+
82
+
83
+ return /*#__PURE__*/_react.default.createElement("div", {
84
+ key: name,
85
+ className: "item"
86
+ }, type === 'link' ? firstItem ? /*#__PURE__*/_react.default.createElement("a", {
87
+ onMouseOver: () => setHoverState(true),
88
+ onMouseOut: () => setHoverState(false),
89
+ style: styles,
90
+ href: link,
91
+ className: "hover:underline"
92
+ }, /*#__PURE__*/_react.default.createElement("li", {
93
+ className: "list-none"
94
+ }, /*#__PURE__*/_react.default.createElement("div", {
95
+ style: styles,
96
+ className: 'bc-item px-4 h-8 ' + classNames
97
+ }, /*#__PURE__*/_react.default.createElement("p", {
98
+ className: !firstItem ? 'text-center pt-1' : 'text-center pt-1'
99
+ }, name, /*#__PURE__*/_react.default.createElement("span", {
100
+ style: hoverStyles,
101
+ className: "right-arrow"
102
+ }))))) : /*#__PURE__*/_react.default.createElement("a", {
103
+ onMouseOver: () => setHoverState(true),
104
+ onMouseOut: () => setHoverState(false),
105
+ style: styles,
106
+ href: link,
107
+ className: "hover:underline"
108
+ }, /*#__PURE__*/_react.default.createElement("li", {
109
+ className: "list-none"
110
+ }, /*#__PURE__*/_react.default.createElement("div", {
111
+ style: styles,
112
+ className: 'bc-item px-4 h-8 ' + classNames
113
+ }, /*#__PURE__*/_react.default.createElement("p", {
114
+ className: !firstItem ? 'text-center pt-1' : 'text-center pt-1'
115
+ }, /*#__PURE__*/_react.default.createElement("span", {
116
+ style: hoverStylesBackArrows,
117
+ className: "test-arrow-bottom"
118
+ }), /*#__PURE__*/_react.default.createElement("span", {
119
+ style: hoverStylesBackArrows,
120
+ className: "test-arrow-top"
121
+ }), name, /*#__PURE__*/_react.default.createElement("span", {
122
+ style: hoverStyles,
123
+ className: "right-arrow"
124
+ }))))) : firstItem ? /*#__PURE__*/_react.default.createElement("li", {
125
+ className: "list-none"
126
+ }, /*#__PURE__*/_react.default.createElement("div", {
127
+ style: styles,
128
+ onMouseOver: () => setHoverState(true),
129
+ onMouseOut: () => setHoverState(false),
130
+ className: 'bc-item px-4 h-8 ' + classNames
131
+ }, /*#__PURE__*/_react.default.createElement("p", {
132
+ className: "text-center pt-1"
133
+ }, name, /*#__PURE__*/_react.default.createElement("span", {
134
+ style: hoverStyles,
135
+ className: "right-arrow"
136
+ })))) : /*#__PURE__*/_react.default.createElement("li", {
137
+ className: "list-none"
138
+ }, /*#__PURE__*/_react.default.createElement("div", {
139
+ style: styles,
140
+ onMouseOver: () => setHoverState(true),
141
+ onMouseOut: () => setHoverState(false),
142
+ className: 'bc-item px-4 h-8 ' + classNames
143
+ }, /*#__PURE__*/_react.default.createElement("p", {
144
+ className: "text-center pt-1"
145
+ }, /*#__PURE__*/_react.default.createElement("span", {
146
+ style: hoverStylesBackArrows,
147
+ className: "test-arrow-bottom"
148
+ }), /*#__PURE__*/_react.default.createElement("span", {
149
+ style: hoverStylesBackArrows,
150
+ className: "test-arrow-top"
151
+ }), name, /*#__PURE__*/_react.default.createElement("span", {
152
+ style: hoverStyles,
153
+ className: "right-arrow"
154
+ })))));
155
+ };
156
+
157
+ var _default = BreadcrumbsItem;
158
+ exports.default = _default;
package/dist/components/CardImageLink/index.js CHANGED
@@ -31,7 +31,7 @@ const CardImageLink = _ref => {
31
31
  alt: altText,
32
32
  className: "object-cover w-full h-full"
33
33
  }), /*#__PURE__*/_react.default.createElement("div", {
34
- className: "absolute top-10 lg:top-20 w-full"
34
+ className: "absolute top-10 lg:top-20 "
35
35
  }, /*#__PURE__*/_react.default.createElement("h1", {
36
36
  className: "text-white text-2xl"
37
37
  }, title), /*#__PURE__*/_react.default.createElement("div", {
package/dist/components/Jumbotron/index.js CHANGED
@@ -27,7 +27,7 @@ const Jumbotron = _ref => {
27
27
  src: image,
28
28
  alt: altText
29
29
  }), /*#__PURE__*/_react.default.createElement("div", {
30
- className: "absolute top-10 lg:top-20 w-full"
30
+ className: "absolute top-10 lg:top-20"
31
31
  }, /*#__PURE__*/_react.default.createElement("h1", {
32
32
  className: "text-white text-4xl"
33
33
  }, text), /*#__PURE__*/_react.default.createElement("div", {
package/dist/components/Nav/Nav.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports._Nav = exports.NavWithSearchAndProfile = exports.NavWithSearch = exports.NavWithProfile = exports.NavAligned = void 0;
6
+ exports.default = exports._NavWithColors = exports._Nav = exports.NavWithSearchAndProfile = exports.NavWithSearch = exports.NavWithProfile = exports.NavAlignedWithSearchAndProfile = exports.NavAlignedWithSearch = exports.NavAlignedWithProfile = exports.NavAligned = void 0;
7
7
 
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
 
@@ -35,9 +35,7 @@ const links = [{
35
35
  var _default = {
36
36
  title: 'Components/Nav',
37
37
  argTypes: {},
38
- decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
39
- className: "p-4"
40
- }, story())],
38
+ decorators: [story => /*#__PURE__*/_react.default.createElement("div", null, story())],
41
39
  parameters: {
42
40
  readme: {
43
41
  sidebar: _README.default
@@ -50,20 +48,52 @@ const _Nav = args => {
50
48
  return /*#__PURE__*/_react.default.createElement(_index.default, {
51
49
  links: links,
52
50
  navPosition: "1",
53
- navClass: "bg-brand-primary pb-4 pt-2",
54
- navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
55
- logoClass: "py-4",
56
- logoImage: _logoWhite.default
51
+ logoImage: _logoWhite.default,
52
+ icon: _user.default,
53
+ navItemRounded: false
57
54
  });
58
55
  };
59
56
 
60
57
  exports._Nav = _Nav;
61
58
 
59
+ const _NavWithColors = args => {
60
+ return /*#__PURE__*/_react.default.createElement(_index.default, {
61
+ links: links,
62
+ navPosition: "1" //center
63
+ ,
64
+ logoImage: _logoWhite.default,
65
+ icon: _user.default,
66
+ navItemBorderColor: "white",
67
+ navItemTextColor: "white",
68
+ navItemBgColor: "#38B6FF",
69
+ hoverNavItemBorderColor: "#38B6FF",
70
+ hoverNavItemTextColor: "#38B6FF",
71
+ hoverNavItemBgColor: "white",
72
+ bgColor: "#38B6FF",
73
+ navItemBordered: true,
74
+ navItemRounded: true,
75
+ showProfile: false,
76
+ showSearch: false,
77
+ alignNavAndLogo: false,
78
+ navItemLinkClassNames: "py-1",
79
+ mobileNavItemBordered: false,
80
+ mobileNavItemRounded: true,
81
+ mobileNavItemLinkClassNames: "",
82
+ mobileNavItemClassNames: "",
83
+ mobileNavButtonBgColor: "#38B6FF",
84
+ mobileNavButtonColor: "white",
85
+ hoverMobileNavButtonBgColor: "white",
86
+ hoverMobileNavButtonColor: "#38B6FF"
87
+ });
88
+ };
89
+
90
+ exports._NavWithColors = _NavWithColors;
91
+
62
92
  const NavWithSearch = () => {
63
93
  return /*#__PURE__*/_react.default.createElement(_index.default, {
64
94
  links: links,
65
95
  navPosition: "1",
66
- navClass: "bg-brand-primary pb-4 pt-2",
96
+ navClass: "bg-brand-primary",
67
97
  navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
68
98
  logoClass: "py-4",
69
99
  showSearch: true,
@@ -77,7 +107,7 @@ const NavWithProfile = () => {
77
107
  return /*#__PURE__*/_react.default.createElement(_index.default, {
78
108
  links: links,
79
109
  navPosition: "1",
80
- navClass: "bg-brand-primary pb-4 pt-2",
110
+ navClass: "bg-brand-primary",
81
111
  navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
82
112
  logoClass: "py-4",
83
113
  showProfile: true,
@@ -92,12 +122,13 @@ const NavWithSearchAndProfile = () => {
92
122
  return /*#__PURE__*/_react.default.createElement(_index.default, {
93
123
  links: links,
94
124
  navPosition: "1",
95
- navClass: "bg-brand-primary pb-4 pt-2",
125
+ navClass: "bg-brand-primary",
96
126
  navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
97
127
  logoClass: "py-4",
98
128
  showProfile: true,
99
129
  showSearch: true,
100
- logoImage: _logoWhite.default
130
+ logoImage: _logoWhite.default,
131
+ icon: _user.default
101
132
  });
102
133
  };
103
134
 
@@ -107,12 +138,60 @@ const NavAligned = () => {
107
138
  return /*#__PURE__*/_react.default.createElement(_index.default, {
108
139
  links: links,
109
140
  navPosition: "1",
110
- navClass: "bg-brand-primary pb-4 pt-2",
111
- navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
112
- logoClass: "py-4",
141
+ navClass: "bg-brand-primary",
142
+ navLinkClass: "hover:text-white hover:bg-black",
113
143
  alignNavAndLogo: true,
114
- logoImage: _logoWhite.default
144
+ logoImage: _logoWhite.default,
145
+ icon: _user.default
146
+ });
147
+ };
148
+
149
+ exports.NavAligned = NavAligned;
150
+
151
+ const NavAlignedWithSearch = () => {
152
+ return /*#__PURE__*/_react.default.createElement(_index.default, {
153
+ links: links,
154
+ navPosition: "1",
155
+ navClass: "bg-brand-primary",
156
+ navLinkClass: "hover:text-white hover:bg-black",
157
+ alignNavAndLogo: true,
158
+ logoImage: _logoWhite.default,
159
+ icon: _user.default,
160
+ showProfile: false,
161
+ showSearch: true
162
+ });
163
+ };
164
+
165
+ exports.NavAlignedWithSearch = NavAlignedWithSearch;
166
+
167
+ const NavAlignedWithProfile = () => {
168
+ return /*#__PURE__*/_react.default.createElement(_index.default, {
169
+ links: links,
170
+ navPosition: "1",
171
+ navClass: "bg-brand-primary",
172
+ navLinkClass: "hover:text-white hover:bg-black",
173
+ alignNavAndLogo: true,
174
+ logoImage: _logoWhite.default,
175
+ icon: _user.default,
176
+ showProfile: true,
177
+ showSearch: false
178
+ });
179
+ };
180
+
181
+ exports.NavAlignedWithProfile = NavAlignedWithProfile;
182
+
183
+ const NavAlignedWithSearchAndProfile = () => {
184
+ return /*#__PURE__*/_react.default.createElement(_index.default, {
185
+ links: links,
186
+ navPosition: "1",
187
+ navClass: "bg-brand-primary",
188
+ navLinkClass: "hover:text-white hover:bg-black",
189
+ alignNavAndLogo: true,
190
+ logoImage: _logoWhite.default,
191
+ icon: _user.default,
192
+ showProfile: true,
193
+ showSearch: true
115
194
  });
116
195
  };
117
196
 
118
- exports.NavAligned = NavAligned;
197
+ exports.NavAlignedWithSearchAndProfile = NavAlignedWithSearchAndProfile;
package/dist/components/Nav/README.md CHANGED
@@ -23,3 +23,23 @@ A personalisable naviagtion bar, suitable for desktop and mobile
23
23
  `showSearch={boolean} (default=null)`
24
24
  `showProfile={boolean} (default=null)`
25
25
  `icon={string} (default=null)`
26
+ `logoImage={string} (default=null)`
27
+ `navItemBorderColor={string} (default=null)`
28
+ `navItemTextColor={string} (default=null)`
29
+ `navItemBgColor={string} (default=null)`
30
+ `hoverNavItemBorderColor={string} (default=null)`
31
+ `hoverNavItemTextColor={string} (default=null)`
32
+ `hoverNavItemBgColor={string} (default=null)`
33
+ `bgColor={string} (default=null)`
34
+ `navItemBordered={string} (default=null)`
35
+ `navItemRounded={string} (default=null)`
36
+ `navItemClassNames={string} (default=null)`
37
+ `navItemLinkClassNames={string} (default=null)`
38
+ `mobileNavItemBordered={string} (default=null)`
39
+ `mobileNavItemRounded={string} (default=null)`
40
+ `mobileNavItemClassNames={string} (default=null)`
41
+ `mobileNavItemLinkClassNames={string} (default=null)`
42
+ `mobileNavButtonBgColor={string} (default=null)`
43
+ `mobileNavButtonColor={string} (default=null)`
44
+ `hoverMobileNavButtonBgColor={string} (default=null)`
45
+ `hoverMobileNavButtonColor={string} (default=null)`