@sikka/hawa 0.0.209 → 0.0.211

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 (14) hide show
  1. package/dist/styles.css +0 -4
  2. package/es/blocks/Pricing/ComparingPlans.d.ts +33 -2
  3. package/es/blocks/Pricing/PricingPlans.d.ts +1 -0
  4. package/es/elements/HawaPricingCard.d.ts +1 -0
  5. package/es/index.es.js +1 -1
  6. package/lib/blocks/Pricing/ComparingPlans.d.ts +33 -2
  7. package/lib/blocks/Pricing/PricingPlans.d.ts +1 -0
  8. package/lib/elements/HawaPricingCard.d.ts +1 -0
  9. package/lib/index.js +1 -1
  10. package/package.json +1 -1
  11. package/src/blocks/Pricing/ComparingPlans.tsx +92 -95
  12. package/src/blocks/Pricing/PricingPlans.tsx +2 -0
  13. package/src/elements/HawaPricingCard.tsx +13 -7
  14. package/src/styles.css +0 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.0.209",
3
+ "version": "0.0.211",
4
4
  "description": "SaaS Oriented UI Kit",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.es.js",
package/src/blocks/Pricing/ComparingPlans.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useState } from "react"
2
+ import { HawaTabs } from "../../elements"
2
3
 
3
4
  const CheckMark = () => (
4
5
  <svg
@@ -33,115 +34,111 @@ const UncheckMark = () => (
33
34
  )
34
35
 
35
36
  type ComparingPlansTypes = {
36
- plans: any
37
- // plans: PropTypes.arrayOf(
38
- // PropTypes.shape({
39
- // title: PropTypes.string,
40
- // title_ar: PropTypes.string,
41
- // subtitle: PropTypes.string,
42
- // subtitle_ar: PropTypes.string,
43
- // price: PropTypes.number,
44
- // currency: PropTypes.string,
45
- // cycleText: PropTypes.string,
46
- // buttonText: PropTypes.string,
47
- // features: PropTypes.array,
48
- // features_ar: PropTypes.array,
49
- // selectedPlan: PropTypes.bool,
50
- // })
51
- // ),
52
- lang: any
37
+ plans: [
38
+ {
39
+ direction: "rtl" | "ltr"
40
+ features: [{ included: boolean; text: string }]
41
+ price: number
42
+ texts: {
43
+ title: string
44
+ subtitle: string
45
+ buttonText: string
46
+ cycleText: string
47
+ currencyText: string
48
+ }
49
+ size: "small" | "medium" | "large"
50
+ }
51
+ ]
52
+ currencies: [
53
+ {
54
+ label: string
55
+ value: string
56
+ }
57
+ ]
58
+ billingCycles: [
59
+ {
60
+ label: string
61
+ value: string
62
+ }
63
+ ]
64
+ onCycleChange?: (e) => void
65
+ onCurrencyChange?: (e) => void
66
+ direction?: "rtl" | "ltr"
53
67
  }
54
68
  export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
55
69
  props
56
70
  ) => {
57
- const [currentCurrency, setCurrentCurrency] = useState("sar")
58
- const [currentCycle, setCurrentCycle] = useState("monthly")
59
- let cycleOptions = [
60
- { label: `Monthly`, value: `monthly` },
61
- { label: `3 Months`, value: `3-months` },
62
- { label: `6 Months`, value: `6-months` },
63
- { label: `Annually`, value: `annually` },
64
- ]
65
- let currencyOptions = [
66
- { label: `USD`, value: `usd` },
67
- { label: `SAR`, value: `sar` },
68
- ]
69
- let activeTabStyle =
70
- "inline-block py-3 px-4 text-white bg-blue-600 rounded active"
71
- let inactiveTabStyle =
72
- "inline-block py-3 px-4 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
71
+ const [currentCurrency, setCurrentCurrency] = useState("SAR")
72
+ const [currentCycle, setCurrentCycle] = useState("month")
73
+
73
74
  return (
74
75
  <div id="detailed-pricing" className="w-full overflow-x-auto">
76
+ <div className="mb-2 flex w-full justify-between">
77
+ <HawaTabs
78
+ pill
79
+ defaultValue={currentCycle}
80
+ options={props.billingCycles}
81
+ onChangeTab={(e: any) => {
82
+ // setCurrentCycle(e.label)
83
+ props.onCycleChange(e)
84
+ }}
85
+ />
86
+ <HawaTabs
87
+ pill
88
+ defaultValue={currentCurrency}
89
+ options={props.currencies}
90
+ onChangeTab={(e: any) => {
91
+ // setCurrentCurrency(e.label)
92
+ props.onCurrencyChange(e)
93
+ }}
94
+ />
95
+ </div>
75
96
  <div className="min-w-max overflow-hidden">
76
97
  <div className="grid grid-cols-4 gap-x-16 border-t border-b border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
77
98
  <div className="flex items-center"></div>
78
99
  {props.plans.map((plan: any) => (
79
- <div>{plan.title}</div>
100
+ <div>
101
+ <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
102
+ {plan.texts.title}
103
+ </h5>
104
+
105
+ <div className=" flex items-baseline text-gray-900 dark:text-white">
106
+ <>
107
+ <span className="text-5xl font-extrabold tracking-tight">
108
+ {plan.price}
109
+ </span>
110
+ <span className="mx-1 text-sm font-semibold">
111
+ {plan.texts.currencyText}
112
+ </span>
113
+ </>
114
+ <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
115
+ / {plan.texts.cycleText}
116
+ </span>
117
+ </div>
118
+ <h5 className="text-md font-normal text-gray-500 dark:text-gray-400">
119
+ {plan.texts.subtitle}
120
+ </h5>
121
+ </div>
80
122
  ))}
81
123
  </div>
82
- {props.plans.map(() => {
83
- return (
84
- <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
85
- <div className="text-gray-500 dark:text-gray-400">
86
- Basic components (
87
- <a href="#" className="text-blue-600 hover:underline">
88
- view all
89
- </a>
90
- )
124
+ {props.plans?.map((plan) => {
125
+ return plan.features.map((feature) => {
126
+ return (
127
+ <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
128
+ <div className="text-gray-500 dark:text-gray-400">
129
+ {feature.text} (
130
+ <a href="#" className="text-blue-600 hover:underline">
131
+ view demo
132
+ </a>
133
+ )
134
+ </div>
135
+ <UncheckMark />
136
+ <CheckMark />
137
+ <UncheckMark />
91
138
  </div>
92
- <CheckMark />
93
- <CheckMark />
94
- <CheckMark />
95
- </div>
96
- )
97
- })}
98
- <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
99
- <div className="text-gray-500 dark:text-gray-400">
100
- Application UI (
101
- <a href="#" className="text-blue-600 hover:underline">
102
- view demo
103
- </a>
104
139
  )
105
- </div>
106
- <UncheckMark />
107
- <CheckMark />
108
- <UncheckMark />
109
- </div>
110
- <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
111
- <div className="text-gray-500 dark:text-gray-400">
112
- Marketing UI pre-order
113
- </div>
114
- <UncheckMark />
115
- <CheckMark />
116
- <UncheckMark />
117
- </div>
118
- <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
119
- <div className="text-gray-500 dark:text-gray-400"></div>
120
- <div>
121
- <a
122
- href="#"
123
- className="block w-full rounded bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
124
- >
125
- Buy now
126
- </a>
127
- </div>
128
- <div>
129
- <a
130
- href="#"
131
- className="block w-full rounded bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
132
- >
133
- Buy now
134
- </a>
135
- </div>
136
- <div>
137
- <a
138
- href="#"
139
- className="block w-full rounded bg-blue-600 px-4 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
140
- >
141
- Buy now
142
- </a>
143
- </div>
144
- </div>
140
+ })
141
+ })}
145
142
  </div>
146
143
  </div>
147
144
  )
package/src/blocks/Pricing/PricingPlans.tsx CHANGED
@@ -30,6 +30,7 @@ type PricingPlansTypes = {
30
30
  value: string
31
31
  }
32
32
  ]
33
+ onPlanClicked?: (e) => void
33
34
  onCycleChange?: (e) => void
34
35
  onCurrencyChange?: (e) => void
35
36
  direction?: "rtl" | "ltr"
@@ -67,6 +68,7 @@ export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
67
68
  {props.plans.map((plan: any) => {
68
69
  return (
69
70
  <HawaPricingCard
71
+ onPlanClicked={() => props.onPlanClicked(plan)}
70
72
  {...plan}
71
73
  texts={{
72
74
  ...plan.texts,
package/src/elements/HawaPricingCard.tsx CHANGED
@@ -16,6 +16,7 @@ type PricingCardTypes = {
16
16
  cycleText: string
17
17
  currencyText: string
18
18
  }
19
+ onPlanClicked?: () => void
19
20
  currentPlan?: boolean
20
21
  size: "small" | "medium" | "large"
21
22
  }
@@ -23,27 +24,27 @@ type PricingCardTypes = {
23
24
  export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
24
25
  size = "medium",
25
26
  direction = "ltr",
26
- currentPlan = true,
27
+ currentPlan = false,
27
28
  ...props
28
29
  }) => {
29
30
  let isArabic = direction === "rtl"
30
31
  let cardSizes = {
31
32
  small:
32
- "mx-1 w-full max-w-sm rounded border shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
33
+ "mx-1 w-full max-w-sm rounded border dark:border-gray-700 dark:bg-gray-800 ",
33
34
  medium:
34
- "mx-1 w-full rounded min-w-fit border dark:border-gray-700 dark:bg-gray-800 sm:p-8",
35
+ "mx-1 w-full rounded min-w-fit border dark:border-gray-700 dark:bg-gray-800 ",
35
36
  large:
36
- "mx-1 w-full max-w-lg rounded border p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
37
+ "mx-1 w-full max-w-lg rounded border dark:border-gray-700 dark:bg-gray-800 ",
37
38
  }
38
39
  return (
39
40
  <div
40
41
  dir={isArabic ? "rtl" : "ltr"}
41
42
  className={clsx(
42
43
  currentPlan
43
- ? "border-buttonPrimary-500 bg-layoutPrimary-500 p-0"
44
+ ? "border-buttonPrimary-500 bg-layoutPrimary-500"
44
45
  : "bg-white",
45
46
  cardSizes[size],
46
- "flex flex-col gap-4 rounded border-2 p-4"
47
+ "flex flex-col gap-4 rounded border-2 p-4"
47
48
  )}
48
49
  >
49
50
  <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
@@ -100,7 +101,12 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
100
101
  >
101
102
  {props.texts.buttonText}
102
103
  </button> */}
103
- <HawaButton disabled={currentPlan} width="full">
104
+ <HawaButton
105
+ onClick={props.onPlanClicked}
106
+ margins="none"
107
+ disabled={currentPlan}
108
+ width="full"
109
+ >
104
110
  {props.texts.buttonText}
105
111
  </HawaButton>
106
112
  </div>
package/src/styles.css CHANGED
@@ -2471,10 +2471,6 @@ body {
2471
2471
 
2472
2472
  @media (min-width: 640px) {
2473
2473
 
2474
- .sm\:p-8 {
2475
- padding: 2rem;
2476
- }
2477
-
2478
2474
  .sm\:after\:inline-block::after {
2479
2475
  content: var(--tw-content);
2480
2476
  display: inline-block;