Anchor ViewComponents

Pages

No matching results.

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="flex flex-col min-h-screen" data-testid="page-component">
  <header class="py-6" data-testid="page-header">
    <div class="flex flex-col gap-8">
      <div class="px-10"><nav aria-label="Breadcrumb" data-testid="breadcrumbs">
          <ol class="flex items-center">
            <li class="flex text-sm items-center text-secondary whitespace-nowrap">
              <a class="underline hover:no-underline focus:no-underline text-secondary hover:text-primary" href="#">Breadcrumb 1</a>
            </li>
            <li aria-current="page" class="flex text-sm items-center text-secondary whitespace-nowrap">
              <span aria-hidden="true" class="mx-2">/</span>
              Breadcrumb 2
            </li>
          </ol>
        </nav></div>
      <div class="px-10 flex justify-between items-center min-h-10">
        <div class="space-y-1">
          <div class="flex items-center gap-2">
            <h1 class="text-2xl leading-7 font-semibold">Page title</h1>
          </div>
        </div>
        
        <div class="flex items-center gap-2">
        </div>
      </div>
    </div>
  </header>
  <div class="px-10 py-6 grow" data-testid="page-body">    
    <p class="text-base leading-5">Page content</p>
  </div>
  <footer class="px-10 py-5 flex items-center justify-end gap-4 border-t bg-white border-subdued sticky bottom-0" data-testid="page-footer">
    <p class="text-base leading-5 text-secondary">Optional text</p>
    <div class="contents" data-controller="popover">
      <button type="button" class="btn-with-ending-icon btn" data-testid="actions-button" data-popover-target="button" popovertarget="action-menu-component-0e3f9f17-3b91-4c1d-9872-9484ba5c3f90">
        Actions
        <!-- Source: Iconoir, added via `bin/add_icon` -->
        <svg width="20" height="20" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true" data-testid="button-ending-icon">
          <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div popover="auto" class="absolute -left-full -top-full m-0 bg-white rounded-sm border border-subdued popover-open:block px-0 py-1 border border-subdued shadow-sm" data-action="toggle->popover#positionPopover" data-popover-target="popover" data-testid="action-menu" id="action-menu-component-0e3f9f17-3b91-4c1d-9872-9484ba5c3f90">
        <ul>
          <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide">        <button commandfor="defer-donor-dialog" command="show-modal">Defer donor</button>
          </li>
          <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide">        
            <form class="button_to" method="post" action="https://http.codes/200"><button type="submit">Add event</button><input type="hidden" name="authenticity_token" value="WDhhbPbLCrdLt1vT_MKW5WJZEA4VSFl0nlqvR9mlS73oNdw_ubsctn7F3GtUtQEd963-bk0CmFTUwR7QFl5X1g" autocomplete="off" /></form>
          </li>
          <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide">        <button commandfor="end-of-visit-dialog" command="show-modal">End visit</button>
          </li>
          <li class="whitespace-nowrap hover:bg-gray-100 [&_a]:px-3 [&_a]:py-1 [&_a]:w-full [&_a]:block [&_a]:text-left [&_button]:px-3 [&_button]:py-1 [&_button]:w-full [&_button]:block [&_button]:text-left" data-testid="action-menu-item" data-action="click->popover#hide">        <a href="#">Exit</a>
          </li>
        </ul>
      </div>
    </div>
    <button type="submit" class="btn btn-primary" data-testid="save-button" form="form">
      Save
    </button>
  </footer>
</div>
<dialog aria-labelledby="defer-donor" class="open:flex overflow-visible flex-col p-0 bg-white shadow-lg backdrop:bg-gray-950/50 w-[36rem] rounded-lg m-auto" data-controller="dialog" data-action="close->dialog#reset" data-testid="defer-donor" id="defer-donor-dialog">
  <header class="px-6 pt-6 pb-3 flex gap-4 justify-between items-center bg-white rounded-t-lg">
    <h1 id="defer-donor" data-testid="dialog-title" class="text-xl leading-6 font-semibold">Defer donor</h1>
    <button aria-label="Close" class="text-secondary hover:text-primary" type="button" data-action="dialog#close">
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="24" height="24" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
        <path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </button>  </header>
  <div class="px-6 pt-3 flex-auto bg-white pb-3" data-testid="dialog-body">    
    <form id="defer-donor-form" class="flex flex-col gap-4" action="https://http.codes/200" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="iGniz7nOzo8XiXM9LMW-CWJNfMYNwtgJ4ifTNko5RLw4ZF-c9r7YjiL79IWEsinx97mSplWIGSmovGKhhcJY1w" autocomplete="off" />
      <div>
        <label class="font-semibold text-base text-primary" data-testid="label-reason" for="reason">Reason for deferral</label>
        <div data-testid="form-field-input-reason"><input class="form-input min-h-[40px] resize-none block w-full rounded disabled:bg-disabled disabled:border-subdued disabled:text-secondary enabled:border enabled:text-base" autocomplete="off" data-testid="input-reason" label="Reason for deferral" type="text" name="reason" id="reason" /></div>
      </div>
    </form>
  </div>
  <footer class="sticky bottom-0 bg-white px-6 pt-3 pb-6 flex gap-2 justify-end rounded-b-lg">
    <button type="button" class="btn" data-testid="cancel-button" data-action="dialog#close">
      Cancel
    </button>
    <button type="submit" class="btn btn-primary" data-testid="yes-defer-donor-button" form="defer-donor-form">
      Yes, defer donor
    </button>
  </footer>
