Use PascalCase for preact component modules and related assets

src/sidebar/components/annotation.js → src/sidebar/components/Annotation.js

@@ -6,12 +6,12 @@ import { useStoreProxy } from '../store/use-store';
 import { isReply, quote } from '../helpers/annotation-metadata';
 import { withServices } from '../service-context';
 
-import AnnotationActionBar from './annotation-action-bar';
-import AnnotationBody from './annotation-body';
-import AnnotationEditor from './annotation-editor';
-import AnnotationHeader from './annotation-header';
-import AnnotationQuote from './annotation-quote';
-import Button from './button';
+import AnnotationActionBar from './AnnotationActionBar';
+import AnnotationBody from './AnnotationBody';
+import AnnotationEditor from './AnnotationEditor';
+import AnnotationHeader from './AnnotationHeader';
+import AnnotationQuote from './AnnotationQuote';
+import Button from './Button';
 
 /**
  * @typedef {import("../../types/api").Annotation} Annotation
@@ -71,8 +71,8 @@ function Annotation({
 
   return (
     <article
-      className={classnames('annotation', {
-        'annotation--reply': isReply(annotation),
+      className={classnames('Annotation', {
+        'Annotation--reply': isReply(annotation),
         'is-collapsed': threadIsCollapsed,
         'is-focused': isFocused,
       })}
@@ -96,18 +96,18 @@ function Annotation({
       {isEditing && <AnnotationEditor annotation={annotation} />}
 
       {!isCollapsedReply && (
-        <footer className="annotation__footer">
-          <div className="annotation__controls u-layout-row">
+        <footer className="Annotation__footer">
+          <div className="Annotation__controls u-layout-row">
             {shouldShowReplyToggle && (
               <Button
-                className="annotation__reply-toggle"
+                className="Annotation__reply-toggle"
                 onClick={onToggleReplies}
                 buttonText={toggleText}
               />
             )}
-            {isSaving && <div className="annotation__actions">Saving...</div>}
+            {isSaving && <div className="Annotation__actions">Saving...</div>}
             {shouldShowActions && (
-              <div className="annotation__actions">
+              <div className="Annotation__actions">
                 <AnnotationActionBar
                   annotation={annotation}
                   onReply={onReply}

src/sidebar/components/annotation-action-bar.js → src/sidebar/components/AnnotationActionBar.js

@@ -10,8 +10,8 @@ import {
 import { isPrivate, permits } from '../helpers/permissions';
 import { withServices } from '../service-context';
 
-import AnnotationShareControl from './annotation-share-control';
-import Button from './button';
+import AnnotationShareControl from './AnnotationShareControl';
+import Button from './Button';
 
 /**
  *  @typedef {import("../../types/api").Annotation} Annotation
@@ -91,7 +91,7 @@ function AnnotationActionBar({
   };
 
   return (
-    <div className="annotation-action-bar u-layout-row">
+    <div className="AnnotationActionBar u-layout-row">
       {showEditAction && <Button icon="edit" title="Edit" onClick={onEdit} />}
       {showDeleteAction && (
         <Button icon="trash" title="Delete" onClick={onDelete} />

src/sidebar/components/annotation-body.js → src/sidebar/components/AnnotationBody.js

@@ -7,10 +7,10 @@ import { isHidden } from '../helpers/annotation-metadata';
 import { withServices } from '../service-context';
 import { applyTheme } from '../helpers/theme';
 
-import Button from './button';
-import Excerpt from './excerpt';
-import MarkdownView from './markdown-view';
-import TagList from './tag-list';
+import Button from './Button';
+import Excerpt from './Excerpt';
+import MarkdownView from './MarkdownView';
+import TagList from './TagList';
 
 /**
  * @typedef {import("../../types/api").Annotation} Annotation
@@ -51,7 +51,7 @@ function AnnotationBody({ annotation, settings }) {
   const textStyle = applyTheme(['annotationFontFamily'], settings);
 
   return (
-    <div className="annotation-body">
+    <div className="AnnotationBody">
       {showExcerpt && (
         <Excerpt
           collapse={isCollapsed}
@@ -65,18 +65,18 @@ function AnnotationBody({ annotation, settings }) {
             textStyle={textStyle}
             markdown={text}
             textClass={{
-              'annotation-body__text': true,
+              AnnotationBody__text: true,
               'is-hidden': isHidden(annotation),
             }}
           />
         </Excerpt>
       )}
       {isCollapsible && (
-        <div className="annotation-body__collapse-toggle">
+        <div className="AnnotationBody__collapse-toggle">
           {/* @ts-ignore - TODO: Button props need to be fixed */}
           <Button
             buttonText={toggleText}
