@studiocms/ui 1.0.1 → 1.1.1
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: center;
|
|
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")}';`,
|
package/dist/virtuals.d.ts
CHANGED
|
@@ -9,6 +9,10 @@ declare module 'studiocms:ui/custom-css' {}
|
|
|
9
9
|
|
|
10
10
|
declare module 'studiocms:ui/scripts/*' {}
|
|
11
11
|
|
|
12
|
+
declare module 'studiocms:ui/components/alert' {
|
|
13
|
+
export const Alert: typeof import('./components/Alert/Alert.astro').default;
|
|
14
|
+
}
|
|
15
|
+
|
|
12
16
|
declare module 'studiocms:ui/components/button' {
|
|
13
17
|
export const Button: typeof import('./components/Button/Button.astro').default;
|
|
14
18
|
}
|
|
@@ -320,6 +324,7 @@ declare module 'studiocms:ui/components/tooltip' {
|
|
|
320
324
|
declare module 'studiocms:ui/components' {
|
|
321
325
|
export const Accordion: typeof import('./components/Accordion/Accordion.astro').default;
|
|
322
326
|
export const AccordionItem: typeof import('./components/Accordion/Item.astro').default;
|
|
327
|
+
export const Alert: typeof import('./components/Alert/Alert.astro').default;
|
|
323
328
|
export const Badge: typeof import('./components/Badge/Badge.astro').default;
|
|
324
329
|
export const Breadcrumbs: typeof import('./components/Breadcrumbs/Breadcrumbs.astro').default;
|
|
325
330
|
export const Button: typeof import('./components/Button/Button.astro').default;
|