Add a document vertical standard card

To help with development of the document vertical, this change adds a default document vertical card and styling for users to build off of. J=WAT-4183 TEST=manual I made these changes in a test site, and confirmed that dcoument results displayed correctly
yext · Aug 12, 2024 · 3af91f3 · 3af91f3
1 parent f386f9a
commit 3af91f3
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 3 deletions.
diff --git a/cards/document-vertical-standard/component.js 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: profile.c_department, // 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
@@ -0,0 +1,99 @@
+<div class="HitchhikerDocumentVerticalStandard {{cardName}}">
+    {{> image }}
+    <div class="HitchhikerDocumentVerticalStandard-body">
+        {{> title }}
+        {{> subtitle }}
+        <div class="HitchhikerDocumentVerticalStandard-contentWrapper">
+            <div class="HitchhikerDocumentVerticalStandard-info">
+                {{> details }}
+            </div>
+        </div>
+        {{> pageNumber }}
+        {{> score }}
+        {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
+    </div>
+</div>
+
+{{#*inline 'image'}}
+    {{#if card.image}}
+        <div class="HitchhikerDocumentVerticalStandard-imgWrapper">
+            <img class="HitchhikerDocumentVerticalStandard-img" src="{{#unless (isNonRelativeUrl card.image)}}{{@root.relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}"/>
+        </div>
+    {{/if}}
+{{/inline}}
+
+{{#*inline 'title'}}
+    {{#if card.title}}
+        <div class="HitchhikerDocumentVerticalStandard-title">
+            {{#if card.url}}
+                <a class="HitchhikerDocumentVerticalStandard-titleLink js-HitchhikerDocumentVerticalStandard-titleLink"
+                   href="{{#unless (isNonRelativeUrl card.url)}}{{@root.relativePath}}/{{/unless}}{{card.url}}"
+                   data-eventtype="TITLE_CLICK"
+                   data-eventoptions='{{json card.titleEventOptions}}'
+                   target={{#if card.target}}"{{card.target}}"{{else}}"_top"{{/if}}>
+                {{card.title}}
+                </a>
+            {{else}}
+                {{card.title}}
+            {{/if}}
+        </div>
+    {{/if}}
+{{/inline}}
+
+{{#*inline 'subtitle'}}
+    {{#if card.subtitle}}
+        <div class="HitchhikerDocumentVerticalStandard-subtitle">
+            {{card.subtitle}}
+        </div>
+    {{/if}}
+{{/inline}}
+
+{{#*inline 'pageNumber'}}
+    {{#if card.pageNumber}}
+        <div class="HitchhikerDocumentVerticalStandard-pageNumber">
+            Page {{card.pageNumber}}
+        </div>
+    {{/if}}
+{{/inline}}
+
+{{#*inline 'score'}}
+    {{#if card.score}}
+        <div class="HitchhikerDocumentVerticalStandard-score">
+            Score: {{card.score}}
+        </div>
+    {{/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}}
+        <div class="HitchhikerDocumentVerticalStandard-cardDetails">
+            {{#if showExcessDetailsToggle}}
+                <div class="HitchhikerDocumentVerticalStandard-detailsText js-HitchhikerCard-detailsText">
+                    {{truncatedDetails}}
+                </div>
+            {{/if}}
+            <div class="HitchhikerDocumentVerticalStandard-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} js-hidden{{/if}}">
+                {{card.details}}
+            </div>
+            {{#if showExcessDetailsToggle}}
+                <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
+                    {{card.showMoreDetails.showMoreText}}
+                    <span>
+                        {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+                    </span>
+                </button>
+                <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
+                    {{card.showMoreDetails.showLessText}}
+                    <span>
+                        {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+                    </span>
+                </button>
+            {{/if}}
+        </div>
+    {{/if}}
+{{/inline}}
diff --git a/static/package-lock.json b/static/package-lock.json
diff --git 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
@@ -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
@@ -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;
+  }
+}