A-One Design System
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
108
109
110
111
<div class="tw:p-6 tw:max-w-4xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> Map Pin (consumer-only)<br>
      <strong>VARIANTS:</strong> map-pin-accepting (orange) | map-pin-soon (green) | map-pin-closed (red) | map-pin-neutral (gray)
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Teardrop pin marker for the providers Map view. 22×28px wrapper with drop-shadow filter.
      Caller supplies the SVG path inside the <code><span></code>; the CSS fills the path
      based on the tone variant class.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">All 4 tone variants</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Tones map to application status:</strong> Orange = Accepting | Green = Opening soon | Red = Closed | Gray = Unknown/neutral.
      </p>
    </div>
    <div class="tw:flex tw:items-end tw:gap-8 tw:pb-4">
      <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
        <span class="map-pin map-pin-accepting" role="img" aria-label="Accepting applications">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="tw:text-xs tw:text-neutral-500 tw:text-center">Accepting<br>
          <code class="tw:text-[10px]">map-pin-accepting</code></span>
      </div>
      <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
        <span class="map-pin map-pin-soon" role="img" aria-label="Opening soon">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="tw:text-xs tw:text-neutral-500 tw:text-center">Opening soon<br>
          <code class="tw:text-[10px]">map-pin-soon</code></span>
      </div>
      <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
        <span class="map-pin map-pin-closed" role="img" aria-label="Closed">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="tw:text-xs tw:text-neutral-500 tw:text-center">Closed<br>
          <code class="tw:text-[10px]">map-pin-closed</code></span>
      </div>
      <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
        <span class="map-pin map-pin-neutral" role="img" aria-label="Status unknown">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="tw:text-xs tw:text-neutral-500 tw:text-center">Neutral<br>
          <code class="tw:text-[10px]">map-pin-neutral</code></span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><span class="map-pin map-pin-accepting"><svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg></span></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Pins in context — overlaid on a map placeholder</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Context:</strong> Pins are positioned via <code>tw:absolute</code> + inline
        <code>style="left/top"</code> percentage offsets (data-driven, justified).
        The wrapper uses <code>tw:transform tw:-translate-x-1/2 tw:-translate-y-full</code>
        so the pin tip lands at the coordinate.
      </p>
    </div>
    <div class="tw:relative tw:overflow-hidden tw:rounded-[6px]" style="height: 320px;">
      <svg viewBox="0 0 600 320" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="320" fill="#F3F4F0"/>
        <path d="M0,90 Q100,65 200,90 T400,80 T600,100 L600,130 Q500,108 380,120 T180,120 T0,130 Z" fill="#D9EAD0"/>
        <path d="M0,220 Q120,200 240,220 T480,220 T600,235 L600,260 Q500,240 360,252 T160,252 T0,260 Z" fill="#D9EAD0"/>
        <path d="M-20,155 Q120,135 280,155 T560,175 L620,185 L620,205 L580,195 Q460,178 280,195 T-20,185 Z" fill="#B9D8E8"/>
        <path d="M-20,120 Q200,108 380,135 T620,140" stroke="#FFD55C" stroke-width="6" fill="none" opacity="0.9"/>
        <path d="M-20,195 Q160,180 360,210 T620,215" stroke="#FFFFFF" stroke-width="4" fill="none"/>
        <path d="M120,-20 Q140,100 200,220 T280,340" stroke="#FFFFFF" stroke-width="4" fill="none"/>
        <path d="M460,-20 Q440,90 420,195 T380,340" stroke="#FFFFFF" stroke-width="3" fill="none"/>
      </svg>
      <span class="map-pin map-pin-accepting tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 28%; top: 40%;"
            role="button" tabindex="0" aria-label="Greenford High School">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
      <span class="map-pin map-pin-accepting tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 42%; top: 55%;"
            role="button" tabindex="0" aria-label="Cedar Grove Secondary">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
      <span class="map-pin map-pin-soon tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 55%; top: 45%;"
            role="button" tabindex="0" aria-label="St Thomas Academy">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
      <span class="map-pin map-pin-closed tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 65%; top: 60%;"
            role="button" tabindex="0" aria-label="Northfield College">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
      <span class="map-pin map-pin-neutral tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 72%; top: 35%;"
            role="button" tabindex="0" aria-label="Westfield Sixth Form">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
    </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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
