@studiocms/ui 1.0.1 → 1.1.0
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,47 @@
|
|
|
1
|
+
---
|
|
2
|
+
import './alert.css';
|
|
3
|
+
import type { AvailableIcons } from 'studiocms:ui/icons';
|
|
4
|
+
import type { HTMLAttributes } from 'astro/types';
|
|
5
|
+
import type { StudioCMSColorway } from 'src/utils/colors';
|
|
6
|
+
import Icon from '../Icon/Icon.astro';
|
|
7
|
+
|
|
8
|
+
interface Props extends HTMLAttributes<'div'> {
|
|
9
|
+
/**
|
|
10
|
+
* The title/heading text displayed in the alert header
|
|
11
|
+
*/
|
|
12
|
+
title: string;
|
|
13
|
+
/**
|
|
14
|
+
* The visual style variant of the alert. Each variant has a default icon.
|
|
15
|
+
* @default "default"
|
|
16
|
+
*/
|
|
17
|
+
variant?: StudioCMSColorway;
|
|
18
|
+
/**
|
|
19
|
+
* Custom icon to display. Overrides the default variant icon when provided
|
|
20
|
+
*/
|
|
21
|
+
icon?: AvailableIcons;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const { title, variant = 'default', icon, class: className, ...props } = Astro.props;
|
|
25
|
+
|
|
26
|
+
const variantToIcon: Record<StudioCMSColorway, AvailableIcons> = {
|
|
27
|
+
default: 'heroicons:information-circle',
|
|
28
|
+
primary: 'heroicons:light-bulb',
|
|
29
|
+
success: 'heroicons:check-circle',
|
|
30
|
+
danger: 'heroicons:shield-exclamation',
|
|
31
|
+
info: 'heroicons:information-circle',
|
|
32
|
+
warning: 'heroicons:exclamation-triangle',
|
|
33
|
+
mono: 'heroicons:information-circle',
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const iconName = icon || variantToIcon[variant];
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
<div class:list={["sui-alert", className]} data-variant={variant} {...props}>
|
|
40
|
+
<div class="sui-alert-header">
|
|
41
|
+
<Icon class="sui-alert-icon" width={24} height={24} name={iconName} />
|
|
42
|
+
<span class="sui-alert-title">{title}</span>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="sui-alert-content">
|
|
45
|
+
<slot />
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
.sui-alert {
|
|
2
|
+
--alert-accent: var(--primary-base);
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
gap: 0.75rem;
|
|
6
|
+
padding: 1rem 1.25rem;
|
|
7
|
+
border-left: 4px solid var(--alert-accent);
|
|
8
|
+
border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-sm);
|
|
9
|
+
}
|
|
10
|
+
.sui-alert-header {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: flex-start;
|
|
13
|
+
justify-content: flex-start;
|
|
14
|
+
gap: 0.5rem;
|
|
15
|
+
color: var(--text-normal);
|
|
16
|
+
}
|
|
17
|
+
.sui-alert-icon {
|
|
18
|
+
flex-shrink: 0;
|
|
19
|
+
color: var(--alert-accent);
|
|
20
|
+
}
|
|
21
|
+
.sui-alert-title {
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
font-size: 1.125em;
|
|
24
|
+
}
|
|
25
|
+
.sui-alert[data-variant=default] {
|
|
26
|
+
--alert-accent: var(--text-normal);
|
|
27
|
+
color: var(--text-dimmed);
|
|
28
|
+
background-color: var(--default-base);
|
|
29
|
+
}
|
|
30
|
+
.sui-alert[data-variant=primary] {
|
|
31
|
+
--alert-accent: var(--primary-base);
|
|
32
|
+
color: var(--text-dimmed);
|
|
33
|
+
background-color: var(--primary-flat);
|
|
34
|
+
}
|
|
35
|
+
.sui-alert[data-variant=success] {
|
|
36
|
+
--alert-accent: var(--success-base);
|
|
37
|
+
color: var(--text-dimmed);
|
|
38
|
+
background-color: var(--success-flat);
|
|
39
|
+
}
|
|
40
|
+
.sui-alert[data-variant=warning] {
|
|
41
|
+
--alert-accent: var(--warning-base);
|
|
42
|
+
color: var(--text-dimmed);
|
|
43
|
+
background-color: var(--warning-flat);
|
|
44
|
+
}
|
|
45
|
+
.sui-alert[data-variant=danger] {
|
|
46
|
+
--alert-accent: var(--danger-vibrant);
|
|
47
|
+
color: var(--text-dimmed);
|
|
48
|
+
background-color: var(--danger-flat);
|
|
49
|
+
}
|
|
50
|
+
.sui-alert[data-variant=info] {
|
|
51
|
+
--alert-accent: var(--info-vibrant);
|
|
52
|
+
color: var(--text-dimmed);
|
|
53
|
+
background-color: var(--info-flat);
|
|
54
|
+
}
|
|
55
|
+
.sui-alert[data-variant=mono] {
|
|
56
|
+
--alert-accent: var(--mono-base);
|
|
57
|
+
color: var(--text-dimmed);
|
|
58
|
+
background-color: var(--mono-flat);
|
|
59
|
+
}
|
package/dist/index.js
CHANGED
|
@@ -53,6 +53,7 @@ function integration(options = {}) {
|
|
|
53
53
|
}
|
|
54
54
|
icons = createIconifyCollection(optIcons);
|
|
55
55
|
const componentMap = {
|
|
56
|
+
"studiocms:ui/components/alert": `export { default as Alert } from '${resolve("./components/Alert/Alert.astro")}';`,
|
|
56
57
|
"studiocms:ui/components/button": `export { default as Button } from '${resolve("./components/Button/Button.astro")}';`,
|
|
57
58
|
"studiocms:ui/components/divider": `export { default as Divider } from '${resolve("./components/Divider/Divider.astro")}';`,
|
|
58
59
|
"studiocms:ui/components/input": `export { default as Input } from '${resolve("./components/Input/Input.astro")}';`,
|