@sikka/hawa 0.0.12 → 0.0.13

package/src/{ui → elements}/index.js

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

package/src/stories/BlocksStories/Account/UserSettings.stories.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { UserSettingsForm } from "../../../blocks/Account";
+import { HawaSettingsRow } from "../../../elements";
 
 export default {
   title: "Blocks/Account/User Settings",
@@ -11,9 +12,42 @@ export default {
     }
   }
 };
-
 export const UserSettings = (args) => {
-  return <UserSettingsForm {...args} />;
+  return (
+    <UserSettingsForm {...args}>
+      <HawaSettingsRow settingsType="checkbox" settingsLabel="Hide Watermark" />
+      <HawaSettingsRow
+        settingsType="text"
+        placeholder="Your handle"
+        settingsLabel="Custom Handle"
+      />
+      <HawaSettingsRow
+        handleChange={(e) => console.log("changing to ", e)}
+        settingsType="radio"
+        defaultValue="sar"
+        options={[
+          { value: "sar", label: "SAR" },
+          { value: "usd", label: "USD" }
+        ]}
+        settingsLabel="Currency"
+      />
+      <HawaSettingsRow
+        handleChange={(e) => console.log("changing to ", e)}
+        settingsType="radio"
+        defaultValue="en"
+        options={[
+          { value: "en", label: "English" },
+          { value: "ar", label: "Arabic" }
+        ]}
+        settingsLabel="Language"
+      />
+        <HawaSettingsRow
+        settingsType="boolean"
+        placeholder="Your handle"
+        settingsLabel="Show Analytics"
+      />
+    </UserSettingsForm>
+  );
 };
 UserSettings.args = {
   theme: "primary",

package/src/stories/ElementsStories/AdaptiveButton.stories.js

@@ -0,0 +1,51 @@
+import { Class } from "@mui/icons-material";
+import React from "react";
+import { AdaptiveButton } from "../../elements";
+
+export default {
+  title: "Elements/Buttons/AdaptiveButton",
+  component: AdaptiveButton,
+  argTypes: {
+    buttonText: {
+      control: "text",
+      description: "The button text",
+      table: {
+        defaultValue: { summary: "Click" }
+      }
+    },
+    showText: {
+      control: "boolean",
+      // default: true,
+      description: "Boolean to show or hide the text",
+      table: {
+        defaultValue: { summary: true },
+        type: {
+          summary: "Use Case",
+          detail:
+            "Set this property to true in large screen and false on mobile"
+        }
+      }
+    }
+  },
+  args: {
+    buttonText: "Click"
+  }
+};
+
+const Template = (args) => {
+  return <AdaptiveButton {...args} />;
+};
+
+export const FullButton = Template.bind({});
+FullButton.args = {
+  showText: true,
+  // buttonText: "Full Button",
+  icon: <Class />
+};
+
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+  showText: false,
+  icon: <Class />,
+  buttonText: "test"
+};

