Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(extension): HTML Report Card Change, View menu, CSS and fonts, Filter addition, and include Hidden #2056

Merged
merged 37 commits into from
Oct 1, 2024
Merged
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
3d68dd8
added icons,changed css and bg color
nam-singh Aug 30, 2024
ebdc304
corrected import and images
nam-singh Sep 4, 2024
b678c89
changes
nam-singh Sep 4, 2024
5b82a22
correction in filter sort
nam-singh Sep 5, 2024
76e402a
seprating images
nam-singh Sep 5, 2024
9ca8a13
changes in utilimages
nam-singh Sep 5, 2024
fa3ef88
correction in expression of elements
nam-singh Sep 5, 2024
8ef1235
commenting hidden filter
nam-singh Sep 5, 2024
023a651
Merge branch 'master' into htmlReport-2019-nam
nam-singh Sep 5, 2024
de9ef8d
Update common/module/src/report/ACReporterHTML.tsx
tombrunet Sep 5, 2024
f16b80d
Rename ACReporterHTML.tsx to ACReporterHTML.ts
tombrunet Sep 5, 2024
cd24253
changes for hidden filter
nam-singh Sep 9, 2024
805a52e
Merge branch 'master' into htmlReport-2019-nam
ErickRenteria Sep 9, 2024
b4d1cee
changes for hidden icon
nam-singh Sep 10, 2024
826f984
correction in total issue
nam-singh Sep 10, 2024
2d45614
change in link text and css
nam-singh Sep 11, 2024
38f2452
css changes
nam-singh Sep 11, 2024
ae7128d
css changes
nam-singh Sep 11, 2024
e0f9216
css change
nam-singh Sep 11, 2024
90da546
Merge pull request #2027 from IBMa/htmlReport-2019-nam
ErickRenteria Sep 12, 2024
c3448a1
css changes
nam-singh Sep 12, 2024
7145590
set initial expand true and change filter order
nam-singh Sep 12, 2024
443b744
css changes
nam-singh Sep 12, 2024
cfcd21c
Merge branch 'master' into htmlReportRelease
tombrunet Sep 12, 2024
3accf0d
Merge branch 'htmlReportRelease' into htmlReport-2026-nam
tombrunet Sep 12, 2024
b20057d
Merge pull request #2034 from IBMa/htmlReport-2026-nam
ErickRenteria Sep 13, 2024
274165d
css changes
nam-singh Sep 13, 2024
033b150
css changes
nam-singh Sep 13, 2024
e376c8d
score css change
nam-singh Sep 17, 2024
e53ff56
font weight of score
nam-singh Sep 17, 2024
99f7906
change in icon order and summary card border
nam-singh Sep 18, 2024
ef87616
color change for summary card
nam-singh Sep 18, 2024
e54b485
bg color of extenstion summ & border in html report
nam-singh Sep 18, 2024
ef801b9
Merge pull request #2049 from IBMa/htmlReport-2035-nam
ErickRenteria Sep 19, 2024
150a6d8
Merge branch 'master' into htmlReportRelease
philljenkins Sep 24, 2024
b9535bd
Update guides and screenshots for new interactive HTML reports
philljenkins Sep 25, 2024
f602cf8
add single quote
philljenkins Sep 26, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -65,7 +65,7 @@

&.cds--g10 {
.status-score-tile {
background-color: #BE95FF; // purple / 40
background-color:#E8DAFF ; // purple / 20
}
}

