@iroco/ui 1.16.0 → 1.16.2
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/Alert.svelte +1 -0
- package/dist/Button.svelte +1 -0
- package/dist/IconIrocoLogo.svelte +1 -0
- package/dist/ImageArticle.svelte +1 -0
- package/dist/IrocoLogo.svelte +1 -0
- package/dist/NavBar.svelte +1 -0
- package/dist/Navigation.svelte +1 -0
- package/dist/NumberInput.svelte +2 -1
- package/dist/PasswordInput.svelte +3 -1
- package/dist/RadioButton.svelte +2 -1
- package/dist/TextInput.svelte +2 -1
- package/dist/sample-login-form.stories.svelte +43 -0
- package/dist/sample-login-form.stories.svelte.d.ts +18 -0
- package/dist/scss/colors.scss +1 -0
- package/dist/scss/forms.scss +1 -1
- package/package.json +1 -1
package/dist/Alert.svelte
CHANGED
package/dist/Button.svelte
CHANGED
package/dist/ImageArticle.svelte
CHANGED
package/dist/IrocoLogo.svelte
CHANGED
package/dist/NavBar.svelte
CHANGED
package/dist/Navigation.svelte
CHANGED
package/dist/NumberInput.svelte
CHANGED
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
--color-black: black;
|
|
34
34
|
--color-white: white;
|
|
35
35
|
--color-red: #ff504d;
|
|
36
|
+
--color-dark-red: #bd0300;
|
|
36
37
|
--color-green: #00d692;
|
|
37
38
|
--color-light-green: #82eec7;
|
|
38
39
|
--color-dark-green: #00704e;
|
|
@@ -142,7 +143,7 @@
|
|
|
142
143
|
text-overflow: ellipsis;
|
|
143
144
|
white-space: nowrap;
|
|
144
145
|
overflow: hidden;
|
|
145
|
-
border-radius: 0.
|
|
146
|
+
border-radius: 0.5rem;
|
|
146
147
|
}
|
|
147
148
|
.iroco-ui-form .iroco-ui-input input::placeholder {
|
|
148
149
|
color: var(--form-text-placeholder);
|
|
@@ -128,6 +128,7 @@
|
|
|
128
128
|
--color-black: black;
|
|
129
129
|
--color-white: white;
|
|
130
130
|
--color-red: #ff504d;
|
|
131
|
+
--color-dark-red: #bd0300;
|
|
131
132
|
--color-green: #00d692;
|
|
132
133
|
--color-light-green: #82eec7;
|
|
133
134
|
--color-dark-green: #00704e;
|
|
@@ -237,7 +238,7 @@
|
|
|
237
238
|
text-overflow: ellipsis;
|
|
238
239
|
white-space: nowrap;
|
|
239
240
|
overflow: hidden;
|
|
240
|
-
border-radius: 0.
|
|
241
|
+
border-radius: 0.5rem;
|
|
241
242
|
}
|
|
242
243
|
.iroco-ui-form .iroco-ui-input input::placeholder {
|
|
243
244
|
color: var(--form-text-placeholder);
|
|
@@ -329,6 +330,7 @@
|
|
|
329
330
|
}
|
|
330
331
|
|
|
331
332
|
.password-aria-live {
|
|
333
|
+
height: 0;
|
|
332
334
|
width: 0;
|
|
333
335
|
overflow: hidden;
|
|
334
336
|
}</style>
|
package/dist/RadioButton.svelte
CHANGED
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
--color-black: black;
|
|
30
30
|
--color-white: white;
|
|
31
31
|
--color-red: #ff504d;
|
|
32
|
+
--color-dark-red: #bd0300;
|
|
32
33
|
--color-green: #00d692;
|
|
33
34
|
--color-light-green: #82eec7;
|
|
34
35
|
--color-dark-green: #00704e;
|
|
@@ -138,7 +139,7 @@
|
|
|
138
139
|
text-overflow: ellipsis;
|
|
139
140
|
white-space: nowrap;
|
|
140
141
|
overflow: hidden;
|
|
141
|
-
border-radius: 0.
|
|
142
|
+
border-radius: 0.5rem;
|
|
142
143
|
}
|
|
143
144
|
.iroco-ui-form .iroco-ui-input input::placeholder {
|
|
144
145
|
color: var(--form-text-placeholder);
|
package/dist/TextInput.svelte
CHANGED
|
@@ -91,6 +91,7 @@
|
|
|
91
91
|
--color-black: black;
|
|
92
92
|
--color-white: white;
|
|
93
93
|
--color-red: #ff504d;
|
|
94
|
+
--color-dark-red: #bd0300;
|
|
94
95
|
--color-green: #00d692;
|
|
95
96
|
--color-light-green: #82eec7;
|
|
96
97
|
--color-dark-green: #00704e;
|
|
@@ -200,7 +201,7 @@
|
|
|
200
201
|
text-overflow: ellipsis;
|
|
201
202
|
white-space: nowrap;
|
|
202
203
|
overflow: hidden;
|
|
203
|
-
border-radius: 0.
|
|
204
|
+
border-radius: 0.5rem;
|
|
204
205
|
}
|
|
205
206
|
.iroco-ui-form .iroco-ui-input input::placeholder {
|
|
206
207
|
color: var(--form-text-placeholder);
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
|
|
3
|
+
import { IconIrocoLogo, TextInput, PasswordInput, Button } from './index';
|
|
4
|
+
const { Story } = defineMeta({
|
|
5
|
+
title: 'Iroco-UI/Samples/Login form'
|
|
6
|
+
});
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
setTemplate(template);
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
{#snippet template()}
|
|
14
|
+
<section class="section">
|
|
15
|
+
<div style="margin-bottom: 2em;">
|
|
16
|
+
<IconIrocoLogo width="48px" height="48px" ariaLabel="Iroco logo" href="https://iroco.co" />
|
|
17
|
+
</div>
|
|
18
|
+
<form class="iroco-ui-form">
|
|
19
|
+
<TextInput label="E-mail" type="email" name="email" id="email" />
|
|
20
|
+
<PasswordInput
|
|
21
|
+
label="Password"
|
|
22
|
+
name="password"
|
|
23
|
+
id="password"
|
|
24
|
+
showPasswordAriaLabel="Password aria label"
|
|
25
|
+
passwordHiddenAriaLive="Password hidden aria live"
|
|
26
|
+
passwordShownAriaLive="Password show aria live"
|
|
27
|
+
/>
|
|
28
|
+
|
|
29
|
+
<p class="error">Some error message</p>
|
|
30
|
+
<Button type="submit" kind="success" fullWidth>Login</Button>
|
|
31
|
+
</form>
|
|
32
|
+
<a href="#">Lost your password ?</a>
|
|
33
|
+
</section>
|
|
34
|
+
{/snippet}
|
|
35
|
+
|
|
36
|
+
<Story name="Default" />
|
|
37
|
+
|
|
38
|
+
<style>
|
|
39
|
+
.section {
|
|
40
|
+
padding: 3rem;
|
|
41
|
+
background: var(--color-background-darker);
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
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> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const SampleLoginForm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type SampleLoginForm = InstanceType<typeof SampleLoginForm>;
|
|
18
|
+
export default SampleLoginForm;
|
package/dist/scss/colors.scss
CHANGED
package/dist/scss/forms.scss
CHANGED