@ably/ui 8.8.1 → 8.9.0

package/core/CustomerLogos.jsx

@@ -214,11 +214,13 @@ __webpack_require__.r(__webpack_exports__);
 
 
 var CustomerLogos = function CustomerLogos(_ref) {
-  var companies = _ref.companies;
+  var companies = _ref.companies,
+      _ref$additionalCss = _ref.additionalCss,
+      additionalCss = _ref$additionalCss === void 0 ? "" : _ref$additionalCss;
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("section", {
     className: "w-full bg-white"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center"
+    className: "py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ".concat(additionalCss)
   }, companies.map(function (company) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       key: company.label,
@@ -235,7 +237,8 @@ CustomerLogos.propTypes = {
   companies: prop_types__WEBPACK_IMPORTED_MODULE_1___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_1___default().shape({
     label: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string),
     logo: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
-  }))
+  })),
+  additionalCss: (prop_types__WEBPACK_IMPORTED_MODULE_1___default().string)
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CustomerLogos);
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.8.1",
+  "version": "8.9.0",
   "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",

package/src/core/CustomerLogos/component.html.erb

@@ -1,9 +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">
+  <%= tag.ul class: "py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center #{@additional_css}" do %>
     <% 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>
+  <% end %>
 </section>

package/src/core/CustomerLogos/component.jsx

@@ -1,10 +1,10 @@
 import React from "react";
 import T from "prop-types";
 
-const CustomerLogos = ({ companies }) => {
+const CustomerLogos = ({ companies, additionalCss = "" }) => {
   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">
+      <ul className={`py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ${additionalCss}`}>
         {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" />
@@ -22,6 +22,7 @@ CustomerLogos.propTypes = {
       logo: T.string,
     })
   ),
+  additionalCss: T.string,
 };
 
 export default CustomerLogos;

package/src/core/CustomerLogos/component.rb

@@ -5,8 +5,9 @@ module AblyUi
     class CustomerLogos < ViewComponent::Base
       attr_reader :companies
 
-      def initialize(companies:)
+      def initialize(companies:, additional_css: '')
         @companies = companies
+        @additional_css = additional_css
       end
     end
   end