diff --git a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js index 7c2e5e37a..34e0b6ae6 100644 --- a/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js +++ b/benefit-finder/cypress/e2e/storybook/dataLayer.cy.js @@ -103,7 +103,7 @@ const dataLayerValueResultsViewEligible = { event: resultsView.event, bfData: { pageView: resultsView.bfData.pageView[0], - viewTitle: EN_LOCALE_DATA.resultsView.eligible.chevron.heading, + viewTitle: EN_LOCALE_DATA.resultsView.eligible.banner.heading, ...eligibilityCount, }, } @@ -112,7 +112,7 @@ const dataLayerValueResultsViewNotEligible = { event: resultsView.event, bfData: { pageView: resultsView.bfData.pageView[1], - viewTitle: EN_LOCALE_DATA.resultsView.notEligible.chevron.heading, + viewTitle: EN_LOCALE_DATA.resultsView.notEligible.banner.heading, ...eligibilityCount, }, } @@ -158,7 +158,7 @@ const dataLayerValueZeroResultsViewEligible = { event: resultsView.event, bfData: { pageView: resultsView.bfData.pageView[0], - viewTitle: EN_LOCALE_DATA.resultsView.zeroBenefits.eligible.chevron.heading, + viewTitle: EN_LOCALE_DATA.resultsView.zeroBenefits.eligible.banner.heading, ...zeroBenefitsEligibilityCount, }, } @@ -168,7 +168,7 @@ const dataLayerValueZeroResultsViewNotEligible = { bfData: { pageView: resultsView.bfData.pageView[1], viewTitle: - EN_LOCALE_DATA.resultsView.zeroBenefits.notEligible.chevron.heading, + EN_LOCALE_DATA.resultsView.zeroBenefits.notEligible.banner.heading, ...zeroBenefitsEligibilityCount, }, } diff --git a/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap index ea6f515a6..b09eb2bcd 100644 --- a/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap +++ b/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap @@ -19,21 +19,21 @@ exports[`loads intro 1`] = ` class="bf-intro" >

Benefit finder: death of a loved one

@@ -52,26 +52,30 @@ exports[`loads intro 1`] = `

-

- Steps -

-
- Estimated time - - 2-5 minutes -
+
+

+ Steps to find benefits +

