From 94a72ecf5f0d6e07cc5d77fbcce98d97450394d4 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Fri, 13 Apr 2018 15:27:10 -0500
Subject: [PATCH] [skip ci] Convert previous .card to .board-card

---
 .../boards/components/board_card.vue          |  2 +-
 .../boards/components/board_new_issue.vue     |  2 +-
 .../boards/components/issue_card_inner.js     | 10 ++--
 app/assets/stylesheets/framework/layout.scss  |  2 +-
 app/assets/stylesheets/pages/boards.scss      | 18 +++----
 .../stylesheets/pages/convdev_index.scss      | 18 +++----
 .../_card.html.haml                           | 18 +++----
 .../show.html.haml                            |  2 +-
 app/views/projects/issues/show.html.haml      |  2 +-
 .../projects/merge_requests/show.html.haml    |  2 +-
 spec/features/boards/add_issues_modal_spec.rb | 32 ++++++------
 spec/features/boards/boards_spec.rb           | 50 +++++++++----------
 spec/features/boards/issue_ordering_spec.rb   | 34 ++++++-------
 spec/features/boards/modal_filter_spec.rb     | 22 ++++----
 spec/features/boards/sidebar_spec.rb          | 12 ++---
 .../features/boards/sub_group_project_spec.rb |  2 +-
 spec/features/labels_hierarchy_spec.rb        | 14 +++---
 spec/javascripts/boards/board_list_spec.js    |  4 +-
 spec/javascripts/boards/issue_card_spec.js    | 30 +++++------
 spec/models/issue_spec.rb                     |  4 +-
 spec/models/merge_request_spec.rb             |  4 +-
 .../metric_presenter_spec.rb                  |  2 +-
 spec/support/board_helpers.rb                 |  2 +-
 23 files changed, 144 insertions(+), 144 deletions(-)

diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 84885ca9306..33e3369b971 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -77,7 +77,7 @@ export default {
 
 <template>
   <li
-    class="card"
+    class="board-card"
     :class="{
       'user-can-drag': !disabled && issue.id,
       'is-disabled': disabled || !issue.id,
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index 1c00472c532..6b5b5fef157 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -92,7 +92,7 @@ export default {
 
 <template>
   <div class="board-new-issue-form">
-    <div class="card">
+    <div class="board-card">
       <form @submit="submit($event)">
         <div
           class="flash-container"
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
index 84fe9b1288a..cfa916256a5 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.js
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -135,8 +135,8 @@ gl.issueBoards.IssueCardInner = Vue.extend({
   },
   template: `
     <div>
-      <div class="card-header">
-        <h4 class="card-title">
+      <div class="board-card-header">
+        <h4 class="board-card-title">
           <i
             class="fa fa-eye-slash confidential-icon"
             v-if="issue.confidential"
@@ -147,13 +147,13 @@ gl.issueBoards.IssueCardInner = Vue.extend({
             :href="issue.path"
             :title="issue.title">{{ issue.title }}</a>
           <span
-            class="card-number"
+            class="board-card-number"
             v-if="issueId"
           >
             {{ issue.referencePath }}
           </span>
         </h4>
-        <div class="card-assignee">
+        <div class="board-card-assignee">
           <user-avatar-link
             v-for="(assignee, index) in issue.assignees"
             :key="assignee.id"
@@ -175,7 +175,7 @@ gl.issueBoards.IssueCardInner = Vue.extend({
         </div>
       </div>
       <div
-        class="card-footer"
+        class="board-card-footer"
         v-if="showLabelFooter"
       >
         <button
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 227d0ab53bb..0536c39cee7 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -15,7 +15,7 @@ body {
     background-color: $white-light !important;
   }
 
-  &.card-content {
+  &.board-card-content {
     background-color: $gray-darker;
 
     .content-wrapper {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 2407ef28cc9..d4509afc0bc 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -276,7 +276,7 @@
   font-size: (26px / $issue-boards-font-size) * 1em;
 }
 
-.card {
+.board-card {
   position: relative;
   padding: 11px 10px 11px $gl-padding;
   background: $white-light;
@@ -289,7 +289,7 @@
   }
 
   &.is-active,
-  &.is-active .card-assignee:hover a {
+  &.is-active .board-card-assignee:hover a {
     background-color: $row-hover;
 
     &:first-child:not(:only-child) {
@@ -309,7 +309,7 @@
   }
 }
 
-.card-title {
+.board-card-title {
   margin: 0 30px 0 0;
   font-size: 1em;
   line-height: inherit;
@@ -321,11 +321,11 @@
   }
 }
 
-.card-header {
+.board-card-header {
   display: flex;
   min-height: 20px;
 
-  .card-assignee {
+  .board-card-assignee {
     display: flex;
     justify-content: flex-end;
     position: absolute;
@@ -396,7 +396,7 @@
   }
 }
 
-.card-footer {
+.board-card-footer {
   margin: 0 0 5px;
 
   .badge {
@@ -405,7 +405,7 @@
   }
 }
 
-.card-number {
+.board-card-number {
   font-size: 12px;
   color: $gl-text-color-secondary;
 }
@@ -581,11 +581,11 @@
   margin-right: -$gl-vert-padding;
   overflow-y: scroll;
 
-  .card-parent {
+  .board-card-parent {
     padding: 0 5px 5px;
   }
 
-  .card {
+  .board-card {
     border: 1px solid $border-gray-dark;
     box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3);
     cursor: pointer;
diff --git a/app/assets/stylesheets/pages/convdev_index.scss b/app/assets/stylesheets/pages/convdev_index.scss
index bbd69f36537..0ff0c2862fb 100644
--- a/app/assets/stylesheets/pages/convdev_index.scss
+++ b/app/assets/stylesheets/pages/convdev_index.scss
@@ -82,7 +82,7 @@ $space-between-cards: 8px;
 .convdev-card-low {
   border-top-color: $color-low-score;
 
-  .card-score-big {
+  .board-card-score-big {
     background-color: $red-50;
   }
 }
@@ -90,7 +90,7 @@ $space-between-cards: 8px;
 .convdev-card-average {
   border-top-color: $color-average-score;
 
-  .card-score-big {
+  .board-card-score-big {
     background-color: $orange-50;
   }
 }
@@ -98,7 +98,7 @@ $space-between-cards: 8px;
 .convdev-card-high {
   border-top-color: $color-high-score;
 
-  .card-score-big {
+  .board-card-score-big {
     background-color: $green-50;
   }
 }
@@ -119,7 +119,7 @@ $space-between-cards: 8px;
   }
 }
 
-.card-scores {
+.board-card-scores {
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -127,22 +127,22 @@ $space-between-cards: 8px;
   line-height: 1;
 }
 
-.card-score {
+.board-card-score {
   color: $gl-text-color-secondary;
 
-  .card-score-name {
+  .board-card-score-name {
     font-size: 13px;
     margin-top: 4px;
   }
 }
 
-.card-score-value {
+.board-card-score-value {
   font-size: 16px;
   color: $gl-text-color;
   font-weight: $gl-font-weight-normal;
 }
 
-.card-score-big {
+.board-card-score-big {
   border-top: 2px solid $border-color;
   border-bottom: 1px solid $border-color;
   font-size: 22px;
@@ -150,7 +150,7 @@ $space-between-cards: 8px;
   font-weight: $gl-font-weight-normal;
 }
 
-.card-buttons {
+.board-card-buttons {
   display: flex;
 
   > * {
diff --git a/app/views/admin/conversational_development_index/_card.html.haml b/app/views/admin/conversational_development_index/_card.html.haml
index 6c8688e06ae..d66c2381618 100644
--- a/app/views/admin/conversational_development_index/_card.html.haml
+++ b/app/views/admin/conversational_development_index/_card.html.haml
@@ -5,18 +5,18 @@
         = card.title
       .text-light
         = card.description
-    .card-scores
-      .card-score
-        .card-score-value
+    .board-card-scores
+      .board-card-score
+        .board-card-score-value
           = format_score(card.instance_score)
-        .card-score-name You
-      .card-score
-        .card-score-value
+        .board-card-score-name You
+      .board-card-score
+        .board-card-score-value
           = format_score(card.leader_score)
-        .card-score-name Lead
-    .card-score-big
+        .board-card-score-name Lead
+    .board-card-score-big
       = number_to_percentage(card.percentage_score, precision: 1)
-    .card-buttons
+    .board-card-buttons
       - if card.blog
         %a{ href: card.blog }
           = icon('info-circle', 'aria-hidden' => 'true')
diff --git a/app/views/admin/conversational_development_index/show.html.haml b/app/views/admin/conversational_development_index/show.html.haml
index d71417ef88f..e3d1aa31dc2 100644
--- a/app/views/admin/conversational_development_index/show.html.haml
+++ b/app/views/admin/conversational_development_index/show.html.haml
@@ -21,7 +21,7 @@
           score
           = link_to icon('question-circle', 'aria-hidden' => 'true'), help_page_path('user/admin_area/monitoring/convdev')
 
-      .convdev-cards.card-container
+      .convdev-cards.board-card-container
         - @metric.cards.each do |card|
           = render 'card', card: card
 
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 733c9c635ff..0a4f139ef09 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -3,7 +3,7 @@
 - breadcrumb_title @issue.to_reference
 - page_title           "#{@issue.title} (#{@issue.to_reference})", "Issues"
 - page_description     @issue.description
-- page_card_attributes @issue.card_attributes
+- page_card_attributes @issue.board-card_attributes
 
 - can_update_issue = can?(current_user, :update_issue, @issue)
 - can_report_spam = @issue.submittable_as_spam_by?(current_user)
diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml
index fb70edfca28..a3fa792a728 100644
--- a/app/views/projects/merge_requests/show.html.haml
+++ b/app/views/projects/merge_requests/show.html.haml
@@ -4,7 +4,7 @@
 - breadcrumb_title @merge_request.to_reference
 - page_title "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests"
 - page_description @merge_request.description
-- page_card_attributes @merge_request.card_attributes
+- page_card_attributes @merge_request.board-card_attributes
 
 .merge-request{ data: { mr_action: j(params[:tab].presence || 'show'), url: merge_request_path(@merge_request, format: :json), project_path: project_path(@merge_request.project) } }
   = render "projects/merge_requests/mr_title"
diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
index 18901a954cc..7a14a441088 100644
--- a/spec/features/boards/add_issues_modal_spec.rb
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -81,7 +81,7 @@ describe 'Issue Boards add issue modal', :js do
           expect(page).to have_content('2')
         end
 
-        expect(page).to have_selector('.card', count: 2)
+        expect(page).to have_selector('.board-card', count: 2)
       end
     end
 
@@ -89,7 +89,7 @@ describe 'Issue Boards add issue modal', :js do
       page.within('.add-issues-modal') do
         click_link 'Selected issues'
 
-        expect(page).not_to have_selector('.card')
+        expect(page).not_to have_selector('.board-card')
       end
     end
 
@@ -122,7 +122,7 @@ describe 'Issue Boards add issue modal', :js do
 
           wait_for_requests
 
-          expect(page).to have_selector('.card', count: 1)
+          expect(page).to have_selector('.board-card', count: 1)
         end
       end
 
@@ -133,7 +133,7 @@ describe 'Issue Boards add issue modal', :js do
 
           wait_for_requests
 
-          expect(page).not_to have_selector('.card')
+          expect(page).not_to have_selector('.board-card')
           expect(page).not_to have_content("You haven't added any issues to your project yet")
         end
       end
@@ -142,7 +142,7 @@ describe 'Issue Boards add issue modal', :js do
     context 'selecing issues' do
       it 'selects single issue' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           page.within('.nav-links') do
             expect(page).to have_content('Selected issues 1')
@@ -152,7 +152,7 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'changes button text' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           expect(first('.add-issues-footer .btn')).to have_content('Add 1 issue')
         end
@@ -160,7 +160,7 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'changes button text with plural' do
         page.within('.add-issues-modal') do
-          all('.card .card-number').each do |el|
+          all('.board-card .board-card-number').each do |el|
             el.click
           end
 
@@ -170,11 +170,11 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'shows only selected issues on selected tab' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           click_link 'Selected issues'
 
-          expect(page).to have_selector('.card', count: 1)
+          expect(page).to have_selector('.board-card', count: 1)
         end
       end
 
@@ -200,7 +200,7 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'selects all that arent already selected' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           expect(page).to have_selector('.is-active', count: 1)
 
@@ -212,11 +212,11 @@ describe 'Issue Boards add issue modal', :js do
 
       it 'unselects from selected tab' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           click_link 'Selected issues'
 
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           expect(page).not_to have_selector('.is-active')
         end
@@ -226,19 +226,19 @@ describe 'Issue Boards add issue modal', :js do
     context 'adding issues' do
       it 'adds to board' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           click_button 'Add 1 issue'
         end
 
         page.within(find('.board:nth-child(2)')) do
-          expect(page).to have_selector('.card')
+          expect(page).to have_selector('.board-card')
         end
       end
 
       it 'adds to second list' do
         page.within('.add-issues-modal') do
-          first('.card .card-number').click
+          first('.board-card .board-card-number').click
 
           click_button planning.title
 
@@ -248,7 +248,7 @@ describe 'Issue Boards add issue modal', :js do
         end
 
         page.within(find('.board:nth-child(3)')) do
-          expect(page).to have_selector('.card')
+          expect(page).to have_selector('.board-card')
         end
       end
     end
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index 52ff47d57f9..11bbb555f82 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -92,9 +92,9 @@ describe 'Issue Boards', :js do
       wait_for_requests
 
       expect(page).to have_selector('.board', count: 4)
-      expect(find('.board:nth-child(2)')).to have_selector('.card')
-      expect(find('.board:nth-child(3)')).to have_selector('.card')
-      expect(find('.board:nth-child(4)')).to have_selector('.card')
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card')
+      expect(find('.board:nth-child(3)')).to have_selector('.board-card')
+      expect(find('.board:nth-child(4)')).to have_selector('.board-card')
     end
 
     it 'shows description tooltip on list title' do
@@ -120,9 +120,9 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(3)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(4)')).to have_selector('.card', count: 1)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 0)
+      expect(find('.board:nth-child(3)')).to have_selector('.board-card', count: 0)
+      expect(find('.board:nth-child(4)')).to have_selector('.board-card', count: 1)
     end
 
     it 'search list' do
@@ -131,9 +131,9 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 1)
-      expect(find('.board:nth-child(3)')).to have_selector('.card', count: 0)
-      expect(find('.board:nth-child(4)')).to have_selector('.card', count: 0)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 1)
+      expect(find('.board:nth-child(3)')).to have_selector('.board-card', count: 0)
+      expect(find('.board:nth-child(4)')).to have_selector('.board-card', count: 0)
     end
 
     it 'allows user to delete board' do
@@ -171,21 +171,21 @@ describe 'Issue Boards', :js do
 
       page.within(find('.board:nth-child(2)')) do
         expect(page.find('.board-header')).to have_content('58')
-        expect(page).to have_selector('.card', count: 20)
+        expect(page).to have_selector('.board-card', count: 20)
         expect(page).to have_content('Showing 20 of 58 issues')
 
         find('.board .board-list')
         evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight")
         wait_for_requests
 
-        expect(page).to have_selector('.card', count: 40)
+        expect(page).to have_selector('.board-card', count: 40)
         expect(page).to have_content('Showing 40 of 58 issues')
 
         find('.board .board-list')
         evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight")
         wait_for_requests
 
-        expect(page).to have_selector('.card', count: 58)
+        expect(page).to have_selector('.board-card', count: 58)
         expect(page).to have_content('Showing all issues')
       end
     end
@@ -204,7 +204,7 @@ describe 'Issue Boards', :js do
         wait_for_board_cards(4, 2)
 
         expect(find('.board:nth-child(2)')).not_to have_content(issue9.title)
-        expect(find('.board:nth-child(4)')).to have_selector('.card', count: 2)
+        expect(find('.board:nth-child(4)')).to have_selector('.board-card', count: 2)
         expect(find('.board:nth-child(4)')).to have_content(issue9.title)
         expect(find('.board:nth-child(4)')).not_to have_content(planning.title)
       end
@@ -242,7 +242,7 @@ describe 'Issue Boards', :js do
         wait_for_board_cards(4, 1)
 
         expect(find('.board:nth-child(3)')).to have_content(issue6.title)
-        expect(find('.board:nth-child(3)').all('.card').last).to have_content(development.title)
+        expect(find('.board:nth-child(3)').all('.board-card').last).to have_content(development.title)
       end
 
       it 'issue moves between lists' do
@@ -253,7 +253,7 @@ describe 'Issue Boards', :js do
         wait_for_board_cards(4, 1)
 
         expect(find('.board:nth-child(2)')).to have_content(issue7.title)
-        expect(find('.board:nth-child(2)').all('.card').first).to have_content(planning.title)
+        expect(find('.board:nth-child(2)').all('.board-card').first).to have_content(planning.title)
       end
 
       it 'issue moves from closed' do
@@ -425,12 +425,12 @@ describe 'Issue Boards', :js do
 
         page.within(find('.board:nth-child(2)')) do
           expect(page.find('.board-header')).to have_content('1')
-          expect(page).to have_selector('.card', count: 1)
+          expect(page).to have_selector('.board-card', count: 1)
         end
 
         page.within(find('.board:nth-child(3)')) do
           expect(page.find('.board-header')).to have_content('0')
-          expect(page).to have_selector('.card', count: 0)
+          expect(page).to have_selector('.board-card', count: 0)
         end
       end
 
@@ -460,19 +460,19 @@ describe 'Issue Boards', :js do
 
         page.within(find('.board:nth-child(2)')) do
           expect(page.find('.board-header')).to have_content('51')
-          expect(page).to have_selector('.card', count: 20)
+          expect(page).to have_selector('.board-card', count: 20)
           expect(page).to have_content('Showing 20 of 51 issues')
 
           find('.board .board-list')
           evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight")
 
-          expect(page).to have_selector('.card', count: 40)
+          expect(page).to have_selector('.board-card', count: 40)
           expect(page).to have_content('Showing 40 of 51 issues')
 
           find('.board .board-list')
           evaluate_script("document.querySelectorAll('.board .board-list')[1].scrollTop = document.querySelectorAll('.board .board-list')[1].scrollHeight")
 
-          expect(page).to have_selector('.card', count: 51)
+          expect(page).to have_selector('.board-card', count: 51)
           expect(page).to have_content('Showing all issues')
         end
       end
@@ -494,8 +494,8 @@ describe 'Issue Boards', :js do
 
       it 'filters by clicking label button on issue' do
         page.within(find('.board:nth-child(2)')) do
-          expect(page).to have_selector('.card', count: 8)
-          expect(find('.card', match: :first)).to have_content(bug.title)
+          expect(page).to have_selector('.board-card', count: 8)
+          expect(find('.board-card', match: :first)).to have_content(bug.title)
           click_button(bug.title)
           wait_for_requests
         end
@@ -512,13 +512,13 @@ describe 'Issue Boards', :js do
 
       it 'removes label filter by clicking label button on issue' do
         page.within(find('.board:nth-child(2)')) do
-          page.within(find('.card', match: :first)) do
+          page.within(find('.board-card', match: :first)) do
             click_button(bug.title)
           end
 
           wait_for_requests
 
-          expect(page).to have_selector('.card', count: 1)
+          expect(page).to have_selector('.board-card', count: 1)
         end
 
         wait_for_requests
@@ -589,7 +589,7 @@ describe 'Issue Boards', :js do
   def wait_for_board_cards(board_number, expected_cards)
     page.within(find(".board:nth-child(#{board_number})")) do
       expect(page.find('.board-header')).to have_content(expected_cards.to_s)
-      expect(page).to have_selector('.card', count: expected_cards)
+      expect(page).to have_selector('.board-card', count: expected_cards)
     end
   end
 
diff --git a/spec/features/boards/issue_ordering_spec.rb b/spec/features/boards/issue_ordering_spec.rb
index 5abd02dbb48..193b1dfabbd 100644
--- a/spec/features/boards/issue_ordering_spec.rb
+++ b/spec/features/boards/issue_ordering_spec.rb
@@ -30,7 +30,7 @@ describe 'Issue Boards', :js do
 
     it 'has un-ordered issue as last issue' do
       page.within(find('.board:nth-child(2)')) do
-        expect(all('.card').last).to have_content(issue4.title)
+        expect(all('.board-card').last).to have_content(issue4.title)
       end
     end
 
@@ -40,7 +40,7 @@ describe 'Issue Boards', :js do
       wait_for_requests
 
       page.within(find('.board:nth-child(2)')) do
-        expect(first('.card')).to have_content(issue4.title)
+        expect(first('.board-card')).to have_content(issue4.title)
       end
     end
   end
@@ -58,7 +58,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(first('.card')).to have_content(issue2.title)
+      expect(first('.board-card')).to have_content(issue2.title)
     end
 
     it 'moves from middle to bottom' do
@@ -66,7 +66,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(all('.card').last).to have_content(issue2.title)
+      expect(all('.board-card').last).to have_content(issue2.title)
     end
 
     it 'moves from top to bottom' do
@@ -74,7 +74,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(all('.card').last).to have_content(issue3.title)
+      expect(all('.board-card').last).to have_content(issue3.title)
     end
 
     it 'moves from bottom to top' do
@@ -82,7 +82,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(first('.card')).to have_content(issue1.title)
+      expect(first('.board-card')).to have_content(issue1.title)
     end
 
     it 'moves from top to middle' do
@@ -90,7 +90,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(first('.card')).to have_content(issue2.title)
+      expect(first('.board-card')).to have_content(issue2.title)
     end
 
     it 'moves from bottom to middle' do
@@ -98,7 +98,7 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(all('.card').last).to have_content(issue2.title)
+      expect(all('.board-card').last).to have_content(issue2.title)
     end
   end
 
@@ -121,11 +121,11 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 2)
-      expect(all('.board')[2]).to have_selector('.card', count: 4)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 2)
+      expect(all('.board')[2]).to have_selector('.board-card', count: 4)
 
       page.within(all('.board')[2]) do
-        expect(first('.card')).to have_content(issue3.title)
+        expect(first('.board-card')).to have_content(issue3.title)
       end
     end
 
@@ -134,11 +134,11 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 2)
-      expect(all('.board')[2]).to have_selector('.card', count: 4)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 2)
+      expect(all('.board')[2]).to have_selector('.board-card', count: 4)
 
       page.within(all('.board')[2]) do
-        expect(all('.card').last).to have_content(issue3.title)
+        expect(all('.board-card').last).to have_content(issue3.title)
       end
     end
 
@@ -147,11 +147,11 @@ describe 'Issue Boards', :js do
 
       wait_for_requests
 
-      expect(find('.board:nth-child(2)')).to have_selector('.card', count: 2)
-      expect(all('.board')[2]).to have_selector('.card', count: 4)
+      expect(find('.board:nth-child(2)')).to have_selector('.board-card', count: 2)
+      expect(all('.board')[2]).to have_selector('.board-card', count: 4)
 
       page.within(all('.board')[2]) do
-        expect(all('.card')[1]).to have_content(issue3.title)
+        expect(all('.board-card')[1]).to have_content(issue3.title)
       end
     end
   end
diff --git a/spec/features/boards/modal_filter_spec.rb b/spec/features/boards/modal_filter_spec.rb
index 5907bb0840f..be9c6a51c29 100644
--- a/spec/features/boards/modal_filter_spec.rb
+++ b/spec/features/boards/modal_filter_spec.rb
@@ -38,7 +38,7 @@ describe 'Issue Boards add issue modal filtering', :js do
     page.within('.add-issues-modal') do
       wait_for_requests
 
-      expect(page).to have_selector('.card', count: 0)
+      expect(page).to have_selector('.board-card', count: 0)
 
       click_button 'Cancel'
     end
@@ -48,7 +48,7 @@ describe 'Issue Boards add issue modal filtering', :js do
     page.within('.add-issues-modal') do
       wait_for_requests
 
-      expect(page).to have_selector('.card', count: 1)
+      expect(page).to have_selector('.board-card', count: 1)
     end
   end
 
@@ -62,13 +62,13 @@ describe 'Issue Boards add issue modal filtering', :js do
     page.within('.add-issues-modal') do
       wait_for_requests
 
-      expect(page).to have_selector('.card', count: 0)
+      expect(page).to have_selector('.board-card', count: 0)
 
       find('.clear-search').click
 
       wait_for_requests
 
-      expect(page).to have_selector('.card', count: 1)
+      expect(page).to have_selector('.board-card', count: 1)
     end
   end
 
@@ -90,7 +90,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: user2.name)
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
   end
@@ -113,7 +113,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: 'none')
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
 
@@ -126,7 +126,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: user2.name)
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
   end
@@ -148,7 +148,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: 'upcoming')
-        expect(page).to have_selector('.card', count: 0)
+        expect(page).to have_selector('.board-card', count: 0)
       end
     end
 
@@ -161,7 +161,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: milestone.name)
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
   end
@@ -183,7 +183,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: 'none')
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
 
@@ -196,7 +196,7 @@ describe 'Issue Boards add issue modal filtering', :js do
         wait_for_requests
 
         expect(page).to have_selector('.js-visual-token', text: label.title)
-        expect(page).to have_selector('.card', count: 1)
+        expect(page).to have_selector('.board-card', count: 1)
       end
     end
   end
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index d4c44c1adf9..38a190a5668 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/spec/features/boards/sidebar_spec.rb
@@ -15,7 +15,7 @@ describe 'Issue Boards', :js do
   let!(:issue2)      { create(:labeled_issue, project: project, labels: [development, stretch], relative_position: 1) }
   let(:board)        { create(:board, project: project) }
   let!(:list)        { create(:list, board: board, label: development, position: 0) }
-  let(:card) { find('.board:nth-child(2)').first('.card') }
+  let(:card) { find('.board:nth-child(2)').first('.board-card') }
 
   around do |example|
     Timecop.freeze { example.run }
@@ -75,7 +75,7 @@ describe 'Issue Boards', :js do
     wait_for_requests
 
     page.within(find('.board:nth-child(2)')) do
-      expect(page).to have_selector('.card', count: 1)
+      expect(page).to have_selector('.board-card', count: 1)
     end
   end
 
@@ -86,11 +86,11 @@ describe 'Issue Boards', :js do
     visit project_board_path(project, board)
     wait_for_requests
 
-    click_card(find('.board:nth-child(1)').first('.card'))
+    click_card(find('.board:nth-child(1)').first('.board-card'))
 
     expect(find('.issue-boards-sidebar')).not_to have_button 'Remove from board'
 
-    click_card(find('.board:nth-child(3)').first('.card'))
+    click_card(find('.board:nth-child(3)').first('.board-card'))
 
     expect(find('.issue-boards-sidebar')).not_to have_button 'Remove from board'
   end
@@ -117,7 +117,7 @@ describe 'Issue Boards', :js do
     end
 
     it 'removes the assignee' do
-      card_two = find('.board:nth-child(2)').find('.card:nth-child(2)')
+      card_two = find('.board:nth-child(2)').find('.board-card:nth-child(2)')
       click_card(card_two)
 
       page.within('.assignee') do
@@ -171,7 +171,7 @@ describe 'Issue Boards', :js do
       end
 
       page.within(find('.board:nth-child(2)')) do
-        find('.card:nth-child(2)').click
+        find('.board-card:nth-child(2)').click
       end
 
       page.within('.assignee') do
diff --git a/spec/features/boards/sub_group_project_spec.rb b/spec/features/boards/sub_group_project_spec.rb
index 5fdb8044db2..271c610dcc8 100644
--- a/spec/features/boards/sub_group_project_spec.rb
+++ b/spec/features/boards/sub_group_project_spec.rb
@@ -20,7 +20,7 @@ describe 'Sub-group project issue boards', :js do
   end
 
   it 'creates new label from sidebar' do
-    find('.card').click
+    find('.board-card').click
 
     page.within '.labels' do
       click_link 'Edit'
diff --git a/spec/features/labels_hierarchy_spec.rb b/spec/features/labels_hierarchy_spec.rb
index 3e05e7b7f38..9aaa2d59e6b 100644
--- a/spec/features/labels_hierarchy_spec.rb
+++ b/spec/features/labels_hierarchy_spec.rb
@@ -57,7 +57,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
         wait_for_requests
 
         if board
-          expect(page).to have_selector('.card-title') do |card|
+          expect(page).to have_selector('.board-card-title') do |card|
             expect(card).to have_selector('a', text: labeled_issue.title)
           end
         else
@@ -96,11 +96,11 @@ feature 'Labels Hierarchy', :js, :nested_groups do
         wait_for_requests
 
         if board
-          expect(page).to have_selector('.card-title') do |card|
+          expect(page).to have_selector('.board-card-title') do |card|
             expect(card).to have_selector('a', text: labeled_issue.title)
           end
 
-          expect(page).to have_selector('.card-title') do |card|
+          expect(page).to have_selector('.board-card-title') do |card|
             expect(card).to have_selector('a', text: labeled_issue_2.title)
           end
         else
@@ -118,11 +118,11 @@ feature 'Labels Hierarchy', :js, :nested_groups do
       select_label_on_dropdown(group_label_3.title)
 
       if board
-        expect(page).to have_selector('.card-title') do |card|
+        expect(page).to have_selector('.board-card-title') do |card|
           expect(card).not_to have_selector('a', text: labeled_issue_2.title)
         end
 
-        expect(page).to have_selector('.card-title') do |card|
+        expect(page).to have_selector('.board-card-title') do |card|
           expect(card).to have_selector('a', text: labeled_issue_3.title)
         end
       else
@@ -184,7 +184,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
         wait_for_requests
 
-        find('.card').click
+        find('.board-card').click
       end
 
       it_behaves_like 'assigning labels from sidebar'
@@ -198,7 +198,7 @@ feature 'Labels Hierarchy', :js, :nested_groups do
 
         wait_for_requests
 
-        find('.card').click
+        find('.board-card').click
       end
 
       it_behaves_like 'assigning labels from sidebar'
diff --git a/spec/javascripts/boards/board_list_spec.js b/spec/javascripts/boards/board_list_spec.js
index 03df6c06691..c06b2f60813 100644
--- a/spec/javascripts/boards/board_list_spec.js
+++ b/spec/javascripts/boards/board_list_spec.js
@@ -83,13 +83,13 @@ describe('Board list component', () => {
 
   it('renders issues', () => {
     expect(
-      component.$el.querySelectorAll('.card').length,
+      component.$el.querySelectorAll('.board-card').length,
     ).toBe(1);
   });
 
   it('sets data attribute with issue id', () => {
     expect(
-      component.$el.querySelector('.card').getAttribute('data-issue-id'),
+      component.$el.querySelector('.board-card').getAttribute('data-issue-id'),
     ).toBe('1');
   });
 
diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js
index be1ea0b57b4..696351a1ce5 100644
--- a/spec/javascripts/boards/issue_card_spec.js
+++ b/spec/javascripts/boards/issue_card_spec.js
@@ -70,19 +70,19 @@ describe('Issue card component', () => {
 
   it('renders issue title', () => {
     expect(
-      component.$el.querySelector('.card-title').textContent,
+      component.$el.querySelector('.board-card-title').textContent,
     ).toContain(issue.title);
   });
 
   it('includes issue base in link', () => {
     expect(
-      component.$el.querySelector('.card-title a').getAttribute('href'),
+      component.$el.querySelector('.board-card-title a').getAttribute('href'),
     ).toContain('/test');
   });
 
   it('includes issue title on link', () => {
     expect(
-      component.$el.querySelector('.card-title a').getAttribute('title'),
+      component.$el.querySelector('.board-card-title a').getAttribute('title'),
     ).toBe(issue.title);
   });
 
@@ -105,14 +105,14 @@ describe('Issue card component', () => {
 
   it('renders issue ID with #', () => {
     expect(
-      component.$el.querySelector('.card-number').textContent,
+      component.$el.querySelector('.board-card-number').textContent,
     ).toContain(`#${issue.id}`);
   });
 
   describe('assignee', () => {
     it('does not render assignee', () => {
       expect(
-        component.$el.querySelector('.card-assignee .avatar'),
+        component.$el.querySelector('.board-card-assignee .avatar'),
       ).toBeNull();
     });
 
@@ -125,25 +125,25 @@ describe('Issue card component', () => {
 
       it('renders assignee', () => {
         expect(
-          component.$el.querySelector('.card-assignee .avatar'),
+          component.$el.querySelector('.board-card-assignee .avatar'),
         ).not.toBeNull();
       });
 
       it('sets title', () => {
         expect(
-          component.$el.querySelector('.card-assignee img').getAttribute('data-original-title'),
+          component.$el.querySelector('.board-card-assignee img').getAttribute('data-original-title'),
         ).toContain(`Assigned to ${user.name}`);
       });
 
       it('sets users path', () => {
         expect(
-          component.$el.querySelector('.card-assignee a').getAttribute('href'),
+          component.$el.querySelector('.board-card-assignee a').getAttribute('href'),
         ).toBe('/test');
       });
 
       it('renders avatar', () => {
         expect(
-          component.$el.querySelector('.card-assignee img'),
+          component.$el.querySelector('.board-card-assignee img'),
         ).not.toBeNull();
       });
     });
@@ -161,10 +161,10 @@ describe('Issue card component', () => {
 
       it('displays defaults avatar if users avatar is null', () => {
         expect(
-          component.$el.querySelector('.card-assignee img'),
+          component.$el.querySelector('.board-card-assignee img'),
         ).not.toBeNull();
         expect(
-          component.$el.querySelector('.card-assignee img').getAttribute('src'),
+          component.$el.querySelector('.board-card-assignee img').getAttribute('src'),
         ).toBe('default_avatar');
       });
     });
@@ -197,7 +197,7 @@ describe('Issue card component', () => {
     });
 
     it('renders all four assignees', () => {
-      expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(4);
+      expect(component.$el.querySelectorAll('.board-card-assignee .avatar').length).toEqual(4);
     });
 
     describe('more than four assignees', () => {
@@ -213,11 +213,11 @@ describe('Issue card component', () => {
       });
 
       it('renders more avatar counter', () => {
-        expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('+2');
+        expect(component.$el.querySelector('.board-card-assignee .avatar-counter').innerText).toEqual('+2');
       });
 
       it('renders three assignees', () => {
-        expect(component.$el.querySelectorAll('.card-assignee .avatar').length).toEqual(3);
+        expect(component.$el.querySelectorAll('.board-card-assignee .avatar').length).toEqual(3);
       });
 
       it('renders 99+ avatar counter', (done) => {
@@ -232,7 +232,7 @@ describe('Issue card component', () => {
         }
 
         Vue.nextTick(() => {
-          expect(component.$el.querySelector('.card-assignee .avatar-counter').innerText).toEqual('99+');
+          expect(component.$el.querySelector('.board-card-assignee .avatar-counter').innerText).toEqual('99+');
           done();
         });
       });
diff --git a/spec/models/issue_spec.rb b/spec/models/issue_spec.rb
index 11154291368..02945fb843f 100644
--- a/spec/models/issue_spec.rb
+++ b/spec/models/issue_spec.rb
@@ -70,7 +70,7 @@ describe Issue do
       allow(subject).to receive(:author).and_return(double(name: 'Robert'))
       allow(subject).to receive(:assignees).and_return([])
 
-      expect(subject.card_attributes)
+      expect(subject.board-card_attributes)
         .to eq({ 'Author' => 'Robert', 'Assignee' => '' })
     end
 
@@ -78,7 +78,7 @@ describe Issue do
       allow(subject).to receive(:author).and_return(double(name: 'Robert'))
       allow(subject).to receive(:assignees).and_return([double(name: 'Douwe')])
 
-      expect(subject.card_attributes)
+      expect(subject.board-card_attributes)
         .to eq({ 'Author' => 'Robert', 'Assignee' => 'Douwe' })
     end
   end
diff --git a/spec/models/merge_request_spec.rb b/spec/models/merge_request_spec.rb
index f73f44ca0ad..b30b907d70f 100644
--- a/spec/models/merge_request_spec.rb
+++ b/spec/models/merge_request_spec.rb
@@ -191,7 +191,7 @@ describe MergeRequest do
       allow(subject).to receive(:author).and_return(double(name: 'Robert'))
       allow(subject).to receive(:assignee).and_return(nil)
 
-      expect(subject.card_attributes)
+      expect(subject.board-card_attributes)
         .to eq({ 'Author' => 'Robert', 'Assignee' => nil })
     end
 
@@ -199,7 +199,7 @@ describe MergeRequest do
       allow(subject).to receive(:author).and_return(double(name: 'Robert'))
       allow(subject).to receive(:assignee).and_return(double(name: 'Douwe'))
 
-      expect(subject.card_attributes)
+      expect(subject.board-card_attributes)
         .to eq({ 'Author' => 'Robert', 'Assignee' => 'Douwe' })
     end
   end
diff --git a/spec/presenters/conversational_development_index/metric_presenter_spec.rb b/spec/presenters/conversational_development_index/metric_presenter_spec.rb
index 81eb05a9a6b..fb07ef814cd 100644
--- a/spec/presenters/conversational_development_index/metric_presenter_spec.rb
+++ b/spec/presenters/conversational_development_index/metric_presenter_spec.rb
@@ -6,7 +6,7 @@ describe ConversationalDevelopmentIndex::MetricPresenter do
 
   describe '#cards' do
     it 'includes instance score, leader score and percentage score' do
-      issues_card = subject.cards.first
+      issues_card = subject.board-cards.first
 
       expect(issues_card.instance_score).to eq(1.234)
       expect(issues_card.leader_score).to eq(9.256)
diff --git a/spec/support/board_helpers.rb b/spec/support/board_helpers.rb
index 507d0432d7f..b85fde222ea 100644
--- a/spec/support/board_helpers.rb
+++ b/spec/support/board_helpers.rb
@@ -1,7 +1,7 @@
 module BoardHelpers
   def click_card(card)
     within card do
-      first('.card-number').click
+      first('.board-card-number').click
     end
 
     wait_for_sidebar