@abcnews/components-builder 0.0.4 → 0.0.5
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/dist/BuilderFrame/BuilderFrame.stories.svelte +32 -0
- package/dist/BuilderFrame/BuilderFrame.stories.svelte.d.ts +27 -0
- package/dist/BuilderStyleRoot/BuilderStyleRoot.stories.svelte +181 -0
- package/dist/BuilderStyleRoot/BuilderStyleRoot.stories.svelte.d.ts +27 -0
- package/dist/BuilderStyleRoot/BuilderStyleRoot.svelte +9 -5
- package/package.json +1 -1
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script module>
|
|
2
|
+
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import BuilderFrame from "./BuilderFrame.svelte";
|
|
4
|
+
import BuilderStyleRoot from "../BuilderStyleRoot/BuilderStyleRoot.svelte";
|
|
5
|
+
|
|
6
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
7
|
+
const { Story } = defineMeta({
|
|
8
|
+
title: "Example/BuilderFrame",
|
|
9
|
+
component: BuilderFrame,
|
|
10
|
+
tags: ["autodocs"],
|
|
11
|
+
argTypes: {},
|
|
12
|
+
args: {},
|
|
13
|
+
decorators: [() => BuilderStyleRoot],
|
|
14
|
+
});
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
{#snippet Sidebar()}
|
|
18
|
+
Sidebar
|
|
19
|
+
{/snippet}
|
|
20
|
+
|
|
21
|
+
{#snippet Viz()}
|
|
22
|
+
Viz
|
|
23
|
+
{/snippet}
|
|
24
|
+
|
|
25
|
+
<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
|
|
26
|
+
<Story
|
|
27
|
+
name="Primary"
|
|
28
|
+
args={{
|
|
29
|
+
Sidebar,
|
|
30
|
+
Viz,
|
|
31
|
+
}}
|
|
32
|
+
/>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export default BuilderFrame;
|
|
2
|
+
type BuilderFrame = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const BuilderFrame: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
import BuilderFrame from "./BuilderFrame.svelte";
|
|
15
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
16
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
17
|
+
$$bindings?: Bindings;
|
|
18
|
+
} & Exports;
|
|
19
|
+
(internal: unknown, props: {
|
|
20
|
+
$$events?: Events;
|
|
21
|
+
$$slots?: Slots;
|
|
22
|
+
}): Exports & {
|
|
23
|
+
$set?: any;
|
|
24
|
+
$on?: any;
|
|
25
|
+
};
|
|
26
|
+
z_$$bindings?: Bindings;
|
|
27
|
+
}
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
<script module>
|
|
2
|
+
import { defineMeta } from "@storybook/addon-svelte-csf";
|
|
3
|
+
import BuilderStyleRoot from "./BuilderStyleRoot.svelte";
|
|
4
|
+
|
|
5
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
6
|
+
const { Story } = defineMeta({
|
|
7
|
+
title: "Example/BuilderStyleRoot",
|
|
8
|
+
component: BuilderStyleRoot,
|
|
9
|
+
tags: ["autodocs"],
|
|
10
|
+
argTypes: {},
|
|
11
|
+
args: {},
|
|
12
|
+
});
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
{#snippet children()}
|
|
16
|
+
<fieldset>
|
|
17
|
+
<legend>A fieldset</legend>
|
|
18
|
+
<label>
|
|
19
|
+
<input type="checkbox" />
|
|
20
|
+
Show totals
|
|
21
|
+
</label>
|
|
22
|
+
|
|
23
|
+
<label>
|
|
24
|
+
<input type="checkbox" />
|
|
25
|
+
Combine Coalition
|
|
26
|
+
</label>
|
|
27
|
+
</fieldset>
|
|
28
|
+
|
|
29
|
+
<fieldset>
|
|
30
|
+
<legend>More controls</legend>
|
|
31
|
+
|
|
32
|
+
<label>
|
|
33
|
+
Dinner hero
|
|
34
|
+
<select>
|
|
35
|
+
<option>Banana</option>
|
|
36
|
+
<option>Apple</option>
|
|
37
|
+
<optgroup label="Greens">
|
|
38
|
+
<option>Leek</option>
|
|
39
|
+
<option>Bean</option>
|
|
40
|
+
</optgroup>
|
|
41
|
+
<optgroup label="Other">
|
|
42
|
+
<option>Tomato</option>
|
|
43
|
+
<option>Cucumber</option>
|
|
44
|
+
</optgroup>
|
|
45
|
+
</select>
|
|
46
|
+
</label>
|
|
47
|
+
|
|
48
|
+
<button>A full-width button</button>
|
|
49
|
+
</fieldset>
|
|
50
|
+
|
|
51
|
+
<fieldset>
|
|
52
|
+
<legend>Button groups</legend>
|
|
53
|
+
<div class="btn-group">
|
|
54
|
+
<button>Never</button>
|
|
55
|
+
<button>Gonna</button>
|
|
56
|
+
<button>Give</button>
|
|
57
|
+
<button>You</button>
|
|
58
|
+
<button>Up</button>
|
|
59
|
+
</div>
|
|
60
|
+
</fieldset>
|
|
61
|
+
|
|
62
|
+
<fieldset>
|
|
63
|
+
<legend>Inline fields</legend>
|
|
64
|
+
<div class="builder__inline">
|
|
65
|
+
<div>
|
|
66
|
+
<select>
|
|
67
|
+
<option>Export</option>
|
|
68
|
+
<option>Import</option>
|
|
69
|
+
</select>
|
|
70
|
+
</div>
|
|
71
|
+
<label>
|
|
72
|
+
<input type="checkbox" />
|
|
73
|
+
Show totals
|
|
74
|
+
</label>
|
|
75
|
+
<div>
|
|
76
|
+
<button>Go for it</button>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</fieldset>
|
|
80
|
+
|
|
81
|
+
<fieldset>
|
|
82
|
+
<legend>
|
|
83
|
+
<button class="btn-icon" title="Clear focuses" aria-label="Clear focuses">
|
|
84
|
+
<svg
|
|
85
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
86
|
+
width="16"
|
|
87
|
+
height="16"
|
|
88
|
+
fill="currentColor"
|
|
89
|
+
class="bi bi-trash"
|
|
90
|
+
viewBox="0 0 16 16"
|
|
91
|
+
role="img"
|
|
92
|
+
>
|
|
93
|
+
<path
|
|
94
|
+
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"
|
|
95
|
+
/>
|
|
96
|
+
<path
|
|
97
|
+
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"
|
|
98
|
+
/>
|
|
99
|
+
</svg>
|
|
100
|
+
</button>
|
|
101
|
+
With button
|
|
102
|
+
</legend>
|
|
103
|
+
|
|
104
|
+
<div>
|
|
105
|
+
Although you can put btn-icon buttons anywhere. Consider using <a
|
|
106
|
+
href="https://icons.getbootstrap.com/"
|
|
107
|
+
>https://icons.getbootstrap.com/</a
|
|
108
|
+
>
|
|
109
|
+
or the corresponding <code>svelte-bootstrap-icons</code> package.
|
|
110
|
+
</div>
|
|
111
|
+
<hr />
|
|
112
|
+
<div class="btn-group">
|
|
113
|
+
{#each [1, 2, 3, 4]}
|
|
114
|
+
<button
|
|
115
|
+
class="btn-icon"
|
|
116
|
+
title="Clear focuses"
|
|
117
|
+
aria-label="Clear focuses"
|
|
118
|
+
>
|
|
119
|
+
<svg
|
|
120
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
121
|
+
width="16"
|
|
122
|
+
height="16"
|
|
123
|
+
fill="currentColor"
|
|
124
|
+
class="bi bi-trash"
|
|
125
|
+
viewBox="0 0 16 16"
|
|
126
|
+
role="img"
|
|
127
|
+
>
|
|
128
|
+
<path
|
|
129
|
+
d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"
|
|
130
|
+
/>
|
|
131
|
+
<path
|
|
132
|
+
d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"
|
|
133
|
+
/>
|
|
134
|
+
</svg>
|
|
135
|
+
</button>
|
|
136
|
+
{/each}
|
|
137
|
+
</div>
|
|
138
|
+
</fieldset>
|
|
139
|
+
<fieldset>
|
|
140
|
+
<legend>Tables</legend>
|
|
141
|
+
<table class="builder__table">
|
|
142
|
+
<thead>
|
|
143
|
+
<tr><th>Item</th><th>Amount</th><th>Price</th></tr>
|
|
144
|
+
</thead>
|
|
145
|
+
<tbody>
|
|
146
|
+
<tr
|
|
147
|
+
><td>Cake</td><td class="builder__digit">1</td><td
|
|
148
|
+
class="builder__digit">$2.50</td
|
|
149
|
+
></tr
|
|
150
|
+
>
|
|
151
|
+
<tr
|
|
152
|
+
><td>Prawns</td><td class="builder__digit">13</td><td
|
|
153
|
+
class="builder__digit">$800</td
|
|
154
|
+
></tr
|
|
155
|
+
>
|
|
156
|
+
<tr
|
|
157
|
+
><td>Scissors</td><td class="builder__digit">2</td><td
|
|
158
|
+
class="builder__digit">$11.48</td
|
|
159
|
+
></tr
|
|
160
|
+
>
|
|
161
|
+
</tbody>
|
|
162
|
+
</table>
|
|
163
|
+
</fieldset>
|
|
164
|
+
|
|
165
|
+
<fieldset>
|
|
166
|
+
<legend>Submit row</legend>
|
|
167
|
+
<p>This is more useful in modals:</p>
|
|
168
|
+
<div class="builder__submit-row">
|
|
169
|
+
<button>Back</button>
|
|
170
|
+
<button>Next</button>
|
|
171
|
+
</div>
|
|
172
|
+
</fieldset>
|
|
173
|
+
{/snippet}
|
|
174
|
+
|
|
175
|
+
<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
|
|
176
|
+
<Story
|
|
177
|
+
name="Primary"
|
|
178
|
+
args={{
|
|
179
|
+
children: children,
|
|
180
|
+
}}
|
|
181
|
+
/>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export default BuilderStyleRoot;
|
|
2
|
+
type BuilderStyleRoot = SvelteComponent<{
|
|
3
|
+
[x: string]: never;
|
|
4
|
+
}, {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
}, {}> & {
|
|
7
|
+
$$bindings?: string | undefined;
|
|
8
|
+
};
|
|
9
|
+
declare const BuilderStyleRoot: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
+
[x: string]: never;
|
|
11
|
+
}, {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
}, {}, {}, string>;
|
|
14
|
+
import BuilderStyleRoot from "./BuilderStyleRoot.svelte";
|
|
15
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
16
|
+
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
17
|
+
$$bindings?: Bindings;
|
|
18
|
+
} & Exports;
|
|
19
|
+
(internal: unknown, props: {
|
|
20
|
+
$$events?: Events;
|
|
21
|
+
$$slots?: Slots;
|
|
22
|
+
}): Exports & {
|
|
23
|
+
$set?: any;
|
|
24
|
+
$on?: any;
|
|
25
|
+
};
|
|
26
|
+
z_$$bindings?: Bindings;
|
|
27
|
+
}
|
|
@@ -73,17 +73,16 @@
|
|
|
73
73
|
font-weight: bold;
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
|
-
|
|
77
|
-
.builder__inline {
|
|
76
|
+
.btn-group {
|
|
78
77
|
display: flex;
|
|
78
|
+
gap: 0.25rem;
|
|
79
79
|
flex-wrap: wrap;
|
|
80
|
-
gap: 0.5rem;
|
|
81
80
|
}
|
|
82
81
|
|
|
83
|
-
.
|
|
82
|
+
.builder__inline {
|
|
84
83
|
display: flex;
|
|
85
84
|
flex-wrap: wrap;
|
|
86
|
-
gap:
|
|
85
|
+
gap: 0.5rem;
|
|
87
86
|
}
|
|
88
87
|
|
|
89
88
|
label {
|
|
@@ -172,6 +171,11 @@
|
|
|
172
171
|
border-left: none;
|
|
173
172
|
}
|
|
174
173
|
}
|
|
174
|
+
|
|
175
|
+
.builder__digit {
|
|
176
|
+
text-align: right;
|
|
177
|
+
font-family: monospace;
|
|
178
|
+
}
|
|
175
179
|
}
|
|
176
180
|
</style>
|
|
177
181
|
</svelte:head>
|