From 65cc24379dfba25b9d42baa341da5ac8f64eccfd Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Fri, 1 Dec 2023 15:54:41 -0800 Subject: [PATCH 1/8] Update styles --- src/shared/icons.js | 54 +---------------- src/shared/templates.js | 125 ++++++++++++++-------------------------- 2 files changed, 44 insertions(+), 135 deletions(-) diff --git a/src/shared/icons.js b/src/shared/icons.js index a0b60d3..ef66254 100644 --- a/src/shared/icons.js +++ b/src/shared/icons.js @@ -9,16 +9,13 @@ exports.shock = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -28,12 +25,10 @@ exports.wiFi = html` width="40" height="40" viewBox="0 0 40 40" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -43,21 +38,16 @@ exports.wiFiWand = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > - `; @@ -67,36 +57,28 @@ exports.foodBasket = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -106,24 +88,19 @@ exports.familyPeople = html` width="35" height="35" viewBox="0 0 69 69" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -133,12 +110,10 @@ exports.moneyStack = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -148,14 +123,12 @@ exports.taxBook = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -165,20 +138,17 @@ exports.waterDrops = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -188,15 +158,12 @@ exports.apple = html` width="40" height="40" viewBox="0 0 40 40" - fill="none" xmlns="http://www.w3.org/2000/svg" > - `; @@ -206,24 +173,19 @@ exports.energyPlug = html` width="40" height="40" viewBox="0 0 40 40" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -233,24 +195,19 @@ exports.idBadge = html` width="40" height="40" viewBox="0 0 40 40" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -260,18 +217,16 @@ exports.babyFace = html` width="40" height="40" viewBox="0 0 40 40" - fill="none" xmlns="http://www.w3.org/2000/svg" > - + @@ -282,18 +237,15 @@ exports.babyBottle = html` width="40" height="40" viewBox="0 0 40 40" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -303,24 +255,20 @@ exports.waterFaucet = html` width="40" height="35" viewBox="0 0 40 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; diff --git a/src/shared/templates.js b/src/shared/templates.js index ae85fca..cc50727 100644 --- a/src/shared/templates.js +++ b/src/shared/templates.js @@ -1,4 +1,5 @@ const defaultCss = /* css */ ` +/* :host { --benefits-recs-background-color: #E1F1EE; --benefits-recs-highlight-color: #006C58; @@ -6,7 +7,6 @@ const defaultCss = /* css */ ` --benefits-recs-card-background-color: #FFFFFF; --benefits-recs-title-font-size: 2rem; - --benefits-recs-tagline-font-size: 1.25rem; --benefits-recs-lead-font-size: 1.4375rem; --benefits-recs-catalyst-font-size: 1.25rem; --benefits-recs-padding: 2rem; @@ -19,7 +19,6 @@ const defaultCss = /* css */ ` @media (max-width: 28.75rem) { :host { --benefits-recs-title-font-size: 1.5rem; - --benefits-recs-tagline-font-size: 0.9375rem; --benefits-recs-lead-font-size: 1.125rem; --benefits-recs-catalyst-font-size: 0.9375rem; --benefits-recs-padding: 1.52rem; @@ -29,45 +28,34 @@ const defaultCss = /* css */ ` --benefits-recs-link-end-gap: 0.38rem; } } +*/ section { - background: var(--benefits-recs-background-color); - border-left: 3px solid var(--benefits-recs-highlight-color); - padding: var(--benefits-recs-padding); - display: flex; - flex-direction: column; - gap: var(--benefits-recs-gap); - max-width: 46.875rem; + background: #EDEDEF; padding: 1.5rem; + max-width: 42.25rem; font-family: system-ui, sans-serif; } h2 { - font-size: var(--benefits-recs-title-font-size); - font-weight: 600; - color: var(--benefits-recs-highlight-color); -} - -.tagline { - font-size: var(--benefits-recs-tagline-font-size); + font-size: 2.3125rem;; + font-weight: 700; + line-height: 3.17969rem; + color: #3B3A48; + margin: 0 0 1rem 0; } .lead { - font-size: var(--benefits-recs-lead-font-size); + color: #000; + font-size: 1.4375rem; font-weight: 700; + line-height: 2.33594rem; } .catalyst { - font-size: var(--benefits-recs-catalyst-font-size); - text-align: right; - flex-grow: 2; -} - -h2, .tagline { - margin: 0; -} - -.tagline, .catalyst, .lead { - color: var(--benefits-recs-text-color); + color: #046B99; + font-size: 1.125rem; + font-weight: 600; + line-height: 2rem; } ul.link-list { @@ -75,80 +63,54 @@ ul.link-list { padding: 0; display: flex; flex-direction: column; - flex-wrap: wrap; - gap: var(--benefits-recs-gap); + border-radius: 0.5rem; + border: 1px solid #D4D4D7; + background: #FFF; } ul.link-list li { - list-style: none; - background: var(--benefits-recs-card-background-color); - flex-grow: 1; - max-width: 100%; - border-radius: 0.3125rem -} - -ul.link-list li a { display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: var(--benefits-recs-card-gap); - padding: var(--benefits-recs-card-padding); - text-decoration: none; - color: #000; -} - -ul.link-list li a:hover { - box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.25); -} - -.link-start { - display: flex; - gap: var(--benefits-recs-card-gap); - align-items: center; + flex-direction: column; + gap: 0.5rem; + list-style: none; + padding: 1.5rem; + border-bottom: 1px solid #D4D4D7; } -.link-end { - display: flex; - flex-grow: 2; - align-items: center; - gap: var(--benefits-recs-link-end-gap); +ul.link-list li:last-child { + border-bottom: none; } -.link-icon, .open-icon { - display: inline-flex +.open-icon { + display: inline-flex; + margin: 0 0.25rem; + fill: #046B99 } .link-icon { - height: 40px; - width: 40px; + display: inline-flex; align-items: center; + justify-content: center; + width: 3.5rem; + height: 3.5rem; + border-radius: 50%; + background: #EDEDEF; } `; const openIcon = /* html */ ` - - - - - - - - - + + + `; const defaultLinkHtml = (link) => /* html */ `
  • - - - - ${link.lead} - - - ${link.catalyst} - - + + ${link.lead} + + ${link.catalyst}
    • `; @@ -167,7 +129,6 @@ const defaultHtml = (data) => { data-language-selection="${data.language.selection}" >

    ${data.header}

    -

    ${data.tagline}

      ${linkList}
    From 76512f552ddd26ab9ba948567810123f44139f8e Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Fri, 1 Dec 2023 16:10:17 -0800 Subject: [PATCH 2/8] Edit default fill color on icons --- src/shared/templates.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shared/templates.js b/src/shared/templates.js index cc50727..7ac644d 100644 --- a/src/shared/templates.js +++ b/src/shared/templates.js @@ -95,6 +95,7 @@ ul.link-list li:last-child { height: 3.5rem; border-radius: 50%; background: #EDEDEF; + fill: #3B3A48; } `; From 47b5db3adf8ab5a2269f40d17463a0922a7a7eda Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Mon, 4 Dec 2023 14:04:48 -0800 Subject: [PATCH 3/8] Mobile redesign update --- src/shared/templates.js | 78 ++++++++++++++++++++--------------------- 1 file changed, 38 insertions(+), 40 deletions(-) diff --git a/src/shared/templates.js b/src/shared/templates.js index 7ac644d..f76e60a 100644 --- a/src/shared/templates.js +++ b/src/shared/templates.js @@ -1,62 +1,60 @@ const defaultCss = /* css */ ` -/* :host { - --benefits-recs-background-color: #E1F1EE; - --benefits-recs-highlight-color: #006C58; - --benefits-recs-text-color: #000000; - --benefits-recs-card-background-color: #FFFFFF; - - --benefits-recs-title-font-size: 2rem; - --benefits-recs-lead-font-size: 1.4375rem; - --benefits-recs-catalyst-font-size: 1.25rem; - --benefits-recs-padding: 2rem; - --benefits-recs-gap: 1rem; - --benefits-recs-card-padding: 1.25rem; - --benefits-recs-card-gap: 1rem; - --benefits-recs-link-end-gap: 0.5rem; + --benefits-recs-background: #E7EEF9; + --benefits-recs-list-background: #FFF; + --benefits-recs-list-border-color: #D4D4D7; + --benefits-recs-icon-background: #EDEDEF; + --benefits-recs-icon-fill: #003688; + --benefits-recs-text-color: #3B3A48; + --benefits-recs-link-color: #165AC2; } -@media (max-width: 28.75rem) { - :host { - --benefits-recs-title-font-size: 1.5rem; - --benefits-recs-lead-font-size: 1.125rem; - --benefits-recs-catalyst-font-size: 0.9375rem; - --benefits-recs-padding: 1.52rem; - --benefits-recs-gap: 0.76rem; - --benefits-recs-card-padding: 0.95rem; - --benefits-recs-card-gap: 0.76rem; - --benefits-recs-link-end-gap: 0.38rem; - } -} -*/ - section { - background: #EDEDEF; padding: 1.5rem; + background: var(--benefits-recs-background); + padding: 1.5rem; max-width: 42.25rem; font-family: system-ui, sans-serif; } h2 { - font-size: 2.3125rem;; + color: var(--benefits-recs-text-color); + font-size: 2.3125rem; font-weight: 700; line-height: 3.17969rem; - color: #3B3A48; - margin: 0 0 1rem 0; + margin: 0 0 1.5rem 0; +} +@media (max-width: 28.75rem) { + h2 { + font-size: 2.0625rem; + line-height: 2.5625rem; + } } .lead { - color: #000; + color: var(--benefits-recs-text-color); font-size: 1.4375rem; font-weight: 700; line-height: 2.33594rem; } +@media (max-width: 28.75rem) { + .lead { + font-size: 1.25rem; + line-height: 2.03125rem; + } +} .catalyst { - color: #046B99; + color: var(--benefits-recs-link-color); font-size: 1.125rem; font-weight: 600; line-height: 2rem; } +@media (max-width: 28.75rem) { + .catalyst { + font-size: 1rem; + line-height: 1.6875rem; + } +} ul.link-list { margin: 0; @@ -64,8 +62,8 @@ ul.link-list { display: flex; flex-direction: column; border-radius: 0.5rem; - border: 1px solid #D4D4D7; - background: #FFF; + border: 1px solid var(--benefits-recs-list-border-color); + background: var(--benefits-recs-list-background); } ul.link-list li { @@ -74,7 +72,7 @@ ul.link-list li { gap: 0.5rem; list-style: none; padding: 1.5rem; - border-bottom: 1px solid #D4D4D7; + border-bottom: 1px solid var(--benefits-recs-list-border-color); } ul.link-list li:last-child { @@ -84,7 +82,7 @@ ul.link-list li:last-child { .open-icon { display: inline-flex; margin: 0 0.25rem; - fill: #046B99 + fill: var(--benefits-recs-link-color); } .link-icon { @@ -94,8 +92,8 @@ ul.link-list li:last-child { width: 3.5rem; height: 3.5rem; border-radius: 50%; - background: #EDEDEF; - fill: #3B3A48; + background: var(--benefits-recs-icon-background); + fill: var(--benefits-recs-icon-fill); } `; From 4dd4c2a94ff4e448e1422d93f7d365a9a8bf6f76 Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Mon, 4 Dec 2023 14:32:18 -0800 Subject: [PATCH 4/8] EDD UI/SDI template redesign --- src/shared/templates.js | 54 ++++++++++++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 12 deletions(-) diff --git a/src/shared/templates.js b/src/shared/templates.js index f76e60a..4421318 100644 --- a/src/shared/templates.js +++ b/src/shared/templates.js @@ -1,4 +1,4 @@ -const defaultCss = /* css */ ` +const defaultCssVars = /* css */ ` :host { --benefits-recs-background: #E7EEF9; --benefits-recs-list-background: #FFF; @@ -8,16 +8,30 @@ const defaultCss = /* css */ ` --benefits-recs-text-color: #3B3A48; --benefits-recs-link-color: #165AC2; } +`; + +const eddAllCssVars = /* css */ ` +:host { + --benefits-recs-background: #EDEDEF; + --benefits-recs-list-background: #FFF; + --benefits-recs-list-border-color: #D4D4D7; + --benefits-recs-icon-background: #EDEDEF; + --benefits-recs-icon-fill: #3B3A48; + --benefits-recs-text-color: #3B3A48; + --benefits-recs-link-color: #046B99; +} +`; +const defaultCss = /* css */ ` section { - background: var(--benefits-recs-background); + background: var(--benefits-recs-background, #E7EEF9); padding: 1.5rem; max-width: 42.25rem; font-family: system-ui, sans-serif; } h2 { - color: var(--benefits-recs-text-color); + color: var(--benefits-recs-text-color, #3B3A48); font-size: 2.3125rem; font-weight: 700; line-height: 3.17969rem; @@ -31,7 +45,7 @@ h2 { } .lead { - color: var(--benefits-recs-text-color); + color: var(--benefits-recs-text-color, #3B3A48); font-size: 1.4375rem; font-weight: 700; line-height: 2.33594rem; @@ -44,7 +58,7 @@ h2 { } .catalyst { - color: var(--benefits-recs-link-color); + color: var(--benefits-recs-link-color, #165AC2); font-size: 1.125rem; font-weight: 600; line-height: 2rem; @@ -62,8 +76,8 @@ ul.link-list { display: flex; flex-direction: column; border-radius: 0.5rem; - border: 1px solid var(--benefits-recs-list-border-color); - background: var(--benefits-recs-list-background); + border: 1px solid var(--benefits-recs-list-border-color, #D4D4D7); + background: var(--benefits-recs-list-background, #FFF); } ul.link-list li { @@ -72,7 +86,7 @@ ul.link-list li { gap: 0.5rem; list-style: none; padding: 1.5rem; - border-bottom: 1px solid var(--benefits-recs-list-border-color); + border-bottom: 1px solid var(--benefits-recs-list-border-color, #D4D4D7); } ul.link-list li:last-child { @@ -82,7 +96,7 @@ ul.link-list li:last-child { .open-icon { display: inline-flex; margin: 0 0.25rem; - fill: var(--benefits-recs-link-color); + fill: var(--benefits-recs-link-color, #165AC2); } .link-icon { @@ -92,8 +106,8 @@ ul.link-list li:last-child { width: 3.5rem; height: 3.5rem; border-radius: 50%; - background: var(--benefits-recs-icon-background); - fill: var(--benefits-recs-icon-fill); + background: var(--benefits-recs-icon-background, #EDEDEF); + fill: var(--benefits-recs-icon-fill, #003688); } `; @@ -137,6 +151,7 @@ const defaultHtml = (data) => { const defaultTemplate = (data) => /* html */ ` ${defaultHtml(data)} @@ -144,6 +159,7 @@ const defaultTemplate = (data) => /* html */ ` const eddUiTemplate = (data) => /* html */ ` + ${defaultHtml(data)} +`; + exports.generateHtml = (data, hostDef) => { - if (hostDef?.id === "edd_ui_recert") { + const id = hostDef?.id; + + if (id === "edd_ui_recert") { return eddUiTemplate(data); } + if (id === "edd_pfl_submit" || id === "edd_sdi_new") { + return eddSDITemplate(data); + } + return defaultTemplate(data); }; From f067ea1f2c28cb63eeb3abb0d01361045b1c490c Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Thu, 14 Dec 2023 10:43:59 -0800 Subject: [PATCH 5/8] New icons --- src/shared/icons.js | 224 ++++++++++++++++++++++++++++++++------------ 1 file changed, 166 insertions(+), 58 deletions(-) diff --git a/src/shared/icons.js b/src/shared/icons.js index ef66254..186805f 100644 --- a/src/shared/icons.js +++ b/src/shared/icons.js @@ -22,14 +22,42 @@ exports.shock = html` exports.wiFi = html` - + + + + + + + `; @@ -170,105 +198,185 @@ exports.apple = html` exports.energyPlug = html` - - - - + + + + + + `; exports.idBadge = html` - `; exports.babyFace = html` - + + + + - - - - - `; exports.babyBottle = html` - - + + + + + `; exports.waterFaucet = html` - - - + + + + + `; + +exports.carrot = /* html */ ` + + + +`; From 23dd98f3c62962ca74e22570f9fa65e23c4a62ca Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Tue, 26 Dec 2023 11:31:34 -0800 Subject: [PATCH 6/8] Fix Chinese toggle in previewer --- widget/preview/env-picker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/widget/preview/env-picker.js b/widget/preview/env-picker.js index 9f7e900..2658fe4 100644 --- a/widget/preview/env-picker.js +++ b/widget/preview/env-picker.js @@ -78,7 +78,7 @@ const defaultMenus = { }, { id: "zh-Hant", - value: "zh-Hans", + value: "zh-Hant", text: "Chinese (Traditional)", }, ], From 11ef0c81f8f6e94bf81b6daf6f2f6e43afe44b79 Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Tue, 16 Jan 2024 11:37:20 -0800 Subject: [PATCH 7/8] Change AWS tags --- utils/deploy-pr.sh | 2 +- utils/deploy-prod.sh | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/utils/deploy-pr.sh b/utils/deploy-pr.sh index 5e22063..da49866 100644 --- a/utils/deploy-pr.sh +++ b/utils/deploy-pr.sh @@ -29,7 +29,7 @@ echo "PR number: $BENEFITS_RECS_PR_NUMBER" echo "Git branch: $BENEFITS_RECS_INSTANCE_NAME" # Attempt to deploy. This will appear to hang. Just wait for it. -BENEFITS_RECS_DEPLOY_OUTPUT=$(npx arc deploy --name $BENEFITS_RECS_INSTANCE_NAME --tags odieng=benefts-recommender --tags env=development --tags branch=$BENEFITS_RECS_INSTANCE_NAME) +BENEFITS_RECS_DEPLOY_OUTPUT=$(npx arc deploy --name $BENEFITS_RECS_INSTANCE_NAME --tags Project=odieng-benefts-recommender --tags odieng-env=development --tags odieng-purpose=experimental --tags odieng-branch=$BENEFITS_RECS_INSTANCE_NAME) BENEFITS_RECS_DEPLOY_STATUS=$? # If deployment failed, let's bail out here. diff --git a/utils/deploy-prod.sh b/utils/deploy-prod.sh index 569e84f..c937cc5 100644 --- a/utils/deploy-prod.sh +++ b/utils/deploy-prod.sh @@ -2,7 +2,7 @@ echo "\n> Deploying arc.codes app to production." # Attempt to deploy. This will appear to hang. Just wait for it. -npx arc deploy --production --tags odieng=benefts-recommender --tags env=production +npx arc deploy --production --tags Project=odieng-benefts-recommender --tags odieng-env=production --tags odieng-purpose=experimental --tags odieng-branch=main echo "\n> Generating front-end preview assets." npm run widget:build From ca66c2b066856bf088349982f07732881b45c423 Mon Sep 17 00:00:00 2001 From: Jon Jensen Date: Tue, 16 Jan 2024 12:42:20 -0800 Subject: [PATCH 8/8] Switch back to production defs file --- src/shared/s3.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/s3.js b/src/shared/s3.js index 68dabfb..ce82972 100644 --- a/src/shared/s3.js +++ b/src/shared/s3.js @@ -103,7 +103,7 @@ const s3 = new S3Client({}); exports.getDefinitions = async () => { const command = new GetObjectCommand({ Bucket: "cdn.innovation.ca.gov", - Key: "br/benefits-recs-defs-redesign-freeze-2023-12-05.json", + Key: "br/benefits-recs-defs.json", }); return await s3