Fix: Change remaining CSS selectors to use ba- prefix (#164)

box · Apr 11, 2018 · baf4ebc · baf4ebc
1 parent f881b6e
commit baf4ebc
Show file tree

Hide file tree

Showing 14 changed files with 25 additions and 25 deletions.
diff --git a/src/Annotator.scss b/src/Annotator.scss
@@ -131,7 +131,7 @@
     fill: $highlight-yellow;
 }
 
-.bp-is-text-highlighted .ba-annotation-highlight-dialog .bp-btn-plain {
+.ba-is-text-highlighted .ba-annotation-highlight-dialog .bp-btn-plain {
     svg {
         fill: $highlight-yellow;
     }
@@ -356,7 +356,7 @@
     }
 }
 
-.bp-annotation-profile {
+.ba-annotation-profile {
     background-color: $tendemob-grey;
     border-radius: 16px; // Circle
     color: $white;
@@ -415,7 +415,7 @@
     top: 15px; // Match 15px padding top on page
 }
 
-.bp-highlight-dialog {
+.ba-highlight-dialog {
     border-top: 20px solid transparent; // Transparent border for hover detection
     color: $fours;
     display: table;
@@ -466,7 +466,7 @@
     }
 }
 
-.bp-create-highlight-comment {
+.ba-create-highlight-comment {
     background-color: #fff;
     overflow-x: hidden;
     overflow-y: auto;
@@ -526,7 +526,7 @@
 }
 
 .ba-annotation-drawing-label,
-.bp-annotation-highlight-label {
+.ba-annotation-highlight-label {
     padding: 8px 4px;
     width: 100%;
 }

diff --git a/src/__tests__/AnnotationDialog-test.js b/src/__tests__/AnnotationDialog-test.js
@@ -108,7 +108,7 @@ describe('AnnotationDialog', () => {
             dialog.hasAnnotations = true;
             dialog.deactivateReply();
             const commentsTextArea = dialog.element.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
-            commentsTextArea.classList.remove('bp-is-active');
+            commentsTextArea.classList.remove(constants.CLASS_ACTIVE);
 
             dialog.show();
             expect(stubs.position).to.be.called;
@@ -991,7 +991,7 @@ describe('AnnotationDialog', () => {
 
         it('should do nothing if reply textarea is already active', () => {
             const replyTextEl = dialog.element.querySelector(`.${CLASS_REPLY_TEXTAREA}`);
-            replyTextEl.classList.add('bp-is-active');
+            replyTextEl.classList.add(constants.CLASS_ACTIVE);
             sandbox.stub(util, 'showElement');
 
             dialog.activateReply();

diff --git a/src/__tests__/CommentBox-test.js b/src/__tests__/CommentBox-test.js
@@ -190,7 +190,7 @@ describe('CommentBox', () => {
             el = commentBox.createHTML();
         });
 
-        it('should create and return a section element with bp-create-highlight-comment class on it', () => {
+        it('should create and return a section element with ba-create-highlight-comment class on it', () => {
             expect(el.nodeName).to.equal('SECTION');
             expect(el.classList.contains('ba-create-comment')).to.be.true;
         });

diff --git a/src/__tests__/CreateAnnotationDialog-test.js b/src/__tests__/CreateAnnotationDialog-test.js
@@ -21,7 +21,7 @@ const stubs = {};
 describe('CreateAnnotationDialog', () => {
     beforeEach(() => {
         parentEl = document.createElement('div');
-        parentEl.classList.add('bp-create-dialog-container');
+        parentEl.classList.add('ba-create-dialog-container');
         dialog = new CreateAnnotationDialog(parentEl, {
             isMobile: true,
             localized

diff --git a/src/__tests__/util-test.js b/src/__tests__/util-test.js
@@ -213,14 +213,14 @@ describe('util', () => {
             const textAreaEl = document.querySelector('.textarea');
 
             // Fake making text area 'active'
-            textAreaEl.classList.add('bp-is-active');
+            textAreaEl.classList.add(CLASS_ACTIVE);
             textAreaEl.value = 'test';
             textAreaEl.style.width = '10px';
             textAreaEl.style.height = '10px';
 
             resetTextarea(textAreaEl);
 
-            expect(textAreaEl).to.not.have.class('bp-is-active');
+            expect(textAreaEl).to.not.have.class(CLASS_ACTIVE);
             expect(textAreaEl).to.not.have.class('ba-invalid-input');
             expect(textAreaEl.value).to.equal('test');
             expect(textAreaEl.style.width).to.equal('');
@@ -281,7 +281,7 @@ describe('util', () => {
         });
 
         it('should return avatar HTML initials if no avatarUrl is provided', () => {
-            const expectedHtml = '<div class="bp-annotation-profile avatar-color-1">SN</div>'.trim();
+            const expectedHtml = '<div class="ba-annotation-profile avatar-color-1">SN</div>'.trim();
             expect(getAvatarHtml('', '1', 'Some Name')).to.equal(expectedHtml);
         });
     });

diff --git a/src/doc/DocAnnotator.js b/src/doc/DocAnnotator.js
@@ -38,7 +38,7 @@ const SELECTOR_PREVIEW_DOC = '.bp-doc';
 const CLASS_DEFAULT_CURSOR = 'bp-use-default-cursor';
 
 // Required by rangy highlighter
-const ID_ANNOTATED_ELEMENT = 'bp-rangy-annotated-element';
+const ID_ANNOTATED_ELEMENT = 'ba-rangy-annotated-element';
 
 const ANNOTATION_LAYER_CLASSES = [
     CLASS_ANNOTATION_LAYER_HIGHLIGHT,

diff --git a/src/doc/DocHighlightDialog.js b/src/doc/DocHighlightDialog.js
@@ -4,9 +4,9 @@ import * as docUtil from './docUtil';
 import { ICON_HIGHLIGHT, ICON_HIGHLIGHT_COMMENT } from '../icons/icons';
 import * as constants from '../constants';
 
-const CLASS_HIGHLIGHT_DIALOG = 'bp-highlight-dialog';
-const CLASS_TEXT_HIGHLIGHTED = 'bp-is-text-highlighted';
-const CLASS_HIGHLIGHT_LABEL = 'bp-annotation-highlight-label';
+const CLASS_HIGHLIGHT_DIALOG = 'ba-highlight-dialog';
+const CLASS_TEXT_HIGHLIGHTED = 'ba-is-text-highlighted';
+const CLASS_HIGHLIGHT_LABEL = 'ba-annotation-highlight-label';
 
 const HIGHLIGHT_DIALOG_HEIGHT = 38;
 const PAGE_PADDING_BOTTOM = 15;

diff --git a/src/doc/__tests__/CreateHighlightDialog-test.html b/src/doc/__tests__/CreateHighlightDialog-test.html
@@ -1 +1 @@
-<div class="bp-create-highlight-dialog-container"></div>
+<div class="ba-create-highlight-dialog-container"></div>
diff --git a/src/doc/__tests__/CreateHighlightDialog-test.js b/src/doc/__tests__/CreateHighlightDialog-test.js
@@ -30,7 +30,7 @@ describe('doc/CreateHighlightDialog', () => {
         fixture.load('doc/__tests__/CreateHighlightDialog-test.html');
 
         parentEl = document.createElement('div');
-        parentEl.classList.add('bp-create-dialog-container');
+        parentEl.classList.add('ba-create-dialog-container');
         dialog = new CreateHighlightDialog(parentEl, {
             allowHighlight: true,
             allowComment: true,

diff --git a/src/doc/__tests__/DocHighlightDialog-test.html b/src/doc/__tests__/DocHighlightDialog-test.html
@@ -3,7 +3,7 @@
   <div data-type="annotation-dialog" class="ba-annotation-dialog">
     <div class="ba-annotation-caret"></div>
     <div class="ba-annotation-highlight-dialog">
-      <span class="bp-annotation-highlight-label"></span>
+      <span class="ba-annotation-highlight-label"></span>
     </div>
     <div class="annotation-container">
       <div data-section="create"></div>

diff --git a/src/doc/__tests__/DocHighlightDialog-test.js b/src/doc/__tests__/DocHighlightDialog-test.js
@@ -10,9 +10,9 @@ let dialog;
 const sandbox = sinon.sandbox.create();
 let stubs = {};
 
-const CLASS_HIGHLIGHT_DIALOG = 'bp-highlight-dialog';
-const CLASS_TEXT_HIGHLIGHTED = 'bp-is-text-highlighted';
-const CLASS_HIGHLIGHT_LABEL = 'bp-annotation-highlight-label';
+const CLASS_HIGHLIGHT_DIALOG = 'ba-highlight-dialog';
+const CLASS_TEXT_HIGHLIGHTED = 'ba-is-text-highlighted';
+const CLASS_HIGHLIGHT_LABEL = 'ba-annotation-highlight-label';
 const DATA_TYPE_HIGHLIGHT_BTN = 'highlight-btn';
 const DATA_TYPE_ADD_HIGHLIGHT_COMMENT = 'add-highlight-comment-btn';
 const PAGE_PADDING_TOP = 15;

diff --git a/src/image/__tests__/ImagePointDialog-test.html b/src/image/__tests__/ImagePointDialog-test.html
@@ -1,4 +1,4 @@
-<div class="annotated-element bp-annotated">
+<div class="annotated-element ba-annotated">
   <img width="400px" height="600px" data-page-number="1">
   <div data-type="annotation-dialog" class="ba-annotation-dialog">
     <div class="ba-annotation-caret"></div>

diff --git a/src/image/__tests__/imageUtil-test.html b/src/image/__tests__/imageUtil-test.html
@@ -1,5 +1,5 @@
 <div class="mock-header-bar" height="30px" width="100px"></div>
-<div class="annotated-element bp-annotated">
+<div class="annotated-element ba-annotated">
   <img width="100px" height="200px" data-page-number="1">
   <button class="ba-point-annotation-marker"></button>
 </div>
diff --git a/src/util.js b/src/util.js
@@ -345,7 +345,7 @@ export function getAvatarHtml(avatarUrl, userId, userName, altText) {
     }
 
     const index = parseInt(userId, 10) || 0;
-    return `<div class="bp-annotation-profile avatar-color-${index % AVATAR_COLOR_COUNT}">${initials}</div>`.trim();
+    return `<div class="ba-annotation-profile avatar-color-${index % AVATAR_COLOR_COUNT}">${initials}</div>`.trim();
 }
 
 /**
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<div class="bp-create-highlight-dialog-container"></div>
		<div class="ba-create-highlight-dialog-container"></div>
-Original file line number
+Diff line change
@@ Expand Up @@
         }
         const index = parseInt(userId, 10) || 0;
-        return `<div class="bp-annotation-profile avatar-color-${index % AVATAR_COLOR_COUNT}">${initials}</div>`.trim();
+        return `<div class="ba-annotation-profile avatar-color-${index % AVATAR_COLOR_COUNT}">${initials}</div>`.trim();
     }
     /**
@@ Expand Down @@