Gradpath Prototype

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/0-intro.html

@@ -1,6 +1,6 @@
 <div class="college-costs__intro-segment u-js-only">
     {% if return_user %}
-        <div class="wrapper">
+        <div class="content__wrapper">
             <div class="content__main">
                 <div class="m-notification
                             m-notification--visible">
@@ -17,7 +17,7 @@
                 {% include_block block %}
             {% endif %}
         {%- endfor %}
-        <div class="wrapper">
+        <div class="content__wrapper">
             <div class="content__main">
                {% for block in page.header -%}
                     {% if block.block_type != 'hero' %}

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/02-school-costs.html

@@ -0,0 +1,66 @@
+<section class="college-costs__tool-section college-costs__tool-section--school-costs" data-tool-section="school-costs">
+    <h2><strong>Your estimated costs for <span data-state-item="programLengthText">X</span> at <span data-school-item="school"></span>: <span data-financial-item="total_costOfProgram"></strong></h2>
+    <p>This estimate includes tuition, books, housing and is based on the most recent data from the U.S. Department of Education.</p>
+    <ul>
+        <li>Estimated time frame: <span data-state-item="programLengthText">X years</span></li>
+        <li>Estimated yearly costs: <span data-number-display="currency" data-financial-item="total_costs">$X</span></li>
+        <li>This estimate is based on the net price paid by in-state students with family incomes <span data-state-item="programIncomeText">$X</span>.</li>
+        <li>Your actual expenses will depend on your situation—any financial aid you receive, your personal budgeting, rising costs, and other factors.{{tooltip.render('Net price is the school’s cost of attendance minus any grants and scholarships received. For public schools, this is only the average costs for in-state students. See <a href="https://collegescorecard.ed.gov/data/glossary/#avg-cost">College Score Card</a> for more information.')}}</li>
+    </ul>
+
+    <div class="block block--mid comparison-section comparison-section--grad-rate">
+        <h3 class="h4"><strong><span data-school-item="school"></span>'s graduation rate</strong></h3>
+        <div class="school-results__rank-display">
+            <div class="big-percentile"><span data-school-item="rateGraduation" data-number-display="percentage"></span></div>
+            <div><span data-school-item="school"></span>'s graduation rate is <strong><span data-school-item="rateGraduation" data-number-display="percentage"></span></strong>. Students who don’t graduate are less likely to see financial gains from education and may be unable to secure a job that requires a degree.</div>
+        </div>
+        <fieldset class="o-form__fieldset school-results__cohort-buttons">
+            <legend>
+                Compare <span data-school-item="school"></span>'s rate to other <span class="community-college">2</span><span class="four-year-college">4</span> year schools that are also:
+            </legend>
+            {{
+                radio.render({
+                  'name':  "graduation-rate-meter-selector--costs-page",
+                  'label': 'In the U.S.',
+                  'value': 'cohortRankByHighestDegree',
+                  'id': 'graduation-rate_us',
+                  'class': 'm-form-field--lg-target'
+                })
+            }}
+            {{
+                radio.render({
+                  'name':  "graduation-rate-meter-selector--costs-page",
+                  'label': '<span>In <span data-school-item="stateName"></span></span>' | safe,
+                  'value': 'cohortRankByState',
+                  'id': 'graduation-rate_state',
+                  'class': 'm-form-field--lg-target'
+                })
+            }}
+            {{
+                radio.render({
+                  'name':  "graduation-rate-meter-selector--costs-page",
+                  'label': '<span data-school-item="control"></span>',
+                  'value': 'cohortRankByControl',
+                  'id': 'graduation-rate_school-type',
+                  'class': 'm-form-field--lg-target'
+                })
+            }}
+        </fieldset>
+            <div data-chart_id="grad-meter" class="college-costs__meter-graph"></div>
+            <p><span data-school-item="school"></span>'s graduation rate falls in the <strong><span data-state-item="gradMeterThird"></span></strong> of all <span data-state-item="gradMeterCohortName"></span> schools granting <span class="community-college">2</span><span class="four-year-college">4</span>-year degrees.</p>
+    </div>
+
+    <div class="college-costs__tool-section-buttons block block--mid">
+        <h3 class="up-next"><strong>Up next:</strong> <span class="up-next--desc">Add any money you expect to contribute</span></h3>
+        <div class=nav-button-container>
+            <button class="a-btn a-btn--prev btn__nav" data-destination="school-info">Previous</button>
+            <button class="a-btn a-btn--next btn__nav" data-destination="estimate-debt">Next</button>
+        </div>
+        <p>
+            <button class="a-btn a-btn--link btn__nav" data-destination="save-finish">Save and get a URL for later</button>
+        </p>
+
+
+    </div>
+
+</section>

cfgov/paying_for_college/jinja2/paying-for-college/college-cost-blocks/03-estimate-debt.html

@@ -0,0 +1,49 @@
+     {% import "v1/includes/atoms/checkbox.html" as checkbox with context %}
+
+<section class="college-costs__tool-section college-costs__tool-section--make-a-plan" data-tool-section="estimate-debt">
+    <h2 tabindex="-1">How much do you expect to contribute this year?</h2>
+
+    <div class="block block--mid financial-items">
+            {{
+                input.render({
+                    'label': 'Personal funds' ~ tooltip.render('Money you and your family have on hand to put towards school per year of your program.'),
+                    'id': 'estimate__savings',
+                    'helper_text': '<strong>per year</strong> of your program',
+                    'value': '0',
+                    'data_attribute': 'data-financial-item="savings_personal"'
+                })
+            }}
+            {{
+                input.render({  
+                    'label': 'College savings plan (like 529 plans)' ~ tooltip.render('529 college savings plans are tax-advantaged savings plans that help  families save for higher education so they can be less reliant on student loans. <a href="https://studentaid.gov/resources/tax-benefits#529-plans" target="_blank" rel="noreferrer noopener">Learn more here.</a>') | safe,
+                    'id': 'estimate__collegeSavings',
+                    'helper_text': '<strong>per year</strong> of your program',
+                    'value': '0',
+                    'data_attribute': 'data-financial-item="savings_collegeSavings"'
+                })
+            }}
+
+            {{
+                text_item.render({
+                    'label': 'Total money you expect to contribute',
+                    'value': '$0',
+                    'type': 'total',
+                    'helper_text': '',
+                    'data_attribute': 'data-financial-item="total_initialEstimateContrib"'
+                })
+            }}
+    </div>
+    <div class="college-costs__tool-section-buttons block block--mid">
+        <h3 class="up-next"><strong>Up next:</strong> <span class="up-next--desc">Get a rough estimate of how much you'll owe at graduation</span></h3>
+        <div class=nav-button-container>
+            <button class="a-btn a-btn--prev btn__nav" data-destination="school-costs">Previous</button>
+            <button class="a-btn a-btn--next btn__nav" data-destination="debt-at-grad">Next</button>
+        </div>
+
+        <p>Do you have a complete financial aid offer? <button class="a-btn a-btn--link college-costs__buttons--next btn__nav" data-destination="customize-estimate">Skip to Step 3 to customize your estimate</button></p>
+        <p>
+            <button class="a-btn a-btn--link btn__nav" data-destination="save-finish">Save and get a URL for later</button>        
+        </p>
+
+    </div>
+</section>