@ably/ui 7.1.0 → 7.2.0
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.
- package/core/Footer.jsx +2 -2
- package/core/Loader/component.js +1 -0
- package/core/Loader.jsx +259 -0
- package/core/Meganav.jsx +1 -1
- package/core/MeganavContentDevelopers.jsx +1 -1
- package/core/styles.css +2 -2
- package/package.json +1 -1
- package/src/core/Footer/component.html.erb +2 -2
- package/src/core/Footer/component.jsx +2 -2
- package/src/core/Loader/component.html.erb +18 -0
- package/src/core/Loader/component.js +0 -0
- package/src/core/Loader/component.jsx +49 -0
- package/src/core/Loader/component.rb +19 -0
- package/src/core/MeganavContentDevelopers/component.html.erb +1 -1
- package/src/core/MeganavContentDevelopers/component.jsx +1 -1
- package/src/core/styles/properties.css +2 -2
- package/tailwind.config.js +1 -0
package/core/Footer.jsx
CHANGED
|
@@ -405,12 +405,12 @@ function Footer(_ref) {
|
|
|
405
405
|
}, "Developers"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("ul", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
|
|
406
406
|
className: "p-menu-row-snug"
|
|
407
407
|
}, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
|
|
408
|
-
href: absUrl("/
|
|
408
|
+
href: absUrl("/docs/quick-start-guide"),
|
|
409
409
|
className: "ui-footer-menu-row-link"
|
|
410
410
|
}, "Start in 5 minutes")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
|
|
411
411
|
className: "p-menu-row-snug"
|
|
412
412
|
}, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
|
|
413
|
-
href: absUrl("/
|
|
413
|
+
href: absUrl("/docs/"),
|
|
414
414
|
className: "ui-footer-menu-row-link"
|
|
415
415
|
}, "Documentation")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
|
|
416
416
|
className: "p-menu-row-snug"
|
|
@@ -0,0 +1 @@
|
|
|
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.Loader=o())}(this,(function(){return{}.default}));
|
package/core/Loader.jsx
ADDED
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
(function webpackUniversalModuleDefinition(root, factory) {
|
|
2
|
+
if(typeof exports === 'object' && typeof module === 'object')
|
|
3
|
+
module.exports = factory(require("react"));
|
|
4
|
+
else if(typeof define === 'function' && define.amd)
|
|
5
|
+
define([], factory);
|
|
6
|
+
else {
|
|
7
|
+
var a = typeof exports === 'object' ? factory(require("react")) : factory(root[undefined]);
|
|
8
|
+
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
|
|
9
|
+
}
|
|
10
|
+
})(this, function(__WEBPACK_EXTERNAL_MODULE__9281__) {
|
|
11
|
+
return /******/ (() => { // webpackBootstrap
|
|
12
|
+
/******/ var __webpack_modules__ = ({
|
|
13
|
+
|
|
14
|
+
/***/ 2703:
|
|
15
|
+
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
|
|
16
|
+
|
|
17
|
+
"use strict";
|
|
18
|
+
/**
|
|
19
|
+
* Copyright (c) 2013-present, Facebook, Inc.
|
|
20
|
+
*
|
|
21
|
+
* This source code is licensed under the MIT license found in the
|
|
22
|
+
* LICENSE file in the root directory of this source tree.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
var ReactPropTypesSecret = __webpack_require__(414);
|
|
28
|
+
|
|
29
|
+
function emptyFunction() {}
|
|
30
|
+
function emptyFunctionWithReset() {}
|
|
31
|
+
emptyFunctionWithReset.resetWarningCache = emptyFunction;
|
|
32
|
+
|
|
33
|
+
module.exports = function() {
|
|
34
|
+
function shim(props, propName, componentName, location, propFullName, secret) {
|
|
35
|
+
if (secret === ReactPropTypesSecret) {
|
|
36
|
+
// It is still safe when called from React.
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
var err = new Error(
|
|
40
|
+
'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
|
|
41
|
+
'Use PropTypes.checkPropTypes() to call them. ' +
|
|
42
|
+
'Read more at http://fb.me/use-check-prop-types'
|
|
43
|
+
);
|
|
44
|
+
err.name = 'Invariant Violation';
|
|
45
|
+
throw err;
|
|
46
|
+
};
|
|
47
|
+
shim.isRequired = shim;
|
|
48
|
+
function getShim() {
|
|
49
|
+
return shim;
|
|
50
|
+
};
|
|
51
|
+
// Important!
|
|
52
|
+
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
|
|
53
|
+
var ReactPropTypes = {
|
|
54
|
+
array: shim,
|
|
55
|
+
bool: shim,
|
|
56
|
+
func: shim,
|
|
57
|
+
number: shim,
|
|
58
|
+
object: shim,
|
|
59
|
+
string: shim,
|
|
60
|
+
symbol: shim,
|
|
61
|
+
|
|
62
|
+
any: shim,
|
|
63
|
+
arrayOf: getShim,
|
|
64
|
+
element: shim,
|
|
65
|
+
elementType: shim,
|
|
66
|
+
instanceOf: getShim,
|
|
67
|
+
node: shim,
|
|
68
|
+
objectOf: getShim,
|
|
69
|
+
oneOf: getShim,
|
|
70
|
+
oneOfType: getShim,
|
|
71
|
+
shape: getShim,
|
|
72
|
+
exact: getShim,
|
|
73
|
+
|
|
74
|
+
checkPropTypes: emptyFunctionWithReset,
|
|
75
|
+
resetWarningCache: emptyFunction
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
ReactPropTypes.PropTypes = ReactPropTypes;
|
|
79
|
+
|
|
80
|
+
return ReactPropTypes;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
/***/ }),
|
|
85
|
+
|
|
86
|
+
/***/ 5697:
|
|
87
|
+
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
* Copyright (c) 2013-present, Facebook, Inc.
|
|
91
|
+
*
|
|
92
|
+
* This source code is licensed under the MIT license found in the
|
|
93
|
+
* LICENSE file in the root directory of this source tree.
|
|
94
|
+
*/
|
|
95
|
+
|
|
96
|
+
if (false) { var throwOnDirectAccess, ReactIs; } else {
|
|
97
|
+
// By explicitly using `prop-types` you are opting into new production behavior.
|
|
98
|
+
// http://fb.me/prop-types-in-prod
|
|
99
|
+
module.exports = __webpack_require__(2703)();
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
/***/ }),
|
|
104
|
+
|
|
105
|
+
/***/ 414:
|
|
106
|
+
/***/ ((module) => {
|
|
107
|
+
|
|
108
|
+
"use strict";
|
|
109
|
+
/**
|
|
110
|
+
* Copyright (c) 2013-present, Facebook, Inc.
|
|
111
|
+
*
|
|
112
|
+
* This source code is licensed under the MIT license found in the
|
|
113
|
+
* LICENSE file in the root directory of this source tree.
|
|
114
|
+
*/
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
|
|
119
|
+
|
|
120
|
+
module.exports = ReactPropTypesSecret;
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
/***/ }),
|
|
124
|
+
|
|
125
|
+
/***/ 9281:
|
|
126
|
+
/***/ ((module) => {
|
|
127
|
+
|
|
128
|
+
"use strict";
|
|
129
|
+
module.exports = __WEBPACK_EXTERNAL_MODULE__9281__;
|
|
130
|
+
|
|
131
|
+
/***/ })
|
|
132
|
+
|
|
133
|
+
/******/ });
|
|
134
|
+
/************************************************************************/
|
|
135
|
+
/******/ // The module cache
|
|
136
|
+
/******/ var __webpack_module_cache__ = {};
|
|
137
|
+
/******/
|
|
138
|
+
/******/ // The require function
|
|
139
|
+
/******/ function __webpack_require__(moduleId) {
|
|
140
|
+
/******/ // Check if module is in cache
|
|
141
|
+
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
142
|
+
/******/ if (cachedModule !== undefined) {
|
|
143
|
+
/******/ return cachedModule.exports;
|
|
144
|
+
/******/ }
|
|
145
|
+
/******/ // Create a new module (and put it into the cache)
|
|
146
|
+
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
147
|
+
/******/ // no module.id needed
|
|
148
|
+
/******/ // no module.loaded needed
|
|
149
|
+
/******/ exports: {}
|
|
150
|
+
/******/ };
|
|
151
|
+
/******/
|
|
152
|
+
/******/ // Execute the module function
|
|
153
|
+
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
154
|
+
/******/
|
|
155
|
+
/******/ // Return the exports of the module
|
|
156
|
+
/******/ return module.exports;
|
|
157
|
+
/******/ }
|
|
158
|
+
/******/
|
|
159
|
+
/************************************************************************/
|
|
160
|
+
/******/ /* webpack/runtime/compat get default export */
|
|
161
|
+
/******/ (() => {
|
|
162
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
163
|
+
/******/ __webpack_require__.n = (module) => {
|
|
164
|
+
/******/ var getter = module && module.__esModule ?
|
|
165
|
+
/******/ () => (module['default']) :
|
|
166
|
+
/******/ () => (module);
|
|
167
|
+
/******/ __webpack_require__.d(getter, { a: getter });
|
|
168
|
+
/******/ return getter;
|
|
169
|
+
/******/ };
|
|
170
|
+
/******/ })();
|
|
171
|
+
/******/
|
|
172
|
+
/******/ /* webpack/runtime/define property getters */
|
|
173
|
+
/******/ (() => {
|
|
174
|
+
/******/ // define getter functions for harmony exports
|
|
175
|
+
/******/ __webpack_require__.d = (exports, definition) => {
|
|
176
|
+
/******/ for(var key in definition) {
|
|
177
|
+
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
178
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
179
|
+
/******/ }
|
|
180
|
+
/******/ }
|
|
181
|
+
/******/ };
|
|
182
|
+
/******/ })();
|
|
183
|
+
/******/
|
|
184
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
185
|
+
/******/ (() => {
|
|
186
|
+
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
187
|
+
/******/ })();
|
|
188
|
+
/******/
|
|
189
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
190
|
+
/******/ (() => {
|
|
191
|
+
/******/ // define __esModule on exports
|
|
192
|
+
/******/ __webpack_require__.r = (exports) => {
|
|
193
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
194
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
195
|
+
/******/ }
|
|
196
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
197
|
+
/******/ };
|
|
198
|
+
/******/ })();
|
|
199
|
+
/******/
|
|
200
|
+
/************************************************************************/
|
|
201
|
+
var __webpack_exports__ = {};
|
|
202
|
+
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
|
|
203
|
+
(() => {
|
|
204
|
+
"use strict";
|
|
205
|
+
__webpack_require__.r(__webpack_exports__);
|
|
206
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
207
|
+
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
208
|
+
/* harmony export */ });
|
|
209
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9281);
|
|
210
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
211
|
+
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5697);
|
|
212
|
+
/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
var Loader = function Loader(_ref) {
|
|
217
|
+
var _ref$ringColor = _ref.ringColor,
|
|
218
|
+
ringColor = _ref$ringColor === void 0 ? "text-dark-grey" : _ref$ringColor,
|
|
219
|
+
_ref$size = _ref.size,
|
|
220
|
+
size = _ref$size === void 0 ? "1.5rem" : _ref$size,
|
|
221
|
+
_ref$additionalCSS = _ref.additionalCSS,
|
|
222
|
+
additionalCSS = _ref$additionalCSS === void 0 ? "" : _ref$additionalCSS;
|
|
223
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
|
|
224
|
+
className: "".concat(ringColor, " ").concat(additionalCSS),
|
|
225
|
+
style: {
|
|
226
|
+
width: size,
|
|
227
|
+
height: size
|
|
228
|
+
},
|
|
229
|
+
height: "24",
|
|
230
|
+
viewBox: "0 0 24 24",
|
|
231
|
+
width: "24",
|
|
232
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
233
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("style", {
|
|
234
|
+
dangerouslySetInnerHTML: {
|
|
235
|
+
__html: "\n @keyframes chunk-animation {\n to {\n transform: rotate(360deg);\n }\n }\n\n .chunk {\n transform: rotate(0deg);\n transform-origin: center;\n animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;\n }\n "
|
|
236
|
+
}
|
|
237
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
|
|
238
|
+
fill: "currentColor",
|
|
239
|
+
d: "m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z",
|
|
240
|
+
opacity: ".5"
|
|
241
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("path", {
|
|
242
|
+
className: "chunk",
|
|
243
|
+
d: "m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z",
|
|
244
|
+
fill: "#ff5416"
|
|
245
|
+
}));
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
Loader.propTypes = {
|
|
249
|
+
size: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
|
|
250
|
+
ringColor: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
|
|
251
|
+
additionalCSS: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
|
|
252
|
+
};
|
|
253
|
+
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Loader);
|
|
254
|
+
})();
|
|
255
|
+
|
|
256
|
+
/******/ return __webpack_exports__;
|
|
257
|
+
/******/ })()
|
|
258
|
+
;
|
|
259
|
+
});
|
package/core/Meganav.jsx
CHANGED
|
@@ -657,7 +657,7 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
|
|
|
657
657
|
}))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
|
|
658
658
|
className: "text-p1 font-medium text-cool-black mb-20"
|
|
659
659
|
}, "Docs, quick start guides, tutorials, and API reference to help you start building with Ably\u2019s platform and APIs."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
|
|
660
|
-
url: absUrl("/
|
|
660
|
+
url: absUrl("/docs")
|
|
661
661
|
}, "Visit Documentation")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
|
|
662
662
|
className: "ui-meganav-overline uppercase",
|
|
663
663
|
id: "meganav-developers-panel-explore"
|
|
@@ -345,7 +345,7 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
|
|
|
345
345
|
}))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
|
|
346
346
|
className: "text-p1 font-medium text-cool-black mb-20"
|
|
347
347
|
}, "Docs, quick start guides, tutorials, and API reference to help you start building with Ably\u2019s platform and APIs."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_FeaturedLink_component_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
|
|
348
|
-
url: absUrl("/
|
|
348
|
+
url: absUrl("/docs")
|
|
349
349
|
}, "Visit Documentation")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
|
|
350
350
|
className: "ui-meganav-overline uppercase",
|
|
351
351
|
id: "meganav-developers-panel-explore"
|
package/core/styles.css
CHANGED
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
--color-gui-viewed: #4887c2;
|
|
20
20
|
--color-gui-unavailable: #a8a8a8;
|
|
21
21
|
--color-gui-error: #fb0c0c;
|
|
22
|
+
--color-gui-success: #11cb24;
|
|
22
23
|
|
|
23
24
|
/* code syntax: theme */
|
|
24
25
|
--syntax-black: var(--color-cool-black);
|
|
25
26
|
--syntax-dark-grey: var(--color-dark-grey);
|
|
26
27
|
--syntax-mid-grey: var(--color-mid-grey);
|
|
27
28
|
--syntax-light-grey: var(--color-light-grey);
|
|
28
|
-
|
|
29
29
|
--syntax-orange: #e78c45;
|
|
30
30
|
--syntax-yellow: #e7c547;
|
|
31
31
|
--syntax-blue: #3490ec;
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
|
|
155
155
|
alternatively, look for ui-grid-* helpers. */
|
|
156
156
|
--bp-xs: 375px; /* gutters 8px, side-margin 24px */
|
|
157
|
-
--bp-sm:
|
|
157
|
+
--bp-sm: 768px; /* gutters 16px, side-margin 32px */
|
|
158
158
|
--bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
|
|
159
159
|
--bp-lg: 1280px; /* gutters 24px, side-margin 64px */
|
|
160
160
|
--bp-xl: 1440px; /* gutters 32px, side-margin 64px */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.2.0",
|
|
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",
|
|
@@ -74,10 +74,10 @@
|
|
|
74
74
|
<h2 class="ui-footer-col-title">Developers</h2>
|
|
75
75
|
<ul>
|
|
76
76
|
<li class="p-menu-row-snug">
|
|
77
|
-
<%= link_to 'Start in 5 minutes', abs_url("/
|
|
77
|
+
<%= link_to 'Start in 5 minutes', abs_url("/docs/quick-start-guide"), class: "ui-footer-menu-row-link" %>
|
|
78
78
|
</li>
|
|
79
79
|
<li class="p-menu-row-snug">
|
|
80
|
-
<%= link_to 'Documentation', abs_url("/
|
|
80
|
+
<%= link_to 'Documentation', abs_url("/docs"), class: "ui-footer-menu-row-link" %>
|
|
81
81
|
</li>
|
|
82
82
|
<li class="p-menu-row-snug">
|
|
83
83
|
<%= link_to 'Tutorials', abs_url("/tutorials"), class: "ui-footer-menu-row-link" %>
|
|
@@ -116,12 +116,12 @@ export default function Footer({ paths, urlBase }) {
|
|
|
116
116
|
<h2 className="ui-footer-col-title">Developers</h2>
|
|
117
117
|
<ul>
|
|
118
118
|
<li className="p-menu-row-snug">
|
|
119
|
-
<a href={absUrl("/
|
|
119
|
+
<a href={absUrl("/docs/quick-start-guide")} className="ui-footer-menu-row-link">
|
|
120
120
|
Start in 5 minutes
|
|
121
121
|
</a>
|
|
122
122
|
</li>
|
|
123
123
|
<li className="p-menu-row-snug">
|
|
124
|
-
<a href={absUrl("/
|
|
124
|
+
<a href={absUrl("/docs/")} className="ui-footer-menu-row-link">
|
|
125
125
|
Documentation
|
|
126
126
|
</a>
|
|
127
127
|
</li>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<%= tag.svg class: "#{ring_color} #{additional_css}", style: "width: #{size}; height: #{size}", width: "24", height: "24", view_box: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" do %>
|
|
2
|
+
<style>
|
|
3
|
+
@keyframes chunk-animation {
|
|
4
|
+
to {
|
|
5
|
+
transform: rotate(360deg);
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.chunk {
|
|
10
|
+
transform: rotate(0deg);
|
|
11
|
+
transform-origin: center;
|
|
12
|
+
animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;
|
|
13
|
+
}
|
|
14
|
+
</style>
|
|
15
|
+
|
|
16
|
+
<path fill="currentColor" d="m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z" opacity=".5"/>
|
|
17
|
+
<path className="chunk" d="m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z" fill="#ff5416"/>
|
|
18
|
+
<% end %>
|
|
File without changes
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import T from "prop-types";
|
|
3
|
+
|
|
4
|
+
const Loader = ({ ringColor = "text-dark-grey", size = "1.5rem", additionalCSS = "" }) => (
|
|
5
|
+
<svg
|
|
6
|
+
className={`${ringColor} ${additionalCSS}`}
|
|
7
|
+
style={{ width: size, height: size }}
|
|
8
|
+
height="24"
|
|
9
|
+
viewBox="0 0 24 24"
|
|
10
|
+
width="24"
|
|
11
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
12
|
+
>
|
|
13
|
+
<style
|
|
14
|
+
dangerouslySetInnerHTML={{
|
|
15
|
+
__html: `
|
|
16
|
+
@keyframes chunk-animation {
|
|
17
|
+
to {
|
|
18
|
+
transform: rotate(360deg);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.chunk {
|
|
23
|
+
transform: rotate(0deg);
|
|
24
|
+
transform-origin: center;
|
|
25
|
+
animation: chunk-animation 0.6s cubic-bezier(.44,.15,.66,.98) forwards infinite;
|
|
26
|
+
}
|
|
27
|
+
`,
|
|
28
|
+
}}
|
|
29
|
+
></style>
|
|
30
|
+
<path
|
|
31
|
+
fill="currentColor"
|
|
32
|
+
d="m12 1.99976c-1.9778 0-3.91121.58649-5.5557 1.6853s-2.92621 2.6606-3.68309 4.48786c-.75688 1.82728-.95491 3.83788-.56906 5.77778.38585 1.9398 1.33826 3.7216 2.73679 5.1201 1.39852 1.3985 3.18035 2.351 5.12016 2.7368 1.9398.3859 3.9505.1878 5.7777-.569 1.8273-.7569 3.3891-2.0387 4.4879-3.6831 1.0988-1.6445 1.6853-3.5779 1.6853-5.5557 0-1.3133-.2587-2.61362-.7612-3.82688-.5025-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612zm0 18.00004c-1.5822 0-3.12896-.4692-4.44456-1.3483-1.31559-.879-2.34097-2.1285-2.94647-3.5903s-.76393-3.0703-.45525-4.6222c.30868-1.55181 1.07061-2.97728 2.18943-4.0961s2.54428-1.88074 4.09615-2.18943c1.5518-.30868 3.1604-.15025 4.6222.45525s2.7112 1.63088 3.5903 2.94647c.879 1.3156 1.3482 2.86231 1.3482 4.44461 0 2.1217-.8428 4.1565-2.3431 5.6568s-3.5352 2.3432-5.6569 2.3432z"
|
|
33
|
+
opacity=".5"
|
|
34
|
+
/>
|
|
35
|
+
<path
|
|
36
|
+
className="chunk"
|
|
37
|
+
d="m20 11.9998h2c0-1.3133-.2587-2.61362-.7612-3.82688-.5026-1.21325-1.2391-2.31565-2.1677-3.24423-.9286-.92859-2.031-1.66518-3.2443-2.16773-1.2132-.50255-2.5136-.7612-3.8268-.7612v2c2.1217 0 4.1566.84285 5.6569 2.34314 1.5002 1.50029 2.3431 3.53512 2.3431 5.6569z"
|
|
38
|
+
fill="#ff5416"
|
|
39
|
+
/>
|
|
40
|
+
</svg>
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
Loader.propTypes = {
|
|
44
|
+
size: T.string,
|
|
45
|
+
ringColor: T.string,
|
|
46
|
+
additionalCSS: T.string,
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export default Loader;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
module AblyUi
|
|
2
|
+
module Core
|
|
3
|
+
class Loader < ViewComponent::Base
|
|
4
|
+
attr_reader :size
|
|
5
|
+
attr_reader :ring_color
|
|
6
|
+
attr_reader :additional_css
|
|
7
|
+
|
|
8
|
+
def initialize(
|
|
9
|
+
size: '1.5rem',
|
|
10
|
+
ring_color: 'text-dark-grey',
|
|
11
|
+
additional_css: ''
|
|
12
|
+
)
|
|
13
|
+
@size = size
|
|
14
|
+
@ring_color = ring_color
|
|
15
|
+
@additional_css = additional_css
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
end
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
Docs, quick start guides, tutorials, and API reference to help you start building with Ably’s platform and APIs.
|
|
12
12
|
</p>
|
|
13
13
|
|
|
14
|
-
<%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/
|
|
14
|
+
<%= render(AblyUi::Core::FeaturedLink.new(url: abs_url("/docs"))) do %>Visit Documentation<% end %>
|
|
15
15
|
</div>
|
|
16
16
|
|
|
17
17
|
<div>
|
|
@@ -18,7 +18,7 @@ const MeganavContentDevelopers = ({ absUrl }) => (
|
|
|
18
18
|
Docs, quick start guides, tutorials, and API reference to help you start building with Ably’s platform and APIs.
|
|
19
19
|
</p>
|
|
20
20
|
|
|
21
|
-
<FeaturedLink url={absUrl("/
|
|
21
|
+
<FeaturedLink url={absUrl("/docs")}>Visit Documentation</FeaturedLink>
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
24
|
<div>
|
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
--color-gui-viewed: #4887c2;
|
|
20
20
|
--color-gui-unavailable: #a8a8a8;
|
|
21
21
|
--color-gui-error: #fb0c0c;
|
|
22
|
+
--color-gui-success: #11cb24;
|
|
22
23
|
|
|
23
24
|
/* code syntax: theme */
|
|
24
25
|
--syntax-black: var(--color-cool-black);
|
|
25
26
|
--syntax-dark-grey: var(--color-dark-grey);
|
|
26
27
|
--syntax-mid-grey: var(--color-mid-grey);
|
|
27
28
|
--syntax-light-grey: var(--color-light-grey);
|
|
28
|
-
|
|
29
29
|
--syntax-orange: #e78c45;
|
|
30
30
|
--syntax-yellow: #e7c547;
|
|
31
31
|
--syntax-blue: #3490ec;
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
|
|
155
155
|
alternatively, look for ui-grid-* helpers. */
|
|
156
156
|
--bp-xs: 375px; /* gutters 8px, side-margin 24px */
|
|
157
|
-
--bp-sm:
|
|
157
|
+
--bp-sm: 768px; /* gutters 16px, side-margin 32px */
|
|
158
158
|
--bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
|
|
159
159
|
--bp-lg: 1280px; /* gutters 24px, side-margin 64px */
|
|
160
160
|
--bp-xl: 1440px; /* gutters 32px, side-margin 64px */
|
package/tailwind.config.js
CHANGED
|
@@ -76,6 +76,7 @@ module.exports = {
|
|
|
76
76
|
"gui-viewed": "var(--color-gui-viewed)",
|
|
77
77
|
"gui-unavailable": "var(--color-gui-unavailable)",
|
|
78
78
|
"gui-error": "var(--color-gui-error)",
|
|
79
|
+
"gui-success": "var(--color-gui-success)",
|
|
79
80
|
"icon-linkedin": "var(--icon-color-linkedin)",
|
|
80
81
|
"icon-twitter": "var(--icon-color-twitter)",
|
|
81
82
|
"icon-glassdoor": "var(--icon-color-glassdoor)",
|