package/src/stories/{UIStories → ElementsStories}/Alert.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { HawaAlert } from "../../ui";
+import { HawaAlert } from "../../elements";
 
 const Template = (args) => {
   return (

package/src/stories/{UIStories → ElementsStories}/InputLabel.stories.js

@@ -1,5 +1,5 @@
 import { storiesOf } from "@storybook/react";
-import { HawaInputLabel } from "../../ui";
+import { HawaInputLabel } from "../../elements";
 
 export default {
   title: "Components/InputLabel",

package/src/stories/ElementsStories/ItemCard.stories.js

@@ -0,0 +1,18 @@
+import { Container } from "@mui/material";
+import React from "react";
+import { HawaCard } from "../../elements";
+
+export default {
+  title: "Elements/Cards/Items",
+  component: [HawaCard],
+  argTypes: {
+    buttonLabel: {
+      control: "text",
+      description: "The text next to the logo"
+    }
+  }
+};
+
+export const Items = (args) => {
+  return <HawaCard />;
+};

package/src/stories/{UIStories → ElementsStories}/LogoButtons.stories.js

@@ -1,6 +1,6 @@
 import { Container } from "@mui/material";
 import React from "react";
-import { ActionButton, HawaLogoButton } from "../../ui";
+import { ActionButton, HawaLogoButton } from "../../elements";
 
 export default {
   title: "Elements/Buttons/LogoButtons",

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

@@ -0,0 +1,27 @@
+import { Container } from "@mui/material";
+import React from "react";
+import { HawaCard } from "../../elements";
+
+export default {
+  title: "Elements/Cards/Pricing",
+  component: [HawaCard],
+  argTypes: {
+    buttonLabel: {
+      control: "text",
+      description: "The text next to the logo"
+    }
+  }
+};
+
+export const Pricing = (args) => {
+  return (
+    <HawaCard
+      title="Pro"
+      subtitle="For small business"
+      price="300"
+      currency="SAR"
+      cycleText="Every 6 months"
+      features={["Unlimited Menus", "Unlimited Items", "Custom Handle"]}
+    />
+  );
+};

package/src/stories/ElementsStories/RadioSelector.stories.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { HawaRadio } from "../../elements";
+
+export default {
+  title: "Elements/Selections/Panel Tabs",
+  component: [HawaRadio],
+  argTypes: {
+    options: {
+      control: "array",
+      description: "An array of objects containing the option label and value",
+      table: {
+        type: {
+          summary: "Object Example",
+          detail: "{label: 'Option 1', value: 'option1'}"
+        }
+      }
+    }
+  },
+  args: {
+    options: 3
+  }
+};
+
+export const PanelTabs = (args) => {
+  let allOptions = Array.from({ length: args.options }, (v, i) => {
+    return { label: `Option ${i}`, value: `option${i}` };
+  });
+  return (
+    <HawaRadio
+      {...args}
+      handleChange={(e) => console.log("changing to ", e)}
+      defaultValue="option1"
+      options={allOptions}
+    />
+  );
+};

package/src/stories/ElementsStories/SettingsRow.stories.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { HawaSettingsRow } from "../../elements";
+
+export default {
+  title: "Elements/Settings/Row",
+  component: [HawaSettingsRow],
+  parameters: {
+    backgrounds: {
+      default: 'twitter',
+      values: [
+        {
+          name: 'light',
+          value: '#00aced',
+        },
+        {
+          name: 'dark',
+          value: '#3b5998',
+        },
+      ],
+    },
+  //   backgrounds: [{ name: "dark background", value: "#000", default: true }]
+  },
+  argTypes: {
+    settingsType: {
+      options: ["checkbox", "text", "radio"],
+      control: { type: "select" }
+    }
+  }
+};
+
+export const CheckboxSettings = (args) => <HawaSettingsRow {...args} />;
+CheckboxSettings.args = {
+  settingsType: "checkbox",
+  settingsLabel: "Text Settings"
+};
+export const TextSettings = (args) => (
+  <HawaSettingsRow placeholder="Text here" {...args} />
+);
+
+TextSettings.args = {
+  settingsType: "text",
+  settingsLabel: "Text Settings"
+};
+export const RadioSettings = (args) => {
+  let allOptions = Array.from({ length: args.options }, (v, i) => {
+    return { label: `Option ${i}`, value: `option${i}` };
+  });
+  return (
+    <HawaSettingsRow
+      settingsType={args.settingsType}
+      settingsLabel={args.settingsLabel}
+      handleChange={(e) => console.log("changing to ", e)}
+      defaultValue="option1"
+      options={allOptions}
+    />
+  );
+};
+
+RadioSettings.args = {
+  options: 3,
+  settingsType: "radio",
+  settingsLabel: "Radio Settings"
+};

package/src/stories/{UIStories → ElementsStories}/TextField.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { HawaTextField } from "../../ui";
+import { HawaTextField } from "../../elements";
 
 const Template = (args) => {
   return <HawaTextField {...args} />;

package/src/stories/LayoutStories/Box.stories.js

@@ -1,22 +1,13 @@
+import { Container } from "@mui/material";
 import React from "react";
 import { Box } from "../../layout";
 
 const Template = (args) => {
-  return (
-    <>
-      <Box>Box 1</Box>
-      <Box>
-        <div style={{ backgroundColor: "white", padding: 10, color: "black" }}>
-          testing box in box
-        </div>
-      </Box>
-      <Box>Box 3</Box>
-    </>
-  );
+  return <Container variant="auth">test</Container>;
 };
 export default {
-  title: "Layout/Box",
-  component: <Box />,
+  title: "Layout/Container",
+  component: <Container />,
   parameters: {
     backgrounds: {
       default: "light"

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.f8d30727.iframe.bundle.js"></script><script src="main.a9a16923.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.00b064cb.iframe.bundle.js"></script></body></html>