From 6e36f97b1a4a723588f8ec8f6497b35c8bf8eed6 Mon Sep 17 00:00:00 2001
From: Abhigyan Ghosh <30973042+abhigyanghosh30@users.noreply.github.com>
Date: Mon, 11 Mar 2024 23:57:26 +0530
Subject: [PATCH] Wd 8751 update the pro subscribe page visuals (#13601)

* design change
---
 .../components/Form/Feature/Feature.test.tsx  |   4 +-
 .../react/components/Form/Feature/Feature.tsx | 478 +++++++++++-------
 .../subscribe/react/components/Form/Form.tsx  |   7 +-
 .../ProductSummary/ProductSummary.tsx         |   4 +-
 static/sass/_pattern_subscribe.scss           |   4 +-
 static/sass/styles.scss                       |  42 ++
 templates/advantage/subscribe/index.html      |   2 +-
 7 files changed, 342 insertions(+), 199 deletions(-)

diff --git a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx
index eeb54082cf3..c31c9736d04 100644
--- a/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx
+++ b/static/js/src/advantage/subscribe/react/components/Form/Feature/Feature.test.tsx
@@ -22,8 +22,8 @@ test("Feature section renders correctly", () => {
     </FormProvider>
   );
 
-  screen.getAllByText("Ubuntu Pro");
-  screen.getAllByText("Ubuntu Pro (Infra-only)");
+  screen.getAllByText("Pro - all repositories");
+  screen.getAllByText("Infra - only limited subset");
 });
 
 test("Feature sections disables Infra + Apps if destkop is selected", () => {
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 4b8ee020c73..f0950671bf1 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
@@ -25,206 +25,314 @@ const Feature = () => {
   const proDisabled = version === LTSVersions.trusty;
 
   return (
-    <div
-      className={classNames({
-        row: true,
-        "p-divider": true,
-      })}
-      data-testid="wrapper"
-    >
-      <Row style={{ gap: "0" }} className="u-hide--small">
-        <Col size={6} className="description-column">
-          <div className="heading">
-            <strong>
-              Security coverage for critical, high and selected medium CVEs for:
-            </strong>
-          </div>
-          <div className="main">
-            <p>
-              Over 2,300 open source deb packages in Ubuntu Main repository for
-              10 years, including:
-            </p>
-            <div className="logos-wrapper">
-              <img
-                src="https://assets.ubuntu.com/v1/3ad7e0a9-systemd-logo.png"
-                alt="Systemd"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/3cf0ba5d-rabbitmq-logo.png"
-                alt="RabbitMQ"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/9259b689-openssl-logo.png"
-                alt="OpenSSL"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/a0dac4a0-ruby-logo.png"
-                alt="Ruby"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/9cdee338-php-logo.png"
-                alt="PHP"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/8b409e96-nginex+logo.png"
-                alt="NGINX"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/24058ec5-mysql+logo.png"
-                alt="MySQL"
-              />
-            </div>
-          </div>
-          <div className="universe">
-            <p>
-              Over 23,000 open source deb packages in Ubuntu Universe repository
-              for 10 years, including:
-            </p>
-            <div className="logos-wrapper">
-              <img
-                src="https://assets.ubuntu.com/v1/6b709d7b-apache+tomcat+logo.png"
-                alt="Apache Tomcat"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/bb10115e-nagios+logo.png"
-                alt="Agios"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/0d264437-nagios+logo-1.png"
-                alt="NodeJS"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/60a15fa2-puppet-logo.png"
-                alt="Puppet"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/38530c4f-redis-logo.png"
-                alt="Redis"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/e60387dd-rust-logo.png"
-                alt="Rust"
-              />
-              <img
-                src="https://assets.ubuntu.com/v1/842e6353-wordpress-logo.png"
-                alt="Wordpress"
-              />
-            </div>
-          </div>
+    <>
+      <Row>
+        <Col size={6}>
+          <h2>What security coverage do you need?</h2>
         </Col>
-        <Col size={3}>
+        <Col size={6}>
           <div
             className={classNames({
-              "p-card--radio--column": true,
-              "is-selected": feature === Features.pro,
+              row: true,
+              "p-divider": true,
             })}
+            data-testid="wrapper"
           >
-            <label className="p-radio u-align-text--center">
-              <input
-                data-testid="pro"
-                className="p-radio__input"
-                autoComplete="off"
-                type="radio"
-                aria-labelledby={`pro-label`}
-                value={Features.pro}
-                checked={feature === Features.pro}
-                onChange={handleChange}
-                disabled={proDisabled}
-              />
-              <span className="p-radio__label" id={`pro-label`}>
-                <RadioInput
-                  labelClassName="inner-label"
-                  label={"Ubuntu Pro"}
-                  checked={feature === Features.pro}
-                  value={Features.pro}
-                  onChange={handleChange}
-                  disabled={proDisabled}
-                />
-                <div className="included">
-                  <i className="p-icon--success"></i>Included
-                </div>
-                <div className="included">
-                  <i className="p-icon--success"></i> Included
-                </div>
-              </span>
-            </label>
+            <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}
+              value={Features.pro}
+              onChange={handleChange}
+              disabled={proDisabled}
+              data-testid="pro"
+            />
+            <hr />
+            <RadioInput
+              label="Infra - only limited subset"
+              checked={feature === Features.infra}
+              value={Features.infra}
+              onChange={handleChange}
+              disabled={infraOnlyDisabled}
+              data-testid="infra-only"
+            />
           </div>
         </Col>
+        <Col size={11} emptyMedium={2} emptyLarge={2}>
+          <hr className="is-fixed-width" />
+        </Col>
+      </Row>
+      <Row>
+        <Col size={2} emptyMedium={2} emptyLarge={2}>
+          <h1>{feature === Features.pro ? "25,000" : "2,300"}</h1>
+        </Col>
         <Col size={3}>
+          <p>
+            packages in Ubuntu Main{" "}
+            {feature === Features.pro ? "and Universe" : ""}
+          </p>
+        </Col>
+        <Col size={6}>
+          <div className="p-graphic-main" />
           <div
             className={classNames({
-              "p-card--radio--column": true,
-              "is-selected": feature === Features.infra,
+              "p-graphic-universe": feature === Features.pro,
+              "p-graphic-universe--empty": feature === Features.infra,
             })}
-          >
-            <label className="p-radio u-align-text--center">
-              <input
-                data-testid="infra-only"
-                className="p-radio__input"
-                autoComplete="off"
-                type="radio"
-                aria-labelledby={`infra-label`}
-                value={Features.infra}
-                checked={feature === Features.infra}
-                onChange={handleChange}
-                disabled={infraOnlyDisabled}
-              />
-              <span className="p-radio__label" id={`infra-label`}>
-                <RadioInput
-                  labelClassName="inner-label"
-                  label={"Ubuntu Pro (Infra-only)"}
-                  checked={feature === Features.infra}
-                  value={Features.infra}
-                  onChange={handleChange}
-                  disabled={infraOnlyDisabled}
+          />
+          <p className="p-text--small graphic-legend-main">
+            10 years of security maintenance for packages in Ubuntu Main
+            repository
+          </p>
+          {feature === Features.pro && (
+            <p className="p-text--small graphic-legend-universe">
+              10 years of security maintenance for packages in Ubuntu Universe
+              repository
+            </p>
+          )}
+        </Col>
+      </Row>
+      <Row>
+        <Col size={11} emptyLarge={2}>
+          <div className="p-logo-section--dense">
+            <div className="p-logo-section__items u-sv3">
+              <div className="p-logo-section__item u-sv1">
+                <img
+                  src="https://assets.ubuntu.com/v1/3ad7e0a9-systemd-logo.png"
+                  alt="Systemd"
+                  width="67"
+                  height="64"
+                  className="p-logo-section__logo"
                 />
-                <div className="included">
-                  <i className="p-icon--success"></i>Included
-                </div>
-                <div className="included">
-                  <i className="p-icon--error"></i> Not included
-                </div>
-              </span>
-            </label>
+              </div>
+              <div className="p-logo-section__item u-sv1">
+                <img
+                  src="https://assets.ubuntu.com/v1/3b69f369-ruby-logo.png"
+                  alt=""
+                  width="104"
+                  height="252"
+                  className="p-logo-section__logo"
+                />
+              </div>
+              <div className="p-logo-section__item u-sv1">
+                <img
+                  src="https://assets.ubuntu.com/v1/bedc5d63-rabbitmq-logo.png"
+                  alt=""
+                  width="248"
+                  height="257"
+                  className="p-logo-section__logo"
+                />
+              </div>
+              <div className="p-logo-section__item u-sv1">
+                <img
+                  src="https://assets.ubuntu.com/v1/c2cd0bc4-php-logo.png"
+                  alt=""
+                  width="160"
+                  height="252"
+                  className="p-logo-section__logo"
+                />
+              </div>
+              <div className="p-logo-section__item u-sv1">
+                <img
+                  src="https://assets.ubuntu.com/v1/86fdc1d7-openssl-logo.png"
+                  alt=""
+                  width="172"
+                  height="252"
+                  className="p-logo-section__logo"
+                />
+              </div>
+              <div className="p-logo-section__item u-sv1">
+                <img
+                  src="https://assets.ubuntu.com/v1/a92957da-nginex logo.png"
+                  alt=""
+                  width="184"
+                  height="258"
+                  className="p-logo-section__logo"
+                />
+              </div>
+              <div className="p-logo-section__item u-sv1">
+                <img
+                  src="https://assets.ubuntu.com/v1/0e5bcec1-mysql logo.png"
+                  alt=""
+                  width="180"
+                  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>
       </Row>
-      <Col className="u-hide u-show--small" size={12} small={4}>
-        <RadioInput
-          label="Ubuntu Pro"
-          value={Features.pro}
-          checked={feature === Features.pro}
-          onChange={handleChange}
-          disabled={proDisabled}
-        />
-        <RadioInput
-          label="Ubuntu Pro (Infra-only)"
-          value={Features.infra}
-          checked={feature === Features.infra}
-          onChange={handleChange}
-          disabled={infraOnlyDisabled}
-        />
-      </Col>
-      <Col
-        className="p-divider__block u-align--center u-hide u-show--small"
-        size={6}
-        small={2}
-      >
-        <h4>2,300+</h4>
-        <p>packages in Ubuntu main, including:</p>
-      </Col>
-      <Col
-        className={classNames({
-          "p-divider__block u-align--center u-hide u-show--small": true,
-          "u-disable": Features.infra === feature,
-        })}
-        size={6}
-        small={2}
-      >
-        <h4>23,000+</h4>
-        <p>packages in Ubuntu universe, including:</p>
-      </Col>
-    </div>
+    </>
   );
 };
 
diff --git a/static/js/src/advantage/subscribe/react/components/Form/Form.tsx b/static/js/src/advantage/subscribe/react/components/Form/Form.tsx
index c306cd5292e..10c74035ed9 100644
--- a/static/js/src/advantage/subscribe/react/components/Form/Form.tsx
+++ b/static/js/src/advantage/subscribe/react/components/Form/Form.tsx
@@ -76,12 +76,7 @@ const Form = () => {
                 <hr />
               </Row>
               <Strip includeCol={false}>
-                <Col size={12}>
-                  <h2>What security coverage do you need?</h2>
-                </Col>
-                <Col size={12}>
-                  <Feature />
-                </Col>
+                <Feature />
               </Strip>
               <Row>
                 <hr />
diff --git a/static/js/src/advantage/subscribe/react/components/ProductSummary/ProductSummary.tsx b/static/js/src/advantage/subscribe/react/components/ProductSummary/ProductSummary.tsx
index 470c76b5f71..03aa6075dc4 100644
--- a/static/js/src/advantage/subscribe/react/components/ProductSummary/ProductSummary.tsx
+++ b/static/js/src/advantage/subscribe/react/components/ProductSummary/ProductSummary.tsx
@@ -37,7 +37,7 @@ const ProductSummary = () => {
   return (
     <>
       <section
-        className={`p-strip--light is-shallow p-shop-cart u-hide--small ${
+        className={`p-strip--light is-shallow p-shop-cart u-hide--small u-hide--medium ${
           isHidden ? "p-shop-cart--hidden" : ""
         }`}
         id="summary-section"
@@ -134,7 +134,7 @@ const ProductSummary = () => {
         </Row>
       </section>
       <section
-        className={`p-strip--light is-shallow p-shop-cart--small u-hide u-show--small ${
+        className={`p-strip--light is-shallow p-shop-cart--small u-hide u-show--medium ${
           isHidden ? "p-shop-cart--hidden" : ""
         }`}
         id="summary-section"
diff --git a/static/sass/_pattern_subscribe.scss b/static/sass/_pattern_subscribe.scss
index 5dd72cd07cd..25d2674d00e 100644
--- a/static/sass/_pattern_subscribe.scss
+++ b/static/sass/_pattern_subscribe.scss
@@ -27,11 +27,9 @@
     margin-bottom: 2rem;
 
     &::before {
-      @extend .p-heading--3;
+      @extend .p-heading--2;
 
       align-items: center;
-      border: 1px solid;
-      border-radius: 100%;
       content: counter(headings);
       display: inline-flex;
       flex-shrink: 0;
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index 14a2c2e4f7c..a8728dfbdee 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -1464,6 +1464,48 @@ $color-link-dark: #69c !default;
   }
 }
 
+.p-graphic-main {
+  background: #923a66;
+  display: inline-block;
+  height: 48px;
+  width: 10%;
+}
+
+.p-graphic-universe {
+  background: #000;
+  display: inline-block;
+  height: 48px;
+  width: 90%;
+}
+.p-graphic-universe--empty {
+  border-color: #757575;
+  border-style: dashed;
+  border-width: 1px;
+  display: inline-block;
+  height: 48px;
+  width: 90%;
+}
+
+.graphic-legend-main,
+.graphic-legend-universe {
+  display: flex;
+  flex-direction: row;
+  gap: 1.2rem;
+  &::before {
+    content: "";
+    display: inline-flex;
+    flex-shrink: 0;
+    height: 25px;
+    width: 25px;
+  }
+}
+.graphic-legend-main::before {
+  background: #923a66;
+}
+.graphic-legend-universe::before {
+  background: #000;
+}
+
 // XXX: MPT: Can be removed once this is fixed in Vanilla
 // https://github.com/canonical/vanilla-framework/pull/4950
 .desktop-footer {
diff --git a/templates/advantage/subscribe/index.html b/templates/advantage/subscribe/index.html
index 49d01149a7d..8232fc00842 100644
--- a/templates/advantage/subscribe/index.html
+++ b/templates/advantage/subscribe/index.html
@@ -6,7 +6,7 @@
 %}https://docs.google.com/document/d/1UqL8YJH9ywvOXnrt3syY0U8fiOakfAGWmLS9uerwAWk/edit{%
 endblock meta_copydoc %} {% block content %}
 
-<div id="react-root">
+<div id="react-root" class="is-paper">
   <section class="p-strip u-no-padding--top">
     <div class="row">
       <div class="col-12 u-no-margin--bottom p-card">