@netlify/spark-ui 1.26.1-alpha.1 → 1.27.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@netlify/spark-ui",
|
|
3
3
|
"description": "Assets, design tokens, components, and utilities",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.27.0-alpha.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/components/preact/index.js",
|
|
7
7
|
"types": "dist/components/preact/index.d.ts",
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
---
|
|
2
|
+
interface Props {
|
|
3
|
+
url: string;
|
|
4
|
+
content: string;
|
|
5
|
+
title?: string;
|
|
6
|
+
class?: string;
|
|
7
|
+
copyUrlLabel?: string;
|
|
8
|
+
copyContentLabel?: string;
|
|
9
|
+
copiedLabel?: string;
|
|
10
|
+
trackingProps?: Record<string, string>;
|
|
11
|
+
trackingSelectorClass?: string;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const {
|
|
15
|
+
url,
|
|
16
|
+
content,
|
|
17
|
+
title,
|
|
18
|
+
class: className,
|
|
19
|
+
copyUrlLabel = 'Copy URL',
|
|
20
|
+
copyContentLabel = 'Copy page',
|
|
21
|
+
copiedLabel = 'Copied!',
|
|
22
|
+
trackingProps = {},
|
|
23
|
+
trackingSelectorClass,
|
|
24
|
+
} = Astro.props;
|
|
25
|
+
|
|
26
|
+
const copyContent = title ? `# ${title}\n\n${content}` : content;
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
<div class:list={['copy-actions', className]} data-copied-label={copiedLabel}>
|
|
30
|
+
<button
|
|
31
|
+
type="button"
|
|
32
|
+
class:list={['copy-actions-action', 'copy-actions-copy-url', trackingSelectorClass]}
|
|
33
|
+
data-copy="url"
|
|
34
|
+
data-value={url}
|
|
35
|
+
data-track-action="copy_url"
|
|
36
|
+
{...trackingProps}
|
|
37
|
+
>
|
|
38
|
+
<svg
|
|
39
|
+
class="copy-actions-icon"
|
|
40
|
+
viewBox="0 0 16 16"
|
|
41
|
+
fill="none"
|
|
42
|
+
stroke="currentColor"
|
|
43
|
+
stroke-width="1.3"
|
|
44
|
+
stroke-linecap="round"
|
|
45
|
+
stroke-linejoin="round"
|
|
46
|
+
aria-hidden="true"
|
|
47
|
+
role="presentation"
|
|
48
|
+
>
|
|
49
|
+
<path d="M6.5 9.5a2.5 2.5 0 0 0 3.6.1l2-2a2.5 2.5 0 0 0-3.6-3.6l-1.1 1.1"></path>
|
|
50
|
+
<path d="M9.5 6.5a2.5 2.5 0 0 0-3.6-.1l-2 2a2.5 2.5 0 0 0 3.6 3.6l1.1-1.1"></path>
|
|
51
|
+
</svg>
|
|
52
|
+
<span class="copy-actions-label">{copyUrlLabel}</span>
|
|
53
|
+
</button>
|
|
54
|
+
<button
|
|
55
|
+
type="button"
|
|
56
|
+
class:list={['copy-actions-action', 'copy-actions-copy-content', trackingSelectorClass]}
|
|
57
|
+
data-copy="page"
|
|
58
|
+
data-track-action="copy_page"
|
|
59
|
+
{...trackingProps}
|
|
60
|
+
>
|
|
61
|
+
<svg
|
|
62
|
+
class="copy-actions-icon"
|
|
63
|
+
viewBox="0 0 16 16"
|
|
64
|
+
fill="currentColor"
|
|
65
|
+
aria-hidden="true"
|
|
66
|
+
role="presentation"
|
|
67
|
+
>
|
|
68
|
+
<path
|
|
69
|
+
d="M4.83333 1C3.82214 1 3 1.78477 3 2.75V13.25C3 14.2152 3.82214 15 4.83333 15H12.1667C13.1779 15 14 14.2152 14 13.25V5.375H10.3333C9.8263 5.375 9.41667 4.98398 9.41667 4.5V1H4.83333ZM10.3333 1V4.5H14L10.3333 1ZM6.20833 8H10.7917C11.0438 8 11.25 8.19687 11.25 8.4375C11.25 8.67813 11.0438 8.875 10.7917 8.875H6.20833C5.95625 8.875 5.75 8.67813 5.75 8.4375C5.75 8.19687 5.95625 8 6.20833 8ZM6.20833 9.75H10.7917C11.0438 9.75 11.25 9.94687 11.25 10.1875C11.25 10.4281 11.0438 10.625 10.7917 10.625H6.20833C5.95625 10.625 5.75 10.4281 5.75 10.1875C5.75 9.94687 5.95625 9.75 6.20833 9.75ZM6.20833 11.5H10.7917C11.0438 11.5 11.25 11.6969 11.25 11.9375C11.25 12.1781 11.0438 12.375 10.7917 12.375H6.20833C5.95625 12.375 5.75 12.1781 5.75 11.9375C5.75 11.6969 5.95625 11.5 6.20833 11.5Z"
|
|
70
|
+
></path>
|
|
71
|
+
</svg>
|
|
72
|
+
<span class="copy-actions-label">{copyContentLabel}</span>
|
|
73
|
+
</button>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<script is:inline type="text/plain" data-copy-actions-source set:text={copyContent} />
|
|
77
|
+
|
|
78
|
+
<style>
|
|
79
|
+
.copy-actions {
|
|
80
|
+
display: flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
gap: var(--ntl-space-2xs);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.copy-actions-action {
|
|
86
|
+
display: flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: var(--ntl-space-3xs);
|
|
89
|
+
background: none;
|
|
90
|
+
border: none;
|
|
91
|
+
padding: 0;
|
|
92
|
+
font: inherit;
|
|
93
|
+
color: var(--ntl-color-text-weak);
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.copy-actions-label {
|
|
98
|
+
font-size: var(--ntl-font-size-text-sm);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.copy-actions-icon {
|
|
102
|
+
width: var(--ntl-space-s);
|
|
103
|
+
height: var(--ntl-space-s);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.copy-actions-copy-url::after {
|
|
107
|
+
content: '•';
|
|
108
|
+
margin-inline-start: var(--ntl-space-2xs);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.copy-actions-action:hover {
|
|
112
|
+
color: var(--ntl-color-text);
|
|
113
|
+
}
|
|
114
|
+
</style>
|
|
115
|
+
|
|
116
|
+
<script>
|
|
117
|
+
const COPIED_RESET_DELAY = 1500;
|
|
118
|
+
|
|
119
|
+
document.querySelectorAll<HTMLElement>('.copy-actions').forEach(wrapper => {
|
|
120
|
+
const source = wrapper.nextElementSibling as HTMLElement | null;
|
|
121
|
+
const copiedLabel = wrapper.dataset.copiedLabel ?? 'Copied!';
|
|
122
|
+
|
|
123
|
+
wrapper.querySelectorAll<HTMLButtonElement>('.copy-actions-action').forEach(btn => {
|
|
124
|
+
const label = btn.querySelector<HTMLElement>('span');
|
|
125
|
+
const originalText = label?.textContent;
|
|
126
|
+
|
|
127
|
+
btn.addEventListener('click', async () => {
|
|
128
|
+
const value =
|
|
129
|
+
btn.getAttribute('data-copy') === 'url'
|
|
130
|
+
? btn.getAttribute('data-value')
|
|
131
|
+
: source?.textContent;
|
|
132
|
+
|
|
133
|
+
if (!value || !label) return;
|
|
134
|
+
|
|
135
|
+
await navigator.clipboard.writeText(value);
|
|
136
|
+
|
|
137
|
+
label.textContent = copiedLabel;
|
|
138
|
+
setTimeout(() => {
|
|
139
|
+
label.textContent = originalText ?? '';
|
|
140
|
+
}, COPIED_RESET_DELAY);
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
});
|
|
144
|
+
</script>
|
|
Binary file
|