@ably/ui 11.7.1-dev.a87b30a → 11.7.1-dev.d409fff

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 (22) hide show
  1. package/core/FeaturedLink/component.css +0 -15
  2. package/core/FeaturedLink/component.js +1 -1
  3. package/core/FeaturedLink.jsx +17 -6
  4. package/core/Meganav.jsx +17 -6
  5. package/core/MeganavBlogPostsList.jsx +17 -6
  6. package/core/MeganavContentCompany.jsx +17 -6
  7. package/core/MeganavContentProducts.jsx +17 -6
  8. package/core/MeganavItemsMobile.jsx +17 -6
  9. package/core/MeganavItemsSignedIn.jsx +17 -6
  10. package/core/MeganavSearch.jsx +17 -6
  11. package/core/MeganavSearchPanel.jsx +17 -6
  12. package/core/MeganavSearchSuggestions.jsx +17 -6
  13. package/core/Uptime.jsx +17 -6
  14. package/core/styles.css +4 -0
  15. package/package.json +1 -1
  16. package/src/core/FeaturedLink/component.html.erb +14 -5
  17. package/src/core/FeaturedLink/component.js +0 -1
  18. package/src/core/FeaturedLink/component.jsx +27 -4
  19. package/src/core/FeaturedLink/component.rb +3 -1
  20. package/src/core/styles/text.css +4 -0
  21. package/tailwind.config.js +1 -0
  22. package/src/core/FeaturedLink/component.css +0 -15
package/core/FeaturedLink/component.css CHANGED
@@ -1,16 +1 @@
1
- @layer components {
2
- .ui-featured-link {
3
- @apply font-sans font-bold block;
4
- @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
- }
6
-
7
- .ui-featured-link:hover svg {
8
- @apply left-0;
9
- }
10
-
11
- .ui-featured-link-icon {
12
- transition: left 100ms ease-in-out;
13
- @apply align-middle ml-8 relative -top-1 -left-4;
14
- }
15
- }
16
1
 
package/core/FeaturedLink/component.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=t())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
1
+ !function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=o())}(this,(()=>({}.default)));
package/core/FeaturedLink.jsx CHANGED
@@ -165,24 +165,33 @@ __webpack_require__.r(__webpack_exports__);
165
165
  var FeaturedLink = function FeaturedLink(_ref) {
166
166
  var url = _ref.url,
167
167
  _ref$textSize = _ref.textSize,
168
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
168
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
169
169
  _ref$iconColor = _ref.iconColor,
170
170
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
171
171
  _ref$flush = _ref.flush,
172
172
  flush = _ref$flush === void 0 ? false : _ref$flush,
173
+ _ref$reverse = _ref.reverse,
174
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
175
+ _ref$additionalCSS = _ref.additionalCSS,
176
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
173
177
  children = _ref.children;
174
178
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
175
179
  href: url,
176
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
180
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
177
181
  style: {
178
182
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
179
183
  }
180
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
184
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
181
185
  name: "icon-gui-link-arrow",
182
186
  size: "calc(var(--featured-link-icon-size) * 1.25)",
183
187
  color: iconColor,
184
- additionalCSS: "ui-featured-link-icon"
185
- }));
188
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
189
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
190
+ name: "icon-gui-link-arrow",
191
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
192
+ color: iconColor,
193
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
194
+ })));
186
195
  };
187
196
 
188
197
  FeaturedLink.propTypes = {
@@ -190,7 +199,9 @@ FeaturedLink.propTypes = {
190
199
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
191
200
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
192
201
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
193
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
202
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
203
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
204
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
194
205
  };
195
206
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
196
207
  })();
package/core/Meganav.jsx CHANGED
@@ -111,24 +111,33 @@ var ConnectStateWrapper = function ConnectStateWrapper(Component, selectors) {
111
111
  var FeaturedLink = function FeaturedLink(_ref) {
112
112
  var url = _ref.url,
113
113
  _ref$textSize = _ref.textSize,
114
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
114
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
115
115
  _ref$iconColor = _ref.iconColor,
116
116
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
117
117
  _ref$flush = _ref.flush,
118
118
  flush = _ref$flush === void 0 ? false : _ref$flush,
119
+ _ref$reverse = _ref.reverse,
120
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
121
+ _ref$additionalCSS = _ref.additionalCSS,
122
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
119
123
  children = _ref.children;
120
124
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
121
125
  href: url,
122
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
126
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
123
127
  style: {
124
128
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
125
129
  }
126
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
130
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
127
131
  name: "icon-gui-link-arrow",
128
132
  size: "calc(var(--featured-link-icon-size) * 1.25)",
129
133
  color: iconColor,
130
- additionalCSS: "ui-featured-link-icon"
131
- }));
134
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
135
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
136
+ name: "icon-gui-link-arrow",
137
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
138
+ color: iconColor,
139
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
140
+ })));
132
141
  };
