ably-ui 4.2.0.dev.1a5533f

data/lib/ably_ui/core/styles.css

@@ -0,0 +1,332 @@
+@layer base {
+  :root {
+    --color-cool-black: #03020d;
+    --color-active-orange: #ff5416;
+    --color-red-orange: #e40000;
+    --color-white: #ffffff;
+    --color-electric-cyan: #4af7ff;
+    --color-zingy-green: #08ff13;
+    --color-bright-red: #ff2739;
+    --color-jazzy-pink: #ff17d2;
+    --color-light-grey: #f5f5f6;
+    --color-mid-grey: #dbdbdc;
+    --color-dark-grey: #76767c;
+    --color-charcoal-grey: #292831;
+    --color-gui-default: #0073e6;
+    --color-gui-hover: #0867c4;
+    --color-gui-focus: #80b9f2;
+    --color-gui-active: #074095;
+    --color-gui-viewed: #4887c2;
+    --color-gui-unavailable: #a8a8a8;
+    --color-gui-error: #fb0c0c;
+
+    /* code syntax: theme */
+    --syntax-black: var(--color-cool-black);
+    --syntax-dark-grey: var(--color-dark-grey);
+    --syntax-mid-grey: var(--color-mid-grey);
+    --syntax-light-grey: var(--color-light-grey);
+
+    --syntax-orange: #e78c45;
+    --syntax-yellow: #e7c547;
+    --syntax-blue: #3490ec;
+    --syntax-green: #b9ca4a;
+    --syntax-red: #d54e53;
+    --syntax-lilac: #bb87d3;
+
+    /* uptime status colors */
+    --uptime-color-up: #39b54a;
+    --uptime-color-trouble: #e87623;
+    --uptime-color-down: #e6242c;
+
+    /* flat colors for social icons */
+    --icon-color-linkedin: #1269bf;
+    --icon-color-twitter: #2caae1;
+    --icon-color-glassdoor: #0baa41;
+    --icon-color-github: #000000;
+
+    --gradient-active-orange: linear-gradient(
+      62deg,
+      var(--color-active-orange) 0,
+      var(--color-active-orange) 60%,
+      var(--color-red-orange) 100%
+    );
+
+    --fs-title-xl: 4rem;
+    --fs-title: 3.5rem;
+    --fs-title-xs: 3rem;
+    --fs-h1-xl: 3.5rem;
+    --fs-h1: 3rem;
+    --fs-h1-xs: 2.625rem;
+    --fs-h2-xl: 2.5rem;
+    --fs-h2: 2rem;
+    --fs-h2-xs: 1.875rem;
+    --fs-h3: 1.5rem;
+    --fs-h4: 1.125rem;
+    --fs-p1: 1.125rem;
+    --fs-p2: 1rem;
+    --fs-p3: 0.875rem;
+    --fs-standfirst-xl: 2.25rem;
+    --fs-standfirst: 1.5rem;
+    --fs-sub-header: 1.5rem;
+    --fs-sub-header-xs: 1.125rem;
+    --fs-overline1: 1rem;
+    --fs-overline2: 0.875rem;
+    --fs-btn1: 1.125rem;
+    --fs-btn2: 1rem;
+    --fs-menu1: 1.125rem;
+    --fs-menu2: 1rem;
+    --fs-menu3: 0.875rem;
+    --fs-quote: 1.5rem;
+
+    --lh-tight: 1.125;
+    --lh-snug: 1.15;
+    --lh-normal: 1.25;
+    --lh-relaxed: 1.45;
+
+    --ls-tighten-0_025: -0.025em;
+    --ls-tighten-0_02: -0.02em;
+    --ls-tighten-0_015: -0.015em;
+    --ls-tighten-0_01: -0.01em;
+    --ls-tighten-0_005: -0.005em;
+    --ls-tighten-0_0025: -0.0025em;
+    --ls-widen-0_1: 0.1em;
+    --ls-widen-0_15: 0.15em;
+
+    --spacing-0: 0px;
+    --spacing-1: 1px;
+    --spacing-4: 0.25rem;
+    --spacing-8: 0.5rem;
+    --spacing-12: 0.75rem;
+    --spacing-14: 0.875rem;
+    --spacing-16: 1rem;
+    --spacing-20: 1.25rem;
+    --spacing-24: 1.5rem;
+    --spacing-32: 2rem;
+    --spacing-40: 2.5rem;
+    --spacing-48: 3rem;
+    --spacing-64: 4rem;
+    --spacing-72: 4.5rem;
+    --spacing-80: 5rem;
+    --spacing-88: 5.5rem;
+    --spacing-96: 6rem;
+    --spacing-160: 10rem;
+    --spacing-256: 16rem;
+
+    --spacing-btn: 0.9375rem 1.5rem; /* 15px 24px */
+    --spacing-btn-small: 0.6875rem 1rem; /* 11px 16px */
+    --spacing-menu-row: 0.625rem 0.5rem 0.6875rem; /* 10px 8px 11px */
+    --spacing-menu-row-snug: 0.4375rem 0.5rem 0.375rem; /* 7px 8px 6px */
+    --spacing-menu-row-title: 0.6875rem 0.5rem; /* 11px 8px */
+    --spacing-media: 0.5rem; /* 8px */
+    --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
+    --spacing-overline: 0.6875rem 0; /* 11px 0 */
+
+    /* In components, when looking at implementing viewport margin and spacing between elements,
+       the values in the comments can be used as guide as they represent the grid the elements (should) sit on.
+       alternatively, look for ui-grid-* helpers. */
+    --bp-xs: 375px; /* gutters 8px, side-margin 24px */
+    --bp-sm: 600px; /* gutters 16px, side-margin 32px */
+    --bp-md: 1040px; /* gutters 24px, side-margin 40px, meganav desktop */
+    --bp-lg: 1280px; /* gutters 24px, side-margin 64px */
+    --bp-xl: 1440px; /* gutters 32px, side-margin 64px */
+
+    /* Page stacking context. If components create new stacking contexts z-index values should be defined within them. */
+    --stacking-context-page-meganav: 100;
+
+    /* Expose component values for cross-component usage */
+    --ui-meganav-height: 4rem;
+    --ui-showcase-client-logo-min-width: 8.75rem; /* 140px at 16px base*/
+    --ui-showcase-client-logo-max-width: 15rem; /* 240px at 16px base*/
+  }
+}
+@layer components {
+  .ui-btn {
+    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply hover:text-white hover:bg-active-orange;
+    @apply active:text-white active:bg-red-orange;
+    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable;
+    @apply transition-colors;
+  }
+
+  .ui-btn-invert {
+    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block rounded p-btn;
+    @apply hover:text-white hover:bg-active-orange;
+    @apply active:text-white active:bg-red-orange;
+    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+    @apply disabled:text-mid-grey disabled:bg-gui-unavailable;
+    @apply transition-colors;
+  }
+
+  .ui-btn-secondary {
+    @apply text-cool-black bg-white text-btn2 font-sans font-medium inline-block border-btn border-cool-black rounded p-btn;
+    @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
+    @apply active:border-red-orange active:bg-white;
+    @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white;
+    @apply transition-colors;
+  }
+
+  .ui-btn-secondary-invert {
+    @apply text-white bg-cool-black text-btn2 font-sans font-medium inline-block border-btn border-mid-grey rounded p-btn;
+    @apply hover:text-white hover:border-active-orange;
+    @apply active:border-red-orange;
+    @apply focus:outline-gui-focus;
+    @apply disabled:text-gui-unavailable disabled:border-gui-unavailable;
+    @apply transition-colors;
+  }
+}
+@layer components {
+  .ui-standard-container {
+    @apply w-full max-w-screen-xl mx-auto px-24 sm:px-32 md:px-40 lg:px-64;
+  }
+
+  .ui-grid-gap {
+    @apply gap-8 sm:gap-16 md:gap-24 xl:gap-32;
+  }
+
+  .ui-grid-px {
+    @apply px-24 sm:px-32 md:px-40 lg:px-64;
+  }
+
+  .ui-grid-mx {
+    @apply mx-24 sm:mx-32 md:mx-40 lg:mx-64;
+  }
+}
+@layer components {
+  .ui-text-title {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-title-xs xs:text-title xl:text-title-xl;
+    @apply tracking-tighten-0.01 xs:tracking-tighten-0.015 xl:tracking-tighten-0.02;
+  }
+
+  .ui-text-h1 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-h1-xs xs:text-h1 xl:text-h1-xl;
+    @apply tracking-tighten-0.01;
+  }
+
+  .ui-text-h2 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-h2-xs xs:text-h2 xl:text-h2-xl;
+    @apply tracking-tighten-0.01;
+  }
+
+  .ui-text-h3 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-h3;
+    @apply tracking-tighten-0.0025;
+  }
+
+  .ui-text-h4 {
+    @apply font-sans font-medium text-cool-black;
+    @apply text-h4;
+    @apply tracking-widen-0.1;
+  }
+
+  .ui-text-p1 {
+    @apply font-sans font-light text-cool-black;
+    @apply text-p1;
+  }
+
+  .ui-text-p2 {
+    @apply font-sans font-light text-cool-black;
+    @apply text-p2;
+  }
+
+  .ui-text-p3 {
+    @apply font-sans font-light text-cool-black;
+    @apply text-p3;
+  }
+
+  .ui-text-standfirst {
+    @apply font-sans font-light text-active-orange;
+    @apply text-standfirst xl:text-standfirst-xl;
+    @apply tracking-tighten-0.025 xl:tracking-tighten-0.015;
+  }
+
+  .ui-text-quote {
+    @apply font-sans font-light text-cool-black;
+    @apply text-quote;
+    @apply tracking-tighten-0.025;
+  }
+
+  .ui-text-sub-header {
+    @apply font-sans font-light text-dark-grey;
+    @apply text-sub-header-xs xs:text-sub-header;
+    @apply tracking-tighten-0.025;
+  }
+
+  .ui-text-overline1 {
+    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply text-overline1;
+    @apply tracking-widen-0.15;
+  }
+
+  .ui-text-overline2 {
+    @apply font-sans font-medium text-dark-grey uppercase;
+    @apply text-overline2;
+    @apply tracking-widen-0.1;
+  }
+
+  .ui-text-menu1 {
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu1;
+  }
+
+  .ui-text-menu2 {
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu2;
+  }
+
+  .ui-text-menu3 {
+    @apply font-sans font-light text-cool-black;
+    @apply text-menu3;
+  }
+}
+@layer components {
+  .ui-input {
+    @apply text-p2 font-light bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-input;
+    @apply hover:bg-white hover:shadow-input hover:border-transparent;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+    @apply max-w-screen-sm;
+  }
+
+  /* Basis for icon component */
+  .ui-icon-cool-black {
+    stroke: var(--color-cool-black);
+  }
+
+  .ui-icon-white {
+    stroke: var(--color-white);
+  }
+
+  .ui-icon-dark-grey {
+    stroke: var(--color-dark-grey);
+  }
+
+  /* Extend how tailwind does group hover for icons */
+  .group {
+    &:hover {
+      .group-hover\:icon-gui-hover {
+        stroke: var(--color-gui-hover);
+      }
+    }
+
+    &:focus {
+      .group-focus\:icon-gui-focus {
+        stroke: var(--color-gui-focus);
+      }
+    }
+  }
+
+  .ui-version-tag {
+    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;
+
+    position: relative;
+    vertical-align: super;
+    margin-left: 3px;
+    font-size: 8px;
+  }
+}
+

