Skip to content

Commit b487ee2

Browse files
karim-semmoudkarim-semmoud
committed
dev
1 parent 99460ab commit b487ee2

73 files changed

Lines changed: 356 additions & 67057 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎assets/components/avatar.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,16 @@ export class Avatar extends Component<Props, Api> {
2424
'[data-scope="avatar"][data-part="fallback"]'
2525
);
2626
if (fallbackEl) this.spreadProps(fallbackEl, this.api.getFallbackProps());
27+
28+
const skeletonEl = this.el.querySelector<HTMLElement>(
29+
'[data-scope="avatar"][data-part="skeleton"]'
30+
);
31+
if (skeletonEl) {
32+
const state = this.machine.service.state;
33+
const loaded = state.matches("loaded");
34+
const error = state.matches("error");
35+
skeletonEl.hidden = loaded || error;
36+
skeletonEl.setAttribute("data-state", loaded || error ? "hidden" : "visible");
37+
}
2738
}
2839
}

‎e2e/assets/corex/components/avatar.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,29 @@
3232
height: 100%;
3333
}
3434

35+
.avatar [data-scope="avatar"][data-part="skeleton"] {
36+
display: block;
37+
width: var(--spacing-ui);
38+
aspect-ratio: 1 / 1;
39+
border-radius: var(--radius-full);
40+
background: linear-gradient(
41+
90deg,
42+
var(--color-ui--muted) 0%,
43+
var(--color-ui--border) 50%,
44+
var(--color-ui--muted) 100%
45+
);
46+
background-size: 200% 100%;
47+
animation: avatar-skeleton-loading 1.2s ease-in-out infinite;
48+
}
49+
50+
.avatar [data-scope="avatar"][data-part="skeleton"][data-state="hidden"] {
51+
display: none;
52+
}
53+
54+
.avatar.avatar--square [data-scope="avatar"][data-part="skeleton"] {
55+
border-radius: var(--radius-ui);
56+
}
57+
3558
.avatar.avatar--square [data-scope="avatar"][data-part="root"] {
3659
border-radius: var(--radius-ui);
3760
}
@@ -41,6 +64,15 @@
4164
}
4265
}
4366

