settings/tokens/new: Add help button to "Scopes" section (#6431)

rust-lang · May 5, 2023 · ed5150b · ed5150b
1 parent 5408fec
commit ed5150b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/app/styles/settings/tokens/new.module.css b/app/styles/settings/tokens/new.module.css
@@ -4,11 +4,32 @@
 }
 
 .form-group-name {
-    display: block;
+    display: flex;
+    gap: var(--space-2xs);
     margin-bottom: var(--space-2xs);
     font-weight: 600;
 }
 
+.help-link {
+    flex-shrink: 0;
+    color: var(--grey600);
+    padding: var(--space-3xs);
+    margin: calc(-1 * var(--space-3xs));
+
+    &:hover {
+        color: var(--grey700);
+    }
+
+    svg {
+        width: 1em;
+        height: 1em;
+    }
+}
+
+.hidden-label {
+    composes: sr-only from '../../shared/a11y.module.css';
+}
+
 .form-group-error {
     display: block;
     color: red;

diff --git a/app/templates/settings/tokens/new.hbs b/app/templates/settings/tokens/new.hbs
@@ -27,7 +27,19 @@
   </div>
 
   <div local-class="form-group" data-test-scopes-group>
-    <div local-class="form-group-name">Scopes</div>
+    <div local-class="form-group-name">
+      Scopes
+
+      <a
+        href="https://rust-lang.github.io/rfcs/2947-crates-io-token-scopes.html"
+        target="_blank"
+        rel="noopener noreferrer"
+        local-class="help-link"
+      >
+        <span local-class="hidden-label">Help</span>
+        {{svg-jar "circle-question"}}
+      </a>
+    </div>
 
     <ul role="list" local-class="scopes-list {{if this.scopesInvalid "invalid"}}">
       {{#each this.ENDPOINT_SCOPES as |scope|}}

diff --git a/public/assets/circle-question.svg b/public/assets/circle-question.svg