@sikka/hawa 0.0.7 → 0.0.8

package/src/blocks/Payment/SelectPayment.js

@@ -1,17 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Box } from "../../layout";
-import {
-  HawaTextField,
-  VisaMasterButton,
-  MadaButton,
-  STCPayButton,
-  PayPalButton,
-  GooglePayButton,
-  ApplePayButton,
-  WalletButton,
-  HawaTypography
-} from "../../ui";
+import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
 
 export const SelectPayment = (props) => {
   return (
@@ -19,43 +9,50 @@ export const SelectPayment = (props) => {
       <Box noMargin>
         <HawaTypography align="center">Choose Payment Method</HawaTypography>
         {props.viaWallet && (
-          <WalletButton
+          <HawaLogoButton
+            logo="wallet"
             buttonText={props.walletLabel}
             onClick={props.handleWallet}
           />
         )}
         {props.viaCreditCard && (
-          <VisaMasterButton
+          <HawaLogoButton
+            logo="visa/master"
             buttonText={props.visaMasterLabel}
             handleClick={props.handleCreditCard}
           />
         )}
         {props.viaMada && (
-          <MadaButton
+          <HawaLogoButton
+            logo="mada"
             buttonText={props.madaLabel}
             handleClick={props.handleMada}
           />
         )}
         {props.viaSTCPay && (
-          <STCPayButton
+          <HawaLogoButton
+            logo="stcpay"
             buttonText={props.stcPayLabel}
             handleClick={props.handleSTCPay}
           />
         )}
         {props.viaPayPal && (
-          <PayPalButton
+          <HawaLogoButton
+            logo="paypal"
             buttonText={props.paypalLabel}
             handleClick={props.handlePayPal}
           />
         )}
         {props.viaGooglePay && (
-          <GooglePayButton
+          <HawaLogoButton
+            logo="googlepay"
             buttonText={props.googlePayLabel}
             handleClick={props.handleGooglePay}
           />
         )}
         {props.viaApplePay && (
-          <ApplePayButton
+          <HawaLogoButton
+            logo="applepay"
             buttonText={props.applePayLabel}
             handleClick={props.handleApplePay}
           />

package/src/stories/BlocksStories/AuthForm.stories.js

@@ -5,7 +5,7 @@ import {
   SignInForm,
   SignUpForm
 } from "../../blocks/AuthForms";
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+import { HawaProvider } from "../../themes/HawaProvider";
 
 export default {
   title: "Blocks/AuthBlocks",
@@ -87,7 +87,8 @@ const ResetPasswordTemplate = (args) => {
 export const ResetPassword = ResetPasswordTemplate.bind({});
 ResetPassword.args = {
   theme: "primary",
-  showError: false
+  showError: false,
+  sent: false
 };
 const NewPasswordTemplate = (args) => {
   return (
@@ -99,5 +100,6 @@ const NewPasswordTemplate = (args) => {
 export const NewPassword = NewPasswordTemplate.bind({});
 NewPassword.args = {
   theme: "primary",
-  showError: false
+  showError: false,
+  passwordChanged: false
 };

package/src/stories/Introduction.stories.mdx

@@ -0,0 +1,229 @@
+import { Meta } from "@storybook/addon-docs"
+// import Code from './assets/code-brackets.svg';
+// import Colors from './assets/colors.svg';
+// import Comments from './assets/comments.svg';
+// import Direction from './assets/direction.svg';
+// import Flow from './assets/flow.svg';
+// import Plugin from './assets/plugin.svg';
+// import Repo from './assets/repo.svg';
+// import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    flex-direction:column;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# Welcome to Hawa
+
+<div className="tip-wrapper">
+  <span className="tip">Notice</span>This page is still in progress
+</div>
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Structure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    {/* <img src={Plugin} alt="plugin" /> */}
+    <h3>Layout</h3>
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    {/* <img src={StackAlt} alt="Build" /> */}
+    <h3>Blocks</h3>
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    {/* <img src={Colors} alt="colors" /> */}
+    <h3>Elements</h3>
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    {/* <img src={Flow} alt="flow" /> */}
+    <h3>UI</h3>
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    {/* <img src={Repo} alt="repo" /> */}
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
+    {/* <img src={Direction} alt="direction" /> */}
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
+    {/* <img src={Code} alt="code" /> */}
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    {/* <img src={Comments} alt="comments" /> */}
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
+  <code>src/stories/Introduction.stories.mdx</code>
+</div>

package/src/stories/UIStories/ActionButton.stories.js

@@ -1,37 +1,24 @@
 import React from "react";
-
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+import { HawaProvider } from "../../themes/HawaProvider";
 import { ActionButton } from "../../ui";
 
-const Template = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <ActionButton text={args.buttonLabel} />
-    </HawaProvider>
-  );
-};
-//types:
-//error (red)
-//warning (red)
-//notice (blue)
-
 export default {
-  title: "UI/ActionButton",
+  title: "Elements/Buttons/ActionButton",
   component: ActionButton,
   argTypes: {
     theme: {
-      description: "overwritten description",
-      table: {
-        type: {
-          summary: "something short"
-        },
-        defaultValue: { summary: "Hello" }
-      },
       options: ["primary", "secondary", "default"],
       control: { type: "select" }
     }
   }
 };
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <ActionButton text={args.buttonLabel} />
+    </HawaProvider>
+  );
+};
 
 Template.args = {
   showText: true,
@@ -51,3 +38,9 @@ Secondary.args = {
   buttonLabel: "test",
   theme: "secondary"
 };
+export const Default = Template.bind({});
+Default.args = {
+  showText: true,
+  buttonLabel: "test",
+  theme: "default"
+};

package/src/stories/UIStories/AdaptiveButton.stories.js

@@ -3,22 +3,8 @@ import CastIcon from "@mui/icons-material/Cast";
 import { HawaProvider } from "../../themes/HawaProvider";
 import { AdaptiveButton } from "../../ui";
 
-const Template = (args) => {
-  const theme = {
-    borderRadius: 10,
-    primaryColor: "#004fff",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <AdaptiveButton {...args} />
-    </HawaProvider>
-  );
-};
 export default {
-  title: "UI/AdaptiveButton",
+  title: "Elements/Buttons/AdaptiveButton",
   component: AdaptiveButton,
   argsTypes: {
     buttonLabel: { control: "text" },
@@ -26,40 +12,53 @@ export default {
     buttonColor: { control: "color" },
     padding: { control: "number" },
     hintTitle: { control: "text" },
-    hintContent: { control: "text" }
+    hintContent: { control: "text" },
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
   },
   args: {
-    // type: "text",
-    // buttonLabel: "Test"
-    // borderRadius: 15,
     hintTitle: "test",
     hintContent: "more test",
-    buttonColor: "#f9f9f9"
+    buttonColor: "#f9f9f9",
+    theme: "primary"
   }
 };
 
-export const Light = Template.bind({});
-Light.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  icon: <CastIcon />,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9"
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <AdaptiveButton {...args} />
+    </HawaProvider>
+  );
+};
+
+export const FullButton = Template.bind({});
+FullButton.args = {
+  // showText: true,
+  // buttonLabel: "test",
+  // borderRadius: 5,
+  // icon: <CastIcon />,
+  // textColor: "#000000",
+  // buttonColor: "#f9f9f9",
+  theme: "primary"
   // placeholder: "Example ...",
   // defaultValue: "This is default value",
   // inputLabel: "Text Field",
   // padding: 10
 };
 
-export const Dark = Template.bind({});
-Dark.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#878787",
-  textColor: "#ffffff",
-  icon: <CastIcon />
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+  // showText: true,
+  // buttonLabel: "test",
+  // borderRadius: 5,
+  // buttonColor: "#878787",
+  // textColor: "#ffffff",
+  // icon: <CastIcon />,
+  theme: "primary"
+
   // placeholder: "Exemple ...",
   // defaultValue: "This is default value",
   // inputLabel: "Text Field",
@@ -67,12 +66,14 @@ Dark.args = {
 };
 export const Danger = Template.bind({});
 Danger.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#c0c0c0",
-  danger: true,
-  icon: <CastIcon />
+  // showText: true,
+  // buttonLabel: "test",
+  // borderRadius: 5,
+  // buttonColor: "#c0c0c0",
+  // danger: true,
+  // icon: <CastIcon />,
+  theme: "primary"
+
   // placeholder: "Exemple ...",
   // defaultValue: "This is default value",
   // inputLabel: "Text Field",

package/src/stories/UIStories/LogoButtons.stories.js

@@ -0,0 +1,90 @@
+import React from "react";
+import { HawaProvider } from "../../themes/HawaProvider";
+import { ActionButton, HawaLogoButton } from "../../ui";
+
+export default {
+  title: "Elements/Buttons/LogoButtons",
+  component: ActionButton,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    },
+    buttonLabel: { control: "text" },
+    logo: { control: "text" }
+  },
+  args: {
+    buttonLabel: "test",
+    logo: "google",
+    theme: "primary"
+  }
+};
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <HawaLogoButton logo={args.logo} buttonText={args.buttonLabel} />
+    </HawaProvider>
+  );
+};
+
+export const Google = Template.bind({});
+Google.args = {
+  buttonLabel: "Sign in via Google",
+  logo: "google",
+  theme: "primary"
+};
+
+export const Twitter = Template.bind({});
+Twitter.args = {
+  buttonLabel: "Sign in via Twitter",
+  logo: "twitter",
+  theme: "primary"
+};
+export const Github = Template.bind({});
+Github.args = {
+  buttonLabel: "Sign in via Github",
+  logo: "github",
+  theme: "primary"
+};
+export const WalletPay = Template.bind({});
+WalletPay.args = {
+  buttonLabel: "Pay with Wallet",
+  logo: "wallet",
+  theme: "primary"
+};
+export const GooglePay = Template.bind({});
+GooglePay.args = {
+  buttonLabel: "Google Pay",
+  logo: "googlepay",
+  theme: "primary"
+};
+export const ApplePay = Template.bind({});
+ApplePay.args = {
+  buttonLabel: "Apple Pay",
+  logo: "applepay",
+  theme: "primary"
+};
+export const STCPay = Template.bind({});
+STCPay.args = {
+  buttonLabel: "STC Pay",
+  logo: "stcpay",
+  theme: "primary"
+};
+export const VisaMasterPay = Template.bind({});
+VisaMasterPay.args = {
+  buttonLabel: "Visa / Mastercard",
+  logo: "visa/master",
+  theme: "primary"
+};
+export const PayPal = Template.bind({});
+PayPal.args = {
+  buttonLabel: "PayPal",
+  logo: "paypal",
+  theme: "primary"
+};
+export const Mada = Template.bind({});
+Mada.args = {
+  buttonLabel: "Mada",
+  logo: "mada",
+  theme: "primary"
+};

package/src/themes/HawaProvider.js

@@ -22,6 +22,7 @@ export const defaultTheme = {
   margins: 10,
   paddings: 10,
   typography: {
+    fontFamily: ["IBMPlex"].join(","),
     primary: { color: "black" },
     secondary: { color: "white" }
   },
@@ -31,7 +32,9 @@ export const defaultTheme = {
       backgroundColor: allPrimaryAction,
       // margin: 10,
       marginTop: 10,
-      padding: 10,
+      padding: 30,
+      paddingTop: 0,
+      paddingBottom: 0,
       border: "1px solid #ced4da",
       height: 50,
       "&:focus": {
@@ -42,7 +45,9 @@ export const defaultTheme = {
       borderRadius: 10,
       backgroundColor: "#f90900",
       marginTop: 10,
-      padding: 10,
+      padding: 30,
+      paddingTop: 0,
+      paddingBottom: 0,
       border: "1px solid #ced4da",
       height: 50,
       "&:focus": {

package/src/ui/ActionButton.js

@@ -35,9 +35,7 @@ export const ActionButton = (props) => {
   }
 
   const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      ...actionButtonStyle
-    };
+    return { ...actionButtonStyle };
   });
   return <StyledButton {...props}>{props.text}</StyledButton>;
 };