From 68b81c87086b4c7220d268faaa48281b961518d5 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Thu, 21 Nov 2024 17:02:07 -0500 Subject: [PATCH 01/39] PXBF-1954-mobile-layout-updates: update typography mixins to include mobile adjustments --- .../src/shared/styles/mixins/_index.scss | 64 +++++++++++++++---- 1 file changed, 52 insertions(+), 12 deletions(-) diff --git a/benefit-finder/src/shared/styles/mixins/_index.scss b/benefit-finder/src/shared/styles/mixins/_index.scss index 687c611c..ba2a3246 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/breakpoints/index.scss' 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 @@ -121,18 +151,28 @@ @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); + font-weight: 400; + } } // 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; + } } From 732fbe58c1b145c861c21fc562324f01c08cbdc0 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Thu, 21 Nov 2024 17:02:30 -0500 Subject: [PATCH 02/39] PXBF-1954-mobile-layout-updates: ignore mixed declarations deprication warning --- benefit-finder/vite.config.mjs | 1 + 1 file changed, 1 insertion(+) diff --git a/benefit-finder/vite.config.mjs b/benefit-finder/vite.config.mjs index 187aa256..7978387f 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'], }, }, }, From 2601341c63b0cea206f6cc50c23f56ef15a38527 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Thu, 21 Nov 2024 17:17:15 -0500 Subject: [PATCH 03/39] PXBF-1954-mobile-layout-updates: updated heading stories --- .../components/Heading/index.stories.jsx | 20 +- .../src/shared/style-docs/typeset.mdx | 262 ------------------ 2 files changed, 3 insertions(+), 279 deletions(-) delete mode 100644 benefit-finder/src/shared/style-docs/typeset.mdx diff --git a/benefit-finder/src/shared/components/Heading/index.stories.jsx b/benefit-finder/src/shared/components/Heading/index.stories.jsx index a00c931d..3cd0eba7 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/style-docs/typeset.mdx b/benefit-finder/src/shared/style-docs/typeset.mdx deleted file mode 100644 index 1120d46a..00000000 --- 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 - - From 4e5ff321feaaf2d7f3abe19374be021d36cf7d31 Mon Sep 17 00:00:00 2001 From: scottqueen-bixal Date: Thu, 21 Nov 2024 17:20:40 -0500 Subject: [PATCH 04/39] PXBF-1954-mobile-layout-updates: remove no background prop from alert component --- .../Alert/__tests__/__snapshots__/index.spec.jsx.snap | 2 +- .../src/shared/components/Alert/_index.scss | 4 ---- benefit-finder/src/shared/components/Alert/index.jsx | 11 +---------- 3 files changed, 2 insertions(+), 15 deletions(-) diff --git a/benefit-finder/src/shared/components/Alert/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/Alert/__tests__/__snapshots__/index.spec.jsx.snap index 9d164fed..afa50d03 100644 --- a/benefit-finder/src/shared/components/Alert/__tests__/__snapshots__/index.spec.jsx.snap +++ b/benefit-finder/src/shared/components/Alert/__tests__/__snapshots__/index.spec.jsx.snap @@ -37,7 +37,7 @@ exports[`Alert > renders a match to the previous snapshot, default 1`] = `