@lavalogic/scoria 0.40.7 → 0.40.8
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.
|
@@ -5,61 +5,78 @@
|
|
|
5
5
|
import Icon from './Icon.svelte';
|
|
6
6
|
import type { InfoAlertProps } from './InfoAlertProps.js';
|
|
7
7
|
|
|
8
|
-
const { children, iconName = 'circle-information' }: InfoAlertProps = $props();
|
|
8
|
+
const { children, header, iconName = 'circle-information' }: InfoAlertProps = $props();
|
|
9
9
|
</script>
|
|
10
10
|
|
|
11
11
|
<!--
|
|
12
|
-
Small, inline informational banner
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
The body is a snippet so callers can inline links or emphasis without
|
|
18
|
-
the component prescribing a content shape.
|
|
12
|
+
Small, inline informational banner on the Info (brand-blue) palette so it
|
|
13
|
+
reads as "helper text" rather than "error". An optional bold `header`
|
|
14
|
+
sits above the body; the body is a snippet so callers can inline links or
|
|
15
|
+
emphasis without the component prescribing a content shape.
|
|
19
16
|
-->
|
|
20
17
|
<div
|
|
21
18
|
class="info-alert"
|
|
19
|
+
class:has-header={header}
|
|
22
20
|
role="status"
|
|
23
21
|
>
|
|
24
22
|
<div class="icon">
|
|
25
23
|
<Icon
|
|
26
24
|
name={iconName}
|
|
27
|
-
size={Size.
|
|
25
|
+
size={Size.Medium}
|
|
28
26
|
/>
|
|
29
27
|
</div>
|
|
30
|
-
<div class="
|
|
31
|
-
{
|
|
28
|
+
<div class="content">
|
|
29
|
+
{#if header}
|
|
30
|
+
<p class="header">{header}</p>
|
|
31
|
+
{/if}
|
|
32
|
+
<div class="body">
|
|
33
|
+
{@render children()}
|
|
34
|
+
</div>
|
|
32
35
|
</div>
|
|
33
36
|
</div>
|
|
34
37
|
|
|
35
38
|
<style>.info-alert {
|
|
36
39
|
display: flex;
|
|
37
40
|
flex-flow: row nowrap;
|
|
38
|
-
align-items:
|
|
39
|
-
gap: 0.
|
|
40
|
-
padding: 0.
|
|
41
|
-
border: solid 1px #
|
|
41
|
+
align-items: center;
|
|
42
|
+
gap: 0.625rem;
|
|
43
|
+
padding: 0.75rem 0.875rem;
|
|
44
|
+
border: solid 1px #8ad1e8;
|
|
42
45
|
border-radius: 4px;
|
|
43
|
-
background-color: #
|
|
46
|
+
background-color: #f4fbfd;
|
|
44
47
|
color: #3a4952;
|
|
45
|
-
|
|
46
|
-
|
|
48
|
+
/* With a header the content is multi-line, so the icon should align to
|
|
49
|
+
the first line (the header) rather than vertically centre the block. */
|
|
50
|
+
}
|
|
51
|
+
.info-alert.has-header {
|
|
52
|
+
align-items: flex-start;
|
|
47
53
|
}
|
|
48
54
|
|
|
49
|
-
/* Nudge the icon down a hair so it sits visually centred against
|
|
50
|
-
the first line of body text rather than aligned to the very top
|
|
51
|
-
of the first character ascent. */
|
|
52
55
|
.icon {
|
|
53
56
|
display: flex;
|
|
54
57
|
align-items: center;
|
|
55
58
|
flex-shrink: 0;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
--colour: #647d8e;
|
|
59
|
+
color: #259fc7;
|
|
60
|
+
--colour: #259fc7;
|
|
59
61
|
}
|
|
60
62
|
|
|
61
|
-
.
|
|
63
|
+
.content {
|
|
62
64
|
flex: 1 1 auto;
|
|
63
65
|
min-width: 0;
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-flow: column nowrap;
|
|
68
|
+
gap: 0.125rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.header {
|
|
72
|
+
margin: 0;
|
|
73
|
+
font-size: 0.875rem;
|
|
74
|
+
font-weight: 600;
|
|
75
|
+
color: #3a4952;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.body {
|
|
79
|
+
font-size: 0.8125rem;
|
|
80
|
+
line-height: 1.4;
|
|
64
81
|
color: #647d8e;
|
|
65
82
|
}</style>
|
|
@@ -14,6 +14,11 @@ import type { icons } from './Icons.js';
|
|
|
14
14
|
export interface InfoAlertProps {
|
|
15
15
|
/** Body of the alert, rendered to the right of the leading icon. */
|
|
16
16
|
children: Snippet;
|
|
17
|
+
/**
|
|
18
|
+
* Optional bold heading shown above the body. When set, the leading icon
|
|
19
|
+
* aligns to this first line rather than vertically centring the block.
|
|
20
|
+
*/
|
|
21
|
+
header?: string;
|
|
17
22
|
/**
|
|
18
23
|
* Optional icon name override. Defaults to `circle-information`,
|
|
19
24
|
* the standard neutral-info glyph; pass another name from the
|
|
@@ -48,7 +48,8 @@
|
|
|
48
48
|
height: var(--loading-animation-size, 100px);
|
|
49
49
|
display: block;
|
|
50
50
|
position: absolute;
|
|
51
|
-
|
|
51
|
+
box-sizing: border-box;
|
|
52
|
+
border: 1px solid rgba(120, 110, 95, 0.45);
|
|
52
53
|
line-height: 20px;
|
|
53
54
|
}
|
|
54
55
|
.container #cube div span {
|
|
@@ -82,31 +83,26 @@
|
|
|
82
83
|
}
|
|
83
84
|
.front {
|
|
84
85
|
background: rgba(216, 208, 199, 0.5);
|
|
85
|
-
outline: 1px solid black;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
.back {
|
|
89
89
|
background: rgba(216, 208, 199, 0.5);
|
|
90
|
-
outline: 1px solid black;
|
|
91
90
|
}
|
|
92
91
|
|
|
93
92
|
.right {
|
|
94
93
|
background: rgba(216, 208, 199, 0.35);
|
|
95
|
-
outline: 1px solid black;
|
|
96
94
|
}
|
|
97
95
|
|
|
98
96
|
.left {
|
|
99
97
|
background: rgba(216, 208, 199, 0.35);
|
|
100
|
-
outline: 1px solid black;
|
|
101
98
|
}
|
|
102
99
|
|
|
103
100
|
.top {
|
|
104
|
-
|
|
101
|
+
background: rgba(216, 208, 199, 0.25);
|
|
105
102
|
}
|
|
106
103
|
|
|
107
104
|
.bottom {
|
|
108
105
|
background: rgba(216, 208, 199, 0.75);
|
|
109
|
-
outline: 1px solid black;
|
|
110
106
|
}
|
|
111
107
|
|
|
112
108
|
#cube .front {
|