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