@sikka/hawa 0.0.51 → 0.0.52
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/HawaItemCard.js +0 -1
- package/src/elements/HawaLogoButton.js +1 -1
- package/src/elements/HawaPricingCard.js +102 -120
- package/src/elements/HawaSettingsRow.js +4 -5
- package/storybook-static/iframe.html +1 -1
- package/storybook-static/main.c2f37ee9.iframe.bundle.js +1 -0
- package/storybook-static/project.json +1 -1
- package/storybook-static/vendors~main.db6a4c38.iframe.bundle.js +76 -0
- package/storybook-static/{vendors~main.8ab765cf.iframe.bundle.js.LICENSE.txt → vendors~main.db6a4c38.iframe.bundle.js.LICENSE.txt} +0 -0
- package/storybook-static/vendors~main.db6a4c38.iframe.bundle.js.map +1 -0
- package/storybook-static/main.030838f5.iframe.bundle.js +0 -1
- package/storybook-static/vendors~main.8ab765cf.iframe.bundle.js +0 -76
- package/storybook-static/vendors~main.8ab765cf.iframe.bundle.js.map +0 -1
package/package.json
CHANGED
|
@@ -89,7 +89,7 @@ export const HawaLogoButton = (props) => {
|
|
|
89
89
|
style={{ direction: isArabic ? "rtl" : "ltr" }}
|
|
90
90
|
{...props}
|
|
91
91
|
// variant="withLogo"
|
|
92
|
-
className="bg-white rounded-xl my-2 h-11 flex flex-row justify-center align-middle"
|
|
92
|
+
className="bg-white rounded-xl my-2 h-11 flex max-w-sm w-full flex-row justify-center align-middle"
|
|
93
93
|
>
|
|
94
94
|
<div className="h-full w-1/2 flex flex-row justify-end items-center">
|
|
95
95
|
{logoElement}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import Container from "@mui/material/Container";
|
|
3
|
-
import Typography from "@mui/material/Typography";
|
|
4
|
-
import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
|
|
5
2
|
import PropTypes from "prop-types";
|
|
6
|
-
import Chip from "@mui/material/Chip";
|
|
7
3
|
|
|
8
4
|
export const HawaPricingCard = (props) => {
|
|
9
5
|
let isArabic = props.lang === "ar";
|
|
@@ -26,126 +22,112 @@ export const HawaPricingCard = (props) => {
|
|
|
26
22
|
let featuresMapping = isArabic ? props.features_ar : props.features;
|
|
27
23
|
let chipSpacing = isArabic ? { left: 10 } : { right: 10 };
|
|
28
24
|
return (
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
style={{ direction: isArabic ? "rtl" : "ltr" }}
|
|
33
|
-
>
|
|
34
|
-
<Container variant="plan-header">
|
|
35
|
-
{props.discount && (
|
|
36
|
-
<Chip
|
|
37
|
-
label={props.discount}
|
|
38
|
-
variant="standard"
|
|
39
|
-
style={{
|
|
40
|
-
maxWidth: "fit-content",
|
|
41
|
-
position: "absolute",
|
|
42
|
-
bottom: 10,
|
|
43
|
-
...chipSpacing
|
|
44
|
-
}}
|
|
45
|
-
color="success"
|
|
46
|
-
/>
|
|
47
|
-
)}
|
|
48
|
-
<Typography variant="h3" fontWeight={500}>
|
|
25
|
+
<div>
|
|
26
|
+
<div class="p-4 w-full max-w-sm bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700">
|
|
27
|
+
<h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
|
|
49
28
|
{isArabic ? props.title_ar : props.title}
|
|
50
|
-
</
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}}
|
|
91
|
-
>
|
|
92
|
-
<div style={{ display: "flex", flexDirection: "row" }}>
|
|
93
|
-
<Typography>
|
|
94
|
-
{currencyMapping[props.currency?.toLowerCase()]}
|
|
95
|
-
</Typography>
|
|
96
|
-
{/* <Typography>{props.currency?.toUpperCase()}</Typography> */}
|
|
97
|
-
<div style={{ width: 5 }} />
|
|
98
|
-
{props.price}
|
|
99
|
-
</div>
|
|
100
|
-
<Typography style={{ fontSize: 14, margin: 5 }}>
|
|
101
|
-
{props.lang === "ar"
|
|
102
|
-
? cycleTextsArabic[props.cycleText]
|
|
103
|
-
: cycleTextsEnglish[props.cycleText]}
|
|
104
|
-
</Typography>
|
|
105
|
-
</div>
|
|
106
|
-
)}
|
|
107
|
-
</Typography>
|
|
108
|
-
</Container>
|
|
29
|
+
</h5>
|
|
30
|
+
<div class="flex items-baseline text-gray-900 dark:text-white">
|
|
31
|
+
<span class="text-3xl font-semibold">
|
|
32
|
+
{" "}
|
|
33
|
+
{currencyMapping[props.currency?.toLowerCase()]}
|
|
34
|
+
</span>
|
|
35
|
+
<span class="text-5xl font-extrabold tracking-tight">
|
|
36
|
+
{props.price}
|
|
37
|
+
</span>
|
|
38
|
+
<span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
|
|
39
|
+
/{" "}
|
|
40
|
+
{isArabic
|
|
41
|
+
? cycleTextsArabic[props.cycleText]
|
|
42
|
+
: cycleTextsEnglish[props.cycleText]}
|
|
43
|
+
</span>
|
|
44
|
+
</div>
|
|
45
|
+
<ul role="list" class="my-7 space-y-5">
|
|
46
|
+
{featuresMapping?.map((feature) => {
|
|
47
|
+
return (
|
|
48
|
+
<li class="flex space-x-3">
|
|
49
|
+
<svg
|
|
50
|
+
aria-hidden="true"
|
|
51
|
+
class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
|
|
52
|
+
fill="currentColor"
|
|
53
|
+
viewBox="0 0 20 20"
|
|
54
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
55
|
+
>
|
|
56
|
+
<title>Check icon</title>
|
|
57
|
+
<path
|
|
58
|
+
fill-rule="evenodd"
|
|
59
|
+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
60
|
+
clip-rule="evenodd"
|
|
61
|
+
></path>
|
|
62
|
+
</svg>
|
|
63
|
+
<span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
|
|
64
|
+
{feature}
|
|
65
|
+
</span>
|
|
66
|
+
</li>
|
|
67
|
+
);
|
|
68
|
+
})}
|
|
109
69
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
display: "flex",
|
|
118
|
-
flexDirection: "row",
|
|
119
|
-
alignItems: "center",
|
|
120
|
-
justifyContent: "flex-start",
|
|
121
|
-
marginTop: 10,
|
|
122
|
-
width: "100%"
|
|
123
|
-
}}
|
|
70
|
+
{/* <li class="flex space-x-3 line-through decoration-gray-500">
|
|
71
|
+
<svg
|
|
72
|
+
aria-hidden="true"
|
|
73
|
+
class="flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500"
|
|
74
|
+
fill="currentColor"
|
|
75
|
+
viewBox="0 0 20 20"
|
|
76
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
124
77
|
>
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
78
|
+
<title>Check icon</title>
|
|
79
|
+
<path
|
|
80
|
+
fill-rule="evenodd"
|
|
81
|
+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
82
|
+
clip-rule="evenodd"
|
|
83
|
+
></path>
|
|
84
|
+
</svg>
|
|
85
|
+
<span class="text-base font-normal leading-tight text-gray-500">
|
|
86
|
+
Sketch Files
|
|
87
|
+
</span>
|
|
88
|
+
</li> */}
|
|
89
|
+
</ul>
|
|
90
|
+
<button
|
|
91
|
+
type="button"
|
|
92
|
+
class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center"
|
|
93
|
+
>
|
|
94
|
+
{props.buttonText}
|
|
95
|
+
</button>
|
|
140
96
|
</div>
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
// <Container
|
|
100
|
+
// maxWidth="xs"
|
|
101
|
+
// variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
|
|
102
|
+
// style={{ direction: isArabic ? "rtl" : "ltr" }}
|
|
103
|
+
// >
|
|
104
|
+
// {props.discount && (
|
|
105
|
+
// <Chip
|
|
106
|
+
// label={props.discount}
|
|
107
|
+
// variant="standard"
|
|
108
|
+
// style={{
|
|
109
|
+
// maxWidth: "fit-content",
|
|
110
|
+
// position: "absolute",
|
|
111
|
+
// bottom: 10,
|
|
112
|
+
// ...chipSpacing
|
|
113
|
+
// }}
|
|
114
|
+
// color="success"
|
|
115
|
+
// />
|
|
116
|
+
// )}
|
|
117
|
+
|
|
118
|
+
// <div
|
|
119
|
+
// style={{ padding: 20, color: props.selectedPlan ? "white" : "black" }}
|
|
120
|
+
// >
|
|
121
|
+
//
|
|
122
|
+
// </div>
|
|
123
|
+
// <button
|
|
124
|
+
// onClick={props.selectPlan}
|
|
125
|
+
// variant={props.selectedPlan ? "outlined" : "contained"}
|
|
126
|
+
// style={{ margin: 20 }}
|
|
127
|
+
// >
|
|
128
|
+
// {props.buttonText}
|
|
129
|
+
// </button>
|
|
130
|
+
// </Container>
|
|
149
131
|
);
|
|
150
132
|
};
|
|
151
133
|
|
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
|
-
import Checkbox from "@mui/material/Checkbox";
|
|
4
|
-
import Container from "@mui/material/Container";
|
|
5
3
|
import { HawaTypography } from "./HawaTypography";
|
|
6
4
|
import { HawaTextField } from "./HawaTextField";
|
|
7
5
|
import { HawaPanelTabs } from "./HawaPanelTabs";
|
|
8
6
|
import { HawaSwitch } from "./HawaSwitch";
|
|
9
7
|
import { HawaColorPicker } from "./HawaColorPicker";
|
|
10
8
|
import { HawaRange } from "./HawaRange";
|
|
9
|
+
import { HawaCheckbox } from "./HawaCheckbox";
|
|
11
10
|
|
|
12
11
|
export const HawaSettingsRow = (props) => {
|
|
13
12
|
return (
|
|
14
|
-
<
|
|
13
|
+
<div className="flex flex-row bg-white justify-between align-middle items-center p-2 rounded-xl my-2 h-14">
|
|
15
14
|
<HawaTypography>{props.settingsLabel}</HawaTypography>
|
|
16
|
-
{props.settingsType === "checkbox" && <
|
|
15
|
+
{props.settingsType === "checkbox" && <HawaCheckbox {...props} />}
|
|
17
16
|
{props.settingsType === "text" && <HawaTextField {...props} />}
|
|
18
17
|
{props.settingsType === "boolean" && <HawaSwitch {...props} />}
|
|
19
18
|
{props.settingsType === "range" && <HawaRange {...props} />}
|
|
@@ -21,7 +20,7 @@ export const HawaSettingsRow = (props) => {
|
|
|
21
20
|
{props.settingsType === "radio" && (
|
|
22
21
|
<HawaPanelTabs location="inSettings" {...props} />
|
|
23
22
|
)}
|
|
24
|
-
</
|
|
23
|
+
</div>
|
|
25
24
|
);
|
|
26
25
|
};
|
|
27
26
|
|
|
@@ -361,4 +361,4 @@
|
|
|
361
361
|
|
|
362
362
|
|
|
363
363
|
|
|
364
|
-
window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.
|
|
364
|
+
window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.db6a4c38.iframe.bundle.js"></script><script src="main.c2f37ee9.iframe.bundle.js"></script></body></html>
|