@sikka/hawa 0.0.15 → 0.0.18

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 (66) hide show
  1. package/.github/workflows/hawa-publish-push.yml +1 -0
  2. package/es/index.es.js +1 -1
  3. package/lib/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/blocks/Account/UserProfileForm.js +79 -43
  6. package/src/blocks/Account/UserSettingsForm.js +7 -2
  7. package/src/blocks/AuthForms/SignInForm.js +5 -1
  8. package/src/blocks/AuthForms/SignUpForm.js +6 -2
  9. package/src/blocks/Payment/ChargeWalletForm.js +29 -20
  10. package/src/elements/HawaAlert.js +1 -24
  11. package/src/elements/HawaTable.js +39 -0
  12. package/src/elements/HawaTypography.js +0 -19
  13. package/src/elements/OfflineBanner.js +20 -0
  14. package/src/elements/index.js +2 -0
  15. package/src/layout/HawaDialog.js +45 -0
  16. package/src/layout/index.js +1 -0
  17. package/storybook-static/{0.f47eb24a4893a96ec307.manager.bundle.js → 0.42b12e88e2d7c13fc83c.manager.bundle.js} +1 -1
  18. package/storybook-static/{4.0fcda1281dc1961dbe94.manager.bundle.js → 4.6efb4495a449edfbd0b0.manager.bundle.js} +2 -2
  19. package/storybook-static/{4.0fcda1281dc1961dbe94.manager.bundle.js.LICENSE.txt → 4.6efb4495a449edfbd0b0.manager.bundle.js.LICENSE.txt} +0 -0
  20. package/storybook-static/{5.63ab4f94d50a3acf080d.manager.bundle.js → 5.fdf5c7287259585b43a3.manager.bundle.js} +1 -1
  21. package/storybook-static/{6.704d1e8d.iframe.bundle.js → 6.19c48a8c.iframe.bundle.js} +1 -1
  22. package/storybook-static/{6.a6d45262f7e98f3f18d3.manager.bundle.js → 6.8f7b9049856bdace5643.manager.bundle.js} +2 -2
  23. package/storybook-static/{6.a6d45262f7e98f3f18d3.manager.bundle.js.LICENSE.txt → 6.8f7b9049856bdace5643.manager.bundle.js.LICENSE.txt} +0 -0
  24. package/storybook-static/{7.097710753af9a1c41b80.manager.bundle.js → 7.dfc01154563c92ef9ccf.manager.bundle.js} +1 -1
  25. package/storybook-static/{8.76c3cbf398692028e834.manager.bundle.js → 8.c1928a9f13347c159613.manager.bundle.js} +1 -1
  26. package/storybook-static/iframe.html +1 -1
  27. package/storybook-static/index.html +1 -1
  28. package/storybook-static/main.c1b22dad.iframe.bundle.js +1 -0
  29. package/storybook-static/main.d9e1c87c8c22202eed3c.manager.bundle.js +1 -0
  30. package/storybook-static/{runtime~main.c8dac23bc753439736f0.manager.bundle.js → runtime~main.1373976137528887a7ad.manager.bundle.js} +1 -1
  31. package/storybook-static/{runtime~main.f1ebae9b.iframe.bundle.js → runtime~main.2c77505f.iframe.bundle.js} +1 -1
  32. package/storybook-static/vendors~main.41b22d5a0c6132a028f1.manager.bundle.js +2 -0
  33. package/storybook-static/{vendors~main.a697e07137d366f95f76.manager.bundle.js.LICENSE.txt → vendors~main.41b22d5a0c6132a028f1.manager.bundle.js.LICENSE.txt} +0 -0
  34. package/storybook-static/vendors~main.78f2cf4f.iframe.bundle.js +76 -0
  35. package/storybook-static/{vendors~main.b4186832.iframe.bundle.js.LICENSE.txt → vendors~main.78f2cf4f.iframe.bundle.js.LICENSE.txt} +0 -0
  36. package/storybook-static/vendors~main.78f2cf4f.iframe.bundle.js.map +1 -0
  37. package/src/stories/BlocksStories/Account/UserProfile.stories.js +0 -21
  38. package/src/stories/BlocksStories/Account/UserSettings.stories.js +0 -55
  39. package/src/stories/BlocksStories/Auth/NewPassword.stories.js +0 -61
  40. package/src/stories/BlocksStories/Auth/ResetPassword.stories.js +0 -58
  41. package/src/stories/BlocksStories/Auth/SignIn.stories.js +0 -89
  42. package/src/stories/BlocksStories/Auth/SignUp.stories.js +0 -91
  43. package/src/stories/BlocksStories/Payment/ChargeWallet.stories.js +0 -30
  44. package/src/stories/BlocksStories/Payment/PayWithCreditCard.stories.js +0 -37
  45. package/src/stories/BlocksStories/Payment/PayWithWallet.stories.js +0 -17
  46. package/src/stories/BlocksStories/Payment/PaymentSelection.stories.js +0 -60
  47. package/src/stories/BlocksStories/Pricing/BillingPlans.stories.js +0 -63
  48. package/src/stories/BlocksStories/Pricing/LandingPlans.stories.js +0 -63
  49. package/src/stories/ElementsStories/AdaptiveButton.stories.js +0 -51
  50. package/src/stories/ElementsStories/Alert.stories.js +0 -41
  51. package/src/stories/ElementsStories/InputLabel.stories.js +0 -13
  52. package/src/stories/ElementsStories/ItemCard.stories.js +0 -18
  53. package/src/stories/ElementsStories/LogoButtons.stories.js +0 -73
  54. package/src/stories/ElementsStories/PricingCard.stories.js +0 -91
  55. package/src/stories/ElementsStories/RadioSelector.stories.js +0 -36
  56. package/src/stories/ElementsStories/SettingsRow.stories.js +0 -63
  57. package/src/stories/ElementsStories/TextField.stories.js +0 -49
  58. package/src/stories/Introduction.stories.mdx +0 -229
  59. package/src/stories/LayoutStories/AppBar.stories.js +0 -29
  60. package/src/stories/LayoutStories/AppLayout.stories.js +0 -52
  61. package/src/stories/LayoutStories/Box.stories.js +0 -36
  62. package/storybook-static/main.66955578.iframe.bundle.js +0 -1
  63. package/storybook-static/main.ac6e4b72b033097dad76.manager.bundle.js +0 -1
  64. package/storybook-static/vendors~main.a697e07137d366f95f76.manager.bundle.js +0 -2
  65. package/storybook-static/vendors~main.b4186832.iframe.bundle.js +0 -76
  66. package/storybook-static/vendors~main.b4186832.iframe.bundle.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"vendors~main.78f2cf4f.iframe.bundle.js","sources":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A","sourceRoot":""}
