Fix mobile unstyled appearance for clipboard button

app/components/clipboard_button_component.rb

@@ -1,22 +1,34 @@
-class ClipboardButtonComponent < ButtonComponent
-  attr_reader :clipboard_text, :tag_options
-
-  def initialize(clipboard_text:, **tag_options)
-    super(**tag_options, type: :button, icon: :content_copy)
+class ClipboardButtonComponent < BaseComponent
+  attr_reader :clipboard_text, :button_options
 
+  def initialize(clipboard_text:, **button_options)
     @clipboard_text = clipboard_text
+    @button_options = button_options
   end
 
   def call
     content_tag(
       :'lg-clipboard-button',
-      super,
+      button_content,
       'clipboard-text': clipboard_text,
       'tooltip-text': t('components.clipboard_button.tooltip'),
+      class: css_class,
     )
   end
 
   def content
     t('components.clipboard_button.label')
   end
+
+  def css_class
+    'clipboard-button--unstyled' if button_options[:unstyled]
+  end
+
+  def button_content
+    render ButtonComponent.new(
+      **button_options,
+      type: :button,
+      icon: :content_copy,
+    ).with_content(content)
+  end
 end

app/components/clipboard_button_component.scss

@@ -12,5 +12,9 @@
 .usa-tooltip {
   @include at-media-max('mobile-lg') {
     display: block;
+
+    .clipboard-button--unstyled & {
+      display: inline;
+    }
   }
 }

spec/components/clipboard_button_component_spec.rb

@@ -2,10 +2,10 @@
 
 RSpec.describe ClipboardButtonComponent, type: :component do
   let(:clipboard_text) { 'Copy Text' }
-  let(:tag_options) { {} }
+  let(:button_options) { {} }
 
   subject(:rendered) do
-    render_inline ClipboardButtonComponent.new(clipboard_text:, **tag_options)
+    render_inline ClipboardButtonComponent.new(clipboard_text:, **button_options)
   end
 
   it 'renders with clipboard text as attribute' do
@@ -19,7 +19,7 @@
   end
 
   context 'with tag options' do
-    let(:tag_options) { { outline: true, data: { foo: 'bar' } } }
+    let(:button_options) { { outline: true, data: { foo: 'bar' } } }
 
     it 'renders button given the tag options' do
       expect(rendered).to have_css('button.usa-button[type="button"][data-foo="bar"]')
@@ -29,4 +29,12 @@
       expect(rendered).to have_css('.usa-button--outline:not([outline])')
     end
   end
+
+  context 'with unstyled button' do
+    let(:button_options) { { unstyled: true } }
+
+    it 'renders with modifier class' do
+      expect(rendered).to have_css('lg-clipboard-button.clipboard-button--unstyled')
+    end
+  end
 end

spec/components/previews/clipboard_button_component_preview.rb

@@ -3,11 +3,18 @@ class ClipboardButtonComponentPreview < BaseComponentPreview
   def default
     render(ClipboardButtonComponent.new(clipboard_text: 'Copied Text', class: css_class))
   end
+
+  def unstyled
+    render(
+      ClipboardButtonComponent.new(clipboard_text: 'Copied Text', unstyled: true, class: css_class),
+    )
+  end
   # @!endgroup
 
   # @param clipboard_text text
-  def workbench(clipboard_text: 'Copied Text')
-    render(ClipboardButtonComponent.new(clipboard_text:, class: css_class))
+  # @param unstyled toggle
+  def workbench(clipboard_text: 'Copied Text', unstyled: false)
+    render(ClipboardButtonComponent.new(clipboard_text:, unstyled:, class: css_class))
   end
 
   private