Merge pull request #2262 from hypothesis/extract-molecules

Extract "molecule" compositions into reusable mixins

src/sidebar/components/help-panel.js

@@ -99,51 +99,53 @@ function HelpPanel({ auth, session }) {
       panelName={uiConstants.PANEL_HELP}
       onActiveChanged={onActiveChanged}
     >
-      <div className="u-layout-row">
-        <h3 className="help-panel__sub-panel-title">
-          {subPanelTitles[activeSubPanel]}
-        </h3>
-        <div className="help-panel__footer">
+      <div className="help-panel__content">
+        <div className="help-panel__subtitle">
+          <h3 className="help-panel__sub-panel-title">
+            {subPanelTitles[activeSubPanel]}
+          </h3>
+          <div className="help-panel__navigation">
+            {activeSubPanel === 'versionInfo' && (
+              <button
+                className="help-panel__sub-panel-link"
+                onClick={e => openSubPanel(e, 'tutorial')}
+                aria-label="Show tutorial panel"
+              >
+                Getting started
+                <SvgIcon
+                  name="arrow-right"
+                  className="help-panel__sub-panel-link-icon"
+                />
+              </button>
+            )}
+            {activeSubPanel === 'tutorial' && (
+              <button
+                className="help-panel__sub-panel-link"
+                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"
+                />
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="help-panel__subcontent">
+          {activeSubPanel === 'tutorial' && <Tutorial />}
           {activeSubPanel === 'versionInfo' && (
-            <button
-              className="help-panel__sub-panel-link"
-              onClick={e => openSubPanel(e, 'tutorial')}
-              aria-label="Show tutorial panel"
-            >
-              Getting started
-              <SvgIcon
-                name="arrow-right"
-                className="help-panel__sub-panel-link-icon"
-              />
-            </button>
-          )}
-          {activeSubPanel === 'tutorial' && (
-            <button
-              className="help-panel__sub-panel-link"
-              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"
-              />
-            </button>
+            <VersionInfo versionData={versionData} />
           )}
         </div>
-      </div>
-      <div className="help-panel__content">
-        {activeSubPanel === 'tutorial' && <Tutorial />}
-        {activeSubPanel === 'versionInfo' && (
-          <VersionInfo versionData={versionData} />
-        )}
-      </div>
-      <div className="help-panel-tabs">
-        <HelpPanelTab
-          linkText="Help topics"
-          url="https://web.hypothes.is/help/"
-        />
-        <HelpPanelTab linkText="New support ticket" url={supportTicketURL} />
+        <div className="help-panel-tabs">
+          <HelpPanelTab
+            linkText="Help topics"
+            url="https://web.hypothes.is/help/"
+          />
+          <HelpPanelTab linkText="New support ticket" url={supportTicketURL} />
+        </div>
       </div>
     </SidebarPanel>
   );

src/styles/mixins/links.scss

-@use "../variables" as var;
-@use "./layout";
-@use "./utils";
-
-/**
- * horizontally-oriented collection of linked icons
- */
-@mixin footer-links {
-  @include layout.row(center);
-  @include utils.border-top;
-  padding-top: 8px;
-
-  &__icon {
-    @include layout.row;
-    width: 18px;
-    height: 18px;
-    margin: 0 8px;
-    color: var.$grey-5;
-
-    &:hover {
-      color: var.$grey-6;
-    }
-  }
-}

src/styles/mixins/molecules.scss

+@use "../variables" as var;
+@use "./buttons";
+@use "./layout";
+@use "./utils";
+
+/**
+ * A straightforward "frame" that serves as a basis for other card-like
+ * patterns. May be used on its own for components that don't need all of
+ * `card` or `panel's` bells and whistles.
+ */
+@mixin card-frame {
+  @include utils.border;
+  border-radius: 2px;
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+  background-color: var.$color-background;
+}
+
+/**
+ * A "card"-like pattern that may be displayed in vertical lists, a la
+ * annotation (thread) cards. Will vertically-space its children. Adds a
+ * hover/active intensified box shadow and accounts for "theme-clean" affordances.
+ */
+@mixin card {
+  @include card-frame;
+  @include layout.vertical-rhythm;
+  padding: 1em;
+
+  &:hover,
+  &.is-focused {
+    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+  }
+
+  &--theme-clean {
+    // Give a little more space so that the border appears centered
+    // between cards
+    padding-bottom: 1.5em;
+    border-bottom: 1px solid var.$grey-2;
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}
+
+/**
+ * horizontally-oriented collection of linked icons
+ */
+@mixin footer-links {
+  @include layout.row(center);
+  @include utils.border-top;
+  padding-top: 8px;
+
+  &__icon {
+    @include layout.row;
+    @include utils.icon--medium;
+    margin: 0 8px;
+    color: var.$grey-5;
+
+    &:hover {
+      color: var.$grey-6;
+    }
+  }
+}
+
+/**
+ * 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%);
+  }
+
+  // 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
+    );
+  }
+}
+
+/**
+ * Base styles for a "panel"-like element, with appropriate
+ * padding, heading and close-button styles.
+ */
+@mixin panel {
+  @include card;
+
+  &__header {
+    @include layout.row($align: center);
+    @include utils.border-bottom;
+    padding-bottom: 1em;
+  }
+
+  &__header-icon {
+    margin-right: 0.5em;
+  }
+
+  &__title {
+    @include var.font-big;
+    color: var.$color-brand;
+    font-weight: 700;
+  }
+
+  &__button {
+    @include buttons.button--labeled;
+  }
+
+  &__button--primary {
+    @include buttons.button--primary;
+  }
+
+  &__actions {
+    @include layout.row(right);
+    @include layout.horizontal-rhythm(10px);
+  }
+}
+
+/**
+ * `panel` with tighter margins and padding, for use in more confined spaces
+ */
+@mixin panel--compact {
+  @include panel;
+  padding: 0.75em;
+
+  &__header {
+    padding: 0;
+    border-bottom: none;
+  }
+}
+
+/**
+ * Styled external-linked "tabs" with icons, intended for use in a panel
+ */
+@mixin panel-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;
+  }
+}

src/styles/mixins/panel.scss

-@use "../variables" as var;
-@use "./buttons";
-@use "./layout";
-@use "./utils";
-
-/**
- * Base styles for a "panel"-like element, with appropriate
- * padding, heading and close-button styles.
- */
-@mixin panel {
-  @include utils.border;
-  background-color: var.$color-background;
-  border-radius: 2px;
-
-  &__header {
-    @include layout.row($align: center);
-    @include utils.border-bottom;
-    padding: 1em 0;
-    margin: 0 1em;
-  }
-
-  &__header-icon {
-    margin-right: 0.5em;
-  }
-
-  &__title {
-    @include var.font-big;
-    color: var.$color-brand;
-    font-weight: 700;
-  }
-
-  &__content {
-    margin: 1em;
-    margin-top: 0;
-  }
-
-  &__button {
-    @include buttons.button--labeled;
-    margin-left: 1em;
-  }
-
-  &__button--primary {
-    @include buttons.button--primary;
-    margin-left: 1em;
-  }
-
-  &__actions {
-    display: flex;
-    justify-content: flex-end;
-  }
-}
-
-/**
- * `panel` with tighter margins and padding, for use in more confined spaces
- */
-@mixin panel--compact {
-  @include panel;
-
-  &__header {
-    padding: 0.75em 0;
-    margin: 0 0.75em;
-    border-bottom: none;
-  }
-
-  &__content {
-    margin: 0.75em;
-    margin-top: 0;
-  }
-}

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

 @use '../../variables' as var;
 @use "../../mixins/buttons";
 @use "../../mixins/layout";
+@use "../../mixins/molecules";
 
 .annotation-body__text {
-  // Hidden annotations displayed to moderators, where the content is still
-  // present.
-  &.is-hidden.has-content {
-    text-decoration: line-through;
-    filter: grayscale(100%) contrast(65%);
-  }
-
-  // Hidden annotations displayed to non-moderators, where the content has been
-  // filtered out by the service.
-  &.is-hidden: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
-    );
+  &.is-hidden {
+    @include molecules.redacted-content;
   }
 }
 

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

 @use '../../mixins/buttons';
 @use '../../mixins/layout';
