diff --git a/src/components/Navigation/Ui/ScoreRenderer.js b/src/components/Navigation/Ui/ScoreRenderer.js index 5694e9b7b..ea05232b3 100644 --- a/src/components/Navigation/Ui/ScoreRenderer.js +++ b/src/components/Navigation/Ui/ScoreRenderer.js @@ -50,6 +50,7 @@ class ScoreRenderer extends Component { return (

{label}: {score[name]} + {this.renderUnit()}

) } @@ -71,10 +72,15 @@ class ScoreRenderer extends Component {

Licensed

{this.renderScores(licensedScore, licensedToolScore)} + {this.renderScoreInfo()} ) } else { - return
{this.renderScores(get(domain, 'score'), get(domain, 'toolScore'))}
+ return ( +
+ {this.renderScores(get(domain, 'score'), get(domain, 'toolScore'))} {this.renderScoreInfo()} +
+ ) } } @@ -82,17 +88,36 @@ class ScoreRenderer extends Component { return (
-

{`Effective: ${isNumber(effective.total) ? effective.total : effective}`}

+

+ {`Effective: ${isNumber(effective.total) ? effective.total : effective}`} + {this.renderUnit()} +

{this.renderScore(effective)}
-

{`Tools: ${isNumber(tools.total) ? tools.total : tools}`}

+

+ {`Tools: ${isNumber(tools.total) ? tools.total : tools}`} + {this.renderUnit()} +

{this.renderScore(tools)}
) } + renderUnit = () => /100 + + renderScoreInfo = () => ( +
+ + Scoring Formula + +
+ ) + render() { const { domain, scores } = this.props if (!domain && !scores) return null diff --git a/src/components/Navigation/Ui/__tests__/ScoreRenderer.test.js b/src/components/Navigation/Ui/__tests__/ScoreRenderer.test.js index 49605469e..6f3728d64 100644 --- a/src/components/Navigation/Ui/__tests__/ScoreRenderer.test.js +++ b/src/components/Navigation/Ui/__tests__/ScoreRenderer.test.js @@ -48,11 +48,15 @@ describe('ScoreRenderer', () => { expect(resultScores).toEqual(
-

Effective: 0

+

+ Effective: 0/100 +

{instance.renderScore(licensedScore)}
-

Tools: 0

+

+ Tools: 0/100 +

{instance.renderScore(licensedToolScore)}
diff --git a/src/styles/_ScoreRenderer.scss b/src/styles/_ScoreRenderer.scss index c3349ed6e..b12c1550c 100644 --- a/src/styles/_ScoreRenderer.scss +++ b/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; }