@sikka/hawa 0.0.80 → 0.0.81

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 (5) hide show
  1. package/es/index.es.js +1 -1
  2. package/lib/index.js +1 -1
  3. package/package.json +1 -1
  4. package/src/blocks/AuthForms/SignUpForm.js +116 -75
  5. package/src/elements/HawaCheckbox.js +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.0.80",
3
+ "version": "0.0.81",
4
4
  "description": "UI Kit",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.es.js",
package/src/blocks/AuthForms/SignUpForm.js CHANGED
@@ -3,7 +3,8 @@ import {
3
3
  HawaTextField,
4
4
  HawaLogoButton,
5
5
  HawaAlert,
6
- HawaButton
6
+ HawaButton,
7
+ HawaCheckbox
7
8
  } from "../../elements";
8
9
  import PropTypes from "prop-types";
9
10
  import { Controller, FormProvider, useForm } from "react-hook-form";
@@ -19,84 +20,124 @@ export const SignUpForm = (props) => {
19
20
 
20
21
  return (
21
22
  <HawaContainer withDividers>
22
- {props.showError && (
23
- <HawaAlert
24
- title={props.errorTitle}
25
- text={props.errorText}
26
- severity="error"
27
- />
28
- )}
29
- <FormProvider {...methods}>
30
- <form onSubmit={handleSubmit(props.handleSignUp)}>
31
- <Controller
32
- control={control}
33
- name="fullName"
34
- render={({ field }) => (
35
- <HawaTextField
36
- fullWidth
37
- type="text"
38
- value={field.value ?? ""}
39
- label={props.texts.fullNameLabel}
40
- placeholder={props.texts.fullNamePlaceholder}
41
- helperText={errors.fullName?.message}
42
- {...field}
43
- />
44
- )}
45
- rules={{
46
- required: props.texts.fullNameRequiredText
47
- }}
23
+ <div>
24
+ {props.showError && (
25
+ <HawaAlert
26
+ title={props.errorTitle}
27
+ text={props.errorText}
28
+ severity="error"
48
29
  />
49
- <Controller
50
- control={control}
51
- name="email"
52
- render={({ field }) => (
53
- <HawaTextField
54
- fullWidth
55
- type="text"
56
- value={field.value ?? ""}
57
- label={props.texts.emailLabel}
58
- helperText={errors.email?.message}
59
- placeholder={props.texts.emailPlaceholder}
60
- {...field}
30
+ )}
31
+ <FormProvider {...methods}>
32
+ <form onSubmit={handleSubmit(props.handleSignUp)}>
33
+ <Controller
34
+ control={control}
35
+ name="fullName"
36
+ render={({ field }) => (
37
+ <HawaTextField
38
+ fullWidth
39
+ type="text"
40
+ value={field.value ?? ""}
41
+ label={props.texts.fullNameLabel}
42
+ placeholder={props.texts.fullNamePlaceholder}
43
+ helperText={errors.fullName?.message}
44
+ {...field}
45
+ />
46
+ )}
47
+ rules={{
48
+ required: props.texts.fullNameRequiredText
49
+ }}
50
+ />
51
+ <Controller
52
+ control={control}
53
+ name="email"
54
+ render={({ field }) => (
55
+ <HawaTextField
56
+ fullWidth
57
+ type="text"
58
+ value={field.value ?? ""}
59
+ label={props.texts.emailLabel}
60
+ helperText={errors.email?.message}
61
+ placeholder={props.texts.emailPlaceholder}
62
+ {...field}
63
+ />
64
+ )}
65
+ rules={{
66
+ required: props.texts.emailRequiredText,
67
+ pattern: {
68
+ value:
69
+ /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
70
+ message: props.texts.emailInvalidText
71
+ }
72
+ }}
73
+ />
74
+ <Controller
75
+ control={control}
76
+ name="password"
77
+ render={({ field }) => (
78
+ <HawaTextField
79
+ fullWidth
80
+ type="password"
81
+ defaultValue={field.value ?? ""}
82
+ value={field.value ?? ""}
83
+ label={props.texts.passwordLabel}
84
+ placeholder={props.texts.passwordPlaceholder}
85
+ helperText={errors.password?.message}
86
+ {...field}
87
+ />
88
+ )}
89
+ rules={{ required: props.texts.passwordRequiredText }}
90
+ />
91
+ {props.showRefCode && (
92
+ <Controller
93
+ control={control}
94
+ name="password"
95
+ render={({ field }) => (
96
+ <HawaTextField
97
+ fullWidth
98
+ type="text"
99
+ defaultValue={field.value ?? ""}
100
+ value={field.value ?? ""}
101
+ label={"Ref Code"}
102
+ placeholder={props.texts.passwordPlaceholder}
103
+ helperText={errors.password?.message}
104
+ {...field}
105
+ />
106
+ )}
107
+ rules={{ required: props.texts.passwordRequiredText }}
61
108
  />
62
109
  )}
63
- rules={{
64
- required: props.texts.emailRequiredText,
65
- pattern: {
66
- value:
67
- /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
68
- message: props.texts.emailInvalidText
69
- }
70
- }}
71
- />
72
- <Controller
73
- control={control}
74
- name="password"
75
- render={({ field }) => (
76
- <HawaTextField
77
- fullWidth
78
- type="password"
79
- defaultValue={field.value ?? ""}
80
- value={field.value ?? ""}
81
- label={props.texts.passwordLabel}
82
- placeholder={props.texts.passwordPlaceholder}
83
- helperText={errors.password?.message}
84
- {...field}
85
- />
110
+ {props.showTermsOption && (
111
+ <div className="py-2">
112
+ <HawaCheckbox
113
+ label={
114
+ <span>
115
+ I accept the{" "}
116
+ <a className="cursor-pointer text-blue-800">
117
+ terms and conditions
118
+ </a>
119
+ </span>
120
+ }
121
+ />
122
+ </div>
86
123
  )}
87
- rules={{ required: props.texts.passwordRequiredText }}
88
- />
89
- <HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
90
- </form>
91
- </FormProvider>
92
- <div className="font-semibold p-3 text-center text-sm">
93
- {props.texts.existingUserText}{" "}
94
- <span
95
- onClick={props.handleRouteToSignIn}
96
- className="text-blue-600 cursor-pointer"
97
- >
98
- {props.texts.signInText}
99
- </span>
124
+ {props.showNewletterOption && (
125
+ <div className="py-2">
126
+ <HawaCheckbox label="Subscribe to newsletter?" />
127
+ </div>
128
+ )}
129
+ <HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
130
+ </form>
131
+ </FormProvider>
132
+ <div className="font-semibold p-3 text-center text-sm">
133
+ {props.texts.existingUserText}{" "}
134
+ <span
135
+ onClick={props.handleRouteToSignIn}
136
+ className="text-blue-600 cursor-pointer"
137
+ >
138
+ {props.texts.signInText}
139
+ </span>
140
+ </div>
100
141
  </div>
101
142
  {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
102
143
  <div style={{ display: "flex", flexDirection: "column" }}>
package/src/elements/HawaCheckbox.js CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
 
3
3
  export const HawaCheckbox = (props) => {
4
4
  return (
5
- <div className="flex items-center h-full p-2">
5
+ <div className="flex items-center h-full">
6
6
  <input
7
7
  type="checkbox"
8
8
  value=""