clickable 'link out' icon

PADAS · Oct 28, 2019 · 14af634 · 14af634
1 parent 4e708b5
commit 14af634
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/src/SchemaFields/index.js b/src/SchemaFields/index.js
@@ -100,7 +100,11 @@ const ExternalLink = (props) => {
   const { idSchema: { id }, schema: { title: label }, formData:value } = props;
 
   return <div>
-    <label htmlFor={id}>{label} <ExternalLinkIcon /></label>
+    <label className={styles.linkLabel} htmlFor={id}>{label} 
+      <a target='_blank' rel='noopener noreferrer' href={value}>
+        <ExternalLinkIcon />
+      </a>
+    </label>
     <a target='_blank' rel='noopener noreferrer' href={value}>{value}</a>
   </div>;
 };

diff --git a/src/SchemaFields/styles.module.scss b/src/SchemaFields/styles.module.scss
@@ -9,4 +9,13 @@
   [class*=react-datetime-picker__wrapper] {
     width: 100%;
   }
+}
+
+.linkLabel {
+  align-items: flex-end;
+  display: flex;
+  margin-bottom: 0.25rem;
+  a {
+    margin-left: 0.25rem;
+  }
 }