feat(tourtip): added leading image

eBay · Nov 15, 2023 · 8992bc7 · 8992bc7
1 parent 8fc533e
commit 8992bc7
Show file tree

Hide file tree

Showing 5 changed files with 250 additions and 3 deletions.
diff --git a/dist/tourtip/tourtip.css b/dist/tourtip/tourtip.css
@@ -155,7 +155,8 @@ span.tourtip__heading {
 }
 .tourtip__footer > button:not(:last-child),
 .tourtip__footer > a:not(:last-child) {
-  margin-right: 8px;
+  -webkit-margin-end: var(--spacing-100);
+          margin-inline-end: var(--spacing-100);
 }
 .tourtip__footer > .fake-link,
 .tourtip__footer > a {
@@ -171,6 +172,14 @@ span.tourtip__heading {
   color: var(--tourtip-index-color, var(--color-foreground-secondary));
   flex: 1;
 }
+.tourtip__leading {
+  -webkit-margin-end: var(--spacing-200);
+          margin-inline-end: var(--spacing-200);
+}
+.tourtip__leading img {
+  border-radius: var(--spacing-200);
+  max-width: 88px;
+}
 @media (min-width: 512px) {
   .tourtip__overlay {
     max-width: 400px;

diff --git a/docs/_includes/tourtip.html b/docs/_includes/tourtip.html
@@ -105,6 +105,71 @@ <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
     </div>
 </div>
     {% endhighlight %}
+
+
+    <h3>With leading image</h3>
+    <p>Tourtip also supports having a leading image.</p>
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="tourtip tourtip--expanded">
+                <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+                <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+                    <span class="tourtip__pointer tourtip__pointer--top"></span>
+                    <div class="tourtip__mask">
+                        <div class="tourtip__cell">
+                            <span class="tourtip__leading">
+                                <img src="{{ page.static_dir }}/img/tb-profile-pic.jpg" alt="">
+                            </span>
+                            <span class="tourtip__content">
+                                <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                                <p>Here's something new to help you be successful at your task.</p>
+                            </span>
+                            <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
+                                <svg class="icon icon--close-16" focusable="false" height="16" width="16" aria-hidden="true">
+                                    {% include symbol.html name="close-16" %}
+                                </svg>
+                            </button>
+                            <div class="tourtip__footer">
+                                <span class="tourtip__index">1 / 3</span>
+                                <button class="fake-link">Back</button>
+                                <button class="btn btn--primary">Next</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    {% highlight html %}
+<div class="tourtip tourtip--expanded">
+    <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+        <span class="tourtip__pointer tourtip__pointer--top"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__leading">
+                    <img src="{{ page.static_dir }}/img/tb-profile-pic.jpg" alt="">
+                </span>
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--close-16" focusable="false" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
+                    </svg>
+                </button>
+                <div class="tourtip__footer">
+                    <span class="tourtip__index">1 / 3</span>
+                    <button class="fake-link">Back</button>
+                    <button class="btn btn--primary">Next</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+    {% endhighlight %}
+
 </div>
 
 

diff --git a/src/less/tourtip/stories/rtl.stories.js b/src/less/tourtip/stories/rtl.stories.js
@@ -0,0 +1,134 @@
+export default { title: "Skin/Tourtip/RTL" };
+
+export const collapsed = () => `
+<div dir="rtl">
+    <div class="tourtip">
+        <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+            <span class="tourtip__pointer tourtip__pointer--top"></span>
+            <div class="tourtip__mask">
+                <div class="tourtip__cell">
+                    <span class="tourtip__content">
+                        <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                        <p>Here's something new to help you be successful at your task.</p>
+                    </span>
+                    <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
+                        <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                            <use href="#icon-close-16"></use>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export const expanded = () => `
+<div dir="rtl">
+    <div class="tourtip tourtip--expanded">
+        <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+            <span class="tourtip__pointer tourtip__pointer--top"></span>
+            <div class="tourtip__mask">
+                <div class="tourtip__cell">
+                    <span class="tourtip__content">
+                        <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                        <p>Here's something new to help you be successful at your task.</p>
+                    </span>
+                    <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
+                        <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                            <use href="#icon-close-16"></use>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export const withActions = () => `
+<div dir="rtl">
+    <div class="tourtip tourtip--expanded">
+        <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+            <span class="tourtip__pointer tourtip__pointer--top"></span>
+            <div class="tourtip__mask">
+                <div class="tourtip__cell">
+                    <span class="tourtip__content">
+                        <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                        <p>Here's something new to help you be successful at your task.</p>
+                    </span>
+                    <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
+                        <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                            <use href="#icon-close-16"></use>
+                        </svg>
+                    </button>
+                    <div class="tourtip__footer">
+                        <span class="tourtip__index">1 / 3</span>
+                        <button class="fake-link">Back</button>
+                        <button class="btn btn--primary">Next</button>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export const withOneAction = () => `
+<div dir="rtl">
+    <div class="tourtip tourtip--expanded">
+        <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+            <span class="tourtip__pointer tourtip__pointer--top"></span>
+            <div class="tourtip__mask">
+                <div class="tourtip__cell">
+                    <span class="tourtip__content">
+                        <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                        <p>Here's something new to help you be successful at your task.</p>
+                    </span>
+                    <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
+                        <svg class="icon icon--close-16" focusable="false" height="24" width="24" aria-hidden="true">
+                            <use href="#icon-close-16"></use>
+                        </svg>
+                    </button>
+                    <div class="tourtip__footer">
+                        <span class="tourtip__index">2 / 3</span>
+                        <button class="btn btn--primary">Next</button>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export const withLeadingImage = () => `
+<div dir="rtl">
+    <div class="tourtip tourtip--expanded">
+        <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+            <span class="tourtip__pointer tourtip__pointer--top"></span>
+            <div class="tourtip__mask">
+                <div class="tourtip__cell">
+                    <span class="tourtip__leading">
+                        <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                    </span>
+                    <span class="tourtip__content">
+                        <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                        <p>Here's something new to help you be successful at your task.</p>
+                    </span>
+                    <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
+                        <svg class="icon icon--close-16" focusable="false" height="16" width="16" aria-hidden="true">
+                            <use href="#icon-close-16"></use>
+                        </svg>
+                    </button>
+                    <div class="tourtip__footer">
+                        <span class="tourtip__index">1 / 3</span>
+                        <button class="fake-link">Back</button>
+                        <button class="btn btn--primary">Next</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+`;
diff --git a/src/less/tourtip/stories/tourtip.stories.js b/src/less/tourtip/stories/tourtip.stories.js
@@ -1,4 +1,4 @@
-export default { title: "Skin/Tourtip" };
+export default { title: "Skin/Tourtip/Base" };
 
 export const collapsed = () => `
 <div class="tourtip">
@@ -92,3 +92,33 @@ export const withOneAction = () => `
         </div>
     </div>
 </div>`;
+
+export const withLeadingImage = () => `
+<div class="tourtip tourtip--expanded">
+    <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+        <span class="tourtip__pointer tourtip__pointer--top"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__leading">
+                    <img src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg" alt="">
+                </span>
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--close-16" focusable="false" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
+                    </svg>
+                </button>
+                <div class="tourtip__footer">
+                    <span class="tourtip__index">1 / 3</span>
+                    <button class="fake-link">Back</button>
+                    <button class="btn btn--primary">Next</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+`;
diff --git a/src/less/tourtip/tourtip.less b/src/less/tourtip/tourtip.less
@@ -137,7 +137,7 @@ span.tourtip__heading {
 
 .tourtip__footer > button:not(:last-child),
 .tourtip__footer > a:not(:last-child) {
-    margin-right: 8px;
+    margin-inline-end: var(--spacing-100);
 }
 
 // stylelint-disable no-descending-specificity
@@ -161,6 +161,15 @@ span.tourtip__heading {
     flex: 1;
 }
 
+.tourtip__leading {
+    margin-inline-end: var(--spacing-200);
+}
+
+.tourtip__leading img {
+    border-radius: var(--spacing-200);
+    max-width: 88px;
+}
+
 @media (min-width: @_screen-size-SM) {
     .tourtip__overlay {
         .bubble-large-screen();