Merge pull request #135 from ably/web-1992-design-updates

[WEB-1992] Design updates

Gemfile.lock

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

cypress/integration/core/code/__snapshots__/snapshots.js.snap

@@ -2,7 +2,7 @@ exports[`Code Snapshot Test > react > test case common to both #0`] = `
 <div class="hljs p-32 overflow-auto" data-id="code">
   <pre
     lang="javascript"
-  ><code class="font-mono language-javascript"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
+  ><code class="language-javascript ui-text-code1"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
 <span class="hljs-keyword">var</span> channel = ably.channels.get(<span class="hljs-string">'web-pal'</span>);
 
 <span class="hljs-comment">// Subscribe to messages on channel</span>
@@ -16,7 +16,7 @@ exports[`Code Snapshot Test > react > test case common to both #1`] = `
 <div class="hljs p-32 overflow-auto" data-id="code">
   <pre
     lang="swift"
-  ><code class="font-mono language-swift"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
+  ><code class="language-swift ui-text-code1"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
 <span class="hljs-keyword">let</span> channel <span class="hljs-operator">=</span> ably.channels.get(<span class="hljs-string">"web-pal"</span>)
 
 <span class="hljs-comment">// Subscribe to messages on channel</span>
@@ -30,7 +30,7 @@ exports[`Code Snapshot Test > react > test case common to both #2`] = `
 <div class="hljs p-32 overflow-auto" data-id="code">
   <pre
     lang="java"
-  ><code class="font-mono language-java">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
+  ><code class="language-java ui-text-code1">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
 Channel channel = ably.channels.get(<span class="hljs-string">"web-pal"</span>);
 
 <span class="hljs-comment">/* Subscribe to messages on channel */</span>
@@ -50,7 +50,7 @@ exports[`Code Snapshot Test > view component > test case common to both #0`] = `
 <div class="hljs p-32 overflow-auto" data-id="code">
   <pre
     lang="javascript"
-  ><code class="font-mono language-javascript"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
+  ><code class="language-javascript ui-text-code1"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
 <span class="hljs-keyword">var</span> channel = ably.channels.get(<span class="hljs-string">'web-pal'</span>);
 
 <span class="hljs-comment">// Subscribe to messages on channel</span>
@@ -64,7 +64,7 @@ exports[`Code Snapshot Test > view component > test case common to both #1`] = `
 <div class="hljs p-32 overflow-auto" data-id="code">
   <pre
     lang="swift"
-  ><code class="font-mono language-swift"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
+  ><code class="language-swift ui-text-code1"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
 <span class="hljs-keyword">let</span> channel <span class="hljs-operator">=</span> ably.channels.get(<span class="hljs-string">"web-pal"</span>)
 
 <span class="hljs-comment">// Subscribe to messages on channel</span>
@@ -78,7 +78,7 @@ exports[`Code Snapshot Test > view component > test case common to both #2`] = `
 <div class="hljs p-32 overflow-auto" data-id="code">
   <pre
     lang="java"
-  ><code class="font-mono language-java">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
+  ><code class="language-java ui-text-code1">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
 Channel channel = ably.channels.get(<span class="hljs-string">"web-pal"</span>);
 
 <span class="hljs-comment">/* Subscribe to messages on channel */</span>

lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '5.3.0'
+  VERSION = '5.3.0.dev.3c981a4'
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "5.3.0",
+  "version": "5.3.0-dev.3c981a4",
   "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.3.0', require: 'ably_ui'
+gem 'ably-ui', '5.3.0.dev.3c981a4', require: 'ably_ui'

preview/Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (5.3.0)
+    ably-ui (5.3.0.dev.3c981a4)
       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.3.0)
+  ably-ui (= 5.3.0.dev.3c981a4)
   bootsnap (>= 1.4.2)
   byebug
   listen (~> 3.2)

preview/app/components/buttons_list_component.html.erb

