@ably/ui 11.7.1-dev.abfa747 → 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 (21) hide show
  1. package/core/FeaturedLink/component.css +0 -6
  2. package/core/FeaturedLink/component.js +1 -1
  3. package/core/FeaturedLink.jsx +8 -4
  4. package/core/Meganav.jsx +8 -4
  5. package/core/MeganavBlogPostsList.jsx +8 -4
  6. package/core/MeganavContentCompany.jsx +8 -4
  7. package/core/MeganavContentProducts.jsx +8 -4
  8. package/core/MeganavItemsMobile.jsx +8 -4
  9. package/core/MeganavItemsSignedIn.jsx +8 -4
  10. package/core/MeganavSearch.jsx +8 -4
  11. package/core/MeganavSearchPanel.jsx +8 -4
  12. package/core/MeganavSearchSuggestions.jsx +8 -4
  13. package/core/Uptime.jsx +8 -4
  14. package/core/styles.css +4 -0
  15. package/package.json +1 -1
  16. package/src/core/FeaturedLink/component.html.erb +3 -3
  17. package/src/core/FeaturedLink/component.js +0 -1
  18. package/src/core/FeaturedLink/component.jsx +27 -10
  19. package/src/core/styles/text.css +4 -0
  20. package/tailwind.config.js +1 -2
  21. package/src/core/FeaturedLink/component.css +0 -6
package/core/FeaturedLink/component.css CHANGED
@@ -1,7 +1 @@
1
- @layer components {
2
- .ui-featured-link {
3
- @apply font-sans font-bold block;
4
- @apply text-neutral-500 hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
- }
6
- }
7
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
@@ -172,10 +172,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
172
172
  flush = _ref$flush === void 0 ? false : _ref$flush,
173
173
  _ref$reverse = _ref.reverse,
174
174
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
175
+ _ref$additionalCSS = _ref.additionalCSS,
176
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
175
177
  children = _ref.children;
176
178
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
177
179
  href: url,
178
- className: "ui-featured-link group ".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),
179
181
  style: {
180
182
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
181
183
  }
@@ -183,12 +185,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
183
185
  name: "icon-gui-link-arrow",
184
186
  size: "calc(var(--featured-link-icon-size) * 1.25)",
185
187
  color: iconColor,
186
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
188
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
187
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"], {
188
190
  name: "icon-gui-link-arrow",
189
191
  size: "calc(var(--featured-link-icon-size) * 1.25)",
190
192
  color: iconColor,
191
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
193
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
192
194
  })));
193
195
  };
194
196
 
@@ -197,7 +199,9 @@ FeaturedLink.propTypes = {
197
199
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
198
200
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
199
201
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
200
- 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)
201
205
  };
202
206
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
203
207
  })();
package/core/Meganav.jsx CHANGED
@@ -118,10 +118,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
118
118
  flush = _ref$flush === void 0 ? false : _ref$flush,
119
119
  _ref$reverse = _ref.reverse,
120
120
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
121
+ _ref$additionalCSS = _ref.additionalCSS,
122
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
121
123
  children = _ref.children;
122
124
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
123
125
  href: url,
124
- className: "ui-featured-link group ".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),
125
127
  style: {
126
128
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
127
129
  }
@@ -129,12 +131,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
129
131
  name: "icon-gui-link-arrow",
130
132
  size: "calc(var(--featured-link-icon-size) * 1.25)",
131
133
  color: iconColor,
132
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
134
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
133
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"], {
134
136
  name: "icon-gui-link-arrow",
135
137
  size: "calc(var(--featured-link-icon-size) * 1.25)",
136
138
  color: iconColor,
137
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
139
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
138
140
  })));
139
141
  };
140
142
 
@@ -143,7 +145,9 @@ FeaturedLink.propTypes = {
143
145
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
144
146
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
145
147
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
146
- 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)
147
151
  };
148
152
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
149
153
 
package/core/MeganavBlogPostsList.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".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),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
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"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- 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)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavContentCompany.jsx CHANGED
@@ -118,10 +118,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
118
118
  flush = _ref$flush === void 0 ? false : _ref$flush,
119
119
  _ref$reverse = _ref.reverse,
120
120
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
121
+ _ref$additionalCSS = _ref.additionalCSS,
122
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
121
123
  children = _ref.children;
122
124
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
123
125
  href: url,
124
- className: "ui-featured-link group ".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),
125
127
  style: {
126
128
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
127
129
  }
