@sikka/hawa 0.0.7 → 0.0.8

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.
Files changed (43) hide show
  1. package/es/index.es.js +1 -1
  2. package/lib/index.js +1 -1
  3. package/package.json +2 -1
  4. package/src/blocks/AuthForms/NewPasswordForm.js +54 -38
  5. package/src/blocks/AuthForms/ResetPasswordForm.js +41 -25
  6. package/src/blocks/AuthForms/SignInForm.js +40 -7
  7. package/src/blocks/AuthForms/SignUpForm.js +30 -8
  8. package/src/blocks/Payment/PayWithWallet.js +1 -1
  9. package/src/blocks/Payment/SelectPayment.js +15 -18
  10. package/src/stories/BlocksStories/AuthForm.stories.js +5 -3
  11. package/src/stories/Introduction.stories.mdx +229 -0
  12. package/src/stories/UIStories/ActionButton.stories.js +15 -22
  13. package/src/stories/UIStories/AdaptiveButton.stories.js +43 -42
  14. package/src/stories/UIStories/LogoButtons.stories.js +90 -0
  15. package/src/themes/HawaProvider.js +7 -2
  16. package/src/ui/ActionButton.js +1 -3
  17. package/src/ui/AdaptiveButton.js +43 -159
  18. package/src/ui/HawaAlert.js +1 -1
  19. package/src/ui/HawaLogoButton.js +96 -1
  20. package/src/ui/HawaSettingsRow.js +2 -2
  21. package/src/ui/HawaTextField.js +1 -4
  22. package/src/ui/HawaTypography.js +1 -2
  23. package/src/ui/index.js +1 -14
  24. package/storybook-static/iframe.html +1 -1
  25. package/storybook-static/main.5731dbe3.iframe.bundle.js +1 -0
  26. package/storybook-static/vendors~main.aa1d952a.iframe.bundle.js +76 -0
  27. package/storybook-static/{vendors~main.8ebae370.iframe.bundle.js.LICENSE.txt → vendors~main.aa1d952a.iframe.bundle.js.LICENSE.txt} +0 -15
  28. package/storybook-static/vendors~main.aa1d952a.iframe.bundle.js.map +1 -0
  29. package/src/stories/GlobalVariables.stories.js +0 -44
  30. package/src/stories/Introduction.stories.js +0 -233
  31. package/src/ui/ApplePayButton.js +0 -26
  32. package/src/ui/GithubButton.js +0 -24
  33. package/src/ui/GoogleButton.js +0 -23
  34. package/src/ui/GooglePayButton.js +0 -26
  35. package/src/ui/MadaButton.js +0 -26
  36. package/src/ui/PayPalButton.js +0 -26
  37. package/src/ui/STCPayButton.js +0 -26
  38. package/src/ui/TwitterButton.js +0 -27
  39. package/src/ui/VisaMasterButton.js +0 -26
  40. package/src/ui/WalletButton.js +0 -24
  41. package/storybook-static/main.b7ffaed0.iframe.bundle.js +0 -1
  42. package/storybook-static/vendors~main.8ebae370.iframe.bundle.js +0 -76
  43. package/storybook-static/vendors~main.8ebae370.iframe.bundle.js.map +0 -1
@@ -41,21 +41,6 @@ object-assign
41
41
  * Released under the MIT License.
42
42
  */
43
43
 
