@sikka/hawa 0.0.208 → 0.0.210

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 (15) hide show
  1. package/dist/styles.css +3 -4
  2. package/es/blocks/Pricing/ComparingPlans.d.ts +33 -2
  3. package/es/blocks/Pricing/PricingPlans.d.ts +15 -1
  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 +15 -1
  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 +32 -28
  13. package/src/elements/HawaPricingCard.tsx +21 -35
  14. package/src/elements/HawaTabs.tsx +22 -13
  15. package/src/styles.css +3 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikka/hawa",
3
- "version": "0.0.208",
3
+ "version": "0.0.210",
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
@@ -1,7 +1,7 @@
1
1
  import React, { useState } from "react"
2
2
  import { HawaPricingCard, HawaTabs } from "../../elements"
3
3
  // TODO: make lang into direction rtl | ltr
4
- // TODO: shape the type of plans
4
+
5
5
  type PricingPlansTypes = {
6
6
  plans: [
7
7
  {
@@ -18,41 +18,48 @@ type PricingPlansTypes = {
18
18
  size: "small" | "medium" | "large"
19
19
  }
20
20
  ]
21
- lang: any
21
+ currencies: [
22
+ {
23
+ label: string
24
+ value: string
25
+ }
26
+ ]
27
+ billingCycles: [
28
+ {
29
+ label: string
30
+ value: string
31
+ }
32
+ ]
33
+ onCycleChange?: (e) => void
34
+ onCurrencyChange?: (e) => void
35
+ direction?: "rtl" | "ltr"
22
36
  }
23
37
  export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
24
38
  props
25
39
  ) => {
26
40
  const [currentCurrency, setCurrentCurrency] = useState("SAR")
27
41
  const [currentCycle, setCurrentCycle] = useState("month")
28
- let cycleOptions = [
29
- { label: `Monthly`, value: `month` },
30
- // { label: `3 Months`, value: `3-months` },
31
- // { label: `6 Months`, value: `6-months` },
32
- { label: `Annually`, value: `annually` },
33
- ]
34
- let currencyOptions = [
35
- { label: `USD`, value: `usd` },
36
- { label: `SAR`, value: `sar` },
37
- ]
38
- let activeTabStyle =
39
- "inline-block py-3 px-4 text-white bg-blue-600 rounded active"
40
- let inactiveTabStyle =
41
- "inline-block py-3 px-4 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
42
+
42
43
  return (
43
44
  <div>
44
45
  <div className="mb-2 flex w-full justify-between">
45
46
  <HawaTabs
46
47
  pill
47
48
  defaultValue={currentCycle}
48
- options={cycleOptions}
49
- onChangeTab={(e: any) => setCurrentCycle(e.label)}
49
+ options={props.billingCycles}
50
+ onChangeTab={(e: any) => {
51
+ setCurrentCycle(e.label)
52
+ props.onCycleChange(e)
53
+ }}
50
54
  />
51
55
  <HawaTabs
52
56
  pill
53
57
  defaultValue={currentCurrency}
54
- options={currencyOptions}
55
- onChangeTab={(e: any) => setCurrentCurrency(e.label)}
58
+ options={props.currencies}
59
+ onChangeTab={(e: any) => {
60
+ setCurrentCurrency(e.label)
61
+ props.onCurrencyChange(e)
62
+ }}
56
63
  />
57
64
  </div>
58
65
 
@@ -60,15 +67,12 @@ export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
60
67
  {props.plans.map((plan: any) => {
61
68
  return (
62
69
  <HawaPricingCard
63
- // size="large"
64
- // features={plan.features}
65
- // lang={props.lang}
66
70
  {...plan}
67
- // texts={{
68
- // buttonText: "Upgrade",
69
- // currencyText: currentCurrency,
70
- // cycleText: currentCycle,
71
- // }}
71
+ texts={{
72
+ ...plan.texts,
73
+ currencyText: currentCurrency,
74
+ cycleText: currentCycle,
75
+ }}
72
76
  />
73
77
  )
74
78
  })}
package/src/elements/HawaPricingCard.tsx CHANGED
@@ -1,7 +1,9 @@
1
1
  import clsx from "clsx"
2
2
  import React from "react"
3
+ import { HawaButton } from "./HawaButton"
3
4
 
4
- // TODO: if feature.included is false, show gray and x
5
+ // TODO: if feature.excluded is false, show gray and x
6
+ // TODO: add badge to feature if soon
5
7
 
6
8
  type PricingCardTypes = {
7
9
  direction?: "rtl" | "ltr"
@@ -14,54 +16,34 @@ type PricingCardTypes = {
14
16
  cycleText: string
15
17
  currencyText: string
16
18
  }
19
+ currentPlan?: boolean
17
20
  size: "small" | "medium" | "large"
18
21
  }
19
- type CycleTextTypes = {
20
- monthly: string
21
- "3-months": string
22
- "6-months": string
23
- annually: string
24
- }
25
- type CurrencyTextTypes = {
26
- usd: string
27
- sar: string
28
- }
22
+
29
23
  export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
30
24
  size = "medium",
31
25
  direction = "ltr",
26
+ currentPlan = false,
32
27
  ...props
33
28
  }) => {
34
29
  let isArabic = direction === "rtl"
35
- let cycleTextsArabic: CycleTextTypes = {
36
- monthly: "شهرياً",
37
- "3-months": "كل 3 أشهر",
38
- "6-months": "كل 6 أشهر",
39
- annually: "سنوياً",
40
- }
41
- let cycleTextsEnglish: CycleTextTypes = {
42
- monthly: "Monthly",
43
- "3-months": "3 Months",
44
- "6-months": "6 Months",
45
- annually: "Annually",
46
- }
47
- let currencyMapping: CurrencyTextTypes = {
48
- usd: isArabic ? "دولار" : "$",
49
- sar: isArabic ? "ريال" : "SAR",
50
- }
51
30
  let cardSizes = {
52
31
  small:
53
- "mx-1 w-full max-w-sm rounded border shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
32
+ "mx-1 w-full max-w-sm rounded border dark:border-gray-700 dark:bg-gray-800 ",
54
33
  medium:
55
- "mx-1 w-full rounded min-w-fit border bg-white dark:border-gray-700 dark:bg-gray-800 sm:p-8",
34
+ "mx-1 w-full rounded min-w-fit border dark:border-gray-700 dark:bg-gray-800 ",
56
35
  large:
57
- "mx-1 w-full max-w-lg rounded border p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
36
+ "mx-1 w-full max-w-lg rounded border dark:border-gray-700 dark:bg-gray-800 ",
58
37
  }
59
38
  return (
60
39
  <div
61
40
  dir={isArabic ? "rtl" : "ltr"}
62
41
  className={clsx(
42
+ currentPlan
43
+ ? "border-buttonPrimary-500 bg-layoutPrimary-500"
44
+ : "bg-white",
63
45
  cardSizes[size],
64
- "flex flex-col gap-4 border-2 bg-white p-4"
46
+ "flex flex-col gap-4 rounded border-2 p-4"
65
47
  )}
66
48
  >
67
49
  <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
@@ -76,9 +58,9 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
76
58
  {props.texts.currencyText}
77
59
  </span>
78
60
  </>
79
- {/* <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
61
+ <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
80
62
  / {props.texts.cycleText}
81
- </span> */}
63
+ </span>
82
64
  </div>
83
65
  <h5 className="text-md font-normal text-gray-500 dark:text-gray-400">
84
66
  {props.texts.subtitle}
@@ -111,12 +93,16 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
111
93
  })}
