Use Primer Button for "AddButtonComponent"

app/components/add_button_component.html.erb

@@ -1,9 +1,11 @@
-<a href="<%= dynamic_path %>"
-   id="<%= id %>"
-   title="<%= title %>"
-   arial-label="<%= aria_label %>"
-   class="<%= link_css_class %>">
-  <%= icon %>
-  <%= label %>
-</a>
-
+<%= render(Primer::ButtonComponent.new(scheme: :primary,
+                                       aria: { label: aria_label },
+                                       title:,
+                                       test_selector:,
+                                       tag: :a,
+                                       id:,
+                                       href: dynamic_path) ) do |button|
+  button.with_leading_visual_icon(icon: :plus)
+  label_text
+end
+%>

app/components/add_button_component.rb

@@ -48,12 +48,6 @@ class AddButtonComponent < ApplicationComponent
     accessibility_label_text
   end
 
-  def label
-    content_tag(:span,
-                label_text,
-                class: "button--text")
-  end
-
   def aria_label
     accessibility_label_text
   end
@@ -65,12 +59,4 @@ class AddButtonComponent < ApplicationComponent
   def label_text
     raise "Specify the label text to be used for this component"
   end
-
-  def link_css_class
-    "button -primary"
-  end
-
-  def icon
-    helpers.op_icon("button--icon icon-add")
-  end
 end

modules/boards/app/components/boards/add_button_component.rb

@@ -47,6 +47,10 @@ module Boards
       "add-board-button"
     end
 
+    def test_selector
+      "add-board-button"
+    end
+
     def accessibility_label_text
       I18n.t("boards.label_create_new_board")
     end

modules/boards/app/views/boards/boards/index.html.erb

@@ -40,7 +40,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%=
   render Primer::OpenProject::SubHeader.new do |subheader|
-    subheader.with_action_component(data: { "test-selector": "add-board-button"}) do
+    subheader.with_action_component do
        render Boards::AddButtonComponent.new(current_project: @project)
     end
   end

modules/boards/spec/features/support/board_index_page.rb

@@ -59,11 +59,9 @@ module Pages
 
     def create_board(action: "Basic", title: "#{action} Board", expect_empty: false, via_toolbar: true)
       if via_toolbar
-        within '[data-test-selector="add-board-button"]' do
-          click_link "Board"
-        end
+        page.find_test_selector("add-board-button").click
       else
-        find('[data-test-selector="boards--create-button"]').click
+        page.find_test_selector("boards--create-button").click
       end
 
       new_board_page = NewBoard.new

modules/boards/spec/features/support/board_list_page.rb

@@ -35,15 +35,11 @@ module Pages
     end
 
     def expect_create_button
-      within '[data-test-selector="add-board-button"]' do
-        expect(page).to have_link "Board"
-      end
+      expect(page).to have_test_selector "add-board-button"
     end
 
     def expect_no_create_button
-      within '[data-test-selector="add-board-button"]' do
-        expect(page).to have_no_link "Board"
-      end
+      expect(page).not_to have_test_selector "add-board-button"
     end
 
     def expect_delete_buttons(*boards)

modules/boards/spec/features/support/board_new_page.rb

@@ -13,9 +13,7 @@ module Pages
     def navigate_by_create_button
       visit work_package_boards_path unless page.current_path == work_package_boards_path
 
-      within '[data-test-selector="add-board-button"]' do
-        click_link "Board"
-      end
+      page.find_test_selector("add-board-button").click
     end
 
     def set_title(title)

modules/calendar/app/components/calendar/add_button_component.html.erb

@@ -1,8 +0,0 @@
-<a href="<%= dynamic_path %>"
-   id="<%= id %>"
-   title="<%= title %>"
-   arial-label="<%= aria_label %>"
-   class="<%= link_css_class %>">
-  <%= icon %>
-  <%= label %>
-</a>

modules/calendar/app/components/calendar/add_button_component.rb

@@ -51,6 +51,10 @@ module Calendar
       "add-calendar-button"
     end
 
+    def test_selector
+      "add-calendar-button"
+    end
+
     def accessibility_label_text
       I18n.t("js.calendar.create_new")
     end

modules/calendar/app/views/calendar/calendars/index.html.erb

@@ -39,7 +39,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%=
   render Primer::OpenProject::SubHeader.new do |subheader|
