@sikka/hawa 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/Pricing/PricingPlans.js

@@ -0,0 +1,47 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import { HawaPricingCard, HawaRadio } from "../../elements";
+
+export const PricingPlans = (props) => {
+  return (
+    <Container style={{ width: "fit-content" }} variant="plain">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+
+          marginBottom: 10
+        }}
+      >
+        <HawaRadio
+          location="inPricing"
+          handleChange={(e) => console.log("changing to ", e)}
+          defaultValue="usd"
+          options={[
+            { label: `Monthly`, value: `usd` },
+            { label: `3 Months`, value: `3-months` },
+            { label: `6 Months`, value: `6-months` },
+            { label: `Annually`, value: `annual` }
+          ]}
+        />
+
+        <HawaRadio
+          location="inPricing"
+          handleChange={(e) => console.log("changing to ", e)}
+          defaultValue="usd"
+          options={[
+            { label: `USD`, value: `usd` },
+            { label: `SAR`, value: `sar` }
+          ]}
+        />
+      </div>
+
+      <Container variant="pricing">
+        {props.plans.map((plan) => {
+          return <HawaPricingCard lang={props.lang} {...plan} />;
+        })}
+      </Container>
+    </Container>
+  );
+};

package/src/elements/HawaPricingCard.js

@@ -0,0 +1,115 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import { Button, Typography } from "@mui/material";
+import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
+export const HawaPricingCard = (props) => {
+  return (
+    <Container
+      maxWidth="xs"
+      variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
+      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
+    >
+      <Container variant="plan-header">
+        <Typography variant="h3" fontWeight={500}>
+          {props.title}
+        </Typography>
+        <Typography variant="caption">{props.subtitle}</Typography>
+        <br />
+        <Typography
+          variant="h4"
+          fontWeight={500}
+          style={{
+            display: "flex",
+            // flexDirection: "column",
+            alignItems: "center"
+            // justifyContent: props.lang === "ar" ? "" : "center"
+          }}
+        >
+          {props.lang === "ar" ? (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+                // alignItems: "center"
+              }}
+            >
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                {props.price}
+                <div style={{ width: 5 }} />
+                <Typography>{props.currency}</Typography>
+              </div>
+              <Typography style={{ fontSize: 14, margin: 5 }}>
+                {props.cycleText}
+              </Typography>
+            </div>
+          ) : (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+                // alignItems: "center"
+              }}
+            >
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                <Typography>{props.currency}</Typography>
+                <div style={{ width: 5 }} />
+                {props.price}
+              </div>
+              <Typography style={{ fontSize: 14, margin: 5 }}>
+                {props.cycleText}
+              </Typography>
+            </div>
+          )}
+          {/* {props.lang === "ar" ? null : (
+            <Typography style={{ fontSize: 14, margin: 5 }}>
+              {" / "}
+              {props.cycleText}
+            </Typography>
+          )} */}
+        </Typography>
+      </Container>
+
+      <div
+        style={{ padding: 20, color: props.selectedPlan ? "white" : "black" }}
+      >
+        {props.features?.map((feature) => {
+          return (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                marginTop: 10,
+                width: "100%"
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-end",
+                  width: "10%"
+                }}
+              >
+                <CheckIcon fontSize="small" />
+              </div>
+              <div style={{ width: 10 }} />
+              <Typography variant="subtitle2">{feature}</Typography>
+            </div>
+          );
+        })}
+      </div>
+      <Button
+        variant={props.selectedPlan ? "outlined" : "contained"}
+        style={{ margin: 20 }}
+      >
+        {props.buttonText}
+      </Button>
+    </Container>
+  );
+};

package/src/elements/HawaRadio.js

