design tweaks, unit test fix, linting

This commit is contained in:
Rachid Mrad 2024-09-16 18:52:51 -04:00
parent 71a69fa995
commit f4e746b4be
No known key found for this signature in database
4 changed files with 61 additions and 36 deletions

View file

@ -1,7 +1,8 @@
@use "uswds-core" as *; @use "uswds-core" as *;
@use "cisa_colors" as *; @use "cisa_colors" as *;
/* Make "placeholder" links visually obvious */ // Used on: TODO links
// Used on: NONE
a[href$="todo"]::after { a[href$="todo"]::after {
background-color: yellow; background-color: yellow;
color: color(blue-80v); color: color(blue-80v);
@ -9,10 +10,14 @@ a[href$="todo"]::after {
font-style: italic; font-style: italic;
} }
// Used on: profile
// Note: Is this needed?
a.usa-link.usa-link--always-blue { a.usa-link.usa-link--always-blue {
color: #{$dhs-blue}; color: #{$dhs-blue};
} }
// Used on: breadcrumbs
// Note: This could potentially be simplified and use usa-button--with-icon
a.breadcrumb__back { a.breadcrumb__back {
display:flex; display:flex;
align-items: center; align-items: center;
@ -28,10 +33,18 @@ a.breadcrumb__back {
} }
} }
// Remove anchor buttons' underline
a.usa-button { a.usa-button {
text-decoration: none; text-decoration: none;
} }
// Unstyled anchor buttons
a.usa-button--unstyled:visited {
color: color('primary');
}
// Disabled anchor buttons
// NOTE: Not used
a.usa-button.disabled-link { a.usa-button.disabled-link {
background-color: #ccc !important; background-color: #ccc !important;
color: #454545 !important color: #454545 !important
@ -58,6 +71,8 @@ a.usa-button--unstyled.disabled-link:focus {
text-decoration: none !important; text-decoration: none !important;
} }
// Disabled buttons
// Used on: Domain managers, disabled logo on profile
.usa-button--unstyled.disabled-button, .usa-button--unstyled.disabled-button,
.usa-button--unstyled.disabled-button:hover, .usa-button--unstyled.disabled-button:hover,
.usa-button--unstyled.disabled-button:focus { .usa-button--unstyled.disabled-button:focus {
@ -66,6 +81,16 @@ a.usa-button--unstyled.disabled-link:focus {
text-decoration: none !important; text-decoration: none !important;
} }
// Unstyled variant for reverse out?
// Used on: NONE
.usa-button--unstyled--white,
.usa-button--unstyled--white:hover,
.usa-button--unstyled--white:focus,
.usa-button--unstyled--white:active {
color: color('white');
}
// Solid anchor buttons
a.usa-button:not(.usa-button--unstyled, .usa-button--outline) { a.usa-button:not(.usa-button--unstyled, .usa-button--outline) {
color: color('white'); color: color('white');
} }
@ -76,7 +101,8 @@ a.usa-button:not(.usa-button--unstyled, .usa-button--outline):focus,
a.usa-button:not(.usa-button--unstyled, .usa-button--outline):active { a.usa-button:not(.usa-button--unstyled, .usa-button--outline):active {
color: color('white'); color: color('white');
} }
// Outline anchor buttons
a.usa-button--outline, a.usa-button--outline,
a.usa-button--outline:visited { a.usa-button--outline:visited {
box-shadow: inset 0 0 0 2px color('primary'); box-shadow: inset 0 0 0 2px color('primary');
@ -94,10 +120,22 @@ a.usa-button--outline:active {
color: color('primary-darker'); color: color('primary-darker');
} }
// Used on: Domain request withdraw confirmation
a.withdraw { a.withdraw {
background-color: color('error'); background-color: color('error');
} }
a.withdraw:hover,
a.withdraw:focus {
background-color: color('error-dark');
}
a.withdraw:active {
background-color: color('error-darker');
}
// Used on: Domain request status
//NOTE: Revise to BEM convention usa-button--outline-secondary
a.withdraw_outline, a.withdraw_outline,
a.withdraw_outline:visited { a.withdraw_outline:visited {
box-shadow: inset 0 0 0 2px color('error'); box-shadow: inset 0 0 0 2px color('error');
@ -115,19 +153,8 @@ a.withdraw_outline:active {
color: color('error-darker'); color: color('error-darker');
} }
a.withdraw:hover,
a.withdraw:focus {
background-color: color('error-dark');
}
a.withdraw:active {
background-color: color('error-darker');
}
a.usa-button--unstyled:visited { // Used on: Domain request submit
color: color('primary');
}
.dotgov-button--green { .dotgov-button--green {
background-color: color('success-dark'); background-color: color('success-dark');
@ -140,15 +167,8 @@ a.usa-button--unstyled:visited {
} }
} }
.usa-button--unstyled--white, // Cancel button
.usa-button--unstyled--white:hover, // Used on: DNSSEC main page
.usa-button--unstyled--white:focus,
.usa-button--unstyled--white:active {
color: color('white');
}
// Cancel button used on the
// DNSSEC main page
// We want to center this button on mobile // We want to center this button on mobile
// and add some extra left margin on tablet+ // and add some extra left margin on tablet+
.usa-button--cancel { .usa-button--cancel {
@ -175,6 +195,8 @@ a.usa-button--unstyled:visited {
} }
} }
// Used on: Profile page, toggleable fields
// Note: Could potentially be cleaned up by using usa-button--with-icon
// We need to deviate from some default USWDS styles here // We need to deviate from some default USWDS styles here
// in this particular case, so we have to override this. // in this particular case, so we have to override this.
.usa-form .usa-button.readonly-edit-button { .usa-form .usa-button.readonly-edit-button {
@ -186,6 +208,7 @@ a.usa-button--unstyled:visited {
} }
} }
//Used on: Domains and Requests tables
.usa-button--filter { .usa-button--filter {
width: auto; width: auto;
// For mobile stacking // For mobile stacking
@ -201,6 +224,8 @@ a.usa-button--unstyled:visited {
} }
} }
// Buttons with nested icons
// Note: Can be simplified by adding usa-link--icon to anchors in tables
.dotgov-table a, .dotgov-table a,
.usa-link--icon, .usa-link--icon,
.usa-button--with-icon { .usa-button--with-icon {
@ -211,14 +236,7 @@ a.usa-button--unstyled:visited {
align-items: center; align-items: center;
} }
.dotgov-table a
.dotgov-table a,
.usa-link--icon {
&:visited {
color: color('primary');
}
}
a .usa-icon, a .usa-icon,
.usa-button--with-icon .usa-icon { .usa-button--with-icon .usa-icon {
height: 1.3em; height: 1.3em;
@ -230,3 +248,12 @@ a .usa-icon,
height: 1.5em; height: 1.5em;
width: 1.5em; width: 1.5em;
} }
// Red, for delete buttons
// Used on: All delete buttons
// Note: Can be simplified by adding text-secondary to delete anchors in tables
button.text-secondary,
button.text-secondary:hover,
.dotgov-table a.text-secondary {
color: $theme-color-error;
}

View file

@ -33,7 +33,7 @@
<button type="submit" class="usa-button">Save</button> <button type="submit" class="usa-button">Save</button>
</form> </form>
{% elif not form.full_name.value and not form.title.value and not form.email.value %} {% elif not form.full_name.value and not form.title.value and not form.email.value %}
<h4>No senior official was found.</h4> <h4 class="text-primary-dark">No senior official was found.</h4>
{% else %} {% else %}
<div class="desktop:margin-top-4"> <div class="desktop:margin-top-4">
{% if form.full_name.value is not None %} {% if form.full_name.value is not None %}

View file

@ -1301,7 +1301,7 @@ class TestDomainOrganization(TestDomainOverview):
"""Can load domain's org name and mailing address page.""" """Can load domain's org name and mailing address page."""
page = self.client.get(reverse("domain-org-name-address", kwargs={"pk": self.domain.id})) page = self.client.get(reverse("domain-org-name-address", kwargs={"pk": self.domain.id}))
# once on the sidebar, once in the page title, once as H1 # once on the sidebar, once in the page title, once as H1
self.assertContains(page, "Organization </a>") self.assertContains(page, "/org-name-address")
self.assertContains(page, "Organization name and mailing address") self.assertContains(page, "Organization name and mailing address")
self.assertContains(page, "Organization</h1>") self.assertContains(page, "Organization</h1>")

View file

@ -340,9 +340,7 @@ class TestPortfolio(WebTest):
user=self.user, portfolio=self.portfolio, additional_permissions=portfolio_additional_permissions user=self.user, portfolio=self.portfolio, additional_permissions=portfolio_additional_permissions
) )
page = self.app.get(reverse("organization")) page = self.app.get(reverse("organization"))
self.assertContains( self.assertContains(page, "The name of your organization will be publicly listed as the domain registrant.")
page, "The name of your organization will be publicly listed as the domain registrant."
)
@less_console_noise_decorator @less_console_noise_decorator
def test_domain_org_name_address_content(self): def test_domain_org_name_address_content(self):