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

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/core/FeaturedLink/component.css +1 -10
  2. package/core/FeaturedLink.jsx +12 -5
  3. package/core/Meganav.jsx +12 -5
  4. package/core/MeganavBlogPostsList.jsx +12 -5
  5. package/core/MeganavContentCompany.jsx +12 -5
  6. package/core/MeganavContentProducts.jsx +12 -5
  7. package/core/MeganavItemsMobile.jsx +12 -5
  8. package/core/MeganavItemsSignedIn.jsx +12 -5
  9. package/core/MeganavSearch.jsx +12 -5
  10. package/core/MeganavSearchPanel.jsx +12 -5
  11. package/core/MeganavSearchSuggestions.jsx +12 -5
  12. package/core/Uptime.jsx +12 -5
  13. package/package.json +1 -1
  14. package/src/core/FeaturedLink/component.css +1 -10
  15. package/src/core/FeaturedLink/component.html.erb +14 -5
  16. package/src/core/FeaturedLink/component.jsx +10 -4
  17. package/src/core/FeaturedLink/component.rb +3 -1
  18. package/tailwind.config.js +2 -0
package/core/FeaturedLink/component.css CHANGED
@@ -1,16 +1,7 @@
1
1
  @layer components {
2
2
  .ui-featured-link {
3
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;
4
+ @apply text-neutral-500 hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
14
5
  }
15
6
  }
16
7
 
package/core/FeaturedLink.jsx CHANGED
@@ -165,24 +165,31 @@ __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,
173
175
  children = _ref.children;
174
176
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
175
177
  href: url,
176
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
178
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
177
179
  style: {
178
180
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
179
181
  }
180
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
182
+ }, 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
183
  name: "icon-gui-link-arrow",
182
184
  size: "calc(var(--featured-link-icon-size) * 1.25)",
183
185
  color: iconColor,
184
- additionalCSS: "ui-featured-link-icon"
185
- }));
186
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
187
+ }), 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"], {
188
+ name: "icon-gui-link-arrow",
189
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
190
+ color: iconColor,
191
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
192
+ })));
186
193
  };
187
194
 
188
195
  FeaturedLink.propTypes = {
package/core/Meganav.jsx CHANGED
@@ -111,24 +111,31 @@ 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,
119
121
  children = _ref.children;
120
122
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
121
123
  href: url,
122
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
124
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
123
125
  style: {
124
126
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
125
127
  }
126
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
128
+ }, 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
129
  name: "icon-gui-link-arrow",
128
130
  size: "calc(var(--featured-link-icon-size) * 1.25)",
129
131
  color: iconColor,
130
- additionalCSS: "ui-featured-link-icon"
131
- }));
132
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
133
+ }), 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"], {
134
+ name: "icon-gui-link-arrow",
135
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
136
+ color: iconColor,
137
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
138
+ })));
132
139
  };
133
140
 
134
141
  FeaturedLink.propTypes = {
package/core/MeganavBlogPostsList.jsx CHANGED
@@ -30,24 +30,31 @@ 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,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, 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
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), 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"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
package/core/MeganavContentCompany.jsx CHANGED
@@ -111,24 +111,31 @@ 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,
119
121
  children = _ref.children;
120
122
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
121
123
  href: url,
122
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
124
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
123
125
  style: {
124
126
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
125
127
  }
126
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
128
+ }, 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
129
  name: "icon-gui-link-arrow",
128
130
  size: "calc(var(--featured-link-icon-size) * 1.25)",
129
131
  color: iconColor,
130
- additionalCSS: "ui-featured-link-icon"
131
- }));
132
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
133
+ }), 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"], {
134
+ name: "icon-gui-link-arrow",
135
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
136
+ color: iconColor,
137
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
138
+ })));
132
139
  };
133
140
 
134
141
  FeaturedLink.propTypes = {
package/core/MeganavContentProducts.jsx CHANGED
@@ -30,24 +30,31 @@ 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,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, 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
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), 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"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
package/core/MeganavItemsMobile.jsx CHANGED
@@ -30,24 +30,31 @@ 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,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, 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
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), 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"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
package/core/MeganavItemsSignedIn.jsx CHANGED
@@ -30,24 +30,31 @@ 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,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, 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
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), 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"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
package/core/MeganavSearch.jsx CHANGED
@@ -30,24 +30,31 @@ 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,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, 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
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), 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"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
package/core/MeganavSearchPanel.jsx CHANGED
@@ -30,24 +30,31 @@ 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,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, 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
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), 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"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
package/core/MeganavSearchSuggestions.jsx CHANGED
@@ -30,24 +30,31 @@ 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,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, 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
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), 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"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
package/core/Uptime.jsx CHANGED
@@ -30,24 +30,31 @@ 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,
38
40
  children = _ref.children;
39
41
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
40
42
  href: url,
41
- className: "ui-featured-link ".concat(textSize, " ").concat(flush ? "" : "py-8", " "),
43
+ className: "ui-featured-link group ".concat(textSize, " ").concat(flush ? "" : "py-8"),
42
44
  style: {
43
45
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
44
46
  }
45
- }, children, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Icon_component_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
47
+ }, 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
48
  name: "icon-gui-link-arrow",
47
49
  size: "calc(var(--featured-link-icon-size) * 1.25)",
48
50
  color: iconColor,
49
- additionalCSS: "ui-featured-link-icon"
50
- }));
51
+ additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
+ }), 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"], {
53
+ name: "icon-gui-link-arrow",
54
+ size: "calc(var(--featured-link-icon-size) * 1.25)",
55
+ color: iconColor,
56
+ additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
+ })));
51
58
  };
52
59
 
53
60
  FeaturedLink.propTypes = {
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.d65c98c",
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.css CHANGED
@@ -1,15 +1,6 @@
1
1
  @layer components {
2
2
  .ui-featured-link {
3
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;
4
+ @apply text-neutral-500 hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
14
5
  }
15
6
  }
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: "ui-featured-link 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: "ui-featured-link-icon 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: "ui-featured-link-icon 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.jsx CHANGED
@@ -3,14 +3,20 @@ 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, children }) => (
7
7
  <a
8
8
  href={url}
9
- className={`ui-featured-link ${textSize} ${flush ? "" : "py-8"} `}
9
+ className={`ui-featured-link group ${textSize} ${flush ? "" : "py-8"}`}
10
10
  style={{ "--featured-link-icon-size": `var(${textSize.replace("text", "--fs")})` }}
11
11
  >
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" />
12
+ {reverse ? <>
13
+ <Icon name="icon-gui-link-arrow" size={`calc(var(--featured-link-icon-size) * 1.25)`} color={iconColor} additionalCSS="ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180" />
14
+ {children}
15
+ </> :
16
+ <>
17
+ {children}
18
+ <Icon name="icon-gui-link-arrow" size={`calc(var(--featured-link-icon-size) * 1.25)`} color={iconColor} additionalCSS="ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0" />
19
+ </>}
14
20
  </a>
15
21
  );
16
22
 
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/tailwind.config.js CHANGED
@@ -353,6 +353,8 @@ module.exports = {
353
353
  backgroundImage: ["hover", "active", "focus"],
354
354
  filter: ["hover"],
355
355
  cursor: ["disabled"],
356
+ inset: ['group-hover']
357
+
356
358
  },
357
359
  },
358
360
  corePlugins: {