feat: new body text field (#1108)

vtex-apps · Jul 15, 2024 · f62475a · f62475a
1 parent 1c0cac2
commit f62475a
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,12 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Added `bodyText` property to `info-card` component. This property allows adding a body text below the subtitle.
+
 ## [3.173.1] - 2024-07-09
 
 ### Fixed
 
 - Update SKU selector in PLP after changing SKU in Quickview
 
+
 ## [3.173.0] - 2024-05-28
 
 ### Added

diff --git a/docs/InfoCard.md b/docs/InfoCard.md
@@ -52,6 +52,7 @@ The `info-card` component groups information on a single topic. It often include
 | `linkTarget`             | `LinkTargetEnum`    | Where to display the linked URL when the Info Card component is clicked.                                                   | `"_self"`     |
 | `mobileImageUrl`         | `string`            | Path to the image used on mobile devices. If empty, the desktop image is used.                                             | `null`        |
 | `subhead`                | `string`            | Text to be displayed underneath the headline. If not provided, it will not be rendered.                                    | `null`        |
+| `bodyText`                | `string`            | Text to be displayed underneath the subhead. If not provided, it will not be rendered.                                    | `null`        |
 | `textAlignment`          | `TextAlignmentEnum` | Text alignment inside the component: `left`, `center` or `right`. This prop is ignored if `isFullModeStyle` is true.       | `"left"`      |
 | `textMode`               | `TextModeEnum`      | Text mode used to process the text from `headline` and `subhead` props.                                                    | `"html"`      |
 | `textPosition`           | `TextPositionEnum`  | Position of the text component: `left`, `center` or `right`.                                                               | `"left"`      |
@@ -104,4 +105,5 @@ To apply CSS customizations to this and other blocks, please see the [Using CSS
 | `infoCardImageContainer`      |
 | `infoCardImageLinkWrapper`    |
 | `infoCardSubhead`             |
+| `infoCardBodyText`            |
 | `infoCardTextContainer`       |
diff --git a/messages/context.json b/messages/context.json
@@ -95,6 +95,8 @@
   "admin/editor.info-card.headline.description": "Description of headline property",
   "admin/editor.info-card.subhead.title": "Title of subhead property",
   "admin/editor.info-card.subhead.description": "Description of subhead property",
+  "admin/editor.info-card.body-text.title": "Title of body text property",
+  "admin/editor.info-card.body-text.description": "Description of body text property",
   "admin/editor.info-card.callToActionMode.title": "Title of callToActionMode property",
   "admin/editor.info-card.callToActionMode.description": "Description of callToActionMode property",
   "admin/editor.info-card.callToActionText.title": "Title of callToActionText property",

diff --git a/messages/en.json b/messages/en.json
@@ -97,6 +97,8 @@
   "admin/editor.info-card.headline.description": "Headline text inside component",
   "admin/editor.info-card.subhead.title": "Subheader",
   "admin/editor.info-card.subhead.description": "Text below headline inside component",
+  "admin/editor.info-card.body-text.title": "Body text",
+  "admin/editor.info-card.body-text.description": "Text below subhead inside component",
   "admin/editor.info-card.callToActionMode.title": "Call to action mode",
   "admin/editor.info-card.callToActionMode.description": "Controls how your call to action is displayed",
   "admin/editor.info-card.callToActionText.title": "Call to action text",

diff --git a/messages/es.json b/messages/es.json
@@ -97,6 +97,8 @@
   "admin/editor.info-card.headline.description": "Texto presentado de forma destacada",
   "admin/editor.info-card.subhead.title": "Subtítulo",
   "admin/editor.info-card.subhead.description": "Texto que aparece debajo del título",
+  "admin/editor.info-card.body-text.title": "Texto del cuerpo",
+  "admin/editor.info-card.body-text.description": "Texto que aparece debajo del subtítulo",
   "admin/editor.info-card.callToActionMode.title": "Modo call to action",
   "admin/editor.info-card.callToActionMode.description": "Controla cómo se muestra tu componente de call to action",
   "admin/editor.info-card.callToActionText.title": "Texto de call to action",

diff --git a/messages/pt.json b/messages/pt.json
@@ -97,6 +97,8 @@
   "admin/editor.info-card.headline.description": "Texto apresentado com destaque",
   "admin/editor.info-card.subhead.title": "Subtítulo",
   "admin/editor.info-card.subhead.description": "Texto apresentado abaixo do título",
+  "admin/editor.info-card.body-text.title": "Corpo do texto",
+  "admin/editor.info-card.body-text.description": "Texto abaixo do subtítulo no componente",
   "admin/editor.info-card.callToActionMode.title": "Modo do call to action",
   "admin/editor.info-card.callToActionMode.description": "Controla o modo de exibição do seu componente de call to action",
   "admin/editor.info-card.callToActionText.title": "Texto do call to action",

diff --git a/react/__tests__/components/InfoCard.test.js b/react/__tests__/components/InfoCard.test.js
@@ -106,6 +106,36 @@ describe('<InfoCard />', () => {
       subhead: 'This is a subhead, and should be inside a rich-text.',
     })
 
+    expect(asFragment()).toBeDefined()
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it('should not render bodyText', () => {
+    const { asFragment } = renderComponent({
+      isFullModeStyle: true,
+      callToActionMode: 'none',
+      textAlignment: 'right',
+      textPosition: 'center',
+      headline:
+        'HEADLINE <span class="my-custom-class">THIS IS BOOOLD AND BLUE</span> HEADLINE STILL',
+      subhead: '',
+      bodyText: '',
+    })
+
+    expect(asFragment()).toBeDefined()
+    expect(asFragment()).toMatchSnapshot()
+  })
+  it("should render bodyText, subhead and headline using the RichText component when textMode is set to 'rich-text'", () => {
+    const { asFragment } = renderComponent({
+      isFullModeStyle: true,
+      callToActionMode: 'none',
+      textAlignment: 'right',
+      textPosition: 'center',
+      textMode: 'rich-text',
+      headline: 'This is a headline, and should be inside a rich-text.',
+      subhead: 'This is a subhead, and should be inside a rich-text.',
+      bodyText: 'This is a bodyText, and should be inside a rich-text.',
+    })
+
     expect(asFragment()).toBeDefined()
     expect(asFragment()).toMatchSnapshot()
   })

diff --git a/react/__tests__/components/__snapshots__/InfoCard.test.js.snap b/react/__tests__/components/__snapshots__/InfoCard.test.js.snap
@@ -39,6 +39,36 @@ exports[`<InfoCard /> should insert span with class on headline 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<InfoCard /> should not render bodyText 1`] = `
+<DocumentFragment>
+  <div
+    class="infoCardContainer items-center bg-center bb b--muted-4 flex justify-center"
+    data-testid="container"
+    style="background-image: url(my-image.com/image.png); background-size: cover;"
+  >
+    <div
+      class="infoCardTextContainer flex flex-column mw-100 mh8-ns mh4-s w-40-ns items-center"
+    >
+      <div
+        class="infoCardHeadline t-heading-2 mt6 tc c-on-base mw-100"
+      >
+        <div
+          style="display: contents;"
+        >
+          HEADLINE 
+          <span
+            class="my-custom-class"
+          >
+            THIS IS BOOOLD AND BLUE
+          </span>
+           HEADLINE STILL
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<InfoCard /> should not render subhead 1`] = `
 <DocumentFragment>
   <div
@@ -69,6 +99,36 @@ exports[`<InfoCard /> should not render subhead 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<InfoCard /> should render bodyText, subhead and headline using the RichText component when textMode is set to 'rich-text' 1`] = `
+<DocumentFragment>
+  <div
+    class="infoCardContainer items-center bg-center bb b--muted-4 flex justify-center"
+    data-testid="container"
+    style="background-image: url(my-image.com/image.png); background-size: cover;"
+  >
+    <div
+      class="infoCardTextContainer flex flex-column mw-100 mh8-ns mh4-s w-40-ns items-center"
+    >
+      <div
+        data-testid="rich-text"
+      >
+        This is a headline, and should be inside a rich-text.
+      </div>
+      <div
+        data-testid="rich-text"
+      >
+        This is a subhead, and should be inside a rich-text.
+      </div>
+      <div
+        data-testid="rich-text"
+      >
+        This is a bodyText, and should be inside a rich-text.
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<InfoCard /> should render subhead and headline using the RichText component when textMode is set to 'rich-text' 1`] = `
 <DocumentFragment>
   <div

diff --git a/react/components/InfoCard/index.js b/react/components/InfoCard/index.js
@@ -74,6 +74,7 @@ const CSS_HANDLES = [
   'infoCardTextContainer',
   'infoCardHeadline',
   'infoCardSubhead',
+  'infoCardBodyText',
   'infoCardImageContainer',
   'infoCardImage',
 ]
@@ -82,6 +83,7 @@ const InfoCard = ({
   isFullModeStyle,
   headline,
   subhead,
+  bodyText,
   callToActionMode,
   callToActionText,
   callToActionUrl,
@@ -169,6 +171,8 @@ const InfoCard = ({
 
   const subheadClasses = `${handles.infoCardSubhead} t-body mt6 c-on-base ${alignToken} mw-100`
 
+  const bodyTextClasses = `${handles.infoCardBodyText} t-body mt6 c-on-base ${alignToken} mw-100`
+
   return (
     <LinkWrapper
       imageActionUrl={formatIOMessage({ id: imageActionUrl, intl })}
@@ -207,6 +211,18 @@ const InfoCard = ({
             ) : (
               <RichText className={subheadClasses} text={subhead} />
             ))}
+          {bodyText &&
+            (textMode === 'html' ? (
+              <div className={bodyTextClasses}>
+                <SanitizedHTML
+                  content={formatIOMessage({ id: bodyText, intl })}
+                  allowedTags={ALLOWED_TAGS}
+                  allowedAttributes={ALLOWED_ATTRS}
+                />
+              </div>
+            ) : (
+              <RichText className={bodyTextClasses} text={bodyText} />
+            ))}
           <CallToAction
             mode={callToActionMode}
             text={formatIOMessage({ id: callToActionText, intl })}
@@ -243,6 +259,7 @@ MemoizedInfoCard.propTypes = {
   textPosition: oneOf(getEnumValues(textPositionTypes)),
   headline: string,
   subhead: string,
+  bodyText: string,
   callToActionMode: oneOf(getEnumValues(callToActionModeTypes)),
   callToActionText: string,
   callToActionUrl: string,
@@ -263,6 +280,7 @@ MemoizedInfoCard.defaultProps = {
   textPosition: textPositionTypes.TEXT_POSITION_LEFT.value,
   headline: '',
   subhead: '',
+  bodyText: '',
   callToActionMode: callToActionModeTypes.CALL_ACTION_BUTTON.value,
   callToActionText: '',
   callToActionUrl: '',

diff --git a/store/contentSchemas.json b/store/contentSchemas.json
@@ -30,6 +30,12 @@
           "$ref": "app:vtex.native-types#/definitions/text",
           "default": ""
         },
+        "bodyText": {
+          "title": "admin/editor.info-card.body-text.title",
+          "description": "admin/editor.info-card.body-text.description",
+          "$ref": "app:vtex.native-types#/definitions/text",
+          "default": ""
+        },
         "callToActionMode": {
           "default": "button",
           "type": "string",