-@use '../../mixins/links';
-@use '../../mixins/panel';
+@use '../../mixins/molecules';
 @use "../../mixins/utils";
 @use "../../variables" as var;
 
@@ -10,7 +9,7 @@
 }
 
 .annotation-share-panel {
-  @include panel.panel--compact;
+  @include molecules.panel--compact;
   position: absolute;
   right: 5px;
   bottom: 32px;
@@ -39,12 +38,14 @@
   }
 
   &__arrow {
+    margin: 0;
     color: var.$grey-3;
     fill: white;
     transform: rotateX(180deg);
     position: absolute;
     z-index: 100;
     right: 0px;
+    bottom: -8px;
   }
 
   .share-links__icon {

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

@@ -4,17 +4,24 @@
 @use "../../variables" as var;
 
 .help-panel {
+  &__content {
+    @include layout.vertical_rhythm;
+  }
+
+  &__subtitle {
+    @include layout.row($justify: right, $align: center);
+  }
+
   &__sub-panel-title {
     @include var.font-big;
-    margin: 0;
-    padding: 0.5em 0;
+    flex-grow: 1;
     font-weight: 500;
   }
 
-  &__content {
+  &__subcontent {
     @include utils.border-top;
     @include utils.border-bottom;
-    padding: 0.5em;
+    padding: 0.5em 0;
 
     a {
       text-decoration: underline;
@@ -25,13 +32,6 @@
     @include utils.icon--xsmall;
   }
 
-  &__footer {
-    padding: 0.5em 0;
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-  }
-
   &__sub-panel-link {
     @include buttons.reset-native-btn-styles;
     @include layout.row($align: center);
@@ -51,8 +51,7 @@
     &__tab {
       @include var.font-big;
       @include utils.border-right;
-      flex: 1 1 0px;
-      margin-top: 0.5em;
+      flex: 1 1;
       text-align: center;
       color: var.$color-text-light;
 

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

 @use "../../variables" as var;
 @use "../../mixins/buttons";
-@use "../../mixins/links";
 @use "../../mixins/utils";
+@use "../../mixins/molecules";
 
 .share-annotations-panel {
   color: var.$color-text-light;
@@ -29,7 +29,7 @@
   }
 
   .share-annotations-panel-links {
-    @include links.footer-links;
+    @include molecules.footer-links;
 
     &__icon {
       @include utils.icon--large;

src/styles/sidebar/components/share-links.scss

-@use '../../mixins/links';
 @use "../../mixins/utils";
+@use '../../mixins/molecules';
 
 .share-links {
-  @include links.footer-links;
+  @include molecules.footer-links;
 
   &__icon {
     @include utils.icon--large;

src/styles/sidebar/components/sidebar-content-error.scss

-@use "../../mixins/panel";
+@use "../../mixins/molecules";
 @use "../../variables" as var;
 
 .sidebar-content-error {
-  @include panel.panel;
+  @include molecules.panel;
   position: relative;
   margin-bottom: 0.75em;
 }

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

-@use "../../mixins/panel";
+@use "../../mixins/molecules";
 
 .sidebar-panel {
-  @include panel.panel;
+  @include molecules.panel;
   position: relative;
   margin-bottom: 0.75em;
 }

src/styles/sidebar/components/thread-card.scss

 @use "../../variables" as var;
+@use "../../mixins/layout";
+@use "../../mixins/molecules";
+@use "../../mixins/utils";
 
 .thread-card {
-  padding: 1em;
-  border-radius: 2px;
-  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+  @include molecules.card;
   cursor: pointer;
-  background-color: var.$white;
-
-  &.is-focused {
-    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
-  }
-
-  &--theme-clean {
-    // Give a little more space so that the border appears centered
-    // between cards
-    padding-bottom: 1.5em;
-    border-bottom: 1px solid var.$grey-2;
-    box-shadow: none;
-
-    &:hover {
-      box-shadow: none;
-    }
-  }
 }

src/styles/sidebar/components/toast-messages.scss

-@use "../../mixins/panel";
+@use "../../mixins/molecules";
 @use "../../mixins/layout";
 @use "../mixins/responsive";
 @use "../../variables" as var;
@@ -36,12 +36,10 @@
 }
 
 .toast-message {
-  @include panel.panel;
-  @include layout.row;
+  @include molecules.card-frame;
+  @include layout.row($align: center);
   position: relative;
   width: 100%;
-  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
-  border-radius: 2px;
   margin-bottom: 0.75em;
 
   &--success {

src/styles/sidebar/components/tutorial.scss

@@ -3,7 +3,6 @@
 
 .tutorial {
   &__list {
-    margin-top: 0em;
     padding-left: 2em;
   }