x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<button type="button" x-data @click="$dispatch('first-modal')"> Open Modal</button><div x-id="['first-title', 'first-buttons']" x-transition.opacity class="fixed inset-0 z-1000" x-show="open" x-cloak x-data="{ open: false, toggle() { this.open = !this.open; if (this.open) { this.$nextTick(() => { this.$refs.modalTitle.focus({ preventScroll: true }); }); } else { this.$dispatch('first-modal-dismissed'); } }, init() { const resetScrollingBehavior = () => { document.documentElement.style.overflow = ''; document.documentElement.style.paddingRight = ''; }; document.addEventListener('turbo:before-visit', resetScrollingBehavior); } }" @first-modal.window="toggle()" > <div class="h-dvh w-screen relative flex flex-row justify-center items-center bg-stone-400/50 overflow-y-hidden" x-trap.inert.noscroll="open" @keyup.escape.window="open && toggle()" > <div role="dialog" aria-modal="true" :aria-labelledby="$id('first-title')" x-transition x-show="open" @click.away="toggle()" class="cfa-modal relative flex flex-col min-h-50 max-h-[90dvh] md:max-h-[80dvh] overflow-auto bg-white rounded-lg border-border-secondary border-2" > <div class="p-cfa-lg cfa-stack-med max-w-[360px]"> <div class="flex flex-row justify-between gap-x-cfa-xl"> <h1 x-ref="modalTitle" tabindex="-1" :id="$id('first-title')" class="focus:outline-none" > Snack copy would go here framed as a question? </h1> <button type="button" @click="toggle()" class="flex shrink-0 cursor-pointer bg-transparent border-0 p-0 text-inherit focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus" aria-label="Close modal" > <svg class="cfa-icon" width="25" height="25" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#close"></use></svg> </button> </div> <div class="cfa-stack-med"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <ul> <li>Ut enim ad minim veniam, quis nostrud</li> <li>Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li> </ul> <a href="#" @click.prevent="toggle()">Close me!</a> </div> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<button type="button" x-data @click="$dispatch('first-modal')"> Open Modal</button><%= render(ModalComponent.new(name: "first")) do |c| %> <% c.with_header do %> Snack copy would go here framed as a question? <% end %> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <ul> <li>Ut enim ad minim veniam, quis nostrud</li> <li>Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li> </ul> <a href="#" @click.prevent="toggle()">Close me!</a><% end %>No notes provided.
No params configured.