<div class="tw:p-6 tw:max-w-4xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>COMPONENT:</strong> Map Pin (consumer-only)<br>
      <strong>VARIANTS:</strong> map-pin-accepting (orange) | map-pin-soon (green) | map-pin-closed (red) | map-pin-neutral (gray)
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Teardrop pin marker for the providers Map view. 22×28px wrapper with drop-shadow filter.
      Caller supplies the SVG path inside the <code><span></code>; the CSS fills the path
      based on the tone variant class.
    </p>
  </div>
  <%# ─────────────────────────────────────────────────────────────── %>
  <%# 1. All 4 tone variants side-by-side                              %>
  <%# ─────────────────────────────────────────────────────────────── %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">All 4 tone variants</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Tones map to application status:</strong> Orange = Accepting | Green = Opening soon | Red = Closed | Gray = Unknown/neutral.
      </p>
    </div>
    <div class="tw:flex tw:items-end tw:gap-8 tw:pb-4">
      <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
        <span class="map-pin map-pin-accepting" role="img" aria-label="Accepting applications">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="tw:text-xs tw:text-neutral-500 tw:text-center">Accepting<br><code class="tw:text-[10px]">map-pin-accepting</code></span>
      </div>
      <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
        <span class="map-pin map-pin-soon" role="img" aria-label="Opening soon">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="tw:text-xs tw:text-neutral-500 tw:text-center">Opening soon<br><code class="tw:text-[10px]">map-pin-soon</code></span>
      </div>
      <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
        <span class="map-pin map-pin-closed" role="img" aria-label="Closed">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="tw:text-xs tw:text-neutral-500 tw:text-center">Closed<br><code class="tw:text-[10px]">map-pin-closed</code></span>
      </div>
      <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
        <span class="map-pin map-pin-neutral" role="img" aria-label="Status unknown">
          <svg viewBox="0 0 22 28">
            <path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/>
          </svg>
        </span>
        <span class="tw:text-xs tw:text-neutral-500 tw:text-center">Neutral<br><code class="tw:text-[10px]">map-pin-neutral</code></span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><span class="map-pin map-pin-accepting"><svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg></span></code>
    </div>
  </div>
  <%# ─────────────────────────────────────────────────────────────── %>
  <%# 2. Pins on a placeholder map background                          %>
  <%# ─────────────────────────────────────────────────────────────── %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Pins in context — overlaid on a map placeholder</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Context:</strong> Pins are positioned via <code>tw:absolute</code> + inline
        <code>style="left/top"</code> percentage offsets (data-driven, justified).
        The wrapper uses <code>tw:transform tw:-translate-x-1/2 tw:-translate-y-full</code>
        so the pin tip lands at the coordinate.
      </p>
    </div>
    <div class="tw:relative tw:overflow-hidden tw:rounded-[6px]" style="height: 320px;">
      <svg viewBox="0 0 600 320" preserveAspectRatio="xMidYMid slice"
           class="tw:absolute tw:inset-0 tw:w-full tw:h-full" aria-hidden="true">
        <rect width="600" height="320" fill="#F3F4F0"/>
        <path d="M0,90 Q100,65 200,90 T400,80 T600,100 L600,130 Q500,108 380,120 T180,120 T0,130 Z" fill="#D9EAD0"/>
        <path d="M0,220 Q120,200 240,220 T480,220 T600,235 L600,260 Q500,240 360,252 T160,252 T0,260 Z" fill="#D9EAD0"/>
        <path d="M-20,155 Q120,135 280,155 T560,175 L620,185 L620,205 L580,195 Q460,178 280,195 T-20,185 Z" fill="#B9D8E8"/>
        <path d="M-20,120 Q200,108 380,135 T620,140" stroke="#FFD55C" stroke-width="6" fill="none" opacity="0.9"/>
        <path d="M-20,195 Q160,180 360,210 T620,215" stroke="#FFFFFF" stroke-width="4" fill="none"/>
        <path d="M120,-20 Q140,100 200,220 T280,340" stroke="#FFFFFF" stroke-width="4" fill="none"/>
        <path d="M460,-20 Q440,90 420,195 T380,340" stroke="#FFFFFF" stroke-width="3" fill="none"/>
      </svg>
      <%# Pins — inline style positions are data-driven, not presentational %>
      <span class="map-pin map-pin-accepting tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 28%; top: 40%;"
            role="button" tabindex="0" aria-label="Greenford High School">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
      <span class="map-pin map-pin-accepting tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 42%; top: 55%;"
            role="button" tabindex="0" aria-label="Cedar Grove Secondary">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
      <span class="map-pin map-pin-soon tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 55%; top: 45%;"
            role="button" tabindex="0" aria-label="St Thomas Academy">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
      <span class="map-pin map-pin-closed tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 65%; top: 60%;"
            role="button" tabindex="0" aria-label="Northfield College">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
      <span class="map-pin map-pin-neutral tw:absolute tw:-translate-x-1/2 tw:-translate-y-full"
            style="left: 72%; top: 35%;"
            role="button" tabindex="0" aria-label="Westfield Sixth Form">
        <svg viewBox="0 0 22 28"><path d="M11 0C5 0 0 4.5 0 10c0 7 11 18 11 18s11-11 11-18C22 4.5 17 0 11 0z" stroke="#fff" stroke-width="1.5"/></svg>
      </span>
    </div>
  </div>
</div>

No notes provided.

No params configured.