133
142
 
134
143
  FeaturedLink.propTypes = {
@@ -136,7 +145,9 @@ FeaturedLink.propTypes = {
136
145
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
137
146
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
138
147
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
139
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
148
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
149
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
150
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
140
151
  };
141
152
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
142
153
 
package/core/MeganavBlogPostsList.jsx CHANGED
@@ -30,24 +30,33 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
package/core/MeganavContentCompany.jsx CHANGED
@@ -111,24 +111,33 @@ var ConnectStateWrapper = function ConnectStateWrapper(Component, selectors) {
111
111
  var FeaturedLink = function FeaturedLink(_ref) {
112
112
  var url = _ref.url,
113
113
  _ref$textSize = _ref.textSize,
114
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
114
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
115
115
  _ref$iconColor = _ref.iconColor,
116
116
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
117
117
  _ref$flush = _ref.flush,
118
118
  flush = _ref$flush === void 0 ? false : _ref$flush,
119
+ _ref$reverse = _ref.reverse,
120
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
121
+ _ref$additionalCSS = _ref.additionalCSS,
122
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
119
123
  children = _ref.children;
120
124
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
121
125
  href: url,
122
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
126
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
123
127
  style: {
124
128
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
125
129
  }
126
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
130
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
127
131
  name: "icon-gui-link-arrow",
128
132
  size: "calc(var(--featured-link-icon-size) * 1.25)",
129
133
  color: iconColor,
130
- additionalCSS: "ui-featured-link-icon"
131
- }));
134
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
135
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
136
+ name: "icon-gui-link-arrow",
137
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
138
+ color: iconColor,
139
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
140
+ })));
132
141
  };
133
142
 
134
143
  FeaturedLink.propTypes = {
@@ -136,7 +145,9 @@ FeaturedLink.propTypes = {
136
145
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
137
146
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
138
147
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
139
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
148
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
149
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
150
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
140
151
  };
141
152
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
142
153
 
package/core/MeganavContentProducts.jsx CHANGED
@@ -30,24 +30,33 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
package/core/MeganavItemsMobile.jsx CHANGED
@@ -30,24 +30,33 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
package/core/MeganavItemsSignedIn.jsx CHANGED
@@ -30,24 +30,33 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
package/core/MeganavSearch.jsx CHANGED
@@ -30,24 +30,33 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
package/core/MeganavSearchPanel.jsx CHANGED
@@ -30,24 +30,33 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
package/core/MeganavSearchSuggestions.jsx CHANGED
@@ -30,24 +30,33 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
package/core/Uptime.jsx CHANGED
@@ -30,24 +30,33 @@ return /******/ (() => { // webpackBootstrap
30
30
  var FeaturedLink = function FeaturedLink(_ref) {
31
31
  var url = _ref.url,
32
32
  _ref$textSize = _ref.textSize,
33
- textSize = _ref$textSize === void 0 ? "text-menu3" : _ref$textSize,
33
+ textSize = _ref$textSize === void 0 ? "text-p2" : _ref$textSize,
34
34
  _ref$iconColor = _ref.iconColor,
35
35
  iconColor = _ref$iconColor === void 0 ? "text-cool-black" : _ref$iconColor,
36
36
  _ref$flush = _ref.flush,
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
+ _ref$reverse = _ref.reverse,
39
+ reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
38
42
  children = _ref.children;
39
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
44
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
45
+ className: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ".concat(textSize, " ").concat(flush ? "" : "py-8", " ").concat(additionalCSS),
42
46
  style: {
43
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
48
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
49
+ }, reverse ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
46
50
  name: "icon-gui-link-arrow",
47
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
52
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
54
+ }), children) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
55
+ name: "icon-gui-link-arrow",
56
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
57
+ color: iconColor,
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
59
+ })));
51
60
  };
52
61
 
53
62
  FeaturedLink.propTypes = {
@@ -55,7 +64,9 @@ FeaturedLink.propTypes = {
55
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
56
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
57
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
58
- flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool)
67
+ flush: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
68
+ reverse: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool),
69
+ additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
59
70
  };
60
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
61
72
 
package/core/styles.css CHANGED
@@ -607,6 +607,10 @@
607
607
  @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
608
608
  @apply underline;
609
609
  }
610
+
611
+ .ui-figcaption {
612
+ @apply font-mono text-p3 text-neutral-800;
613
+ }
610
614
  }