@@ -1,13 +1,84 @@
-<div class="p-16 border rounded mb-16">
-  <button type="button" class="ui-btn">Primary button</button>
-  <button type="button" class="ui-btn-secondary">Secondary button</button>
-  <button type="button" class="ui-btn" disabled>Disabled primary button</button>
-  <button type="button" class="ui-btn-secondary" disabled>Disabled secondary button</button>
+<div class="flex flex-wrap">
+  <p class="ui-text-p1 mb-32">Different size buttons can be achieved by using padding and text utilities, see examples below.</p>
+
+  <div class="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+    <h3 class="ui-text-h3">Standard</h3>
+    <button type="button" class="ui-btn">Primary button</button>
+    <button type="button" class="ui-btn-alt">Primary button alternative</button>
+    <button type="button" class="ui-btn-secondary">Secondary button</button>
+    <button type="button" class="ui-btn" disabled>Unavailable primary button</button>
+    <button type="button" class="ui-btn-alt" disabled>Unavailable primary button alternative</button>
+    <button type="button" class="ui-btn-secondary" disabled>Unavailable secondary button</button>
+  </div>
+
+  <div class="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16 bg-cool-black">
+    <h3 class="ui-text-h3 text-white">Inverted</h3>
+    <button type="button" class="ui-btn-invert">Primary button</button>
+    <button type="button" class="ui-btn-secondary-invert">Secondary button</button>
+    <button type="button" class="ui-btn-invert" disabled>Unavailable primary button</button>
+    <button type="button" class="ui-btn-secondary-invert" disabled>Unavailable secondary button</button>
+  </div>
+
+  <div class="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+    <h3 class="ui-text-h3">With icons</h3>
+    <button type="button" class="ui-btn">
+      <svg class="ui-btn-icon"><use xlink:href="#sprite-icon-gui-search"></use></svg>
+      Primary button with icon
+    </button>
+    <button type="button" class="ui-btn-alt">
+      <svg class="ui-btn-icon"><use xlink:href="#sprite-icon-gui-search"></use></svg>
+      Primary button alternative with icon
+    </button>
+    <button type="button" class="ui-btn-secondary">
+      <svg class="ui-btn-icon"><use xlink:href="#sprite-icon-gui-search"></use></svg>
+      Secondary button with icon
+    </button>
+    <button type="button" class="ui-btn" disabled>
+      <svg class="ui-btn-icon"><use xlink:href="#sprite-icon-gui-search"></use></svg>
+      Unavailable primary button with icon
+    </button>
+    <button type="button" class="ui-btn-alt" disabled>
+      <svg class="ui-btn-icon"><use xlink:href="#sprite-icon-gui-search"></use></svg>
+      Unavailable primary button alternative with icon
+    </button>
+    <button type="button" class="ui-btn-secondary" disabled>
+      <svg class="ui-btn-icon"><use xlink:href="#sprite-icon-gui-search"></use></svg>
+      Unavailable secondary button with icon
+    </button>
+  </div>
 </div>
 
-<div class="p-16 border rounded bg-cool-black">
-  <button type="button" class="ui-btn-invert">Primary button</button>
-  <button type="button" class="ui-btn-secondary-invert">Secondary button</button>
-  <button type="button" class="ui-btn-invert" disabled>Disabled primary button</button>
-  <button type="button" class="ui-btn-secondary-invert" disabled>Disabled secondary button</button>
+<div class="flex flex-wrap">
+  <div class="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+    <h3 class="ui-text-h3">Extra small</h3>
+    <button type="button" class="ui-btn p-btn-xsmall text-btn4">Primary button</button>
+    <button type="button" class="ui-btn p-btn-xsmall text-btn4">
+      <svg class="ui-btn-icon-xsmall"><use xlink:href="#sprite-icon-gui-search"></use></svg>
+      Primary button with icon
+    </button>
+    <button type="button" class="ui-btn-alt p-btn-xsmall text-btn4">Primary button alternative</button>
+    <button type="button" class="ui-btn-secondary p-btn-xsmall text-btn4">Secondary button</button>
+  </div>
+
+  <div class="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+    <h3 class="ui-text-h3">Small</h3>
+    <button type="button" class="ui-btn p-btn-small text-btn3">Primary button</button>
+    <button type="button" class="ui-btn p-btn-small text-btn3">
+      <svg class="ui-btn-icon-small"><use xlink:href="#sprite-icon-gui-search"></use></svg>
+      Primary button with icon
+    </button>
+    <button type="button" class="ui-btn-alt p-btn-small text-btn3">Primary button alternative</button>
+    <button type="button" class="ui-btn-secondary p-btn-small text-btn3">Secondary button</button>
+  </div>
+
+  <div class="p-16 mb-16 mr-16 border rounded grid justify-items-start auto-rows-min gap-16">
+    <h3 class="ui-text-h3">Large</h3>
+    <button type="button" class="ui-btn p-btn-large text-btn1">Primary button</button>
+    <button type="button" class="ui-btn p-btn-large text-btn1">
+      <svg class="ui-btn-icon"><use xlink:href="#sprite-icon-gui-search"></use></svg>
+      Primary button with icon
+    </button>
+    <button type="button" class="ui-btn-alt p-btn-large text-btn1">Primary button alternative</button>
+    <button type="button" class="ui-btn-secondary p-btn-large text-btn1">Secondary button</button>
+  </div>
 </div>

