Skip to content

Commit

Permalink
Merge pull request #8635 from cfpb/ans_update_ds
Browse files Browse the repository at this point in the history 
Update to DS@3.4.8 and update buttons and pagination, etc
  • Loading branch information
@anselmbradford
anselmbradford authored Nov 13, 2024
2 parents 59b109b + ea1d014 commit 2fcb407
Show file tree
Hide file tree
Showing 25 changed files with 125 additions and 144 deletions.
19 changes: 9 additions & 10 deletions cfgov/agreements/jinja2/agreements/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,26 +56,26 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
{% if page.has_previous() %}
<a class="a-btn m-pagination__btn-prev"
href="?page={{ page.previous_page_number() }}#ccagrsearch">
<span class="a-btn__icon a-btn__icon--on-left">{{ svg_icon('left') }}</span>
Previous
{{ svg_icon('left') }}
<span>Previous</span>
</a>
{% else %}
<a class="a-btn m-pagination__btn-prev" disabled>
<span class="a-btn__icon a-btn__icon--on-left">{{ svg_icon('left') }}</span>
Previous
{{ svg_icon('left') }}
<span>Previous</span>
</a>
{% endif %}

{% if page.has_next() %}
<a class="a-btn m-pagination__btn-next"
href="?page={{ page.next_page_number() }}#ccagrsearch">
Next
<span class="a-btn__icon a-btn__icon--on-right">{{ svg_icon('right') }}</span>
<span>Next</span>
{{ svg_icon('right') }}
</a>
{% else %}
<a class="a-btn m-pagination__btn-next" disabled>
Next
<span class="a-btn__icon a-btn__icon--on-right">{{ svg_icon('right') }}</span>
<span>Next</span>
{{ svg_icon('right') }}
</a>
{% endif %}

Expand All @@ -98,8 +98,7 @@ <h2>Agreements by '{{ issuer.name }}'</h2>
of {{ page.paginator.num_pages }}
</label>
<button class="a-btn
a-btn--link
m-pagination__btn-submit"
a-btn--link"
id="m-pagination__btn-submit"
type="submit">Go</button>
</form>
Expand Down
4 changes: 1 addition & 3 deletions cfgov/core/tests/test_utils.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,10 +252,8 @@ def test_link_button(self):
expected_html = (
'<a class="a-btn" '
f'href="{url}">'
"Click"
'<span class="a-btn__icon a-btn__icon--on-right">'
"<span>Click</span>"
f"{self.external_link_icon}"
"</span>"
"</a>"
)

Expand Down
13 changes: 8 additions & 5 deletions cfgov/core/utils.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,12 +180,15 @@ def add_link_markup(tag, request_path):
# add proper markup so that the link appears as a button with the icon on
# the right side.
if not spans and "a-btn" in class_attrs:
span = soup.new_tag(
"span", **{"class": "a-btn__icon a-btn__icon--on-right"}
)
span.contents.append(icon_soup)
span = soup.new_tag("span")
# Set the span's contents to whatever is in the `<a>` currently
span.contents = list(tag.contents)
# Remove that stuff from the `<a>`
tag.clear()
# Add the span back in
tag.append(span)
tag.contents.append(icon_soup)

tag.contents.append(span)
# Otherwise, either modify an existing <span> or add a new one so that
# it has the proper non-button link classes, and then add the icon after
# the span.
Expand Down
29 changes: 16 additions & 13 deletions cfgov/paying_for_college/jinja2/paying-for-college/disclosure.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,19 +180,21 @@ <h2 class="verify__prompt">
</dd>
</dl>
<div class="verify__controls">
<div class="m-btn-group">
<a href="#info-right"
class="a-btn a-btn--full-on-xs"
title="Yes, this information is correct"
data-gtm_ignore="true">
Yes, this is correct
</a>
<a href="#info-wrong"
class="a-btn a-btn--full-on-xs a-btn--link
verify__wrong-info-btn"
title="No, this is not my information"
data-gtm_ignore="true">
No, this is not my information
</a>
class="a-btn a-btn--full-on-xs"
title="Yes, this information is correct"
data-gtm_ignore="true">
Yes, this is correct
</a>
<a href="#info-wrong"
class="a-btn a-btn--full-on-xs a-btn--link
verify__wrong-info-btn"
title="No, this is not my information"
data-gtm_ignore="true">
No, this is not my information
</a>
</div>
</div>
</form>
</div>
Expand Down Expand Up @@ -1995,7 +1997,8 @@ <h2 class="step__heading">
<div class="continue__controls">
<button class="a-btn a-btn--full-on-xs a-btn--disabled"
title="Continue to Step 2" type="button" disabled>
{{ svg_icon('updating') }} Continue to Step 2
<span>Continue to Step 2</span>
{{ svg_icon('updating') }}
</button>
</div>
</div>
Expand Down
43 changes: 21 additions & 22 deletions cfgov/privacy/jinja2/privacy/disclosure-consent-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,35 +256,34 @@ <h4>Files added:</h4>
</div>