-            className="annotation-body__collapse-toggle-button"
+            className="AnnotationBody__collapse-toggle-button"
             isExpanded={!isCollapsed}
             onClick={() => {
               setIsCollapsed(!isCollapsed);

src/sidebar/components/annotation-document-info.js → src/sidebar/components/AnnotationDocumentInfo.js

@@ -24,8 +24,8 @@ export default function AnnotationDocumentInfo({ annotation }) {
   }
 
   return (
-    <div className="annotation-document-info u-layout-row u-horizontal-rhythm">
-      <div className="annotation-document-info__title u-color-text--muted">
+    <div className="AnnotationDocumentInfo u-layout-row u-horizontal-rhythm">
+      <div className="AnnotationDocumentInfo__title u-color-text--muted">
         on &quot;
         {documentInfo.titleLink ? (
           <a href={documentInfo.titleLink}>{documentInfo.titleText}</a>
@@ -35,7 +35,7 @@ export default function AnnotationDocumentInfo({ annotation }) {
         &quot;
       </div>
       {documentInfo.domain && (
-        <div className="annotation-document-info__domain u-color-text--muted">
+        <div className="AnnotationDocumentInfo__domain u-color-text--muted">
           ({documentInfo.domain})
         </div>
       )}

src/sidebar/components/annotation-editor.js → src/sidebar/components/AnnotationEditor.js

@@ -7,10 +7,10 @@ import { withServices } from '../service-context';
 import { applyTheme } from '../helpers/theme';
 import { useStoreProxy } from '../store/use-store';
 
-import AnnotationLicense from './annotation-license';
-import AnnotationPublishControl from './annotation-publish-control';
-import MarkdownEditor from './markdown-editor';
-import TagEditor from './tag-editor';
+import AnnotationLicense from './AnnotationLicense';
+import AnnotationPublishControl from './AnnotationPublishControl';
+import MarkdownEditor from './MarkdownEditor';
+import TagEditor from './TagEditor';
 
 /**
  * @typedef {import("../../types/api").Annotation} Annotation
@@ -133,7 +133,7 @@ function AnnotationEditor({
 
   return (
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions */
-    <div className="annotation-editor u-vertical-rhythm" onKeyDown={onKeyDown}>
+    <div className="AnnotationEditor u-vertical-rhythm" onKeyDown={onKeyDown}>
       <MarkdownEditor
         textStyle={textStyle}
         label="Annotation body"

src/sidebar/components/annotation-header.js → src/sidebar/components/AnnotationHeader.js

@@ -11,11 +11,11 @@ import {
 } from '../helpers/annotation-metadata';
 import { isPrivate } from '../helpers/permissions';
 
-import AnnotationDocumentInfo from './annotation-document-info';
-import AnnotationShareInfo from './annotation-share-info';
-import AnnotationUser from './annotation-user';
-import Button from './button';
-import AnnotationTimestamps from './annotation-timestamps';
+import AnnotationDocumentInfo from './AnnotationDocumentInfo';
+import AnnotationShareInfo from './AnnotationShareInfo';
+import AnnotationTimestamps from './AnnotationTimestamps';
+import AnnotationUser from './AnnotationUser';
+import Button from './Button';
 
 /**
  * @typedef {import("../../types/api").Annotation} Annotation
@@ -67,27 +67,27 @@ export default function AnnotationHeader({
     store.setExpanded(/** @type {string} */ (annotation.id), true);
 
   return (
-    <header className="annotation-header">
-      <div className="annotation-header__row">
+    <header className="AnnotationHeader">
+      <div className="AnnotationHeader__row">
         {annotationIsPrivate && !isEditing && (
           <SvgIcon
-            className="annotation-header__icon"
+            className="AnnotationHeader__icon"
             name="lock"
             title="This annotation is visible only to you"
           />
         )}
         <AnnotationUser annotation={annotation} />
         {showReplyButton && (
           <Button
-            className="annotation-header__reply-toggle"
+            className="AnnotationHeader__reply-toggle"
             buttonText={replyButtonText}
             onClick={onReplyCountClick}
             title="Expand replies"
           />
         )}
 
         {showTimestamps && (
-          <div className="annotation-header__timestamps">
+          <div className="AnnotationHeader__timestamps">
             <AnnotationTimestamps
               annotation={annotation}
               withEditedTimestamp={showEditedTimestamp}
@@ -97,15 +97,15 @@ export default function AnnotationHeader({
       </div>
 
       {showExtendedInfo && (
-        <div className="annotation-header__row">
+        <div className="AnnotationHeader__row">
           <AnnotationShareInfo annotation={annotation} />
           {!isEditing && isHighlight(annotation) && (
-            <div className="annotation-header__highlight">
+            <div className="AnnotationHeader__highlight">
               <SvgIcon
                 name="highlight"
                 title="This is a highlight. Click 'edit' to add a note or tag."
                 inline={true}
-                className="annotation-header__highlight-icon"
+                className="AnnotationHeader__highlight-icon"
               />
             </div>
           )}

src/sidebar/components/annotation-license.js → src/sidebar/components/AnnotationLicense.js

@@ -6,15 +6,15 @@ import { createElement } from 'preact';
  */
 export default function AnnotationLicense() {
   return (
-    <div className="annotation-license">
+    <div className="AnnotationLicense">
       <a
         className="u-layout-row u-color-text--muted"
         href="http://creativecommons.org/publicdomain/zero/1.0/"
         title="View more information about the Creative Commons Public Domain dedication"
         target="_blank"
         rel="noopener noreferrer"
       >
-        <div className="annotation-license__icons">
+        <div className="AnnotationLicense__icons">
           <SvgIcon name="cc-std" inline={true} className="u-icon--xsmall" />
           <SvgIcon name="cc-zero" inline={true} className="u-icon--xsmall" />
         </div>

src/sidebar/components/annotation-publish-control.js → src/sidebar/components/AnnotationPublishControl.js

@@ -8,9 +8,9 @@ import { isShared } from '../helpers/permissions';
 import { withServices } from '../service-context';
 import { applyTheme } from '../helpers/theme';
 
-import Button from './button';
-import Menu from './menu';
-import MenuItem from './menu-item';
+import Button from './Button';
+import Menu from './Menu';
+import MenuItem from './MenuItem';
 
 /**
  * @typedef {import('../../types/api').Annotation} Annotation
@@ -81,7 +81,7 @@ function AnnotationPublishControl({
   );
 
   return (
-    <div className="annotation-publish-control">
+    <div className="AnnotationPublishControl">
       <div className="annotation-publish-button">
         <Button
           className="annotation-publish-button__primary"
@@ -124,7 +124,7 @@ function AnnotationPublishControl({
       <div>
         <Button
           icon="cancel"
-          className="annotation-publish-control__cancel-button"
+          className="AnnotationPublishControl__cancel-button"
           buttonText="Cancel"
           onClick={onCancel}
         />

src/sidebar/components/annotation-quote.js → src/sidebar/components/AnnotationQuote.js

@@ -6,7 +6,7 @@ import { isOrphan, quote } from '../helpers/annotation-metadata';
 import { withServices } from '../service-context';
 import { applyTheme } from '../helpers/theme';
 
-import Excerpt from './excerpt';
+import Excerpt from './Excerpt';
 
 /**
  * @typedef {import('../../types/api').Annotation} Annotation
@@ -38,7 +38,7 @@ function AnnotationQuote({ annotation, isFocused, settings = {} }) {
 
   return (
     <div
-      className={classnames('annotation-quote', {
+      className={classnames('AnnotationQuote', {
         'is-orphan': isOrphan(annotation),
       })}
     >
@@ -48,7 +48,7 @@ function AnnotationQuote({ annotation, isFocused, settings = {} }) {
         overflowThreshold={20}
       >
         <blockquote
-          className={classnames('annotation-quote__quote', {
+          className={classnames('AnnotationQuote__quote', {
             'is-focused': isFocused,
           })}
           dir="auto"

src/sidebar/components/annotation-share-control.js → src/sidebar/components/AnnotationShareControl.js

@@ -7,11 +7,11 @@ import { isShareableURI } from '../helpers/annotation-sharing';
 import { copyText } from '../util/copy-to-clipboard';
 import { isPrivate } from '../helpers/permissions';
 import { withServices } from '../service-context';
+import { isIOS } from '../../shared/user-agent';
 
-import Button from './button';
+import Button from './Button';
+import ShareLinks from './ShareLinks';
 import useElementShouldClose from './hooks/use-element-should-close';
-import ShareLinks from './share-links';
-import { isIOS } from '../../shared/user-agent';
 
 /**
  * @typedef {import('../../types/api').Annotation} Annotation
@@ -123,7 +123,7 @@ function AnnotationShareControl({
   );
 
   return (
-    <div className="annotation-share-control" ref={shareRef}>
+    <div className="AnnotationShareControl" ref={shareRef}>
       <Button
         icon="share"
         title="Share"

src/sidebar/components/annotation-share-info.js → src/sidebar/components/AnnotationShareInfo.js

@@ -32,7 +32,7 @@ function AnnotationShareInfo({ annotation }) {
   const annotationIsPrivate = isPrivate(annotation.permissions);
 
   return (
-    <div className="annotation-share-info u-layout-row--align-baseline">
+    <div className="AnnotationShareInfo u-layout-row--align-baseline">
       {group && linkToGroup && (
         <a
           className="u-layout-row--align-baseline u-color-text--muted"
@@ -41,18 +41,16 @@ function AnnotationShareInfo({ annotation }) {
           rel="noopener noreferrer"
         >
           {group.type === 'open' ? (
-            <SvgIcon className="annotation-share-info__icon" name="public" />
+            <SvgIcon className="AnnotationShareInfo__icon" name="public" />
           ) : (
-            <SvgIcon className="annotation-share-info__icon" name="groups" />
+            <SvgIcon className="AnnotationShareInfo__icon" name="groups" />
           )}
-          <span className="annotation-share-info__group-info">
-            {group.name}
-          </span>
+          <span className="AnnotationShareInfo__group-info">{group.name}</span>
         </a>
       )}
       {annotationIsPrivate && !linkToGroup && (
         <span className="u-layout-row--align-baseline u-color-text--muted">
-          <span className="annotation-share-info__private-info">Only me</span>
+          <span className="AnnotationShareInfo__private-info">Only me</span>
         </span>
       )}
     </div>

src/sidebar/components/annotation-timestamps.js → src/sidebar/components/AnnotationTimestamps.js

@@ -77,18 +77,15 @@ export default function AnnotationTimestamps({
   const annotationUrl = annotation.links?.html || '';
 
   return (
-    <div className="annotation-timestamps">
+    <div className="AnnotationTimestamps">
       {withEditedTimestamp && (
-        <span
-          className="annotation-timestamps__edited"
-          title={updated.absolute}
-        >
+        <span className="AnnotationTimestamps__edited" title={updated.absolute}>
           ({editedString}){' '}
         </span>
       )}
       {annotationUrl ? (
         <a
-          className="annotation-timestamps__created"
+          className="AnnotationTimestamps__created"
           target="_blank"
           rel="noopener noreferrer"
           title={created.absolute}
@@ -98,7 +95,7 @@ export default function AnnotationTimestamps({
         </a>
       ) : (
         <span
-          className="annotation-timestamps__created"
+          className="AnnotationTimestamps__created"
           title={created.absolute}
         >
           {created.relative}