feat(tips): add support for heading elements (#1838)

eBay · Jan 9, 2023 · a6a228e · a6a228e
1 parent cabef6c
commit a6a228e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 10 deletions.
diff --git a/src/components/components/ebay-tooltip-overlay/index.marko b/src/components/components/ebay-tooltip-overlay/index.marko
@@ -4,6 +4,7 @@ import constants from "./constants";
 static function noop() {}
 static var typeRoles = constants.typeRoles;
 static var pointerStyles = constants.pointerStyles;
+static var ignoredHeaderAttributes = ["id", "as", "class"];
 
 $ input.toJSON = noop;
 
@@ -19,28 +20,29 @@ $ var overlayStyles = hasUserStyles ? {
     right: input.styleRight,
     bottom: input.styleBottom
 } : pointerStyles[input.pointer || "bottom"];
+$ var heading = input.heading;
 
 <span
     id=input.id
     class=`${input.type}__overlay`
     role=typeRoles[input.type]
     aria-labelledby=(
         input.type === "tourtip" &&
-        input.heading &&
+        heading &&
         component.elId("tourtip-label")
     )
     style=overlayStyles>
     <span class=`${input.type}__pointer ${input.type}__pointer--${input.pointer}`/>
     <span class=`${input.type}__mask`>
         <span class=`${input.type}__cell`>
             <span class=`${input.type}__content`>
-                <if(input.heading)>
-                    <span
-                        ...processHtmlAttributes(input.heading)
+                <if(heading)>
+                    <${heading.as || "span"}
+                        ...processHtmlAttributes(heading, ignoredHeaderAttributes)
                         class=[`${input.type}__heading`, input.heading.class]
                         id:scoped="tourtip-label">
-                        <${input.heading.renderBody}/>
-                    </span>
+                        <${heading.renderBody}/>
+                    </>
                 </if>
                 <if(input.content)>
                     <${Object.keys(input.content).length > 1 && "span"}

diff --git a/src/components/ebay-tourtip/test/__snapshots__/renders-default-tourtip.expected.html b/src/components/ebay-tourtip/test/__snapshots__/renders-default-tourtip.expected.html
@@ -35,12 +35,12 @@
               [36m<span[39m
                 [33mclass[39m=[32m"tourtip__content"[39m
               [36m>[39m
-                [36m<span[39m
+                [36m<h2[39m
                   [33mclass[39m=[32m"tourtip__heading"[39m
                   [33mid[39m=[32m"s0-@base-0-4-tourtip-label"[39m
                 [36m>[39m
                   [0mImportant[0m
-                [36m</span>[39m
+                [36m</h2>[39m
                 [36m<p>[39m
                   [0mThis new feature was added.[0m
                 [36m</p>[39m

diff --git a/src/components/ebay-tourtip/test/__snapshots__/renders-tourtip-closed.expected.html b/src/components/ebay-tourtip/test/__snapshots__/renders-tourtip-closed.expected.html
@@ -35,12 +35,12 @@
               [36m<span[39m
                 [33mclass[39m=[32m"tourtip__content"[39m
               [36m>[39m
-                [36m<span[39m
+                [36m<h2[39m
                   [33mclass[39m=[32m"tourtip__heading"[39m
                   [33mid[39m=[32m"s0-@base-0-4-tourtip-label"[39m
                 [36m>[39m
                   [0mImportant[0m
-                [36m</span>[39m
+                [36m</h2>[39m
                 [36m<p>[39m
                   [0mThis new feature was added.[0m
                 [36m</p>[39m

diff --git a/src/components/ebay-tourtip/test/test.browser.js b/src/components/ebay-tourtip/test/test.browser.js
@@ -27,6 +27,7 @@ describe('given the default tourtip', () => {
 
         thenItIsOpen();
         thenItCanBeClosed();
+        thenIthasHeading();
     });
 
     function thenItIsOpen() {
@@ -50,4 +51,10 @@ describe('given the default tourtip', () => {
             });
         });
     }
+
+    function thenIthasHeading() {
+        it('then it has the right heading', () => {
+            expect(component.getByText('Important').tagName).equal('H2');
+        });
+    }
 });
diff --git a/src/components/ebay-tourtip/tourtip.stories.js b/src/components/ebay-tourtip/tourtip.stories.js
@@ -114,6 +114,7 @@ Standard.args = {
     },
     heading: {
         renderBody: 'Important',
+        as: 'h2',
     },
     content: {
         renderBody: `<p>This new feature was added.</p>`,