Original file line number Diff line number Diff line change
@@ -638,6 +638,8 @@ export class DevtoolsController extends Controller {
let bgController = await getBGController();
let rulesets = await bgController.getRulesets(this.contentTabId);
let tabInfo = await bgController.getTabInfo(this.contentTabId);
let url = tabInfo.url!;
let Ignored = await bgController.getIgnore(url);
if (devtoolsState?.lastReport && rulesets) {
let reportObj: any = {
tabURL: tabInfo.url,
@@ -649,6 +651,8 @@ export class DevtoolsController extends Controller {
counts: {
"total": devtoolsState?.lastReport.counts.total
},
ignored:Ignored,

results: []
}
}
Original file line number Diff line number Diff line change
@@ -206,12 +206,12 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {

<h2 id="scan">2. Create a scan report</h2>
<p>
From a single scan, generate a report in both HTML web and Microsoft Excel XLS spreadsheet formats.
From a single scan, export a report in both HTML web and Microsoft Excel XLS spreadsheet formats.
</p>
<p>
<img
src="assets/img/2_2_ScanReport.png"
alt="open dropdown menu with focus on 'Download current scan'"
alt="'Export XLS' button highlighted"
/>
</p>
<p>
38 changes: 25 additions & 13 deletions accessibility-checker-extension/src/ts/docs/UsingACApp.tsx
Original file line number Diff line number Diff line change
@@ -488,25 +488,25 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {

<h2 id="t_single_scan_report">3.4 Create a scan report</h2>
<p>
To generate a report for a single scan in the Checker view:
You can export a report in both HTML web and Microsoft Excel XLS spreadsheet formats while in the Checker view:
</p>
<p>
<img

src="assets/img/2_2_ScanReport.png" //was 3.2Report.png
alt="an open dropdown menu with focus on 'download current scan'."
alt="'Export XLS' button highlighted"
/>
</p>
<p>
Open the 'Reports' dropdown menu and select 'Download current scan'.
Once a page has been scanned, select 'Export XLS'. Both HTML and XLS formats will be downloaded.
</p>
<p>
See <Link inline={true} size="lg" href="#the_report" title="Checker reports">Checker reports</Link> for more details.
</p>

<h2 id="t_multi_scan_report">3.5 Create a multi-scan report</h2>
<p>
To combine up to 50 multiple scans into a single report:
Combine up to 50 multiple scans into a single Microsoft Excel XLS spreadsheet report:
</p>
<p>
<img
@@ -515,7 +515,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
alt="an open dropdown menu with focus on 'Start storing scans'"
/>
</p>
<p>1. Open the 'Reports' dropdown menu and select 'Start storing scans.'</p>
<p>1. Open the 'Options' dropdown menu and select 'Start storing scans.'</p>
<p>
<img

@@ -536,7 +536,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
alt="an open dropdown menu with focus on 'download stored scans"
/>
</p> */}
<p>4. Open the 'Reports' dropdown menu and select 'View stored scans'.</p>
<p>4. Open the 'Options' dropdown menu and select 'View stored scans'.</p>
<p>
<img
src="assets/img/3_5_StoredScans.png" //was 3.3Multi4.png
@@ -554,6 +554,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
<ListItem><strong>Cancel</strong>: to uncheck the selections</ListItem>
<ListItem><strong>Return</strong>: click back (or navigate) into the Checker to continue using the functionality, such as storing more scans</ListItem>
</UnorderedList>
<p>6. Open the 'Options' dropdown menu and select 'Export stored scans'.</p>

<h2 id="focus_view">3.6 Focus view</h2>
<p>
@@ -1031,24 +1032,35 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
inline={true} size="lg">Create a multi-scan report</Link>.
</p>

<h3 id="HTML_reports">HTML reports</h3>
<h3 id="HTML_reports">HTML report</h3>
{/* <p><strong>HTML reports</strong></p> */}
<p>
<img
src="assets/img/7_1_ReportHTML.png"
alt="an HTML page for 'IBM accessibility equal access toolkit: accessibility checker report'"
alt="screenshot of a report sorted by Requirements."
/>
</p>
<p>
This interactive report is in an HTML web format that includes:
</p></p>
This interactive report is an accessible web page (single HTML file) that includes:
</p>
<OrderedList>
<ListItem>Scan date and time</ListItem>
<ListItem>URL scanned</ListItem>
<ListItem>Percentage of elements with no detected violations or items to review</ListItem>
<ListItem>Summary of test results </ListItem>
<ListItem>Issue details organized by Requirements or by Rules</ListItem>
<ListItem>Summary of test results by Violations, Needs review, and Recommendations</ListItem>
<ListItem>Issue details organizable by Elements roles, Requirements, or by Rules</ListItem>
<ListItem>‘Learn more’ link with detailed help description for each issue</ListItem>
</OrderedList>
<p>
The interactive features of the report are similar to the Summary report in the Checker view:
</p>
<OrderedList>
<ListItem>Filter the list of issues displayed by selecting either the 'Filter' dropdown or by selecting the checkboxes on the summary tiles by 'Violation', 'Needs review', and 'Recommendation'.</ListItem>
<ListItem>Display the 'Hidden' issues by selecting the 'Filter' dropdown. Note that the counts and total displayed do not include the 'Hidden' issues.</ListItem>
<ListItem>Change the organization of the issues list by selecting the dropdown to see issues by 'Elements roles', 'Requirements', or by 'Rules'. Note that each group is an accordion that can be collapsed for a condensed view.</ListItem>
<ListItem>Display the specific 'What to do' guidance for each individual issue by selecting the 'Learn more' link.</ListItem>
<ListItem>Send the single HTML file to team members or save it in project records.</ListItem>
</OrderedList>
<p>
<strong>Note</strong>: The percentages reported are based on automated tests only.
Be sure to follow all the <Link
@@ -1066,7 +1078,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
<p>
<img
src="assets/img/7_1_ReportXLS_hidden.png"
alt="an Excel spreadsheet of an accessibility scan report"
alt="an Excel spreadsheet of a scan report"
/>
</p>
<OrderedList>
4 changes: 3 additions & 1 deletion report-react/src/IReport.tsx
Original file line number Diff line number Diff line change
@@ -33,6 +33,7 @@ export interface IReport {
}
passUniqueElements?: string[]
testedUniqueElements?: number
ignored?:string[]
}

export interface IReportItem {
@@ -45,7 +46,8 @@ export interface IReportItem {
value: string[],
message: string,
snippet: string,
help: string
help: string,
isHidden?:boolean,
}

export interface ICheckpoint {
34 changes: 33 additions & 1 deletion report-react/src/SavedReport.scss
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@
.summReport, .summCard {
margin: 1rem -1rem 0rem -1rem;
padding: 1rem;

border:solid #a8a8a8;
background-color: #FFFFFF;

.title {
@@ -34,6 +34,9 @@
margin: 1rem 0rem 0rem -1rem;
}
}
.reportTreeGridEmptyText {
margin-top: 5rem;
}

.cds--modal-content {
padding: 1rem 1rem 0rem 1rem;
@@ -204,4 +207,33 @@
}
}
}
.viewMulti {
float:right;
width: 230px;
.cds--list-box {
max-height: 2rem;
}
.cds--list-box__field {
background-color: #f4f4f4;
border: solid #a8a8a8 1px;
}
}
.iconGroup{
display: flex;
gap: 0.75rem;
align-items: center;
.iconSummary{
display: flex;
align-items: center;
font-weight: 600;
}
}
.reportGroupFilter{
display:flex;
flex-direction:column ;
float: right;
align-items: flex-end;
row-gap: 0.5rem;
}

}
238 changes: 175 additions & 63 deletions report-react/src/SavedReport.tsx

Large diffs are not rendered by default.

8 changes: 2 additions & 6 deletions report-react/src/ScoreCard.scss
Original file line number Diff line number Diff line change
@@ -19,19 +19,15 @@
}