@@ -129,12 +131,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
129
131
  name: "icon-gui-link-arrow",
130
132
  size: "calc(var(--featured-link-icon-size) * 1.25)",
131
133
  color: iconColor,
132
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
134
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
133
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"], {
134
136
  name: "icon-gui-link-arrow",
135
137
  size: "calc(var(--featured-link-icon-size) * 1.25)",
136
138
  color: iconColor,
137
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
139
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
138
140
  })));
139
141
  };
140
142
 
@@ -143,7 +145,9 @@ FeaturedLink.propTypes = {
143
145
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
144
146
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
145
147
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
146
- 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)
147
151
  };
148
152
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
149
153
 
package/core/MeganavContentProducts.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".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),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
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"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- 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)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavItemsMobile.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".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),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
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"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- 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)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavItemsSignedIn.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".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),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
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"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- 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)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavSearch.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".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),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
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"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- 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)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavSearchPanel.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".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),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
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"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- 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)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/MeganavSearchSuggestions.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".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),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
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"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- 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)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
72
 
package/core/Uptime.jsx CHANGED
@@ -37,10 +37,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
37
37
  flush = _ref$flush === void 0 ? false : _ref$flush,
38
38
  _ref$reverse = _ref.reverse,
39
39
  reverse = _ref$reverse === void 0 ? false : _ref$reverse,
40
+ _ref$additionalCSS = _ref.additionalCSS,
41
+ additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS,
40
42
  children = _ref.children;
41
43
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
42
44
  href: url,
43
- className: "ui-featured-link group ".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),
44
46
  style: {
45
47
  "--featured-link-icon-size": "var(".concat(textSize.replace("text", "--fs"), ")")
46
48
  }
@@ -48,12 +50,12 @@ var FeaturedLink = function FeaturedLink(_ref) {
48
50
  name: "icon-gui-link-arrow",
49
51
  size: "calc(var(--featured-link-icon-size) * 1.25)",
50
52
  color: iconColor,
51
- additionalCSS: "ui-featured-link-icon align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
53
+ additionalCSS: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"
52
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"], {
53
55
  name: "icon-gui-link-arrow",
54
56
  size: "calc(var(--featured-link-icon-size) * 1.25)",
55
57
  color: iconColor,
56
- additionalCSS: "ui-featured-link-icon align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
58
+ additionalCSS: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"
57
59
  })));
58
60
  };
59
61
 
@@ -62,7 +64,9 @@ FeaturedLink.propTypes = {
62
64
  children: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().node),
63
65
  textSize: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
64
66
  iconColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
65
- 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)
66
70
  };
67
71
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FeaturedLink);
68
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.abfa747",
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,15 +1,15 @@
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 %>
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
2
  <% if @reverse %>
3
3
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
4
4
  size: "calc(var(--featured-link-icon-size) * 1.25)",
5
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")) %>
6
+ additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
7
7
  <%= content -%>
8
8
  <% else %>
9
9
  <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
10
10
  size: "calc(var(--featured-link-icon-size) * 1.25)",
11
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")) %>
12
+ additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
13
13
  <% end %>
14
14
 
15
15
  <% end %>
package/src/core/FeaturedLink/component.js CHANGED
@@ -1 +0,0 @@
1
- import "./component.css";
package/src/core/FeaturedLink/component.jsx CHANGED
@@ -3,20 +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-p2", iconColor = "text-cool-black", flush = false, reverse = 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 group ${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
- {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
+ {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
+ )}
20
35
  </a>
21
36
  );
22
37
 
@@ -26,6 +41,8 @@ FeaturedLink.propTypes = {
26
41
  textSize: T.string,
27
42
  iconColor: T.string,
28
43
  flush: T.bool,
44
+ reverse: T.bool,
45
+ additionalCSS: T.string,
29
46
  };
30
47
 
31
48
  export default FeaturedLink;
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,8 +353,7 @@ module.exports = {
353
353
  backgroundImage: ["hover", "active", "focus"],
354
354
  filter: ["hover"],
355
355
  cursor: ["disabled"],
356
- inset: ['group-hover']
357
-
356
+ inset: ["group-hover"],
358
357
  },
359
358
  },
360
359
  corePlugins: {
package/src/core/FeaturedLink/component.css DELETED
@@ -1,6 +0,0 @@
1
- @layer components {
2
- .ui-featured-link {
3
- @apply font-sans font-bold block;
4
- @apply text-neutral-500 hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus;
5
- }
6
- }