611
615
  @layer components {
612
616
  .ui-checkbox-p1 {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "11.7.1-dev.a87b30a",
3
+ "version": "11.7.1-dev.d409fff",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/core/FeaturedLink/component.html.erb CHANGED
@@ -1,6 +1,15 @@
1
- <%= link_to(@url, class: "ui-featured-link #{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
2
- <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
3
- size: "calc(var(--featured-link-icon-size) * 1.25)",
4
- color: @icon_color,
5
- additional_css: "ui-featured-link-icon")) %>
1
+ <%= link_to(@url, class: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group #{@text_size} #{@flush ? '' : 'py-8'} #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
2
+ <% if @reverse %>
3
+ <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
4
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
5
+ color: @icon_color,
6
+ additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
7
+ <%= content -%>
8
+ <% else %>
9
+ <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
10
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
11
+ color: @icon_color,
12
+ additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
13
+ <% end %>
14
+
6
15
  <% end %>
package/src/core/FeaturedLink/component.js CHANGED
@@ -1 +0,0 @@
1
- import "./component.css";
package/src/core/FeaturedLink/component.jsx CHANGED
@@ -3,14 +3,35 @@ import T from "prop-types";
3
3
 
4
4
  import Icon from "../Icon/component.jsx";
5
5
 
6
- const FeaturedLink = ({ url, textSize = "text-menu3", iconColor = "text-cool-black", flush = false, children }) => (
6
+ const FeaturedLink = ({ url, textSize = "text-p2", iconColor = "text-cool-black", flush = false, reverse = false, additionalCSS = "", children }) => (
7
7
  <a
8
8
  href={url}
9
- className={`ui-featured-link ${textSize} ${flush ? "" : "py-8"} `}
9
+ className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ${textSize} ${
10
+ flush ? "" : "py-8"
11
+ } ${additionalCSS}`}
10
12
  style={{ "--featured-link-icon-size": `var(${textSize.replace("text", "--fs")})` }}
11
13
  >
12
- {children}
13
- <Icon name="icon-gui-link-arrow" size={`calc(var(--featured-link-icon-size) * 1.25)`} color={iconColor} additionalCSS="ui-featured-link-icon" />
14
+ {reverse ? (
15
+ <>
16
+ <Icon
17
+ name="icon-gui-link-arrow"
18
+ size={`calc(var(--featured-link-icon-size) * 1.25)`}
19
+ color={iconColor}
20
+ additionalCSS="align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
21
+ />
22
+ {children}
23
+ </>
24
+ ) : (
25
+ <>
26
+ {children}
27
+ <Icon
28
+ name="icon-gui-link-arrow"
29
+ size={`calc(var(--featured-link-icon-size) * 1.25)`}
30
+ color={iconColor}
31
+ additionalCSS="align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
32
+ />
33
+ </>
34
+ )}
14
35
  </a>
15
36
  );
16
37
 
@@ -20,6 +41,8 @@ FeaturedLink.propTypes = {
20
41
  textSize: T.string,
21
42
  iconColor: T.string,
22
43
  flush: T.bool,
44
+ reverse: T.bool,
45
+ additionalCSS: T.string,
23
46
  };
24
47
 
25
48
  export default FeaturedLink;
package/src/core/FeaturedLink/component.rb CHANGED
@@ -3,15 +3,17 @@ module AblyUi
3
3
  class FeaturedLink < ViewComponent::Base
4
4
  def initialize(
5
5
  url:,
6
- text_size: 'text-menu3',
6
+ text_size: 'text-p2',
7
7
  icon_color: 'text-cool-black',
8
8
  flush: false,
9
+ reverse: false,
9
10
  additional_css: ''
10
11
  )
11
12
  @url = url
12
13
  @text_size = text_size
13
14
  @icon_color = icon_color
14
15
  @flush = flush
16
+ @reverse = reverse
15
17
  @additional_css = additional_css
16
18
  end
17
19
  end
package/src/core/styles/text.css CHANGED
@@ -177,4 +177,8 @@
177
177
  @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
178
178
  @apply underline;
179
179
  }
180
+
181
+ .ui-figcaption {
182
+ @apply font-mono text-p3 text-neutral-800;
183
+ }
180
184
  }
package/tailwind.config.js CHANGED
@@ -353,6 +353,7 @@ module.exports = {
353
353
  backgroundImage: ["hover", "active", "focus"],
354
354
  filter: ["hover"],
355
355
  cursor: ["disabled"],
356
+ inset: ["group-hover"],
356
357
  },
357
358
  },
358
359
  corePlugins: {
package/src/core/FeaturedLink/component.css DELETED
@@ -1,15 +0,0 @@
1
- @layer components {
2
- .ui-featured-link {
3
- @apply font-sans font-bold block;
4
- @apply text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
- }
6
-
7
- .ui-featured-link:hover svg {
8
- @apply left-0;
9
- }
10
-
11
- .ui-featured-link-icon {
12
- transition: left 100ms ease-in-out;
13
- @apply align-middle ml-8 relative -top-1 -left-4;
14
- }
15
- }