@iroco/ui 1.0.0-4 → 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.
Files changed (39) hide show
  1. package/README.md +9 -14
  2. package/dist/Alert.stories.svelte +5 -4
  3. package/dist/Alert.svelte +1 -98
  4. package/dist/Button.stories.svelte +2 -2
  5. package/dist/Button.svelte +1 -98
  6. package/dist/DataTable.stories.svelte +13 -15
  7. package/dist/DataTable.svelte +1 -98
  8. package/dist/IconBurger.stories.svelte +3 -5
  9. package/dist/IconClose.stories.svelte +2 -4
  10. package/dist/IconFloppyDisk.stories.svelte +4 -7
  11. package/dist/IconInfo.stories.svelte +2 -5
  12. package/dist/IconIrocoLogo.stories.svelte +2 -5
  13. package/dist/IconMoreSign.stories.svelte +2 -5
  14. package/dist/IconTrashCan.stories.svelte +2 -5
  15. package/dist/ImageArticle.stories.svelte +49 -0
  16. package/dist/ImageArticle.stories.svelte.d.ts +57 -0
  17. package/dist/ImageArticle.svelte +438 -0
  18. package/dist/ImageArticle.svelte.d.ts +22 -0
  19. package/dist/IrocoLogo.stories.svelte +2 -8
  20. package/dist/Loader.stories.svelte +3 -7
  21. package/dist/NavBar.stories.svelte +13 -14
  22. package/dist/NavBar.svelte +1 -278
  23. package/dist/Navigation.stories.svelte +14 -15
  24. package/dist/Navigation.svelte +9 -139
  25. package/dist/NumberInput.stories.svelte +3 -6
  26. package/dist/NumberInput.svelte +1 -98
  27. package/dist/RadioButton.stories.svelte +4 -18
  28. package/dist/RadioButton.svelte +1 -98
  29. package/dist/TextInput.stories.svelte +11 -9
  30. package/dist/TextInput.svelte +1 -98
  31. package/dist/definition.d.ts +5 -0
  32. package/dist/definition.js +8 -0
  33. package/dist/scss/button.scss +1 -1
  34. package/dist/scss/colors.scss +2 -60
  35. package/dist/scss/fields/_checkbox.scss +3 -3
  36. package/dist/scss/fields/_input.scss +7 -7
  37. package/dist/scss/forms.scss +1 -1
  38. package/dist/scss/style.scss +1 -1
  39. package/package.json +3 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # iroco-ui
2
2
 