44
- /*! *****************************************************************************
45
- Copyright (c) Microsoft Corporation.
46
-
47
- Permission to use, copy, modify, and/or distribute this software for any
48
- purpose with or without fee is hereby granted.
49
-
50
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
51
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
52
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
53
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
54
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
55
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
56
- PERFORMANCE OF THIS SOFTWARE.
57
- ***************************************************************************** */
58
-
59
44
  /** @license MUI v5.4.4
60
45
  *
61
46
  * This source code is licensed under the MIT license found in the
@@ -0,0 +1 @@
1
+ {"version":3,"file":"vendors~main.aa1d952a.iframe.bundle.js","sources":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A","sourceRoot":""}
@@ -1,44 +0,0 @@
1
- import React from "react";
2
- import PropTypes from "prop-types";
3
-
4
- export const GlobalVariables = (args) => {
5
- // const methods = useForm();
6
- return <div>TESTING COMPONENT</div>;
7
- };
8
- export const AnotherComponent = (args) => {
9
- // const methods = useForm();
10
- return <div>TESTING COMPONENT</div>;
11
- };
12
- AnotherComponent.propTypes = {
13
- textLabel: PropTypes.string
14
- };
15
- export default {
16
- title: "TestTitle",
17
- component: [GlobalVariables, AnotherComponent],
18
- argTypes: {
19
- resize: {
20
- description: "overwritten description",
21
- table: {
22
- type: {
23
- summary: "something short"
24
- },
25
- defaultValue: { summary: "Hello" }
26
- },
27
- options: ["vertical", "horizontal", "both"],
28
- control: { type: "select" }
29
- },
30
- label: {
31
- description: "overwritten description",
32
- table: {
33
- type: {
34
- summary: "something short",
35
- detail: "something really really long"
36
- },
37
- defaultValue: { summary: "Hello" }
38
- },
39
- control: {
40
- type: null
41
- }
42
- }
43
- }
44
- };
@@ -1,233 +0,0 @@
1
- import { Meta } from "@storybook/addon-docs";
2
- // import Code from "./assets/code-brackets.svg";
3
- // import Colors from "./assets/colors.svg";
4
- // import Comments from "./assets/comments.svg";
5
- // import Direction from "./assets/direction.svg";
6
- // import Flow from "./assets/flow.svg";
7
- // import Plugin from "./assets/plugin.svg";
8
- // import Repo from "./assets/repo.svg";
9
- // import StackAlt from "./assets/stackalt.svg";
10
-
11
- <Meta title="Example/Introduction" />;
12
-
13
- {
14
- /* <style>
15
- {`
16
- .subheading {
17
- --mediumdark: '#999999';
18
- font-weight: 900;
19
- font-size: 13px;
20
- color: #999;
21
- letter-spacing: 6px;
22
- line-height: 24px;
23
- text-transform: uppercase;
24
- margin-bottom: 12px;
25
- margin-top: 40px;
26
- }
27
-
28
- .link-list {
29
- display: grid;
30
- grid-template-columns: 1fr;
31
- grid-template-rows: 1fr 1fr;
32
- row-gap: 10px;
33
- }
34
-
35
- @media (min-width: 620px) {
36
- .link-list {
37
- row-gap: 20px;
38
- column-gap: 20px;
39
- grid-template-columns: 1fr 1fr;
40
- }
41
- }
42
-
43
- @media all and (-ms-high-contrast:none) {
44
- .link-list {
45
- display: -ms-grid;
46
- -ms-grid-columns: 1fr 1fr;
47
- -ms-grid-rows: 1fr 1fr;
48
- }
49
- }
50
-
51
- .link-item {
52
- display: block;
53
- padding: 20px 30px 20px 15px;
54
- border: 1px solid #00000010;
55
- border-radius: 5px;
56
- transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
57
- color: #333333;
58
- display: flex;
59
- align-items: flex-start;
60
- }
61
-
62
- .link-item:hover {
63
- border-color: #1EA7FD50;
64
- transform: translate3d(0, -3px, 0);
65
- box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
66
- }
67
-
68
- .link-item:active {
69
- border-color: #1EA7FD;
70
- transform: translate3d(0, 0, 0);
71
- }
72
-
73
- .link-item strong {
74
- font-weight: 700;
75
- display: block;
76
- margin-bottom: 2px;
77
- }
78
-
79
- .link-item img {
80
- height: 40px;
81
- width: 40px;
82
- margin-right: 15px;
83
- flex: none;
84
- }
85
-
86
- .link-item span {
87
- font-size: 14px;
88
- line-height: 20px;
89
- }
90
-
91
- .tip {
92
- display: inline-block;
93
- border-radius: 1em;
94
- font-size: 11px;
95
- line-height: 12px;
96
- font-weight: 700;
97
- background: #E7FDD8;
98
- color: #66BF3C;
99
- padding: 4px 12px;
100
- margin-right: 10px;
101
- vertical-align: top;
102
- }
103
-
104
- .tip-wrapper {
105
- font-size: 13px;
106
- line-height: 20px;
107
- margin-top: 40px;
108
- margin-bottom: 40px;
109
- }
110
-
111
- .tip-wrapper code {
112
- font-size: 12px;
113
- display: inline-block;
114
- }
115
-
116
-
117
- `}
118
- </style> */
119
- }
120
-
121
- // # Welcome to Storybook
122
-
123
- // Storybook helps you build UI components in isolation from your app's business logic, data, and context.
124
- // That makes it easy to develop hard - to - reach states.Save these UI states as ** stories ** to revisit during development, testing, or QA.
125
-
126
- // Browse example stories now by navigating to them in the sidebar.
127
- // View their code in the`src/stories` directory to learn how they work.
128
- // We recommend building UIs with a[** component - driven **](https://componentdriven.org) process starting with atomic components and ending with pages.
129
-
130
- <>
131
- <div className="subheading">Configure</div>
132
-
133
- <div className="link-list">
134
- <a
135
- className="link-item"
136
- href="https://storybook.js.org/docs/react/addons/addon-types"
137
- target="_blank"
138
- >
139
- {/* <img src={Plugin} alt="plugin" /> */}
140
- <span>
141
- <strong>Presets for popular tools</strong>
142
- Easy setup for TypeScript, SCSS and more.
143
- </span>
144
- </a>
145
- <a
146
- className="link-item"
147
- href="https://storybook.js.org/docs/react/configure/webpack"
148
- target="_blank"
149
- >
150
- {/* <img src={StackAlt} alt="Build" /> */}
151
- <span>
152
- <strong>Build configuration</strong>
153
- How to customize webpack and Babel
154
- </span>
155
- </a>
156
- <a
157
- className="link-item"
158
- href="https://storybook.js.org/docs/react/configure/styling-and-css"
159
- target="_blank"
160
- >
161
- {/* <img src={Colors} alt="colors" /> */}
162
- <span>
163
- <strong>Styling</strong>
164
- How to load and configure CSS libraries
165
- </span>
166
- </a>
167
- <a
168
- className="link-item"
169
- href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
170
- target="_blank"
171
- >
172
- {/* <img src={Flow} alt="flow" /> */}
173
- <span>
174
- <strong>Data</strong>
175
- Providers and mocking for data libraries
176
- </span>
177
- </a>
178
- </div>
179
-
180
- <div className="subheading">Learn</div>
181
-
182
- <div className="link-list">
183
- <a
184
- className="link-item"
185
- href="https://storybook.js.org/docs"
186
- target="_blank"
187
- >
188
- {/* <img src={Repo} alt="repo" /> */}
189
- <span>
190
- <strong>Storybook documentation</strong>
191
- Configure, customize, and extend
192
- </span>
193
- </a>
194
- <a
195
- className="link-item"
196
- href="https://storybook.js.org/tutorials/"
197
- target="_blank"
198
- >
199
- {/* <img src={Direction} alt="direction" /> */}
200
- <span>
201
- <strong>In-depth guides</strong>
202
- Best practices from leading teams
203
- </span>
204
- </a>
205
- <a
206
- className="link-item"
207
- href="https://github.com/storybookjs/storybook"
208
- target="_blank"
209
- >
210
- {/* <img src={Code} alt="code" /> */}
211
- <span>
212
- <strong>GitHub project</strong>
213
- View the source and add issues
214
- </span>
215
- </a>
216
- <a
217
- className="link-item"
218
- href="https://discord.gg/storybook"
219
- target="_blank"
220
- >
221
- {/* <img src={Comments} alt="comments" /> */}
222
- <span>
223
- <strong>Discord chat</strong>
224
- Chat with maintainers and the community
225
- </span>
226
- </a>
227
- </div>
228
-
229
- <div className="tip-wrapper">
230
- <span className="tip">Tip</span>Edit the Markdown in{" "}
231
- <code>src/stories/Introduction.stories.mdx</code>
232
- </div>
233
- </>;
@@ -1,26 +0,0 @@
1
- import React from "react";
2
- import { HawaLogoButton } from "./HawaLogoButton";
3
-
4
- export const ApplePayButton = (props) => {
5
- return (
6
- <HawaLogoButton {...props}>
7
- <img
8
- src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/apple-pay.png"
9
- height={40}
10
- />{" "}
11
- <div style={{ width: 10 }} />
12
- <p
13
- style={{
14
- color: "black",
15
- fontSize: 14,
16
- textAlign: "center",
17
- letterSpacing: 0.4,
18
- fontFamily: "Roboto",
19
- fontWeight: 500
20
- }}
21
- >
22
- {props.buttonText}
23
- </p>
24
- </HawaLogoButton>
25
- );
26
- };
@@ -1,24 +0,0 @@
1
- import React from "react";
2
- import GitHubIcon from "@mui/icons-material/GitHub";
3
- import { HawaLogoButton } from "./HawaLogoButton";
4
-
5
- export const GithubButton = (props) => {
6
- return (
7
- <HawaLogoButton {...props}>
8
- <GitHubIcon />
9
- <div style={{ width: 10 }} />
10
- <p
11
- style={{
12
- color: "black",
13
- fontSize: 14,
14
- textAlign: "center",
15
- letterSpacing: 0.4,
16
- fontFamily: "Roboto",
17
- fontWeight: 500
18
- }}
19
- >
20
- {props.buttonText}
21
- </p>
22
- </HawaLogoButton>
23
- );
24
- };
@@ -1,23 +0,0 @@
1
- import React from "react";
2
- import { HawaLogoButton } from "./HawaLogoButton";
3
-
4
- export const GoogleButton = (props) => {
5
- return (
6
- <HawaLogoButton {...props}>
7
- <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" />
8
- <div style={{ width: 10 }} />
9
- <p
10
- style={{
11
- color: "black",
12
- fontSize: 14,
13
- textAlign: "center",
14
- letterSpacing: 0.4,
15
- fontFamily: "Roboto",
16
- fontWeight: 500
17
- }}
18
- >
19
- {props.buttonText}
20
- </p>
21
- </HawaLogoButton>
22
- );
23
- };
@@ -1,26 +0,0 @@
1
- import React from "react";
2
- import { HawaLogoButton } from "./HawaLogoButton";
3
-
4
- export const GooglePayButton = (props) => {
5
- return (
6
- <HawaLogoButton {...props}>
7
- <img
8
- src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/google-pay.png"
9
- height={20}
10
- />
11
- <div style={{ width: 10 }} />
12
- <p
13
- style={{
14
- color: "black",
15
- fontSize: 14,
16
- textAlign: "center",
17
- letterSpacing: 0.4,
18
- fontFamily: "Roboto",
19
- fontWeight: 500
20
- }}
21
- >
22
- {props.buttonText}
23
- </p>
24
- </HawaLogoButton>
25
- );
26
- };
@@ -1,26 +0,0 @@
1
- import React from "react";
2
- import { HawaLogoButton } from "./HawaLogoButton";
3
-
4
- export const MadaButton = (props) => {
5
- return (
6
- <HawaLogoButton {...props}>
7
- <img
8
- src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/mada.png"
9
- height={20}
10
- />{" "}
11
- <div style={{ width: 10 }} />
12
- <p
13
- style={{
14
- color: "black",
15
- fontSize: 14,
16
- textAlign: "center",
17
- letterSpacing: 0.4,
18
- fontFamily: "Roboto",
19
- fontWeight: 500
20
- }}
21
- >
22
- {props.buttonText}
23
- </p>
24
- </HawaLogoButton>
25
- );
26
- };
@@ -1,26 +0,0 @@
1
- import React from "react";
2
- import { HawaLogoButton } from "./HawaLogoButton";
3
-
4
- export const PayPalButton = (props) => {
5
- return (
6
- <HawaLogoButton {...props}>
7
- <img
8
- src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/paypal.png"
9
- height={25}
10
- />{" "}
11
- <div style={{ width: 10 }} />
12
- <p
13
- style={{
14
- color: "black",
15
- fontSize: 14,
16
- textAlign: "center",
17
- letterSpacing: 0.4,
18
- fontFamily: "Roboto",
19
- fontWeight: 500
20
- }}
21
- >
22
- {props.buttonText}
23
- </p>
24
- </HawaLogoButton>
25
- );
26
- };
@@ -1,26 +0,0 @@
1
- import React from "react";
2
- import { HawaLogoButton } from "./HawaLogoButton";
3
-
4
- export const STCPayButton = (props) => {
5
- return (
6
- <HawaLogoButton {...props}>
7
- <img
8
- src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/stc-pay.png"
9
- height={20}
10
- />
11
- <div style={{ width: 10 }} />
12
- <p
13
- style={{
14
- color: "black",
15
- fontSize: 14,
16
- textAlign: "center",
17
- letterSpacing: 0.4,
18
- fontFamily: "Roboto",
19
- fontWeight: 500
20
- }}
21
- >
22
- {props.buttonText}
23
- </p>
24
- </HawaLogoButton>
25
- );
26
- };
@@ -1,27 +0,0 @@
1
- import React, { useContext } from "react";
2
- import { ThemeProvider } from "../themes/HawaProvider";
3
- import TwitterIcon from "@mui/icons-material/Twitter";
4
- import Button from "@mui/material/Button";
5
- import { styled, alpha, darken } from "@mui/material/styles";
6
- import { HawaLogoButton } from "./HawaLogoButton";
7
-
8
- export const TwitterButton = (props) => {
9
- return (
10
- <HawaLogoButton {...props}>
11
- <TwitterIcon />
12
- <div style={{ width: 10 }} />
13
- <p
14
- style={{
15
- color: "black",
16
- fontSize: 14,
17
- textAlign: "center",
18
- letterSpacing: 0.4,
19
- fontFamily: "Roboto",
20
- fontWeight: 500
21
- }}
22
- >
23
- {props.buttonText}
24
- </p>
25
- </HawaLogoButton>
26
- );
27
- };
@@ -1,26 +0,0 @@
1
- import React from "react";
2
- import { HawaLogoButton } from "./HawaLogoButton";
3
-
4
- export const VisaMasterButton = (props) => {
5
- return (
6
- <HawaLogoButton {...props}>
7
- <img
8
- src="https://sikka-images.s3.ap-southeast-1.amazonaws.com/payments/visa-master.png"
9
- height={30}
10
- />{" "}
11
- <div style={{ width: 10 }} />
12
- <p
13
- style={{
14
- color: "black",
15
- fontSize: 14,
16
- textAlign: "center",
17
- letterSpacing: 0.4,
18
- fontFamily: "Roboto",
19
- fontWeight: 500
20
- }}
21
- >
22
- {props.buttonText}
23
- </p>
24
- </HawaLogoButton>
25
- );
26
- };
@@ -1,24 +0,0 @@
1
- import React from "react";
2
- import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
3
- import { HawaLogoButton } from "./HawaLogoButton";
4
-
5
- export const WalletButton = (props) => {
6
- return (
7
- <HawaLogoButton {...props}>
8
- <WalletIcon />
9
- <div style={{ width: 10 }} />
10
- <p
11
- style={{
12
- color: "black",
13
- fontSize: 14,
14
- textAlign: "center",
15
- letterSpacing: 0.4,
16
- fontFamily: "Roboto",
17
- fontWeight: 500
18
- }}
19
- >
20
- {props.buttonText}
21
- </p>
22
- </HawaLogoButton>
23
- );
24
- };