@@ -1,21 +0,0 @@
1
- import React from "react";
2
- import { UserProfileForm } from "../../../blocks/Account";
3
-
4
- export default {
5
- title: "Blocks/Account/User Profile",
6
- component: [UserProfile],
7
- argTypes: {}
8
- };
9
-
10
- const ProfileTemplate = (args) => {
11
- return <UserProfileForm {...args} />;
12
- };
13
- export const UserProfile = ProfileTemplate.bind({});
14
- UserProfile.args = {
15
- viaGoogle: true,
16
- viaGithub: true,
17
- viaTwitter: true,
18
- showError: false,
19
- errorTitle: "Error",
20
- errorText: "Something went wrong"
21
- };
@@ -1,55 +0,0 @@
1
- import React from "react";
2
- import { UserSettingsForm } from "../../../blocks/Account";
3
- import { HawaSettingsRow } from "../../../elements";
4
-
5
- export default {
6
- title: "Blocks/Account/User Settings",
7
- component: UserSettingsForm,
8
- argTypes: {
9
- theme: {
10
- options: ["primary", "secondary", "default"],
11
- control: { type: "select" }
12
- }
13
- }
14
- };
15
- export const UserSettings = (args) => {
16
- return (
17
- <UserSettingsForm {...args}>
18
- <HawaSettingsRow settingsType="checkbox" settingsLabel="Hide Watermark" />
19
- <HawaSettingsRow
20
- settingsType="text"
21
- placeholder="Your handle"
22
- settingsLabel="Custom Handle"
23
- />
24
- <HawaSettingsRow
25
- handleChange={(e) => console.log("changing to ", e)}
26
- settingsType="radio"
27
- defaultValue="sar"
28
- options={[
29
- { value: "sar", label: "SAR" },
30
- { value: "usd", label: "USD" }
31
- ]}
32
- settingsLabel="Currency"
33
- />
34
- <HawaSettingsRow
35
- handleChange={(e) => console.log("changing to ", e)}
36
- settingsType="radio"
37
- defaultValue="en"
38
- options={[
39
- { value: "en", label: "English" },
40
- { value: "ar", label: "Arabic" }
41
- ]}
42
- settingsLabel="Language"
43
- />
44
- <HawaSettingsRow
45
- settingsType="boolean"
46
- placeholder="Your handle"
47
- settingsLabel="Show Analytics"
48
- />
49
- </UserSettingsForm>
50
- );
51
- };
52
- UserSettings.args = {
53
- theme: "primary",
54
- title: "red"
55
- };
@@ -1,61 +0,0 @@
1
- import React from "react";
2
- import { NewPasswordForm } from "../../../blocks/AuthForms";
3
-
4
- export default {
5
- title: "Blocks/Auth/New Password",
6
- component: [NewPasswordForm],
7
- argTypes: {
8
- showError: {
9
- default: false,
10
- control: "boolean",
11
- description: "Display the error when auth fails",
12
- table: { defaultValue: { summary: true } }
13
- },
14
- errorTitle: {
15
- default: " ",
16
- control: "text",
17
- description: "The error text for the auth failure",
18
- table: { defaultValue: { summary: "" } }
19
- },
20
- errorText: {
21
- default: "Something went wrong",
22
- control: "text",
23
- description: "The error text for the auth failure",
24
- table: { defaultValue: { summary: "Something went wrong" } }
25
- }
26
- }
27
- };
28
-
29
- const NewPasswordTemplate = (args) => {
30
- return (
31
- <NewPasswordForm
32
- {...args}
33
- texts={{
34
- emailLabel: "Email",
35
- emailPlaceholder: "Enter your email",
36
- emailRequiredText: "Email is required",
37
- passwordPlaceholder: "Enter password",
38
- updatePassword: "Update Password",
39
- passwordRequiredText: "Password is required",
40
- passwordLabel: "Choose new password",
41
- confirmPasswordPlaceholder: "Confirm password",
42
- confirmPasswordLabel: "Confirm",
43
- confirmPasswordRequiredText: "Confirmation is required",
44
- passwordMatchError: "Password doesn't match",
45
- forgotPasswordText: "Forgot password?",
46
- newUserText: "New user?",
47
- signUpText: "Sign up",
48
- signInText: "Sign in",
49
- googleButtonLabel: "Sign in with Google",
50
- githubButtonLabel: "Sign in with Github",
51
- twitterButtonLabel: "Sign in with Twitter"
52
- }}
53
- error={args.showError}
54
- />
55
- );
56
- };
57
- export const NewPassword = NewPasswordTemplate.bind({});
58
- NewPassword.args = {
59
- showError: false,
60
- passwordChanged: false
61
- };
@@ -1,58 +0,0 @@
1
- import React from "react";
2
- import { ResetPasswordForm } from "../../../blocks/AuthForms";
3
-
4
- export default {
5
- title: "Blocks/Auth/Reset Password",
6
- component: [ResetPasswordForm],
7
- argTypes: {
8
- showError: {
9
- default: false,
10
- control: "boolean",
11
- description: "Display the error when auth fails",
12
- table: { defaultValue: { summary: true } }
13
- },
14
- errorTitle: {
15
- default: " ",
16
- control: "text",
17
- description: "The error text for the auth failure",
18
- table: { defaultValue: { summary: "" } }
19
- },
20
- errorText: {
21
- default: "Something went wrong",
22
- control: "text",
23
- description: "The error text for the auth failure",
24
- table: { defaultValue: { summary: "Something went wrong" } }
25
- }
26
- }
27
- };
28
-
29
- const ResetPasswordTemplate = (args) => {
30
- return (
31
- <ResetPasswordForm
32
- error={args.showError}
33
- texts={{
34
- emailLabel: "Email",
35
- emailPlaceholder: "Enter your email",
36
- emailRequiredText: "Email is required",
37
- emailInvalidText: "Invalid email address",
38
- passwordLabel: "Password",
39
- resetPassword: "Reset Password",
40
- passwordRequiredText: "Password is required",
41
- forgotPasswordText: "Forgot password?",
42
- newUserText: "New user?",
43
- signUpText: "Sign up",
44
- signInText: "Sign in",
45
- googleButtonLabel: "Sign in with Google",
46
- githubButtonLabel: "Sign in with Github",
47
- twitterButtonLabel: "Sign in with Twitter"
48
- }}
49
- {...args}
50
- handleResetPassword={(e) => console.log("resetting password,", e)}
51
- />
52
- );
53
- };
54
- export const ResetPassword = ResetPasswordTemplate.bind({});
55
- ResetPassword.args = {
56
- showError: false,
57
- sent: false
58
- };
@@ -1,89 +0,0 @@
1
- import React from "react";
2
- import { SignInForm } from "../../../blocks/AuthForms";
3
-
4
- export default {
5
- title: "Blocks/Auth/Sign In",
6
- component: [SignInForm],
7
- argTypes: {
8
- viaGoogle: {
9
- default: true,
10
- control: "boolean",
11
- description: "Display the sign in via Google button",
12
- table: { defaultValue: { summary: true } }
13
- },
14
- viaTwitter: {
15
- default: true,
16
- control: "boolean",
17
- description: "Display the sign in via Twitter button",
18
- table: { defaultValue: { summary: true } }
19
- },
20
- viaGithub: {
21
- default: true,
22
- control: "boolean",
23
- description: "Display the sign in via Github button",
24
- table: { defaultValue: { summary: true } }
25
- },
26
- showError: {
27
- default: false,
28
- control: "boolean",
29
- description: "Display the error when auth fails",
30
- table: { defaultValue: { summary: true } }
31
- },
32
- errorTitle: {
33
- default: " ",
34
- control: "text",
35
- description: "The error text for the auth failure",
36
- table: { defaultValue: { summary: "" } }
37
- },
38
- errorText: {
39
- default: "Something went wrong",
40
- control: "text",
41
- description: "The error text for the auth failure",
42
- table: { defaultValue: { summary: "Something went wrong" } }
43
- }
44
- }
45
- };
46
-
47
- const SignInTemplate = (args) => {
48
- return (
49
- <SignInForm
50
- {...args}
51
- error={args.showError}
52
- texts={{
53
- emailLabel: "Email",
54
- emailPlaceholder: "Enter your email",
55
- emailRequiredText: "Email is required",
56
- emailInvalidText: "Invalid email address",
57
- passwordLabel: "Password",
58
- passwordPlaceholder: "Enter password",
59
- passwordRequiredText: "Password is required",
60
- forgotPasswordText: "Forgot password?",
61
- newUserText: "New user?",
62
- signUpText: "Sign up",
63
- signInText: "Sign in",
64
- googleButtonLabel: "Sign in with Google",
65
- githubButtonLabel: "Sign in with Github",
66
- twitterButtonLabel: "Sign in with Twitter"
67
- }}
68
- handleSignIn={(e) => console.log("singing in via email", e)}
69
- handleForgotPassword={() => console.log("user forgot password")}
70
- handleGoogleSignIn={() => console.log("signing in via google")}
71
- handleGithubSignIn={() => console.log("signing in via github")}
72
- handleTwitterSignIn={() => console.log("signing in via Twitter")}
73
- handleRouteToSignUp={() => console.log("switching to sign up")}
74
- viaGoogle={args.viaGoogle}
75
- viaGithub={args.viaGithub}
76
- viaTwitter={args.viaTwitter}
77
- />
78
- );
79
- };
80
-
81
- export const SignIn = SignInTemplate.bind({});
82
- SignIn.args = {
83
- viaGoogle: true,
84
- viaGithub: true,
85
- viaTwitter: true,
86
- showError: false,
87
- errorTitle: "Error",
88
- errorText: "Something went wrong"
89
- };
@@ -1,91 +0,0 @@
1
- import React from "react";
2
- import { SignUpForm } from "../../../blocks/AuthForms";
3
-
4
- export default {
5
- title: "Blocks/Auth/Sign Up",
6
- component: [SignUpForm],
7
- argTypes: {
8
- viaGoogle: {
9
- default: true,
10
- control: "boolean",
11
- description: "Display the sign in via Google button",
12
- table: { defaultValue: { summary: true } }
13
- },
14
- viaTwitter: {
15
- default: true,
16
- control: "boolean",
17
- description: "Display the sign in via Twitter button",
18
- table: { defaultValue: { summary: true } }
19
- },
20
- viaGithub: {
21
- default: true,
22
- control: "boolean",
23
- description: "Display the sign in via Github button",
24
- table: { defaultValue: { summary: true } }
25
- },
26
- showError: {
27
- default: false,
28
- control: "boolean",
29
- description: "Display the error when auth fails",
30
- table: { defaultValue: { summary: true } }
31
- },
32
- errorTitle: {
33
- default: " ",
34
- control: "text",
35
- description: "The error text for the auth failure",
36
- table: { defaultValue: { summary: "" } }
37
- },
38
- errorText: {
39
- default: "Something went wrong",
40
- control: "text",
41
- description: "The error text for the auth failure",
42
- table: { defaultValue: { summary: "Something went wrong" } }
43
- }
44
- }
45
- };
46
-
47
- const SignUpTemplate = (args) => {
48
- return (
49
- <SignUpForm
50
- {...args}
51
- texts={{
52
- fullNameLabel: "Full Name",
53
- fullNamePlaceholder: "Fulan AlFulani",
54
- fullNameRequiredText: "Full Name is required",
55
- emailLabel: "Email",
56
- emailPlaceholder: "Enter your email",
57
- emailRequiredText: "Email is required",
58
- emailInvalidText: "Invalid email address",
59
- passwordLabel: "Password",
60
- passwordPlaceholder: "Minimum 8 characters",
61
- passwordRequiredText: "Password is required",
62
- passwordTooShortText: "Password too short",
63
- forgotPasswordText: "Forgot password?",
64
- newUserText: "New user?",
65
- signUpText: "Sign up",
66
- signInText: "Sign in",
67
- googleButtonLabel: "Sign in with Google",
68
- githubButtonLabel: "Sign in with Github",
69
- twitterButtonLabel: "Sign in with Twitter"
70
- }}
71
- error={args.showError}
72
- viaGoogle={args.viaGoogle}
73
- viaGithub={args.viaGithub}
74
- viaTwitter={args.viaTwitter}
75
- handleSignUp={() => console.log("singing up via email")}
76
- handleGoogleSignUp={() => console.log("signing up via google")}
77
- handleGithubSignUp={() => console.log("signing up via github")}
78
- handleTwitterSignUp={() => console.log("signing up via Twitter")}
79
- handleRouteToSignIn={() => console.log("switching to sign in")}
80
- />
81
- );
82
- };
83
- export const SignUp = SignUpTemplate.bind({});
84
- SignUp.args = {
85
- viaGoogle: true,
86
- viaGithub: true,
87
- viaTwitter: true,
88
- showError: false,
89
- errorTitle: "Error",
90
- errorText: "Something went wrong"
91
- };
@@ -1,30 +0,0 @@
1
- import React from "react";
2
- import { ChargeWalletForm } from "../../../blocks/Payment";
3
-
4
- export default {
5
- title: "Blocks/Payment/Charge Wallet",
6
- component: [ChargeWalletForm],
7
- argTypes: {
8
- viaWallet: { control: "boolean" },
9
- viaApplePay: { control: "boolean" },
10
- viaGooglePay: { control: "boolean" },
11
- viaSTCPay: { control: "boolean" },
12
- viaCreditCard: { control: "boolean" },
13
- viaPayPal: { control: "boolean" }
14
- },
15
- args: {
16
- viaWallet: true,
17
- viaMada: true,
18
- viaApplePay: true,
19
- viaGooglePay: true,
20
- viaSTCPay: true,
21
- viaCreditCard: true,
22
- viaPayPal: true
23
- }
24
- };
25
-
26
- export const ChargeWallet = (args) => {
27
- return <ChargeWalletForm {...args} />;
28
- };
29
-
30
- ChargeWallet.args = { currency: "SAR" };
@@ -1,37 +0,0 @@
1
- import React from "react";
2
- import { CreditCardForm } from "../../../blocks/Payment";
3
-
4
- export default {
5
- title: "Blocks/Payment/Pay Via Credit Card",
6
- component: [CreditCardForm],
7
- argTypes: {
8
- theme: {
9
- options: ["primary", "secondary", "default"],
10
- control: { type: "select" }
11
- },
12
- viaWallet: { control: "boolean" },
13
- viaApplePay: { control: "boolean" },
14
- viaGooglePay: { control: "boolean" },
15
- viaSTCPay: { control: "boolean" },
16
- viaCreditCard: { control: "boolean" },
17
- viaPayPal: { control: "boolean" }
18
- },
19
- args: {
20
- theme: "primary",
21
- viaWallet: true,
22
- viaMada: true,
23
- viaApplePay: true,
24
- viaGooglePay: true,
25
- viaSTCPay: true,
26
- viaCreditCard: true,
27
- viaPayPal: true
28
- }
29
- };
30
-
31
- export const PayViaCreditCard = (args) => {
32
- return <CreditCardForm theme={args.theme} />;
33
- };
34
-
35
- PayViaCreditCard.args = {
36
- theme: "secondary"
37
- };
@@ -1,17 +0,0 @@
1
- import React from "react";
2
- import { PayWithWallet } from "../../../blocks/Payment";
3
-
4
- export default {
5
- title: "Blocks/Payment/Pay Via Wallet",
6
- component: [PayWithWallet],
7
- argTypes: {
8
- walletBalance: { control: "number" }
9
- },
10
- args: {
11
- walletBalance: 20
12
- }
13
- };
14
-
15
- export const PayViaWallet = (args) => {
16
- return <PayWithWallet {...args} />;
17
- };
@@ -1,60 +0,0 @@
1
- import React from "react";
2
- import { SelectPayment } from "../../../blocks/Payment";
3
-
4
- export default {
5
- title: "Blocks/Payment/Payment Selection",
6
- component: [SelectPayment],
7
- argTypes: {
8
- theme: {
9
- options: ["primary", "secondary", "default"],
10
- control: { type: "select" }
11
- },
12
- viaWallet: { control: "boolean" },
13
- viaApplePay: { control: "boolean" },
14
- viaGooglePay: { control: "boolean" },
15
- viaSTCPay: { control: "boolean" },
16
- viaCreditCard: { control: "boolean" },
17
- viaPayPal: { control: "boolean" }
18
- },
19
- args: {
20
- theme: "primary",
21
- viaWallet: true,
22
- viaMada: true,
23
- viaApplePay: true,
24
- viaGooglePay: true,
25
- viaSTCPay: true,
26
- viaCreditCard: true,
27
- viaPayPal: true
28
- }
29
- };
30
-
31
- const PaymentSelectionTemplate = (args) => {
32
- return (
33
- <SelectPayment
34
- {...args}
35
- walletLabel="Wallet Balance"
36
- handleWallet={() => console.log("paying via wallet")}
37
- visaMasterLabel="Credit Card"
38
- handleCreditCard={() => console.log("paying via Credit Card")}
39
- madaLabel="Mada"
40
- handleMada={() => console.log("paying via Mada")}
41
- paypalLabel="PayPal"
42
- handlePayPal={() => console.log("paying via PayPal")}
43
- applePayLabel="Apple Pay"
44
- handleApplePay={() => console.log("paying via Apple Pay")}
45
- googlePayLabel="Google Pay"
46
- handleGooglePay={() => console.log("paying via Google Pay")}
47
- stcPayLabel="STC Pay"
48
- handleSTCPay={() => console.log("paying via STC Pay")}
49
- />
50
- );
51
- };
52
- export const PaymentSelection = PaymentSelectionTemplate.bind({});
53
- PaymentSelection.args = {
54
- viaGoogle: true,
55
- viaGithub: true,
56
- viaTwitter: true,
57
- showError: false,
58
- errorTitle: "Error",
59
- errorText: "Something went wrong"
60
- };
@@ -1,63 +0,0 @@
1
- import React from "react";
2
- import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
3
-
4
- export default {
5
- title: "Blocks/Pricing/In Billing",
6
- component: [PricingPlans],
7
- argTypes: {
8
- lang: {
9
- options: ["ar", "en"],
10
- control: { type: "select" }
11
- }
12
- },
13
- args: {
14
- lang: "ar"
15
- }
16
- };
17
-
18
- export const InBilling = (args) => {
19
- return (
20
- <PricingPlans
21
- {...args}
22
- plans={[
23
- {
24
- title: "Free",
25
- title_ar: "تجريبي",
26
- subtitle: "For everyone",
27
- subtitle_ar: "للعرب",
28
- price: 0,
29
- currency: "SAR",
30
- cycleText: "Monthly",
31
- buttonText: "Select Plan",
32
- features: ["one", "two", "three"],
33
- features_ar: ["واحد", "اثنين", "ثلاثة"]
34
- },
35
- {
36
- title: "Intro",
37
- title_ar: "تجريبي",
38
- subtitle: "For beginners",
39
- subtitle_ar: "للعرب",
40
- selectedPlan: true,
41
- price: 10,
42
- currency: "SAR",
43
- cycleText: "Monthly",
44
- buttonText: "Current Plan",
45
- features: ["one", "two", "three"],
46
- features_ar: ["واحد", "اثنين", "ثلاثة"]
47
- },
48
- {
49
- title: "Pro",
50
- title_ar: "تجريبي",
51
- subtitle: "For professionals",
52
- subtitle_ar: "للعرب",
53
- price: 30,
54
- currency: "SAR",
55
- cycleText: "Monthly",
56
- buttonText: "Select Plan",
57
- features: ["one", "two", "three"],
58
- features_ar: ["واحد", "اثنين", "ثلاثة"]
59
- }
60
- ]}
61
- />
62
- );
63
- };
@@ -1,63 +0,0 @@
1
- import React from "react";
2
- import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
3
-
4
- export default {
5
- title: "Blocks/Pricing/In Landing",
6
- component: [PricingPlans],
7
- argTypes: {
8
- lang: {
9
- options: ["ar", "en"],
10
- control: { type: "select" }
11
- }
12
- },
13
- args: {
14
- lang: "ar"
15
- }
16
- };
17
-
18
- export const InLanding = (args) => {
19
- return (
20
- <PricingPlans
21
- {...args}
22
- plans={[
23
- {
24
- title: "Free",
25
- title_ar: "تجريبي",
26
- subtitle: "For everyone",
27
- subtitle_ar: "للعرب",
28
- price: 0,
29
- currency: "SAR",
30
- cycleText: "Monthly",
31
- buttonText: "Select Plan",
32
- features: ["one", "two", "three"],
33
- features_ar: ["واحد", "اثنين", "ثلاثة"]
34
- },
35
- {
36
- title: "Intro",
37
- title_ar: "تجريبي",
38
- subtitle: "For beginners",
39
- subtitle_ar: "للعرب",
40
- selectedPlan: false,
41
- price: 10,
42
- currency: "SAR",
43
- cycleText: "Monthly",
44
- buttonText: "Current Plan",
45
- features: ["one", "two", "three"],
46
- features_ar: ["واحد", "اثنين", "ثلاثة"]
47
- },
48
- {
49
- title: "Pro",
50
- title_ar: "تجريبي",
51
- subtitle: "For professionals",
52
- subtitle_ar: "للعرب",
53
- price: 30,
54
- currency: "SAR",
55
- cycleText: "Monthly",
56
- buttonText: "Select Plan",
57
- features: ["one", "two", "three"],
58
- features_ar: ["واحد", "اثنين", "ثلاثة"]
59
- }
60
- ]}
61
- />
62
- );
63
- };