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

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 (28) hide show
  1. package/README.md +0 -1
  2. package/core/FeaturedLink/component.css +0 -15
  3. package/core/FeaturedLink/component.js +1 -1
  4. package/core/FeaturedLink.jsx +17 -6
  5. package/core/Meganav.jsx +17 -6
  6. package/core/MeganavBlogPostsList.jsx +17 -6
  7. package/core/MeganavContentCompany.jsx +17 -6
  8. package/core/MeganavContentProducts.jsx +17 -6
  9. package/core/MeganavItemsMobile.jsx +17 -6
  10. package/core/MeganavItemsSignedIn.jsx +17 -6
  11. package/core/MeganavSearch.jsx +17 -6
  12. package/core/MeganavSearchPanel.jsx +17 -6
  13. package/core/MeganavSearchSuggestions.jsx +17 -6
  14. package/core/Showcase/component.js +1 -1
  15. package/core/Uptime/component.css +1 -2
  16. package/core/Uptime.jsx +17 -6
  17. package/core/styles.css +4 -0
  18. package/package.json +2 -3
  19. package/src/core/FeaturedLink/component.html.erb +14 -5
  20. package/src/core/FeaturedLink/component.js +0 -1
  21. package/src/core/FeaturedLink/component.jsx +27 -4
  22. package/src/core/FeaturedLink/component.rb +3 -1
  23. package/src/core/Showcase/component.html.erb +2 -2
  24. package/src/core/Showcase/component.js +1 -1
  25. package/src/core/Uptime/component.css +1 -2
  26. package/src/core/styles/text.css +4 -0
  27. package/tailwind.config.js +3 -5
  28. package/src/core/FeaturedLink/component.css +0 -15
package/README.md CHANGED
@@ -80,7 +80,6 @@ Currently, AblyUI CSS is built to work with TailwindCSS. To integrate it into yo
80
80
  1. Add postCSS import with `npm install postcss-import`
81
81
  1. Further to the instructions, if installation is hanging for over 5 minutes or otherwise problematic, try installing the libraries one at a time
82
82
  1. Make sure you are installing v2 with `npm install -D tailwindcss@2.X`
83
- 1. Make sure that tailwindcss-filters is also set to v2 in your package.json: otherwise `npm install -D tailwindcss-filters@2.X`
84
83
  3. Make sure you are using the format `@import 'tailwindcss/base';...` in your `global.css` file rather than the `@tailwind/base` format from Tailwind v3
85
84
  4. Add the following to your `tailwind.config.js`. Note how different config properties are always extended by the `ablyUIConfig`:
86
85
 
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/Showcase/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.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,h,y,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["filter-grayscale","filter-none"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(h=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){h.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(y=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",y),function(){return l.parentNode.removeEventListener("wheel",y)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
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.Showcase=t())}(this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>c});var n=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var o=function(e,t){var n=100*t*(arguments.length>2&&void 0!==arguments[2]?arguments[2]:1);e.style.transform="translateX(".concat(n,"%)")},i=function(e){if("undefined"==typeof window)return!1;var t="".concat(e+64,"px");return!window.matchMedia("(min-width: ".concat(t,")")).matches};const c=function(e,t){var c=e||n("showcase"),u=Array.from(function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll("[data-id=".concat(e,"]"))}("showcase-control",c)),a=u.map((function(e){return e.querySelector("img")})),l=n("showcase-controls",c),f=n("showcase-index-bar",c),s=n("showcase-slides",c),d=s.children.length,m=("--ui-showcase-client-logo-min-width",window.getComputedStyle(document.documentElement).getPropertyValue("--ui-showcase-client-logo-min-width")),v=parseFloat(m)*parseFloat(getComputedStyle(document.documentElement).fontSize)*d;[".ui-showcase-logo-wrapper",".ui-showcase-index-bar"].forEach((function(e){var t=c.querySelector(e),n="".concat(v,"px");t.style.minWidth=n}));var p,y,h,w=0,b=!1,g=function(e){o(s,e,-1),o(f,e,1),function(e,t){var n=["grayscale","grayscale-0"],o=[].concat(n).reverse();e.forEach((function(e,i){var c,u;(c=e.classList).replace.apply(c,function(e){if(Array.isArray(e))return r(e)}(u=i===t?n:o)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(u)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(u)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())}))}(a,e),i(v)&&function(e,t){var n=e.parentNode,r=e.children,o=n.clientWidth/2,i=r.length,c=Array.from(r).map((function(e){return e.clientWidth})).reduce((function(e,t){return e+t}))/i,u=t*c-((t&&i-t-1?o-c/2:0)>>0);n.scrollTo({left:u,behavior:"smooth"})}(l,e)},A=function e(){return p=setTimeout((function(){b||i(v)||(w=(w+1)%u.length,g(w),e())}),5e3)},E=function(){var e=function(){b=!0,clearTimeout(p)};return c.addEventListener("mouseover",e),function(){return c.removeEventListener("mouseover",e)}},S=function(){var e=function(){b=!1,A()};return c.addEventListener("mouseleave",e),function(){return c.removeEventListener("mouseleave",e)}},L=function(){var e=function(){clearTimeout(p),A()};return document.addEventListener("resize",e),function(){return document.removeEventListener("resize",e)}},j=(y=u.map((function(e,t){var n=function(e){return function(){g(w=e)}}(t);return e.addEventListener("click",n),n})),function(){y.forEach((function(e,t){return u[t].removeEventListener("click",e)}))}),x=(h=function(e){return e.preventDefault()},l.parentNode.addEventListener("wheel",h),function(){return l.parentNode.removeEventListener("wheel",h)}),U=function(){if(t){A(),c.setAttribute("aria-live","polite");var e=[E(),S(),L()];return function(){return e.forEach((function(e){return e()}))}}return function(){}}();return function(){g(0),clearTimeout(p),j(),U(),x()}};return t.default})()));
package/core/Uptime/component.css CHANGED
@@ -30,8 +30,7 @@
30
30
  }