+
+ Estimated time to complete + + 2-5 minutes +
+
    @@ -81,7 +85,7 @@ exports[`loads intro 1`] = `

    - Answer questions + Answer a few questions

- - This is not an application. - -
-
- -
  • - - - - - -
    - - You'll need to apply - - for benefits with each agency. -
    -
    • -
  • - - - - - -
    -
    - - We don't share, save, or submit - - your information. +

    + + This is not an application. You will need to apply for benefits + + with each agency. +

    +

    + We do not share, save, or submit your information. +

    • @@ -233,13 +175,6 @@ exports[`loads intro 1`] = `
    -
    -
    -
    diff --git a/benefit-finder/src/Routes/Intro/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/Routes/Intro/__tests__/__snapshots__/index.spec.jsx.snap index 3c6e5966d..8eb8970d3 100644 --- a/benefit-finder/src/Routes/Intro/__tests__/__snapshots__/index.spec.jsx.snap +++ b/benefit-finder/src/Routes/Intro/__tests__/__snapshots__/index.spec.jsx.snap @@ -6,21 +6,21 @@ exports[`Intro > renders a match to the previous snapshot 1`] = ` class="bf-intro" >

    Benefit finder: death of a loved one

    @@ -39,24 +39,28 @@ exports[`Intro > renders a match to the previous snapshot 1`] = `

    -

    - Steps -

    -
    - Estimated time 2-5 minutes -
    +
    +

    + Steps to find benefits +

    +
    + Estimated time to complete 2-5 minutes +
    +
      @@ -66,7 +70,7 @@ exports[`Intro > renders a match to the previous snapshot 1`] = `

      - Answer questions + Answer a few questions

    1. renders a match to the previous snapshot 1`] = `
    renders a match to the previous snapshot 1`] = ` class="bf-notice-item" >
    - - This is not an application. - -
    -
    - -
  • - - - - - -
    - - You'll need to apply - - for benefits with each agency. -
    -
    • -
  • - - - - - -
    -
    - - We don't share, save, or submit - - your information. +

    + + This is not an application. You will need to apply for benefits + + with each agency. +

    +

    + We do not share, save, or submit your information. +

    • @@ -218,13 +160,6 @@ exports[`Intro > renders a match to the previous snapshot 1`] = `
    -
    -
    -
    diff --git a/benefit-finder/src/Routes/Intro/_index.scss b/benefit-finder/src/Routes/Intro/_index.scss index 7cd9cd7b1..1db312294 100644 --- a/benefit-finder/src/Routes/Intro/_index.scss +++ b/benefit-finder/src/Routes/Intro/_index.scss @@ -1,18 +1,22 @@ @use '@styles/breakpoints' as *; @use '@styles/sizes' as *; -@use '@styles/space' as space; +@use '@styles/functions' as *; .bf-intro { - padding-bottom: space.$padding-bottom-lg; + padding-bottom: rem(32px); - h2 { - text-align: center; + > .bf-grid-container.grid-container { + padding: 0 rem(36px); } .bf-cta-wrapper { display: flex; justify-content: center; - margin: space.$space-lg space.$space-lg space.$space-xl; + margin: rem(20px) 0 rem(56px); + + @media (width >= $desktop) { + margin: rem(32px) rem(32px) rem(64px); + } } .bf-cta-wrapper button { @@ -22,20 +26,48 @@ .bf-intro-process-notices { display: flex; flex-direction: column; - align-items: center; - justify-content: space-around; - margin-left: space.$space-md; + text-align: left; + + @media (width >= $desktop) { + margin-left: rem(16px); + } + + .bf-intro-process-notices-heading { + width: 100; + margin-bottom: rem(30px); + } + + p { + margin-top: 0; + } } .bf-intro-process-list { display: flex; flex-direction: column; - align-items: center; justify-content: space-around; + .bf-intro-process-heading h2 { + text-align: left; + margin-bottom: rem(30px); + + @media (width >= $desktop) { + margin-bottom: rem(16px); + } + } + .bf-usa-process-list { margin-left: 0; margin-right: 0; + padding-top:rem(8px); + + .bf-usa-process-list__heading { + font-size: rem(16px); + + @media (width >= $desktop) { + font-size: rem(21px); + } + } } } @@ -44,10 +76,6 @@ min-width: 50%; } - .bf-intro-process-notices-heading { - display: none; - } - .bf-intro-process-group { display: flex; } diff --git a/benefit-finder/src/Routes/Intro/index.jsx b/benefit-finder/src/Routes/Intro/index.jsx index 95165ff74..f0e5d7340 100644 --- a/benefit-finder/src/Routes/Intro/index.jsx +++ b/benefit-finder/src/Routes/Intro/index.jsx @@ -6,7 +6,7 @@ import { useResetElement } from '@hooks' import PropTypes from 'prop-types' import { Button, - Chevron, + Banner, Heading, NoticesList, ProcessList, @@ -57,19 +57,21 @@ const Intro = ({ content, ui, hasQueryParams }) => { return ( content && (
    - +
    - {heading} -
    +
    + {heading} + +
    -
    -
    +
    +
    { />
    -
    -
    -
    - - {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. - -
    -
    - -
  • - - - - - -
    - - You'll need to apply - - for benefits with each agency. -
    -
    • -
  • - - - - - -
    -
    - - We don't share, save, or submit - - your information. +

    + + This is not an application. You will need to apply for benefits + + with each agency. +

    +

    + We do not share, save, or submit your information. +

    • diff --git a/benefit-finder/src/shared/components/NoticesList/_index.scss b/benefit-finder/src/shared/components/NoticesList/_index.scss index 2cbcb2221..66e742f53 100644 --- a/benefit-finder/src/shared/components/NoticesList/_index.scss +++ b/benefit-finder/src/shared/components/NoticesList/_index.scss @@ -1,67 +1,49 @@ @use '@styles/colors' as color; -@use '@styles/space' as space; @use '@styles/mixins' as *; @use '@styles/breakpoints' as *; @use '@styles/functions' as *; .bf-notices-list { - margin-top: space.$space-md-plus; - margin-bottom: space.$space-xl; + @media (width >= $desktop) { + margin-top: rem(36px); + margin-bottom: rem(64px); + } } .bf-notice { display: flex; - padding-bottom: space.$padding-bottom-lg; - .bf-info { - margin-top: space.$space-xs; - margin-right: space.$space-sm-plus; + @media (width >= $desktop) { + padding-bottom: rem(32px); } -} -.bf-line-sperator-wrapper { - display: block; - padding-top: space.$space-lg; - padding-bottom: space.$padding-bottom-lg; - margin: space.$space-lg; -} - -.bf-line-sperator { - display: block; - border-top: rem(2px) solid color.$base-light-grey; - width: 100%; - height: 100%; + .bf-info { + margin-top: rem(4px); + margin-right: rem(12px); + } } -.bf-line-sperator-wrapper--vertical { +.bf-line-separator-wrapper--vertical { display: none; } -.bf-line-sperator--vertical { +.bf-line-separator--vertical { display: none; } @media (width >= $desktop) { - .bf-intro .bf-line-sperator-wrapper { - display: none; - } - - .bf-intro .bf-line-sperator { - display: none; - } - - .bf-line-sperator-wrapper--vertical { + .bf-line-separator-wrapper--vertical { display: block; - padding-top: space.$space-lg; - padding-bottom: space.$padding-bottom-lg; + padding-top: rem(128px); + padding-bottom: rem(32px); margin: 0; - margin-right: space.$space-lg; + margin-right: rem(32px); } - .bf-line-sperator--vertical { + .bf-line-separator--vertical { display: block; border-left: rem(2px) solid color.$base-light-grey; width: 100%; - height: 80%; + height: 100%; } } diff --git a/benefit-finder/src/shared/components/Radio/_index.scss b/benefit-finder/src/shared/components/Radio/_index.scss index aca271e1f..dea06dbe1 100644 --- a/benefit-finder/src/shared/components/Radio/_index.scss +++ b/benefit-finder/src/shared/components/Radio/_index.scss @@ -1,9 +1,8 @@ @use '@styles/colors' as color; -@use '@styles/space' as space; @use '@styles/functions' as *; .bf-usa-radio__label { - margin-top: space.$space-md; + margin-top: rem(16px); } .bf-usa-radio__input:checked + .bf-usa-radio__label::before { diff --git a/benefit-finder/src/shared/components/RadioGroup/_index.scss b/benefit-finder/src/shared/components/RadioGroup/_index.scss index b7e2f847e..bc03a7737 100644 --- a/benefit-finder/src/shared/components/RadioGroup/_index.scss +++ b/benefit-finder/src/shared/components/RadioGroup/_index.scss @@ -1,10 +1,11 @@ -@use '@styles/space' as space; @use '@styles/breakpoints' as *; +@use '@styles/functions' as *; + @media (width >= $desktop) { .bf-radio-group > .bf-usa-radio:first-of-type { .bf-usa-radio__label { - margin-top: space.$space-md-plus; + margin-top: rem(24px); } } } diff --git a/benefit-finder/src/shared/components/RelativeBenefitList/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/RelativeBenefitList/__tests__/__snapshots__/index.spec.jsx.snap index 0eab76d27..a207813a1 100644 --- a/benefit-finder/src/shared/components/RelativeBenefitList/__tests__/__snapshots__/index.spec.jsx.snap +++ b/benefit-finder/src/shared/components/RelativeBenefitList/__tests__/__snapshots__/index.spec.jsx.snap @@ -2,262 +2,67 @@ exports[`RelativeBenefitList > renders a match to the previous snapshot 1`] = ` - +
    +
    +
    `; diff --git a/benefit-finder/src/shared/components/RelativeBenefitList/__tests__/index.spec.jsx b/benefit-finder/src/shared/components/RelativeBenefitList/__tests__/index.spec.jsx index e2e6addac..910b3b248 100644 --- a/benefit-finder/src/shared/components/RelativeBenefitList/__tests__/index.spec.jsx +++ b/benefit-finder/src/shared/components/RelativeBenefitList/__tests__/index.spec.jsx @@ -32,11 +32,16 @@ describe('RelativeBenefitList', () => { expect(links[0].href).toContain(relativeBenefits[0].lifeEvent.lifeEventId) expect(links[1].href).toContain(relativeBenefits[1].lifeEvent.lifeEventId) // ensure the icons that contain values from the lifeEventId are in the dom + console.log(relativeBenefits[0].lifeEvent.lifeEventId) expect( - screen.getByTestId(`icon-${relativeBenefits[0].lifeEvent.lifeEventId}`) + screen.getByTestId( + `benefit-finder-icon--${relativeBenefits[0].lifeEvent.lifeEventId}` + ) ).toBeInTheDocument() expect( - screen.getByTestId(`icon-${relativeBenefits[1].lifeEvent.lifeEventId}`) + screen.getByTestId( + `benefit-finder-icon--${relativeBenefits[1].lifeEvent.lifeEventId}` + ) ).toBeInTheDocument() }) }) diff --git a/benefit-finder/src/shared/components/RelativeBenefitList/_index.scss b/benefit-finder/src/shared/components/RelativeBenefitList/_index.scss new file mode 100644 index 000000000..61dcd328a --- /dev/null +++ b/benefit-finder/src/shared/components/RelativeBenefitList/_index.scss @@ -0,0 +1,8 @@ +// we inherit the grid styles directly from usagov stylesheet +// here we revert some conflicts from our parent id +.benefit-finder__main { + h3, p { + all: revert; + margin: 0; + } +} diff --git a/benefit-finder/src/shared/components/RelativeBenefitList/index.jsx b/benefit-finder/src/shared/components/RelativeBenefitList/index.jsx index 25ac77c87..d470348a5 100644 --- a/benefit-finder/src/shared/components/RelativeBenefitList/index.jsx +++ b/benefit-finder/src/shared/components/RelativeBenefitList/index.jsx @@ -1,37 +1,49 @@ import PropTypes from 'prop-types' -import { Card } from '@components' +import { createMarkup } from '@utils' + +import './_index.scss' /** - * a functional component that renders a list of usa-card component(s) + * a functional component that renders a group of linked elements * @component * @param {array} data - passed benefits data - * @param {string} carrotType - determines display type - * @return {html} returns a semantic html unorderd list element + * @return {html} returns a grid of linked elements */ -const RelativeBenefitList = ({ data, carrotType }) => { +const RelativeBenefitList = ({ data }) => { return ( -
      - {data && - data.map((item, i) => { - const { title, searchTitle, link, cta, body, lifeEventId } = - item.lifeEvent - const trimedLifeEventId = lifeEventId.replace('es_', '') + // markup is cloned from usagov, styles are inherited +
      +
      + {data && + data.map((item, i) => { + const { title, searchTitle, link, body, lifeEventId } = + item.lifeEvent + const trimmedLifeEventId = lifeEventId.replace('es_', '') + const lang = lifeEventId.includes('es_') ? 'es' : 'en' - return ( - - ) - })} -
    + return ( +
    + + ) + })} +
    +
    ) } diff --git a/benefit-finder/src/shared/components/StepIndicator/_index.scss b/benefit-finder/src/shared/components/StepIndicator/_index.scss index 450862ad4..7dbac3c10 100644 --- a/benefit-finder/src/shared/components/StepIndicator/_index.scss +++ b/benefit-finder/src/shared/components/StepIndicator/_index.scss @@ -1,5 +1,4 @@ @use '@styles/colors' as color; -@use '@styles/space' as space; @use '@styles/functions' as *; @use '@styles/mixins' as *; diff --git a/benefit-finder/src/shared/components/Summary/_index.scss b/benefit-finder/src/shared/components/Summary/_index.scss index f6cf2e31b..3244bfb78 100644 --- a/benefit-finder/src/shared/components/Summary/_index.scss +++ b/benefit-finder/src/shared/components/Summary/_index.scss @@ -1,11 +1,11 @@ @use '@styles/mixins' as *; @use '@styles/colors' as color; -@use '@styles/space' as space; +@use '@styles/functions' as *; .bf-usa-summary-box { @include h5($font-family: 'sans'); - margin-bottom: space.$space-md; + margin-bottom: rem(16px); border-color: color.$teal; .bf-usa-list { diff --git a/benefit-finder/src/shared/components/TimeIndicator/_index.scss b/benefit-finder/src/shared/components/TimeIndicator/_index.scss index c9b0a3b72..629b47d30 100644 --- a/benefit-finder/src/shared/components/TimeIndicator/_index.scss +++ b/benefit-finder/src/shared/components/TimeIndicator/_index.scss @@ -1,9 +1,8 @@ @use '@styles/colors' as color; @use '@styles/mixins' as *; -@use '@styles/space' as space; +@use '@styles/functions' as *; .time-indicator { color: color.$dark-medium-grey; - text-align: center; - margin-bottom: space.$space-lg; + margin-bottom: rem(36px); } diff --git a/benefit-finder/src/shared/components/index.js b/benefit-finder/src/shared/components/index.js index 2765723ad..4c7a605b0 100644 --- a/benefit-finder/src/shared/components/index.js +++ b/benefit-finder/src/shared/components/index.js @@ -4,7 +4,7 @@ import BenefitAccordionGroup from './BenefitAccordionGroup' import Button from './Button' import ButtonGroup from './ButtonGroup' import Card from './Card' -import Chevron from './Chevron' +import Banner from './Banner' import Date from './Date' import EmailTrigger from './EmailTrigger' import Fieldset from './Fieldset' @@ -39,7 +39,7 @@ export { Button, ButtonGroup, Card, - Chevron, + Banner, Date, EmailTrigger, Fieldset, diff --git a/benefit-finder/src/shared/locales/en/en.json b/benefit-finder/src/shared/locales/en/en.json index 5a8aadaa7..1b440d301 100644 --- a/benefit-finder/src/shared/locales/en/en.json +++ b/benefit-finder/src/shared/locales/en/en.json @@ -1,11 +1,11 @@ { "intro": { - "heading": "Steps", - "timeIndicator": "Estimated time", + "heading": "Steps to find benefits", + "timeIndicator": "Estimated time to complete", "steps": { "list": [ { - "title": "Answer questions" + "title": "Answer a few questions" }, { "title": "Get your list of benefits" @@ -20,13 +20,7 @@ "iconAlt": "Important", "list": [ { - "notice": "
    This is not an application.
    " - }, - { - "notice": "You'll need to apply for benefits with each agency." - }, - { - "notice": "
    We don't share, save, or submit your information.
    " + "notice": "

    This is not an application. You will need to apply for benefits with each agency.

    We do not share, save, or submit your information.

    " } ] }, @@ -94,7 +88,7 @@ } }, "eligible": { - "chevron": { + "banner": { "heading": "Your potential benefits", "description": "

    Visit each agency to find true eligibility and to apply. Check with your city, state, or employer for other benefits.

    " }, @@ -102,7 +96,7 @@ "description": "You may be eligible for these benefits:" }, "notEligible": { - "chevron": { + "banner": { "heading": "Benefits you did not qualify for", "description": "

    According to your answers you are not eligible for these benefits.

    " }, @@ -115,13 +109,13 @@ "link": "Go back to start" }, "eligible": { - "chevron": { + "banner": { "heading": "You are likely not eligible for these benefits.", "description": "

    If you think you reached these results by mistake, please go back to review and edit your answers.

    " } }, "notEligible": { - "chevron": { + "banner": { "heading": "Benefits you did not qualify for", "description": "

    According to your answers you are not eligible for these benefits.

    " } diff --git a/benefit-finder/src/shared/locales/es/es.json b/benefit-finder/src/shared/locales/es/es.json index 4c8f8c2f5..185aee29d 100644 --- a/benefit-finder/src/shared/locales/es/es.json +++ b/benefit-finder/src/shared/locales/es/es.json @@ -1,17 +1,17 @@ { "intro": { - "heading": "Pasos", - "timeIndicator": "Tiempo estimado", + "heading": "Pasos para encontrar beneficios", + "timeIndicator": "Tiempo para completar", "steps": { "list": [ { "title": "Responda unas preguntas" }, { - "title": "Obtenga su lista de posibles beneficios" + "title": "Obtenga su lista de beneficios" }, { - "title": "Aplique en los sitios web de cada agencia" + "title": "Presente su soliticud a cada agencia" } ] }, @@ -20,13 +20,7 @@ "iconAlt": "Importante", "list": [ { - "notice": "
    Esto no es una aplicación.
    " - }, - { - "notice": "Sus respuestas no serán guardadas o compartidas con ninguna agencia." - }, - { - "notice": "
    Necesitará presentar una solicitud con cada agencia..
    " + "notice": "

    Esto no es una aplicación. Necesita presentar una solicitud con cada agencia.

    No guardamos ni compartimos sus respuestas con ninguna agencia.

    " } ] }, @@ -94,7 +88,7 @@ } }, "eligible": { - "chevron": { + "banner": { "heading": "Sus beneficios potenciales", "description": "

    Visite la página de cada agencia para verificar los requisitos y aplicar. Para conocer otros beneficios, consulte a su ciudad, estado, o trabajo.

    " }, @@ -102,7 +96,7 @@ "description": "Podría ser elegible para estos beneficios:" }, "notEligible": { - "chevron": { + "banner": { "heading": "Beneficios a los que no calificó", "description": "

    Según sus respuestas usted no es elegible para estos beneficios.

    " }, @@ -115,13 +109,13 @@ "link": "Volver al inicio" }, "eligible": { - "chevron": { + "banner": { "heading": "Usted parece no ser elegible para los beneficios en este buscador", "description": "

    Si cree que cometió un error en sus respuestas, por favor regrese atrás para corregirlas.

    " } }, "notEligible": { - "chevron": { + "banner": { "heading": "Beneficios a los que no calificó", "description": "

    Según sus respuestas usted no es elegible para estos beneficios.

    " } diff --git a/benefit-finder/src/shared/style-docs/typeset.mdx b/benefit-finder/src/shared/style-docs/typeset.mdx deleted file mode 100644 index 1120d46a8..000000000 --- a/benefit-finder/src/shared/style-docs/typeset.mdx +++ /dev/null @@ -1,262 +0,0 @@ -{/* Typography.mdx */} - -import { Meta, Typeset } from '@storybook/blocks' - - - -export const typography = { - weight: { - extraLight: '200', - regular: '400', - bold: '700', - extrabold: '800', - }, - size: { - h0: 39, - h1: 36, - h2: 32, - h3: 32, - h4: 24, - h5: 22, - h6: 20, - importantXBold: 16, - importantBold: 16, - p: 16, - p1: 16, - p2: 15, - p3: 15, - }, -} - -export const SampleText = - 'Lorem ipsum dolor sit amet consectetur. Consectetur felis fermentum eu nunc elit imperdiet. Aenean porta sem sed nulla rutrum orci morbi non. Sollicitudin proin lorem magna ultrices gravida sem donec.' - -# Typography - -**Font:** Merriweather Web - -## Headings - -### H0 - - - -### H1 - - - -### H2 - - - -### H3 - - - -### H4 - - - -### H5 - - - -### H6 - - - -## Other - -### Important Extra Bold - - - -### Important Bold - - - -### Paragraph 1 - - - -### Paragraph 2 - - - -### Paragraph 3 - - - -**Font:** Source Sans Pro Web - -## Headings - -### H0 - - - -### H1 - - - -### H2 - - - -### H3 - - - -### H4 - - - -### H5 - - - -### H6 - - - -## Other - -### Important Bold - - - -### Important Extra Bold - - - -### Paragraph 1 - - - -### Paragraph 2 - - - -### Paragraph 3 - - diff --git a/benefit-finder/src/shared/styles/mixins/_index.scss b/benefit-finder/src/shared/styles/mixins/_index.scss index 687c611c5..08bdddc19 100644 --- a/benefit-finder/src/shared/styles/mixins/_index.scss +++ b/benefit-finder/src/shared/styles/mixins/_index.scss @@ -1,4 +1,5 @@ -@use '@styles/functions/index.scss' as *; +@use '@styles/functions' as *; +@use '@styles/breakpoints' as *; @mixin font-family($font-family) { @if $font-family == 'sans' { @@ -31,55 +32,80 @@ @mixin h1($font-family: 'serif') { @include font-family($font-family); - font-size: rem(39px); + font-size: rem(32px); font-style: normal; font-weight: 900; line-height: 117.4%; - letter-spacing: -0.39px; + letter-spacing: -0.32px; + + @media (width >= $desktop) { + font-size: rem(39px); + letter-spacing: -0.39px; + } } @mixin h2($font-family: 'serif') { @include font-family($font-family); - font-size: rem(32px); + font-size: rem(21px); font-style: normal; font-weight: 900; line-height: 117.4%; + + @media (width >= $desktop) { + font-size: rem(32px); + } } @mixin h3($font-family: 'serif') { @include font-family($font-family); - font-size: rem(26px); + font-size: rem(18px); font-style: normal; font-weight: 900; line-height: 117.4%; + + @media (width >= $desktop) { + font-size: rem(26px); + } } @mixin h4($font-family: 'sans') { @include font-family($font-family); - font-size: rem(21px); + font-size: rem(17px); font-style: normal; font-weight: 700; line-height: 117.4%; + + @media (width >= $desktop) { + font-size: rem(21px); + } } @mixin h5($font-family: 'serif') { @include font-family($font-family); - font-size: rem(21px); + font-size: rem(17px); font-style: normal; font-weight: 700; line-height: 117.4%; + + @media (width >= $desktop) { + font-size: rem(21px); + } } @mixin h6($font-family: 'serif') { @include font-family($font-family); - font-size: rem(20px); + font-size: rem(16px); font-weight: 700; line-height: 134.09%; + + @media (width >= $desktop) { + font-size: rem(20px); + } } // Body Text Regular @@ -87,10 +113,14 @@ @mixin p($font-family: 'sans') { @include font-family($font-family); - font-size: rem(17px); + font-size: rem(16px); font-style: normal; font-weight: 400; line-height: 132%; + + @media (width >= $desktop) { + font-size: rem(17px); + } } // Body Text Bold @@ -105,6 +135,7 @@ @include p; line-height: 26px; + font-size: rem(17px); } // Underlined Text for Buttons Desktop Bold @@ -121,18 +152,27 @@ @mixin subheadings($font-family: 'sans') { @include font-family($font-family); - font-size: rem(21px); + font-size: rem(17px); font-style: normal; - font-weight: 400; + font-weight: 600; line-height: 145.4%; + + @media (width >= $desktop) { + font-size: rem(21px); + } } // Intro Text Bold @mixin intro-text($font-family: 'serif') { @include font-family($font-family); - font-size: rem(21px); + font-size: rem(17px); font-style: normal; - font-weight: 400; + font-weight: 700; line-height: 164%; + + @media (width >= $desktop) { + font-size: rem(21px); + font-weight: 400; + } } diff --git a/benefit-finder/src/shared/styles/sizes/_index.scss b/benefit-finder/src/shared/styles/sizes/_index.scss index 31df88100..8bc47f76a 100644 --- a/benefit-finder/src/shared/styles/sizes/_index.scss +++ b/benefit-finder/src/shared/styles/sizes/_index.scss @@ -1,3 +1,4 @@ -@use '@styles/functions/_index.scss' as *; +@use '@styles/functions' as *; $button-max-width: rem(248px); +$form-container-max-width: rem(1234px) diff --git a/benefit-finder/src/shared/styles/space/_index.scss b/benefit-finder/src/shared/styles/space/_index.scss deleted file mode 100644 index 0ef7ee3c2..000000000 --- a/benefit-finder/src/shared/styles/space/_index.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use '@styles/functions/index.scss' as *; - -$space-xs: rem(4px); -$space-sm: rem(8px); -$space-sm-plus: rem(12px); -$space-md: rem(16px); -$space-md-gap: rem(20px); -$space-md-plus: rem(24px); -$space-lg: rem(32px); -$space-lg-plus: rem(40px); -$space-xl: rem(64px); -$space-xl-plus: rem(86px); - -// $space-xxl: rem(86px); -$padding-bottom-sm: $space-sm; -$padding-bottom-md: $space-md; -$padding-bottom-md-plus: $space-md-plus; -$padding-bottom-lg: $space-lg; -$padding-bottom-lg-plus: $space-lg-plus; -$padding-bottom-xl: $space-xl; diff --git a/benefit-finder/vite.config.mjs b/benefit-finder/vite.config.mjs index 187aa2565..7978387f9 100644 --- a/benefit-finder/vite.config.mjs +++ b/benefit-finder/vite.config.mjs @@ -79,6 +79,7 @@ export default defineConfig({ scss: { api: 'modern-compiler', implementation: sassEmbedded, + silenceDeprecations: ['mixed-decls'], }, }, },