67+
@keyframes avatar-skeleton-loading {
68+
0% {
69+
background-position: 200% 0;
70+
}
71+
100% {
72+
background-position: -200% 0;
73+
}
74+
}
75+
4476
@utility avatar--* {
4577
[data-scope="avatar"][data-part="root"] {
4678
max-width: --value(--spacing-ui-*, [length]);

‎e2e/lib/e2e_web/controllers/page_controller.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ defmodule E2eWeb.PageController do
108108
end
109109

110110
def editable_page(conn, _params) do
111-
render(conn, :editable_page)
111+
render(conn, :editable_page, value_text: "My custom value")
112112
end
113113

114114
def floating_panel_page(conn, _params) do

‎e2e/lib/e2e_web/controllers/page_html/avatar_page.html.heex‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@
33
<h1>Avatar</h1>
44
<h2>Controller View</h2>
55
</div>
6-
<.avatar id="my-avatar" src="" class="avatar">
7-
<:fallback>JD</:fallback>
8-
</.avatar>
6+
<div class="layout__row gap-ui-gap">
7+
<.avatar id="avatar-fallback" src="" class="avatar">
8+
<:fallback>JD</:fallback>
9+
</.avatar>
10+
<.avatar id="avatar-cat" src={~p"/images/avatar.png"} alt="Avatar" class="avatar">
11+
<:fallback>?</:fallback>
12+
</.avatar>
13+
<.avatar id="avatar-favicon" src={~p"/images/favicon.ico"} alt="Favicon" class="avatar">
14+
<:fallback>FX</:fallback>
15+
</.avatar>
16+
</div>
917
</Layouts.app>

‎e2e/lib/e2e_web/controllers/page_html/editable_page.html.heex‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,8 @@
1212
class="editable"
1313
>
1414
<:label>Name</:label>
15+
<:edit_trigger><.icon name="hero-pencil-square" class="icon" /></:edit_trigger>
16+
<:submit_trigger><.icon name="hero-check" class="icon" /></:submit_trigger>
17+
<:cancel_trigger><.icon name="hero-x-mark" class="icon" /></:cancel_trigger>
1518
</.editable>
1619
</Layouts.app>

‎e2e/lib/e2e_web/controllers/page_html/listbox_page.html.heex‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
<h3>Extended Grouped</h3>
7575
<.listbox
7676
class="listbox"
77+
aria_label="Extended grouped countries"
7778
collection={[
7879
%{label: "France", id: "fra", group: "Europe"},
7980
%{label: "Belgium", id: "bel", group: "Europe"},

‎e2e/lib/e2e_web/controllers/page_html/radio_group_page.html.heex‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,35 @@
33
<h1>Radio Group</h1>
44
<h2>Controller View</h2>
55
</div>
6-
<.radio_group
7-
id="my-radio-group"
8-
items={[
9-
%{value: "a", label: "Option A"},
10-
%{value: "b", label: "Option B"},
11-
%{value: "c", label: "Option C"}
12-
]}
13-
class="radio-group"
14-
>
15-
<:label>Choose one</:label>
16-
<:item_control>
17-
<.icon name="hero-check" class="data-checked" />
18-
</:item_control>
19-
</.radio_group>
6+
<div>
7+
<h3>Without indicator</h3>
8+
<.radio_group
9+
id="radio-group-plain"
10+
name="choice-plain"
11+
items={[
12+
%{value: "a", label: "Option A"},
13+
%{value: "b", label: "Option B"},
14+
%{value: "c", label: "Option C"}
15+
]}
16+
class="radio-group"
17+
>
18+
<:label>Choose one</:label>
19+
</.radio_group>
20+
</div>
21+
<div>
22+
<h3>With indicator</h3>
23+
<.radio_group
24+
id="radio-group-indicator"
25+
name="choice-indicator"
26+
items={[
27+
%{value: "a", label: "Option A"},
28+
%{value: "b", label: "Option B"},
29+
%{value: "c", label: "Option C"}
30+
]}
31+
class="radio-group"
32+
>
33+
<:label>Choose one</:label>
34+
<:item_control><.icon name="hero-check" class="data-checked" /></:item_control>
35+
</.radio_group>
36+
</div>
2037
</Layouts.app>

‎e2e/lib/e2e_web/controllers/page_html/timer_page.html.heex‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,10 @@
33
<h1>Timer</h1>
44
<h2>Controller View</h2>
55
</div>
6-
<.timer id="my-timer" countdown start_ms={60_000} target_ms={0} class="timer" />
6+
<.timer id="my-timer" countdown start_ms={60_000} target_ms={0} class="timer">
7+
<:start_trigger><.icon name="hero-play" class="icon" /></:start_trigger>
8+
<:pause_trigger><.icon name="hero-pause" class="icon" /></:pause_trigger>
9+
<:resume_trigger><.icon name="hero-play" class="icon" /></:resume_trigger>
10+
<:reset_trigger><.icon name="hero-arrow-path" class="icon" /></:reset_trigger>
11+
</.timer>
712
</Layouts.app>

‎e2e/lib/e2e_web/live/avatar_live.ex‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,17 @@ defmodule E2eWeb.AvatarLive do
1212
<h1>Avatar</h1>
1313
<h2>Live View</h2>
1414
</div>
15-
<.avatar id="my-avatar" src="" class="avatar">
16-
<:fallback>JD</:fallback>
17-
</.avatar>
15+
<div class="layout__row gap-ui-gap">
16+
<.avatar id="avatar-fallback" src="" class="avatar">
17+
<:fallback>JD</:fallback>
18+
</.avatar>
19+
<.avatar id="avatar-cat" src={~p"/images/avatar.png"} alt="Avatar" class="avatar">
20+
<:fallback>?</:fallback>
21+
</.avatar>
22+
<.avatar id="avatar-favicon" src={~p"/images/favicon.ico"} alt="Favicon" class="avatar">
23+
<:fallback>FX</:fallback>
24+
</.avatar>
25+
</div>
1826
</Layouts.app>
1927
"""
2028
end

‎e2e/lib/e2e_web/live/editable_live.ex‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ defmodule E2eWeb.EditableLive do
2121
class="editable"
2222
>
2323
<:label>Name</:label>
24+
<:edit_trigger><.icon name="hero-pencil-square" class="icon" /></:edit_trigger>
25+
<:submit_trigger><.icon name="hero-check" class="icon" /></:submit_trigger>
26+
<:cancel_trigger><.icon name="hero-x-mark" class="icon" /></:cancel_trigger>
2427
</.editable>
2528
</Layouts.app>
2629
"""

0 commit comments

Comments
 (0)