Merge pull request #2265 from hypothesis/reduce-reuse-recycle

Do additional consolidation with mixins and remove unused CSS

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

@@ -76,7 +76,7 @@ function AnnotationActionBar({
   };
 
   return (
-    <div className="annotation-action-bar">
+    <div className="annotation-action-bar u-layout-row">
       {showEditAction && <Button icon="edit" title="Edit" onClick={onEdit} />}
       {showDeleteAction && (
         <Button icon="trash" title="Delete" onClick={onDelete} />

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

@@ -104,7 +104,7 @@ function AnnotationShareControl({
             <div className="annotation-share-panel__input">
               <input
                 aria-label="Use this URL to share this annotation"
-                className="form-input"
+                className="annotation-share-panel__form-input"
                 type="text"
                 value={shareUri}
                 readOnly

src/sidebar/components/help-panel.js

@@ -99,15 +99,15 @@ function HelpPanel({ auth, session }) {
       panelName={uiConstants.PANEL_HELP}
       onActiveChanged={onActiveChanged}
     >
-      <div className="help-panel__content">
-        <div className="help-panel__subtitle">
+      <div className="help-panel__content u-vertical-rhythm">
+        <div className="u-layout-row--align-middle">
           <h3 className="help-panel__sub-panel-title">
             {subPanelTitles[activeSubPanel]}
           </h3>
-          <div className="help-panel__navigation">
+          <div>
             {activeSubPanel === 'versionInfo' && (
               <button
-                className="help-panel__sub-panel-link"
+                className="help-panel__sub-panel-navigation-button"
                 onClick={e => openSubPanel(e, 'tutorial')}
                 aria-label="Show tutorial panel"
               >
@@ -120,15 +120,12 @@ function HelpPanel({ auth, session }) {
             )}
             {activeSubPanel === 'tutorial' && (
               <button
-                className="help-panel__sub-panel-link"
+                className="help-panel__sub-panel-navigation-button"
                 onClick={e => openSubPanel(e, 'versionInfo')}
                 aria-label="Show version information panel"
               >
                 About this version
-                <SvgIcon
-                  name="arrow-right"
-                  className="help-panel__sub-panel-link-icon"
-                />
+                <SvgIcon name="arrow-right" />
               </button>
             )}
           </div>

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

@@ -71,7 +71,7 @@ function ShareAnnotationsPanel({ analytics, toastMessenger }) {
           <div className="share-annotations-panel__input">
             <input
               aria-label="Use this URL to share these annotations"
-              className="form-input share-annotations-panel__form-input"
+              className="share-annotations-panel__form-input"
               type="text"
               value={shareURI}
               readOnly

src/sidebar/components/test/help-panel-test.js

@@ -58,14 +58,16 @@ describe('HelpPanel', function () {
 
     it('should show navigation link to versionInfo sub-panel', () => {
       const wrapper = createComponent();
-      const link = wrapper.find('.help-panel__sub-panel-link');
+      const link = wrapper.find('.help-panel__sub-panel-navigation-button');
 
       assert.equal(link.text(), 'About this version');
     });
 
     it('should switch to versionInfo sub-panel when footer link clicked', () => {
       const wrapper = createComponent();
-      wrapper.find('.help-panel__sub-panel-link').simulate('click');
+      wrapper
+        .find('.help-panel__sub-panel-navigation-button')
+        .simulate('click');
 
       assert.equal(
         wrapper.find('.help-panel__sub-panel-title').text(),
@@ -83,9 +85,11 @@ describe('HelpPanel', function () {
   context('when viewing versionInfo sub-panel', () => {
     it('should show navigation link back to tutorial sub-panel', () => {
       const wrapper = createComponent();
-      wrapper.find('.help-panel__sub-panel-link').simulate('click');
+      wrapper
+        .find('.help-panel__sub-panel-navigation-button')
+        .simulate('click');
 
-      const link = wrapper.find('.help-panel__sub-panel-link');
+      const link = wrapper.find('.help-panel__sub-panel-navigation-button');
 
       assert.isTrue(wrapper.find('VersionInfo').exists());
       assert.isFalse(wrapper.find('Tutorial').exists());
@@ -96,9 +100,11 @@ describe('HelpPanel', function () {
       const wrapper = createComponent();
 
       // Click to get to version-info sub-panel...
-      wrapper.find('.help-panel__sub-panel-link').simulate('click');
+      wrapper
+        .find('.help-panel__sub-panel-navigation-button')
+        .simulate('click');
 
-      const link = wrapper.find('.help-panel__sub-panel-link');
+      const link = wrapper.find('.help-panel__sub-panel-navigation-button');
       // Click again to get back to tutorial sub-panel
       link.simulate('click');
 

src/styles/mixins/buttons.scss

@@ -133,3 +133,19 @@
     text-decoration: underline;
   }
 }
+
+/**
+ * A button pattern that looks like a link with a small icon on the right
+ * Used, e.g., in the help panel to navigate between sub-panels
+ */
+@mixin button--navigation {
+  @include reset-native-btn-styles;
+  @include layout.row($justify: right, $align: center);
+  color: var.$color-brand;
+
+  svg {
+    margin-left: 2px;
+    width: 12px;
+    height: 12px;
+  }
+}

src/styles/mixins/forms.scss

@@ -49,6 +49,12 @@
   }
 }
 
+@mixin form-input--with-button {
+  @include form-input;
+  width: 100%;
+  border-radius: 0;
+}
+
 @mixin primary-action-btn {
   @include focus.outline-on-keyboard-focus;
   @include utils.font--medium;

src/styles/sidebar/components/annotation-action-bar.scss

-.annotation-action-bar {
-  display: flex;
-}

src/styles/sidebar/components/annotation-share-control.scss

 @use '../../mixins/buttons';
+@use '../../mixins/forms';
 @use '../../mixins/layout';
 @use '../../mixins/molecules';
 @use "../../mixins/utils";
@@ -14,7 +15,6 @@
   right: 5px;
   bottom: 32px;
   width: 275px;
-  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
   cursor: default;
 
   &__input {
@@ -26,10 +26,10 @@
     padding: 0.25em 0.5em;
   }
 
-  & .form-input {
+  &__form-input {
+    @include forms.form-input--with-button;
     @include utils.font--small;
     padding: 0.5em;
-    border-radius: 0;
   }
 
   &__permissions {

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

@@ -4,13 +4,5 @@
   &__user-name {
     color: var.$color-text;
     font-weight: bold;
-
-    .is-dimmed & {
-      color: var.$color-text-light;
-    }
-
-    .is-highlighted & {
-      color: var.$color-text;
-    }
   }
 }

src/styles/sidebar/components/annotation.scss

@@ -24,23 +24,6 @@
 .annotation {
   @include layout.vertical-rhythm;
 
-  &.is-highlighted {
-    // Slightly darken the bodies of highlighted annotations to
-    // make them stand out next to others, which will have the `is-dimmed` state
-    // set
-    .annotation-body {
-      color: var.$color-text;
-    }
-  }
-
-  &.is-dimmed {
-    // Lighten the bodies of dimmed annotations to make other
-    // annotations which are not dimmed stand out
-    .annotation-body {
-      color: var.$color-text-light;
-    }
-  }
-
   &__reply-toggle {
     @include buttons.button--link;
   }

src/styles/sidebar/components/focused-mode-header.scss

 @use "../../mixins/focus";
 @use "../../mixins/forms";
 @use "../../mixins/layout";
+@use "../../mixins/molecules";
 @use "../../mixins/utils";
 @use "../../variables" as var;
 
 // A dark grey button used for the primary action
 // in a form
 .focused-mode-header {
+  @include molecules.card-frame;
   @include layout.row($align: center);
-  @include utils.border;
   position: relative;
 
   background-color: var.$color-background;
   border-radius: 2px;
   font-weight: 300;
-  margin-bottom: 0.72em;
-  padding: 0.5em 1em;
+
+  // TODO cleanup
+  padding: 0.5em;
+  margin-bottom: 1em;
 
   &__btn {
+    // TODO use Button component
     @include forms.primary-action-btn;
     @include layout.row($align: center);
     margin-left: auto;

src/styles/sidebar/components/form-input.scss

-@use "../../mixins/forms";
-@use "../../variables" as var;
-
-.form-input {
-  @include forms.form-input;
-  width: 100%;
-  display: block;
-}

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

 @use "../../mixins/buttons";
 @use "../../mixins/layout";
+@use "../../mixins/molecules";
 @use "../../mixins/utils";
 @use "../../variables" as var;
 
 .help-panel {
-  &__content {
-    @include layout.vertical_rhythm;
-  }
-
-  &__subtitle {
-    @include layout.row($justify: right, $align: center);
-  }
-
   &__sub-panel-title {
     @include utils.font--large;
     flex-grow: 1;
@@ -20,7 +13,6 @@
   &__subcontent {
     @include utils.border-top;
     @include utils.border-bottom;
-    padding: 0.5em 0;
 
     a {
       text-decoration: underline;
@@ -31,40 +23,11 @@
     @include utils.icon--xsmall;
   }
 
-  &__sub-panel-link {
-    @include buttons.reset-native-btn-styles;
-    @include layout.row($align: center);
-    margin-left: auto;
-    color: var.$color-brand;
-
-    &-icon {
-      margin-left: 2px;
-      width: 12px;
-      height: 12px;
-    }
+  &__sub-panel-navigation-button {
+    @include buttons.button--navigation;
   }
 
   &-tabs {
-    @include layout.row($align: center);
-
-    &__tab {
-      @include utils.font--large;
-      @include utils.border-right;
-      flex: 1 1;
-      text-align: center;
-      color: var.$color-text-light;
-
-      &:last-of-type {
-        border-right: none;
-      }
-    }
-
-    &__link {
-      color: var.$color-text-light;
-    }
-
-    &__icon {
-      @include utils.icon--xsmall;
-    }
+    @include molecules.panel-tabs;
   }
 }

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

 @use "../../variables" as var;
 @use "../../mixins/buttons";
-@use "../../mixins/utils";
+@use "../../mixins/forms";
 @use "../../mixins/molecules";
+@use "../../mixins/utils";
 
 .share-annotations-panel {
   color: var.$color-text-light;
@@ -16,7 +17,7 @@
   }
 
   &__form-input {
-    border-radius: 0;
+    @include forms.form-input--with-button;
   }
 
   &__icon--inline {

src/styles/sidebar/sidebar.scss

@@ -13,7 +13,6 @@
 
 // Components
 // ----------
-@use './components/annotation-action-bar';
 @use './components/annotation';
 @use './components/annotation-body';
 @use './components/annotation-document-info';
@@ -28,7 +27,6 @@
 @use './components/button';
 @use './components/excerpt';
 @use './components/focused-mode-header';
-@use './components/form-input';
 @use './components/group-list';
 @use './components/group-list-item';
 @use './components/help-panel';

src/styles/util.scss

@@ -10,6 +10,15 @@
   @include layout.row;
 }
 
+.u-layout-row--align-center,
+.u-layout-row--align-middle {
+  @include layout.row($align: center);
+}
+
+.u-vertical-rhythm {
+  @include layout.vertical-rhythm;
+}
+
 .u-screen-reader-only {
   @include a11y.screen-reader-only;
 }