data/lib/ably_ui/core/uptime/component.css

@@ -0,0 +1,129 @@
+@layer components {
+  .ui-uptime-widget {
+    --status-up: var(--uptime-color-up);
+    --status-trouble: var(--uptime-color-trouble);
+    --status-down: var(--uptime-color-down);
+    --ui-uptime-key-size: 1.625rem;
+    --tooltip-offset: 3.5rem;
+
+    @apply font-sans antialiased;
+  }
+
+  .ui-uptime-list {
+    @apply flex flex-wrap flex-row list-none p-0 m-0 items-center;
+  }
+
+  .ui-uptime-day {
+    @apply h-40 relative flex-auto p-0 my-0 mx-1 bg-cool-black;
+  }
+
+  .ui-uptime-day span {
+    @apply absolute text-p3 border rounded-lg border-light-grey;
+    @apply py-12 px-16 shadow-tooltip text-cool-black;
+    @apply bg-white text-left z-10 hidden;
+    @apply overflow-y-hidden not-italic leading-tight;
+    @apply whitespace-nowrap;
+
+    transform: translateX(-50%);
+    max-height: 12rem;
+    bottom: 130%;
+  }
+
+  .ui-uptime-day:hover {
+    filter: brightness(1.2);
+    @apply z-10;
+  }
+
+  .ui-uptime-day:hover span {
+    display: block;
+  }
+
+  .ui-uptime-day.ui-uptime-align-left span {
+    left: 0;
+  }
+
+  .ui-uptime-day.ui-uptime-align-right span {
+    right: 0;
+  }
+
+  .ui-uptime-day .ui-uptime-width-wide {
+    @apply whitespace-normal;
+    width: 8rem;
+  }
+
+  .ui-uptime-day .ui-uptime-width-extra-wide {
+    @apply whitespace-normal;
+    width: 12rem;
+  }
+
+  .ui-uptime-seperator {
+    @apply my-12 h-1 w-full relative;
+    @apply sm:w-32 sm:h-80 sm:m-0 sm:bg-none;
+  }
+
+  .ui-uptime-seperator:before {
+    content: "";
+    left: 48%;
+    @apply sm:absolute sm:h-full sm:w-1 sm:bg-dark-grey sm:z-0;
+  }
+
+  .ui-uptime-up {
+    background: var(--status-up);
+  }
+
+  .ui-uptime-trouble {
+    background: var(--status-trouble);
+  }
+
+  .ui-uptime-down {
+    background: var(--status-down);
+  }
+
+  .ui-uptime-legend {
+    @apply flex flex-col sm:flex-row sm:items-center;
+  }
+
+  .ui-uptime-key {
+    @apply block mt-16 mr-20 bg-transparent;
+    @apply sm:inline-block sm:mt-0;
+    @apply font-light text-p2 text-white block sm:inline-flex items-center;
+  }
+
+  .ui-uptime-key:first-child {
+    @apply mt-0;
+  }
+
+  .ui-uptime-key::before {
+    content: " ";
+    width: var(--ui-uptime-key-size);
+    height: var(--ui-uptime-key-size);
+    @apply inline-block mr-16 bg-cool-black align-text-bottom rounded-full;
+  }
+
+  .ui-uptime-key.ui-uptime-up:before {
+    background: var(--status-up);
+  }
+
+  .ui-uptime-key.ui-uptime-trouble:before {
+    background: var(--status-trouble);
+  }
+
+  .ui-uptime-key.ui-uptime-down:before {
+    background: var(--status-down);
+  }
+
+  .ui-uptime-footer {
+    @apply mt-40 flex justify-between items-start flex-col;
+    @apply sm:flex-row sm:items-center;
+  }
+
+  .ui-uptime-link-back {
+    @apply mt-40 whitespace-nowrap;
+    @apply sm:mt-0;
+  }
+
+  .ui-uptime-link-back a {
+    @apply text-p1 text-gui-default font-medium no-underline;
+  }
+}
+

data/lib/ably_ui/core/uptime/component.js

@@ -0,0 +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.Uptime=t())}(this,(function(){return(()=>{"use strict";var e={};return e.default})()}));

data/lib/ably_ui/core/uptime/uptime.rb

@@ -0,0 +1,7 @@
+module AblyUi
+  module Core
+    class Uptime < ViewComponent::Base
+      include AblyUi::Core::Util
+    end
+  end
+end

data/lib/ably_ui/reset/scripts.js

@@ -0,0 +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.Reset=t())}(this,(function(){return(()=>{"use strict";var e={};return(e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})()}));