+
@@ -26,9 +26,9 @@ const Chevron = ({ heading, description }) => {
)
}
-Chevron.propTypes = {
+Banner.propTypes = {
heading: PropTypes.string,
description: PropTypes.string,
}
-export default Chevron
+export default Banner
diff --git a/benefit-finder/src/shared/components/Chevron/index.stories.jsx b/benefit-finder/src/shared/components/Banner/index.stories.jsx
similarity index 80%
rename from benefit-finder/src/shared/components/Chevron/index.stories.jsx
rename to benefit-finder/src/shared/components/Banner/index.stories.jsx
index d69595f06..b9859f67b 100644
--- a/benefit-finder/src/shared/components/Chevron/index.stories.jsx
+++ b/benefit-finder/src/shared/components/Banner/index.stories.jsx
@@ -1,7 +1,7 @@
-import Chevron from './index.jsx'
+import Banner from './index.jsx'
export default {
- component: Chevron,
+ component: Banner,
parameters: {
layout: 'fullscreen',
},
diff --git a/benefit-finder/src/shared/components/BenefitAccordionGroup/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/BenefitAccordionGroup/__tests__/__snapshots__/index.spec.jsx.snap
index a2b38309a..0ca359740 100644
--- a/benefit-finder/src/shared/components/BenefitAccordionGroup/__tests__/__snapshots__/index.spec.jsx.snap
+++ b/benefit-finder/src/shared/components/BenefitAccordionGroup/__tests__/__snapshots__/index.spec.jsx.snap
@@ -133,6 +133,14 @@ exports[`BenefitAccordionGroup > renders a match to the previous snapshot 1`] =
You paid for funeral or burial expenses and were not reimbursed
+
= $desktop) {
+ margin-bottom: rem(24px);
+ }
}
}
@@ -24,15 +29,19 @@
.bf-usa-accordion-group-cta-wrapper {
display: flex;
justify-content: center;
- margin-top: space.$space-lg;
+ margin-top: rem(18px);
+
+ @media (width >= $desktop) {
+ margin-top: rem(32px);
+ }
.bf-usa-link {
- margin-bottom: space.$space-md;
+ margin-bottom: rem(16px);
}
}
}
.bf-expand-all {
- margin-bottom: space.$space-lg;
+ margin-bottom: rem(32px);
}
}
diff --git a/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx b/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx
index 6814b7355..071fd08cc 100644
--- a/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx
+++ b/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx
@@ -5,6 +5,7 @@ import {
Button,
Heading,
KeyElegibilityCrieriaList,
+ StepBackButton,
ObfuscatedLink,
} from '@components'
import './_index.scss'
@@ -18,6 +19,7 @@ import './_index.scss'
* @param {bool} isExpandAll - determines if all the accordions in the group are expanded
* @param {function} setExpandAll - inherited useState function
* @param {function} notEligibleView - inherited bolean state
+ * @param {object} returnToForm - inherited object for more info cta
* @param {object} ui - inherited ui content
* @return {html} returns html
*/
@@ -28,6 +30,7 @@ const BenefitAccordionGroup = ({
isExpandAll,
setExpandAll,
notEligibleView,
+ returnToForm,
ui,
}) => {
const { benefitAccordion, benefitAccordionGroup } = ui
@@ -37,6 +40,7 @@ const BenefitAccordionGroup = ({
visitLabel,
unmetLabel,
sourceIsEnglish,
+ backcta,
} = benefitAccordion
const { closedState, openState } = benefitAccordionGroup
const { benefitLink, openAllBenefitAccordions } =
@@ -151,6 +155,9 @@ const BenefitAccordionGroup = ({
)
})}
+ returnToForm()}>
+ {backcta?.link}
+
)
}
@@ -236,7 +243,9 @@ const BenefitAccordionGroup = ({
)}
{moreInformationNeeded.length > 0 && (
-
+ <>
+
+
)}
= $desktop) {
- .bf-chevron {
- padding-bottom: space.$space-xl;
- margin-bottom: space.$space-xl;
- }
-
- .bf-chevron::before {
- display: none;
- }
-}
diff --git a/benefit-finder/src/shared/components/Date/_index.scss b/benefit-finder/src/shared/components/Date/_index.scss
index 2e65ceb48..db5112da8 100644
--- a/benefit-finder/src/shared/components/Date/_index.scss
+++ b/benefit-finder/src/shared/components/Date/_index.scss
@@ -1,5 +1,4 @@
@use '@styles/colors' as color;
-@use '@styles/space' as space;
@use '@styles/breakpoints' as *;
@use '@styles/mixins' as *;
@use '@styles/functions' as *;
@@ -23,17 +22,17 @@
.bf-usa-form-group--month {
width: rem(242px);
- margin-top: space.$space-sm;
+ margin-top: rem(8px);
}
.bf-usa-form-group--day {
width: rem(64px);
- margin-top: space.$space-sm;
+ margin-top: rem(8px);
}
.bf-usa-form-group--year {
width: rem(95px);
- margin-top: space.$space-sm;
+ margin-top: rem(8px);
}
@media (width >= $desktop) {
diff --git a/benefit-finder/src/shared/components/Fieldset/_index.scss b/benefit-finder/src/shared/components/Fieldset/_index.scss
index fb2f1353b..320fe8932 100644
--- a/benefit-finder/src/shared/components/Fieldset/_index.scss
+++ b/benefit-finder/src/shared/components/Fieldset/_index.scss
@@ -1,6 +1,6 @@
-@use '@styles/space' as space;
@use '@styles/colors' as color;
@use '@styles/mixins' as *;
+@use '@styles/functions' as *;
.bf-usa-fieldset {
position: relative;
@@ -12,30 +12,30 @@
}
.bf-error-detail {
- margin: 0 0 space.$space-sm;
+ margin: 0 0 rem(8px);
color: color.$alert-red;
font-weight: 600;
}
- // list errors need a differnt margin spacing
+ // list errors need a different margin spacing
li.bf-error-detail {
- margin: 0 0 space.$space-xs 0;
+ margin: 0 0 rem(4px);
}
}
.bf-fieldset-wrapper {
- padding: 0 0 space.$space-lg 0;
+ padding: 0 0 rem(32px);
}
// we check to see if any of the fieldsets in the wrapper have the error
.bf-fieldset-wrapper:has(fieldset.usa-input--error) {
border-left: 0.25rem solid #c61f0c;
- padding-left: space.$space-md-gap;
+ padding-left: rem(20px);
}
.bf-fieldset-wrapper:has(fieldset.usa-input--error)
+ .bf-fieldset-wrapper:has(fieldset:not(.usa-input--error)) {
- padding-top: space.$space-md-gap;
+ padding-top: rem(20px);
}
.bf-fieldset-wrapper:has(fieldset.display-none) {
diff --git a/benefit-finder/src/shared/components/Form/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/Form/__tests__/__snapshots__/index.spec.jsx.snap
index 94c9354de..9f821cd83 100644
--- a/benefit-finder/src/shared/components/Form/__tests__/__snapshots__/index.spec.jsx.snap
+++ b/benefit-finder/src/shared/components/Form/__tests__/__snapshots__/index.spec.jsx.snap
@@ -6,7 +6,7 @@ exports[`Form > renders a match to the previous snapshot 1`] = `
class="bf-usa-form"
>
diff --git a/benefit-finder/src/shared/components/Form/_index.scss b/benefit-finder/src/shared/components/Form/_index.scss
index 12ab263f0..4854f7127 100644
--- a/benefit-finder/src/shared/components/Form/_index.scss
+++ b/benefit-finder/src/shared/components/Form/_index.scss
@@ -1,9 +1,22 @@
@use '../../styles/colors/index.scss' as color;
+@use '@styles/sizes' as *;
+@use '@styles/breakpoints' as *;
+@use '@styles/functions' as *;
form.bf-usa-form {
- font-family: 'Public Sans', sans-serif;
- background-color: color.$officer-navy;
height: 100%;
min-height: 100vh;
margin: 0;
+ background-color: color.$officer-navy;
+ padding-bottom: rem(64px);
+
+ .bf-grid-container.grid-container {
+ max-width: $form-container-max-width;
+ padding: 0 rem(20px);
+
+ @media (width >= calc($form-container-max-width + rem(24px))) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
}
diff --git a/benefit-finder/src/shared/components/Form/index.jsx b/benefit-finder/src/shared/components/Form/index.jsx
index 0008ecc7c..8d58fbe00 100644
--- a/benefit-finder/src/shared/components/Form/index.jsx
+++ b/benefit-finder/src/shared/components/Form/index.jsx
@@ -1,4 +1,5 @@
import PropTypes from 'prop-types'
+import './_index.scss'
/**
* a functional component that wraps form elements in a form element
@@ -9,7 +10,7 @@ import PropTypes from 'prop-types'
function Form({ children }) {
return (
)
}
diff --git a/benefit-finder/src/shared/components/Heading/index.stories.jsx b/benefit-finder/src/shared/components/Heading/index.stories.jsx
index a00c931da..3cd0eba7e 100644
--- a/benefit-finder/src/shared/components/Heading/index.stories.jsx
+++ b/benefit-finder/src/shared/components/Heading/index.stories.jsx
@@ -22,35 +22,21 @@ export const Default = {}
export const Heading1 = {
args: {
- children: '32 pt H1 Heading 1 - Sample',
+ children: 'H1 Heading 1 - Sample',
headingLevel: 1,
},
}
export const Heading2 = {
args: {
- children: '24 pt H2 Heading 2 - Sample',
+ children: 'H2 Heading 2 - Sample',
headingLevel: 2,
},
}
export const Heading3 = {
args: {
- children: '22 pt H3 Heading 3 - Sample',
+ children: 'H3 Heading 3 - Sample',
headingLevel: 3,
},
}
-
-export const Heading4 = {
- args: {
- children: '20 pt H4 Heading 4 - Sample',
- headingLevel: 4,
- },
-}
-
-export const Heading5 = {
- args: {
- children: '16 pt H5 Heading 5 - Sample',
- headingLevel: 5,
- },
-}
diff --git a/benefit-finder/src/shared/components/Hint/_index.scss b/benefit-finder/src/shared/components/Hint/_index.scss
index ad40a1499..b464478a2 100644
--- a/benefit-finder/src/shared/components/Hint/_index.scss
+++ b/benefit-finder/src/shared/components/Hint/_index.scss
@@ -1,6 +1,6 @@
@use '@styles/colors' as color;
-@use '@styles/space' as space;
@use '@styles/mixins' as *;
+@use '@styles/functions' as *;
.bf-usa-hint--required {
color: color.$dark-medium-grey;
@@ -9,5 +9,5 @@
.bf-required {
color: color.$dark-medium-grey;
font-weight: 400;
- margin-left: space.$space-sm;
+ margin-left: rem(8px);
}
diff --git a/benefit-finder/src/shared/components/KeyElegibilityCrieriaList/_index.scss b/benefit-finder/src/shared/components/KeyElegibilityCrieriaList/_index.scss
index 4f72e2af7..6a70d95cd 100644
--- a/benefit-finder/src/shared/components/KeyElegibilityCrieriaList/_index.scss
+++ b/benefit-finder/src/shared/components/KeyElegibilityCrieriaList/_index.scss
@@ -1,15 +1,19 @@
-@use '@styles/colors/_index.scss' as color;
-@use '@styles/space/_index.scss' as space;
-@use '@styles/mixins/_index.scss' as *;
-@use '@styles/functions/_index.scss' as *;
+@use '@styles/colors' as color;
+@use '@styles/mixins' as *;
+@use '@styles/functions' as *;
+@use '@styles/breakpoints' as *;
.bf-key-eligibility-criteria-group {
.bf-key-eligibility-criteria-heading {
@include h6;
background-color: color.$base-light-grey;
- padding: space.$space-md space.$space-lg;
+ padding: rem(27px) rem(18px);
margin: 0;
+
+ @media (width >= $desktop) {
+ padding: rem(16px) rem(32px);
+ }
}
.bf-key-eligibility-criteria-sub-heading {
@@ -24,15 +28,19 @@
@include list-items;
margin: 0;
- padding: space.$space-md space.$space-lg;
+ padding: rem(16px) rem(23px);
border: rem(2px) solid color.$base-light-grey;
border-bottom: 0;
display: flex;
flex-wrap: nowrap;
+ @media (width >= $desktop) {
+ padding: rem(16px) rem(32px);
+ }
+
.bf-checkmark--green {
height: 100%;
- margin-right: space.$space-lg;
+ margin-right: rem(32px);
}
}
@@ -49,12 +57,22 @@
}
.bf-unmet-criteria-group {
- padding: space.$space-md-plus 0 0 space.$space-md-plus;
+ padding: rem(18px) 0 0 rem(10px);
+
+ @media (width >= $desktop) {
+ padding-top: rem(24px);
+ padding-left: rem(24px);
+ }
.bf-unmet-criteria-title {
@include h5($font-family: 'sans');
- margin-bottom: space.$space-sm-plus;
+ margin-bottom: rem(12px);
+ }
+
+ ul.bf-unmet-criteria-list {
+ margin-bottom: rem(18px);
+ padding-left: rem(32px);
}
li.bf-unmet-criteria-item {
diff --git a/benefit-finder/src/shared/components/Legend/_index.scss b/benefit-finder/src/shared/components/Legend/_index.scss
index 9392f6a02..bbcce0fa1 100644
--- a/benefit-finder/src/shared/components/Legend/_index.scss
+++ b/benefit-finder/src/shared/components/Legend/_index.scss
@@ -1,11 +1,11 @@
@use '@styles/mixins' as *;
-@use '@styles/space' as space;
+@use '@styles/functions' as *;
.bf-legend {
@include subheadings;
font-weight: 600;
- margin: 0 0 space.$space-sm;
+ margin: 0 0 rem(8px);
padding: 0;
max-width: fit-content;
}
diff --git a/benefit-finder/src/shared/components/Modal/_index.scss b/benefit-finder/src/shared/components/Modal/_index.scss
index 140466ac3..816014e7f 100644
--- a/benefit-finder/src/shared/components/Modal/_index.scss
+++ b/benefit-finder/src/shared/components/Modal/_index.scss
@@ -2,7 +2,6 @@
@use '@styles/mixins' as *;
@use '@styles/sizes' as *;
@use '@styles/functions' as *;
-@use '@styles/space' as space;
#benefit-finder-modal {
.bf-modal-button {
@@ -11,8 +10,8 @@
background-color: transparent;
border: 0;
position: absolute;
- top: space.$space-md-plus;
- right: space.$space-md-plus;
+ top: rem(24px);
+ right: rem(24px);
cursor: pointer;
}
@@ -23,12 +22,13 @@
color: color.$pure-black;
text-align: center;
font-style: normal;
- margin: space.$space-md-plus 0;
+ margin: rem(24px) 0;
}
.bf-modal.bf-usa-button-group.width-full {
margin: 0 auto;
text-align: center;
+ flex-direction: row;
.bf-usa-button-group__item {
margin-left: 0;
@@ -36,7 +36,7 @@
}
.bf-usa-button {
- width: rem(232px);
+ width: 100%;
padding: rem(16px) rem(20px);
}
}
diff --git a/benefit-finder/src/shared/components/Modal/index.jsx b/benefit-finder/src/shared/components/Modal/index.jsx
index 29861f4eb..81b531f92 100644
--- a/benefit-finder/src/shared/components/Modal/index.jsx
+++ b/benefit-finder/src/shared/components/Modal/index.jsx
@@ -22,12 +22,18 @@ const customStyles = {
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
+ padding: '1rem',
transform: 'translate(-50%, -50%)',
- width: '80%',
+ width: '90%',
borderRadius: '8px',
borderColor: '#005ea2',
- padding: '5% 0',
- maxWidth: '32.5rem',
+ maxWidth: '41.375rem',
+ height: '100%',
+ maxHeight: '24.625rem',
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ alignContent: 'center',
},
}
@@ -234,26 +240,28 @@ const Modal = ({
}}
ariaHideApp={false}
>
-
-
- {modalHeading}
-
- {children || (
-
- )}
+
+
+
+ {modalHeading}
+
+ {children || (
+
+ )}
+
)
diff --git a/benefit-finder/src/shared/components/NoticesList/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/NoticesList/__tests__/__snapshots__/index.spec.jsx.snap
index 18fedce1b..7dcc73318 100644
--- a/benefit-finder/src/shared/components/NoticesList/__tests__/__snapshots__/index.spec.jsx.snap
+++ b/benefit-finder/src/shared/components/NoticesList/__tests__/__snapshots__/index.spec.jsx.snap
@@ -36,77 +36,15 @@ exports[`NoticesList > renders a match to the previous snapshot 1`] = `
class="bf-notice-item"
>
-
- This is not an application.
-
-
-