112
94
  </ul>
113
95
  )}
114
- <button
96
+ {/* <button
97
+ disabled={currentPlan}
115
98
  type="button"
116
99
  className="inline-flex w-full justify-center rounded bg-blue-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
117
100
  >
118
101
  {props.texts.buttonText}
119
- </button>
102
+ </button> */}
103
+ <HawaButton margins="none" disabled={currentPlan} width="full">
104
+ {props.texts.buttonText}
105
+ </HawaButton>
120
106
  </div>
121
107
  )
122
108
  }
package/src/elements/HawaTabs.tsx CHANGED
@@ -16,22 +16,23 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
16
16
  direction = "ltr",
17
17
  width = "normal",
18
18
  marginBetween = 0,
19
- pill = true,
19
+ pill = false,
20
20
  ...props
21
21
  }) => {
22
22
  const [selectedOption, setSelectedOption] = useState(props.options[0]?.value)
23
23
 
24
24
  let activeTabStyle = {
25
25
  vertical: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
26
- horizontal:
27
- "inline-block py-2 px-4 text-white bg-buttonPrimary-500 rounded rounded-br-none rounded-bl-none active",
26
+ horizontal: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
28
27
  }
28
+ // rounded rounded-br-none rounded-bl-none
29
29
  let inactiveTabStyle = {
30
30
  vertical:
31
- "inline-block py-2 px-4 rounded-none rounded-br-none rounded-tl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
31
+ "inline-block py-2 px-4 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white",
32
32
  horizontal:
33
- "bg-gray-100 inline-block py-2 px-4 rounded rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
33
+ "bg-gray-100 inline-block py-2 px-4 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white",
34
34
  }
35
+ // rounded rounded-br-none rounded-bl-none
35
36
  let widthStyles = {
36
37
  full: "w-full min-w-full",
37
38
  normal: "w-fit",
@@ -54,7 +55,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
54
55
  vertical:
55
56
  "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
56
57
  horizontal:
57
- "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none border-b-buttonPrimary-500 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
58
+ "flex w-fit flex-wrap border-b-buttonPrimary-500 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
58
59
  }
59
60
  return (
60
61
  <div
@@ -62,7 +63,6 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
62
63
  className={clsx(
63
64
  containerStyle[orientation],
64
65
  props.options[selectedOption] ? "border-b-2" : "border-b-0"
65
- // "bg-red-400"
66
66
  )}
67
67
  >
68
68
  <ul
@@ -78,14 +78,19 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
78
78
  tabsStyle[orientation],
79
79
  "border-buttonPrimary-500",
80
80
 
81
- orientation === "vertical"
81
+ // orientation === "vertical"
82
+ // ? direction === "rtl"
83
+ // ? "rounded-none rounded-r border-l-2"
84
+ // : "rounded-none rounded-l border-r-2"
85
+ // : "border-b-2",
86
+ widthStyles[width],
87
+ pill
88
+ ? "gap-0.5 rounded border-none bg-gray-100 p-0.5"
89
+ : orientation === "vertical"
82
90
  ? direction === "rtl"
83
91
  ? "rounded-none rounded-r border-l-2"
84
92
  : "rounded-none rounded-l border-r-2"
85
- : "border-b-2",
86
- widthStyles[width],
87
- // "bg-red-400",
88
- pill ? "overflow-clip rounded border-none" : ""
93
+ : "border-b-2"
89
94
  )}