.description {
color: #565656;
@include type.type-style('helper-text-01');
}

@include breakpoint.breakpoint('sm') {
margin: 1rem 0rem 0rem -1rem;
}
}

@include breakpoint.breakpoint('sm') {
.cds--css-grid-column:nth-child(even) .scoreCard {
margin-right: -1rem;
}
}

@include breakpoint.breakpoint('md') {
.cds--css-grid-column:nth-child(even) .scoreCard {
margin-right: 0rem;
14 changes: 11 additions & 3 deletions report-react/src/ScoreCard.tsx
Original file line number Diff line number Diff line change
@@ -14,22 +14,30 @@
limitations under the License.
*****************************************************************************/
import React, { ReactNode } from "react";
import { SelectableTile } from '@carbon/react';
import "./ScoreCard.scss";

interface ScoreCardProps {
title: string
icon?: ReactNode
count?: number
children?: any
checked?:Boolean
handleCardClick?:(item:string)=>void
}

export default class ScoreCard extends React.Component<ScoreCardProps, {}> {

render() {
return <div className="scoreCard">
<div><span className="title">{this.props.title}</span><span style={{verticalAlign:"top",float:"right"}}>{this.props.icon}</span></div>
return <div >
<SelectableTile className="scoreCard"
selected={this.props.checked} onClick={() => this.props.handleCardClick && this.props.handleCardClick(this.props.title)}

>
<div><span className="title">{this.props.title}</span><span style={{verticalAlign:"middle"}}>&nbsp;{this.props.icon}</span></div>
<div className="score">{this.props.count}</div>
<div className="description">{this.props.children}</div>
</SelectableTile>
</div>
}
}
26 changes: 10 additions & 16 deletions report-react/src/SummScoreCard.scss
Original file line number Diff line number Diff line change
@@ -3,31 +3,25 @@
.summScoreCard {
margin: 1rem -1rem 0rem -1rem;
padding: 1rem;
min-height: 12rem;
border: 1px solid #8A3FFC;
background-color:#E8DAFF;

box-sizing: border-box;

border: 1px solid #9E63FB;
background-color: #E8DAFF;

.scLeft {
flex: 0 0 51.25%;
max-width: 51.25%;

@media (min-width: 66rem) {
flex: 0 0 33.75%;
max-width: 33.75%;
}
.summaryTitleDetail {
@include type.type-style('helper-text-01');
font-size: 14px;
}

.title {
@include type.type-style('heading-02');
}

.score {
// @include type.type-style('display-03');
font-size: 96px;
font-size: 54px;
font-weight: 400;
margin: 1rem 0rem;
}

@media (min-width: 42rem) {
margin: 1rem 0rem 0rem -1rem;
}
6 changes: 3 additions & 3 deletions report-react/src/SummScoreCard.tsx
Original file line number Diff line number Diff line change
@@ -65,13 +65,13 @@ export default class SummScoreCard extends React.Component<SummScoreCardProps, {
let summaryNumbers = this.calcSummary(this.props.report);
let currentStatus = summaryNumbers[3].toFixed(0);

return <div className="scoreCard" style={{border: "1px solid #9E63FB", backgroundColor:'#E8DAFF'}}>
return <div className="summScoreCard" >

<Grid>
<Column sm={2} md={4} lg={4} className="scLeft">
<h2 className="title">{this.props.title}</h2>
<div className="score">{currentStatus}%</div>
<div>Percentage of elements with no detected violations or items to review</div>
<div className="summaryTitleDetail">Percentage of elements with no detected violations or items to review</div>
</Column>
<Column sm={2} md={4} lg={6}>
<div>
@@ -90,7 +90,7 @@ export default class SummScoreCard extends React.Component<SummScoreCardProps, {
>IBM Equal Access Toolkit</a> to guide you.
</div>
<div style={{paddingTop:"36px"}}>More resources:</div>
<div><a className="link" href="https://www.ibm.com/able/toolkit/develop/overview/#unit-testing" target="_blank" rel="noopener noreferrer" style={{color:'#002D9C'}}>Quick unit test for accessibility</a></div>
<div><a className="link" href="https://www.ibm.com/able/toolkit/develop/overview/#unit-testing" target="_blank" rel="noopener noreferrer" style={{color:'#002D9C'}}>Quick unit test for developers</a></div>
<div><a className="link" href="https://www.ibm.com/able/toolkit/verify/overview"target="_blank" rel="noopener noreferrer" style={{color:'#002D9C'}}>Full accessibility test process</a></div>
</Column>
</Grid>
12 changes: 10 additions & 2 deletions report-react/src/report/ReportElements.tsx
Original file line number Diff line number Diff line change
@@ -20,6 +20,8 @@ import "./report.scss";
import { IReport, IReportItem, valueMap } from "../IReport";
import ReportRow from "./ReportRow";
import { Grid, Column } from "@carbon/react";
import { UtilIssue } from "../util/UtilIssue";
import { IssueValue } from "../util/UtilIssueReact";

interface IReportElementsState {
}
@@ -49,7 +51,7 @@ export default class ReportElements extends React.Component<IReportElementsProps
let thisGroup = groupMap[item.path.aria];
if (!thisGroup) {
thisGroup = {
title: item.path.aria,
title: (item.path.aria),
counts: {},
items: []
}
@@ -59,15 +61,21 @@ export default class ReportElements extends React.Component<IReportElementsProps
thisGroup.items.push(item);
let val = valueMap[item.value[0]][item.value[1]] || item.value[0] + "_" + item.value[1];
thisGroup.counts[val] = (thisGroup.counts[val] || 0) + 1;

}
groups.sort((groupA, groupB) => groupA.title.localeCompare(groupB.title));
for (const group of groups) {
group.items.sort((a, b) => UtilIssue.valueToOrder(a.value as IssueValue)-UtilIssue.valueToOrder(b.value as IssueValue));
}


return <div className="report" role="rowgroup">
<Grid className="reportHeader">
<Column sm={1} md={2} lg={4}>
<div className="label" style={{ marginLeft: "2rem" }}>Issues</div>
</Column>
<Column sm={3} md={6} lg={8}>
<div className="label">Element</div>
<div className="label">Element Roles</div>
</Column>
</Grid>
{groups.map(group => {
63 changes: 16 additions & 47 deletions report-react/src/report/ReportRow.tsx
Original file line number Diff line number Diff line change
@@ -17,44 +17,12 @@
import React, { RefObject } from "react";

import { IReportItem, valueMap, ICheckpoint, IReport } from "../IReport";

import Popup from "@carbon/icons-react/lib/Popup";
import ChevronUp from "@carbon/icons-react/lib/ChevronUp";
import ChevronDown from "@carbon/icons-react/lib/ChevronDown";
import { Grid, Column } from "@carbon/react";
import { Violation16,NeedsReview16,Recommendation16,ViewOff16} from "../util/UtilImages";


const Violation16 = <svg version="1.1" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16">
<rect style={{ fill: "none" }} width="16" height="16" />
<path style={{ fill: "#A2191F" }} d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z" />
<path style={{ fill: "#FFFFFF", fillOpacity: 0 }} d="M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z" />
</svg>

const NeedsReview16 = <svg version="1.1" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16">
<rect style={{ fill: "none" }} width="16" height="16" />
<path style={{ fill: "#F1C21B" }} d="M14.9,13.3l-6.5-12C8.3,1,8,0.9,7.8,1.1c-0.1,0-0.2,0.1-0.2,0.2l-6.5,12c-0.1,0.1-0.1,0.3,0,0.5
C1.2,13.9,1.3,14,1.5,14h13c0.2,0,0.3-0.1,0.4-0.2C15,13.6,15,13.4,14.9,13.3z M7.4,4h1.1v5H7.4V4z M8,11.8c-0.4,0-0.8-0.4-0.8-0.8
s0.4-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,11.8,8,11.8z"/>
<g>
<g>
<g>
<rect x="7.45" y="4" width="1.1" height="5" />
</g>
</g>
<g>
<g>
<circle cx="8" cy="11" r="0.8" />
</g>
</g>
</g>
</svg>

const Recommendation16 = <svg version="1.1" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16">
<rect style={{ fill: "none" }} width="16" height="16" />
<path style={{ fill: "#0043CE" }} d="M14,15H2c-0.6,0-1-0.4-1-1V2c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1v12C15,14.6,14.6,15,14,15z" />
<text transform="matrix(1 0 0 1 5.9528 12.5044)" style={{ fill: "#FFFFFF", fontFamily: "IBMPlexSerif", fontSize: "12.9996px" }}>i</text>
</svg>

export interface IReportRowGroup {
checkpoint?: ICheckpoint,
@@ -79,7 +47,7 @@ export default class ReportRow extends React.Component<IReportRowProps, IReportR
scrollRef: RefObject<HTMLDivElement> = React.createRef();

state: IReportRowState = {
expanded: false,
expanded: true,
lastTimestamp: this.props.report.timestamp,
scrollTo: false
};
@@ -141,34 +109,35 @@ export default class ReportRow extends React.Component<IReportRowProps, IReportR
}
return <div className="itemRow">
<Grid role="row" aria-expanded={open} className="itemHeader" onClick={this.toggleRow.bind(this)} tabIndex={0} onKeyDown={this.onKeyDown.bind(this)}>
<Column sm={1} md={2} lg={4} role="cell">
<Column sm={2} md={2} lg={4} role="cell" >
{this.state.scrollTo && <div ref={this.scrollRef}></div>}
<span style={{ paddingRight: "16px" }}>{open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}</span>
{vCount > 0 && <><span style={{ verticalAlign: "text-top", lineHeight: "8px" }}>{vCount}</span> <span>{Violation16}&nbsp;</span></>}
{nrCount > 0 && <><span style={{ verticalAlign: "text-top", lineHeight: "8px" }}>{nrCount}</span> <span>{NeedsReview16}&nbsp;</span></>}
{rCount > 0 && <><span style={{ verticalAlign: "text-top", lineHeight: "8px" }}>{rCount}</span> {Recommendation16}</>}
<span style={{ paddingRight: "14px" }}>{open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}</span>
{vCount > 0 && <> <span>{Violation16}</span><span style={{verticalAlign: "text-top",lineHeight: "8px", margin: ".25rem" }}>{vCount}</span></>}
{nrCount > 0 && <> <span>{NeedsReview16}</span><span style={{verticalAlign: "text-top", lineHeight: "8px" , margin: ".25rem" }}>{nrCount}</span></>}
{rCount > 0 && <><span>&nbsp;{Recommendation16}</span><span style={{ verticalAlign: "text-top", lineHeight: "8px", margin: ".25rem" }}>{rCount}</span> </>}
</Column>
<Column sm={3} md={6} lg={8} role="cell">
<span >{group.title.length === 0 ? "Page" : group.title}</span>
<Column sm={2} md={6} lg={8} role="cell">
<span style={{wordWrap:"break-word"}}>{group.title.length === 0 ? "Page" : group.title}</span>
</Column>
</Grid>
{!open && <Grid className="itemDetail" />}
{open && <React.Fragment>
{group.items.map(item => {
let val = valueMap[item.value[0]][item.value[1]];
return (<Grid className={"itemDetail"}>
<Column sm={1} md={2} lg={4} role="cell"></Column>
<Column sm={3} md={6} lg={8} role="cell">
<div className="itemMessage">
return (
<Grid className={"itemDetail"} fullWidth>
<Column sm={4} md={8} lg={16} role="cell">
<div className="itemMessage" style={{ width: "100%" }}>
{val === "Violation" && <span>{Violation16}</span>}
{val === "Needs review" && <span>{NeedsReview16}</span>}
{val === "Recommendation" && <span>{Recommendation16}</span>}
{item.isHidden===true && <span>{ViewOff16}</span>}
<span style={{ fontSize: "12px" }}>{item.message}</span>
<span> </span><a className="helpLink" href="/#" onClick={(evt) => {
this.props.selectItem(item);
evt.preventDefault();
return false;
}}>Learn more <Popup size={16} /></a>
}}>Learn more </a>
</div>
</Column>
</Grid>)
5 changes: 5 additions & 0 deletions report-react/src/report/ReportRules.tsx
Original file line number Diff line number Diff line change
@@ -19,6 +19,8 @@ import React from "react";
import { IReport, IReportItem, valueMap } from "../IReport";
import ReportRow from "./ReportRow";
import { Grid, Column } from "@carbon/react";
import { UtilIssue } from "../util/UtilIssue";
import { IssueValue } from "../util/UtilIssueReact";

interface IReportRulesState {
}
@@ -62,6 +64,9 @@ export default class ReportRules extends React.Component<IReportRulesProps, IRep
for (const ruleId in groupMap) {
groups.push(groupMap[ruleId]);
}
for (const group of groups) {
group.items.sort((a, b) => UtilIssue.valueToOrder(a.value as IssueValue)-UtilIssue.valueToOrder(b.value as IssueValue));
}

return <div className="report" role="rowgroup">
<Grid className="reportHeader">
19 changes: 11 additions & 8 deletions report-react/src/report/report.scss
Original file line number Diff line number Diff line change
@@ -26,14 +26,16 @@
padding: 0rem;

.reportHeader {
height: 2rem;
background-color: #e0e0e0;
background-color: #f4f4f4;
color: #161616;

border-top: solid #a8a8a8;
border-bottom: solid #a8a8a8;
margin: 0rem -1rem;
padding: 0.5rem 0rem .5rem 1rem;
height: 100%;
.label {
@include type.type-style('heading-01');
font-size: 12px;
padding: .4375rem 0 0;
}
}

@@ -42,6 +44,9 @@
min-height: 32px;
padding: 10px 0px 0px;
}
.itemHeader[aria-expanded="true"]{
border-bottom: solid #888888 1px;
}

.itemDetail {
border-bottom: solid #888888 1px;
@@ -51,9 +56,8 @@
}

.itemMessage {
margin-left: 5px;
text-indent: -22px;

margin-left: 1rem;

img, svg {
margin-right: 6px;
vertical-align: middle;
@@ -68,7 +72,6 @@
}

.helpLink {
color: #000000;
font-size: 12px;
text-decoration: underline;
svg {
72 changes: 72 additions & 0 deletions report-react/src/util/UtilImages.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
/******************************************************************************
Copyright:: 2020- IBM, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*****************************************************************************/


//svg images for report
export const Violation16 = <svg version="1.1" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16">
<rect style={{ fill: "none" }} width="16" height="16" />
<path style={{ fill: "#da1e28" }} d="M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z" />
<path style={{ fill: "#FFFFFF", fillOpacity: 1 }} d="M10.7,11.5L4.5,5.3l0.8-0.8l6.2,6.2L10.7,11.5z" />
</svg>

export const NeedsReview16 = <svg version="1.1" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16">
<rect style={{ fill: "none" }} width="16" height="16" />
<path style={{ fill: "#F1C21B" }} d="M14.9,13.3l-6.5-12C8.3,1,8,0.9,7.8,1.1c-0.1,0-0.2,0.1-0.2,0.2l-6.5,12c-0.1,0.1-0.1,0.3,0,0.5
C1.2,13.9,1.3,14,1.5,14h13c0.2,0,0.3-0.1,0.4-0.2C15,13.6,15,13.4,14.9,13.3z M7.4,4h1.1v5H7.4V4z M8,11.8c-0.4,0-0.8-0.4-0.8-0.8
s0.4-0.8,0.8-0.8c0.4,0,0.8,0.4,0.8,0.8S8.4,11.8,8,11.8z"/>
<g>
<g>
<g>
<rect x="7.45" y="4" width="1.1" height="5" />
</g>
</g>
<g>
<g>
<circle cx="8" cy="11" r="0.8" />
</g>
</g>
</g>
</svg>

export const Recommendation16 = <svg version="1.1" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16">
<rect style={{ fill: "none" }} width="16" height="16" />
<path style={{ fill: "#0043CE" }} d="M14,15H2c-0.6,0-1-0.4-1-1V2c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1v12C15,14.6,14.6,15,14,15z" />
<text transform="matrix(1 0 0 1 5.9528 12.5044)" style={{ fill: "#FFFFFF", fontFamily: "IBMPlexSerif", fontSize: "12.9996px" }}>i</text>
</svg>

export const ViewOn16=<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect
width="16"
height="16"
transform="translate(0 0.511719)"
fill="black"
fillOpacity="0.01"
style={{ mixBlendMode: 'multiply' }}
/>
<path d="M2.62 11.7667L3.335 11.0567C2.55211 10.3538 1.93699 9.48406 1.535 8.51172C2.55 5.97672 5.35 4.01172 8 4.01172C8.68195 4.02072 9.35772 4.14236 10 4.37172L10.775 3.59172C9.89633 3.22038 8.95385 3.02339 8 3.01172C6.37026 3.07301 4.79419 3.6105 3.4666 4.55776C2.13901 5.50503 1.11808 6.82054 0.530001 8.34172C0.490285 8.45157 0.490285 8.57187 0.530001 8.68172C0.974124 9.86023 1.69021 10.9172 2.62 11.7667Z" fill="#FFFFFF"/>
<path d="M6 8.37672C6.03477 7.89758 6.24085 7.44696 6.58054 7.10726C6.92024 6.76756 7.37086 6.56149 7.85 6.52672L8.755 5.61672C8.24788 5.48319 7.71462 5.48493 7.20838 5.62175C6.70214 5.75857 6.24061 6.02571 5.8698 6.39652C5.49899 6.76733 5.23186 7.22886 5.09503 7.7351C4.95821 8.24134 4.95647 8.7746 5.09 9.28172L6 8.37672Z" fill="#FFFFFF"/>
<path d="M15.47 8.34172C14.8967 6.84832 13.899 5.55523 12.6 4.62172L15 2.21672L14.295 1.51172L1 14.8067L1.705 15.5117L4.255 12.9617C5.39194 13.6287 6.68202 13.9904 8 14.0117C9.62974 13.9504 11.2058 13.4129 12.5334 12.4657C13.861 11.5184 14.8819 10.2029 15.47 8.68172C15.5097 8.57187 15.5097 8.45157 15.47 8.34172ZM10 8.51172C9.9979 8.86177 9.90395 9.20514 9.72755 9.5075C9.55116 9.80987 9.29849 10.0606 8.99481 10.2347C8.69112 10.4089 8.34705 10.5002 7.997 10.4997C7.64694 10.4992 7.30316 10.4068 7 10.2317L9.72 7.51172C9.89975 7.81458 9.99634 8.15955 10 8.51172ZM8 13.0117C6.95103 12.9934 5.92195 12.7224 5 12.2217L6.27 10.9517C6.84767 11.3525 7.54777 11.5377 8.24807 11.475C8.94836 11.4122 9.60437 11.1054 10.1015 10.6083C10.5987 10.1111 10.9055 9.45508 10.9682 8.75478C11.031 8.05449 10.8458 7.35439 10.445 6.77672L11.88 5.34172C13.0273 6.12921 13.9245 7.22943 14.465 8.51172C13.45 11.0467 10.65 13.0117 8 13.0117Z" fill="#FFFFFF"/>
</svg>

export const ViewOff16=<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="16" height="16" transform="translate(0 0.511719)" fill="white" fill-opacity="0.01" style={{ mixBlendMode: 'multiply' }}/>
<path d="M2.62 11.7667L3.335 11.0567C2.55211 10.3538 1.93699 9.48406 1.535 8.51172C2.55 5.97672 5.35 4.01172 8 4.01172C8.68195 4.02072 9.35772 4.14236 10 4.37172L10.775 3.59172C9.89633 3.22038 8.95385 3.02339 8 3.01172C6.37026 3.07301 4.79419 3.6105 3.4666 4.55776C2.13901 5.50503 1.11808 6.82054 0.530001 8.34172C0.490285 8.45157 0.490285 8.57187 0.530001 8.68172C0.974124 9.86023 1.69021 10.9172 2.62 11.7667Z" fill="#161616"/>
<path d="M6 8.37672C6.03477 7.89758 6.24085 7.44696 6.58054 7.10726C6.92024 6.76756 7.37086 6.56149 7.85 6.52672L8.755 5.61672C8.24788 5.48319 7.71462 5.48493 7.20838 5.62175C6.70214 5.75857 6.24061 6.02571 5.8698 6.39652C5.49899 6.76733 5.23186 7.22886 5.09503 7.7351C4.95821 8.24134 4.95647 8.7746 5.09 9.28172L6 8.37672Z" fill="#161616"/>
<path d="M15.47 8.34172C14.8967 6.84832 13.899 5.55523 12.6 4.62172L15 2.21672L14.295 1.51172L1 14.8067L1.705 15.5117L4.255 12.9617C5.39194 13.6287 6.68202 13.9904 8 14.0117C9.62974 13.9504 11.2058 13.4129 12.5334 12.4657C13.861 11.5184 14.8819 10.2029 15.47 8.68172C15.5097 8.57187 15.5097 8.45157 15.47 8.34172ZM10 8.51172C9.9979 8.86177 9.90395 9.20514 9.72755 9.5075C9.55116 9.80987 9.29849 10.0606 8.99481 10.2347C8.69112 10.4089 8.34705 10.5002 7.997 10.4997C7.64694 10.4992 7.30316 10.4068 7 10.2317L9.72 7.51172C9.89975 7.81458 9.99634 8.15955 10 8.51172ZM8 13.0117C6.95103 12.9934 5.92195 12.7224 5 12.2217L6.27 10.9517C6.84767 11.3525 7.54777 11.5377 8.24807 11.475C8.94836 11.4122 9.60437 11.1054 10.1015 10.6083C10.5987 10.1111 10.9055 9.45508 10.9682 8.75478C11.031 8.05449 10.8458 7.35439 10.445 6.77672L11.88 5.34172C13.0273 6.12921 13.9245 7.22943 14.465 8.51172C13.45 11.0467 10.65 13.0117 8 13.0117Z" fill="#161616"/>
</svg>

63 changes: 63 additions & 0 deletions report-react/src/util/UtilIssue.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/******************************************************************************
Copyright:: 2020- IBM, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*****************************************************************************/
import { IssueValue } from './UtilIssueReact';

export class UtilIssue {
private static valueMap: { [key: string]: { [key2: string]: string } } = {
"VIOLATION": {
"POTENTIAL": "Needs review",
"FAIL": "Violation",
"PASS": "Pass",
"MANUAL": "Needs review"
},
"RECOMMENDATION": {
"POTENTIAL": "Recommendation",
"FAIL": "Recommendation",
"PASS": "Pass",
"MANUAL": "Recommendation"
},
"INFORMATION": {
"POTENTIAL": "Needs review",
"FAIL": "Violation",
"PASS": "Pass",
"MANUAL": "Recommendation"
}
};

public static valueToStringSingular(value: IssueValue) : string {
return UtilIssue.valueMap[value[0]][value[1]];
}

public static valueToStringPlural(value: IssueValue) : string {
let sing = UtilIssue.valueToStringSingular(value);
return this.singToStringPlural(sing);
}

public static singToStringPlural(sing: string) : string {
if (sing === "Violation") return "Violations";
if (sing === "Needs review") return "Needs review";
if (sing === "Recommendation") return "Recommendations";
return sing;
}

public static valueToOrder(value: IssueValue) : number {
let sing = UtilIssue.valueToStringSingular(value);
if (sing === "Violation") return 0;
if (sing === "Needs review") return 1;
if (sing === "Recommendation") return 2;
return 3;
}
}
50 changes: 50 additions & 0 deletions report-react/src/util/UtilIssueReact.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/******************************************************************************
Copyright:: 2020- IBM, Inc
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*****************************************************************************/
import * as React from 'react';
import { UtilIssue } from './UtilIssue';
import { Violation16,NeedsReview16,Recommendation16,ViewOff16,ViewOn16 } from './UtilImages';

export type IssueValue = [
"VIOLATION" | "RECOMMENDATION"| "INFORMATION",
"FAIL" | "POTENTIAL" | "MANUAL" | "PASS"
];



export class UtilIssueReact {
public static valueToIcon(value: IssueValue, className?: string) : React.ReactNode {
let sing = UtilIssue.valueToStringSingular(value);
return this.valueSingToIcon(sing, className);
}

public static valueSingToIcon(sing: string, className?: string) : React.ReactNode {
if (sing === "Violation") {
return <>{Violation16}</>
} else if (sing === "Needs review") {
return <>{NeedsReview16}</>
} else if (sing === "Recommendation") {
return <>{Recommendation16}</>
} else if (sing === "ViewOff") {
return <>{ViewOff16}</>
} else if (sing === "ViewOn") {
return <>{ViewOn16}</>
} else if (sing === "Pass") {
return <></>
} else {
return <></>;
}
}
}