Extract `AnnotationLicense` component

src/images/icons/cc-std.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cc-std"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M7.985 0c2.238 0 4.143.781 5.715 2.343a7.694 7.694 0 011.714 2.579C15.804 5.888 16 6.914 16 8a8.164 8.164 0 01-.579 3.078 7.344 7.344 0 01-1.707 2.536 8.222 8.222 0 01-2.657 1.772c-.99.41-2.014.614-3.071.614a7.775 7.775 0 01-3.036-.607 8.047 8.047 0 01-2.6-1.757A7.846 7.846 0 010 8c0-1.057.202-2.074.607-3.05A8.033 8.033 0 012.371 2.33C3.895.777 5.766 0 7.985 0zm.03 1.443c-1.83 0-3.367.638-4.615 1.914a6.878 6.878 0 00-1.45 2.15A6.301 6.301 0 001.443 8c0 .858.168 1.684.507 2.479a6.627 6.627 0 001.45 2.129 6.593 6.593 0 002.129 1.428c.79.329 1.619.493 2.485.493.857 0 1.688-.166 2.494-.5a6.91 6.91 0 002.178-1.442c1.247-1.22 1.871-2.748 1.871-4.586a6.57 6.57 0 00-.486-2.515 6.397 6.397 0 00-1.413-2.114C11.37 2.086 9.824 1.443 8.014 1.443zm-.1 5.229l-1.073.557c-.114-.238-.254-.405-.42-.5a.95.95 0 00-.465-.143c-.714 0-1.072.472-1.072 1.415 0 .428.09.77.271 1.028.181.257.448.386.8.386.467 0 .796-.229.987-.686l.985.5a2.35 2.35 0 01-2.1 1.257c-.714 0-1.29-.218-1.729-.657-.438-.438-.657-1.047-.657-1.828 0-.762.222-1.367.665-1.814.442-.448 1.002-.672 1.678-.672.991 0 1.7.385 2.13 1.157zm4.613 0l-1.057.557c-.114-.238-.255-.405-.421-.5a.972.972 0 00-.479-.143c-.714 0-1.072.472-1.072 1.415 0 .428.091.77.272 1.028.18.257.447.386.8.386.466 0 .795-.229.985-.686l1 .5c-.218.39-.514.698-.885.922a2.308 2.308 0 01-1.214.335c-.724 0-1.302-.218-1.735-.657-.434-.438-.65-1.047-.65-1.828 0-.762.22-1.367.664-1.814.442-.448 1.002-.672 1.678-.672.99 0 1.696.385 2.114 1.157z"></path></g></svg>

src/images/icons/cc-zero.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" focusable="false" class="Icon Icon--cc-zero"><g fill-rule="evenodd"><rect fill="none" stroke="none" x="0" y="0" width="16" height="16"></rect><path fill="currentColor" stroke="none" d="M7.983 0c2.238 0 4.148.78 5.72 2.342a7.662 7.662 0 011.715 2.582c.39.962.582 1.99.582 3.076a8.13 8.13 0 01-.583 3.087 7.262 7.262 0 01-1.703 2.526 8.213 8.213 0 01-2.655 1.77c-.99.41-2.018.617-3.076.617a7.902 7.902 0 01-3.042-.6 8.301 8.301 0 01-2.6-1.759A8.087 8.087 0 01.6 11.042 7.84 7.84 0 010 8c0-1.057.2-2.07.6-3.042a8.12 8.12 0 011.77-2.633C3.893.772 5.764 0 7.983 0zm.034 1.44c-1.829 0-3.369.64-4.616 1.915a6.962 6.962 0 00-1.457 2.157 6.388 6.388 0 000 4.969 6.83 6.83 0 003.585 3.558c.79.324 1.62.487 2.488.487.857 0 1.681-.165 2.482-.498a6.88 6.88 0 002.184-1.446C13.931 11.364 14.56 9.838 14.56 8a6.57 6.57 0 00-.487-2.515 6.418 6.418 0 00-1.418-2.118C11.37 2.081 9.826 1.44 8.017 1.44zM8 3.395c2.641 0 3.305 2.492 3.305 4.605 0 2.113-.664 4.605-3.305 4.605S4.694 10.113 4.694 8l.007-.355c.073-2.027.804-4.25 3.299-4.25zm1.316 3.227L7.35 10.017c-.274.412-.083.645.219.774l.135.044c.091.022.19.034.297.034 1.357 0 1.422-1.938 1.422-2.869l-.007-.409a7.282 7.282 0 00-.06-.72l-.04-.25zM8 5.132c-1.258 0-1.406 1.66-1.421 2.646L6.577 8c0 .24.005.544.035.865l.027.244 1.759-3.232c.182-.316.09-.542-.101-.706A1.222 1.222 0 008 5.13z"></path></g></svg>