<h2>Consent for disclosure of records</h2>
<div class="o-well">
<div class="o-form__group">
<div class="m-form-field m-form-field--checkbox">
{{ form.consent }}
<label class="a-label"
for="{{ form.consent.id_for_label }}">
{{ form.consent.label }}
</label>
<div class="block block--flush-top">
<div class="o-well">
<div class="o-form__group">
<div class="m-form-field m-form-field--checkbox">
{{ form.consent }}
<label class="a-label"
for="{{ form.consent.id_for_label }}">
{{ form.consent.label }}
</label>
</div>
</div>
</div>
<div class="o-form__group">
<div class="m-form-field">
<label class="a-label a-label--heading"
for="{{ form.full_name.id_for_label }}">
{{ form.full_name.label }}
</label>
{{ form.full_name }}
<div class="o-form__group">
<div class="m-form-field">
<label class="a-label a-label--heading"
for="{{ form.full_name.id_for_label }}">
{{ form.full_name.label }}
</label>
{{ form.full_name }}
</div>
</div>
</div>
</div>


<div class="o-form__group">
<div class="m-btn-group">
<button id="submit-button" class="a-btn">
Submit
<span id="submit-icon" class="a-btn__icon a-btn__icon--on-right">
{{ svg_icon('updating') }}
</span>
<button id="submit-button" class="a-btn a-btn--hide-icon">
<span>Submit</span>
{{ svg_icon('updating') }}
</button>
<a class="a-btn a-btn--link"
href="/privacy/records-disclosure-privacy-act-statement/"
Expand Down
6 changes: 0 additions & 6 deletions cfgov/privacy/jinja2/privacy/privacy-styles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,6 @@
#file-list-wrapper{
margin-top: 3em;
}
#submit-icon{
display: none;
}
#submit-icon.submitting{
display: inline;
}
.o-well {
margin-bottom: 45px !important;
padding-bottom: 15px;
Expand Down
43 changes: 21 additions & 22 deletions cfgov/privacy/jinja2/privacy/records-access-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,35 +229,34 @@ <h4>Files added:</h4>
</div>
</div>
<h2>Consent for release of records</h2>
<div class="o-well">
<div class="o-form__group">
<div class="m-form-field m-form-field--checkbox">
{{ form.consent }}
<label class="a-label"
for="{{ form.consent.id_for_label }}">
{{ form.consent.label }}
</label>
<div class="block block--flush-top">
<div class="o-well">
<div class="o-form__group">
<div class="m-form-field m-form-field--checkbox">
{{ form.consent }}
<label class="a-label"
for="{{ form.consent.id_for_label }}">
{{ form.consent.label }}
</label>
</div>
</div>
</div>
<div class="o-form__group">
<div class="m-form-field">
<label class="a-label a-label--heading"
for="{{ form.full_name.id_for_label }}">
{{ form.full_name.label }}
</label>
{{ form.full_name }}
<div class="o-form__group">
<div class="m-form-field">
<label class="a-label a-label--heading"
for="{{ form.full_name.id_for_label }}">
{{ form.full_name.label }}
</label>
{{ form.full_name }}
</div>
</div>
</div>
</div>


<div class="o-form__group">
<div class="m-btn-group">
<button id="submit-button" class="a-btn">
Submit
<span id="submit-icon" class="a-btn__icon a-btn__icon--on-right">
{{ svg_icon('updating') }}
</span>
<button id="submit-button" class="a-btn a-btn--hide-icon">
<span>Submit</span>
{{ svg_icon('updating') }}
</button>
<a class="a-btn a-btn--link"
href="/privacy/records-disclosure-privacy-act-statement/"
Expand Down
10 changes: 6 additions & 4 deletions cfgov/retirement_api/jinja2/retirement_api/claiming.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,12 +114,14 @@ <h2 class="content-l__col content-l__col-2-3"><strong>{{STEP}} 1: </strong>{{ _(
<button
type="submit"
id="get-your-estimates"
class="get-your-estimates a-btn a-btn--disabled"
class="a-btn
a-btn--disabled
a-btn--hide-icon"
disabled>
{{ _("Get your estimates") }}
<span id="api-data-loading-indicator">
{{ svg_icon('updating') }}
<span>
{{ _("Get your estimates") }}
</span>
{{ svg_icon('updating') }}
</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion cfgov/unprocessed/apps/paying-for-college/js/disclosures/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const app = {
const region = schoolValues.BLSAverage.slice(0, 2);
$('#bls-region-select').val(region).change();
$step2.removeClass('a-btn--disabled');
$step2.find('svg').remove();
$step2.addClass('a-btn--hide-icon');
$step2.elements[0].removeAttribute('disabled');
});
}
Expand Down
10 changes: 5 additions & 5 deletions cfgov/unprocessed/apps/regulations3k/js/search.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { attach } from '@cfpb/cfpb-design-system/src/index.js';
import { behaviorAttach } from '@cfpb/cfpb-design-system/src/index.js';
import {
getSearchValues,
serializeFormFields,
Expand All @@ -18,17 +18,17 @@ const { signal } = searchRequest.signal;
*/
function init() {
// Override search form submission
attach('submit-search', 'submit', handleSubmit);
attach('change-filter', 'change', handleFilter);
behaviorAttach('submit-search', 'submit', handleSubmit);
behaviorAttach('change-filter', 'change', handleFilter);
attachHandlers();
}

/**
* Attach search results handlers
*/
function attachHandlers() {
attach('clear-filter', 'click', clearFilter);
attach('clear-all', 'click', clearFilters);
behaviorAttach('clear-filter', 'click', clearFilter);
behaviorAttach('clear-all', 'click', clearFilters);
}

/**
Expand Down
7 changes: 0 additions & 7 deletions cfgov/unprocessed/apps/retirement/css/claiming.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,13 +107,6 @@
vertical-align: bottom;
}

#api-data-loading-indicator {
display: none;
margin: 5px 0 0 5px;
font-size: 14px;
line-height: 6px;
}

#claim-canvas {
position: relative;
left: 40px;
Expand Down
6 changes: 3 additions & 3 deletions cfgov/unprocessed/apps/retirement/js/views/graph-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,8 +245,8 @@ function getYourEstimates() {
// Hide warnings, show loading indicator
$('.m-notification').slideUp();
highlightAgeFields(false);
const loadIndDom = document.querySelector('#api-data-loading-indicator');
loadIndDom.style.display = 'inline-block';
const loadIndDom = document.querySelector('#get-your-estimates');
loadIndDom.classList.remove('a-btn--hide-icon');
fetchApiData(dates.concat, salary).then((resp) => {
if (resp.error === '') {
updateDataFromApi(resp);
Expand Down Expand Up @@ -283,7 +283,7 @@ function getYourEstimates() {
highlightAgeFields(true);
}
}
$('#api-data-loading-indicator').css('display', 'none');
loadIndDom.classList.add('a-btn--hide-icon');
});
}

Expand Down
4 changes: 0 additions & 4 deletions cfgov/unprocessed/apps/tccp/css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,6 @@
}
}

.u-small-text--subtle {
color: var(--gray);
}

.o-well.o-well--speed-bump {
padding: math.div(20px, $base-font-size-px) + rem;
background-color: var(--teal-10);
Expand Down
14 changes: 7 additions & 7 deletions cfgov/unprocessed/apps/tccp/js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import tippy from 'tippy.js';
import { analyticsSendEvent } from '@cfpb/cfpb-analytics';
import { attach } from '@cfpb/cfpb-design-system/src/index.js';
import { behaviorAttach } from '@cfpb/cfpb-design-system/src/index.js';

import orderingDropdown from './ordering';
import webStorageProxy from '../../../js/modules/util/web-storage-proxy';
Expand All @@ -12,23 +12,23 @@ let tooltips;
*/
function init() {
// Attach "show more" click handler
attach('show-more', 'click', handleShowMore);
behaviorAttach('show-more', 'click', handleShowMore);
// Attach change handler to the "sort by" field
attach('ordering-change', 'change', handleOrderingChange);
behaviorAttach('ordering-change', 'change', handleOrderingChange);
// Attach landing page location field handler
attach('select-location', 'change', handleFormValidation);
behaviorAttach('select-location', 'change', handleFormValidation);
// Attach landing page form validation handler
attach('submit-situations', 'click', handleFormValidation);
behaviorAttach('submit-situations', 'click', handleFormValidation);
// Attach handler for conditional link targets
attach('ignore-link-targets', 'click', handleIgnoreLinkTargets);
behaviorAttach('ignore-link-targets', 'click', handleIgnoreLinkTargets);
// Make the breadcrumb on the details page go back to a filtered list
updateBreadcrumb();
// Move the card ordering dropdown below the expandable
orderingDropdown.move();
// Initialize any tooltips on the page
initializeTooltips();
// Reinitialize tooltips after an htmx request replaces DOM nodes
attach(document, 'htmx:afterSwap', initializeAndReport);
behaviorAttach(document, 'htmx:afterSwap', initializeAndReport);
}

/**
Expand Down
Loading

0 comments on commit 2fcb407

Please sign in to comment.