90
95
  >
91
96
  {props.options?.map((opt: any, o) => (
@@ -105,7 +110,11 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
105
110
  ]
106
111
  : inactiveTabStyle[orientation],
107
112
  "w-full transition-all",
108
- pill ? "rounded" : ""
113
+ pill
114
+ ? "rounded"
115
+ : orientation === "vertical"
116
+ ? "rounded rounded-tl-none rounded-bl-none"
117
+ : "rounded rounded-br-none rounded-bl-none"
109
118
  // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
110
119
  )}
111
120
  >
package/src/styles.css CHANGED
@@ -1539,6 +1539,9 @@ video {
1539
1539
  .p-0 {
1540
1540
  padding: 0px;
1541
1541
  }
1542
+ .p-0\.5 {
1543
+ padding: 0.125rem;
1544
+ }
1542
1545
  .p-1 {
1543
1546
  padding: 0.25rem;
1544
1547
  }
@@ -2468,10 +2471,6 @@ body {
2468
2471
 
2469
2472
  @media (min-width: 640px) {
2470
2473
 
2471
- .sm\:p-8 {
2472
- padding: 2rem;
2473
- }
2474
-
2475
2474
  .sm\:after\:inline-block::after {
2476
2475
  content: var(--tw-content);
2477
2476
  display: inline-block;