preview/app/controllers/components_controller.rb

@@ -43,37 +43,42 @@ def footer
   def icon
     template = "icon_#{framework}.html.erb"
     core_icons = %w[
-      icon-gui-search
-      icon-gui-plus
-      icon-gui-disclosure-arrow
+      icon-gui-ably-badge
       icon-gui-burger-menu
       icon-gui-close
-      icon-gui-tick
-      icon-gui-ably-badge
-      icon-gui-warning
+      icon-gui-disclosure-arrow
+      icon-gui-enlarge
       icon-gui-external-link
+      icon-gui-history
       icon-gui-link-arrow
       icon-gui-minus
-      icon-gui-enlarge
+      icon-gui-plus
+      icon-gui-refresh
+      icon-gui-search
+      icon-gui-tick
+      icon-gui-warning
     ]
 
     display_icons = %w[
       icon-display-48hrs
-      icon-display-calendar
-      icon-display-laptop
-      icon-display-message
-      icon-display-shopping-cart
+      icon-display-api-keys
       icon-display-browser
+      icon-display-calendar
+      icon-display-call-mobile
+      icon-display-cloud-servers
       icon-display-documentation
+      icon-display-general-comms
+      icon-display-it-support-access
+      icon-display-it-support-helpdesk
+      icon-display-laptop
+      icon-display-live-chat
       icon-display-map-pin
+      icon-display-message
       icon-display-padlock-closed
-      icon-display-sla
-      icon-display-it-support-helpdesk
       icon-display-platform
-      icon-display-call-mobile
-      icon-display-it-support-access
-      icon-display-live-chat
-      icon-display-general-comms
+      icon-display-servers
+      icon-display-shopping-cart
+      icon-display-sla
       icon-display-tech-account-comms
     ]
 

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

@@ -4,12 +4,34 @@
 
 <%= render(ParameterTableComponent.new(component_parameters, framework)) %>
 
-<%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p1')) do %>Link Paragraph 1<% end %>
-<%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p2')) do %>Link Paragraph 2<% end %>
-<%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p3')) do %>Link Paragraph 3<% end %>
-<%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu1')) do %>Link Menu 1<% end %>
-<%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu2')) do %>Link Menu 2<% end %>
-<%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu3')) do %>Link Menu 3<% end %>
+<div class="flex flex-wrap gap-16 grid-cols-3">
+  <div class="p-16 mb-16 border rounded">
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p1')) do %>Link Paragraph 1<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p2')) do %>Link Paragraph 2<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p3')) do %>Link Paragraph 3<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu1')) do %>Link Menu 1<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu2')) do %>Link Menu 2<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu3')) do %>Link Menu 3<% end %>
+  </div>
+
+  <div class="bg-cool-black p-16 mb-16 border rounded">
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p1', icon_color: 'text-white')) do %>Link Paragraph 1<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p2', icon_color: 'text-white')) do %>Link Paragraph 2<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p3', icon_color: 'text-white')) do %>Link Paragraph 3<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu1', icon_color: 'text-white')) do %>Link Menu 1<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu2', icon_color: 'text-white')) do %>Link Menu 2<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu3', icon_color: 'text-white')) do %>Link Menu 3<% end %>
+  </div>
+
+  <div class="bg-gradient-hot-pink p-16 mb-16 border rounded">
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p1', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white')) do %>Link Paragraph 1<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p2', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white')) do %>Link Paragraph 2<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p3', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white')) do %>Link Paragraph 3<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu1', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white')) do %>Link Menu 1<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu2', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white')) do %>Link Menu 2<% end %>
+    <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-menu3', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white')) do %>Link Menu 3<% end %>
+  </div>
+</div>
 
 <div class="max-w-screen-xs">
   <%= render(AblyUi::Core::FeaturedLink.new(url: '/blog', text_size: 'text-p1')) do %>Really long text in here to show how the link wraps<% end %>