31
31
 
32
32
  .ui-uptime-day:hover {
33
- filter: brightness(1.2);
34
- @apply z-10;
33
+ @apply z-10 brightness-125;
35
34
  }
36
35
 
37
36
  .ui-uptime-day:hover span {
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.c1ae187",
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",
@@ -43,8 +43,7 @@
43
43
  "postcss-loader": "^4.0.4",
44
44
  "prettier": "^2.3.0",
45
45
  "svg-spritemap-webpack-plugin": "^3.7.1",
46
- "tailwindcss": "^2.0.1",
47
- "tailwindcss-filters": "^3.0.0",
46
+ "tailwindcss": "^3.3.5",
48
47
  "webpack": "^5.3.2",
49
48
  "webpack-cli": "^4.2.0",
50
49
  "yargs": "^16.2.0"
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/Showcase/component.html.erb CHANGED
@@ -13,7 +13,7 @@
13
13
  type: 'button',
14
14
  data: { id: 'showcase-control' },
15
15
  aria: { controls: @random_id } do %>
16
- <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'filter-none' : 'filter-grayscale', 'hover:filter-none'], srcset: [["#{company[:logo2x]}", "2x"]] %>
16
+ <%= image_tag company[:logo], alt: "#{company[:name]} logo", class: ['ui-showcase-logo-img', index === 0 ? 'grayscale-0' : 'grayscale', 'hover:grayscale-0'], srcset: [["#{company[:logo2x]}", "2x"]] %>
17
17
  <% end %>
18
18
  </li>
19
19
  <% end %>
@@ -40,7 +40,7 @@
40
40
 
41
41
  <div class="flex items-center">
42
42
  <div class="flex-shrink-0 flex-grow-0 mr-16 overflow-hidden rounded-full flex align-center justify-center w-48 h-48">
43
- <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 filter-grayscale" %>
43
+ <%= image_tag company[:author][:thumbnail], alt: "Picture of #{company[:author][:name]}, #{company[:author][:title]}", class: "w-48 h-48 grayscale" %>
44
44
  </div>
45
45
  <div>
46
46
  <p class="text-p2 font-medium"><%= company[:author][:name] %></p>
package/src/core/Showcase/component.js CHANGED
@@ -6,7 +6,7 @@ import "./component.css";
6
6
  const SLIDE_SHOW_INTERVAL = 5000;
7
7
 
8
8
  const updateLogoOpacity = (logos, currentIndex) => {
9
- const visible = ["filter-grayscale", "filter-none"];
9
+ const visible = ["grayscale", "grayscale-0"];
10
10
  const opaque = [...visible].reverse();
11
11
  logos.forEach((logo, i) => {
12
12
  logo.classList.replace(...(i === currentIndex ? visible : opaque));
package/src/core/Uptime/component.css CHANGED
@@ -30,8 +30,7 @@
30
30
  }
31
31
 
32
32
  .ui-uptime-day:hover {
33
- filter: brightness(1.2);
34
- @apply z-10;
33
+ @apply z-10 brightness-125;
35
34
  }
36
35
 
37
36
  .ui-uptime-day:hover span {
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
@@ -136,6 +136,7 @@ module.exports = {
136
136
  "gui-blue-hover-dark": "var(--color-gui-blue-hover-dark)",
137
137
  "gui-blue-active-dark": "var(--color-gui-blue-active-dark)",
138
138
  "gui-blue-focus": "var(--color-gui-blue-focus)",
139
+ "gui-blue-visited": "var(--color-gui-blue-focus)",
139
140
  "gui-unavailable": "var(--color-gui-unavailable)",
140
141
  "gui-success-green": "var(--color-gui-success-green)",
141
142
  "gui-error-red": "var(--color-gui-error-red)",
@@ -298,10 +299,6 @@ module.exports = {
298
299
  full: "9999px",
299
300
  DEFAULT: "0.375rem",
300
301
  },
301
- filter: {
302
- none: "none",
303
- grayscale: "grayscale(1)",
304
- },
305
302
  extend: {
306
303
  backgroundImage: {
307
304
  "gradient-active-orange": "var(--gradient-active-orange)",
@@ -353,10 +350,11 @@ module.exports = {
353
350
  backgroundImage: ["hover", "active", "focus"],
354
351
  filter: ["hover"],
355
352
  cursor: ["disabled"],
353
+ inset: ["group-hover"],
356
354
  },
357
355
  },
358
356
  corePlugins: {
359
357
  preflight: false,
360
358
  },
361
- plugins: [require("tailwindcss-filters")],
359
+ plugins: [],
362
360
  };
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
- }