publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-16 01:21:40 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

About page sprint4 (#544)

Browse source 
* Card sections of the About page
* Create index.test.tsx
* Add test that verifies no console errors and no undefined variables.
* Added unit test with snapshot
* use global.console.error
* Fix unit test for console.error()
* Remove areasOfFocusList since it's no longer used
* CSS adjustments from PR
* Add back in AlertWrapper
* github.com link opens in new tab
* adds comment to globalize console.error check
* Refactor AboutCard
* Fixing the top grid so it resizes correctly on mobile. (e.g. using `<Grid desktop={{col: 9}}>` will expand to full width when going to mobile.
* So AboutCard can now do 'large' cards (ones at the top) and 'small' cards (ones at the bottom that are 2x per row).
* change `desktop` -> `tablet`
* `<Grid col={1}>{' '}</Grid>`

Co-authored-by: Vim <86254807+vim-usds@users.noreply.github.com>
This commit is contained in:
TomNUSDS 2021-08-19 20:41:54 -07:00 • committed by GitHub
commit a2eabda319
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 448 additions and 266 deletions
Download patch file Download diff file Expand all files Collapse all files

116
client/src/styles/global.scss
View file

@ -29,43 +29,12 @@ $theme-font-role-heading: "sans";
// Custom SASS/CSS goes here
$j40-max-width: 80ex;
$primary-color: #112f4e;
$j40-blue-background-color: #EFF6FB;
#main-content {
border-top: 0;
}
.j40-two-column {
overflow: hidden;
padding: 0;
@media (min-width: 40em) {
column-count: 2;
column-gap: 1em;
}
@media (max-width: 40em) {
column-count: 1;
column-gap: 0;
}
}
.j40-two-column > * {
display: inline-flex;
width: 90%;
padding-bottom: 1.2em; /* space between items */
padding-left: 1em;
}
.j40-two-column-icons-spacing {
padding-right: 1em;
width: 2.3em;
max-width: revert;
}
.j40-two-column-confine {
display: inline-flex;
max-width: fit-content;
}
@include at-media("mobile-lg") {
.j40-grid-container {
line-height: 1.5rem;
@ -198,6 +167,25 @@ $primary-color: #112f4e;
}
}
// we can use to to make all section headers consistent
.j40-section-sm-header {
font-weight: bold;
padding-bottom: 0.24rem;
padding-right: 0.24rem;
}
.j40-section-sm-body {
line-height: 1.5;
padding-bottom: 1.2rem;
padding-right: 1.2rem;
}
.j40-section-sm-footer {
padding-bottom: 0.5rem;
}
// This should really be part of uswds and use $theme-step-indicator-segment-color-complete
// The Progress element doesn't really support color changing the line connecting progress
// (like the Steps element does) and the checkbox.
@ -337,6 +325,7 @@ $primary-color: #112f4e;
list are not affected (e.g. <ul><li><p><ul><li>not styled</li></ul></p></li><ul>*/
.j40-process-list-wrapper > {
$j40-steps-list-color: #002D3F;
ul {
margin-top: 3rem;
margin-bottom: 1rem;
@ -424,3 +413,66 @@ ul.j40-process-nested-list {
margin-block-end: auto;
font-style: italic;
}
/* this is used by J40MainGridContainer to show a blue background */
.j40-main-grid-blue-bk {
background-color: $j40-blue-background-color;
}
/* about card - based on datasetCard... need to combine */
.j40-aboutcard-container {
.j40-aboutcard-lg-card {
margin: 1.2rem 0 3rem 0;
.j40-aboutpage-image-container {
width: 10.5rem;
padding: 1.24rem 1.24rem 0 .24rem;
}
.j40-aboutcard-image {
flex: 1 0 10%;
align-self: flex-start;
}
.j40-aboutcard-header {
}
.j40-aboutcard-body {
}
.j40-aboutcard-footer {
}
.j40-aboutcard-link {
font-weight: bold;
}
}
.j40-aboutcard-sm-card {
margin: 1.2rem 0 3rem 0;
.j40-aboutpage-image-container {
padding: 1.24rem 1.24rem 0 .24rem;
}
.j40-aboutcard-image {
width: 3rem;
}
.j40-aboutcard-header {
}
.j40-aboutcard-body {
}
.j40-aboutcard-footer {
}
.j40-aboutcard-link {
font-weight: bold;
}
}
}