Skip to content

Commit b878a51

Browse files
LuLaValvaLuLaValva
authored
feat(evo-web): infotip, tooltip, tourtip (#490)
1 parent 6e85404 commit b878a51

File tree

33 files changed

+1180
-3625
lines changed

33 files changed

+1180
-3625
lines changed

‎.changeset/tired-balloons-wonder.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@evo-web/marko": patch
3+
---
4+
5+
Add tooltip, tourtip, and infotip

‎package-lock.json‎

Lines changed: 43 additions & 3513 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"@marko/run": "^0.9.4",
6363
"@marko/run-adapter-static": "^2.0.4",
6464
"@marko/testing-library": "^6",
65-
"@marko/type-check": "^2.1.18",
65+
"@marko/type-check": "^2.1.26",
6666
"@marko/vite": "^5.4.2",
6767
"@mdx-js/mdx": "^3.1.1",
6868
"@octokit/rest": "^22.0.0",

‎packages/evo-marko/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"shaka-player": "4.16.12"
5858
},
5959
"devDependencies": {
60-
"marko": "^6.0.138"
60+
"marko": "^6.0.140"
6161
},
6262
"peerDependencies": {
6363
"@ebay/skin": "^19.2.0",

‎packages/evo-marko/src/tags/evo-infotip/examples/controlled.marko‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<let/open=false>
2+
3+
<evo-button onClick() { open = !open; }>
4+
Toggle Infotip
5+
</evo-button>
6+
7+
<evo-infotip
8+
...input
9+
open:=open
10+
a11yIconText="Help"
11+
a11yCloseText="Dismiss">
12+
<@heading>Controlled</@heading>
13+
This infotip is controlled externally.
14+
</evo-infotip>

‎packages/evo-marko/src/tags/evo-infotip/examples/custom-icon.marko‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<evo-infotip
2+
...input
3+
a11yIconText="Help with shipping"
4+
a11yCloseText="Dismiss">
5+
<@icon>
6+
<evo-icon-help-24/>
7+
</@icon>
8+
<@heading>Shipping Info</@heading>
9+
Free shipping on orders over $50.
10+
</evo-infotip>

‎packages/evo-marko/src/tags/evo-infotip/examples/default.marko‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<evo-infotip
2+
...input
3+
a11yIconText="Important information"
4+
a11yCloseText="Dismiss infotip">
5+
<@heading>Important</@heading>
6+
This is some important info about this feature.
7+
</evo-infotip>

‎packages/evo-marko/src/tags/evo-infotip/examples/disabled.marko‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<evo-infotip
2+
...input
3+
disabled
4+
a11yIconText="Help"
5+
a11yCloseText="Dismiss">
6+
<@heading>Disabled</@heading>
7+
This infotip is disabled.
8+
</evo-infotip>

‎packages/evo-marko/src/tags/evo-infotip/examples/in-paragraph.marko‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<p>
2+
Here is some text with an info icon
3+
<evo-infotip
4+
...input
5+
a11yIconText="More information"
6+
a11yCloseText="Dismiss">
7+
This provides additional context about the text.
8+
</evo-infotip>
9+
and the paragraph continues.
10+
</p>

‎packages/evo-marko/src/tags/evo-infotip/index.marko‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import type { Input as ExpanderInput } from "<evo-expander>";
2+
3+
export interface Input extends Marko.HTML.Span {
4+
open?: boolean;
5+
openChange?: (open: boolean) => void;
6+
placement?: ExpanderInput["placement"];
7+
offset?: number;
8+
flip?: boolean;
9+
shift?: boolean;
10+
inline?: boolean;
11+
disabled?: boolean;
12+
icon?: Marko.AttrTag<Marko.HTML.Span>;
13+
heading?: Marko.AttrTag<
14+
Marko.HTML.Span & {
15+
as?: Marko.Renderable;
16+
}
17+
>;
18+
/**
19+
* The `aria-label` for the infotip trigger button
20+
*
21+
* English default to be overridden is `"Help"`
22+
*/
23+
a11yIconText: string;
24+
/**
25+
* The `aria-label` for the close button
26+
*
27+
* English default to be overridden is `"Dismiss infotip"`
28+
*/
29+
a11yCloseText: string;
30+
}
31+
32+
<const/{
33+
class: inputClass,
34+
placement = "bottom" as const,
35+
offset: inputOffset,
36+
open: inputOpen,
37+
openChange,
38+
flip,
39+
shift,
40+
inline,
41+
disabled,
42+
icon,
43+
heading,
44+
a11yIconText = "Help",
45+
a11yCloseText = "Dismiss infotip",
46+
...htmlInput
47+
}=input>
48+
49+
<let/open=(inputOpen ?? false) valueChange=openChange>
50+
51+
<id/hostId> // TODO: Remove once we fix Marko TS recursive issue
52+
<const/$host() { return document.getElementById(hostId)! }>
53+
<id/overlayId> // TODO: Remove once we fix Marko TS recursive issue
54+
<const/$overlay() { return document.getElementById(overlayId)! }>
55+
<id/arrowId> // TODO: Remove once we fix Marko TS recursive issue
56+
<const/$arrow() { return document.getElementById(arrowId)! }>
57+
58+
<id/headingId=heading?.id as string | undefined>
59+
60+
<evo-expander/expander
61+
open=open
62+
placement=placement
63+
offset=(inputOffset ?? 8)
64+
flip=flip
65+
shift=shift
66+
inline=inline
67+
strategy="absolute"
68+
host=$host
69+
overlay=$overlay
70+
arrow=$arrow/>
71+
72+
<span ...htmlInput class=["infotip", inputClass]>
73+
<button
74+
id=hostId
75+
class="infotip__host icon-btn icon-btn--transparent"
76+
type="button"
77+
disabled=disabled
78+
aria-label=a11yIconText
79+
aria-expanded=expander.ariaExpanded
80+
onClick() {
81+
open = !open;
82+
}>
83+
<if=icon>
84+
<${icon}/>
85+
</if>
86+
<else>
87+
<evo-icon-information-16/>
88+
</else>
89+
</button>
90+
<span
91+
id=overlayId
92+
class="infotip__overlay"
93+
style=expander.floatingStyles
94+
role="tooltip"
95+
aria-labelledby=(heading && headingId)>
96+
<span id=arrowId class="infotip__pointer" style=expander.arrowStyles/>
97+
<span class="infotip__mask">
98+
<span class="infotip__cell">
99+
<span class="infotip__content">
100+
<if=heading>
101+
<const/{
102+
as: headingAs = "span",
103+
class: headingClass,
104+
...htmlHeading
105+
}=heading>
106+
<${headingAs}
107+
...htmlHeading
108+
class=["infotip__heading", headingClass]
109+
id=headingId/>
110+
</if>
111+
<${input.content}/>
112+
</span>
113+
<button
114+
aria-label=a11yCloseText
115+
class="icon-btn icon-btn--transparent infotip__close"
116+
type="button"
117+
onClick() {
118+
open = false;
119+
}>
120+
<evo-icon-close-16/>
121+
</button>
122+
</span>
123+
</span>
124+
</span>
125+
</span>

0 commit comments

Comments
 (0)