Merge pull request #134 from ably/add-customer-logos-component

Add customer logos component

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (5.2.0)
+    ably-ui (5.2.0.dev.a4067b7)
       view_component (~> 2.33.0)
 
 GEM

lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '5.2.0'
+  VERSION = '5.2.0.dev.a4067b7'
 end

modules-config.js

@@ -31,6 +31,7 @@ module.exports = [
       "CookieMessage",
       "Icon",
       "Slider",
+      "CustomerLogos",
     ],
   },
   {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "5.2.0",
+  "version": "5.2.0-dev.a4067b7",
   "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.",
   "repository": {
     "type": "git",

preview/Gemfile

@@ -36,4 +36,4 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '5.2.0', require: 'ably_ui'
+gem 'ably-ui', '5.2.0.dev.a4067b7', require: 'ably_ui'

preview/Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (5.2.0)
+    ably-ui (5.2.0.dev.a4067b7)
       view_component (~> 2.33.0)
     actioncable (6.0.3.4)
       actionpack (= 6.0.3.4)
@@ -169,7 +169,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  ably-ui (= 5.2.0)
+  ably-ui (= 5.2.0.dev.a4067b7)
   bootsnap (>= 1.4.2)
   byebug
   listen (~> 3.2)

preview/app/javascript/packs/application.js

@@ -9,6 +9,7 @@ import CookieMessage from "@ably/ui/core/CookieMessage";
 import Flash, { reducerFlashes } from "@ably/ui/core/Flash";
 import Icon from "@ably/ui/core/Icon";
 import FeaturedLink from "@ably/ui/core/FeaturedLink";
+import CustomerLogos from "@ably/ui/core/CustomerLogos";
 
 import {
   reactRenderer,
@@ -48,6 +49,7 @@ document.addEventListener("DOMContentLoaded", () => {
     CookieMessage,
     Icon,
     FeaturedLink,
+    CustomerLogos,
   });
 
   // Fetch additional data, trigger a re-render for components subscribed to store

preview/app/views/components/customer_logos_react.html.erb

@@ -0,0 +1,44 @@
+<%= render(TitleComponent.new(react: true, vw: true)) do %>
+  Customer logos
+<% end %>
+
+<%
+  companies = [
+          {
+            label: 'Hubspot',
+            logo:
+              asset_path('ably_ui/core/images/cust-logo-hubspot-mono-pos.svg')
+          },
+          {
+            label: 'Hopin',
+            logo: asset_path('ably_ui/core/images/cust-logo-hopin-mono-pos.svg')
+          },
+          {
+            label: 'Bloomberg',
+            logo:
+              asset_path('ably_ui/core/images/cust-logo-bloomberg-mono-pos.svg')
+          },
+          {
+            label: 'Toyota',
+            logo:
+              asset_path('ably_ui/core/images/cust-logo-toyota-mono-pos.svg')
+          },
+          {
+            label: 'Split',
+            logo: asset_path('ably_ui/core/images/cust-logo-split-mono-pos.svg')
+          },
+          {
+            label: 'Australian Open',
+            logo:
+              asset_path('ably_ui/core/images/cust-logo-ausopen-mono-pos.svg')
+          }
+        ]
+%>
+
+<%= react_component('customerLogos', companies: companies) %>
+
+<% content_for :component do %>
+  <script type="text/javascript">
+    document.body.classList.add("bg-light-grey", "m-32");
+  </script>
+<% end %>

preview/app/views/components/customer_logos_vw.html.erb

@@ -0,0 +1,45 @@
+<%= render(TitleComponent.new(react: true, vw: true)) do %>
+  Customer logos
+<% end %>
+
+<%
+  companies = [
+          {
+            label: 'Hubspot',
+            logo:
+              asset_path('ably_ui/core/images/cust-logo-hubspot-mono-pos.svg')
+          },
+          {
+            label: 'Hopin',
+            logo: asset_path('ably_ui/core/images/cust-logo-hopin-mono-pos.svg')
+          },
+          {
+            label: 'Bloomberg',
+            logo:
+              asset_path('ably_ui/core/images/cust-logo-bloomberg-mono-pos.svg')
+          },
+          {
+            label: 'Toyota',
+            logo:
+              asset_path('ably_ui/core/images/cust-logo-toyota-mono-pos.svg')
+          },
+          {
+            label: 'Split',
+            logo: asset_path('ably_ui/core/images/cust-logo-split-mono-pos.svg')
+          },
+          {
+            label: 'Australian Open',
+            logo:
+              asset_path('ably_ui/core/images/cust-logo-ausopen-mono-pos.svg')
+          }
+        ]
+%>
+
+
+<%= render(AblyUi::Core::CustomerLogos.new(companies: companies)) %>
+
+<% content_for :component do %>
+  <script type="text/javascript">
+    document.body.classList.add("bg-light-grey", "m-32");
+  </script>
+<% end %>

preview/app/views/pages/index.html.erb

@@ -43,6 +43,9 @@
             <li>
               <a href="/components/slider">Slider</a>
             </li>
+            <li>
+              <a href="/components/customer-logos">Customer Logos</a>
+            </li>
           </ul>
         </li>
         <li>

preview/package.json

@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "5.2.0",
+    "@ably/ui": "5.2.0-dev.a4067b7",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",

preview/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/[email protected]":
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-5.2.0.tgz#e4314450098ee5d1673576455042ba7379569e56"
-  integrity sha512-IJI+RxzWvUYPFXihx0TuZBGduHWEcMKCB13LDojD9Qu/fR1EdHFGT790Bnh5AWnjYGYl7GQOYkUnYAS11xYXqw==
+"@ably/[email protected]-dev.a4067b7":
+  version "5.2.0-dev.a4067b7"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-5.2.0-dev.a4067b7.tgz#589002855600475a5f58d68fdca3262ada167bea"
+  integrity sha512-7me7RYx+KEga4jB/9hDoqUib7VhsLZT47ivmwMIkFqvZBE/hY4Sb90oJkX0VboZucP3A5HTZgIOT4UlJ2Xr2Og==
   dependencies:
     array-flat-polyfill "^1.0.1"
     deepmerge "^4.2.2"

src/core/CustomerLogos/component.html.erb

@@ -0,0 +1,9 @@
+<section class="w-full bg-white">
+  <ul class="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center">
+    <% companies.each do |company| %>
+	    <li class="flex-auto text-center sm:w-1/3 w-1/2">
+	      <%= image_tag company[:logo], alt: "#{company[:label]} logo", class: 'mx-auto' %>
+	    </li>
+    <% end %>
+  </ul>
+</section>

src/core/CustomerLogos/component.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import T from "prop-types";
+
+const CustomerLogos = ({ companies }) => {
+  return (
+    <section className="w-full bg-white">
+      <ul className="py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center">
+        {companies.map((company) => (
+          <li key={company.label} className="flex-auto text-center sm:w-1/3 w-1/2">
+            <img alt={company.label} src={company.logo} className="mx-auto" />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+CustomerLogos.propTypes = {
+  companies: T.arrayOf(
+    T.shape({
+      label: T.string,
+      logo: T.string,
+    })
+  ),
+};
+
+export default CustomerLogos;

src/core/CustomerLogos/component.rb

@@ -0,0 +1,13 @@
+require 'json'
+
+module AblyUi
+  module Core
+    class CustomerLogos < ViewComponent::Base
+      attr_reader :companies
+
+      def initialize(companies:)
+        @companies = companies
+      end
+    end
+  end
+end