diff --git a/cards/document-vertical-standard/component.js b/cards/document-vertical-standard/component.js new file mode 100644 index 000000000..f696d93e4 --- /dev/null +++ b/cards/document-vertical-standard/component.js @@ -0,0 +1,55 @@ +{{> cards/card_component componentName='document-vertical-standard' }} + +class document_vertical_standardCardComponent extends BaseCard['document-vertical-standard'] { + constructor(config = {}, systemConfig = {}) { + super(config, systemConfig); + } + + /** + * This returns an object that will be called `card` + * in the template. Put all mapping logic here. + * + * @param profile profile of the entity in the card + */ + dataForRender(profile) { + const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top'; + + return { + title: profile.name, // The header text of the card + // subtitle: '', // The sub-header text of the card + url: profile.landingPageUrl, // If the card title is a clickable link, set URL here + target: linkTarget, // If the title's URL should open in a new tab, etc. + // image: '', // The URL of the image to display on the card + // subtitle: '', // The sub-header text of the card + details: profile.d_segment.text, // The text in the body of the card + pageNumber: profile.d_segment.pageNumber, // If the result is from a file with page numbers, the page it was on + score: profile.d_segment.score, // The score this segment received + // If the card's details are longer than a certain character count, you can truncate the + // text. A toggle will be supplied that can show or hide the truncated text. + showMoreDetails: { + showMoreLimit: 500, // Character count limit + showMoreText: 'Show more', // Label when toggle will show truncated text + showLessText: 'Show less' // Label when toggle will hide truncated text + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thanks!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + }; + } + + /** + * The template to render + * @returns {string} + * @override + */ + static defaultTemplateName (config) { + return 'cards/document-vertical-standard'; + } +} + +ANSWERS.registerTemplate( + 'cards/document-vertical-standard', + {{{stringifyPartial (read 'cards/document-vertical-standard/template') }}} +); +ANSWERS.registerComponentType(document_vertical_standardCardComponent); diff --git a/cards/document-vertical-standard/template.hbs b/cards/document-vertical-standard/template.hbs new file mode 100644 index 000000000..5baa2811d --- /dev/null +++ b/cards/document-vertical-standard/template.hbs @@ -0,0 +1,99 @@ +
+ {{> image }} +
+ {{> title }} + {{> subtitle }} +
+
+ {{> details }} +
+
+ {{> pageNumber }} + {{> score }} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} +
+
+ +{{#*inline 'image'}} + {{#if card.image}} +
+ {{#if card.altText}}{{card.altText}}{{/if}} +
+ {{/if}} +{{/inline}} + +{{#*inline 'title'}} + {{#if card.title}} +
+ {{#if card.url}} + + {{card.title}} + + {{else}} + {{card.title}} + {{/if}} +
+ {{/if}} +{{/inline}} + +{{#*inline 'subtitle'}} + {{#if card.subtitle}} +
+ {{card.subtitle}} +
+ {{/if}} +{{/inline}} + +{{#*inline 'pageNumber'}} + {{#if card.pageNumber}} +
+ Page {{card.pageNumber}} +
+ {{/if}} +{{/inline}} + +{{#*inline 'score'}} + {{#if card.score}} +
+ Score: {{card.score}} +
+ {{/if}} +{{/inline}} + +{{! Displays the details for the card. If showMoreDetails has been configured, + this partial handles the show more toggle, show less toggle, truncated details, + and full details. If showMoreDetails has not been configured, it will display the + the regular card details. +}} +{{#*inline 'details'}} + {{#if card.details}} +
+ {{#if showExcessDetailsToggle}} +
+ {{truncatedDetails}} +
+ {{/if}} +
+ {{card.details}} +
+ {{#if showExcessDetailsToggle}} + + + {{/if}} +
+ {{/if}} +{{/inline}} diff --git a/static/package-lock.json b/static/package-lock.json index c69357511..be5ebc93f 100644 --- a/static/package-lock.json +++ b/static/package-lock.json @@ -1,12 +1,12 @@ { "name": "answers-hitchhiker-theme", - "version": "1.34.1", + "version": "1.34.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "answers-hitchhiker-theme", - "version": "1.34.1", + "version": "1.34.2", "license": "BSD-3-Clause", "dependencies": { "@vimeo/player": "^2.15.3", diff --git a/static/package.json b/static/package.json index 8a0661839..79d9921b8 100644 --- a/static/package.json +++ b/static/package.json @@ -1,6 +1,6 @@ { "name": "answers-hitchhiker-theme", - "version": "1.34.1", + "version": "1.34.2", "description": "Toolchain for use with the HH Theme", "main": "Gruntfile.js", "scripts": { diff --git a/static/scss/answers/_default.scss b/static/scss/answers/_default.scss index 706dc8f16..d29ad6219 100644 --- a/static/scss/answers/_default.scss +++ b/static/scss/answers/_default.scss @@ -35,6 +35,7 @@ // Cards styling @import "cards/ctas"; @import "cards/document-standard"; +@import "cards/document-vertical-standard"; @import "cards/event-standard"; @import "cards/location-standard"; @import "cards/standard"; diff --git a/static/scss/answers/cards/document-vertical-standard.scss b/static/scss/answers/cards/document-vertical-standard.scss new file mode 100644 index 000000000..ccbec8357 --- /dev/null +++ b/static/scss/answers/cards/document-vertical-standard.scss @@ -0,0 +1,92 @@ +.HitchhikerDocumentVerticalStandard +{ + display: flex; + font-size: var(--yxt-font-size-md); + background-color: var(--yxt-color-brand-white); + padding: calc(var(--yxt-base-spacing) * 3/4) var(--yxt-base-spacing); + width: 100%; + height: 100%; + + &-body + { + width: 100%; + display: flex; + flex-direction: column; + } + + &-contentWrapper + { + display: flex; + flex-direction: column; + width: 100%; + + @include bpgte(sm) + { + justify-content: space-between; + flex-direction: row; + flex-wrap: nowrap; + } + } + + &-imgWrapper + { + display: flex; + align-items: flex-start; + width: 6.25rem; + margin-right: 1rem; + } + + &-img + { + width: 100%; + height: auto; + } + + &-title + { + text-decoration: none; + font-size: var(--yxt-font-size-lg); + line-height: var(--yxt-line-height-lg); + font-weight: var(--yxt-font-weight-semibold); + } + + &-titleLink + { + @include Link; + } + + &-subtitle + { + color: var(--yxt-color-text-secondary); + padding-bottom: 0; + } + + &-pageNumber + { + color: var(--yxt-color-text-secondary); + padding-bottom: 0; + font-weight: var(--yxt-font-weight-semibold); + } + + &-score + { + color: var(--yxt-color-text-secondary); + padding-bottom: 0; + } + + &-cardDetails + { + margin-top: calc(var(--yxt-base-spacing) / 2); + } + + &-detailsText + { + @include rich_text_formatting; + color: var(--yxt-color-text-primary); + } + + .js-hidden + { + display: none; + } +}