Merge pull request #2276 from hypothesis/extract-styles-1

Extract styles from Annotation Body, License and Quote

src/sidebar/components/annotation-body.js

@@ -50,7 +50,6 @@ export default function AnnotationBody({
             textClass={{
               'annotation-body__text': true,
               'is-hidden': isHidden(annotation),
-              'has-content': text.length > 0,
             }}
           />
         </Excerpt>

src/sidebar/components/annotation-license.js

@@ -9,25 +9,17 @@ export default function AnnotationLicense() {
   return (
     <div className="annotation-license">
       <a
-        className="annotation-license__link u-layout-row u-color-text--muted"
+        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"
       >
-        <SvgIcon
-          name="cc-std"
-          inline={true}
-          className="annotation-license__icon"
-        />
-        <SvgIcon
-          name="cc-zero"
-          inline={true}
-          className="annotation-license__icon"
-        />
-        <span className="annotation-license__details">
-          Annotations can be freely reused by anyone for any purpose.
-        </span>
+        <div className="annotation-license__icons">
+          <SvgIcon name="cc-std" inline={true} className="u-icon--xsmall" />
+          <SvgIcon name="cc-zero" inline={true} className="u-icon--xsmall" />
+        </div>
+        Annotations can be freely reused by anyone for any purpose.
       </a>
     </div>
   );

src/styles/mixins/layout.scss

@@ -78,3 +78,13 @@
     margin-top: var.$layout-margin;
   }
 }
+
+/**
+ * Establish vertical space outside of elements in the container
+ *
+ * @param $size [var.$layout-margin--medium]: Spacing size (padding)
+ */
+@mixin vertical-space($size: var.$layout-margin--medium) {
+  padding-top: $size;
+  padding-bottom: $size;
+}

src/styles/mixins/molecules.scss

@@ -67,31 +67,28 @@
  * A pattern for displaying redacted (moderated) text content
  */
 @mixin redacted-content {
-  // Hidden annotations displayed to moderators, where the content is still
-  // present.
-  &.has-content {
-    text-decoration: line-through;
-    filter: grayscale(100%) contrast(65%);
-  }
+  text-decoration: line-through;
+  // Make any images within this content greyscale, and low-contrast
+  filter: grayscale(100%) contrast(65%);
+}
 
-  // Hidden annotations displayed to non-moderators, where the content has been
-  // filtered out by the service.
-  &:not(.has-content) {
-    // Create a column of horizontal stripes, giving the impression of text
-    // underneath that has been censored.
-    display: block;
-    height: 60px;
-    width: 100vw;
-    background: repeating-linear-gradient(
-      to bottom,
-      var.$grey-2,
-      var.$grey-2 15px,
-      white 15px,
-      white 20px
-    );
+/**
+ * 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-margin;
+
+  // 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/sidebar/components/annotation-body.scss

@@ -11,10 +11,12 @@
 
 .annotation-body__collapse-toggle {
   @include layout.row(right);
-  margin: var.$layout-margin--small 0;
+  @include layout.vertical-space(var.$layout-margin--small);
 
   .annotation-body__collapse-toggle-button {
     @include buttons.button--labeled;
+    // The button should not have a background color except when hovered/active:
+    // It should look like text only
     background-color: transparent;
   }
 }

src/styles/sidebar/components/annotation-license.scss

@@ -5,16 +5,15 @@
 .annotation-license {
   @include utils.font--small;
   @include utils.border-top;
+  // Space between border and text content
   padding-top: var.$layout-margin--small;
 
-  &__icon {
-    @include utils.icon--xsmall;
-    // Need a tiny space between license icons
-    margin-right: 1px;
-  }
-
-  &__details {
-    // TODO: Horizontal rhythm
-    margin-left: 0.25em;
+  // Container with two icons (representing CC licenses)
+  // with a very small amount of spacing between them
+  &__icons {
+    @include layout.row;
+    @include layout.horizontal-rhythm(1px);
+    // Add space before text
+    margin-right: var.$layout-margin--xsmall;
   }
 }

src/styles/sidebar/components/annotation-quote.scss

 @use '../../variables' as var;
+@use "../../mixins/molecules";
 
 .annotation-quote {
-  &.is-orphan {
-    text-decoration: line-through;
-  }
-
   &__quote {
-    border-left: 3px solid var.$color-border;
-    color: var.$color-text-light;
-    font-style: italic;
-    padding: 0 var.$layout-margin;
-
-    // Prevent long URLs etc. in quote causing overflow
-    overflow-wrap: break-word;
+    @include molecules.quoted-text;
   }
-
-  &.is-focused &__quote {
-    border-left: var.$color-quote 3px solid;
+  &.is-orphan &__quote {
+    // In orphans, quotes should be rendered as if they're missing/redacted
+    @include molecules.redacted-content;
   }
 }

src/styles/util.scss

@@ -54,6 +54,10 @@
   @include utils.icon--inline;
 }
 
+.u-icon--xsmall {
+  @include utils.icon--xsmall;
+}
+
 .u-icon--large {
   @include utils.icon--large;
 }