diff --git a/src/shared/icons.js b/src/shared/icons.js index a0b60d3..186805f 100644 --- a/src/shared/icons.js +++ b/src/shared/icons.js @@ -9,32 +9,55 @@ exports.shock = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; exports.wiFi = html` - + + + + + + + `; @@ -43,21 +66,16 @@ exports.wiFiWand = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > - `; @@ -67,36 +85,28 @@ exports.foodBasket = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -106,24 +116,19 @@ exports.familyPeople = html` width="35" height="35" viewBox="0 0 69 69" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -133,12 +138,10 @@ exports.moneyStack = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -148,14 +151,12 @@ exports.taxBook = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -165,20 +166,17 @@ exports.waterDrops = html` width="35" height="35" viewBox="0 0 35 35" - fill="none" xmlns="http://www.w3.org/2000/svg" > `; @@ -188,139 +186,197 @@ exports.apple = html` width="40" height="40" viewBox="0 0 40 40" - fill="none" xmlns="http://www.w3.org/2000/svg" > - `; exports.energyPlug = html` - - - - + + + + + + `; exports.idBadge = html` - `; exports.babyFace = html` - + + + + - - - - - `; exports.babyBottle = html` - - + + + + + `; exports.waterFaucet = html` - - - + + + + + `; + +exports.carrot = /* html */ ` + + + +`; 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 diff --git a/src/shared/templates.js b/src/shared/templates.js index ae85fca..4421318 100644 --- a/src/shared/templates.js +++ b/src/shared/templates.js @@ -1,73 +1,73 @@ -const defaultCss = /* css */ ` +const defaultCssVars = /* 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-tagline-font-size: 1.25rem; - --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-tagline-font-size: 0.9375rem; - --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; - } +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-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: var(--benefits-recs-background, #E7EEF9); + 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); + color: var(--benefits-recs-text-color, #3B3A48); + font-size: 2.3125rem; + font-weight: 700; + line-height: 3.17969rem; + margin: 0 0 1.5rem 0; } - -.tagline { - font-size: var(--benefits-recs-tagline-font-size); +@media (max-width: 28.75rem) { + h2 { + font-size: 2.0625rem; + line-height: 2.5625rem; + } } .lead { - font-size: var(--benefits-recs-lead-font-size); + color: var(--benefits-recs-text-color, #3B3A48); + 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; +@media (max-width: 28.75rem) { + .lead { + font-size: 1.25rem; + line-height: 2.03125rem; + } } -h2, .tagline { - margin: 0; +.catalyst { + color: var(--benefits-recs-link-color, #165AC2); + font-size: 1.125rem; + font-weight: 600; + line-height: 2rem; } - -.tagline, .catalyst, .lead { - color: var(--benefits-recs-text-color); +@media (max-width: 28.75rem) { + .catalyst { + font-size: 1rem; + line-height: 1.6875rem; + } } ul.link-list { @@ -75,80 +75,55 @@ 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 var(--benefits-recs-list-border-color, #D4D4D7); + background: var(--benefits-recs-list-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); + flex-direction: column; + gap: 0.5rem; + list-style: none; + padding: 1.5rem; + border-bottom: 1px solid var(--benefits-recs-list-border-color, #D4D4D7); } -.link-start { - display: flex; - gap: var(--benefits-recs-card-gap); - align-items: center; +ul.link-list li:last-child { + border-bottom: none; } -.link-end { - display: flex; - flex-grow: 2; - align-items: center; - gap: var(--benefits-recs-link-end-gap); -} - -.link-icon, .open-icon { - display: inline-flex +.open-icon { + display: inline-flex; + margin: 0 0.25rem; + fill: var(--benefits-recs-link-color, #165AC2); } .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: var(--benefits-recs-icon-background, #EDEDEF); + fill: var(--benefits-recs-icon-fill, #003688); } `; const openIcon = /* html */ ` - - - - - - - - - + + + `; const defaultLinkHtml = (link) => /* html */ `
  • - - - - ${link.lead} - - - ${link.catalyst} - - + + ${link.lead} + + ${link.catalyst}
    • `; @@ -167,7 +142,6 @@ const defaultHtml = (data) => { data-language-selection="${data.language.selection}" >

    ${data.header}

    -

    ${data.tagline}

      ${linkList}
    @@ -177,6 +151,7 @@ const defaultHtml = (data) => { const defaultTemplate = (data) => /* html */ ` ${defaultHtml(data)} @@ -184,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); }; 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 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)", }, ],