Score Rendering improvements

src/components/Navigation/Ui/ScoreRenderer.js

@@ -50,6 +50,7 @@ class ScoreRenderer extends Component {
     return (
       <p style={{ color }}>
         {label}: {score[name]}
+        {this.renderUnit()}
       </p>
     )
   }
@@ -71,28 +72,56 @@ class ScoreRenderer extends Component {
 
           <h2>Licensed</h2>
           {this.renderScores(licensedScore, licensedToolScore)}
+          {this.renderScoreInfo()}
         </div>
       )
     } else {
-      return <div className="ScoreRenderer">{this.renderScores(get(domain, 'score'), get(domain, 'toolScore'))}</div>
+      return (
+        <div className="ScoreRenderer">
+          {this.renderScores(get(domain, 'score'), get(domain, 'toolScore'))} {this.renderScoreInfo()}
+        </div>
+      )
     }
   }
 
   renderScores(effective, tools) {
     return (
       <div className="ScoreRenderer__domain">
         <div className="ScoreRenderer__domain__section">
-          <h2>{`Effective: ${isNumber(effective.total) ? effective.total : effective}`}</h2>
+          <h2>
+            {`Effective: ${isNumber(effective.total) ? effective.total : effective}`}
+            {this.renderUnit()}
+          </h2>
           {this.renderScore(effective)}
         </div>
         <div className="ScoreRenderer__domain__section">
-          <h2>{`Tools: ${isNumber(tools.total) ? tools.total : tools}`}</h2>
+          <h2>
+            {`Tools: ${isNumber(tools.total) ? tools.total : tools}`}
+            {this.renderUnit()}
+          </h2>
           {this.renderScore(tools)}
         </div>
       </div>
     )
   }
 
+  renderUnit = () => (
+    <span>
+      / 100 <span className="unit">points</span>
+    </span>
+  )
+
+  renderScoreInfo = () => (
+    <div className="ScoreInfo">
+      <a
+        href="https://github.com/clearlydefined/license-score/blob/master/ClearlyLicensedMetrics.md#clearlylicensed-scoring-formula"
+        target="_blank"
+      >
+        What does these scores mean?
+      </a>
+    </div>
+  )
+
   render() {
     const { domain, scores } = this.props
     if (!domain && !scores) return null

src/components/Navigation/Ui/__tests__/ScoreRenderer.test.js

@@ -48,11 +48,21 @@ describe('ScoreRenderer', () => {
     expect(resultScores).toEqual(
       <div className="ScoreRenderer__domain">
         <div className="ScoreRenderer__domain__section">
-          <h2>Effective: 0</h2>
+          <h2>
+            Effective: 0
+            <span>
+              / 100 <span className="unit">points</span>
+            </span>
+          </h2>
           {instance.renderScore(licensedScore)}
         </div>
         <div className="ScoreRenderer__domain__section">
-          <h2>Tools: 0</h2>
+          <h2>
+            Tools: 0
+            <span>
+              / 100 <span className="unit">points</span>
+            </span>
+          </h2>
           {instance.renderScore(licensedToolScore)}
         </div>
       </div>

src/styles/_ScoreRenderer.scss

@@ -5,9 +5,18 @@
     color: white;
     font-size: 16px;
   }
+  .ScoreInfo {
+    font-size: 12px;
+    text-decoration: underline;
+    width: 100%;
+    text-align: right;
+    a {
+      color: white;
+    }
+  }
   .ScoreRenderer__domain {
     display: flex;
-    width: 300px;
+    width: 400px;
   }
   .ScoreRenderer__domain__section {
     padding: 10px;
@@ -18,7 +27,11 @@
       padding: 0;
     }
   }
+  .unit {
+    font-size: 12px;
+  }
 }
 .ant-tooltip-inner {
-  width: 300px !important;
+  background-color: rgba(0, 0, 0, 0.9);
+  width: 400px !important;
 }