Skip to content

Commit

Permalink
Fix eslint issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@arbulu89
arbulu89 committed Mar 25, 2022
1 parent 4c3495a commit 5bdd07f
Show file tree
Hide file tree
Showing 5 changed files with 221 additions and 116 deletions.
2 changes: 1 addition & 1 deletion assets/css/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* This file is for your main application CSS */
@import "./markdown.scss";
@import './markdown.scss';

@tailwind base;

Expand Down
272 changes: 182 additions & 90 deletions assets/css/markdown.scss
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,185 @@
.markdown {
*{margin:0;padding:0;}
body {
font:13.34px helvetica,arial,freesans,clean,sans-serif;
color:black;
line-height:1.4em;
background-color: #F8F8F8;
}
p {
margin:1em 0;
line-height:1.5em;
}
table {
font-size:inherit;
font:100%;
margin:1em;
}
table th{border-bottom:1px solid #bbb;padding:.2em 1em;}
table td{border-bottom:1px solid #ddd;padding:.2em 1em;}
input[type=text],input[type=password],input[type=image],textarea{font:99% helvetica,arial,freesans,sans-serif;}
select,option{padding:0 .25em;}
optgroup{margin-top:.5em;}
pre,code{font:12px Menlo, Monaco, "DejaVu Sans Mono", "Bitstream Vera Sans Mono",monospace;}
pre {
margin:1em 0;
font-size:12px;
background-color:#eee;
border:1px solid #ddd;
padding:5px;
line-height:1.5em;
color:#444;
overflow:auto;
-webkit-box-shadow:rgba(0,0,0,0.07) 0 1px 2px inset;
-webkit-border-radius:3px;
-moz-border-radius:3px;border-radius:3px;
}
pre code {
padding:0;
font-size:12px;
background-color:#eee;
border:none;
}
code {
font-size:12px;
background-color:#f8f8ff;
color:#444;
padding:0 .2em;
border:1px solid #dedede;
}
img{border:0;max-width:100%;}
abbr{border-bottom:none;}
a{color:#4183c4;text-decoration:none;}
a:hover{text-decoration:underline;}
a code,a:link code,a:visited code{color:#4183c4;}
h2,h3{margin:1em 0;}
h1,h2,h3,h4,h5,h6{border:0;}
h1{font-size:170%;border-top:4px solid #aaa;padding-top:.5em;margin-top:1.5em;}
h1:first-child{margin-top:0;padding-top:.25em;border-top:none;}
h2{font-size:150%;margin-top:.5em;border-top:2px solid #e0e0e0;padding-top:.5em;}
h3{margin-top:1em;}
hr{border:1px solid #ddd;}
ul{margin:1em 0 1em 2em;list-style-type: circle;}
ol{margin:1em 0 1em 2em;list-style-type: decimal;}
ul li,ol li{margin-top:.5em;margin-bottom:.5em;}
ul ul,ul ol,ol ol,ol ul{margin-top:0;margin-bottom:0;}
blockquote{margin:1em 0;border-left:5px solid #ddd;padding-left:.6em;color:#555;}
dt{font-weight:bold;margin-left:1em;}
dd{margin-left:2em;margin-bottom:1em;}
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
body {
* {
margin: 0;
padding: 0;
}
body {
font: 13.34px helvetica, arial, freesans, clean, sans-serif;
color: black;
line-height: 1.4em;
background-color: #f8f8f8;
}
p {
margin: 1em 0;
line-height: 1.5em;
}
table {
font-size: inherit;
font: 100%;
margin: 1em;
}
table th {
border-bottom: 1px solid #bbb;
padding: 0.2em 1em;
}
table td {
border-bottom: 1px solid #ddd;
padding: 0.2em 1em;
}
input[type='text'],
input[type='password'],
input[type='image'],
textarea {
font: 99% helvetica, arial, freesans, sans-serif;
}
select,
option {
padding: 0 0.25em;
}
optgroup {
margin-top: 0.5em;
}
pre,
code {
font: 12px Menlo, Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
monospace;
}
pre {
margin: 1em 0;
font-size: 12px;
background-color: #eee;
border: 1px solid #ddd;
padding: 5px;
line-height: 1.5em;
color: #444;
overflow: auto;
-webkit-box-shadow: rgba(0, 0, 0, 0.07) 0 1px 2px inset;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre code {
padding: 0;
font-size: 12px;
background-color: #eee;
border: none;
}
code {
font-size: 12px;
background-color: #f8f8ff;
color: #444;
padding: 0 0.2em;
border: 1px solid #dedede;
}
img {
border: 0;
max-width: 100%;
}
abbr {
border-bottom: none;
}
a {
color: #4183c4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a code,
a:link code,
a:visited code {
color: #4183c4;
}
h2,
h3 {
margin: 1em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
border: 0;
}
h1 {
font-size: 170%;
border-top: 4px solid #aaa;
padding-top: 0.5em;
margin-top: 1.5em;
}
h1:first-child {
margin-top: 0;
padding-top: 0.25em;
border-top: none;
}
h2 {
font-size: 150%;
margin-top: 0.5em;
border-top: 2px solid #e0e0e0;
padding-top: 0.5em;
}
h3 {
margin-top: 1em;
}
hr {
border: 1px solid #ddd;
}
ul {
margin: 1em 0 1em 2em;
list-style-type: circle;
}
ol {
margin: 1em 0 1em 2em;
list-style-type: decimal;
}
ul li,
ol li {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-top: 0;
margin-bottom: 0;
}
blockquote {
margin: 1em 0;
border-left: 5px solid #ddd;
padding-left: 0.6em;
color: #555;
}
dt {
font-weight: bold;
margin-left: 1em;
}
dd {
margin-left: 2em;
margin-bottom: 1em;
}
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
* {
-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
body {
width: 854px;
margin:0 auto;
}
}
@media print {
table, pre {
page-break-inside: avoid;
}
pre {
word-wrap: break-word;
}
}


margin: 0 auto;
}
}
@media print {
table,
pre {
page-break-inside: avoid;
}
pre {
word-wrap: break-word;
}
}
}
54 changes: 34 additions & 20 deletions assets/js/components/ChecksCatalog/ChecksCatalog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,31 @@ import { useSelector } from 'react-redux';

import { Disclosure, Transition } from '@headlessui/react';

import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

import ProviderSelection from './ProviderSelection';

const ChecksCatalog = () => {

const catalog = useSelector((state) => state.catalog.catalog);
const providers = catalog.map(provider => provider.provider)
const [selected, setSelected] = useState(providers[0])
const providers = catalog.map((provider) => provider.provider);
const [selected, setSelected] = useState(providers[0]);

useEffect(() => {
setSelected(providers[0])
},[providers[0]])
setSelected(providers[0]);
}, [providers[0]]);

return (
<div>
<ProviderSelection providers={providers} selected={selected} setSelected={setSelected}/>
{catalog.filter(provider => provider.provider == selected)
.map(({provider, groups}) =>
groups.map(({group, checks}) =>
<ProviderSelection
providers={providers}
selected={selected}
setSelected={setSelected}
/>
{catalog
.filter((provider) => provider.provider == selected)
.map(({ _, groups }) =>
groups.map(({ group, checks }) => (
<div
key={group.id}
className="bg-white shadow overflow-hidden sm:rounded-md mb-8"
Expand All @@ -37,27 +41,33 @@ const ChecksCatalog = () => {
{checks.map((check) => (
<li key={check.id}>
<Disclosure>
<Disclosure.Button as="div" className="flex justify-between w-full cursor-pointer hover:bg-gray-100">
<Disclosure.Button
as="div"
className="flex justify-between w-full cursor-pointer hover:bg-gray-100"
>
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center">
<p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
{check.id}
</p>
{check.premium > 0 &&
{check.premium > 0 && (
<p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Premium
</p>
}
)}
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<p className="flex items-center text-sm">
<ReactMarkdown remarkPlugins={[remarkGfm]} children={check.description} />
<ReactMarkdown
remarkPlugins={[remarkGfm]}
>
{check.description}
</ReactMarkdown>
</p>
</div>
</div>
</div>

</Disclosure.Button>
<Transition
enter="transition duration-100 ease-out"
Expand All @@ -70,7 +80,12 @@ const ChecksCatalog = () => {
<Disclosure.Panel className="border-none">
<div className="px-8 py-4 sm:px-8">
<div className="px-4 py-4 sm:px-4 bg-slate-100 rounded">
<ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]} children={check.remediation} />
<ReactMarkdown
className="markdown"
remarkPlugins={[remarkGfm]}
>
{check.remediation}
</ReactMarkdown>
</div>
</div>
</Disclosure.Panel>
Expand All @@ -80,9 +95,8 @@ const ChecksCatalog = () => {
))}
</ul>
</div>
)
)
}
))
)}
</div>
);
};
Expand Down
Loading

0 comments on commit 5bdd07f

Please sign in to comment.