Extract `quoted-text` and `redacted-text` into local pattern classes

src/sidebar/components/Annotation/AnnotationBody.js

@@ -49,7 +49,7 @@ function AnnotationBody({ annotation, settings }) {
   const textStyle = applyTheme(['annotationFontFamily'], settings);
 
   return (
-    <div className="AnnotationBody">
+    <div className="hyp-u-vertical-spacing--2">
       {showExcerpt && (
         <Excerpt
           collapse={isCollapsed}
@@ -64,13 +64,13 @@ function AnnotationBody({ annotation, settings }) {
             markdown={text}
             textClass={{
               AnnotationBody__text: true,
-              'is-hidden': isHidden(annotation),
+              'p-redacted-content': isHidden(annotation),
             }}
           />
         </Excerpt>
       )}
       {isCollapsible && (
-        <div className="AnnotationBody__collapse-toggle">
+        <div className="hyp-u-layout-row--justify-right">
           <LabeledButton
             expanded={!isCollapsed}
             onClick={() => setIsCollapsed(!isCollapsed)}

src/sidebar/components/Annotation/AnnotationQuote.js

@@ -36,7 +36,7 @@ function AnnotationQuote({ annotation, isFocused, settings = {} }) {
 
   return (
     <div
-      className={classnames('AnnotationQuote', {
+      className={classnames({
         'is-orphan': isOrphan(annotation),
       })}
     >
@@ -46,8 +46,9 @@ function AnnotationQuote({ annotation, isFocused, settings = {} }) {
         overflowThreshold={20}
       >
         <blockquote
-          className={classnames('AnnotationQuote__quote', {
+          className={classnames('p-quoted-text', {
             'is-focused': isFocused,
+            'p-redacted-content': isOrphan(annotation),
           })}
           dir="auto"
           lang={documentLanguage}

src/styles/mixins/molecules.scss

@@ -85,32 +85,6 @@
   }
 }
 
-/**
- * A pattern for displaying redacted (moderated) text content
- */
-@mixin redacted-content {
-  text-decoration: line-through;
-  // Make any images within this content greyscale, and low-contrast
-  filter: grayscale(100%) contrast(65%);
-}
-
-/**
- * Represent quoted text, as in an excerpt, with a hover or focused state.
- */
-@mixin quoted-text {
-  border-left: 3px solid var.$color-border;
-  color: var.$color-text--light;
-  font-style: italic;
-  padding: 0 var.$layout-space;
-
-  // Prevent long URLs etc. in quote causing overflow
-  overflow-wrap: break-word;
-
-  &.is-focused,
-  &:hover {
-    border-left: var.$color-quote 3px solid;
-  }
-}
 /**
  * Base styles for a "panel"-like element, with appropriate
  * padding, heading and close-button styles.

src/styles/patterns.scss

@@ -18,3 +18,26 @@
     text-decoration: underline;
   }
 }
+
+// Represent quoted text, as in an excerpt, with a hover or focused state.
+.p-quoted-text {
+  border-left: 3px solid var.$color-border;
+  color: var.$color-text--light;
+  font-style: italic;
+  padding: 0 var.$layout-space;
+
+  // Prevent long URLs etc. in quote causing overflow
+  overflow-wrap: break-word;
+
+  &.is-focused,
+  &:hover {
+    border-left: var.$color-quote 3px solid;
+  }
+}
+
+// A pattern for displaying redacted (moderated) text content
+.p-redacted-content {
+  text-decoration: line-through;
+  // Make any images within this content greyscale, and low-contrast
+  filter: grayscale(100%) contrast(65%);
+}

src/styles/sidebar/components/AnnotationBody.scss

-@use '../../variables' as var;
-@use '../../mixins/buttons';
-@use '../../mixins/layout';
-@use '../../mixins/molecules';
-
-.AnnotationBody__text {
-  &.is-hidden {
-    @include molecules.redacted-content;
-  }
-}
-
-.AnnotationBody__collapse-toggle {
-  @include layout.row(right);
-  @include layout.vertical-space(var.$layout-space--xsmall);
-}

src/styles/sidebar/components/AnnotationQuote.scss

-@use '../../variables' as var;
-@use '../../mixins/molecules';
-
-.AnnotationQuote {
-  &__quote {
-    @include molecules.quoted-text;
-  }
-  &.is-orphan &__quote {
-    // In orphans, quotes should be rendered as if they're missing/redacted
-    @include molecules.redacted-content;
-  }
-}

src/styles/sidebar/sidebar.scss

@@ -19,9 +19,7 @@
 // Components
 // ----------
 @use './components/Annotation';
-@use './components/AnnotationBody';
 @use './components/AnnotationPublishControl';
-@use './components/AnnotationQuote';
 @use './components/AnnotationShareControl';
 @use './components/AutocompleteList';
 @use './components/Excerpt';