@@ -5,9 +5,7 @@ import Container from "@mui/material/Container";
 export const HawaRadio = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   return (
-    <Container
-      variant={props.location === "inSettings" ? "inSettings" : "panelTabs"}
-    >
+    <Container variant={props.location || "panelTabs"}>
       {props.options.map((singleOption, i) => {
         return (
           <Button

package/src/elements/index.js

@@ -2,7 +2,7 @@ export * from "./AdaptiveButton";
 export * from "./ActionButton";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
-export * from "./HawaCard";
+export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";

package/src/stories/BlocksStories/Pricing/BillingPlans.stories.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
+
+export default {
+  title: "Blocks/Pricing/In Billing",
+  component: [PricingPlans],
+  argTypes: {}
+};
+
+export const InBilling = (args) => {
+  return (
+    <PricingPlans
+      {...args}
+      plans={[
+        {
+          title: "Free",
+          subtitle: "For everyone",
+          price: 0,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        },
+        {
+          title: "Intro",
+          subtitle: "For beginners",
+          selectedPlan: true,
+          price: 10,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Current Plan",
+          features: ["one", "two", "three"]
+        },
+        {
+          title: "Pro",
+          subtitle: "For professionals",
+          price: 30,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        }
+      ]}
+    />
+  );
+};

package/src/stories/BlocksStories/Pricing/LandingPlans.stories.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
+
+export default {
+  title: "Blocks/Pricing/In Landing",
+  component: [PricingPlans],
+  argTypes: {}
+};
+
+export const InLanding = (args) => {
+  return (
+    <PricingPlans
+      {...args}
+      plans={[
+        {
+          title: "Free",
+          subtitle: "For everyone",
+          price: 0,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        },
+        {
+          title: "Intro",
+          subtitle: "For beginners",
+          price: 10,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        },
+        {
+          title: "Pro",
+          subtitle: "For professionals",
+          price: 30,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        }
+      ]}
+    />
+  );
+};

package/src/stories/ElementsStories/PricingCard.stories.js

@@ -1,27 +1,91 @@
-import { Container } from "@mui/material";
 import React from "react";
-import { HawaCard } from "../../elements";
+import { HawaPricingCard } from "../../elements";
 
 export default {
   title: "Elements/Cards/Pricing",
-  component: [HawaCard],
+  component: [HawaPricingCard],
   argTypes: {
-    buttonLabel: {
+    title: {
       control: "text",
-      description: "The text next to the logo"
+      description: "The title of the pricing package"
+    },
+    subtitle: {
+      control: "text",
+      description: "The subtitle of the pricing package"
+    },
+    price: {
+      control: "number",
+      description: "The price of the pricing package"
+    },
+    currency: {
+      control: "text",
+      description: "The currency of the price",
+      table: {
+        type: {
+          summary: "Examples",
+          detail: "$, SAR, ريال, دولار"
+        }
+      }
+    },
+    cycleText: {
+      control: "text",
+      description: "The cycle period of the payment",
+      table: {
+        type: {
+          summary: "Examples",
+          detail: "Monthly, Annually, Quarterly, Every 3 Months, Every 6 Months"
+        }
+      }
+    },
+    features: {
+      control: "array",
+      description: "An Array of strings for the package features"
+    },
+    lang: {
+      control: "text",
+      description: "The language of the card to change the direction",
+      table: {
+        type: {
+          summary: "Options",
+          detail: "ar, en"
+        }
+      }
+    },
+    buttonText: {
+      control: "text",
+      description: "The text of the button"
     }
+  },
+  args: {
+    title: "Pro",
+    subtitle: "For small businesses",
+    price: 300,
+    currency: "$",
+    cycleText: "Monthly",
+    buttonText: "Select Plan"
   }
 };
 
-export const Pricing = (args) => {
+export const LTR = (args) => {
   return (
-    <HawaCard
-      title="Pro"
-      subtitle="For small business"
-      price="300"
-      currency="SAR"
-      cycleText="Every 6 months"
+    <HawaPricingCard
+      {...args}
       features={["Unlimited Menus", "Unlimited Items", "Custom Handle"]}
     />
   );
 };
+
+export const RTL = (args) => {
+  return (
+    <HawaPricingCard
+      lang="ar"
+      title="الإحترافي"
+      subtitle="للمنشئات الصغيرة"
+      price="300"
+      currency="ريال"
+      cycleText="كل 6 أشهر"
+      buttonText="إختر الباقة"
+      features={["قوائم لا محدودة", "عناصر لا محدودة", "أسم مخصص"]}
+    />
+  );
+};

package/src/styles.css

@@ -1,3 +1,4 @@
+
 .reset_password_root {
   display: flex;
   flex-direction: column;

package/storybook-static/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.f1ebae9b.iframe.bundle.js"></script><script src="vendors~main.5eab66d3.iframe.bundle.js"></script><script src="main.00b064cb.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.f1ebae9b.iframe.bundle.js"></script><script src="vendors~main.5eab66d3.iframe.bundle.js"></script><script src="main.e382d866.iframe.bundle.js"></script></body></html>

package/storybook-static/index.html

@@ -37,7 +37,7 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" type="image/png" href="/hawa-icon.png" sizes="192x192"/><style>#root[hidden],
+  };</script><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" type="image/png" href="/hawa-icon.png" sizes="192x192"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet"/><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";