@sikka/hawa 0.0.44 → 0.0.46
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/es/index.es.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/src/elements/HawaAccordian.js +103 -17
- package/src/elements/HawaAlert.js +19 -6
- package/src/elements/HawaCheckbox.js +25 -10
- package/src/elements/HawaChip.js +5 -2
- package/src/elements/HawaItemCard.js +163 -41
- package/src/elements/HawaSnackbar.js +38 -41
- package/src/elements/HawaSwitch.js +17 -2
- package/src/elements/HawaTextField.js +18 -25
- package/src/elements/index.js +1 -0
- package/src/layout/HawaLayout.js +124 -27
- package/storybook-static/iframe.html +1 -1
- package/storybook-static/main.e8029a3c.iframe.bundle.js +1 -0
- package/storybook-static/project.json +1 -1
- package/storybook-static/vendors~main.bfb520c7.iframe.bundle.js +76 -0
- package/storybook-static/{vendors~main.337d03df.iframe.bundle.js.LICENSE.txt → vendors~main.bfb520c7.iframe.bundle.js.LICENSE.txt} +0 -0
- package/storybook-static/vendors~main.bfb520c7.iframe.bundle.js.map +1 -0
- package/storybook-static/main.3795aede.iframe.bundle.js +0 -1
- package/storybook-static/vendors~main.337d03df.iframe.bundle.js +0 -76
- package/storybook-static/vendors~main.337d03df.iframe.bundle.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,25 +1,111 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import ExpandMore from "@mui/icons-material/ExpandMore";
|
|
3
|
-
import Typography from "@mui/material/Typography";
|
|
4
|
-
import Accordion from "@mui/material/Accordion";
|
|
5
|
-
import AccordionSummary from "@mui/material/AccordionSummary";
|
|
6
|
-
import AccordionDetails from "@mui/material/AccordionDetails";
|
|
7
2
|
import PropTypes from "prop-types";
|
|
3
|
+
import "flowbite";
|
|
8
4
|
|
|
9
|
-
|
|
5
|
+
const AccordionItem = (props) => {
|
|
6
|
+
let noRounding =
|
|
7
|
+
"flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
|
|
8
|
+
let roundedTop =
|
|
9
|
+
"rounded-t-xl border-b-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
|
|
10
|
+
let roundedBottom =
|
|
11
|
+
"rounded-b-xl border-t-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
|
|
12
|
+
let accPaper =
|
|
13
|
+
"p-5 font-light border border-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900";
|
|
14
|
+
let accPaperRounded =
|
|
15
|
+
"p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900";
|
|
10
16
|
return (
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
17
|
+
<div>
|
|
18
|
+
<h2 id={"accordion-collapse-heading-" + props.count}>
|
|
19
|
+
<button
|
|
20
|
+
type="button"
|
|
21
|
+
className={
|
|
22
|
+
props.count === 0 ? roundedTop : noRounding
|
|
23
|
+
// : props.count === -1
|
|
24
|
+
// ? roundedBottom
|
|
25
|
+
// : noRounding
|
|
26
|
+
}
|
|
27
|
+
data-accordion-target={"#accordion-collapse-body-" + props.count}
|
|
28
|
+
aria-expanded="true"
|
|
29
|
+
aria-controls={"accordion-collapse-body-" + props.count}
|
|
30
|
+
>
|
|
31
|
+
<span>What is Flowbite?</span>
|
|
32
|
+
<svg
|
|
33
|
+
data-accordion-icon=""
|
|
34
|
+
className="w-6 h-6 rotate-180 shrink-0"
|
|
35
|
+
fill="currentColor"
|
|
36
|
+
viewBox="0 0 20 20"
|
|
37
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
38
|
+
>
|
|
39
|
+
<path
|
|
40
|
+
fill-rule="evenodd"
|
|
41
|
+
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
42
|
+
clip-rule="evenodd"
|
|
43
|
+
></path>
|
|
44
|
+
</svg>
|
|
45
|
+
</button>
|
|
46
|
+
</h2>
|
|
47
|
+
<div
|
|
48
|
+
id={"accordion-collapse-body-" + props.count}
|
|
49
|
+
className=""
|
|
50
|
+
aria-labelledby={"accordion-collapse-heading-" + props.count}
|
|
16
51
|
>
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
52
|
+
<div className={props.count === -1 ? accPaperRounded : accPaper}>
|
|
53
|
+
<p className="mb-2 text-gray-500 dark:text-gray-400">
|
|
54
|
+
Flowbite is an open-source library of interactive components built
|
|
55
|
+
on top of Tailwind CSS including buttons, dropdowns, modals,
|
|
56
|
+
navbars, and more.
|
|
57
|
+
</p>
|
|
58
|
+
<p className="text-gray-500 dark:text-gray-400">
|
|
59
|
+
Check out this guide to learn how to{" "}
|
|
60
|
+
<a
|
|
61
|
+
href="/docs/getting-started/introduction/"
|
|
62
|
+
class="text-blue-600 dark:text-blue-500 hover:underline"
|
|
63
|
+
>
|
|
64
|
+
get started
|
|
65
|
+
</a>{" "}
|
|
66
|
+
and start developing websites even faster with components on top of
|
|
67
|
+
Tailwind CSS.
|
|
68
|
+
</p>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
);
|
|
73
|
+
};
|
|
74
|
+
export const HawaAccordian = (props) => {
|
|
75
|
+
let accordionContent = [
|
|
76
|
+
{ title: "etete", content: "teoite" },
|
|
77
|
+
{ title: "etete", content: "teoite" },
|
|
78
|
+
{ title: "etete", content: "teoite" },
|
|
79
|
+
{ title: "etete", content: "teoite" }
|
|
80
|
+
];
|
|
81
|
+
return (
|
|
82
|
+
<div id="accordion-collapse" data-accordion="collapse">
|
|
83
|
+
{accordionContent.map((acc, i) => {
|
|
84
|
+
return (
|
|
85
|
+
<AccordionItem
|
|
86
|
+
title={acc.title}
|
|
87
|
+
content={acc.content}
|
|
88
|
+
count={accordionContent.length - 1 === i ? -1 : i}
|
|
89
|
+
/>
|
|
90
|
+
);
|
|
91
|
+
})}
|
|
92
|
+
{/* <AccordionItem count={1} />
|
|
93
|
+
<AccordionItem count={2} />
|
|
94
|
+
<AccordionItem count={3} /> */}
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
// <Accordion elevation={0}>
|
|
98
|
+
// <AccordionSummary
|
|
99
|
+
// expandIcon={<ExpandMore />}
|
|
100
|
+
// aria-controls="panel1a-content"
|
|
101
|
+
// id="panel1a-header"
|
|
102
|
+
// >
|
|
103
|
+
// <Typography>{props.title}</Typography>
|
|
104
|
+
// </AccordionSummary>
|
|
105
|
+
// <AccordionDetails>
|
|
106
|
+
// <Typography>{props.content} </Typography>
|
|
107
|
+
// </AccordionDetails>
|
|
108
|
+
// </Accordion>
|
|
23
109
|
);
|
|
24
110
|
};
|
|
25
111
|
HawaAccordian.propTypes = {
|
|
@@ -1,14 +1,27 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import Alert from "@mui/material/Alert";
|
|
3
|
-
import AlertTitle from "@mui/material/AlertTitle";
|
|
4
2
|
import PropTypes from "prop-types";
|
|
5
3
|
|
|
6
4
|
export const HawaAlert = (props) => {
|
|
5
|
+
let severities = {
|
|
6
|
+
info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
|
|
7
|
+
warning:
|
|
8
|
+
"text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
|
|
9
|
+
error: "text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
|
|
10
|
+
success: "text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800"
|
|
11
|
+
};
|
|
12
|
+
|
|
7
13
|
return (
|
|
8
|
-
<
|
|
9
|
-
{
|
|
10
|
-
|
|
11
|
-
|
|
14
|
+
<div
|
|
15
|
+
class={
|
|
16
|
+
"flex flex-col p-4 mb-4 text-sm rounded-lg" +
|
|
17
|
+
" " +
|
|
18
|
+
severities[props.severity]
|
|
19
|
+
}
|
|
20
|
+
role="alert"
|
|
21
|
+
>
|
|
22
|
+
<span class="font-medium">{props.title}</span>
|
|
23
|
+
<span>{" " + props.text}</span>
|
|
24
|
+
</div>
|
|
12
25
|
);
|
|
13
26
|
};
|
|
14
27
|
HawaAlert.propTypes = {
|
|
@@ -5,16 +5,31 @@ import Checkbox from "@mui/material/Checkbox";
|
|
|
5
5
|
export const HawaCheckbox = (props) => {
|
|
6
6
|
console.log("props : ", props);
|
|
7
7
|
return (
|
|
8
|
-
<
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
defaultChecked={props.defaultValue}
|
|
15
|
-
/>
|
|
16
|
-
}
|
|
8
|
+
<div class="flex items-center mb-4">
|
|
9
|
+
<input
|
|
10
|
+
id="default-checkbox"
|
|
11
|
+
type="checkbox"
|
|
12
|
+
value=""
|
|
13
|
+
class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
|
|
17
14
|
/>
|
|
18
|
-
|
|
15
|
+
<label
|
|
16
|
+
for="default-checkbox"
|
|
17
|
+
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
18
|
+
>
|
|
19
|
+
Default checkbox
|
|
20
|
+
</label>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
// <React.Fragment>
|
|
24
|
+
// <FormControlLabel
|
|
25
|
+
// label={props.label}
|
|
26
|
+
// control={
|
|
27
|
+
// <Checkbox
|
|
28
|
+
// style={{ color: props.color || null }}
|
|
29
|
+
// defaultChecked={props.defaultValue}
|
|
30
|
+
// />
|
|
31
|
+
// }
|
|
32
|
+
// />
|
|
33
|
+
// </React.Fragment>
|
|
19
34
|
);
|
|
20
35
|
};
|
package/src/elements/HawaChip.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import Chip from "@mui/material/Chip";
|
|
3
2
|
|
|
4
3
|
export const HawaChip = (props) => {
|
|
5
|
-
return
|
|
4
|
+
return (
|
|
5
|
+
<span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
|
|
6
|
+
{props.label}
|
|
7
|
+
</span>
|
|
8
|
+
);
|
|
6
9
|
};
|
|
@@ -9,52 +9,174 @@ export const HawaItemCard = (props) => {
|
|
|
9
9
|
props.onCardClick();
|
|
10
10
|
};
|
|
11
11
|
return (
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
variant="card-container"
|
|
16
|
-
dataValue="parent"
|
|
17
|
-
// variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
|
|
18
|
-
style={{ direction: isArabic ? "rtl" : "ltr" }}
|
|
12
|
+
<div
|
|
13
|
+
// href="#"
|
|
14
|
+
class="block pt-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 "
|
|
19
15
|
>
|
|
20
|
-
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
16
|
+
<div class="flex justify-end pr-6">
|
|
17
|
+
<button
|
|
18
|
+
id="dropdownButton"
|
|
19
|
+
data-dropdown-toggle="dropdown"
|
|
20
|
+
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
|
|
21
|
+
type="button"
|
|
22
|
+
>
|
|
23
|
+
<span class="sr-only">Open dropdown</span>
|
|
24
|
+
<svg
|
|
25
|
+
class="w-6 h-6"
|
|
26
|
+
aria-hidden="true"
|
|
27
|
+
fill="currentColor"
|
|
28
|
+
viewBox="0 0 20 20"
|
|
29
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
30
|
+
>
|
|
31
|
+
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
|
|
32
|
+
</svg>
|
|
33
|
+
</button>
|
|
34
|
+
<div
|
|
35
|
+
id="dropdown"
|
|
36
|
+
class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
|
|
37
|
+
>
|
|
38
|
+
<ul class="py-1" aria-labelledby="dropdownButton">
|
|
39
|
+
<li>
|
|
40
|
+
<a
|
|
41
|
+
href="#"
|
|
42
|
+
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
43
|
+
>
|
|
44
|
+
Edit
|
|
45
|
+
</a>
|
|
46
|
+
</li>
|
|
47
|
+
<li>
|
|
48
|
+
<a
|
|
49
|
+
href="#"
|
|
50
|
+
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
51
|
+
>
|
|
52
|
+
Export Data
|
|
53
|
+
</a>
|
|
54
|
+
</li>
|
|
55
|
+
<li>
|
|
56
|
+
<a
|
|
57
|
+
href="#"
|
|
58
|
+
class="block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
|
|
59
|
+
>
|
|
60
|
+
Delete
|
|
61
|
+
</a>
|
|
62
|
+
</li>
|
|
63
|
+
</ul>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="px-6">
|
|
67
|
+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
|
|
68
|
+
Noteworthy technology acquisitions 2021
|
|
69
|
+
</h5>
|
|
70
|
+
<p class="font-normal text-gray-700 dark:text-gray-400">
|
|
71
|
+
Here are the biggest enterprise technology acquisitions of 2021 so
|
|
72
|
+
far, in reverse chronological order.
|
|
73
|
+
</p>
|
|
74
|
+
</div>
|
|
75
|
+
<div className="p-3 mt-6 rounded-b-lg flex justify-end">
|
|
76
|
+
<div class="inline-flex rounded-md shadow-sm" role="group">
|
|
77
|
+
<button
|
|
78
|
+
type="button"
|
|
79
|
+
class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
|
|
80
|
+
>
|
|
81
|
+
<svg
|
|
82
|
+
aria-hidden="true"
|
|
83
|
+
class="mr-0 w-4 h-4 fill-current"
|
|
84
|
+
fill="currentColor"
|
|
85
|
+
viewBox="0 0 20 20"
|
|
86
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
36
87
|
>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
88
|
+
<path
|
|
89
|
+
fill-rule="evenodd"
|
|
90
|
+
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
|
|
91
|
+
clip-rule="evenodd"
|
|
92
|
+
></path>
|
|
93
|
+
</svg>
|
|
94
|
+
{/* Profile */}
|
|
95
|
+
</button>
|
|
96
|
+
<button
|
|
97
|
+
type="button"
|
|
98
|
+
class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
|
|
99
|
+
>
|
|
100
|
+
<svg
|
|
101
|
+
aria-hidden="true"
|
|
102
|
+
class="mr-0 w-4 h-4 fill-current"
|
|
103
|
+
fill="currentColor"
|
|
104
|
+
viewBox="0 0 20 20"
|
|
105
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
106
|
+
>
|
|
107
|
+
<path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path>
|
|
108
|
+
</svg>
|
|
109
|
+
{/* Settings */}
|
|
110
|
+
</button>
|
|
111
|
+
<button
|
|
112
|
+
type="button"
|
|
113
|
+
class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
|
|
114
|
+
>
|
|
115
|
+
<svg
|
|
116
|
+
aria-hidden="true"
|
|
117
|
+
class="mr-0 w-4 h-4 fill-current"
|
|
118
|
+
fill="currentColor"
|
|
119
|
+
viewBox="0 0 20 20"
|
|
120
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
121
|
+
>
|
|
122
|
+
<path
|
|
123
|
+
fill-rule="evenodd"
|
|
124
|
+
d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
|
|
125
|
+
clip-rule="evenodd"
|
|
126
|
+
></path>
|
|
127
|
+
</svg>
|
|
128
|
+
{/* Downloads */}
|
|
129
|
+
</button>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
// <Container
|
|
135
|
+
// onClick={handleParentClick}
|
|
136
|
+
// maxWidth="xs"
|
|
137
|
+
// variant="card-container"
|
|
138
|
+
// dataValue="parent"
|
|
139
|
+
// // variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
|
|
140
|
+
// style={{ direction: isArabic ? "rtl" : "ltr" }}
|
|
141
|
+
// >
|
|
142
|
+
// {props.header && (
|
|
143
|
+
// <Container style={{ zIndex: 20 }} variant="card-header">
|
|
144
|
+
// {props.headerActions && (
|
|
145
|
+
// <div
|
|
146
|
+
// style={{
|
|
147
|
+
// margin: 0,
|
|
148
|
+
// marginRight: -20,
|
|
149
|
+
// marginLeft: -20,
|
|
150
|
+
// marginBottom: -20,
|
|
151
|
+
// // backgroundColor: "red",
|
|
152
|
+
// display: "flex",
|
|
153
|
+
// paddingTop: 5,
|
|
154
|
+
// paddingLeft: 5,
|
|
155
|
+
// paddingRight: 5,
|
|
156
|
+
// justifyContent: "flex-end"
|
|
157
|
+
// }}
|
|
158
|
+
// >
|
|
159
|
+
// {props.headerActions}
|
|
160
|
+
// </div>
|
|
161
|
+
// )}
|
|
162
|
+
// {props.header}
|
|
163
|
+
// </Container>
|
|
164
|
+
// )}
|
|
165
|
+
// {props.content && (
|
|
166
|
+
// <Container style={{ zIndex: 20 }} variant="card-content">
|
|
167
|
+
// {props.content}
|
|
168
|
+
// </Container>
|
|
169
|
+
// )}
|
|
48
170
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</Container>
|
|
171
|
+
// {props.actions && (
|
|
172
|
+
// <Container style={{ zIndex: 20 }} variant="card-actions">
|
|
173
|
+
// {props.actions}
|
|
174
|
+
// </Container>
|
|
175
|
+
// )}
|
|
176
|
+
// </Container>
|
|
55
177
|
);
|
|
56
178
|
};
|
|
57
179
|
HawaItemCard.propTypes = {
|
|
58
180
|
lang: PropTypes.string,
|
|
59
|
-
onCardClick: PropTypes.func
|
|
181
|
+
onCardClick: PropTypes.func
|
|
60
182
|
};
|
|
@@ -1,47 +1,44 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import
|
|
3
|
-
import AlertTitle from "@mui/material/AlertTitle";
|
|
4
|
-
import Alert from "@mui/material/Alert";
|
|
5
|
-
import { IconButton } from "@mui/material";
|
|
6
|
-
import CloseIcon from "@mui/icons-material/Close";
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "flowbite";
|
|
7
3
|
|
|
8
4
|
export const HawaSnackbar = (props) => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
5
|
+
let severities = {
|
|
6
|
+
info: "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-blue-700 bg-blue-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
|
|
7
|
+
warning:
|
|
8
|
+
"bottom-4 fixed flex items-center p-4 w-full max-w-xs text-yellow-700 bg-yellow-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
|
|
9
|
+
error:
|
|
10
|
+
"bottom-4 fixed flex items-center p-4 w-full max-w-xs text-red-700 bg-red-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
|
|
11
|
+
success:
|
|
12
|
+
"bottom-4 fixed flex items-center p-4 w-full max-w-xs text-green-700 bg-green-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
|
|
13
|
+
none: "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
|
14
|
+
};
|
|
18
15
|
return (
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
sx={{ p: 0.5 }}
|
|
30
|
-
onClick={props.handleClose}
|
|
31
|
-
>
|
|
32
|
-
<CloseIcon />
|
|
33
|
-
</IconButton>
|
|
34
|
-
</>
|
|
35
|
-
}
|
|
36
|
-
>
|
|
37
|
-
<Alert
|
|
38
|
-
icon={false}
|
|
39
|
-
severity={props.severity}
|
|
40
|
-
onClose={props.isClosable ? props.handleClose : null}
|
|
16
|
+
<div id="toast-default" role="alert" className={severities[props.severity]}>
|
|
17
|
+
<div>
|
|
18
|
+
<div class="ml-3 text-sm font-bold">{props.title}</div>
|
|
19
|
+
<div class="ml-3 text-sm font-normal">{props.text}</div>
|
|
20
|
+
</div>
|
|
21
|
+
<button
|
|
22
|
+
type="button"
|
|
23
|
+
class="ml-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
|
|
24
|
+
data-dismiss-target="#toast-default"
|
|
25
|
+
aria-label="Close"
|
|
41
26
|
>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
27
|
+
<span class="sr-only">Close</span>
|
|
28
|
+
<svg
|
|
29
|
+
aria-hidden="true"
|
|
30
|
+
class="w-5 h-5"
|
|
31
|
+
fill="currentColor"
|
|
32
|
+
viewBox="0 0 20 20"
|
|
33
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
+
>
|
|
35
|
+
<path
|
|
36
|
+
fill-rule="evenodd"
|
|
37
|
+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
38
|
+
clip-rule="evenodd"
|
|
39
|
+
></path>
|
|
40
|
+
</svg>
|
|
41
|
+
</button>
|
|
42
|
+
</div>
|
|
46
43
|
);
|
|
47
44
|
};
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import Switch from "@mui/material/Switch";
|
|
3
2
|
|
|
4
3
|
export const HawaSwitch = (props) => {
|
|
5
|
-
return
|
|
4
|
+
return (
|
|
5
|
+
<label
|
|
6
|
+
for="default-toggle"
|
|
7
|
+
class="inline-flex relative items-center cursor-pointer"
|
|
8
|
+
>
|
|
9
|
+
<input
|
|
10
|
+
type="checkbox"
|
|
11
|
+
value=""
|
|
12
|
+
id="default-toggle"
|
|
13
|
+
class="sr-only peer"
|
|
14
|
+
/>
|
|
15
|
+
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
|
16
|
+
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
|
|
17
|
+
{props.text}
|
|
18
|
+
</span>
|
|
19
|
+
</label>
|
|
20
|
+
);
|
|
6
21
|
};
|
|
@@ -1,32 +1,25 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import Input from "@mui/material/Input";
|
|
3
|
-
import InputLabel from "@mui/material/InputLabel";
|
|
4
|
-
import Typography from "@mui/material/Typography";
|
|
5
2
|
|
|
6
3
|
export const HawaTextField = (props) => {
|
|
7
4
|
return (
|
|
8
|
-
<div
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
)}
|
|
27
|
-
</div>
|
|
28
|
-
<Input disableUnderline {...props} />
|
|
29
|
-
</div>
|
|
5
|
+
<div>
|
|
6
|
+
<label
|
|
7
|
+
for="first_name"
|
|
8
|
+
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
9
|
+
>
|
|
10
|
+
{props.label}
|
|
11
|
+
</label>
|
|
12
|
+
<input
|
|
13
|
+
{...props}
|
|
14
|
+
class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
15
|
+
/>
|
|
16
|
+
|
|
17
|
+
{props.helperText && (
|
|
18
|
+
<p class="mt-2 text-sm text-red-600 dark:text-red-500">
|
|
19
|
+
{/* <span class="font-medium">Oh, snapp!</span> */}
|
|
20
|
+
{props.helperText}
|
|
21
|
+
</p>
|
|
22
|
+
)}
|
|
30
23
|
</div>
|
|
31
24
|
);
|
|
32
25
|
};
|
package/src/elements/index.js
CHANGED