@sikka/hawa 0.0.209 → 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 (9) hide show
  1. package/dist/styles.css +0 -4
  2. package/es/blocks/Pricing/ComparingPlans.d.ts +33 -2
  3. package/es/index.es.js +1 -1
  4. package/lib/blocks/Pricing/ComparingPlans.d.ts +33 -2
  5. package/lib/index.js +1 -1
  6. package/package.json +1 -1
  7. package/src/blocks/Pricing/ComparingPlans.tsx +92 -95
  8. package/src/elements/HawaPricingCard.tsx +7 -7
  9. 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.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/elements/HawaPricingCard.tsx CHANGED
@@ -23,27 +23,27 @@ type PricingCardTypes = {
23
23
  export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
24
24
  size = "medium",
25
25
  direction = "ltr",
26
- currentPlan = true,
26
+ currentPlan = false,
27
27
  ...props
28
28
  }) => {
29
29
  let isArabic = direction === "rtl"
30
30
  let cardSizes = {
31
31
  small:
32
- "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 ",
33
33
  medium:
34
- "mx-1 w-full rounded min-w-fit border 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 ",
35
35
  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",
36
+ "mx-1 w-full max-w-lg rounded border dark:border-gray-700 dark:bg-gray-800 ",
37
37
  }
38
38
  return (
39
39
  <div
40
40
  dir={isArabic ? "rtl" : "ltr"}
41
41
  className={clsx(
42
42
  currentPlan
43
- ? "border-buttonPrimary-500 bg-layoutPrimary-500 p-0"
43
+ ? "border-buttonPrimary-500 bg-layoutPrimary-500"
44
44
  : "bg-white",
45
45
  cardSizes[size],
46
- "flex flex-col gap-4 rounded border-2 p-4"
46
+ "flex flex-col gap-4 rounded border-2 p-4"
47
47
  )}
48
48
  >
49
49
  <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
@@ -100,7 +100,7 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
100
100
  >
101
101
  {props.texts.buttonText}
102
102
  </button> */}
103
- <HawaButton disabled={currentPlan} width="full">
103
+ <HawaButton margins="none" disabled={currentPlan} width="full">
104
104
  {props.texts.buttonText}
105
105
  </HawaButton>
106
106
  </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;