Factor out some reusable CSS into mixins

Extract some reusable button styles, as well as some patterns
for lists of linked icons and a "panel" pattern. It is likely
organization of this will evolve as a pattern-library approach
is implemented, but this avoids copy-pasta and tightens up
consistency between uses.

src/sidebar/components/share-annotations-panel.js

@@ -87,7 +87,7 @@ function ShareAnnotationsPanel({ analytics, flash }) {
               onClick={copyShareLink}
               title="copy share link"
               aria-label="Copy share link"
-              className="btn btn-clean share-annotations-panel__copy-btn"
+              className="share-annotations-panel__copy-btn"
             >
               <SvgIcon name="copy" />
             </button>
@@ -114,8 +114,8 @@ function ShareAnnotationsPanel({ analytics, flash }) {
               <em>Only Me</em>) annotations are only visible to you.
             </span>
           </p>
-          <ul className="share-annotations-panel__links">
-            <li className="share-annotations-panel__link">
+          <ul className="share-annotations-panel-links">
+            <li className="share-annotations-panel-links__link">
               <a
                 href={`https://twitter.com/intent/tweet?url=${encodedURI}&hashtags=annotated`}
                 title="Tweet share link"
@@ -123,7 +123,7 @@ function ShareAnnotationsPanel({ analytics, flash }) {
               >
                 <SvgIcon
                   name="twitter"
-                  className="share-annotations-panel__icon"
+                  className="share-annotations-panel-links__icon"
                 />
               </a>
             </li>
@@ -135,7 +135,7 @@ function ShareAnnotationsPanel({ analytics, flash }) {
               >
                 <SvgIcon
                   name="facebook"
-                  className="share-annotations-panel__icon"
+                  className="share-annotations-panel-links__icon"
                 />
               </a>
             </li>
@@ -149,7 +149,7 @@ function ShareAnnotationsPanel({ analytics, flash }) {
               >
                 <SvgIcon
                   name="email"
-                  className="share-annotations-panel__icon"
+                  className="share-annotations-panel-links__icon"
                 />
               </a>
             </li>

src/sidebar/components/sidebar-panel.js

@@ -52,10 +52,7 @@ function SidebarPanel({ children, panelName, title, onActiveChanged }) {
               onClick={closePanel}
               aria-label="close panel"
             >
-              <SvgIcon
-                name="cancel"
-                className="sidebar-panel__close-btn-icon"
-              />
+              <SvgIcon name="cancel" className="action-button__icon--compact" />
               Close
             </button>
           </div>

src/sidebar/components/version-info.js

@@ -38,8 +38,11 @@ function VersionInfo({ flash, versionData }) {
         <dd className="version-info__value">{versionData.timestamp}</dd>
       </dl>
       <div className="version-info__actions">
-        <button className="version-info__copy-btn" onClick={copyVersionData}>
-          <SvgIcon name="copy" className="version-info__copy-btn-icon" />
+        <button
+          className="version-info__copy-btn action-button"
+          onClick={copyVersionData}
+        >
+          <SvgIcon name="copy" className="action-button__icon" />
           Copy version details
         </button>
       </div>

src/styles/mixins/buttons.scss

-@import './focus';
+@use "./focus";
+@use "../variables" as var;
 
 @mixin reset-native-btn-styles {
-  @include outline-on-keyboard-focus;
+  @include focus.outline-on-keyboard-focus;
 
   padding: 0px;
   margin: 0px;
   background-color: transparent;
   border-style: none;
 }
+
+/**
+ * A <button> composed of an SVG icon (left) and text (right) with some
+ * hover transition effects
+ */
+@mixin action-button($icon-margin: 0 5px) {
+  @include reset-native-btn-styles;
+  display: flex;
+  align-items: center;
+  padding: 0.5em;
+  border-radius: 2px;
+  border: none;
+  background-color: var.$grey-1;
+  color: var.$grey-5;
+  font-weight: 700;
+
+  &__icon {
+    color: var.$grey-5;
+    margin: $icon-margin;
+  }
+
+  &:hover {
+    transition: 0.2s ease-out;
+    background-color: var.$grey-2;
+    color: var.$grey-6;
+  }
+}
+
+/**
+ * An action button that is icon-only and displayed to the right of an
+ * <input> element. Colors are one tick more subtle than `action-button`.
+ */
+@mixin input-icon-button {
+  @include action-button;
+  padding: 10px;
+  border-radius: 0; // Turn off border-radius to align with <input> edges
+  border: 1px solid var.$grey-3;
+  border-left: 0px; // Avoid double border with the <input>
+  color: var.$grey-4;
+
+  &:hover {
+    background-color: var.$grey-2;
+    color: var.$grey-5;
+  }
+}

src/styles/mixins/links.scss

+@use "../variables" as var;
+
+/**
+ * horizontally-oriented collection of linked icons
+ */
+@mixin footer-links {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding-top: 8px;
+  border-top: 1px solid var.$grey-3;
+
+  &__icon {
+    display: flex;
+    width: 18px;
+    height: 18px;
+    margin: 0 8px;
+    color: var.$grey-5;
+
+    &:hover {
+      color: var.$grey-6;
+    }
+  }
+}

src/styles/mixins/panel.scss

+@use "buttons";
+@use "../variables" as var;
+
+/**
+ * Base styles for a "panel"-like element, with appropriate
+ * padding, heading and close-button styles.
+ */
+@mixin panel {
+  background-color: var.$body-background;
+  border: solid 1px var.$grey-3;
+  border-radius: 2px;
+
+  &__header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 1em 0;
+    margin: 0 1em;
+    border: 1px none var.$grey-3;
+    border-bottom-style: solid;
+  }
+
+  &__subheader {
+    width: 100%;
+    text-align: center;
+    padding: 1em 0.5em;
+    border-bottom: 1px solid var.$grey-3;
+    font-size: 1.25em;
+    font-weight: 500;
+    color: var.$grey-5;
+  }
+
+  &__title {
+    color: var.$brand;
+    font-size: var.$body2-font-size;
+    font-weight: 700;
+  }
+
+  &__close-btn {
+    @include buttons.action-button(0px);
+  }
+
+  &__content {
+    margin: 1em;
+    margin-top: 0;
+  }
+}

src/styles/sidebar/components/action-button.scss

+@use "../../mixins/buttons";
+
+.action-button {
+  @include buttons.action-button;
+
+  &__icon--compact {
+    margin: 0;
+  }
+}

src/styles/sidebar/components/share-annotations-panel.scss

+@use "../../mixins/buttons";
+@use "../../mixins/links";
+
 .share-annotations-panel {
   color: $grey-5;
 
@@ -15,42 +18,20 @@
   }
 
   &__copy-btn {
-    @include outline-on-keyboard-focus;
-    padding: 10px;
-    color: $grey-4;
-    background: $grey-1;
-    border: 1px solid $grey-3;
-    border-radius: 0;
-    border-left: 0px;
-
-    &:hover {
-      background-color: $grey-2;
-      color: $grey-5;
-    }
+    @include buttons.input-icon-button;
   }
 
-  &__links {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    padding-top: 8px;
-    border-top: 1px solid $grey-3;
+  &__icon--inline {
+    width: 1em;
+    height: 1em;
   }
 
-  &__icon {
-    display: flex;
-    width: 24px;
-    height: 24px;
-    margin: 0 8px;
-    color: $grey-5;
+  .share-annotations-panel-links {
+    @include links.footer-links;
 
-    &:hover {
-      color: $grey-6;
+    &__icon {
+      width: 24px;
+      height: 24px;
     }
   }
-
-  &__icon--inline {
-    width: 1em;
-    height: 1em;
-  }
 }

src/styles/sidebar/components/sidebar-panel.scss

+@use "../../mixins/panel";
+
 .sidebar-panel {
+  @include panel.panel;
   position: relative;
-  background-color: $body-background;
-  border: solid 1px $grey-3;
-  border-radius: 2px;
   margin-bottom: 0.75em;
-
-  &__header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 1em 0;
-    margin: 0 1em;
-    border: 1px none $grey-3;
-    border-bottom-style: solid;
-  }
-
-  &__subheader {
-    width: 100%;
-    text-align: center;
-    padding: 1em 0.5em;
-    border-bottom: 1px solid $grey-3;
-    font-size: 1.25em;
-    font-weight: 500;
-    color: $grey-5;
-  }
-
-  &__title {
-    color: $brand;
-    font-size: $body2-font-size;
-    font-weight: 700;
-  }
-
-  &__close-btn {
-    @include outline-on-keyboard-focus;
-    display: flex;
-    align-items: center;
-    border-radius: 2px;
-    border: none;
-    padding: 0.5em;
-    background-color: $grey-1;
-    color: $grey-5;
-    font-weight: 700;
-
-    &-icon {
-      color: $grey-5;
-    }
-
-    &:hover {
-      transition: 0.2s ease-out;
-      background-color: $grey-2;
-      color: $grey-6;
-    }
-  }
-
-  &__content {
-    margin: 1em;
-    margin-top: 0;
-  }
 }

src/styles/sidebar/components/version-info.scss

+@use "../../mixins/buttons";
+
 .version-info {
   margin-top: 0.5em;
 
@@ -24,27 +26,4 @@
     justify-content: center;
     padding-bottom: 0.5em;
   }
-
-  &__copy-btn {
-    @include outline-on-keyboard-focus;
-    display: flex;
-    align-items: center;
-    border-radius: 2px;
-    border: none;
-    padding: 0.5em;
-    background-color: $grey-1;
-    color: $grey-5;
-    font-weight: 700;
-
-    &-icon {
-      color: $grey-5;
-      margin: 0 5px;
-    }
-
-    &:hover {
-      transition: 0.2s ease-out;
-      background-color: $grey-2;
-      color: $grey-6;
-    }
-  }
 }

src/styles/sidebar/sidebar.scss

@@ -18,6 +18,7 @@ $base-line-height: 20px;
 
 // Components
 // ----------
+@import './components/action-button';
 @import './components/annotation';
 @import './components/annotation-document-info';
 @import './components/annotation-header';