-    subheader.with_action_component(data: { "test-selector": "add-calendar-button"}) do
+    subheader.with_action_component do
       render Calendar::AddButtonComponent.new(current_project: @project)
     end
   end

modules/calendar/spec/features/calendar_sharing_spec.rb

@@ -140,7 +140,7 @@ RSpec.describe "Calendar sharing via ical", :js do
       it "shows disabled sharing menu item" do
         visit project_calendars_path(project)
 
-        click_link "Create new calendar"
+        page.find_test_selector("add-calendar-button").click
 
         # wait for settings button to become visible
         expect(page).to have_css("#work-packages-settings-button")

modules/calendar/spec/support/pages/calendar.rb

@@ -140,9 +140,7 @@ module Pages
     end
 
     def click_on_create_button
-      within '[data-test-selector="add-calendar-button"]' do
-        click_link "Calendar"
-      end
+      page.find_test_selector("add-calendar-button").click
     end
 
     def click_on_cancel_button
@@ -150,19 +148,19 @@ module Pages
     end
 
     def expect_create_button
-      expect(page).to have_css ".button", text: "Calendar"
+      expect(page).to have_test_selector "add-calendar-button"
     end
 
     def expect_no_create_button
-      expect(page).to have_no_css ".button", text: "Calendar"
+      expect(page).not_to have_test_selector "add-calendar-button"
     end
 
     def expect_delete_button(query)
-      expect(page).to have_css "[data-test-selector='calendar-remove-#{query.id}']"
+      expect(page).to have_test_selector "calendar-remove-#{query.id}"
     end
 
     def expect_no_delete_button(query)
-      expect(page).to have_no_css "[data-test-selector='calendar-remove-#{query.id}']"
+      expect(page).not_to have_test_selector "calendar-remove-#{query.id}"
     end
 
     def expect_no_views_visible

modules/team_planner/app/components/team_planner/add_button_component.rb

@@ -47,6 +47,10 @@ module TeamPlanner
       "add-team-planner-button"
     end
 
+    def test_selector
+      "add-team-planner-button"
+    end
+
     def accessibility_label_text
       I18n.t("team_planner.label_create_new_team_planner")
     end

modules/team_planner/app/views/team_planner/team_planner/index.html.erb

@@ -10,7 +10,7 @@
 
 <%=
   render Primer::OpenProject::SubHeader.new do |subheader|
-    subheader.with_action_component(data: { "test-selector": "add-team-planner-button"}) do
+    subheader.with_action_component do
       render ::TeamPlanner::AddButtonComponent.new(current_project: @project)
     end
   end

modules/team_planner/app/views/team_planner/team_planner/overview.html.erb

@@ -9,7 +9,7 @@
 
 <%=
   render Primer::OpenProject::SubHeader.new do |subheader|
-    subheader.with_action_component(data: { "test-selector": "add-team-planner-button"}) do
+    subheader.with_action_component do
       render ::TeamPlanner::AddButtonComponent.new
     end
   end

modules/team_planner/spec/features/team_planner_spec.rb

@@ -43,7 +43,7 @@ RSpec.describe "Team planner",
     end
 
     expect(page).to have_content "There is currently nothing to display."
-    click_on "Create", match: :first
+    page.find_test_selector("add-team-planner-button").click
 
     team_planner.expect_title
 

modules/team_planner/spec/support/pages/team_planner.rb

@@ -172,15 +172,11 @@ module Pages
     end
 
     def expect_create_button
-      within '[data-test-selector="add-team-planner-button"]' do
-        expect(page).to have_link text: "Team planner"
-      end
+      expect(page).to have_test_selector "add-team-planner-button"
     end
 
     def expect_no_create_button
-      within '[data-test-selector="add-team-planner-button"]' do
-        expect(page).to have_no_link text: "Team planner"
-      end
+      expect(page).not_to have_test_selector "add-team-planner-button"
     end
 
     def expect_views_listed_in_order(*queries)
@@ -192,9 +188,7 @@ module Pages
     end
 
     def click_on_create_button
-      within '[data-test-selector="add-team-planner-button"]' do
-        click_link "Team planner"
-      end
+      page.find_test_selector("add-team-planner-button").click
     end
 
     def click_on_cancel_button