@fpkit/acss 0.5.7 → 0.5.9
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/libs/components/alert/alert.css +1 -0
- package/libs/components/alert/alert.css.map +1 -0
- package/libs/components/alert/alert.min.css +3 -0
- package/libs/components/badge/badge.css +1 -0
- package/libs/components/badge/badge.css.map +1 -0
- package/libs/components/badge/badge.min.css +3 -0
- package/libs/components/breadcrumbs/breadcrumb.css +1 -0
- package/libs/components/breadcrumbs/breadcrumb.css.map +1 -0
- package/libs/components/breadcrumbs/breadcrumb.min.css +3 -0
- package/libs/components/buttons/button.css +1 -0
- package/libs/components/buttons/button.css.map +1 -0
- package/libs/components/buttons/button.min.css +3 -0
- package/libs/components/cards/card-style.css +1 -0
- package/libs/components/cards/card-style.css.map +1 -0
- package/libs/components/cards/card-style.min.css +3 -0
- package/libs/components/cards/card.css +1 -0
- package/libs/components/cards/card.css.map +1 -0
- package/libs/components/cards/card.min.css +3 -0
- package/libs/components/details/details.css +1 -0
- package/libs/components/details/details.css.map +1 -0
- package/libs/components/details/details.min.css +3 -0
- package/libs/components/dialog/dialog.css +1 -0
- package/libs/components/dialog/dialog.css.map +1 -0
- package/libs/components/dialog/dialog.min.css +3 -0
- package/libs/components/form/form.css +1 -0
- package/libs/components/form/form.css.map +1 -0
- package/libs/components/form/form.min.css +3 -0
- package/libs/components/icons/icon.css +1 -0
- package/libs/components/icons/icon.css.map +1 -0
- package/libs/components/icons/icon.min.css +3 -0
- package/libs/components/images/img.css +1 -0
- package/libs/components/images/img.css.map +1 -0
- package/libs/components/images/img.min.css +3 -0
- package/libs/components/layout/landmarks.css +1 -0
- package/libs/components/layout/landmarks.css.map +1 -0
- package/libs/components/layout/landmarks.min.css +3 -0
- package/libs/components/link/link.css +1 -0
- package/libs/components/link/link.css.map +1 -0
- package/libs/components/link/link.min.css +3 -0
- package/libs/components/nav/nav.css +1 -0
- package/libs/components/nav/nav.css.map +1 -0
- package/libs/components/nav/nav.min.css +3 -0
- package/libs/components/progress/progress.css +1 -0
- package/libs/components/progress/progress.css.map +1 -0
- package/libs/components/progress/progress.min.css +3 -0
- package/libs/components/styles/index.css +1 -0
- package/libs/components/styles/index.css.map +1 -0
- package/libs/components/styles/index.min.css +3 -0
- package/libs/components/tag/tag.css +1 -0
- package/libs/components/tag/tag.css.map +1 -0
- package/libs/components/tag/tag.min.css +3 -0
- package/libs/components/text-to-speech/text-to-speech.css +1 -0
- package/libs/components/text-to-speech/text-to-speech.css.map +1 -0
- package/libs/components/text-to-speech/text-to-speech.min.css +3 -0
- package/libs/index.cjs +2 -2
- package/libs/index.cjs.map +1 -1
- package/libs/index.css +1 -0
- package/libs/index.css.map +1 -0
- package/libs/index.d.cts +23 -22
- package/libs/index.d.ts +23 -22
- package/libs/index.js +2 -2
- package/libs/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/alert/README.mdx +44 -56
- package/src/components/alert/alert.scss +1 -1
- package/src/components/alert/alert.stories.tsx +7 -7
- package/src/components/alert/alert.tsx +10 -2
- package/src/components/badge/badge.tsx +19 -11
- package/src/components/breadcrumbs/README.mdx +91 -0
- package/src/components/breadcrumbs/breadcrumb.tsx +92 -87
- package/src/components/buttons/README.mdx +96 -0
- package/src/components/buttons/button.scss +4 -2
- package/src/components/cards/README.mdx +133 -0
- package/src/components/details/README.mdx +101 -0
- package/src/components/details/details.scss +21 -15
- package/src/components/details/details.stories.tsx +35 -7
- package/src/components/details/details.tsx +18 -11
- package/src/components/dialog/dialog-modal.stories.tsx +1 -1
- package/src/components/form/inputs.tsx +18 -24
- package/src/components/heading/heading.tsx +24 -12
- package/src/components/text/README.mdx +98 -0
- package/src/components/text/text.tsx +49 -50
- package/src/styles/alert/alert.css +0 -1
- package/src/styles/alert/alert.css.map +1 -1
- package/src/styles/buttons/button.css +4 -2
- package/src/styles/buttons/button.css.map +1 -1
- package/src/styles/details/details.css +18 -13
- package/src/styles/details/details.css.map +1 -1
- package/src/styles/index.css +22 -16
- package/src/styles/index.css.map +1 -1
- package/src/components/alert/alert.mdx +0 -74
- package/src/components/cards/README.md +0 -80
|
@@ -1,54 +1,53 @@
|
|
|
1
1
|
// import FP from '../fp'
|
|
2
|
-
import React from
|
|
3
|
-
import UI from
|
|
2
|
+
import React from "react";
|
|
3
|
+
import UI from "#components/ui";
|
|
4
4
|
|
|
5
|
-
type InheritedProps = React.ComponentProps<typeof UI
|
|
5
|
+
type InheritedProps = React.ComponentProps<typeof UI>;
|
|
6
6
|
|
|
7
7
|
type TextElements =
|
|
8
|
-
|
|
|
9
|
-
|
|
|
10
|
-
|
|
|
11
|
-
|
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
17
|
-
|
|
|
18
|
-
|
|
|
19
|
-
|
|
|
20
|
-
|
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
8
|
+
| "a"
|
|
9
|
+
| "b"
|
|
10
|
+
| "blockquote"
|
|
11
|
+
| "b"
|
|
12
|
+
| "blockquote"
|
|
13
|
+
| "cite"
|
|
14
|
+
| "code"
|
|
15
|
+
| "em"
|
|
16
|
+
| "i"
|
|
17
|
+
| "em"
|
|
18
|
+
| "i"
|
|
19
|
+
| "kbd"
|
|
20
|
+
| "mark"
|
|
21
|
+
| "p"
|
|
22
|
+
| "s"
|
|
23
|
+
| "small"
|
|
24
|
+
| "span"
|
|
25
|
+
| "span"
|
|
26
|
+
| "strong"
|
|
27
|
+
| "mark"
|
|
28
|
+
| "p"
|
|
29
|
+
| "s"
|
|
30
|
+
| "small"
|
|
31
|
+
| "span"
|
|
32
|
+
| "span"
|
|
33
|
+
| "strong"
|
|
34
|
+
| "sub"
|
|
35
|
+
| "sup"
|
|
36
|
+
| "time"
|
|
37
|
+
| "time"
|
|
38
|
+
| "u";
|
|
39
39
|
|
|
40
40
|
export type TextProps = {
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
43
|
-
* Text element to to use
|
|
42
|
+
* Pass a text element
|
|
44
43
|
*/
|
|
45
|
-
elm?: TextElements
|
|
44
|
+
elm?: TextElements;
|
|
46
45
|
/** Pass a text element or string */
|
|
47
|
-
text?: string
|
|
48
|
-
} & InheritedProps
|
|
46
|
+
text?: string;
|
|
47
|
+
} & InheritedProps;
|
|
49
48
|
|
|
50
49
|
export const Text = ({
|
|
51
|
-
elm =
|
|
50
|
+
elm = "p",
|
|
52
51
|
id,
|
|
53
52
|
text,
|
|
54
53
|
styles,
|
|
@@ -62,18 +61,18 @@ export const Text = ({
|
|
|
62
61
|
{children || text}
|
|
63
62
|
</UI>
|
|
64
63
|
</UI>
|
|
65
|
-
)
|
|
66
|
-
}
|
|
64
|
+
);
|
|
65
|
+
};
|
|
67
66
|
|
|
68
67
|
type TitleProps = {
|
|
69
68
|
/**
|
|
70
69
|
* HTML headings
|
|
71
70
|
*/
|
|
72
|
-
elm?:
|
|
73
|
-
} & InheritedProps
|
|
71
|
+
elm?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
72
|
+
} & InheritedProps;
|
|
74
73
|
|
|
75
74
|
export const Title = ({
|
|
76
|
-
elm =
|
|
75
|
+
elm = "h3",
|
|
77
76
|
id,
|
|
78
77
|
children,
|
|
79
78
|
styles,
|
|
@@ -84,10 +83,10 @@ export const Title = ({
|
|
|
84
83
|
<Text as={elm} id={id} styles={styles} className={classes} {...props}>
|
|
85
84
|
{children}
|
|
86
85
|
</Text>
|
|
87
|
-
)
|
|
88
|
-
}
|
|
86
|
+
);
|
|
87
|
+
};
|
|
89
88
|
|
|
90
|
-
export default Text
|
|
89
|
+
export default Text;
|
|
91
90
|
|
|
92
|
-
Text.displayName =
|
|
93
|
-
Title.displayName =
|
|
91
|
+
Text.displayName = "Text";
|
|
92
|
+
Title.displayName = "Title";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../components/alert/alert.scss"],"names":[],"mappings":"AAAA;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../components/alert/alert.scss"],"names":[],"mappings":"AAAA;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE","file":"alert.css"}
|
|
@@ -2,17 +2,19 @@ button {
|
|
|
2
2
|
--btn-xs: 0.6rem;
|
|
3
3
|
--btn-sm: 0.7rem;
|
|
4
4
|
--btn-md: 0.85rem;
|
|
5
|
-
--btn-lg:
|
|
5
|
+
--btn-lg: 1.3125rem;
|
|
6
6
|
--btn-pill: 100rem;
|
|
7
7
|
--btn-height: 2.5rem;
|
|
8
8
|
--fs: 0.95rem;
|
|
9
9
|
--btn-fs: 0.9375rem;
|
|
10
10
|
--btn-bg: lightgray;
|
|
11
11
|
--btn-width: max-content;
|
|
12
|
+
--btn-calc-height: var(--btn-height, calc(40rem / 16));
|
|
12
13
|
font-size: var(--btn-fs);
|
|
13
14
|
font-weight: var(--btn-fw, 500);
|
|
14
15
|
height: var(--btn-height, 2.5rem);
|
|
15
|
-
|
|
16
|
+
max-height: var(--btn-calc-height);
|
|
17
|
+
min-height: 1.5rem;
|
|
16
18
|
place-items: var(--btn-place, center);
|
|
17
19
|
padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
|
|
18
20
|
padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA","file":"button.css"}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA","file":"button.css"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
details {
|
|
2
|
-
--details-
|
|
3
|
-
--details-h: max-content;
|
|
4
|
-
--details-border: 1px solid #dfdfdf;
|
|
5
|
-
--details-display: flex;
|
|
6
|
-
--details-justify: flex-start;
|
|
2
|
+
--details-border: 0.0625rem solid #dfdfdf;
|
|
7
3
|
--details-direction: column;
|
|
4
|
+
--details-display: flex;
|
|
8
5
|
--details-gap: 0rem;
|
|
6
|
+
--details-h: max-content;
|
|
7
|
+
--details-justify: flex-start;
|
|
9
8
|
--details-px: 1.5rem;
|
|
10
9
|
--details-py: 1rem;
|
|
11
|
-
--details-radius:
|
|
10
|
+
--details-radius: 0;
|
|
11
|
+
--details-w: 100%;
|
|
12
|
+
--max-h-closed: 6.25rem;
|
|
13
|
+
--max-h-open: 50rem;
|
|
14
|
+
--summary-align: center;
|
|
12
15
|
--summary-cursor: pointer;
|
|
13
|
-
--summary-transitions: all 0.75s ease-in-out;
|
|
14
16
|
--summary-display: flex;
|
|
15
|
-
--summary-justify: flex-start;
|
|
16
|
-
--summary-align: center;
|
|
17
17
|
--summary-gap: 0.5rem;
|
|
18
|
-
--
|
|
19
|
-
--
|
|
18
|
+
--summary-justify: flex-start;
|
|
19
|
+
--summary-transitions: all 0.75s ease-in-out;
|
|
20
20
|
interpolate-size: allow-keywords;
|
|
21
21
|
display: var(--details-display);
|
|
22
22
|
flex-direction: var(--details-direction);
|
|
@@ -24,10 +24,11 @@ details {
|
|
|
24
24
|
gap: var(--details-gap);
|
|
25
25
|
width: var(--details-w);
|
|
26
26
|
border: var(--details-border);
|
|
27
|
+
border-left: none;
|
|
28
|
+
border-right: none;
|
|
27
29
|
transition: var(--summary-transitions);
|
|
28
30
|
max-height: var(--max-h-closed);
|
|
29
31
|
overflow: clip;
|
|
30
|
-
border-radius: var(--details-radius);
|
|
31
32
|
}
|
|
32
33
|
details + details {
|
|
33
34
|
border-radius: 0;
|
|
@@ -63,7 +64,7 @@ details summary::-webkit-details-marker {
|
|
|
63
64
|
}
|
|
64
65
|
details summary:focus-within {
|
|
65
66
|
outline: none;
|
|
66
|
-
border-bottom: solid 2px
|
|
67
|
+
border-bottom: solid 2px currentColor;
|
|
67
68
|
background-color: whitesmoke;
|
|
68
69
|
}
|
|
69
70
|
details summary:hover {
|
|
@@ -72,6 +73,10 @@ details summary:hover {
|
|
|
72
73
|
details summary > section {
|
|
73
74
|
width: var(--details-w);
|
|
74
75
|
}
|
|
76
|
+
details .list-styles summary {
|
|
77
|
+
border-left: none;
|
|
78
|
+
border-right: none;
|
|
79
|
+
}
|
|
75
80
|
details > section {
|
|
76
81
|
padding-inline: var(--details-px);
|
|
77
82
|
padding-block: var(--details-py);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../components/details/details.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../components/details/details.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;;AAVA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAKF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE","file":"details.css"}
|
package/src/styles/index.css
CHANGED
|
@@ -431,17 +431,19 @@ button {
|
|
|
431
431
|
--btn-xs: 0.6rem;
|
|
432
432
|
--btn-sm: 0.7rem;
|
|
433
433
|
--btn-md: 0.85rem;
|
|
434
|
-
--btn-lg:
|
|
434
|
+
--btn-lg: 1.3125rem;
|
|
435
435
|
--btn-pill: 100rem;
|
|
436
436
|
--btn-height: 2.5rem;
|
|
437
437
|
--fs: 0.95rem;
|
|
438
438
|
--btn-fs: 0.9375rem;
|
|
439
439
|
--btn-bg: lightgray;
|
|
440
440
|
--btn-width: max-content;
|
|
441
|
+
--btn-calc-height: var(--btn-height, calc(40rem / 16));
|
|
441
442
|
font-size: var(--btn-fs);
|
|
442
443
|
font-weight: var(--btn-fw, 500);
|
|
443
444
|
height: var(--btn-height, 2.5rem);
|
|
444
|
-
|
|
445
|
+
max-height: var(--btn-calc-height);
|
|
446
|
+
min-height: 1.5rem;
|
|
445
447
|
place-items: var(--btn-place, center);
|
|
446
448
|
padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
|
|
447
449
|
padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));
|
|
@@ -757,24 +759,24 @@ progress[aria-busy]::-webkit-progress-bar {
|
|
|
757
759
|
}
|
|
758
760
|
|
|
759
761
|
details {
|
|
760
|
-
--details-
|
|
761
|
-
--details-h: max-content;
|
|
762
|
-
--details-border: 1px solid #dfdfdf;
|
|
763
|
-
--details-display: flex;
|
|
764
|
-
--details-justify: flex-start;
|
|
762
|
+
--details-border: 0.0625rem solid #dfdfdf;
|
|
765
763
|
--details-direction: column;
|
|
764
|
+
--details-display: flex;
|
|
766
765
|
--details-gap: 0rem;
|
|
766
|
+
--details-h: max-content;
|
|
767
|
+
--details-justify: flex-start;
|
|
767
768
|
--details-px: 1.5rem;
|
|
768
769
|
--details-py: 1rem;
|
|
769
|
-
--details-radius:
|
|
770
|
+
--details-radius: 0;
|
|
771
|
+
--details-w: 100%;
|
|
772
|
+
--max-h-closed: 6.25rem;
|
|
773
|
+
--max-h-open: 50rem;
|
|
774
|
+
--summary-align: center;
|
|
770
775
|
--summary-cursor: pointer;
|
|
771
|
-
--summary-transitions: all 0.75s ease-in-out;
|
|
772
776
|
--summary-display: flex;
|
|
773
|
-
--summary-justify: flex-start;
|
|
774
|
-
--summary-align: center;
|
|
775
777
|
--summary-gap: 0.5rem;
|
|
776
|
-
--
|
|
777
|
-
--
|
|
778
|
+
--summary-justify: flex-start;
|
|
779
|
+
--summary-transitions: all 0.75s ease-in-out;
|
|
778
780
|
interpolate-size: allow-keywords;
|
|
779
781
|
display: var(--details-display);
|
|
780
782
|
flex-direction: var(--details-direction);
|
|
@@ -782,10 +784,11 @@ details {
|
|
|
782
784
|
gap: var(--details-gap);
|
|
783
785
|
width: var(--details-w);
|
|
784
786
|
border: var(--details-border);
|
|
787
|
+
border-left: none;
|
|
788
|
+
border-right: none;
|
|
785
789
|
transition: var(--summary-transitions);
|
|
786
790
|
max-height: var(--max-h-closed);
|
|
787
791
|
overflow: clip;
|
|
788
|
-
border-radius: var(--details-radius);
|
|
789
792
|
}
|
|
790
793
|
details + details {
|
|
791
794
|
border-radius: 0;
|
|
@@ -821,7 +824,7 @@ details summary::-webkit-details-marker {
|
|
|
821
824
|
}
|
|
822
825
|
details summary:focus-within {
|
|
823
826
|
outline: none;
|
|
824
|
-
border-bottom: solid 2px
|
|
827
|
+
border-bottom: solid 2px currentColor;
|
|
825
828
|
background-color: whitesmoke;
|
|
826
829
|
}
|
|
827
830
|
details summary:hover {
|
|
@@ -830,6 +833,10 @@ details summary:hover {
|
|
|
830
833
|
details summary > section {
|
|
831
834
|
width: var(--details-w);
|
|
832
835
|
}
|
|
836
|
+
details .list-styles summary {
|
|
837
|
+
border-left: none;
|
|
838
|
+
border-right: none;
|
|
839
|
+
}
|
|
833
840
|
details > section {
|
|
834
841
|
padding-inline: var(--details-px);
|
|
835
842
|
padding-block: var(--details-py);
|
|
@@ -1560,7 +1567,6 @@ nav[data-breadcrumb] ol li a[href][aria-current] {
|
|
|
1560
1567
|
}
|
|
1561
1568
|
[role=alert] button[data-btn~=icon] {
|
|
1562
1569
|
--btn-bg: transparent;
|
|
1563
|
-
max-height: fit-content;
|
|
1564
1570
|
}
|
|
1565
1571
|
|
|
1566
1572
|
[data-tts] {
|
package/src/styles/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../sass/_reset.scss","../sass/_properties.scss","../sass/_globals.scss","../sass/_elements.scss","../components/buttons/button.scss","../components/tag/tag.scss","../components/images/img.scss","../components/cards/card.scss","../components/progress/progress.scss","../components/details/details.scss","../components/link/link.scss","../sass/_mixins.scss","../components/layout/_header.scss","../components/layout/landmarks.scss","../components/dialog/dialog.scss","../sass/_grid.scss","../components/badge/badge.scss","../components/nav/nav.scss","../components/form/form.scss","../components/breadcrumbs/breadcrumb.scss","../components/alert/alert.scss","../components/text-to-speech/text-to-speech.scss","../sass/styles/_shadows.scss","../sass/styles/_colors.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AACE;AACA;EACA;AAEA;AACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;AAAA;EAEE;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AAWA;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;IACE;;EAGF;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AAIJ;AACA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;AAEA;AAGA;EACA;;AAEA;EACE;EACA;EACA;;;ACpLJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EAGA;EAEA;EAEA;EAEA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;;ACxGF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACE;;;AAKN;AAAA;AAAA;EAGE;;AACA;AAAA;AAAA;EACE;;;AAIJ;AAAA;AAAA;AAAA;EAIE;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;;;AAKF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;EAEE;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC1IA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../sass/_reset.scss","../sass/_properties.scss","../sass/_globals.scss","../sass/_elements.scss","../components/buttons/button.scss","../components/tag/tag.scss","../components/images/img.scss","../components/cards/card.scss","../components/progress/progress.scss","../components/details/details.scss","../components/link/link.scss","../sass/_mixins.scss","../components/layout/_header.scss","../components/layout/landmarks.scss","../components/dialog/dialog.scss","../sass/_grid.scss","../components/badge/badge.scss","../components/nav/nav.scss","../components/form/form.scss","../components/breadcrumbs/breadcrumb.scss","../components/alert/alert.scss","../components/text-to-speech/text-to-speech.scss","../sass/styles/_shadows.scss","../sass/styles/_colors.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AACE;AACA;EACA;AAEA;AACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAGA;AAAA;EAEE;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUE;;;AAGF;AAWA;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AACA;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;IACE;;EAGF;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AAIJ;AACA;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;AAEA;AAGA;EACA;;AAEA;EACE;EACA;EACA;;;ACpLJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EAGA;EAEA;EAEA;EAEA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;;ACxGF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AACA;EACE;;;AAKN;AAAA;AAAA;EAGE;;AACA;AAAA;AAAA;EACE;;;AAIJ;AAAA;AAAA;AAAA;EAIE;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;;;AAKF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;EAEE;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC1IA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;;AC1IN;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EACE;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EACE;EACA;;AAEF;AAAA;AAAA;AAAA;EACE;EACA;;;AAGJ;EACE;EACA;;;ACtDF;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;;ACvCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAEF;AAAA;EAEE;;AAEF;AAAA;EACE;;;ACzCJ;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;AACA;AACA;AA8BA;;AA7BA;EAEE;EACA;EACA;EACA;AAgBA;;AAbA;AACE;EACA;EACA;;AAIF;AACE;EACA;EACA;;AAIF;AACE;EACA;EACA;;AAKJ;EAEE;EACA;EAEA;AAcA;;AAZA;AACE;EAEA;;AAGF;EAGE;;AAIF;AACE;EAEA;;;ACjEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;;AAVA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAKF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE;;;ACxGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;EAEA;EACA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EAEE;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EClEF;EACA;EACA;EACA;EACA;;AD+DE;EACE;EACA;;AAEF;EACE;;ACnEJ;EACE;;ADsEF;EAEE;EACA;EACA;;AACA;EAEE;;;AAKN;EACE;;;AE1FF;AAAA;AAAA;EAIE;EAEA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;EACE;EAEA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAEF;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;;AChEN;AAAA;EAEE;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;AACA;AAAA;EAEE;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;;AAEF;AAAA;EACE;EACA;;;AAON;EACE;EACA;EACA;EACA;EACA;;;AChDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EAEE;EACA;;;AAKN;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;;AC1EF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EAIA;EACA;EACA;EACA;EACA;;;AClGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;;AClBJ;AAAA;EAEE;EACA;;AAEA;EALF;AAAA;IAMI;IACA;IACA;IACA;IACA;;;AAGA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAEF;AAAA;EACE;;;AAMR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;;AAKF;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;ACvFJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;AAKA;AAAA;AAAA;EACE;EACA;;AACA;AAAA;AAAA;EACE;;AAKN;AAAA;AAAA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACrFF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;;AAEF;AAAA;EACE;;AACA;AAAA;EACE;EACA;;;AC7BV;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;;;AC3EN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AACA;AAAA;EAEE;;AACA;AAAA;EACE;;;AC3BN;EACE;EACA;EACA;AAAA;EAEA;AAAA;EAEA;AAAA;EAEA;AAAA;;;AAIF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AChCF;EACE;;;AAGF;EACE;;AACA;EACE;;AAEF;EACE","file":"index.css"}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { Meta } from "@storybook/blocks";
|
|
2
|
-
|
|
3
|
-
<Meta title="FP.REACT Components/Alert/Readme" />
|
|
4
|
-
|
|
5
|
-
# Alert Component
|
|
6
|
-
|
|
7
|
-
## Summary
|
|
8
|
-
|
|
9
|
-
The `Alert` component is a customizable component for displaying status messages
|
|
10
|
-
with different severity levels. It supports multiple severity types (default,
|
|
11
|
-
info, success, warning, error) and can include optional titles and dismissal
|
|
12
|
-
functionality.
|
|
13
|
-
|
|
14
|
-
## Features
|
|
15
|
-
|
|
16
|
-
- Multiple severity levels with matching visual indicators
|
|
17
|
-
- Optional title and dismissible states
|
|
18
|
-
- Accessible by default with appropriate ARIA attributes
|
|
19
|
-
- Customizable icons through `iconProps`
|
|
20
|
-
|
|
21
|
-
## Props
|
|
22
|
-
|
|
23
|
-
```tsx
|
|
24
|
-
export type AlertProps = {
|
|
25
|
-
open: boolean;
|
|
26
|
-
severity?: "default" | "info" | "success" | "warning" | "error";
|
|
27
|
-
children: React.ReactNode;
|
|
28
|
-
title?: string;
|
|
29
|
-
dismissible?: boolean;
|
|
30
|
-
onDismiss?: () => void;
|
|
31
|
-
iconProps?: IconProps;
|
|
32
|
-
} & React.ComponentProps<typeof UI>;
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
## Technical Details
|
|
36
|
-
|
|
37
|
-
The `Alert` component uses the `UI` component for rendering and supports various
|
|
38
|
-
severity levels with corresponding ARIA attributes for accessibility. It also
|
|
39
|
-
allows for custom icons through the `iconProps` prop.
|
|
40
|
-
|
|
41
|
-
## Usage Example
|
|
42
|
-
|
|
43
|
-
### Basic Usage
|
|
44
|
-
|
|
45
|
-
```tsx
|
|
46
|
-
import Alert from "#components/alert";
|
|
47
|
-
|
|
48
|
-
<Alert open={true} severity="info">
|
|
49
|
-
This is an info alert.
|
|
50
|
-
</Alert>;
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
### Advanced Usage
|
|
54
|
-
|
|
55
|
-
```tsx
|
|
56
|
-
import Alert from "#components/alert";
|
|
57
|
-
|
|
58
|
-
<Alert
|
|
59
|
-
open={true}
|
|
60
|
-
severity="error"
|
|
61
|
-
title="Error"
|
|
62
|
-
dismissible={true}
|
|
63
|
-
onDismiss={() => console.log("Alert dismissed")}
|
|
64
|
-
iconProps={{ fill: "#000", size: 24 }}
|
|
65
|
-
>
|
|
66
|
-
This is an error alert with a custom icon.
|
|
67
|
-
</Alert>;
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### Additional Notes
|
|
71
|
-
|
|
72
|
-
- The `Alert` component is designed to be accessible by default.
|
|
73
|
-
- The `dismissible` prop allows the alert to be dismissed by the user.
|
|
74
|
-
- Custom icons can be provided through the `iconProps` prop.
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
# Card Component
|
|
3
|
-
|
|
4
|
-
The Card component is a versatile and reusable React component for creating card-like UI elements. It's part of the FPKit React component library.
|
|
5
|
-
|
|
6
|
-
## Usage
|
|
7
|
-
|
|
8
|
-
```tsx
|
|
9
|
-
import Card from 'libs/react/fpkit/src/components/cards/card';
|
|
10
|
-
|
|
11
|
-
<Card>
|
|
12
|
-
<Card.Title>Card Title</Card.Title>
|
|
13
|
-
<Card.Content>
|
|
14
|
-
This is the content of the card.
|
|
15
|
-
</Card.Content>
|
|
16
|
-
</Card>
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Components
|
|
20
|
-
|
|
21
|
-
### Card
|
|
22
|
-
|
|
23
|
-
The main container component for the card.
|
|
24
|
-
|
|
25
|
-
#### Props
|
|
26
|
-
|
|
27
|
-
- `elm?: 'div' | 'aside' | 'section' | 'article'` - HTML element to render as (default: 'div')
|
|
28
|
-
- `title?: React.ReactNode` - Card title
|
|
29
|
-
- `footer?: React.ReactNode` - Card footer
|
|
30
|
-
- `styles?: React.CSSProperties` - Inline styles
|
|
31
|
-
- `classes?: string` - Additional CSS classes
|
|
32
|
-
- `id?: string` - Unique ID for the card
|
|
33
|
-
|
|
34
|
-
All other props are passed through to the underlying UI component.
|
|
35
|
-
|
|
36
|
-
### Card.Title
|
|
37
|
-
|
|
38
|
-
A sub-component for rendering the card's title.
|
|
39
|
-
|
|
40
|
-
#### Props
|
|
41
|
-
|
|
42
|
-
- `as?: React.ElementType` - HTML element to render as (default: 'h3')
|
|
43
|
-
- `className?: string` - Additional CSS classes
|
|
44
|
-
- `styles?: React.CSSProperties` - Inline styles
|
|
45
|
-
|
|
46
|
-
### Card.Content
|
|
47
|
-
|
|
48
|
-
A sub-component for rendering the card's main content.
|
|
49
|
-
|
|
50
|
-
#### Props
|
|
51
|
-
|
|
52
|
-
- `className?: string` - Additional CSS classes
|
|
53
|
-
- `styles?: React.CSSProperties` - Inline styles
|
|
54
|
-
|
|
55
|
-
## Styling
|
|
56
|
-
|
|
57
|
-
The component uses CSS classes for styling:
|
|
58
|
-
|
|
59
|
-
- `.card-title` for the title
|
|
60
|
-
- `.card-content` for the content
|
|
61
|
-
|
|
62
|
-
You can override these classes or provide additional styling through the `className` and `styles` props.
|
|
63
|
-
|
|
64
|
-
## Accessibility
|
|
65
|
-
|
|
66
|
-
The Card component is designed with accessibility in mind:
|
|
67
|
-
|
|
68
|
-
- It uses semantic HTML elements (`div`, `aside`, `section`, or `article`) for the main container.
|
|
69
|
-
- The Title component defaults to using an `h3` element, which can be changed if needed.
|
|
70
|
-
- The Content component uses an `article` element for semantic structure.
|
|
71
|
-
|
|
72
|
-
## TypeScript
|
|
73
|
-
|
|
74
|
-
This component is written in TypeScript and provides type definitions for all props and sub-components.
|
|
75
|
-
|
|
76
|
-
## Contributing
|
|
77
|
-
|
|
78
|
-
When contributing to this component, please follow the established code style and conventions. Ensure all changes are well-tested and documented.
|
|
79
|
-
|
|
80
|
-
This README provides an overview of the Card component, its usage, available props, styling information, and accessibility considerations. It also mentions that the component is written in TypeScript and provides guidance for contributors.
|