diff --git a/Gemfile.lock b/Gemfile.lock index 49af84efe..90fb3d2b7 100644 --- a/Gemfile.lock +++ b/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 diff --git a/lib/ably_ui/version.rb b/lib/ably_ui/version.rb index 5a010a0df..45b4faa44 100644 --- a/lib/ably_ui/version.rb +++ b/lib/ably_ui/version.rb @@ -1,3 +1,3 @@ module AblyUi - VERSION = '5.2.0' + VERSION = '5.2.0.dev.a4067b7' end diff --git a/modules-config.js b/modules-config.js index 474739a0f..9cfd76ff0 100644 --- a/modules-config.js +++ b/modules-config.js @@ -31,6 +31,7 @@ module.exports = [ "CookieMessage", "Icon", "Slider", + "CustomerLogos", ], }, { diff --git a/package.json b/package.json index eb6d9d150..11abbb25e 100644 --- a/package.json +++ b/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", diff --git a/preview/Gemfile b/preview/Gemfile index cc7f00b0d..273d547b6 100644 --- a/preview/Gemfile +++ b/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' diff --git a/preview/Gemfile.lock b/preview/Gemfile.lock index acd7d34d8..a7c08f3f2 100644 --- a/preview/Gemfile.lock +++ b/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) diff --git a/preview/app/javascript/packs/application.js b/preview/app/javascript/packs/application.js index 96799b4a7..abf3fd86b 100644 --- a/preview/app/javascript/packs/application.js +++ b/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 diff --git a/preview/app/views/components/customer_logos_react.html.erb b/preview/app/views/components/customer_logos_react.html.erb new file mode 100644 index 000000000..43fb9e88f --- /dev/null +++ b/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 %> + +<% end %> diff --git a/preview/app/views/components/customer_logos_vw.html.erb b/preview/app/views/components/customer_logos_vw.html.erb new file mode 100644 index 000000000..f8451933f --- /dev/null +++ b/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 %> + +<% end %> diff --git a/preview/app/views/pages/index.html.erb b/preview/app/views/pages/index.html.erb index 55401a7e0..bdeb05481 100644 --- a/preview/app/views/pages/index.html.erb +++ b/preview/app/views/pages/index.html.erb @@ -43,6 +43,9 @@
  • Slider
    • +
  • + Customer Logos +
  • diff --git a/preview/package.json b/preview/package.json index 06ab84ff2..83ae8627a 100644 --- a/preview/package.json +++ b/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", diff --git a/preview/yarn.lock b/preview/yarn.lock index 5bce9b30e..232b4570b 100644 --- a/preview/yarn.lock +++ b/preview/yarn.lock @@ -2,10 +2,10 @@ # yarn lockfile v1 -"@ably/ui@5.2.0": - version "5.2.0" - resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-5.2.0.tgz#e4314450098ee5d1673576455042ba7379569e56" - integrity sha512-IJI+RxzWvUYPFXihx0TuZBGduHWEcMKCB13LDojD9Qu/fR1EdHFGT790Bnh5AWnjYGYl7GQOYkUnYAS11xYXqw== +"@ably/ui@5.2.0-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" diff --git a/src/core/CustomerLogos/component.html.erb b/src/core/CustomerLogos/component.html.erb new file mode 100644 index 000000000..b7e360701 --- /dev/null +++ b/src/core/CustomerLogos/component.html.erb @@ -0,0 +1,9 @@ +
    + +
    diff --git a/src/core/CustomerLogos/component.js b/src/core/CustomerLogos/component.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/core/CustomerLogos/component.jsx b/src/core/CustomerLogos/component.jsx new file mode 100644 index 000000000..25a07a6fb --- /dev/null +++ b/src/core/CustomerLogos/component.jsx @@ -0,0 +1,27 @@ +import React from "react"; +import T from "prop-types"; + +const CustomerLogos = ({ companies }) => { + return ( +
    + +
    + ); +}; + +CustomerLogos.propTypes = { + companies: T.arrayOf( + T.shape({ + label: T.string, + logo: T.string, + }) + ), +}; + +export default CustomerLogos; diff --git a/src/core/CustomerLogos/component.rb b/src/core/CustomerLogos/component.rb new file mode 100644 index 000000000..ba9371d46 --- /dev/null +++ b/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 diff --git a/src/core/images/cust-logo-ausopen-mono-pos.svg b/src/core/images/cust-logo-ausopen-mono-pos.svg new file mode 100644 index 000000000..30636448f --- /dev/null +++ b/src/core/images/cust-logo-ausopen-mono-pos.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/core/images/cust-logo-bloomberg-mono-pos.svg b/src/core/images/cust-logo-bloomberg-mono-pos.svg new file mode 100644 index 000000000..de247cba7 --- /dev/null +++ b/src/core/images/cust-logo-bloomberg-mono-pos.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/core/images/cust-logo-hopin-mono-pos.svg b/src/core/images/cust-logo-hopin-mono-pos.svg new file mode 100644 index 000000000..ecc815d05 --- /dev/null +++ b/src/core/images/cust-logo-hopin-mono-pos.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/core/images/cust-logo-hubspot-mono-pos.svg b/src/core/images/cust-logo-hubspot-mono-pos.svg new file mode 100644 index 000000000..ecd1aebee --- /dev/null +++ b/src/core/images/cust-logo-hubspot-mono-pos.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/core/images/cust-logo-split-mono-pos.svg b/src/core/images/cust-logo-split-mono-pos.svg new file mode 100644 index 000000000..261c73ab5 --- /dev/null +++ b/src/core/images/cust-logo-split-mono-pos.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/core/images/cust-logo-toyota-mono-pos.svg b/src/core/images/cust-logo-toyota-mono-pos.svg new file mode 100644 index 000000000..04aa917f4 --- /dev/null +++ b/src/core/images/cust-logo-toyota-mono-pos.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + +