Skip to content

Commit

Permalink
MWPW-139129,MWPW-138514,MWPW-138654: Error handling, Progress bar, Ba…
Browse files Browse the repository at this point in the history
…ckground images (#1529)

* MWPW-132437: [Q] Mirror margins for RTL locales (#1480)

MWPW-132437: Mirror margins for RTL locales

* Quiz Results Debugging (#1476)

* MWPW-125561 - UAR Results Block (#636)

* Initial commit
* Basic UAR results
* Nested UAR results
* Style support

Resolves: [MWPW-NUMBER](MWPW-URL)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://uar-integration--milo--adobecom.hlx.page/?martech=off

* UAR Quiz Block Initial Commit (#682)

* Initial commit for question flow in UAR

* Refactoring v1

* Refactoring v2

* Refactoring CSS

* Mwpw 125561 uar results block - data model updates (#680)

* MWPW-125561 - UAR Results Block

* Initial commit
* Basic UAR results
* Nested UAR results
* Style support

Resolves: [MWPW-NUMBER](MWPW-URL)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://uar-integration--milo--adobecom.hlx.page/?martech=off

* Adjustments to match data structure from quizzes

* Finalized UAR Results (#729)

* Finalized UAR Results

* Lana logging  and a debug param to stop redirects (MWPW-125185)
* Set a value for pageload analytics (MWPW-128939)
* Unit tests (MWPW-130870)

Resolves: [MWPW-125185](https://jira.corp.adobe.com/browse/MWPW-125185)

Resolves: [MWPW-128939](https://jira.corp.adobe.com/browse/MWPW-128939)

Resolves: [MWPW-130870](https://jira.corp.adobe.com/browse/MWPW-130870)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://<branch>--milo--adobecom.hlx.page/?martech=off

* Set error strings as an exported variable.

Used the exported variable in unit tests.

* [MWPW-125908] [UAR] Step indicator addition to quiz (#714)

* Step indicator addition to quiz

* Refactored to use visibility for performance

* Hiding stray data

* Refactored quiz js/css to not be hard coded and add padding on mobile

* css refactor for colors, spacing, better selectors

* class naming refactor

* Adding the current locale code to the local storage key (#800)

Co-authored-by: Honwai Wong <honstar.wong@gmail.com>

* [UAR] cards responsive (#844)

* [UAR] Card refinement  (#873)

* spacing fixes, flex for leftover cards, selected card fix

* spacing tweak, dot indicator adjustment

* MWPW-125274 - UAR Analytics (#871)

* Refactoring question flow and adding analytics data

* Adding button analytics data

* Setting pageLoadHash in local storage

* Refactoring

* Adding guardrail around result parsing

* MWPW-133219: Hide default content before the preact app loads (#898)

* Hide the original, classless div elements within the quiz block by default. Then use a specific selector to restore the wrapper div added by the preact app.

* Hide div elements within the quiz that aren't marked with a specific class of their own

* Removing code to hide siblings of .quiz-container since they will already be hidden

* MWPW-127110 - Quiz footer fragment based on string.json (#895)

* quiz footer fragment Loader

* quiz footer fragment

* quiz footer fragment

* quiz footer fragment

* quiz footer fragment

* test

* test

* stepIndicator correction

---------

Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>

* MWPW-133738: Use a different comparison to process question values (#949)

* MWPW-133759 - Adding logic to account for single products grouped together (#941)

* Adding logic to account for single product grouped together

* Refactoring

* MWPW-133268 - Rename uar-results to quiz-results (#962)

* renamed all block files and references
* updated unit tests
* updated debug query params

Resolves: [MWPW-133268](https://jira.corp.adobe.com/browse/MWPW-133268)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://<branch>--milo--adobecom.hlx.page/?martech=off

* [UAR] - Alternate quiz data (#953)

* MWPW-126143 added alternate path for JSON data via search params

* empty

* Fixed step indicator

* Changed to use layouteffect, tests

* Reverted slash in query param scenario

* Refactored tests and quiz url sourcing

* MWPW-134269 - Adding nested fragments based upon the primary product as well as secondary (#1071)

* Adding nested fragments based on primary and secondary products

* Refactoring

* Refactoring - v2

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-134131 - Fixing issue when there are more than one rule with same number of grouping (#1112)

* Fixing issue when there are more than one rule with same number of grouping

* Addressing review comments

* MWPW-135198 - Optimizes quiz-results DOM handling (#1117)

* Removed a querySelectorAll
* Removed iteration through metadata divs
* Add lana logging if the block has been misconfigured

Resolves: [MWPW-135198](https://jira.corp.adobe.com/browse/MWPW-135198)

* MWPW-132277 - Breakpoint content for Quiz Results (#1128)

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* setting phone-only as default

---------

Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Narcis Radu <github@narcisradu.ro>

* MWPW-135125 Quiz button fix  (#1153)

* button responsive fix

* height setting to min-height

---------

Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: Erich Champion <echampio@adobe.com>

* [UAR] Quiz URL States (#1149)

* Managing state via url, support back button, hydrate state with params

* Refactored url management & handled existing redirect params from results.json

* added handler for back button with known params present

* Defered popstate

* Refactored to fix errors

* Fixed back button click new option bug

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-134986 - Rendering nested fragments in the order of products (#1186)

Rendering nested fragments in the order of products

* MWPW-134823 - QUIZ - Fix Acessibility warning (#1192)

clean up lorems

Co-authored-by: Elaine Borges <borges@laines-mac-pro.home>

* MWPW-135442 - Fixing the issue of NOT operator when the order of selection is changed (#1200)

* Fixing the issue of NOT operator when the order of selection is changed

* Refactoring

* MWPW-135903: If nestedObject[fragKey] exists, append to it instead of replacing (#1208)

* MWPW-135903: If nestedObject[fragKey] exists, append to it instead of replacing

* MWPW-135903: Feedback from Okan

* MWPW-135296 - Quiz css and related markup cleanup (#1219)

* MWPW-135296 - Quiz css and related markup cleanup

* Drastically simplifies quiz css, removing unused css
* Simplified markup, removing unused classes and standardizing the rest
* Remove caas related css and classes that were creating linting errors
* add icon and cover-image types to cards
* add top and bottom classes to progress indicators
* set all styling to match the comps from consonant for all devices

Resolves: [MWPW-135296](https://jira.corp.adobe.com/browse/MWPW-135296)

* fix word breaking on card text

* pr feedback adjustments

* MWPW-125774 - Quiz block accessibility (#1243)

* MWPW-125774 - Quiz block accessibility

* Quiz options can now be tabbed to with the keyboard
* Quiz options can be activated with space or enter keys
* Focus is reset to the top of the quiz when moving to the next question

Resolves: [MWPW-125774](https://jira.corp.adobe.com/browse/MWPW-125774)

* PR feedback to adjust mobile quiz-option width

* fix for icons shrinking on mobile longer text

* MWPW-133119 - Adding Unit Tests for Quiz (Utils.js) (#1254)

* Adding unit tests for quiz

* Refactoring

* Refactoring again

* Quiz tests (#1260)

* MWPW-134984, tests.

* cleanup

* Remove file

* MWPW-136619: Update CODEOWNERS for quiz and quiz-results (#1280)

* MWPW-136619: Update CODEOWNERS for quiz and quiz-results

* MWPW-136619: Removing extra @

* Update libs/blocks/quiz-results/quiz-results.js

adjust logged message for analytics when in debug

Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>

* PR 1264 quiz.js feedback refactor (#1289)

* PR 1264 quiz.js feedback refactor

* Clarifying const naming

* MWPW-136688 Added quiz and quiz results to MILO_BLOCKS (#1299)

Added quiz and quiz results to MILO_BLOCKS

* PR 1264 quiz_results.js feedback (#1298)

Resolves quiz-results.js feedback in PR #1264

* PR 1264 utils.js feedback refactor (#1329)

* Addressing review comments for the main PR

* Refactoring

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-135730 - Results card-list alignment correction (#1349)

results card-list alignment correction

Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-115213 - Addressing review comments (#1356)

* MWPW-136165 - Background reset for quiz footer (#1379)

* Allow section metadata dark with static links style without background

Resolves: [MWPW-136165](https://jira.corp.adobe.com/browse/MWPW-136165)

* MWPW-136162 [UAR] Refactored last step signal to dot indicators (#1369)

* MWPW-136162 Refactored last step signal to dot indicators

* MWPW-136162 refactored empty array

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-135119: redirect to result page if next is valid URL

* Revert "MWPW-135119: redirect to result page if next is valid URL"

This reverts commit 9d43c15.

* MWPW-137456 refactored for last step detection (#1400)

* Quiz property name updates (#1413)

* MWPW-137651 - Quiz property name adjustments

* Renamed properties to make them more author friendly

Resolves: [MWPW-137651](https://jira.corp.adobe.com/browse/MWPW-137651)

* pr feedback fixes for storage

* MWPW-135119: Redirect to result pages without loading results.json (#1403)

* update divider-inherit css to support different color divider

* MWPW-135119: redirect to result page if next is valid URL

* fix eslint error

* update code according to feedback

* fix eslint

---------

Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local>
Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-136372 - Fixing stuffs to make performance great again.. (#1429)

* Fixing stuffs to make performance great again..

* Refactoring

* Fixing tests

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-137193 quiz-result validation improvements (#1451)

MWPW-137193 - Quiz results validation improvements

* checks for an empty basic fragment object

Resolves: [MWPW-137193](https://jira.corp.adobe.com/browse/MWPW-137193)

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-125569 Adds debugging functionality, cleans code

* removed handlePopState and cleaned up eslint messages.

* Cleaned up URL better

* Console.log support for paper trail

* added promise to prevent race condition not copying

* Update quiz.js

---------

Co-authored-by: Cody Lloyd <119891065+colloyd@users.noreply.github.com>
Co-authored-by: Erich Champion <echampio@adobe.com>
Co-authored-by: Sabya <sabyasachi.exe@gmail.com>
Co-authored-by: Honwai Wong <honstar.wong@gmail.com>
Co-authored-by: Elaine Borges <62952234+elaineskpt@users.noreply.github.com>
Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local>
Co-authored-by: Narcis Radu <github@narcisradu.ro>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.home>
Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>
Co-authored-by: Jacky Sun <67350368+JackySun9@users.noreply.github.com>

* MWPW-138713: [Q] Bogus dependency of step indicator on background (#1482)

* MWPW-139129: Quiz errors when no matchedResults (#1527)

* MWPW-139129: Quiz errors when no matchedResults

* MWPW-139129: Update unit tests and fix lint errors

* MWPW-139129: Improving unit test messages

* MWPW-138514 - Short quiz dots (#1577)

* MWPW-125561 - UAR Results Block (#636)

* Initial commit
* Basic UAR results
* Nested UAR results
* Style support

Resolves: [MWPW-NUMBER](MWPW-URL)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://uar-integration--milo--adobecom.hlx.page/?martech=off

* UAR Quiz Block Initial Commit (#682)

* Initial commit for question flow in UAR

* Refactoring v1

* Refactoring v2

* Refactoring CSS

* Mwpw 125561 uar results block - data model updates (#680)

* MWPW-125561 - UAR Results Block

* Initial commit
* Basic UAR results
* Nested UAR results
* Style support

Resolves: [MWPW-NUMBER](MWPW-URL)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://uar-integration--milo--adobecom.hlx.page/?martech=off

* Adjustments to match data structure from quizzes

* Finalized UAR Results (#729)

* Finalized UAR Results

* Lana logging  and a debug param to stop redirects (MWPW-125185)
* Set a value for pageload analytics (MWPW-128939)
* Unit tests (MWPW-130870)

Resolves: [MWPW-125185](https://jira.corp.adobe.com/browse/MWPW-125185)

Resolves: [MWPW-128939](https://jira.corp.adobe.com/browse/MWPW-128939)

Resolves: [MWPW-130870](https://jira.corp.adobe.com/browse/MWPW-130870)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://<branch>--milo--adobecom.hlx.page/?martech=off

* Set error strings as an exported variable.

Used the exported variable in unit tests.

* [MWPW-125908] [UAR] Step indicator addition to quiz (#714)

* Step indicator addition to quiz

* Refactored to use visibility for performance

* Hiding stray data

* Refactored quiz js/css to not be hard coded and add padding on mobile

* css refactor for colors, spacing, better selectors

* class naming refactor

* Adding the current locale code to the local storage key (#800)

Co-authored-by: Honwai Wong <honstar.wong@gmail.com>

* [UAR] cards responsive (#844)

* [UAR] Card refinement  (#873)

* spacing fixes, flex for leftover cards, selected card fix

* spacing tweak, dot indicator adjustment

* MWPW-125274 - UAR Analytics (#871)

* Refactoring question flow and adding analytics data

* Adding button analytics data

* Setting pageLoadHash in local storage

* Refactoring

* Adding guardrail around result parsing

* MWPW-133219: Hide default content before the preact app loads (#898)

* Hide the original, classless div elements within the quiz block by default. Then use a specific selector to restore the wrapper div added by the preact app.

* Hide div elements within the quiz that aren't marked with a specific class of their own

* Removing code to hide siblings of .quiz-container since they will already be hidden

* MWPW-127110 - Quiz footer fragment based on string.json (#895)

* quiz footer fragment Loader

* quiz footer fragment

* quiz footer fragment

* quiz footer fragment

* quiz footer fragment

* test

* test

* stepIndicator correction

---------

Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>

* MWPW-133738: Use a different comparison to process question values (#949)

* MWPW-133759 - Adding logic to account for single products grouped together (#941)

* Adding logic to account for single product grouped together

* Refactoring

* MWPW-133268 - Rename uar-results to quiz-results (#962)

* renamed all block files and references
* updated unit tests
* updated debug query params

Resolves: [MWPW-133268](https://jira.corp.adobe.com/browse/MWPW-133268)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://<branch>--milo--adobecom.hlx.page/?martech=off

* [UAR] - Alternate quiz data (#953)

* MWPW-126143 added alternate path for JSON data via search params

* empty

* Fixed step indicator

* Changed to use layouteffect, tests

* Reverted slash in query param scenario

* Refactored tests and quiz url sourcing

* MWPW-134269 - Adding nested fragments based upon the primary product as well as secondary (#1071)

* Adding nested fragments based on primary and secondary products

* Refactoring

* Refactoring - v2

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-134131 - Fixing issue when there are more than one rule with same number of grouping (#1112)

* Fixing issue when there are more than one rule with same number of grouping

* Addressing review comments

* MWPW-135198 - Optimizes quiz-results DOM handling (#1117)

* Removed a querySelectorAll
* Removed iteration through metadata divs
* Add lana logging if the block has been misconfigured

Resolves: [MWPW-135198](https://jira.corp.adobe.com/browse/MWPW-135198)

* MWPW-132277 - Breakpoint content for Quiz Results (#1128)

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* setting phone-only as default

---------

Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Narcis Radu <github@narcisradu.ro>

* MWPW-135125 Quiz button fix  (#1153)

* button responsive fix

* height setting to min-height

---------

Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: Erich Champion <echampio@adobe.com>

* [UAR] Quiz URL States (#1149)

* Managing state via url, support back button, hydrate state with params

* Refactored url management & handled existing redirect params from results.json

* added handler for back button with known params present

* Defered popstate

* Refactored to fix errors

* Fixed back button click new option bug

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-134986 - Rendering nested fragments in the order of products (#1186)

Rendering nested fragments in the order of products

* MWPW-134823 - QUIZ - Fix Acessibility warning (#1192)

clean up lorems

Co-authored-by: Elaine Borges <borges@laines-mac-pro.home>

* MWPW-135442 - Fixing the issue of NOT operator when the order of selection is changed (#1200)

* Fixing the issue of NOT operator when the order of selection is changed

* Refactoring

* MWPW-135903: If nestedObject[fragKey] exists, append to it instead of replacing (#1208)

* MWPW-135903: If nestedObject[fragKey] exists, append to it instead of replacing

* MWPW-135903: Feedback from Okan

* MWPW-135296 - Quiz css and related markup cleanup (#1219)

* MWPW-135296 - Quiz css and related markup cleanup

* Drastically simplifies quiz css, removing unused css
* Simplified markup, removing unused classes and standardizing the rest
* Remove caas related css and classes that were creating linting errors
* add icon and cover-image types to cards
* add top and bottom classes to progress indicators
* set all styling to match the comps from consonant for all devices

Resolves: [MWPW-135296](https://jira.corp.adobe.com/browse/MWPW-135296)

* fix word breaking on card text

* pr feedback adjustments

* MWPW-125774 - Quiz block accessibility (#1243)

* MWPW-125774 - Quiz block accessibility

* Quiz options can now be tabbed to with the keyboard
* Quiz options can be activated with space or enter keys
* Focus is reset to the top of the quiz when moving to the next question

Resolves: [MWPW-125774](https://jira.corp.adobe.com/browse/MWPW-125774)

* PR feedback to adjust mobile quiz-option width

* fix for icons shrinking on mobile longer text

* MWPW-133119 - Adding Unit Tests for Quiz (Utils.js) (#1254)

* Adding unit tests for quiz

* Refactoring

* Refactoring again

* Quiz tests (#1260)

* MWPW-134984, tests.

* cleanup

* Remove file

* MWPW-136619: Update CODEOWNERS for quiz and quiz-results (#1280)

* MWPW-136619: Update CODEOWNERS for quiz and quiz-results

* MWPW-136619: Removing extra @

* Update libs/blocks/quiz-results/quiz-results.js

adjust logged message for analytics when in debug

Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>

* PR 1264 quiz.js feedback refactor (#1289)

* PR 1264 quiz.js feedback refactor

* Clarifying const naming

* MWPW-136688 Added quiz and quiz results to MILO_BLOCKS (#1299)

Added quiz and quiz results to MILO_BLOCKS

* PR 1264 quiz_results.js feedback (#1298)

Resolves quiz-results.js feedback in PR #1264

* PR 1264 utils.js feedback refactor (#1329)

* Addressing review comments for the main PR

* Refactoring

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-135730 - Results card-list alignment correction (#1349)

results card-list alignment correction

Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-115213 - Addressing review comments (#1356)

* MWPW-136165 - Background reset for quiz footer (#1379)

* Allow section metadata dark with static links style without background

Resolves: [MWPW-136165](https://jira.corp.adobe.com/browse/MWPW-136165)

* MWPW-136162 [UAR] Refactored last step signal to dot indicators (#1369)

* MWPW-136162 Refactored last step signal to dot indicators

* MWPW-136162 refactored empty array

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-135119: redirect to result page if next is valid URL

* Revert "MWPW-135119: redirect to result page if next is valid URL"

This reverts commit 9d43c15.

* MWPW-137456 refactored for last step detection (#1400)

* Quiz property name updates (#1413)

* MWPW-137651 - Quiz property name adjustments

* Renamed properties to make them more author friendly

Resolves: [MWPW-137651](https://jira.corp.adobe.com/browse/MWPW-137651)

* pr feedback fixes for storage

* MWPW-135119: Redirect to result pages without loading results.json (#1403)

* update divider-inherit css to support different color divider

* MWPW-135119: redirect to result page if next is valid URL

* fix eslint error

* update code according to feedback

* fix eslint

---------

Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local>
Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-136372 - Fixing stuffs to make performance great again.. (#1429)

* Fixing stuffs to make performance great again..

* Refactoring

* Fixing tests

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-137193 quiz-result validation improvements (#1451)

MWPW-137193 - Quiz results validation improvements

* checks for an empty basic fragment object

Resolves: [MWPW-137193](https://jira.corp.adobe.com/browse/MWPW-137193)

Co-authored-by: Erich Champion <echampio@adobe.com>

* Added author support for short quiz dots

* Linting

* Correct order

* Update utils.js

Linting

---------

Co-authored-by: Cody Lloyd <119891065+colloyd@users.noreply.github.com>
Co-authored-by: Erich Champion <echampio@adobe.com>
Co-authored-by: Sabya <sabyasachi.exe@gmail.com>
Co-authored-by: Honwai Wong <honstar.wong@gmail.com>
Co-authored-by: Elaine Borges <62952234+elaineskpt@users.noreply.github.com>
Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local>
Co-authored-by: Narcis Radu <github@narcisradu.ro>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.home>
Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>
Co-authored-by: Jacky Sun <67350368+JackySun9@users.noreply.github.com>

* MWPW-138654 - Quiz breakpoint icons and background (#1567)

* MWPW-138654 - Quiz breakpoint icons and background

* Icon and image column renamed for clarity in strings sheet
* icon-background-color support for strings > questions sheet
* icon-tablet and icon-desktop support added for each option

Resolves: [MWPW-138654](https://jira.corp.adobe.com/browse/MWPW-138654)

* PR feedback on icon alt tags

* Optimizations including lazy loading and srcset

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* [UAR] Test Coverage Improvement  (#1597)

* MWPW-125561 - UAR Results Block (#636)

* Initial commit
* Basic UAR results
* Nested UAR results
* Style support

Resolves: [MWPW-NUMBER](MWPW-URL)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://uar-integration--milo--adobecom.hlx.page/?martech=off

* UAR Quiz Block Initial Commit (#682)

* Initial commit for question flow in UAR

* Refactoring v1

* Refactoring v2

* Refactoring CSS

* Mwpw 125561 uar results block - data model updates (#680)

* MWPW-125561 - UAR Results Block

* Initial commit
* Basic UAR results
* Nested UAR results
* Style support

Resolves: [MWPW-NUMBER](MWPW-URL)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://uar-integration--milo--adobecom.hlx.page/?martech=off

* Adjustments to match data structure from quizzes

* Finalized UAR Results (#729)

* Finalized UAR Results

* Lana logging  and a debug param to stop redirects (MWPW-125185)
* Set a value for pageload analytics (MWPW-128939)
* Unit tests (MWPW-130870)

Resolves: [MWPW-125185](https://jira.corp.adobe.com/browse/MWPW-125185)

Resolves: [MWPW-128939](https://jira.corp.adobe.com/browse/MWPW-128939)

Resolves: [MWPW-130870](https://jira.corp.adobe.com/browse/MWPW-130870)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://<branch>--milo--adobecom.hlx.page/?martech=off

* Set error strings as an exported variable.

Used the exported variable in unit tests.

* [MWPW-125908] [UAR] Step indicator addition to quiz (#714)

* Step indicator addition to quiz

* Refactored to use visibility for performance

* Hiding stray data

* Refactored quiz js/css to not be hard coded and add padding on mobile

* css refactor for colors, spacing, better selectors

* class naming refactor

* Adding the current locale code to the local storage key (#800)

Co-authored-by: Honwai Wong <honstar.wong@gmail.com>

* [UAR] cards responsive (#844)

* [UAR] Card refinement  (#873)

* spacing fixes, flex for leftover cards, selected card fix

* spacing tweak, dot indicator adjustment

* MWPW-125274 - UAR Analytics (#871)

* Refactoring question flow and adding analytics data

* Adding button analytics data

* Setting pageLoadHash in local storage

* Refactoring

* Adding guardrail around result parsing

* MWPW-133219: Hide default content before the preact app loads (#898)

* Hide the original, classless div elements within the quiz block by default. Then use a specific selector to restore the wrapper div added by the preact app.

* Hide div elements within the quiz that aren't marked with a specific class of their own

* Removing code to hide siblings of .quiz-container since they will already be hidden

* MWPW-127110 - Quiz footer fragment based on string.json (#895)

* quiz footer fragment Loader

* quiz footer fragment

* quiz footer fragment

* quiz footer fragment

* quiz footer fragment

* test

* test

* stepIndicator correction

---------

Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>

* MWPW-133738: Use a different comparison to process question values (#949)

* MWPW-133759 - Adding logic to account for single products grouped together (#941)

* Adding logic to account for single product grouped together

* Refactoring

* MWPW-133268 - Rename uar-results to quiz-results (#962)

* renamed all block files and references
* updated unit tests
* updated debug query params

Resolves: [MWPW-133268](https://jira.corp.adobe.com/browse/MWPW-133268)

**Test URLs:**
- Before: https://main--milo--adobecom.hlx.page/?martech=off
- After: https://<branch>--milo--adobecom.hlx.page/?martech=off

* [UAR] - Alternate quiz data (#953)

* MWPW-126143 added alternate path for JSON data via search params

* empty

* Fixed step indicator

* Changed to use layouteffect, tests

* Reverted slash in query param scenario

* Refactored tests and quiz url sourcing

* MWPW-134269 - Adding nested fragments based upon the primary product as well as secondary (#1071)

* Adding nested fragments based on primary and secondary products

* Refactoring

* Refactoring - v2

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-134131 - Fixing issue when there are more than one rule with same number of grouping (#1112)

* Fixing issue when there are more than one rule with same number of grouping

* Addressing review comments

* MWPW-135198 - Optimizes quiz-results DOM handling (#1117)

* Removed a querySelectorAll
* Removed iteration through metadata divs
* Add lana logging if the block has been misconfigured

Resolves: [MWPW-135198](https://jira.corp.adobe.com/browse/MWPW-135198)

* MWPW-132277 - Breakpoint content for Quiz Results (#1128)

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* MWPW-132277 work in progress

* setting phone-only as default

---------

Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Narcis Radu <github@narcisradu.ro>

* MWPW-135125 Quiz button fix  (#1153)

* button responsive fix

* height setting to min-height

---------

Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: Erich Champion <echampio@adobe.com>

* [UAR] Quiz URL States (#1149)

* Managing state via url, support back button, hydrate state with params

* Refactored url management & handled existing redirect params from results.json

* added handler for back button with known params present

* Defered popstate

* Refactored to fix errors

* Fixed back button click new option bug

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-134986 - Rendering nested fragments in the order of products (#1186)

Rendering nested fragments in the order of products

* MWPW-134823 - QUIZ - Fix Acessibility warning (#1192)

clean up lorems

Co-authored-by: Elaine Borges <borges@laines-mac-pro.home>

* MWPW-135442 - Fixing the issue of NOT operator when the order of selection is changed (#1200)

* Fixing the issue of NOT operator when the order of selection is changed

* Refactoring

* MWPW-135903: If nestedObject[fragKey] exists, append to it instead of replacing (#1208)

* MWPW-135903: If nestedObject[fragKey] exists, append to it instead of replacing

* MWPW-135903: Feedback from Okan

* MWPW-135296 - Quiz css and related markup cleanup (#1219)

* MWPW-135296 - Quiz css and related markup cleanup

* Drastically simplifies quiz css, removing unused css
* Simplified markup, removing unused classes and standardizing the rest
* Remove caas related css and classes that were creating linting errors
* add icon and cover-image types to cards
* add top and bottom classes to progress indicators
* set all styling to match the comps from consonant for all devices

Resolves: [MWPW-135296](https://jira.corp.adobe.com/browse/MWPW-135296)

* fix word breaking on card text

* pr feedback adjustments

* MWPW-125774 - Quiz block accessibility (#1243)

* MWPW-125774 - Quiz block accessibility

* Quiz options can now be tabbed to with the keyboard
* Quiz options can be activated with space or enter keys
* Focus is reset to the top of the quiz when moving to the next question

Resolves: [MWPW-125774](https://jira.corp.adobe.com/browse/MWPW-125774)

* PR feedback to adjust mobile quiz-option width

* fix for icons shrinking on mobile longer text

* MWPW-133119 - Adding Unit Tests for Quiz (Utils.js) (#1254)

* Adding unit tests for quiz

* Refactoring

* Refactoring again

* Quiz tests (#1260)

* MWPW-134984, tests.

* cleanup

* Remove file

* MWPW-136619: Update CODEOWNERS for quiz and quiz-results (#1280)

* MWPW-136619: Update CODEOWNERS for quiz and quiz-results

* MWPW-136619: Removing extra @

* Update libs/blocks/quiz-results/quiz-results.js

adjust logged message for analytics when in debug

Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>

* PR 1264 quiz.js feedback refactor (#1289)

* PR 1264 quiz.js feedback refactor

* Clarifying const naming

* MWPW-136688 Added quiz and quiz results to MILO_BLOCKS (#1299)

Added quiz and quiz results to MILO_BLOCKS

* PR 1264 quiz_results.js feedback (#1298)

Resolves quiz-results.js feedback in PR #1264

* PR 1264 utils.js feedback refactor (#1329)

* Addressing review comments for the main PR

* Refactoring

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-135730 - Results card-list alignment correction (#1349)

results card-list alignment correction

Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-115213 - Addressing review comments (#1356)

* MWPW-136165 - Background reset for quiz footer (#1379)

* Allow section metadata dark with static links style without background

Resolves: [MWPW-136165](https://jira.corp.adobe.com/browse/MWPW-136165)

* MWPW-136162 [UAR] Refactored last step signal to dot indicators (#1369)

* MWPW-136162 Refactored last step signal to dot indicators

* MWPW-136162 refactored empty array

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-135119: redirect to result page if next is valid URL

* Revert "MWPW-135119: redirect to result page if next is valid URL"

This reverts commit 9d43c15.

* MWPW-137456 refactored for last step detection (#1400)

* Quiz property name updates (#1413)

* MWPW-137651 - Quiz property name adjustments

* Renamed properties to make them more author friendly

Resolves: [MWPW-137651](https://jira.corp.adobe.com/browse/MWPW-137651)

* pr feedback fixes for storage

* MWPW-135119: Redirect to result pages without loading results.json (#1403)

* update divider-inherit css to support different color divider

* MWPW-135119: redirect to result page if next is valid URL

* fix eslint error

* update code according to feedback

* fix eslint

---------

Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local>
Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-136372 - Fixing stuffs to make performance great again.. (#1429)

* Fixing stuffs to make performance great again..

* Refactoring

* Fixing tests

---------

Co-authored-by: Erich Champion <echampio@adobe.com>

* MWPW-137193 quiz-result validation improvements (#1451)

MWPW-137193 - Quiz results validation improvements

* checks for an empty basic fragment object

Resolves: [MWPW-137193](https://jira.corp.adobe.com/browse/MWPW-137193)

Co-authored-by: Erich Champion <echampio@adobe.com>

* Improved test coverage

* cleanup

* lint fix

---------

Co-authored-by: Cody Lloyd <119891065+colloyd@users.noreply.github.com>
Co-authored-by: Erich Champion <echampio@adobe.com>
Co-authored-by: Sabya <sabyasachi.exe@gmail.com>
Co-authored-by: Honwai Wong <honstar.wong@gmail.com>
Co-authored-by: Elaine Borges <62952234+elaineskpt@users.noreply.github.com>
Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local>
Co-authored-by: Narcis Radu <github@narcisradu.ro>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.home>
Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>
Co-authored-by: Jacky Sun <67350368+JackySun9@users.noreply.github.com>

---------

Co-authored-by: Brad Johnson <fullcolorcoder@gmail.com>
Co-authored-by: Cody Lloyd <119891065+colloyd@users.noreply.github.com>
Co-authored-by: Sabya <sabyasachi.exe@gmail.com>
Co-authored-by: Honwai Wong <honstar.wong@gmail.com>
Co-authored-by: Elaine Borges <62952234+elaineskpt@users.noreply.github.com>
Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com>
Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local>
Co-authored-by: Narcis Radu <github@narcisradu.ro>
Co-authored-by: Elaine Borges <borges@laines-mac-pro.home>
Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com>
Co-authored-by: Jacky Sun <67350368+JackySun9@users.noreply.github.com>
Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
  • Loading branch information
14 people authored Dec 4, 2023
1 parent 699fadc commit f56e2f2
Show file tree
Hide file tree
Showing 7 changed files with 357 additions and 85 deletions.
91 changes: 62 additions & 29 deletions libs/blocks/quiz/quiz.css
Original file line number Diff line number Diff line change
Expand Up @@ -62,44 +62,47 @@
}

.quiz-option {
align-items: center;
align-items: stretch;
background-color: #efefef;
border: 1px solid var(--color-white);
border-radius: 0.5rem;
cursor: pointer;
display: flex;
margin: 0 0 16px;
padding: 16px 24px;
padding: 0;
user-select: none;
width: 100%;
}

.quiz-option-icon {
align-items: center;
background-color: var(--quiz-icon-bg);
border-radius: 0.5rem 0 0 0.5rem;
display: flex;
line-height: 0;
margin-right: 16px;
padding: 0 24px;
}

.quiz-option-icon img {
height: var(--icon-size-l);
width: var(--icon-size-l);
max-width: var(--icon-size-l);
}

html[dir="rtl"] .quiz-option-icon {
margin-left: 16px;
border-radius: 0 0.5rem 0.5rem 0;
}

.quiz-option-icon img {
height: var(--icon-size-m);
width: var(--icon-size-m);
max-width: var(--icon-size-m);
.quiz-option.has-icon .no-icon-default {
display: none;
}

.quiz-option-image {
display: flex;
height: 46px;
margin-right: 16px;
object-fit: cover;
width: 46px;
display: none;
}

html[dir="rtl"] .quiz-option-image {
margin-left: 16px;
.quiz-option-text-container {
padding: 26px;
}

.quiz-option-title {
Expand All @@ -124,14 +127,26 @@ html[dir="rtl"] .quiz-option-image {
background-color: var(--color-white);
}

.quiz-option:hover .quiz-option-icon {
background-color: color-mix(in srgb, var(--quiz-icon-bg) 70%, var(--color-white));
}

.quiz-option:focus-visible {
background-color: #fafafaee;
}

.quiz-option:focus-visible .quiz-option-icon {
background-color: color-mix(in srgb, var(--quiz-icon-bg) 80%, var(--color-white));
}

.quiz-option.selected {
background-color: var(--color-white);
}

.quiz-option.selected .quiz-option-icon {
background-color: color-mix(in srgb, var(--quiz-icon-bg) 70%, var(--color-white));
}

.quiz-option.selected .quiz-option-title {
color: var(--link-hover-color-dark);
}
Expand Down Expand Up @@ -280,7 +295,8 @@ html[dir="rtl"] .quiz-step::after {
background: inherit;
}

@media screen and (min-width: 768px) {
/* Tablet up */
@media screen and (min-width: 600px) {
.quiz-foreground {
margin: var(--spacing-xxxl) 0;
}
Expand Down Expand Up @@ -309,35 +325,33 @@ html[dir="rtl"] .quiz-step::after {
}

.quiz-option {
align-items: stretch;
background-color: #fafafacc;
box-shadow: 10px 10px 6px 0 #00000029;
flex-direction: column;
height: 100%;
margin: 0;
min-height: 224px;
padding: 0;
width: 172px;
}

.quiz-option-icon {
align-items: center;
border-radius: 0.5rem 0.5rem 0 0;
justify-content: center;
margin-right: 0;
min-height: 126px;
}

html[dir="rtl"] .quiz-option-icon {
margin-left: 0;
}

.quiz-option-icon img {
height: var(--icon-size-xl);
width: var(--icon-size-xl);
max-width: 100%;
}

html[dir="rtl"] .quiz-option-icon {
border-radius: 0.5rem 0.5rem 0 0;
}

.quiz-option-image {
display: flex;
align-items: center;
border-radius: 0.5rem 0.5rem 0 0;
justify-content: center;
Expand All @@ -346,22 +360,29 @@ html[dir="rtl"] .quiz-step::after {
width: auto;
}

.quiz-option.has-icon.quiz-option.has-image .no-icon-tablet,
.quiz-option.has-icon .quiz-option-image {
display: none;
}

.quiz-option.has-icon .no-icon-tablet ~ .quiz-option-image,
.quiz-option.has-icon .no-icon-default {
display: flex;
}

.quiz-option-text-container {
padding: 6px 16px 24px;
}

.quiz-option[data-option-type="cover-image"] .quiz-option-text-container {
.quiz-option.has-image .quiz-option-text-container,
.quiz-option.has-background .quiz-option-text-container {
padding: 24px 16px;
}

.quiz-option-title {
display: block;
}

.quiz-option[data-option-type="cover-image"] .quiz-option-title {
margin: 0;
}

.quiz-option.selected .quiz-option-text {
font-weight: normal;
}
Expand All @@ -387,6 +408,18 @@ html[dir="rtl"] .quiz-step::after {
}
}

/* Desktop */
@media screen and (min-width: 1024px) {
.quiz-option.has-image .quiz-option-icon {
display: none;
}

.quiz-option.has-icon .quiz-option-image {
display: flex;
}
}

/* Desktop wide */
@media screen and (min-width: 1200px) {
.quiz-step-container.wide {
width: 360px;
Expand Down
27 changes: 20 additions & 7 deletions libs/blocks/quiz/quiz.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,24 @@ export async function loadFragments(fragmentURL) {

const App = ({
initialIsDataLoaded = false,
preQuestions = {}, initialStrings = {},
preQuestions = {}, initialStrings = {}, shortQuiz: isShortQuiz = false,
preselections = [], nextQuizViewsExist: preNextQuizViewsExist = true,
}) => {
const [btnAnalytics, setBtnAnalytics] = useState(null);
const [countSelectedCards, setCountOfSelectedCards] = useState(0);
const [currentStep, setCurrentStep] = useState(0);
const [isDataLoaded, setDataLoaded] = useState(initialIsDataLoaded);
const [nextQuizViewsExist, setNextQuizViewsExist] = useState(true);
const [nextQuizViewsExist, setNextQuizViewsExist] = useState(preNextQuizViewsExist);
const [prevStepIndicator, setPrevStepIndicator] = useState([]);
const [questionData, setQuestionData] = useState(preQuestions.questionData || {});
const [questionList, setQuestionList] = useState(preQuestions.questionList || {});
const [selectedCards, setSelectedCards] = useState({});
const [selectedQuestion, setSelectedQuestion] = useState(preQuestions || null);
const [stringData, setStringData] = useState(initialStrings || {});
const [stringQList, setStringQList] = useState(preQuestions.stringQList || {});
const [totalSteps, setTotalSteps] = useState(3);
const [totalSteps, setTotalSteps] = useState(isShortQuiz ? 2 : 3);
const initialUrlParams = getUrlParams();
const [userSelection, updateUserSelection] = useState([]);
const [userSelection, updateUserSelection] = useState(preselections);
const [userFlow, setUserFlow] = useState([]);
const validQuestions = useMemo(() => [], []);
const [debugBuild, setDebugBuild] = useState(null);
Expand Down Expand Up @@ -258,6 +259,10 @@ const App = ({
if (fragmentURL) {
loadFragments(fragmentURL);
}
const iconBg = getStringValue('icon-background-color');
if (iconBg) {
document.querySelector('.quiz-container').style.setProperty('--quiz-icon-bg', iconBg);
}
}, [selectedQuestion, stringQList]);

if (!isDataLoaded || !selectedQuestion) {
Expand Down Expand Up @@ -297,7 +302,8 @@ const App = ({
btnText=${getStringValue('btn')}
minSelections=${minSelections}
maxSelections=${maxSelections}
options=${stringData[selectedQuestion.questions]}
options=${stringData[selectedQuestion.questions]}
background=${getStringValue('icon-background-color')}
countSelectedCards=${countSelectedCards}
selectedCards=${selectedCards}
onOptionClick=${onOptionClick}
Expand All @@ -318,15 +324,22 @@ const App = ({

export default async function init(
el,
shortQuiz,
initialIsDataLoaded = false,
preQuestions = {},
initialStrings = {},
preselections = [],
nextQuizViewsExist = true,
) {
initConfigPathGlob(el);
const configData = initConfigPathGlob(el);
const updatedShortQuiz = shortQuiz || configData.shortQuiz;
el.replaceChildren();
render(html`<${App}
initialIsDataLoaded=${initialIsDataLoaded}
preQuestions=${preQuestions}
initialStrings=${initialStrings}
initialStrings=${initialStrings}
shortQuiz=${updatedShortQuiz}
preselections=${preselections}
nextQuizViewsExist=${nextQuizViewsExist}
/>`, el);
}
64 changes: 48 additions & 16 deletions libs/blocks/quiz/quizoption.js
Original file line number Diff line number Diff line change
@@ -1,40 +1,71 @@
import { html } from '../../deps/htm-preact.js';

export const OptionCard = ({
text, title, coverImage, cardIcon, options, disabled, selected,
text, title, image, icon, iconTablet, iconDesktop, options, disabled, selected, background,
}) => {
const cardIconHtml = html`<div class="quiz-option-icon">
<img src="${cardIcon}" alt="Quiz Option Icon" />
const getOptionClass = () => {
let className = '';
if (icon || iconTablet || iconDesktop) className += 'has-icon ';
if (image) className += 'has-image ';
if (background) className += 'has-background ';
if (disabled) className += disabled;
if (selected) className += selected;
return className;
};

const getIconClass = () => {
let className = '';
if (!icon) className += 'no-icon-default ';
if (!iconTablet && (icon || iconDesktop)) className += 'no-icon-tablet ';
return className;
};

const getIconHtml = () => html`<div class="quiz-option-icon ${getIconClass()}">
<picture>
${iconDesktop && html`<source media="(min-width: 1024px)" srcset="${iconDesktop}" />`}
${iconTablet && html`<source media="(min-width: 600px)" srcset="${iconTablet}" />`}
<img src="${icon}" alt="${`Icon - ${title || text}`}" loading="lazy" />
</picture>
</div>`;

const coverImageHtml = html`
const imageHtml = html`
<div class="quiz-option-image"
style="background-image: url('${coverImage}')">
style="background-image: url('${image}')" loading="lazy">
</div>`;

return html`<button class="quiz-option ${disabled}${selected}" data-option-name="${options}"
data-option-type="${cardIcon ? 'icon' : ''}${coverImage ? 'cover-image' : ''}"
const titleHtml = html`
<h3 class="quiz-option-title">${title}</h3>
`;

const textHtml = html`
<p class="quiz-option-text">${text}</p>
`;

return html`<button class="quiz-option ${getOptionClass()}" data-option-name="${options}"
aria-pressed="${!!selected}" tabindex="${disabled ? '-1' : '0'}">
${cardIcon && cardIconHtml}
${coverImage && coverImageHtml}
${(icon || iconTablet || iconDesktop) && getIconHtml()}
${image && imageHtml}
<div class="quiz-option-text-container">
<h3 class="quiz-option-title">${title}</h3>
<p class="quiz-option-text">${text}</p>
${title && titleHtml}
${text && textHtml}
</div>
</button>`;
};

export const CreateOptions = ({
options, handleCardSelection, selectedCards, countSelectedCards = 0, maxSelections,
getOptionsIcons,
getOptionsIcons, background,
}) => html`
${options?.data.map((option, index) => (
html`<div key=${index} onClick=${handleCardSelection(option)}>
<${OptionCard}
text=${option.text}
title=${option.title}
cardIcon=${getOptionsIcons(option.options, 'image')}
coverImage=${getOptionsIcons(option.options, 'cover')}
icon=${getOptionsIcons(option.options, 'icon')}
iconTablet=${getOptionsIcons(option.options, 'icon-tablet')}
iconDesktop=${getOptionsIcons(option.options, 'icon-desktop')}
image=${getOptionsIcons(option.options, 'image')}
background=${background}
options=${option.options}
selected=${selectedCards[option.options] ? 'selected' : ''}
disabled=${(countSelectedCards > 0 && !selectedCards[option.options] && countSelectedCards >= maxSelections) ? 'disabled' : ''}/>
Expand All @@ -44,7 +75,7 @@ export const CreateOptions = ({
export const GetQuizOption = ({
btnText, options, minSelections, maxSelections, selectedCards,
handleOnNextClick, onOptionClick, countSelectedCards, getOptionsIcons,
btnAnalyticsData,
btnAnalyticsData, background,
}) => html`
<div class="quiz-question">
<div class="quiz-options-container">
Expand All @@ -54,7 +85,8 @@ export const GetQuizOption = ({
countSelectedCards=${countSelectedCards}
maxSelections=${maxSelections}
getOptionsIcons=${getOptionsIcons}
handleCardSelection=${onOptionClick} />
handleCardSelection=${onOptionClick}
background=${background} />
</div>
<div class="quiz-button-container">
<button
Expand Down
Loading

0 comments on commit f56e2f2

Please sign in to comment.