3
- [![Circle CI](https://circleci.com/gh/iroco-co/iroco-ui.png?circle-token=218e3654fb138427bb709b068ed847b58f8d4ac7&style=svg)](https://app.circleci.com/pipelines/github/iroco-co/iroco-ui)
3
+ [![CircleCI](https://dl.circleci.com/status-badge/img/gh/iroco-co/iroco-ui/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/iroco-co/iroco-ui/tree/main)
4
4
 
5
5
  Design system for Iroco [based on SvelteKit](https://kit.svelte.dev/docs/packaging).
6
6
 
@@ -25,7 +25,6 @@ npm install @iroco/ui@next
25
25
  `src/app.scss`
26
26
 
27
27
  ```scss
28
- @use 'node_modules/@iroco/ui/dist/scss/colors';
29
28
  @use 'node_modules/@iroco/ui/dist/scss/fonts';
30
29
  @use 'node_modules/@iroco/ui/dist/scss/style';
31
30
  @use 'node_modules/@iroco/ui/dist/scss/constants';
@@ -38,25 +37,21 @@ Example of layout with navigation
38
37
 
39
38
  ```svelte
40
39
  <script>
41
- import '../app.scss';
42
- import { Navigation, NavigationItem } from '@iroco/ui';
40
+ import '../app.scss';
41
+ import { Navigation, NavigationItem } from '@iroco/ui';
43
42
  </script>
44
43
 
45
- <Navigation
46
- navigationItems={[new NavigationItem("About", "/about"),]}
47
- type="topbar"
48
- />
44
+ <Navigation navigationItems={[new NavigationItem('About', '/about')]} type="topbar" />
49
45
  <main class="main">
50
- <slot />
46
+ <slot />
51
47
  </main>
52
48
 
53
49
  <style lang="scss">
54
- @use "node_modules/@iroco/ui/dist/scss/colors.scss";
55
- @use "node_modules/@iroco/ui/dist/scss/constants.scss";
56
- @import "node_modules/@iroco/ui/dist/scss/containers.scss";
57
- @import "node_modules/@iroco/ui/dist/scss/button.scss";
50
+ @use 'node_modules/@iroco/ui/dist/scss/colors.scss';
51
+ @use 'node_modules/@iroco/ui/dist/scss/constants.scss';
52
+ @import 'node_modules/@iroco/ui/dist/scss/containers.scss';
53
+ @import 'node_modules/@iroco/ui/dist/scss/button.scss';
58
54
  </style>
59
-
60
55
  ```
61
56
 
62
57
  # develop
package/dist/Alert.stories.svelte CHANGED
@@ -19,13 +19,14 @@
19
19
 
20
20
  <Template let:args>
21
21
  <Alert {...args}>
22
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
23
- et dolore magna aliqua. Ut porttitor leo a diam. Gravida dictum fusce ut placerat orci nulla. Pulvinar sapien et
24
- ligula ullamcorper. Ultrices neque ornare aenean euismod. Facilisi cras fermentum odio eu feugiat pretium.
22
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
23
+ labore et dolore magna aliqua. Ut porttitor leo a diam. Gravida dictum fusce ut placerat orci
24
+ nulla. Pulvinar sapien et ligula ullamcorper. Ultrices neque ornare aenean euismod. Facilisi
25
+ cras fermentum odio eu feugiat pretium.
25
26
  </Alert>
26
27
  </Template>
27
28
 
28
- <Story name="Default"></Story>
29
+ <Story name="Default" />
29
30
  <Story name="Danger" args={{ type: 'danger' }} />
30
31
  <Story name="Success" args={{ type: 'success' }} />
31
32
  <Story name="Flash" args={{ type: 'flash' }} />
package/dist/Alert.svelte CHANGED
@@ -10,104 +10,7 @@ export let callback;
10
10
  <slot />
11
11
  </div>
12
12
 
13
- <style>.font-color-blue {
14
- color: #00b9ff;
15
- }
16
-
17
- .font-color-darkBlue {
18
- color: #211d28;
19
- }
20
-
21
- .font-color-nightBlue {
22
- color: #18151e;
23
- }
24
-
25
- .font-color-green {
26
- color: #00d692;
27
- }
28
-
29
- .font-color-red {
30
- color: #ff504d;
31
- }
32
-
33
- .font-color-yellow {
34
- color: #ffe032;
35
- }
36
-
37
- .font-color-beige {
38
- color: #f2ebe3;
39
- }
40
-
41
- .font-color-darkBeige {
42
- color: #a9a29e;
43
- }
44
-
45
- .font-color-mediumGrey {
46
- color: #464452;
47
- }
48
-
49
- .font-color-darkGrey {
50
- color: #33323a;
51
- }
52
-
53
- .font-color-lightGrey {
54
- color: #f5f5f5;
55
- }
56
-
57
- :root {
58
- --color-white-op-20: rgba(255, 255, 255, 0.2);
59
- --color-white-op-30: rgba(255, 255, 255, 0.3);
60
- --color-black-op-20: rgba(0, 0, 0, 0.2);
61
- --color-black-op-40: rgba(0, 0, 0, 0.4);
62
- --color-black-op-60: rgba(0, 0, 0, 0.6);
63
- --color-dark-blue-op-30: #211d284d;
64
- /* semantic colors */
65
- --color-primary-light: #82eec7;
66
- --color-primary: #00d692;
67
- --color-primary-bg: #00d69280;
68
- --color-primary-dark: #00a873;
69
- --color-secondary-light: #ffffff;
70
- --color-secondary: #f2ebe3;
71
- --color-secondary-dark: #a9a29e;
72
- /* feedback */
73
- --color-success: #00d692;
74
- --color-success-bg: #00d69280;
75
- --color-danger: #ff504d;
76
- --color-danger-bg: #ff504d80;
77
- --color-warning: #ffe032;
78
- --color-warning-bg: #ffe03280;
79
- /* typography */
80
- --color-text-light: #ffffff;
81
- --color-text: #f2ebe3;
82
- --color-text-op-50: #f2ebe380;
83
- --color-text-op-60: #f2ebe399;
84
- --color-text-dark: #464452;
85
- /* border */
86
- --color-border: #464452;
87
- /* body */
88
- --color-body: #211d28;
89
- /* forms */
90
- --form-element-border: var(--color-border);
91
- --form-element-bg: #f2ebe3;
92
- --form-text-placeholder: #a9a29e;
93
- /* buttons */
94
- --btn-primary-bg: #f2ebe3;
95
- --btn-primary-border: #18151e;
96
- --btn-primary-label: #f2ebe3;
97
- --dark-btn-primary-label: #f2ebe3;
98
- --dark-btn-primary-bg: #18151e;
99
- --btn-basic-label: #18151e;
100
- --btn-basic-bg: #f2ebe3;
101
- --btn-basic-border: #18151e;
102
- --btn-disabled-label: var(--color-black-op-60);
103
- --btn-disabled-bg: #a9a29e;
104
- --btn-disabled-border: var(--color-black-op-60);
105
- /* icons */
106
- --color-icon-primary: #a9a29e;
107
- --color-icon-secondary: inherit;
108
- }
109
-
110
- .alert {
13
+ <style>.alert {
111
14
  flex-direction: column;
112
15
  position: relative;
113
16
  min-height: 2em;
package/dist/Button.stories.svelte CHANGED
@@ -29,12 +29,12 @@
29
29
 
30
30
  <Template let:args>
31
31
  <!--👇 'on:click' allows to forward event to addon-actions -->
32
- <Button {...args} on:click={handleClick}>
32
+ <Button {...args} on:click={handleClick}>
33
33
  You clicked: {count}
34
34
  </Button>
35
35
  </Template>
36
36
 
37
- <Story name="Default"></Story>
37
+ <Story name="Default" />
38
38
  <Story name="Success" args={{ kind: 'success' }} />
39
39
  <Story name="Danger" args={{ kind: 'danger' }} />
40
40
  <Story name="Dark" args={{ kind: 'dark' }} />
package/dist/Button.svelte CHANGED
@@ -20,104 +20,7 @@ export let node;
20
20
  <slot />
21
21
  </button>
22
22
 
23
- <style>.font-color-blue {
24
- color: #00b9ff;
25
- }
26
-
27
- .font-color-darkBlue {
28
- color: #211d28;
29
- }
30
-
31
- .font-color-nightBlue {
32
- color: #18151e;
33
- }
34
-
35
- .font-color-green {
36
- color: #00d692;
37
- }
38
-
39
- .font-color-red {
40
- color: #ff504d;
41
- }
42
-
43
- .font-color-yellow {
44
- color: #ffe032;
45
- }
46
-
47
- .font-color-beige {
48
- color: #f2ebe3;
49
- }
50
-
51
- .font-color-darkBeige {
52
- color: #a9a29e;
53
- }
54
-
55
- .font-color-mediumGrey {
56
- color: #464452;
57
- }
58
-
59
- .font-color-darkGrey {
60
- color: #33323a;
61
- }
62
-
63
- .font-color-lightGrey {
64
- color: #f5f5f5;
65
- }
66
-
67
- :root {
68
- --color-white-op-20: rgba(255, 255, 255, 0.2);
69
- --color-white-op-30: rgba(255, 255, 255, 0.3);
70
- --color-black-op-20: rgba(0, 0, 0, 0.2);
71
- --color-black-op-40: rgba(0, 0, 0, 0.4);
72
- --color-black-op-60: rgba(0, 0, 0, 0.6);
73
- --color-dark-blue-op-30: #211d284d;
74
- /* semantic colors */
75
- --color-primary-light: #82eec7;
76
- --color-primary: #00d692;
77
- --color-primary-bg: #00d69280;
78
- --color-primary-dark: #00a873;
79
- --color-secondary-light: #ffffff;
80
- --color-secondary: #f2ebe3;
81
- --color-secondary-dark: #a9a29e;
82
- /* feedback */
83
- --color-success: #00d692;
84
- --color-success-bg: #00d69280;
85
- --color-danger: #ff504d;
86
- --color-danger-bg: #ff504d80;
87
- --color-warning: #ffe032;
88
- --color-warning-bg: #ffe03280;
89
- /* typography */
90
- --color-text-light: #ffffff;
91
- --color-text: #f2ebe3;
92
- --color-text-op-50: #f2ebe380;
93
- --color-text-op-60: #f2ebe399;
94
- --color-text-dark: #464452;
95
- /* border */
96
- --color-border: #464452;
97
- /* body */
98
- --color-body: #211d28;
99
- /* forms */
100
- --form-element-border: var(--color-border);
101
- --form-element-bg: #f2ebe3;
102
- --form-text-placeholder: #a9a29e;
103
- /* buttons */
104
- --btn-primary-bg: #f2ebe3;
105
- --btn-primary-border: #18151e;
106
- --btn-primary-label: #f2ebe3;
107
- --dark-btn-primary-label: #f2ebe3;
108
- --dark-btn-primary-bg: #18151e;
109
- --btn-basic-label: #18151e;
110
- --btn-basic-bg: #f2ebe3;
111
- --btn-basic-border: #18151e;
112
- --btn-disabled-label: var(--color-black-op-60);
113
- --btn-disabled-bg: #a9a29e;
114
- --btn-disabled-border: var(--color-black-op-60);
115
- /* icons */
116
- --color-icon-primary: #a9a29e;
117
- --color-icon-secondary: inherit;
118
- }
119
-
120
- .container-wide {
23
+ <style>.container-wide {
121
24
  width: calc(100% - 20px);
122
25
  max-width: 2360px;
123
26
  margin-left: auto;
package/dist/DataTable.stories.svelte CHANGED
@@ -1,12 +1,10 @@
1
1
  <script context="module">
2
-
3
2
  import { DataTable } from './index';
4
3
 
5
4
  export const meta = {
6
5
  title: 'Iroco-UI/Components/DataTable',
7
6
  component: DataTable,
8
- argTypes: {
9
- }
7
+ argTypes: {}
10
8
  };
11
9
  </script>
12
10
 
@@ -15,19 +13,19 @@
15
13
  </script>
16
14
 
17
15
  <Template let:args>
18
- <DataTable {...args}
19
- columns={[
20
- {key:"key1",title:"Title 1"},
21
- {key:"key2",title:"Title 2"},
22
- {key:"key3",title:"Title 3"},
16
+ <DataTable
17
+ {...args}
18
+ columns={[
19
+ { key: 'key1', title: 'Title 1' },
20
+ { key: 'key2', title: 'Title 2' },
21
+ { key: 'key3', title: 'Title 3' }
23
22
  ]}
24
- rows={[
25
- {key1:"value 1",key2:"value 2",key3:"value 3"},
26
- {key1:"value a",key2:"value b",key3:"value c"},
27
- {key1:1.56,key2:2.76,key3:3.98},
23
+ rows={[
24
+ { key1: 'value 1', key2: 'value 2', key3: 'value 3' },
25
+ { key1: 'value a', key2: 'value b', key3: 'value c' },
26
+ { key1: 1.56, key2: 2.76, key3: 3.98 }
28
27
  ]}
29
- >
30
- </DataTable>
28
+ />
31
29
  </Template>
32
30
 
33
- <Story name="Default"></Story>
31
+ <Story name="Default" />
package/dist/DataTable.svelte CHANGED
@@ -33,104 +33,7 @@ export let columns;
33
33
  </tbody>
34
34
  </table>
35
35
 
36
- <style>.font-color-blue {
37
- color: #00b9ff;
38
- }
39
-
40
- .font-color-darkBlue {
41
- color: #211d28;
42
- }
43
-
44
- .font-color-nightBlue {
45
- color: #18151e;
46
- }
47
-
48
- .font-color-green {
49
- color: #00d692;
50
- }
51
-
52
- .font-color-red {
53
- color: #ff504d;
54
- }
55
-
56
- .font-color-yellow {
57
- color: #ffe032;
58
- }
59
-
60
- .font-color-beige {
61
- color: #f2ebe3;
62
- }
63
-
64
- .font-color-darkBeige {
65
- color: #a9a29e;
66
- }
67
-
68
- .font-color-mediumGrey {
69
- color: #464452;
70
- }
71
-
72
- .font-color-darkGrey {
73
- color: #33323a;
74
- }
75
-
76
- .font-color-lightGrey {
77
- color: #f5f5f5;
78
- }
79
-
80
- :root {
81
- --color-white-op-20: rgba(255, 255, 255, 0.2);
82
- --color-white-op-30: rgba(255, 255, 255, 0.3);
83
- --color-black-op-20: rgba(0, 0, 0, 0.2);
84
- --color-black-op-40: rgba(0, 0, 0, 0.4);
85
- --color-black-op-60: rgba(0, 0, 0, 0.6);
86
- --color-dark-blue-op-30: #211d284d;
87
- /* semantic colors */
88
- --color-primary-light: #82eec7;
89
- --color-primary: #00d692;
90
- --color-primary-bg: #00d69280;
91
- --color-primary-dark: #00a873;
92
- --color-secondary-light: #ffffff;
93
- --color-secondary: #f2ebe3;
94
- --color-secondary-dark: #a9a29e;
95
- /* feedback */
96
- --color-success: #00d692;
97
- --color-success-bg: #00d69280;
98
- --color-danger: #ff504d;
99
- --color-danger-bg: #ff504d80;
100
- --color-warning: #ffe032;
101
- --color-warning-bg: #ffe03280;
102
- /* typography */
103
- --color-text-light: #ffffff;
104
- --color-text: #f2ebe3;
105
- --color-text-op-50: #f2ebe380;
106
- --color-text-op-60: #f2ebe399;
107
- --color-text-dark: #464452;
108
- /* border */
109
- --color-border: #464452;
110
- /* body */
111
- --color-body: #211d28;
112
- /* forms */
113
- --form-element-border: var(--color-border);
114
- --form-element-bg: #f2ebe3;
115
- --form-text-placeholder: #a9a29e;
116
- /* buttons */
117
- --btn-primary-bg: #f2ebe3;
118
- --btn-primary-border: #18151e;
119
- --btn-primary-label: #f2ebe3;
120
- --dark-btn-primary-label: #f2ebe3;
121
- --dark-btn-primary-bg: #18151e;
122
- --btn-basic-label: #18151e;
123
- --btn-basic-bg: #f2ebe3;
124
- --btn-basic-border: #18151e;
125
- --btn-disabled-label: var(--color-black-op-60);
126
- --btn-disabled-bg: #a9a29e;
127
- --btn-disabled-border: var(--color-black-op-60);
128
- /* icons */
129
- --color-icon-primary: #a9a29e;
130
- --color-icon-secondary: inherit;
131
- }
132
-
133
- .data-table {
36
+ <style>.data-table {
134
37
  border: 1px solid var(--color-border);
135
38
  width: 100%;
136
39
  }
package/dist/IconBurger.stories.svelte CHANGED
@@ -1,5 +1,4 @@
1
1
  <script context="module">
2
-
3
2
  import IconBurger from './IconBurger.svelte';
4
3
 
5
4
  export const meta = {
@@ -15,7 +14,7 @@
15
14
  control: { type: 'range' },
16
15
  min: 32,
17
16
  max: 512
18
- },
17
+ }
19
18
  }
20
19
  };
21
20
  </script>
@@ -25,8 +24,7 @@
25
24
  </script>
26
25
 
27
26
  <Template let:args>
28
- <IconBurger {...args}>
29
- </IconBurger>
27
+ <IconBurger {...args} />
30
28
  </Template>
31
29
 
32
- <Story name="Default"></Story>
30
+ <Story name="Default" />
package/dist/IconClose.stories.svelte CHANGED
@@ -1,5 +1,4 @@
1
1
  <script context="module">
2
-
3
2
  import IconClose from './IconClose.svelte';
4
3
 
5
4
  export const meta = {
@@ -25,8 +24,7 @@
25
24
  </script>
26
25
 
27
26
  <Template let:args>
28
- <IconClose {...args}>
29
- </IconClose>
27
+ <IconClose {...args} />
30
28
  </Template>
31
29
 
32
- <Story name="Default"></Story>
30
+ <Story name="Default" />
package/dist/IconFloppyDisk.stories.svelte CHANGED
@@ -1,6 +1,4 @@
1
1
  <script context="module">
2
-
3
-
4
2
  import { IconFloppyDisk } from './index';
5
3
 
6
4
  export const meta = {
@@ -17,8 +15,8 @@
17
15
  min: 32,
18
16
  max: 512
19
17
  },
20
- fill:{
21
- control: { type: 'color' },
18
+ fill: {
19
+ control: { type: 'color' }
22
20
  }
23
21
  }
24
22
  };
@@ -29,8 +27,7 @@
29
27
  </script>
30
28
 
31
29
  <Template let:args>
32
- <IconFloppyDisk {...args}>
33
- </IconFloppyDisk>
30
+ <IconFloppyDisk {...args} />
34
31
  </Template>
35
32
 
36
- <Story name="Default"></Story>
33
+ <Story name="Default" />
package/dist/IconInfo.stories.svelte CHANGED
@@ -1,6 +1,4 @@
1
1
  <script context="module">
2
-
3
-
4
2
  import { IconInfo } from './index';
5
3
 
6
4
  export const meta = {
@@ -27,8 +25,7 @@
27
25
  </script>
28
26
 
29
27
  <Template let:args>
30
- <IconInfo {...args}>
31
- </IconInfo>
28
+ <IconInfo {...args} />
32
29
  </Template>
33
30
 
34
- <Story name="Default"></Story>
31
+ <Story name="Default" />
package/dist/IconIrocoLogo.stories.svelte CHANGED
@@ -1,6 +1,4 @@
1
1
  <script context="module">
2
-
3
-
4
2
  import { IconIrocoLogo } from './index';
5
3
 
6
4
  export const meta = {
@@ -30,8 +28,7 @@
30
28
  </script>
31
29
 
32
30
  <Template let:args>
33
- <IconIrocoLogo {...args}>
34
- </IconIrocoLogo>
31
+ <IconIrocoLogo {...args} />
35
32
  </Template>
36
33
 
37
- <Story name="Default"></Story>
34
+ <Story name="Default" />
package/dist/IconMoreSign.stories.svelte CHANGED
@@ -1,6 +1,4 @@
1
1
  <script context="module">
2
-
3
-
4
2
  import IconMoreSign from './IconMoreSign.svelte';
5
3
 
6
4
  export const meta = {
@@ -27,8 +25,7 @@
27
25
  </script>
28
26
 
29
27
  <Template let:args>
30
- <IconMoreSign {...args}>
31
- </IconMoreSign>
28
+ <IconMoreSign {...args} />
32
29
  </Template>
33
30
 
34
- <Story name="Default"></Story>
31
+ <Story name="Default" />
package/dist/IconTrashCan.stories.svelte CHANGED
@@ -1,6 +1,4 @@
1
1
  <script context="module">
2
-
3
-
4
2
  import { IconTrashCan } from './index';
5
3
 
6
4
  export const meta = {
@@ -27,8 +25,7 @@
27
25
  </script>
28
26
 
29
27
  <Template let:args>
30
- <IconTrashCan {...args}>
31
- </IconTrashCan>
28
+ <IconTrashCan {...args} />
32
29
  </Template>
33
30
 
34
- <Story name="Default"></Story>
31
+ <Story name="Default" />
package/dist/ImageArticle.stories.svelte ADDED
@@ -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 }} />