Extract button component.

IDxtc · May 13, 2022 · bd4a515 · bd4a515
1 parent aad3dd1
commit bd4a515
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 8 deletions.
diff --git a/ecosystem/platform/server/Gemfile b/ecosystem/platform/server/Gemfile
@@ -84,6 +84,7 @@ gem 'recaptcha', '~> 5.10'
 # gem "image_processing", "~> 1.2"
 
 gem 'tailwindcss-rails', '~> 2.0'
+gem 'view_component', '~> 2.54'
 
 # Monitoring
 gem 'lograge', '~> 0.12.0'

diff --git a/ecosystem/platform/server/Gemfile.lock b/ecosystem/platform/server/Gemfile.lock
@@ -417,6 +417,9 @@ GEM
       unf_ext
     unf_ext (0.0.8.1)
     unicode-display_width (2.1.0)
+    view_component (2.54.1)
+      activesupport (>= 5.0.0, < 8.0)
+      method_source (~> 1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -482,6 +485,7 @@ DEPENDENCIES
   tailwindcss-rails (~> 2.0)
   turbo-rails
   tzinfo-data
+  view_component (~> 2.54)
   web-console
   webdrivers
 

diff --git a/ecosystem/platform/server/app/components/button_component.html.erb b/ecosystem/platform/server/app/components/button_component.html.erb
@@ -0,0 +1 @@
+<%= content_tag @tag, content, **@rest %>
diff --git a/ecosystem/platform/server/app/components/button_component.rb b/ecosystem/platform/server/app/components/button_component.rb
@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+# Copyright (c) Aptos
+# SPDX-License-Identifier: Apache-2.0
+
+SCHEME_CLASSES = {
+  primary: 'bg-teal-400 hover:bg-teal-300 text-neutral-800 text-center font-mono uppercase font-bold',
+  secondary: 'border border-teal-400 hover:border-teal-300 text-center text-white font-mono uppercase'
+}.freeze
+
+SIZE_CLASSES = {
+  large: 'px-8 py-4 text-lg rounded',
+  medium: 'p-2 text-lg rounded',
+  small: 'py-1 text-sm rounded'
+}.freeze
+
+class ButtonComponent < ViewComponent::Base
+  def initialize(scheme: :primary,
+                 size: :medium,
+                 **rest)
+    @rest = rest
+
+    @tag = rest[:href] ? :a : :button
+    rest[:class] = [
+      SCHEME_CLASSES[scheme],
+      SIZE_CLASSES[size],
+      rest[:class]
+    ]
+  end
+end
diff --git a/ecosystem/platform/server/app/views/it1_profiles/_form.html.erb b/ecosystem/platform/server/app/views/it1_profiles/_form.html.erb
@@ -87,7 +87,9 @@
     </div>
 
     <div class="bg-neutral-800 rounded-md p-4 md:px-8 md:py-16 2xl:px-16 2xl:py-24 self-start">
-      <%= f.submit "Validate node", class: "w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mb-8" %>
+      <%= render(ButtonComponent.new(type: :submit, class: 'w-full mb-8')) do %>
+        Validate node
+      <% end %>
       <div class="mb-8">
       <%= recaptcha_tags theme: :dark %>
       </div>

diff --git a/ecosystem/platform/server/app/views/layouts/_header.html.erb b/ecosystem/platform/server/app/views/layouts/_header.html.erb
@@ -3,7 +3,11 @@
     <svg fill="#fff" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 258.21 60.7"><title>Aptos</title><path d="M197.83 20.31h-5.35a2.17 2.17 0 0 1-1.63-.74l-2.17-2.45a1.71 1.71 0 0 0-2.55 0l-1.86 2.1a3.2 3.2 0 0 1-2.4 1.09h-29.28A30.34 30.34 0 0 0 151 27.8h27.64a1.77 1.77 0 0 0 1.28-.55l2.58-2.69a1.71 1.71 0 0 1 1.23-.52h.1a1.74 1.74 0 0 1 1.28.57l2.17 2.45a2.16 2.16 0 0 0 1.63.74h22.55a29.9 29.9 0 0 0-1.59-7.49h-12ZM167.72 43.55A1.79 1.79 0 0 0 169 43l2.57-2.69a1.74 1.74 0 0 1 1.23-.52h.11a1.74 1.74 0 0 1 1.28.57l2.16 2.45a2.19 2.19 0 0 0 1.63.74h30.57a30 30 0 0 0 2.5-7.55H181.7a2.18 2.18 0 0 1-1.62-.73l-2.17-2.45a1.71 1.71 0 0 0-1.28-.58 1.67 1.67 0 0 0-1.27.58l-1.86 2.1a3.22 3.22 0 0 1-2.41 1.08h-19.68a30 30 0 0 0 2.49 7.57ZM189.41 12.12a1.79 1.79 0 0 0 1.29-.55l2.57-2.68a1.7 1.7 0 0 1 1.23-.53h.11a1.67 1.67 0 0 1 1.27.58l2.17 2.45a2.21 2.21 0 0 0 1.63.73h5.81a30.34 30.34 0 0 0-48.52 0ZM177.73 51.05h-7.95a2.15 2.15 0 0 1-1.62-.74L166 47.86a1.72 1.72 0 0 0-2.56 0L161.57 50a3.19 3.19 0 0 1-2.4 1.09h-.12a30.33 30.33 0 0 0 44.37 0ZM47.07 58.74l-6.17-15H13.31l-6.17 15H0L27.06 2l27.15 56.74ZM15.64 38.05h22.85L27 13.86ZM64.07 58.74V2h15.8c12.35 0 18.84 5.65 18.84 16.32 0 10.26-6.89 16.2-18.92 16.2h-9.06v24.22Zm6.66-30.16h7.54c9.54 0 13.73-3.12 13.73-10.26 0-7.38-4.25-10.43-13.71-10.43h-7.56ZM122.89 8.05h-19.57V1.96h45.79v6.09h-19.57v50.69h-6.65V8.05zM220.84 48.39l5.73-3.89.44.92c3.53 6.42 7.38 9 13.23 9 6.5 0 11.07-4.49 11.07-9.95 0-5.13-2.57-8.58-12.83-12.83-11.79-4.89-15.8-9.94-15.8-17.16 0-7.86 6.18-14 16.84-14 7.86 0 13.23 3.36 16.28 8.82l-4.65 3.21-1.36-.33c-2.41-3.76-5.38-5.93-10.43-5.93-6.17 0-9.78 3.45-9.78 8.1 0 4.33 2.32 6.82 12.35 11.39 13.07 5.93 16.28 10.82 16.28 18.68 0 8.58-7.38 15.88-17.89 15.88-8.82 0-14.91-3.37-19.48-11.87"/></svg>
   </a>
   <div class="flex gap-8">
-    <%= link_to "Docs", "https://aptos.dev/", class: "font-mono border-teal-400 border rounded w-36 text-center py-1 uppercase text-sm" %>
-    <%= link_to "Explorer", "https://explorer.devnet.aptos.dev/", class: "hidden sm:block font-mono border-teal-400 border rounded w-36 text-center py-1 uppercase text-sm" %>
+      <%= render(ButtonComponent.new(href: 'https://aptos.dev', scheme: :secondary, size: :small, class: 'w-36')) do %>
+        Docs
+      <% end %>
+      <%= render(ButtonComponent.new(href: 'https://explorer.devnet.aptos.dev/', scheme: :secondary, size: :small, class: 'hidden sm:block w-36')) do %>
+        Explorer
+      <% end %>
   </div>
 </header>
diff --git a/ecosystem/platform/server/app/views/onboarding/email.html.erb b/ecosystem/platform/server/app/views/onboarding/email.html.erb
@@ -1,4 +1,4 @@
-<div>
+<div class="flex-[2]">
   <h2 class="text-4xl text-teal-400 font-mono mb-16 mt-8">Welcome, <%= @oauth_username %>!</h2>
 
   <%= render "layouts/flash" %>
@@ -29,7 +29,9 @@
     </div>
 
     <div class="mb-12">
-      <%= f.submit "Verify email", class: "w-72 bg-teal-400 hover:bg-teal-300 cursor-pointer text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded" %>
+      <%= render(ButtonComponent.new(type: :submit, class: 'w-72')) do %>
+        Verify email
+      <% end %>
     </div>
 
     <div class="text-sm">

diff --git a/ecosystem/platform/server/app/views/welcome/index.html.erb b/ecosystem/platform/server/app/views/welcome/index.html.erb
@@ -33,6 +33,8 @@
         </div>
       </div>
     </dialog>
-    <%= link_to "Sign up for Testnet", "javascript:document.getElementById('login-dialog').showModal()", class: "w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
+    <%= render(ButtonComponent.new(size: :large, onclick: 'document.getElementById("login-dialog").showModal()', class: 'w-full mt-auto')) do %>
+      Sign up for Testnet
+    <% end %>
   </div>
 </div>
diff --git a/ecosystem/platform/server/app/views/welcome/it1.html.erb b/ecosystem/platform/server/app/views/welcome/it1.html.erb
@@ -23,7 +23,9 @@
           <p class="mb-8 font-light">
           Register your node, and automatically verify that it is set up correctly.
           </p>
-          <%= link_to "Register", new_it1_profile_path, class: "w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
+          <%= render(ButtonComponent.new(href: new_it1_profile_path, class: 'w-full mt-auto')) do %>
+            Register
+          <% end %>
         </div>
       </div>
       <div class="bg-neutral-800 rounded-md flex flex-col flex-1">
@@ -37,7 +39,9 @@
           <% if current_user&.kyc_complete? %>
             <div class="w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto cursor-not-allowed select-none">Verification Complete</div>
           <% elsif current_user&.it1_profile&.validator_verified? %>
-            <%= link_to "Verify", onboarding_kyc_redirect_path, class: "w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
+            <%= render(ButtonComponent.new(href: onboarding_kyc_redirect_path, class: 'w-full mt-auto')) do %>
+              Verify
+            <% end %>
           <% end %>
         </div>
       </div>

diff --git a/ecosystem/platform/server/config/tailwind.config.js b/ecosystem/platform/server/config/tailwind.config.js
@@ -2,6 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
   content: [
+    './app/components/**/*.{rb,erb}',
     './app/helpers/**/*.rb',
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}'

diff --git a/ecosystem/platform/server/spec/components/button_component_spec.rb b/ecosystem/platform/server/spec/components/button_component_spec.rb
@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+# Copyright (c) Aptos
+# SPDX-License-Identifier: Apache-2.0
+
+require 'rails_helper'
+
+RSpec.describe ButtonComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end