src/sidebar/components/annotation-license.js

+'use strict';
+
+const { createElement } = require('preact');
+
+const SvgIcon = require('./svg-icon');
+
+/**
+ * Render information about CC licensing
+ */
+function AnnotationLicense() {
+  return (
+    <div className="annotation-license">
+      <a
+        className="annotation-license__link"
+        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>
+      </a>
+    </div>
+  );
+}
+
+AnnotationLicense.propTypes = {};
+
+module.exports = AnnotationLicense;

src/sidebar/components/svg-icon.js

@@ -12,6 +12,8 @@ const icons = {
   'arrow-left': require('../../images/icons/arrow-left.svg'),
   'arrow-right': require('../../images/icons/arrow-right.svg'),
   cancel: require('../../images/icons/cancel.svg'),
+  'cc-std': require('../../images/icons/cc-std.svg'),
+  'cc-zero': require('../../images/icons/cc-zero.svg'),
   'collapse-menu': require('../../images/icons/collapse-menu.svg'),
   copy: require('../../images/icons/copy.svg'),
   cursor: require('../../images/icons/cursor.svg'),

src/sidebar/index.js

@@ -142,6 +142,10 @@ function startAngularApp(config) {
       'annotationActionBar',
       wrapReactComponent(require('./components/annotation-action-bar'))
     )
+    .component(
+      'annotationLicense',
+      wrapReactComponent(require('./components/annotation-license'))
+    )
     .component(
       'annotationPublishControl',
       wrapReactComponent(require('./components/annotation-publish-control'))

src/sidebar/templates/annotation.html

@@ -63,15 +63,7 @@
         on-set-privacy="vm.setPrivacy(level)"></annotation-publish-control>
     </div>
 
-    <div class="annotation-section annotation-license"
-         ng-show="vm.shouldShowLicense()">
-      <a class="annotation-license__link" href="http://creativecommons.org/publicdomain/zero/1.0/"
-        title="View more information about the Creative Commons Public Domain dedication"
-        target="_blank">
-        <i class="h-icon-cc-logo"></i><i class="h-icon-cc-zero"></i>
-        Annotations can be freely reused by anyone for any purpose.
-      </a>
-    </div>
+    <annotation-license ng-if="vm.shouldShowLicense()"></annotation-license>
 
     <div class="annotation-replies" ng-if="!vm.isReply() && vm.replyCount > 0">
       <a href=""

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

+@use "../../variables" as var;
+
+.annotation-license {
+  @include var.font-small;
+  border-top: 1px solid var.$grey-3;
+  padding-top: 0.75em;
+
+  &__link {
+    display: flex;
+    color: var.$grey-5;
+  }
+
+  &__icon {
+    width: 12px;
+    height: 12px;
+    margin-right: 1px;
+  }
+
+  &__details {
+    margin-left: 0.25em;
+  }
+}

src/styles/sidebar/components/annotation.scss

@@ -114,24 +114,6 @@
   font-size: var.$body1-font-size;
 }
 
-.annotation-license {
-  clear: both;
-  border-top: #cccccc 1px solid;
-  font-size: 0.8em;
-  padding-top: 0.583em;
-
-  @include icons.icons {
-    font-size: var.$normal-font-size;
-    vertical-align: -2px;
-    margin-right: 1px;
-  }
-}
-
-.annotation-license__link {
-  color: var.$gray-light;
-  display: block;
-}
-
 .annotation-collapsed-replies {
   display: none;
 }

src/styles/sidebar/sidebar.scss

@@ -31,6 +31,7 @@
 @use './components/annotation-body';
 @use './components/annotation-document-info';
 @use './components/annotation-header';
+@use './components/annotation-license';
 @use './components/annotation-publish-control';
 @use './components/annotation-quote';
 @use './components/annotation-share-control';