Cfa Ui Components

Previews

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
<button x-data @click="$dispatch('tooltip-modal')" type="button" class="group flex items-start gap-cfa-sm text-link-unvisited cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:rounded-sm" data-analytics-event="tooltip_clicked" data-analytics-id="preview/tooltip">
  <svg class="cfa-icon text-current" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#info_outline"></use></svg>
  <span class="underline group-hover:no-underline">Tooltip copy goes here and this string is very very very very very very very very very very very very very very very very very long to show how the text aligns left.</span>
</button>
<div
  x-id="['tooltip-title', 'tooltip-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('tooltip-modal-dismissed');
  }
  },
  init() {
  const resetScrollingBehavior = () => {
  document.documentElement.style.overflow = '';
  document.documentElement.style.paddingRight = '';
  };
  document.addEventListener('turbo:before-visit', resetScrollingBehavior);
  }
  }"
  @tooltip-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('tooltip-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('tooltip-title')"
            class="focus:outline-none"
          >
            Tooltip header
          </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>Tooltip snack content goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>
1
2
3
<%= render(TooltipComponent.new(label: "Tooltip copy goes here and this string is very very very very very very very very very very very very very very very very very long to show how the text aligns left.", modal_name: "tooltip", header: "Tooltip header")) do %>
  <p>Tooltip snack content goes here.</p>
<% end %>

No notes provided.

No params configured.