</dialog>
<dialog aria-labelledby="confirm-end-of-visit" class="open:flex overflow-visible flex-col p-0 bg-white shadow-lg backdrop:bg-gray-950/50 w-[36rem] rounded-lg m-auto" data-controller="dialog" data-action="close->dialog#reset" data-testid="confirm-end-of-visit" id="end-of-visit-dialog">
  <header class="px-6 pt-6 pb-3 flex gap-4 justify-between items-center bg-white rounded-t-lg">
    <h1 id="confirm-end-of-visit" data-testid="dialog-title" class="text-xl leading-6 font-semibold">Confirm end of visit</h1>
    <button aria-label="Close" class="text-secondary hover:text-primary" type="button" data-action="dialog#close">
      <!-- Source: Iconoir, added via `bin/add_icon` -->
      <svg width="24" height="24" stroke-width="1.5" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0" aria-hidden="true">
        <path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
    </button>  </header>
  <div class="px-6 pt-3 flex-auto bg-white pb-3" data-testid="dialog-body">    
    <p class="text-base leading-5">Are you sure you want to end this donor's visit?</p>
  </div>
  <footer class="sticky bottom-0 bg-white px-6 pt-3 pb-6 flex gap-2 justify-end rounded-b-lg">
    <button type="button" class="btn" data-testid="cancel-button" data-action="dialog#close">
      Cancel
    </button>
    <form action="https://http.codes/200" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="4Nz64QhUqoncTZhqr66c3lrwFTYyrWkqxbAFB8ywAexQ0UeyRyS8iOk_H9IH2QsmzwT7VmrnqAqPK7SQA0sdhw" autocomplete="off" />
      <button type="submit" class="btn btn-primary" data-testid="yes-end-visit-button">
        Yes, end visit
      </button>
    </form>
  </footer>
</dialog>
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
<%= anchor_page do |page| %>
  <% page.with_header do |header| %>
    <% header.with_breadcrumbs do |breadcrumbs| %>
      <% breadcrumbs.with_item(href: "#").with_content("Breadcrumb 1") %>
      <% breadcrumbs.with_item(href: "").with_content("Breadcrumb 2") %>
    <% end %>
    <% header.with_title("Page title") %>
  <% end %>
  <% page.with_body do |body| %>
    <%= anchor_text "Page content" %>
  <% end %>
  <% page.with_footer do |footer| %>
    <% footer.with_action_menu do |action_menu| %>
      <% action_menu.with_show_button do |button| %>
        Actions
        <% button.with_ending_icon(icon: "nav-arrow-down") %>
      <% end %>
      <% action_menu.with_item do |item| %>
        <%= tag.button(
          "Defer donor",
          commandfor: "defer-donor-dialog",
          command: "show-modal",
        ) %>
      <% end %>
      <% action_menu.with_item do |item| %>
        <%= button_to(
            "Add event",
            "https://http.codes/200"
          ) %>
      <% end %>
      <% action_menu.with_item do |item| %>
        <%= tag.button(
          "End visit",
          commandfor: "end-of-visit-dialog",
          command: "show-modal",
        ) %>
      <% end %>
      <% action_menu.with_item do |item| %>
        <%= link_to("Exit", "#") %>
      <% end %>
    <% end %>
    <% footer.with_save_button(form: "form") %>
    <% footer.with_supporting_text("Optional text") %>
  <% end %>
<% end %>
<%= anchor_dialog(
  id: "defer-donor-dialog",
  title: "Defer donor",
) do |dialog| %>
  <% dialog.with_body do %>
    <%= anchor_form_with(id: "defer-donor-form", url: "https://http.codes/200", method: :post) do |form| %>
      <%= tag.div do %>
        <%= form.label(:reason, "Reason for deferral") %>
        <%= form.text_field(:reason, label: "Reason for deferral") %>
      <% end %>
    <% end %>
  <% end %>
  <% dialog.with_footer do %>
    <%= anchor_button("Cancel", data: { action: "dialog#close" }) %>
    <%= anchor_button("Yes, defer donor", form: "defer-donor-form", type: :submit, variant: :primary) %>
  <% end %>
<% end %>
<%= anchor_dialog(
  id: "end-of-visit-dialog",
  title: "Confirm end of visit",
) do |dialog| %>
  <% dialog.with_body do %>
    <%= anchor_text "Are you sure you want to end this donor's visit?" %>
  <% end %>
  <% dialog.with_footer do %>
    <%= anchor_button("Cancel", data: { action: "dialog#close" }) %>
    <%= form_with(url: "https://http.codes/200", method: :post) do %>
      <%= anchor_button("Yes, end visit", type: :submit, variant: :primary) %>
    <% end %>
  <% end %>
<% end %>

No notes provided.

No params configured.