From d6d5a1d6b81ce81ab4f5760f50b569156fd13935 Mon Sep 17 00:00:00 2001
From: Abhigyan Ghosh <abhigyanghosh30@gmail.com>
Date: Wed, 21 Feb 2024 20:47:34 +0530
Subject: [PATCH] refactor: lint code

---
 .../react/components/Form/Feature/Feature.tsx | 378 +++++++++---------
 static/sass/styles.scss                       |  23 +-
 2 files changed, 210 insertions(+), 191 deletions(-)

diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx
index dfdc5bd05e6..ebea6d62dd9 100644
--- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx
+++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.tsx
@@ -27,15 +27,21 @@ const Feature = () => {
   return (
     <>
       <Row>
-        <Col size={6}><h2>What security coverage do you need?</h2></Col>
+        <Col size={6}>
+          <h2>What security coverage do you need?</h2>
+        </Col>
         <Col size={6}>
           <div
             className={classNames({
               row: true,
               "p-divider": true,
             })}
-            data-testid="wrapper">
-            <p>Not sure? Run <code> pro security-status</code> to find out which packages and repositories you are currently using.</p>
+            data-testid="wrapper"
+          >
+            <p>
+              Not sure? Run <code> pro security-status</code> to find out which
+              packages and repositories you are currently using.
+            </p>
             <RadioInput
               label="Pro - all repositories"
               checked={feature === Features.pro}
@@ -44,7 +50,8 @@ const Feature = () => {
               disabled={proDisabled}
             />
             <hr />
-            <RadioInput label="Infra only - limited subset"
+            <RadioInput
+              label="Infra only - limited subset"
               checked={feature === Features.infra}
               value={Features.infra}
               onChange={handleChange}
@@ -56,21 +63,33 @@ const Feature = () => {
           <hr className="is-fixed-width" />
         </Col>
       </Row>
-      <Row >
+      <Row>
         <Col size={2} emptyMedium={2} emptyLarge={2}>
           <h1>{feature === Features.pro ? "25000" : "2300"}</h1>
         </Col>
         <Col size={3}>
-          <p>Covers {feature === Features.pro ? "25000" : "2300"} packages in Ubuntu Main {feature === Features.pro ? "and Universe" : ""}</p>
+          <p>
+            Covers {feature === Features.pro ? "25000" : "2300"} packages in
+            Ubuntu Main {feature === Features.pro ? "and Universe" : ""}
+          </p>
         </Col>
         <Col size={6}>
           <div className="p-graphic-main" />
-          <div className={classNames({
-            "p-graphic-universe": feature === Features.pro,
-            "p-graphic-universe--empty": feature === Features.infra
-          })} />
-          <p className="p-text--small graphic-legend-main">LTS standard security maintenance for Ubuntu Main (initial 5 years)</p>
-          {feature === Features.pro && <p className="p-text--small graphic-legend-universe">LTS Expanded Security Maintenance (ESM) for Ubuntu Main (additional 5 years)</p>}
+          <div
+            className={classNames({
+              "p-graphic-universe": feature === Features.pro,
+              "p-graphic-universe--empty": feature === Features.infra,
+            })}
+          />
+          <p className="p-text--small graphic-legend-main">
+            LTS standard security maintenance for Ubuntu Main (initial 5 years)
+          </p>
+          {feature === Features.pro && (
+            <p className="p-text--small graphic-legend-universe">
+              LTS Expanded Security Maintenance (ESM) for Ubuntu Main
+              (additional 5 years)
+            </p>
+          )}
         </Col>
       </Row>
       <Row>
@@ -84,7 +103,7 @@ const Feature = () => {
                   width="67"
                   height="64"
                   className="p-logo-section__logo"
-                  />
+                />
               </div>
               <div className="p-logo-section__item u-sv1">
                 <img
@@ -140,171 +159,172 @@ const Feature = () => {
                   className="p-logo-section__logo"
                 />
               </div>
-              { feature===Features.pro &&
-              <>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/6cdc1a69-ansible logo.png"
-                  alt=""
-                  width="124"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/605af026-apache tomcat logo.png"
-                  alt=""
-                  width="204"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/5dbf023e-docker logo.png"
-                  alt=""
-                  width="244"
-                  height="245"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/933cc587-etcd logo.png"
-                  alt=""
-                  width="196"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/1f55452f-glusterfs logo.png"
-                  alt=""
-                  width="196"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/973c8e10-Frame 19.png"
-                  alt=""
-                  width="232"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/3ec28413-powerdns logo.png"
-                  alt=""
-                  width="252"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/7e68a46f-perl logo.png"
-                  alt=""
-                  width="252"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/35e5c439-puppet logo.png"
-                  alt=""
-                  width="236"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/2ad3b2ba-python logo.png"
-                  alt=""
-                  width="252"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/8279fc01-go logo.png"
-                  alt=""
-                  width="168"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/94f1e342-nagios logo.png"
-                  alt=""
-                  width="252"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/5b13a988-nginex logo-1.png"
-                  alt=""
-                  width="252"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/56d8741e-node-logo.png"
-                  alt=""
-                  width="196"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/fa78f5b4-openjdk logo.png"
-                  alt=""
-                  width="240"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/05c01589-redis logo.png"
-                  alt=""
-                  width="252"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/850af73c-ruby-rails logo.png"
-                  alt=""
-                  width="240"
-                  height="253"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              <div className="p-logo-section__item u-sv1">
-                <img
-                  src="https://assets.ubuntu.com/v1/93af6c88-rust logo.png"
-                  alt=""
-                  width="120"
-                  height="252"
-                  className="p-logo-section__logo"
-                />
-              </div>
-              </>}
+              {feature === Features.pro && (
+                <>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/6cdc1a69-ansible logo.png"
+                      alt=""
+                      width="124"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/605af026-apache tomcat logo.png"
+                      alt=""
+                      width="204"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/5dbf023e-docker logo.png"
+                      alt=""
+                      width="244"
+                      height="245"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/933cc587-etcd logo.png"
+                      alt=""
+                      width="196"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/1f55452f-glusterfs logo.png"
+                      alt=""
+                      width="196"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/973c8e10-Frame 19.png"
+                      alt=""
+                      width="232"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/3ec28413-powerdns logo.png"
+                      alt=""
+                      width="252"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/7e68a46f-perl logo.png"
+                      alt=""
+                      width="252"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/35e5c439-puppet logo.png"
+                      alt=""
+                      width="236"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/2ad3b2ba-python logo.png"
+                      alt=""
+                      width="252"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/8279fc01-go logo.png"
+                      alt=""
+                      width="168"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/94f1e342-nagios logo.png"
+                      alt=""
+                      width="252"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/5b13a988-nginex logo-1.png"
+                      alt=""
+                      width="252"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/56d8741e-node-logo.png"
+                      alt=""
+                      width="196"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/fa78f5b4-openjdk logo.png"
+                      alt=""
+                      width="240"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/05c01589-redis logo.png"
+                      alt=""
+                      width="252"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/850af73c-ruby-rails logo.png"
+                      alt=""
+                      width="240"
+                      height="253"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                  <div className="p-logo-section__item u-sv1">
+                    <img
+                      src="https://assets.ubuntu.com/v1/93af6c88-rust logo.png"
+                      alt=""
+                      width="120"
+                      height="252"
+                      className="p-logo-section__logo"
+                    />
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </Col>
@@ -333,4 +353,4 @@ const Feature = () => {
   );
 };
 
-export default Feature;
\ No newline at end of file
+export default Feature;
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index cc4210c1fc7..64b2cbb32f6 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -1466,20 +1466,20 @@ $color-link-dark: #69c !default;
   }
 }
 
-.p-graphic-main{
+.p-graphic-main {
   width: 10%;
-  background: #923A66;
+  background: #923a66;
   height: 48px;
   display: inline-block;
 }
 
-.p-graphic-universe{
+.p-graphic-universe {
   width: 90%;
   background: #000000;
   height: 48px;
   display: inline-block;
 }
-.p-graphic-universe--empty{
+.p-graphic-universe--empty {
   border-width: 1px;
   border-color: #757575;
   border-style: dashed;
@@ -1488,22 +1488,23 @@ $color-link-dark: #69c !default;
   display: inline-block;
 }
 
-.graphic-legend-main, .graphic-legend-universe{
-  gap:1.2rem;
+.graphic-legend-main,
+.graphic-legend-universe {
+  gap: 1.2rem;
   display: flex;
   flex-direction: row;
-  &::before{
+  &::before {
     display: inline-flex;
     height: 25px;
     width: 25px;
-    content:"";
+    content: "";
     flex-shrink: 0;
   }
 }
-.graphic-legend-main::before{
+.graphic-legend-main::before {
   background: #923a66;
 }
-.graphic-legend-universe::before{
+.graphic-legend-universe::before {
   background: #000;
 }
 
@@ -1534,5 +1535,3 @@ hr.is-extra-muted {
   background-color: rgba(0, 0, 0, 0.1);
   opacity: 0.5;
 }
-
-