@iroco/ui 1.0.0-5 → 1.0.0-7
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/ImageArticle.stories.svelte +61 -0
- package/dist/ImageArticle.stories.svelte.d.ts +66 -0
- package/dist/ImageArticle.svelte +454 -0
- package/dist/ImageArticle.svelte.d.ts +23 -0
- package/dist/TextInput.stories.svelte +1 -0
- package/dist/TextInput.svelte +6 -5
- package/dist/TextInput.svelte.d.ts +5 -5
- package/dist/definition.d.ts +5 -0
- package/dist/definition.js +8 -0
- package/package.json +3 -3
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<script context="module">
|
|
2
|
+
import ImageArticle from './ImageArticle.svelte';
|
|
3
|
+
import accessibilityImageFile from '../stories/assets/accessibility.svg';
|
|
4
|
+
import discordImageFile from '../stories/assets/discord.svg';
|
|
5
|
+
import youtubeImageFile from '../stories/assets/youtube.svg';
|
|
6
|
+
import tutorialsImageFile from '../stories/assets/tutorials.svg';
|
|
7
|
+
|
|
8
|
+
export const meta = {
|
|
9
|
+
title: 'ImageArticle',
|
|
10
|
+
component: ImageArticle,
|
|
11
|
+
argTypes: {
|
|
12
|
+
reversed: {
|
|
13
|
+
control: { type: 'boolean' }
|
|
14
|
+
},
|
|
15
|
+
figureCaption: {
|
|
16
|
+
control: { type: 'text' }
|
|
17
|
+
},
|
|
18
|
+
imgSrc: {
|
|
19
|
+
control: { type: 'select' },
|
|
20
|
+
options: [
|
|
21
|
+
accessibilityImageFile,
|
|
22
|
+
discordImageFile,
|
|
23
|
+
youtubeImageFile,
|
|
24
|
+
tutorialsImageFile,
|
|
25
|
+
tutorialsImageFile]
|
|
26
|
+
},
|
|
27
|
+
buttonList: {}
|
|
28
|
+
},
|
|
29
|
+
args: {
|
|
30
|
+
alt: 'Accessibility alternative text',
|
|
31
|
+
imgSrc: accessibilityImageFile,
|
|
32
|
+
figureCaption: undefined,
|
|
33
|
+
articleTitle: 'Accessibility',
|
|
34
|
+
articleContent: 'Accessibility is incredibly important, yet often overlooked in traditional digital design and development education. Because of this, The A11Y Project strives to be a living example of how to create beautiful, accessible, and inclusive digital experiences.',
|
|
35
|
+
buttonList: [
|
|
36
|
+
{ href: '/foo', label: 'Foo' },
|
|
37
|
+
{ href: '/bar', label: 'Bar' }
|
|
38
|
+
],
|
|
39
|
+
reversed: false
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<script>
|
|
45
|
+
import { Story, Template } from '@storybook/addon-svelte-csf';
|
|
46
|
+
</script>
|
|
47
|
+
|
|
48
|
+
<Template let:args>
|
|
49
|
+
<ImageArticle {...args}></ImageArticle>
|
|
50
|
+
</Template>
|
|
51
|
+
|
|
52
|
+
<Story name="Default" />
|
|
53
|
+
<Story name="Reversed" args={{ reversed: true }} />
|
|
54
|
+
<Story name="Figure caption" args={{ figureCaption: "An optional caption for the figure" ,
|
|
55
|
+
buttonList:[
|
|
56
|
+
{
|
|
57
|
+
href:"https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description",
|
|
58
|
+
label:"Learn about accessible description"
|
|
59
|
+
}
|
|
60
|
+
]
|
|
61
|
+
}} />
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
export namespace meta {
|
|
2
|
+
export let title: string;
|
|
3
|
+
export { ImageArticle as component };
|
|
4
|
+
export namespace argTypes {
|
|
5
|
+
namespace reversed {
|
|
6
|
+
namespace control {
|
|
7
|
+
let type: string;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
namespace figureCaption {
|
|
11
|
+
export namespace control_1 {
|
|
12
|
+
let type_1: string;
|
|
13
|
+
export { type_1 as type };
|
|
14
|
+
}
|
|
15
|
+
export { control_1 as control };
|
|
16
|
+
}
|
|
17
|
+
namespace imgSrc {
|
|
18
|
+
export namespace control_2 {
|
|
19
|
+
let type_2: string;
|
|
20
|
+
export { type_2 as type };
|
|
21
|
+
}
|
|
22
|
+
export { control_2 as control };
|
|
23
|
+
export let options: any[];
|
|
24
|
+
}
|
|
25
|
+
let buttonList: {};
|
|
26
|
+
}
|
|
27
|
+
export namespace args {
|
|
28
|
+
export let alt: string;
|
|
29
|
+
export { accessibilityImageFile as imgSrc };
|
|
30
|
+
let figureCaption_1: undefined;
|
|
31
|
+
export { figureCaption_1 as figureCaption };
|
|
32
|
+
export let articleTitle: string;
|
|
33
|
+
export let articleContent: string;
|
|
34
|
+
let buttonList_1: {
|
|
35
|
+
href: string;
|
|
36
|
+
label: string;
|
|
37
|
+
}[];
|
|
38
|
+
export { buttonList_1 as buttonList };
|
|
39
|
+
let reversed_1: boolean;
|
|
40
|
+
export { reversed_1 as reversed };
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
/** @typedef {typeof __propDef.props} ImageArticleProps */
|
|
44
|
+
/** @typedef {typeof __propDef.events} ImageArticleEvents */
|
|
45
|
+
/** @typedef {typeof __propDef.slots} ImageArticleSlots */
|
|
46
|
+
export default class ImageArticle extends SvelteComponent<{
|
|
47
|
+
[x: string]: never;
|
|
48
|
+
}, {
|
|
49
|
+
[evt: string]: CustomEvent<any>;
|
|
50
|
+
}, {}> {
|
|
51
|
+
}
|
|
52
|
+
export type ImageArticleProps = typeof __propDef.props;
|
|
53
|
+
export type ImageArticleEvents = typeof __propDef.events;
|
|
54
|
+
export type ImageArticleSlots = typeof __propDef.slots;
|
|
55
|
+
import ImageArticle from './ImageArticle.svelte';
|
|
56
|
+
import { SvelteComponent } from "svelte";
|
|
57
|
+
declare const __propDef: {
|
|
58
|
+
props: {
|
|
59
|
+
[x: string]: never;
|
|
60
|
+
};
|
|
61
|
+
events: {
|
|
62
|
+
[evt: string]: CustomEvent<any>;
|
|
63
|
+
};
|
|
64
|
+
slots: {};
|
|
65
|
+
};
|
|
66
|
+
export {};
|
|
@@ -0,0 +1,454 @@
|
|
|
1
|
+
<script>import { Icon } from "svelte-awesome";
|
|
2
|
+
import chevronRight from "svelte-awesome/icons/chevronRight";
|
|
3
|
+
export let imgSrc;
|
|
4
|
+
export let figureCaption = void 0;
|
|
5
|
+
export let alt;
|
|
6
|
+
export let articleTitle;
|
|
7
|
+
export let articleContent;
|
|
8
|
+
export let buttonList = [];
|
|
9
|
+
export let reversed = false;
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<div class="imagearticle" class:reversed>
|
|
13
|
+
<figure class="imagearticle__figure">
|
|
14
|
+
<img class="imagearticle__figure__image"
|
|
15
|
+
src={imgSrc}
|
|
16
|
+
{alt} />
|
|
17
|
+
{#if figureCaption}
|
|
18
|
+
<figcaption>{ figureCaption }</figcaption>
|
|
19
|
+
{/if}
|
|
20
|
+
</figure>
|
|
21
|
+
|
|
22
|
+
<article class="imagearticle__article">
|
|
23
|
+
<h1>{articleTitle}</h1>
|
|
24
|
+
<p>{articleContent}</p>
|
|
25
|
+
<div class="imagearticle__article__buttonGroup">
|
|
26
|
+
{#each buttonList as buttonModel}
|
|
27
|
+
<a
|
|
28
|
+
class="iroco-ui-button iroco-ui-button--small iroco-ui-button--dark"
|
|
29
|
+
href={buttonModel.href}
|
|
30
|
+
role="button"
|
|
31
|
+
>
|
|
32
|
+
<Icon data={chevronRight} />
|
|
33
|
+
{buttonModel.label}
|
|
34
|
+
</a>
|
|
35
|
+
{/each}
|
|
36
|
+
</div>
|
|
37
|
+
</article>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<style>.container-wide {
|
|
41
|
+
width: calc(100% - 20px);
|
|
42
|
+
max-width: 2360px;
|
|
43
|
+
margin-left: auto;
|
|
44
|
+
margin-right: auto;
|
|
45
|
+
transition: max-width ease-out 200ms;
|
|
46
|
+
}
|
|
47
|
+
@media all and (max-width: 2560px) {
|
|
48
|
+
.container-wide {
|
|
49
|
+
max-width: 1620px;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
@media all and (max-width: 1800px) {
|
|
53
|
+
.container-wide {
|
|
54
|
+
max-width: 1280px;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
@media all and (max-width: 1440px) {
|
|
58
|
+
.container-wide {
|
|
59
|
+
max-width: 884px;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
@media all and (max-width: 1024px) {
|
|
63
|
+
.container-wide {
|
|
64
|
+
max-width: 648px;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
@media all and (max-width: 768px) {
|
|
68
|
+
.container-wide {
|
|
69
|
+
max-width: 496px;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
@media all and (max-width: 596px) {
|
|
73
|
+
.container-wide {
|
|
74
|
+
max-width: 365px;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
@media all and (max-width: 425px) {
|
|
78
|
+
.container-wide {
|
|
79
|
+
max-width: calc(100% - 60px);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
@media all and (max-width: 375px) {
|
|
83
|
+
.container-wide {
|
|
84
|
+
max-width: calc(100% - 40px);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
@media all and (max-width: 320px) {
|
|
88
|
+
.container-wide {
|
|
89
|
+
max-width: calc(100% - 20px);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
.container-large {
|
|
93
|
+
width: calc(100% - 20px);
|
|
94
|
+
max-width: 1280px;
|
|
95
|
+
margin-left: auto;
|
|
96
|
+
margin-right: auto;
|
|
97
|
+
transition: max-width ease-out 200ms;
|
|
98
|
+
}
|
|
99
|
+
@media all and (max-width: 1440px) {
|
|
100
|
+
.container-large {
|
|
101
|
+
max-width: 884px;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
@media all and (max-width: 1024px) {
|
|
105
|
+
.container-large {
|
|
106
|
+
max-width: 648px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
@media all and (max-width: 768px) {
|
|
110
|
+
.container-large {
|
|
111
|
+
max-width: 496px;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
@media all and (max-width: 596px) {
|
|
115
|
+
.container-large {
|
|
116
|
+
max-width: 365px;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
@media all and (max-width: 425px) {
|
|
120
|
+
.container-large {
|
|
121
|
+
max-width: calc(100% - 60px);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
@media all and (max-width: 375px) {
|
|
125
|
+
.container-large {
|
|
126
|
+
max-width: calc(100% - 40px);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
@media all and (max-width: 320px) {
|
|
130
|
+
.container-large {
|
|
131
|
+
max-width: calc(100% - 20px);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
.container-medium {
|
|
135
|
+
width: calc(100% - 20px);
|
|
136
|
+
max-width: 884px;
|
|
137
|
+
margin-left: auto;
|
|
138
|
+
margin-right: auto;
|
|
139
|
+
transition: max-width ease-out 200ms;
|
|
140
|
+
}
|
|
141
|
+
@media all and (max-width: 1024px) {
|
|
142
|
+
.container-medium {
|
|
143
|
+
max-width: 648px;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
@media all and (max-width: 768px) {
|
|
147
|
+
.container-medium {
|
|
148
|
+
max-width: 496px;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
@media all and (max-width: 596px) {
|
|
152
|
+
.container-medium {
|
|
153
|
+
max-width: 365px;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
@media all and (max-width: 425px) {
|
|
157
|
+
.container-medium {
|
|
158
|
+
max-width: calc(100% - 60px);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
@media all and (max-width: 375px) {
|
|
162
|
+
.container-medium {
|
|
163
|
+
max-width: calc(100% - 40px);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
@media all and (max-width: 320px) {
|
|
167
|
+
.container-medium {
|
|
168
|
+
max-width: calc(100% - 20px);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
.container-small {
|
|
172
|
+
width: calc(100% - 20px);
|
|
173
|
+
max-width: 496px;
|
|
174
|
+
margin-left: auto;
|
|
175
|
+
margin-right: auto;
|
|
176
|
+
transition: max-width ease-out 200ms;
|
|
177
|
+
}
|
|
178
|
+
@media all and (max-width: 425px) {
|
|
179
|
+
.container-small {
|
|
180
|
+
max-width: calc(100% - 60px);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
@media all and (max-width: 375px) {
|
|
184
|
+
.container-small {
|
|
185
|
+
max-width: calc(100% - 40px);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
@media all and (max-width: 320px) {
|
|
189
|
+
.container-small {
|
|
190
|
+
max-width: calc(100% - 20px);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
.container-wide {
|
|
194
|
+
width: calc(100% - 20px);
|
|
195
|
+
max-width: 2360px;
|
|
196
|
+
margin-left: auto;
|
|
197
|
+
margin-right: auto;
|
|
198
|
+
transition: max-width ease-out 200ms;
|
|
199
|
+
}
|
|
200
|
+
@media all and (max-width: 2560px) {
|
|
201
|
+
.container-wide {
|
|
202
|
+
max-width: 1620px;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
@media all and (max-width: 1800px) {
|
|
206
|
+
.container-wide {
|
|
207
|
+
max-width: 1280px;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
@media all and (max-width: 1440px) {
|
|
211
|
+
.container-wide {
|
|
212
|
+
max-width: 884px;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
@media all and (max-width: 1024px) {
|
|
216
|
+
.container-wide {
|
|
217
|
+
max-width: 648px;
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
@media all and (max-width: 768px) {
|
|
221
|
+
.container-wide {
|
|
222
|
+
max-width: 496px;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
@media all and (max-width: 596px) {
|
|
226
|
+
.container-wide {
|
|
227
|
+
max-width: 365px;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
@media all and (max-width: 425px) {
|
|
231
|
+
.container-wide {
|
|
232
|
+
max-width: calc(100% - 60px);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
@media all and (max-width: 375px) {
|
|
236
|
+
.container-wide {
|
|
237
|
+
max-width: calc(100% - 40px);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
@media all and (max-width: 320px) {
|
|
241
|
+
.container-wide {
|
|
242
|
+
max-width: calc(100% - 20px);
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
.container-large {
|
|
246
|
+
width: calc(100% - 20px);
|
|
247
|
+
max-width: 1280px;
|
|
248
|
+
margin-left: auto;
|
|
249
|
+
margin-right: auto;
|
|
250
|
+
transition: max-width ease-out 200ms;
|
|
251
|
+
}
|
|
252
|
+
@media all and (max-width: 1440px) {
|
|
253
|
+
.container-large {
|
|
254
|
+
max-width: 884px;
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
@media all and (max-width: 1024px) {
|
|
258
|
+
.container-large {
|
|
259
|
+
max-width: 648px;
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
@media all and (max-width: 768px) {
|
|
263
|
+
.container-large {
|
|
264
|
+
max-width: 496px;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
@media all and (max-width: 596px) {
|
|
268
|
+
.container-large {
|
|
269
|
+
max-width: 365px;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
@media all and (max-width: 425px) {
|
|
273
|
+
.container-large {
|
|
274
|
+
max-width: calc(100% - 60px);
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
@media all and (max-width: 375px) {
|
|
278
|
+
.container-large {
|
|
279
|
+
max-width: calc(100% - 40px);
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
@media all and (max-width: 320px) {
|
|
283
|
+
.container-large {
|
|
284
|
+
max-width: calc(100% - 20px);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
.container-medium {
|
|
288
|
+
width: calc(100% - 20px);
|
|
289
|
+
max-width: 884px;
|
|
290
|
+
margin-left: auto;
|
|
291
|
+
margin-right: auto;
|
|
292
|
+
transition: max-width ease-out 200ms;
|
|
293
|
+
}
|
|
294
|
+
@media all and (max-width: 1024px) {
|
|
295
|
+
.container-medium {
|
|
296
|
+
max-width: 648px;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
@media all and (max-width: 768px) {
|
|
300
|
+
.container-medium {
|
|
301
|
+
max-width: 496px;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
@media all and (max-width: 596px) {
|
|
305
|
+
.container-medium {
|
|
306
|
+
max-width: 365px;
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
@media all and (max-width: 425px) {
|
|
310
|
+
.container-medium {
|
|
311
|
+
max-width: calc(100% - 60px);
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
@media all and (max-width: 375px) {
|
|
315
|
+
.container-medium {
|
|
316
|
+
max-width: calc(100% - 40px);
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
@media all and (max-width: 320px) {
|
|
320
|
+
.container-medium {
|
|
321
|
+
max-width: calc(100% - 20px);
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
.container-small {
|
|
325
|
+
width: calc(100% - 20px);
|
|
326
|
+
max-width: 496px;
|
|
327
|
+
margin-left: auto;
|
|
328
|
+
margin-right: auto;
|
|
329
|
+
transition: max-width ease-out 200ms;
|
|
330
|
+
}
|
|
331
|
+
@media all and (max-width: 425px) {
|
|
332
|
+
.container-small {
|
|
333
|
+
max-width: calc(100% - 60px);
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
@media all and (max-width: 375px) {
|
|
337
|
+
.container-small {
|
|
338
|
+
max-width: calc(100% - 40px);
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
@media all and (max-width: 320px) {
|
|
342
|
+
.container-small {
|
|
343
|
+
max-width: calc(100% - 20px);
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
.iroco-ui-button {
|
|
347
|
+
cursor: pointer;
|
|
348
|
+
-webkit-touch-callout: none;
|
|
349
|
+
-webkit-user-select: none;
|
|
350
|
+
-moz-user-select: none;
|
|
351
|
+
-ms-user-select: none;
|
|
352
|
+
user-select: none;
|
|
353
|
+
border: none;
|
|
354
|
+
flex-shrink: 0;
|
|
355
|
+
margin: 1em 0;
|
|
356
|
+
position: relative;
|
|
357
|
+
text-transform: uppercase;
|
|
358
|
+
border-radius: 0.3em;
|
|
359
|
+
}
|
|
360
|
+
.iroco-ui-button--basic {
|
|
361
|
+
color: var(--btn-basic-label);
|
|
362
|
+
background: var(--btn-basic-bg);
|
|
363
|
+
border: 1px solid var(--btn-basic-border);
|
|
364
|
+
}
|
|
365
|
+
.iroco-ui-button--dark {
|
|
366
|
+
background: var(--dark-btn-primary-bg);
|
|
367
|
+
color: var(--dark-btn-primary-label);
|
|
368
|
+
}
|
|
369
|
+
.iroco-ui-button--success {
|
|
370
|
+
background: var(--color-success);
|
|
371
|
+
color: var(--btn-secondary-label);
|
|
372
|
+
}
|
|
373
|
+
.iroco-ui-button--danger {
|
|
374
|
+
background: var(--color-danger);
|
|
375
|
+
}
|
|
376
|
+
.iroco-ui-button--regular {
|
|
377
|
+
padding: 1em 2em;
|
|
378
|
+
}
|
|
379
|
+
.iroco-ui-button--small {
|
|
380
|
+
padding: 0.5em 1em;
|
|
381
|
+
}
|
|
382
|
+
.iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
|
|
383
|
+
box-shadow: inset 0 0 0 10em var(--color-black-op-20);
|
|
384
|
+
}
|
|
385
|
+
.iroco-ui-button--dark:hover {
|
|
386
|
+
box-shadow: inset 0 0 0 10em var(--color-white-op-20);
|
|
387
|
+
}
|
|
388
|
+
.iroco-ui-button:active {
|
|
389
|
+
box-shadow: none;
|
|
390
|
+
}
|
|
391
|
+
.iroco-ui-button.disabled, .iroco-ui-button:disabled {
|
|
392
|
+
background-color: var(--btn-disabled-bg);
|
|
393
|
+
color: var(--btn-disabled-label);
|
|
394
|
+
border-color: var(--btn-disabled-border);
|
|
395
|
+
cursor: default;
|
|
396
|
+
}
|
|
397
|
+
.iroco-ui-button.disabled:hover, .iroco-ui-button:disabled:hover {
|
|
398
|
+
box-shadow: none;
|
|
399
|
+
}
|
|
400
|
+
.iroco-ui-link {
|
|
401
|
+
background: none;
|
|
402
|
+
border: none;
|
|
403
|
+
font-family: "Arial";
|
|
404
|
+
color: var(--color-text);
|
|
405
|
+
cursor: pointer;
|
|
406
|
+
}
|
|
407
|
+
.imagearticle {
|
|
408
|
+
display: flex;
|
|
409
|
+
justify-content: space-around;
|
|
410
|
+
align-items: center;
|
|
411
|
+
}
|
|
412
|
+
.imagearticle__figure {
|
|
413
|
+
width: 40%;
|
|
414
|
+
display: block;
|
|
415
|
+
object-fit: cover;
|
|
416
|
+
margin: 0 auto;
|
|
417
|
+
text-align: center;
|
|
418
|
+
}
|
|
419
|
+
.imagearticle__figure__image {
|
|
420
|
+
width: 100%;
|
|
421
|
+
}
|
|
422
|
+
.imagearticle__article {
|
|
423
|
+
width: 50%;
|
|
424
|
+
text-align: center;
|
|
425
|
+
display: flex;
|
|
426
|
+
flex-direction: column;
|
|
427
|
+
justify-content: space-around;
|
|
428
|
+
align-items: center;
|
|
429
|
+
padding: 2em;
|
|
430
|
+
}
|
|
431
|
+
.imagearticle__article__buttonGroup {
|
|
432
|
+
display: flex;
|
|
433
|
+
gap: 1em;
|
|
434
|
+
flex-wrap: wrap;
|
|
435
|
+
}
|
|
436
|
+
.imagearticle.reversed {
|
|
437
|
+
flex-direction: row-reverse;
|
|
438
|
+
}
|
|
439
|
+
@media all and (max-width: 768px) {
|
|
440
|
+
.imagearticle {
|
|
441
|
+
display: block;
|
|
442
|
+
width: 80%;
|
|
443
|
+
text-align: center;
|
|
444
|
+
}
|
|
445
|
+
.imagearticle__figure {
|
|
446
|
+
width: 100%;
|
|
447
|
+
}
|
|
448
|
+
.imagearticle__figure__image {
|
|
449
|
+
width: 100%;
|
|
450
|
+
}
|
|
451
|
+
.imagearticle__article {
|
|
452
|
+
width: 100%;
|
|
453
|
+
}
|
|
454
|
+
}</style>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import type { ButtonModel } from './definition';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
imgSrc: string;
|
|
6
|
+
figureCaption?: string | undefined;
|
|
7
|
+
alt: string;
|
|
8
|
+
articleTitle: string;
|
|
9
|
+
articleContent: string;
|
|
10
|
+
buttonList?: ButtonModel[] | undefined;
|
|
11
|
+
reversed?: boolean | undefined;
|
|
12
|
+
};
|
|
13
|
+
events: {
|
|
14
|
+
[evt: string]: CustomEvent<any>;
|
|
15
|
+
};
|
|
16
|
+
slots: {};
|
|
17
|
+
};
|
|
18
|
+
export type ImageArticleProps = typeof __propDef.props;
|
|
19
|
+
export type ImageArticleEvents = typeof __propDef.events;
|
|
20
|
+
export type ImageArticleSlots = typeof __propDef.slots;
|
|
21
|
+
export default class ImageArticle extends SvelteComponent<ImageArticleProps, ImageArticleEvents, ImageArticleSlots> {
|
|
22
|
+
}
|
|
23
|
+
export {};
|
package/dist/TextInput.svelte
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export let
|
|
1
|
+
<script>import {} from "./definition";
|
|
2
|
+
export let id;
|
|
3
|
+
export let type = TextInputType.text;
|
|
3
4
|
export let name;
|
|
4
5
|
export let label = null;
|
|
5
|
-
export let placeholder;
|
|
6
|
+
export let placeholder = null;
|
|
6
7
|
export let error = null;
|
|
7
8
|
export let htmlError = false;
|
|
8
9
|
export let value = null;
|
|
9
|
-
export let onFocus;
|
|
10
|
-
export let onBlur;
|
|
10
|
+
export let onFocus = null;
|
|
11
|
+
export let onBlur = null;
|
|
11
12
|
export let readonly = false;
|
|
12
13
|
export let border = false;
|
|
13
14
|
export let autocomplete = "on";
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import type
|
|
2
|
+
import { type TextInputType } from './definition';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
id: string;
|
|
6
|
-
type
|
|
6
|
+
type?: TextInputType | undefined;
|
|
7
7
|
name: string;
|
|
8
8
|
label?: string | null | undefined;
|
|
9
|
-
placeholder
|
|
9
|
+
placeholder?: string | null | undefined;
|
|
10
10
|
error?: string | null | undefined;
|
|
11
11
|
htmlError?: boolean | undefined;
|
|
12
12
|
value?: string | null | undefined;
|
|
13
|
-
onFocus
|
|
14
|
-
onBlur
|
|
13
|
+
onFocus?: ((e: FocusEvent) => void | null) | undefined;
|
|
14
|
+
onBlur?: ((e: Event) => void | null) | undefined;
|
|
15
15
|
readonly?: boolean | undefined;
|
|
16
16
|
border?: boolean | undefined;
|
|
17
17
|
autocomplete?: string | undefined;
|
package/dist/definition.d.ts
CHANGED
package/dist/definition.js
CHANGED
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iroco/ui",
|
|
3
|
-
"version": "1.0.0-
|
|
3
|
+
"version": "1.0.0-7",
|
|
4
4
|
"description": "Iroco design system based on Svelte",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"dev": "
|
|
7
|
+
"dev": "storybook dev -p 5175",
|
|
8
8
|
"build": "svelte-kit sync && svelte-package",
|
|
9
9
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
10
10
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
"format": "prettier --plugin-search-dir . --write .",
|
|
15
15
|
"clean": "rm -rf dist && npm cache clean --force",
|
|
16
16
|
"release": "npm run format && npm run build && release-it --only-version",
|
|
17
|
-
"storybook": "storybook dev -p 5175",
|
|
18
17
|
"build-storybook": "storybook build"
|
|
19
18
|
},
|
|
20
19
|
"devDependencies": {
|
|
@@ -54,6 +53,7 @@
|
|
|
54
53
|
"storybook": "^7.6.13",
|
|
55
54
|
"svelte": "^4.2.10",
|
|
56
55
|
"svelte-check": "^3.6.4",
|
|
56
|
+
"svelte-awesome": "^3.3.1",
|
|
57
57
|
"tslib": "^2.6.2",
|
|
58
58
|
"typescript": "^5.0.0",
|
|
59
59
|
"vite": "^5.1.1",
|