@ably/ui 8.7.0-dev.dc2ec3f → 8.7.0-dev.dcf62f2

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 (7) hide show
  1. package/README.md +7 -3
  2. package/core/Footer/component.css +1 -1
  3. package/core/Footer.jsx +15 -15
  4. package/package.json +1 -1
  5. package/src/core/Footer/component.css +1 -1
  6. package/src/core/Footer/component.html.erb +14 -14
  7. package/src/core/Footer/component.jsx +15 -15
package/README.md CHANGED
@@ -294,10 +294,14 @@ To deploy a review app with your in-progress code, you can use the `pre-release`
294
294
  scripts/pre-release.sh
295
295
  ```
296
296
 
297
- This will do a couple of things:
297
+ This script is a combination of two scripts:
298
298
 
299
- — update your local dependencies for ably-ui and run a production build
300
- — release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
299
+ 1. Pre-Release:
300
+
301
+ - update your local dependencies for ably-ui and run a production build
302
+ - release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
303
+
304
+ 2. Update Pre-Release Version:
301
305
 
302
306
  - update the preview app
303
307
  - commit all the above and push to origin
package/core/Footer/component.css CHANGED
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  .ui-footer-link {
11
- @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
12
12
  }
13
13
 
14
14
  .ui-footer-compliance-text {
package/core/Footer.jsx CHANGED
@@ -327,12 +327,12 @@ function Footer(_ref) {
327
327
  href: absUrl("/download"),
328
328
  className: "ui-footer-menu-row-link"
329
329
  }, "SDKs")), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("li", {
330
- className: "p-menu-row-snug flex items-center"
330
+ className: "p-menu-row-snug flex items-center -mt-4"
331
331
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
332
332
  className: "pr-8 ui-footer-menu-row-link",
333
333
  href: "https://status.ably.com/"
334
334
  }, "System status"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("iframe", {
335
- className: "w-24 h-24 mt-4",
335
+ className: "w-20 h-20 mb-2",
336
336
  src: "https://status.ably.com/embed/icon",
337
337
  allowtransparency: "true",
338
338
  frameBorder: "0",
@@ -416,7 +416,7 @@ function Footer(_ref) {
416
416
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("hr", {
417
417
  className: "border-t border-mid-grey my-0"
418
418
  })), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
419
- className: "max-w-screen-xl mx-auto py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2 "
419
+ className: "max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2"
420
420
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
421
421
  className: "md:flex md:items-center"
422
422
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
@@ -478,7 +478,7 @@ function Footer(_ref) {
478
478
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
479
479
  className: "flex py-24"
480
480
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("a", {
481
- className: "h-24 pr-24 text-cool-black hover:text-icon-glassdoor",
481
+ className: "h-24 pr-16 text-cool-black hover:text-icon-glassdoor",
482
482
  href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
483
483
  title: "Ably reviews on glassdoor"
484
484
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
@@ -492,17 +492,17 @@ function Footer(_ref) {
492
492
  href: "https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm",
493
493
  className: "ui-footer-link"
494
494
  }, "Learn more at Glassdoor"))))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
495
- className: "col-span-full sm:col-span-1 inline-flex sm:ml-auto"
495
+ className: "col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center"
496
496
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
497
- className: "mr-24 w-96 h-96",
497
+ className: "mr-24 h-80",
498
498
  src: paths.highestUserAdoption,
499
499
  alt: "Highest User Adoption 2022"
500
500
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
501
- className: "mr-24 w-96 h-96",
501
+ className: "mr-24 h-80",
502
502
  src: paths.usersLoveUs,
503
503
  alt: "Users Love Us"
504
504
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("img", {
505
- className: "mr-24 w-96 h-96",
505
+ className: "mr-24 h-80",
506
506
  src: paths.highestPerformer,
507
507
  alt: "High Performer 2022"
508
508
  }))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
@@ -528,7 +528,7 @@ function Footer(_ref) {
528
528
  href: absUrl("/privacy"),
529
529
  className: "ui-footer-link"
530
530
  }, "Privacy"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
531
- className: "xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 "
531
+ className: "xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end"
532
532
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
533
533
  className: "flex mr-24"
534
534
  }, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement(component.default, {
@@ -546,9 +546,9 @@ function Footer(_ref) {
546
546
  name: "icon-gui-tick",
547
547
  color: "text-active-orange",
548
548
  size: "1.5rem",
549
- additionalCSS: "bg-white rounded-full mr-12"
549
+ additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
550
550
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
551
- className: "ui-footer-compliance-text font-medium"
551
+ className: "ui-footer-compliance-text font-medium whitespace-nowrap"
552
552
  }, "HIPAA"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
553
553
  className: "ui-footer-compliance-text font-light mb-24"
554
554
  }, "Compliant"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
@@ -557,9 +557,9 @@ function Footer(_ref) {
557
557
  name: "icon-gui-tick",
558
558
  color: "text-active-orange",
559
559
  size: "1.5rem",
560
- additionalCSS: "bg-white rounded-full mr-12"
560
+ additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
561
561
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
562
- className: "ui-footer-compliance-text font-medium"
562
+ className: "ui-footer-compliance-text font-medium whitespace-nowrap"
563
563
  }, "EU GDPR"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
564
564
  className: "ui-footer-compliance-text font-light mb-24"
565
565
  }, "Certified"))), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", {
@@ -568,9 +568,9 @@ function Footer(_ref) {
568
568
  name: "icon-gui-tick",
569
569
  color: "text-active-orange",
570
570
  size: "1.5rem",
571
- additionalCSS: "bg-white rounded-full mr-12"
571
+ additionalCSS: "bg-white rounded-full mr-12 ui-footer-tick-icon"
572
572
  }), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("div", null, /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
573
- className: "ui-footer-compliance-text font-medium"
573
+ className: "ui-footer-compliance-text font-medium whitespace-nowrap"
574
574
  }, "256-bit AES"), /*#__PURE__*/external_commonjs_react_commonjs2_react_default().createElement("p", {
575
575
  className: "ui-footer-compliance-text font-light mb-24"
576
576
  }, "Encryption"))))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "8.7.0-dev.dc2ec3f",
3
+ "version": "8.7.0-dev.dcf62f2",
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/Footer/component.css CHANGED
@@ -8,7 +8,7 @@
8
8
  }
9
9
 
10
10
  .ui-footer-link {
11
- @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
11
+ @apply text-gui-default hover:text-gui-hover text-menu3 font-light;
12
12
  }
13
13
 
14
14
  .ui-footer-compliance-text {
package/src/core/Footer/component.html.erb CHANGED
@@ -87,9 +87,9 @@
87
87
  <li class="p-menu-row-snug">
88
88
  <%= link_to 'SDKs', abs_url("/download"), class: "ui-footer-menu-row-link" %>
89
89
  </li>
90
- <li class="p-menu-row-snug flex items-center">
90
+ <li class="p-menu-row-snug flex items-center -mt-4">
91
91
  <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
92
- <iframe class="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
92
+ <iframe class="w-20 h-20 mb-2" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
93
93
  </li>
94
94
  </ul>
95
95
  </div>
@@ -147,7 +147,7 @@
147
147
  <hr class="border-t border-mid-grey my-0"/>
148
148
  </div>
149
149
  <%# Twitter + Glassdoor SM * above + Glassdoor XS + Badges %>
150
- <div class="max-w-screen-xl mx-auto py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
150
+ <div class="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
151
151
  <div class="md:flex md:items-center">
152
152
  <div class="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
153
153
  <div class="">
@@ -194,7 +194,7 @@
194
194
  <div class="border-t border-mid-grey w-full"></div>
195
195
  <div class="flex py-24">
196
196
  <a
197
- class="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
197
+ class="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
198
198
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
199
199
  title="Ably reviews on glassdoor"
200
200
  >
@@ -210,9 +210,9 @@
210
210
  </div>
211
211
  </div>
212
212
  <div class="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
213
- <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 w-96 h-96") %>
214
- <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 w-96 h-96") %>
215
- <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 w-96 h-96") %>
213
+ <%= image_tag(highest_user_adoption, alt: "Highest User Adoption 2022", class: "mr-24 h-80") %>
214
+ <%= image_tag(users_love_us, alt: "Users Love Us", class: "mr-24 h-80") %>
215
+ <%= image_tag(highest_performer, alt: "High Performer 2022", class: "mr-24 h-80") %>
216
216
  </div>
217
217
  </div>
218
218
  <div class="max-w-screen-xl ui-grid-px mx-auto">
@@ -227,7 +227,7 @@
227
227
  <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
228
228
  </div>
229
229
  </div>
230
- <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-0 ">
230
+ <div class="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
231
231
  <div class="flex mr-24">
232
232
  <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
233
233
  <div>
@@ -236,23 +236,23 @@
236
236
  </div>
237
237
  </div>
238
238
  <div class="flex mr-24 md:col-start-2">
239
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
239
+ <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
240
240
  <div>
241
- <p class="ui-footer-compliance-text font-medium">HIPAA</p>
241
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
242
242
  <p class="ui-footer-compliance-text font-light mb-24">Compliant</p>
243
243
  </div>
244
244
  </div>
245
245
  <div class="flex mr-24 md:col-start-3">
246
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
246
+ <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
247
247
  <div>
248
- <p class="ui-footer-compliance-text font-medium">EU GDPR</p>
248
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
249
249
  <p class="ui-footer-compliance-text font-light mb-24">Certified</p>
250
250
  </div>
251
251
  </div>
252
252
  <div class="flex mr-24 md:col-start-4">
253
- <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12")) %>
253
+ <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", color: "text-active-orange", size: "1.5rem", additional_css:"bg-white rounded-full mr-12 ui-footer-tick-icon")) %>
254
254
  <div>
255
- <p class="ui-footer-compliance-text font-medium">256-bit AES</p>
255
+ <p class="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
256
256
  <p class="ui-footer-compliance-text font-light mb-24">Encryption</p>
257
257
  </div>
258
258
  </div>
package/src/core/Footer/component.jsx CHANGED
@@ -144,12 +144,12 @@ export default function Footer({ paths, urlBase }) {
144
144
  SDKs
145
145
  </a>
146
146
  </li>
147
- <li className="p-menu-row-snug flex items-center">
147
+ <li className="p-menu-row-snug flex items-center -mt-4">
148
148
  <a className="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">
149
149
  System status
150
150
  </a>
151
151
  <iframe
152
- className="w-24 h-24 mt-4"
152
+ className="w-20 h-20 mb-2"
153
153
  src="https://status.ably.com/embed/icon"
154
154
  allowtransparency="true"
155
155
  frameBorder="0"
@@ -241,7 +241,7 @@ export default function Footer({ paths, urlBase }) {
241
241
  <hr className="border-t border-mid-grey my-0" />
242
242
  </div>
243
243
  {/* Twitter + Glassdoor SM * above + Glassdoor XS + Badges*/}
244
- <div className="max-w-screen-xl mx-auto py-32 grid ui-grid-gap ui-grid-px sm:grid-cols-2 ">
244
+ <div className="max-w-screen-xl mx-auto py-16 grid ui-grid-gap ui-grid-px sm:grid-cols-2">
245
245
  <div className="md:flex md:items-center">
246
246
  <div className="flex flex-col md:flex-row flex-auto ml-8 sm:col-span-1 md:col-span-2">
247
247
  <div className="">
@@ -288,7 +288,7 @@ export default function Footer({ paths, urlBase }) {
288
288
  <div className="border-t border-mid-grey w-full"></div>
289
289
  <div className="flex py-24">
290
290
  <a
291
- className="h-24 pr-24 text-cool-black hover:text-icon-glassdoor"
291
+ className="h-24 pr-16 text-cool-black hover:text-icon-glassdoor"
292
292
  href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
293
293
  title="Ably reviews on glassdoor"
294
294
  >
@@ -304,10 +304,10 @@ export default function Footer({ paths, urlBase }) {
304
304
  </div>
305
305
  </div>
306
306
 
307
- <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto">
308
- <img className="mr-24 w-96 h-96" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
309
- <img className="mr-24 w-96 h-96" src={paths.usersLoveUs} alt="Users Love Us" />
310
- <img className="mr-24 w-96 h-96" src={paths.highestPerformer} alt="High Performer 2022" />
307
+ <div className="col-span-full sm:col-span-1 inline-flex sm:ml-auto sm:items-center">
308
+ <img className="mr-24 h-80" src={paths.highestUserAdoption} alt="Highest User Adoption 2022" />
309
+ <img className="mr-24 h-80" src={paths.usersLoveUs} alt="Users Love Us" />
310
+ <img className="mr-24 h-80" src={paths.highestPerformer} alt="High Performer 2022" />
311
311
  </div>
312
312
  </div>
313
313
 
@@ -331,7 +331,7 @@ export default function Footer({ paths, urlBase }) {
331
331
  </a>
332
332
  </div>
333
333
  </div>
334
- <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 md:pl-0 ">
334
+ <div className="xs:grid xs:grid-cols-2 sm:grid-cols-4 xs:pl-16 sm:pl-8 md:justify-items-end">
335
335
  <div className="flex mr-24">
336
336
  <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
337
337
  <div>
@@ -340,23 +340,23 @@ export default function Footer({ paths, urlBase }) {
340
340
  </div>
341
341
  </div>
342
342
  <div className="flex mr-24 md:col-start-2">
343
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
343
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
344
344
  <div>
345
- <p className="ui-footer-compliance-text font-medium">HIPAA</p>
345
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">HIPAA</p>
346
346
  <p className="ui-footer-compliance-text font-light mb-24">Compliant</p>
347
347
  </div>
348
348
  </div>
349
349
  <div className="flex mr-24 md:col-start-3">
350
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
350
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
351
351
  <div>
352
- <p className="ui-footer-compliance-text font-medium">EU GDPR</p>
352
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">EU GDPR</p>
353
353
  <p className="ui-footer-compliance-text font-light mb-24">Certified</p>
354
354
  </div>
355
355
  </div>
356
356
  <div className="flex mr-24 md:col-start-4">
357
- <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12" />
357
+ <Icon name="icon-gui-tick" color="text-active-orange" size="1.5rem" additionalCSS="bg-white rounded-full mr-12 ui-footer-tick-icon" />
358
358
  <div>
359
- <p className="ui-footer-compliance-text font-medium">256-bit AES</p>
359
+ <p className="ui-footer-compliance-text font-medium whitespace-nowrap">256-bit AES</p>
360
360
  <p className="ui-footer-compliance-text font-light mb-24">Encryption</p>
361
361
  </div>
362
362
  </div>