ably-ui 4.2.0.dev.1a5533f

data/lib/ably_ui/core/fonts/next.css

@@ -0,0 +1,59 @@
+/* LEGAL DISCLAIMER
+ *
+ * These Fonts are licensed only for use on these domains and their subdomains:
+ * ably.com
+ *
+ * It is illegal to download or use them on other websites.
+ *
+ * While the @font-face statements below may be modified by the client, this
+ * disclaimer may not be removed.
+ *
+ * Optimo webfonts are protected by copyright law and provided under license. To modify, alter, translate, convert, decode or reverse engineer in any manner whatsoever, including converting the Font Software into a different format is strictly prohibited. The webfont files are not to be used for anything other than web font use.
+ *
+ * optimo.ch
+ */
+
+/* INSTRUCTIONS
+ *
+ * Copy the Legal Disclaimer, the domains name and the @font-faces statements to your regular CSS file. The fonts folder(s) should be placed relative to the regular CSS file.
+ */
+
+@font-face {
+  font-family: "NEXT Book";
+  src: url("NEXT-Book-Light.eot");
+  src: url("NEXT-Book-Light.eot?#iefix") format("embedded-opentype"),
+    url("NEXT-Book-Light.woff2") format("woff2"),
+    url("NEXT-Book-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "NEXT Book";
+  src: url("NEXT-Book-Light-Italic.eot");
+  src: url("NEXT-Book-Light-Italic.eot?#iefix") format("embedded-opentype"),
+    url("NEXT-Book-Light-Italic.woff2") format("woff2"),
+    url("NEXT-Book-Light-Italic.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "NEXT Book";
+  src: url("NEXT-Book-Medium.eot");
+  src: url("NEXT-Book-Medium.eot?#iefix") format("embedded-opentype"),
+    url("NEXT-Book-Medium.woff2") format("woff2"),
+    url("NEXT-Book-Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "NEXT Book";
+  src: url("NEXT-Book-Medium-Italic.eot");
+  src: url("NEXT-Book-Medium-Italic.eot?#iefix") format("embedded-opentype"),
+    url("NEXT-Book-Medium-Italic.woff2") format("woff2"),
+    url("NEXT-Book-Medium-Italic.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}

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

@@ -0,0 +1,14 @@
+@layer components {
+  .ui-footer-col-title {
+    @apply text-overline2 p-menu-row-title font-normal uppercase tracking-widen-0.1;
+  }
+
+  .ui-footer-menu-row-link {
+    @apply text-menu3 text-cool-black font-light hover:text-gui-hover block;
+  }
+
+  .ui-footer-link {
+    @apply text-gui-default hover:text-gui-hover hover:underline text-menu3 font-light;
+  }
+}
+

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

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

data/lib/ably_ui/core/footer/footer.html.erb

@@ -0,0 +1,190 @@
+<footer class="bg-light-grey font-sans antialiased" data-id="footer">
+  <div class="max-w-screen-xl mx-auto py-32 sm:py-40 lg:py-64 ui-grid-gap ui-grid-px grid grid-cols-6">
+    <div class="col-span-full md:col-span-2">
+      <div class="flex flex-row p-menu-row-snug">
+        <%= image_tag(ably_stack_path, alt: "Ably homepage", class: "mr-24 -mt-16") %>
+        <h2 class="text-overline2 col-span-full font-medium uppercase tracking-widen-0.1">The Ably Platform</h2>
+      </div>
+
+      <div class="grid grid-cols-4">
+        <p class="text-p3 py-16 font-medium p-menu-row-snug col-span-3">
+          Easily power any realtime experience in your application via a simple API that handles everything realtime.
+        </p>
+      </div>
+
+      <ul class="grid gap-x-8 sm:gap-x-16 md:gap-x-24 xl:gap-x-32 sm:grid-cols-2 md:grid-cols-1">
+        <li class="p-menu-row-snug">
+          <%= link_to 'Pub/sub messaging', abs_url("/pub-sub-messaging"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Push notifications', abs_url("/push-notifications"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Third-party integrations', abs_url("/integrations"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Multiple protocol messaging', abs_url("/protocols"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Streaming data sources', abs_url("/hub"), class: "ui-footer-menu-row-link" %>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">Ably is for</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <%= link_to 'EdTech', abs_url("/solutions/edtech"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Automotive, Logistics, & Mobility', abs_url("/solutions/automotive-logistics-and-mobility"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'B2B Platforms', abs_url("/solutions/b2b-platforms"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Healthcare', abs_url("/solutions/healthcare"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Streaming data sources', abs_url("/hub"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'eCommerce & Retail', abs_url("/solutions/ecommerce-and-retail"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Sports & Media', abs_url("/solutions/sports-and-media"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Gaming', abs_url("/solutions/gaming"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'IoT & Connected Devices', abs_url("/solutions/iot-and-connected-devices"), class: "ui-footer-menu-row-link" %>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">Developers</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Start in 5 minutes', abs_url("/documentation/quick-start-guide"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Documentation', abs_url("/documentation"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Tutorials', abs_url("/tutorials"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="https://changelog.ably.com/" class="ui-footer-menu-row-link">Changelog</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Support & FAQs', abs_url("/support"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'SDKs', abs_url("/download"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug flex items-center">
+          <a class="pr-8 ui-footer-menu-row-link" href="https://status.ably.com/">System status</a>
+          <iframe class="w-24 h-24 mt-4" src="https://status.ably.com/embed/icon" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">WHY ABLY</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Customers', abs_url("/customers"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Case Studies', abs_url("/case-studies"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Four Pillars of Dependability', abs_url("/four-pillars-of-dependability"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Compare our tech', abs_url("/compare"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Multi protocol support', abs_url("/protocols"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Third-party integrations', abs_url("/integrations"), class: "ui-footer-menu-row-link" %>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-span-full sm:col-span-3 md:col-span-1">
+      <h2 class="ui-footer-col-title">ABOUT</h2>
+      <ul>
+        <li class="p-menu-row-snug">
+          <%= link_to 'About Ably', abs_url("/about"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Pricing', abs_url("/pricing"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Blog', abs_url("/blog"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Careers', abs_url("/careers"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Open protocol policy', abs_url("/open-policy"), class: "ui-footer-menu-row-link" %>
+        </li>
+        <li class="p-menu-row-snug">
+          <a href="https://www.notion.so/ably/Ably-Press-Center-551152f5be724d4495a7c2e29d9f51c7" target="_blank" rel="noopener" class="ui-footer-menu-row-link">Press & Media</a>
+        </li>
+        <li class="p-menu-row-snug">
+          <%= link_to 'Contact us', abs_url("/contact"), class: "ui-footer-menu-row-link" %>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="max-w-screen-xl ui-grid-px mx-auto">
+    <hr class="border-t border-mid-grey" />
+  </div>
+
+  <div class="max-w-screen-xl mx-auto py-24 md:py-40 lg:py-32 grid ui-grid-gap ui-grid-px grid-cols-2">
+    <div class="flex flex-col flex-auto pb-40 ml-8 col-span-full md:col-span-1">
+      <div class="inline-flex">
+        <%= link_to 'Cookies', abs_url("/privacy"), class: "ui-footer-link pr-24" %>
+        <%= link_to 'Legals', abs_url("/legals"), class: "ui-footer-link pr-24" %>
+        <%= link_to 'Data Protection', abs_url("/data-protection"), class: "ui-footer-link pr-24" %>
+        <%= link_to 'Privacy', abs_url("/privacy"), class: "ui-footer-link" %>
+      </div>
+
+      <div class="pt-32 flex items-center">
+        <a class="h-24 pr-24 text-cool-black hover:text-icon-twitter" href="https://twitter.com/ablyrealtime">
+          <%= render(AblyUi::Core::Icon.new(name: "twitter", size: "1.5rem")) %>
+        </a>
+        <a class="h-24 pr-24 text-cool-black hover:text-icon-linkedin" href="https://www.linkedin.com/company/ably-realtime">
+          <%= render(AblyUi::Core::Icon.new(name: "linkedin", size: "1.5rem")) %>
+        </a>
+        <a class="h-24 pr-24 text-cool-black hover:text-icon-github" href="https://github.com/ably/">
+          <%= render(AblyUi::Core::Icon.new(name: "github", size: "1.5rem")) %>
+        </a>
+        <div class="border-l border-mid-grey h-40"></div>
+        <a
+          class="flex flex-row pl-24 text-cool-black hover:text-icon-glassdoor"
+          href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm"
+        >
+          <%= render(AblyUi::Core::Icon.new(name: "glassdoor", size: "1.5rem")) %>
+        </a>
+        <div class="pl-16 text-menu3 font-light">
+          <strong class="block font-medium">We&apos;re hiring!</strong>
+          <a href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" class="ui-footer-link">Learn more</a>
+          at Glassdoor
+        </div>
+      </div>
+    </div>
+
+    <div class="md:text-right col-span-full md:col-span-1 ml-8 inline-flex md:ml-auto">
+      <%= image_tag(rocket_list, alt: "Rocket List 2021", class: "mr-24 w-96 h-96") %>
+      <%= image_tag(flexible_companies, alt: "Flexible Companies 2021", class: "w-96 h-96") %>
+    </div>
+  </div>
+</footer>

data/lib/ably_ui/core/footer/footer.rb

@@ -0,0 +1,14 @@
+module AblyUi
+  module Core
+    class Footer < ViewComponent::Base
+      include AblyUi::Core::SharedAssets
+      include AblyUi::Core::Util
+
+      attr_reader :url_base
+
+      def initialize(url_base: AblyUi::Core::Util::DEFAULT_URL_BASE)
+        @url_base = url_base
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +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.Icon=o())}(this,(function(){return{}.default}));

data/lib/ably_ui/core/icon/icon.html.erb

@@ -0,0 +1,3 @@
+<%= tag.svg class: "#{color} #{additional_css}", style: "width: #{size}; height: #{size}", **additional_attributes do %>
+  <%= tag.use "xlink:href": "#sprite-#{name}" %>
+<% end %>

data/lib/ably_ui/core/icon/icon.rb

@@ -0,0 +1,25 @@
+module AblyUi
+  module Core
+    class Icon < ViewComponent::Base
+      attr_reader :name
+      attr_reader :size
+      attr_reader :color
+      attr_reader :additional_css
+      attr_reader :additional_attributes
+
+      def initialize(
+        name:,
+        size: '0.75rem',
+        color: '',
+        additional_css: '',
+        **additional_attributes
+      )
+        @name = name
+        @size = size
+        @color = color
+        @additional_css = additional_css
+        @additional_attributes = additional_attributes
+      end
+    end
+  end
+end

data/lib/ably_ui/core/images/ably-logo.svg

@@ -0,0 +1,15 @@
+<svg width="108" height="32" viewBox="0 0 108 32" xmlns="http://www.w3.org/2000/svg">
+	<g class="text">
+		<path d="M68.5199 22.6856V2H72.2545V9.48895C73.5194 8.28463 75.1488 7.61669 76.8693 7.61669C80.9073 7.61669 84.4898 10.6932 84.4898 15.3283C84.4898 19.9633 80.9073 23.05 76.8693 23.05C75.0577 23.05 73.3471 22.3314 72.0723 21.0259V22.6856H68.5199ZM80.7553 15.3283C80.7553 12.7375 78.9135 10.926 76.5049 10.926C74.1571 10.926 72.3456 12.6464 72.2545 15.1461V15.3283C72.2545 17.919 74.0962 19.7305 76.5049 19.7305C78.9135 19.7305 80.7553 17.919 80.7553 15.3283ZM86.2202 22.6856V2H89.9547V22.6856H86.2202ZM95.1765 28.0493L97.3525 22.8577L91.442 7.98103H95.48L99.2447 18.3744L103.07 7.98103H107.169L99.1536 28.0594H95.1765V28.0493ZM62.5896 7.98103V9.85324C61.294 8.43642 59.4824 7.62684 57.6204 7.62684C53.5826 7.62684 50 10.7034 50 15.3384C50 19.9835 53.5826 23.05 57.6204 23.05C59.5537 23.05 61.3851 22.21 62.7109 20.7021V22.6957H65.9697V7.98103H62.5896ZM62.2253 15.3283C62.2253 17.8887 60.3835 19.7305 57.9748 19.7305C55.5661 19.7305 53.7242 17.8887 53.7242 15.3283C53.7242 12.7679 55.5661 10.926 57.9748 10.926C60.3226 10.926 62.1342 12.6768 62.2253 15.1461V15.3283Z" fill="currentColor" />
+	</g>
+	<g class="triangle">
+		<path d="M19.0968 0L3.11701 29.2473L0 27.0614L14.7856 0H19.0968ZM19.3194 0L35.2992 29.2473L38.4162 27.0614L23.6306 0H19.3194Z" fill="url(#gradient)" />
+		<path d="M35.0765 29.4194L19.2081 16.9918L3.33966 29.4194L6.57813 31.6863L19.2081 21.7989L31.8381 31.6863L35.0765 29.4194Z" fill="url(#gradient)" />
+	</g>
+	<defs>
+		<linearGradient id="gradient" x1="19.2081" y1="0" x2="3" y2="28.5" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#FF0902" />
+			<stop offset="1" stop-color="#FF5215" />
+		</linearGradient>
+	</defs>
+</svg>

data/lib/ably_ui/core/images/ably-stack.svg

@@ -0,0 +1,14 @@
+<svg width="49" height="43" viewBox="0 0 49 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="platform">
+<path id="grid" fill-rule="evenodd" clip-rule="evenodd" d="M34.6654 23.0921L24.5365 17.7703L0.841309 30.2199L24.5365 42.8736L48.2317 30.2199L35.0096 23.2729L34.8557 22.9869L34.6654 23.0921ZM32.5886 24.24L24.5365 20.0094L15.947 24.5224L24.2312 28.8595L32.5886 24.24ZM13.814 25.6431L5.07579 30.2342L13.5536 34.7615L22.1523 30.0086L13.814 25.6431ZM15.6371 35.8742L24.5365 40.6266L33.3962 35.8953L24.2562 31.1101L15.6371 35.8742ZM35.5119 34.7655L43.9972 30.2342L34.6888 25.3435L26.335 29.961L35.5119 34.7655Z" fill="url(#paint0_linear)"/>
+<path id="flat" d="M0.99707 24.2554L24.5366 11.9324L48.0762 24.2554L24.5366 36.7805L0.99707 24.2554Z" fill="url(#paint0_linear)" fill-opacity="0.75"/>
+<path id="solid" fill-rule="evenodd" clip-rule="evenodd" d="M24.5365 5.84314L48.2317 18.2927L24.5365 30.9464L0.841309 18.2927L24.5365 5.84314ZM5.07579 18.3071L24.5365 28.6995L43.9972 18.3071L24.5365 8.08229L5.07579 18.3071Z" fill="#4B3B35"/>
+<path id="dashed" fill-rule="evenodd" clip-rule="evenodd" d="M25.1461 0.873535L26.4966 1.58312L25.5937 3.34787L25.1461 3.11268L24.6985 3.34787L23.7956 1.58312L25.1461 0.873535ZM22.9003 4.29263L21.1022 5.2374L20.1992 3.47265L21.9974 2.52788L22.9003 4.29263ZM29.19 5.2374L27.3919 4.29263L28.2948 2.52788L30.093 3.47265L29.19 5.2374ZM32.7864 7.12693L30.9882 6.18216L31.8911 4.41742L33.6893 5.36218L32.7864 7.12693ZM19.304 6.18217L17.5058 7.12693L16.6029 5.36218L18.4011 4.41742L19.304 6.18217ZM36.3827 9.01646L34.5845 8.0717L35.4874 6.30695L37.2856 7.25171L36.3827 9.01646ZM15.7077 8.0717L13.9095 9.01646L13.0066 7.25171L14.8048 6.30695L15.7077 8.0717ZM12.1114 9.96123L10.3132 10.906L9.41027 9.14125L11.2084 8.19648L12.1114 9.96123ZM39.979 10.906L38.1808 9.96123L39.0838 8.19648L40.8819 9.14125L39.979 10.906ZM8.51503 11.8508L6.71687 12.7955L5.81395 11.0308L7.61211 10.086L8.51503 11.8508ZM43.5753 12.7955L41.7772 11.8508L42.6801 10.086L44.4782 11.0308L43.5753 12.7955ZM4.34688 12.6227L4.01579 11.9755L1.45093 13.3231L4.00999 14.6897L4.34772 14.0403L4.91871 13.7403L4.7129 13.338L4.92451 12.9311L4.34688 12.6227ZM45.9445 14.0403L45.3735 13.7403L45.5793 13.338L45.3677 12.9311L45.9453 12.6227L46.2764 11.9755L48.8413 13.3231L46.2822 14.6897L45.9445 14.0403ZM41.7714 14.8516L43.5695 13.8914L44.484 15.65L42.6859 16.6102L41.7714 14.8516ZM6.72267 13.8914L8.52083 14.8516L7.60631 16.6102L5.80815 15.65L6.72267 13.8914ZM38.175 16.7721L39.9732 15.8119L40.8877 17.5705L39.0896 18.5307L38.175 16.7721ZM10.319 15.8119L12.1172 16.7721L11.2026 18.5307L9.40447 17.5705L10.319 15.8119ZM34.5787 18.6926L36.3769 17.7324L37.2914 19.491L35.4932 20.4513L34.5787 18.6926ZM13.9153 17.7324L15.7135 18.6927L14.799 20.4513L13.0008 19.491L13.9153 17.7324ZM17.5116 19.6529L19.3098 20.6132L18.3953 22.3718L16.5971 21.4115L17.5116 19.6529ZM30.9824 20.6132L32.7806 19.6529L33.6951 21.4115L31.8969 22.3718L30.9824 20.6132ZM21.108 21.5734L22.9061 22.5337L21.9916 24.2923L20.1934 23.332L21.108 21.5734ZM27.3861 22.5337L29.1842 21.5734L30.0988 23.332L28.3006 24.2923L27.3861 22.5337ZM25.1461 23.7299L24.7043 23.4939L23.7898 25.2525L25.1461 25.9768L26.5024 25.2525L25.5879 23.4939L25.1461 23.7299Z" fill="#ADA6A3"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="35.3254" y1="25.3504" x2="14.0934" y2="28.7416" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF0000"/>
+<stop offset="1" stop-color="#FB5519"/>
+</linearGradient>
+</defs>
+</svg>

data/lib/ably_ui/core/images/scale-motif-open-empathetic.svg

@@ -0,0 +1 @@
+<svg fill="none" height="1003" viewBox="0 0 1003 1003" width="1003" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#ff5416"/><stop offset=".1871" stop-color="#ff4c14"/><stop offset=".4706" stop-color="#ff380f"/><stop offset=".8136" stop-color="#ff1606"/><stop offset="1" stop-color="#f00"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="338.542" x2="664.617" xlink:href="#a" y1="501.58" y2="501.58"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="223.026" x2="780.142" xlink:href="#a" y1="501.584" y2="501.584"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="108.117" x2="895.054" xlink:href="#a" y1="501.586" y2="501.586"/><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="-8.32736" x2="1011.5" xlink:href="#a" y1="501.587" y2="501.587"/><g stroke-miterlimit="10" stroke-width="4"><path d="m501.5 655.096c84.829 0 153.596-68.767 153.596-153.596s-68.767-153.596-153.596-153.596-153.596 68.767-153.596 153.596 68.767 153.596 153.596 153.596z" stroke="url(#b)"/><path d="m501.5 769.981c148.278 0 268.481-120.203 268.481-268.481s-120.203-268.481-268.481-268.481-268.481 120.203-268.481 268.481 120.203 268.481 268.481 268.481z" stroke="url(#c)"/><path d="m501.5 884.866c211.727 0 383.366-171.639 383.366-383.366s-171.639-383.366-383.366-383.366-383.366 171.639-383.366 383.366 171.639 383.366 383.366 383.366z" stroke="url(#d)"/><path d="m501.5 1001c275.866 0 499.5-223.634 499.5-499.5s-223.634-499.5-499.5-499.5-499.5 223.634-499.5 499.5 223.634 499.5 499.5 499.5z" stroke="url(#e)"/></g></svg>

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

@@ -0,0 +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.Logo=o())}(this,(function(){return{}.default}));

data/lib/ably_ui/core/logo/logo.html.erb

@@ -0,0 +1,28 @@
+<%= link_to logo_href, class: 'h-32' do %>
+  <%= tag.svg class: ["transition-colors", theme(:logo_text_color)], data: { id: data_id }, width: "108", height: "32", viewBox: "0 0 108 32", xmlns: "http://www.w3.org/2000/svg" do %>
+    <path
+      d="M62.922 24.9786V4.08813H66.6933V11.6512C67.9709 10.435 69.6164 9.76044 71.3538 9.76044C75.4318 9.76044 79.0498 12.8674 79.0498 17.5484C79.0498 22.2293 75.4318 25.3465 71.3538 25.3465C69.5244 25.3465 67.7971 24.6209 66.5094 23.3024V24.9786H62.922ZM75.2785 17.5484C75.2785 14.932 73.4183 13.1025 70.9859 13.1025C68.6148 13.1025 66.7853 14.84 66.6933 17.3644V17.5484C66.6933 20.1648 68.5534 21.9942 70.9859 21.9942C73.4183 21.9942 75.2785 20.1648 75.2785 17.5484ZM80.7975 24.9786V4.08813H84.5688V24.9786H80.7975ZM89.8425 30.3954L92.0399 25.1523L86.0712 10.1284H90.1491L93.9511 20.6247L97.8144 10.1284H101.954L93.8591 30.4056H89.8425V30.3954ZM56.9329 10.1284V12.0191C55.6247 10.5883 53.7952 9.77066 51.9147 9.77066C47.8367 9.77066 44.2187 12.8777 44.2187 17.5586C44.2187 22.2497 47.8367 25.3465 51.9147 25.3465C53.8668 25.3465 55.7166 24.4982 57.0555 22.9754V24.9888H60.3465V10.1284H56.9329ZM56.5649 17.5484C56.5649 20.1341 54.7048 21.9942 52.2724 21.9942C49.8399 21.9942 47.9798 20.1341 47.9798 17.5484C47.9798 14.9626 49.8399 13.1025 52.2724 13.1025C54.6435 13.1025 56.473 14.8706 56.5649 17.3644V17.5484Z"
+      fill="currentColor"
+    />
+    <path d="M19.2858 0L3.14788 29.5369L0 27.3293L14.932 0H19.2858ZM19.5107 0L35.6487 29.5369L38.7965 27.3293L23.8646 0H19.5107Z" fill="url(#paint0_linear)" />
+    <path d="M35.4238 29.7107L19.3983 17.16L3.37271 29.7107L6.64323 32L19.3983 22.0147L32.1533 32L35.4238 29.7107Z" fill="url(#paint1_linear)" />
+    <defs>
+      <linearGradient id="paint0_linear" x1="5.47361" y1="37.4219" x2="32.4603" y2="7.45023" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#FF5416" />
+        <stop offset="0.2535" stop-color="#FF5115" />
+        <stop offset="0.461" stop-color="#FF4712" />
+        <stop offset="0.6523" stop-color="#FF350E" />
+        <stop offset="0.8327" stop-color="#FF1E08" />
+        <stop offset="1" stop-color="#FF0000" />
+      </linearGradient>
+      <linearGradient id="paint1_linear" x1="10.7084" y1="39.3593" x2="26.6583" y2="21.6452" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#FF5416" />
+        <stop offset="0.2535" stop-color="#FF5115" />
+        <stop offset="0.461" stop-color="#FF4712" />
+        <stop offset="0.6523" stop-color="#FF350E" />
+        <stop offset="0.8327" stop-color="#FF1E08" />
+        <stop offset="1" stop-color="#FF0000" />
+      </linearGradient>
+    </defs>
+  <% end %>
+<% end %>

data/lib/ably_ui/core/logo/logo.rb

@@ -0,0 +1,19 @@
+module AblyUi
+  module Core
+    class Logo < ViewComponent::Base
+      include AblyUi::Core::MeganavConfig
+
+      attr_reader :href, :data_id
+
+      def initialize(theme_name:, data_id: '', href:)
+        @data_id = data_id
+        @href = href
+        theme_setup(theme_name)
+      end
+
+      def logo_href
+        href.blank? ? '/' : href
+      end
+    end
+  end
+end

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

@@ -0,0 +1,103 @@
+@layer components {
+  .ui-meganav-wrapper {
+    /* Define values for new stacking context defined by position: fixed */
+    --stacking-context-meganav-dropdown: 10;
+    --stacking-context-meganav-mobile-panel: 20;
+
+    z-index: var(--stacking-context-page-meganav);
+
+    @apply fixed top-0 w-full;
+    @apply antialiased font-sans transition-colors;
+  }
+
+  .ui-meganav {
+    height: var(--ui-meganav-height);
+
+    @apply flex justify-between items-center max-w-screen-xl mx-auto;
+  }
+
+  .ui-meganav-panel,
+  .ui-meganav-mobile-dropdown,
+  .ui-meganav-panel-account {
+    z-index: var(--stacking-context-meganav-dropdown);
+
+    @apply absolute left-0 right-0;
+    @apply border-mid-grey border-t shadow-container;
+  }
+
+  .ui-meganav-panel {
+    @apply bg-white;
+  }
+
+  .ui-meganav-panel-mobile {
+    z-index: var(--stacking-context-meganav-mobile-panel);
+
+    /* Prevents momentum-based scrolling https://devdocs.io/css/-webkit-overflow-scrolling */
+    -webkit-overflow-scrolling: auto;
+
+    @apply bg-white pt-16 border-0;
+    @apply border-mid-grey border-t shadow-container;
+    @apply fixed top-64 left-0 right-0 overflow-y-auto;
+  }
+
+  .ui-meganav-panel-account {
+    left: auto;
+    min-width: 20rem;
+    @apply bg-white rounded-t-none;
+  }
+
+  .ui-meganav-link {
+    @apply text-menu2 font-medium block;
+    @apply mx-8 lg:mx-12 px-0 py-20;
+    @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
+    @apply transition-colors;
+  }
+
+  .ui-meganav-mobile-link {
+    @apply p-menu-row relative -left-8 w-extend-8;
+    @apply text-menu2 font-medium block text-cool-black text-left;
+    @apply flex items-center;
+    @apply focus:text-gui-focus focus:outline-none;
+  }
+
+  .ui-meganav-account-link {
+    @apply block px-8 py-8 hover:bg-light-grey hover:text-gui-hover rounded relative -left-8 text-menu3 w-extend-8 font-light;
+  }
+
+  .ui-meganav-content {
+    @apply max-w-screen-xl py-24 lg:py-32 mx-auto;
+    @apply grid grid-cols-1;
+    @apply px-24 md:px-32 lg:px-32 xl:px-64;
+  }
+
+  .ui-meganav-media {
+    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+  }
+
+  .ui-meganav-media-with-image {
+    grid-template-columns: -webkit-max-content 1fr;
+    grid-template-columns: max-content 1fr;
+    grid-template-rows: -webkit-min-content 1fr;
+    grid-template-rows: min-content 1fr;
+
+    @apply block px-8 py-8 hover:bg-light-grey rounded relative -left-8 w-extend-8;
+    @apply grid gap-x-16;
+  }
+
+  .ui-meganav-media-heading {
+    @apply text-menu3 text-cool-black font-medium group-hover:text-gui-hover group-focus:text-gui-focus;
+  }
+
+  .ui-meganav-media-copy {
+    @apply text-p3 text-dark-grey font-light;
+  }
+
+  .ui-meganav-overline {
+    @apply text-overline2 text-cool-black uppercase font-medium tracking-widen-0.15 p-overline;
+  }
+
+  .ui-meganav-hr {
+    @apply my-0 text-mid-grey;
+  }
+}
+