Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
Andir16 committed Mar 18, 2024
2 parents d485d8a + cbbccc9 commit 0734d13
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 30 deletions.
54 changes: 27 additions & 27 deletions src/partials/component.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,15 @@ const Component = (props) => {
return !!urlPattern.test(urlString);
}

useEffect(() => {
useEffect(() => {

const errorCount = calculateErrors(selectedComponent);

setErrorCountTotal( errorCount );

}, [selectedComponent]);

useEffect(() => {
useEffect(() => {

if ( type === 'sum' ) return;

Expand All @@ -64,15 +64,15 @@ const Component = (props) => {
}

if ( selectedComponent.manual_testing ) {

if ( selectedComponent.manual_testing.errors.length > 0 ) {
allErrors = allErrors.concat( selectedComponent.manual_testing.errors );
}

if ( selectedComponent.manual_testing.requirements && selectedComponent.manual_testing?.requirements.length > 0 ) {
allRequirements = allRequirements.concat( selectedComponent.manual_testing?.requirements );
}

}

setErrors( allErrors );
Expand All @@ -94,15 +94,15 @@ const Component = (props) => {
<h5 className="component-card-title">
<b>{errorCountTotal > 0 ? errorCountTotal : 'OK'}</b>
{errorCountTotal > 0 &&
<a href={selectedComponent.preview_link} target="_blank" rel="noreferrer" aria-label="view errors"><svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 24 24" fill="none" stroke="#fa2c2c" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></a>
<a href={selectedComponent.preview_link} target="_blank" rel="noreferrer" aria-label="view errors"><svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 24 24" fill="none" stroke="#fa2c2c" strokeWidth="2.5" strokeLinecap="square" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg></a>
}
</h5>

<div className="component-card-footer d-flex flex-column">
{selectedComponent.preview_link && selectedComponent.preview_link.length > 0 &&
<a href={selectedComponent.preview_link} target="_blank" rel="noreferrer" aria-label="open component example">Preview <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="round"><g fill="none" fill-rule="evenodd"><path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"/></g></svg></a>
<a href={selectedComponent.preview_link} target="_blank" rel="noreferrer" aria-label="open component example">Preview <svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2.5" strokeLinecap="square" strokeLinejoin="round"><g fill="none" fillRule="evenodd"><path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"/></g></svg></a>
}

{ framework && !component && errorCountTotal > 0 &&
<Link to={`/${framework}/${selectedComponent.slug}/`} className="btn btn-secondary">Check errors</Link>
}
Expand All @@ -124,24 +124,24 @@ const Component = (props) => {
return(
<div className="error-item border-bottom mb-4" key={i}>
<div className="row mb-2">
<div className="col-4">
<div className="col-12 col-md-4">
<span>Error Type: </span>
</div>
<div className="col-8">
<div className="col-12 col-md-8">
<span>{error.error_type}</span>
</div>
</div>
<div className="row mb-2">
<div className="col-4">
<div className="col-12 col-md-4">
<span>Error Details: </span>
</div>
<div className="col-8">
<div className="col-12 col-md-8">
<div dangerouslySetInnerHTML={{__html: error.description}}></div>
</div>

</div>
<div className="row mb-2">
<div className="col-4">
<div className="col-12 col-md-4">
<span>How to fix the error? </span>
</div>
<div className="col-8">
Expand All @@ -150,13 +150,13 @@ const Component = (props) => {
</div>
{error.wcag &&
<div className="row mb-2">
<div className="col-4">
<div className="col-12 col-md-4">
<span>WCAG Compliance information </span>
</div>
<div className="col-8">
{error.wcag.version &&
<div className="row">
<div className="col-3">
<div className="col-12 col-md-3">
<span>Version: </span>
</div>
<div className="col-9">
Expand All @@ -167,23 +167,23 @@ const Component = (props) => {

{error.wcag.success_criteria &&
<div className="row">
<div className="col-3">
<div className="col-12 col-md-3">
<span>Success Criteria </span>
</div>
<div className="col-9">
{ isValidUrl( error.wcag.success_criteria )
<div className="col-12 col-md-9">
{ isValidUrl( error.wcag.success_criteria )
? <a href={error.wcag.success_criteria} target="_blank" rel="noreferrer">{error.wcag.success_criteria}</a>
: <span>{error.wcag.success_criteria}</span>
}

</div>
</div>
}

</div>
</div>
}

</div>
);
})}
Expand Down Expand Up @@ -216,7 +216,7 @@ const Component = (props) => {
<div className="col-8">
<div dangerouslySetInnerHTML={{__html: requirement.description}}></div>
</div>

</div>
<div className="row mb-2">
<div className="col-4">
Expand Down Expand Up @@ -249,15 +249,15 @@ const Component = (props) => {
<span>Success Criteria </span>
</div>
<div className="col-9">
{ isValidUrl( requirement.wcag.success_criteria )
{ isValidUrl( requirement.wcag.success_criteria )
? <a href={requirement.wcag.success_criteria} target="_blank" rel="noreferrer">{requirement.wcag.success_criteria}</a>
: <span>{requirement.wcag.success_criteria}</span>
}

</div>
</div>
}

</div>
</div>
}
Expand All @@ -274,4 +274,4 @@ const Component = (props) => {
);
}

export default Component;
export default Component;
4 changes: 2 additions & 2 deletions src/partials/framework-overview.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ const FrameworkOverview = () => {
return (
<div className="container">
<div className="mb-4">
<Link to={`/`} style={linkStyle}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back
<Link to={`/`}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2" strokeLinecap="square" strokeLinejoin="round"><path d="M19 12H6M12 5l-7 7 7 7"/></svg> Back
</Link>
</div>
<h2>Frameworks Component Issues Overview</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/partials/single-framework.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const SingleFramework = (props) => {
<div className="col-12 my-5">
<div className="mb-4">
<Link to={`/${component ? framework : ''}`}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"><path d="M19 12H6M12 5l-7 7 7 7"/></svg> Back
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2" strokeLinecap="square" strokeLinejoin="round"><path d="M19 12H6M12 5l-7 7 7 7"/></svg> Back
</Link>
</div>
<h2>{selectedFramework.name}</h2>
Expand Down
4 changes: 4 additions & 0 deletions src/sass/common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,10 @@
}
}

.component-card-header {
font-size: 1.4rem;
}

.form-control-search {
border-color: #000;
box-shadow: 5px 5px rgba(73, 80, 87, 0.2);
Expand Down

0 comments on commit 0734d13

Please sign in to comment.