zebpay-ui 0.0.43 → 0.0.45

package/dist/esm/styles/colors.d.ts

@@ -1,49 +0,0 @@
-declare const colors: {
-    Zeb_Solid_White: string;
-    Zeb_Solid_BG_Blue: string;
-    Zeb_Solid_Dark_Blue: string;
-    Zeb_Solid_Bright_Blue: string;
-    Zeb_Solid_Light_Blue: string;
-    Zeb_Solid_Green: string;
-    Zeb_Solid_Light_Green: string;
-    Zeb_Solid_Red: string;
-    Zeb_Solid_Light_Red: string;
-    Zeb_Solid_Yellow: string;
-    Zeb_Solid_Grey: string;
-    Zeb_Solid_Dark_Grey: string;
-    Zeb_Solid_Black: string;
-    Zeb_Solid_Light_Blue_01: string;
-    Zeb_Solid_Grey_01: string;
-    Zeb_Solid_Grey_02: string;
-    Zeb_Solid_Vivid_Blue: string;
-    Zeb_Solid_Very_Dark_Blue: string;
-    Zeb_Solid_Very_Dark_Grey_Blue: string;
-    Zeb_Solid_Light_Grey: string;
-    Zeb_Gradient_Blue_01: string;
-    Zeb_Gradient_Blue_02: string;
-    Zeb_Gradient_Dark_Blue: string;
-    Zeb_Transparent_25: string;
-    Zeb_Transparent_Green: string;
-    Zeb_Transparent_Yellow: string;
-    Zeb_Transparent_Red: string;
-    Zeb_Transparent_Yellow_01: string;
-    Zeb_Transparent_Grey: string;
-    Zeb_Trnsparent_Blue: string;
-    Zeb_BG_Blue: string;
-    Zeb_BG_Light_Blue: string;
-    Zeb_BG_Green: string;
-    Zeb_BG_Red: string;
-    Zeb_BG_Yellow: string;
-    Zeb_BG_Success: string;
-    Zeb_BG_Failure: string;
-    Zeb_BG_Default: string;
-    Zeb_BG_Translucent_Default: string;
-    Zeb_Transparent_4: string;
-    Zeb_Effects_Shadow_Hover: string;
-    Zeb_Effects_Shadow_W_Drawer: string;
-    Zeb_Effects_Shadow_M_Drawer: string;
-    Zeb_Effects_Shadow_Hover_Up: string;
-    Zeb_Effects_Shimmer: string;
-    Zeb_Effects_ShimmerLight: string;
-};
-export default colors;

package/dist/esm/styles/index.d.ts

@@ -1,5 +0,0 @@
-import colors from "./colors";
-import typography from "./typography";
-import utils from "./utils";
-import mixins from "./mixins";
-export { colors, typography, utils, mixins };

package/dist/esm/styles/mixins.d.ts

@@ -1,28 +0,0 @@
-declare const mixins: {
-    flexJustifiedStart: import("@emotion/utils").SerializedStyles;
-    flexJustifiedBetween: import("@emotion/utils").SerializedStyles;
-    flexJustifiedCenter: import("@emotion/utils").SerializedStyles;
-    flexJustifiedAround: import("@emotion/utils").SerializedStyles;
-    flexJustifiedEnd: import("@emotion/utils").SerializedStyles;
-    flexAlignCenter: import("@emotion/utils").SerializedStyles;
-    flexAlignStart: import("@emotion/utils").SerializedStyles;
-    flexAlignEnd: import("@emotion/utils").SerializedStyles;
-    flexWrap: import("@emotion/utils").SerializedStyles;
-    flexNoWrap: import("@emotion/utils").SerializedStyles;
-    flexColumn: import("@emotion/utils").SerializedStyles;
-    textSuccess: import("@emotion/utils").SerializedStyles;
-    textError: import("@emotion/utils").SerializedStyles;
-    bgSuccess: import("@emotion/utils").SerializedStyles;
-    bgError: import("@emotion/utils").SerializedStyles;
-    textFaded: import("@emotion/utils").SerializedStyles;
-    textCapitalize: import("@emotion/utils").SerializedStyles;
-    textUppercase: import("@emotion/utils").SerializedStyles;
-    textAlignmentCenter: import("@emotion/utils").SerializedStyles;
-    textAlignmentLeft: import("@emotion/utils").SerializedStyles;
-    textAlignmentRight: import("@emotion/utils").SerializedStyles;
-    textAlignmentStart: import("@emotion/utils").SerializedStyles;
-    textAlignmentEnd: import("@emotion/utils").SerializedStyles;
-    cursorPointer: import("@emotion/utils").SerializedStyles;
-    cursorNA: import("@emotion/utils").SerializedStyles;
-};
-export default mixins;

package/dist/esm/styles/typography.d.ts

@@ -1,6 +0,0 @@
-import { CSSObject } from "@emotion/react";
-interface Styles {
-    [key: string]: CSSObject;
-}
-declare const typography: Styles;
-export default typography;

package/dist/esm/styles/utils.d.ts

@@ -1,10 +0,0 @@
-declare const utils: {
-    remConverter: (value: number) => string;
-    widthPercentage: (value: number) => import("@emotion/utils").SerializedStyles;
-    heightPercentage: (value: number) => import("@emotion/utils").SerializedStyles;
-    mr: (value: number) => import("@emotion/utils").SerializedStyles;
-    ml: (value: number) => import("@emotion/utils").SerializedStyles;
-    mt: (value: number) => import("@emotion/utils").SerializedStyles;
-    mb: (value: number) => import("@emotion/utils").SerializedStyles;
-};
-export default utils;

package/tests/Accordion.test.tsx

@@ -1,40 +0,0 @@
-import * as React from "react";
-import Accordion from "../src/components/Accordion";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  title: "Testing",
-  isOpen: true,
-};
-
-describe("Accordion Test", () => {
-  it("is rendered correctly", () => {
-    render(
-      <Accordion onToggle={() => {}} {...defaultProps}>
-        Accordion content
-      </Accordion>
-    );
-    expect(
-      <Accordion onToggle={() => {}} {...defaultProps}>
-        Accordion content
-      </Accordion>
-    ).toMatchSnapshot();
-  });
-
-  test("is clicked", () => {
-    const handleClick = jest.fn();
-    render(
-      <Accordion isOpen={true} onToggle={handleClick} title={"Testing"}>
-        <p>AB</p>
-      </Accordion>
-    );
-    const divClick = screen.getByTestId("accordion");
-    fireEvent.click(divClick);
-
-    expect(screen.queryByText("AB")).toBeInTheDocument();
-
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/Avatar.test.tsx

@@ -1,76 +0,0 @@
-import * as React from "react";
-import Avatar from "../src/components/Avatar";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  src: "abc",
-  alt: "abc",
-  id: 1,
-};
-
-describe("Avatar Test", () => {
-  it("is rendered correctly", () => {
-    render(<Avatar {...defaultProps} spacing="medium" />);
-    expect(<Avatar {...defaultProps} spacing="medium" />).toMatchSnapshot();
-  });
-
-  test("is clicked", () => {
-    const handleClick = jest.fn();
-    render(<Avatar {...defaultProps} spacing="medium" onClick={handleClick} />);
-    const divClick = screen.getByTestId("avatar");
-
-    fireEvent.click(divClick);
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  test("custom Child", () => {
-    render(
-      <Avatar {...defaultProps} spacing="medium">
-        W
-      </Avatar>
-    );
-
-    expect(screen.queryByText("W")).toBeInTheDocument();
-  });
-  test("loading state", () => {
-    render(
-      <Avatar {...defaultProps} spacing="medium" loading={true}>
-        W
-      </Avatar>
-    );
-
-    expect(screen.queryByText("W")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("avatar")).not.toBeInTheDocument();
-    expect(screen.queryByTestId("shimmer")).toBeInTheDocument();
-  });
-
-  test("size small change", () => {
-    render(
-      <Avatar {...defaultProps} spacing="medium" size="small" loading={true}>
-        W
-      </Avatar>
-    );
-    expect(screen.getByTestId("shimmer")).toHaveStyle("width:24px");
-    expect(screen.getByTestId("shimmer")).toHaveStyle("height:24px");
-  });
-  test("size medium change", () => {
-    render(
-      <Avatar {...defaultProps} spacing="medium" size="medium" loading={true}>
-        W
-      </Avatar>
-    );
-    expect(screen.getByTestId("shimmer")).toHaveStyle("width:28px");
-    expect(screen.getByTestId("shimmer")).toHaveStyle("height:28px");
-  });
-  test("size large change", () => {
-    render(
-      <Avatar {...defaultProps} spacing="medium" size="large" loading={true}>
-        W
-      </Avatar>
-    );
-    expect(screen.getByTestId("shimmer")).toHaveStyle("width:32px");
-    expect(screen.getByTestId("shimmer")).toHaveStyle("height:32px");
-  });
-});

package/tests/Button.test.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import Button from "../src/components/Button";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  onClick: jest.fn(),
-};
-
-describe("Button Test", () => {
-  it("is rendered correctly", () => {
-    render(
-      <Button type="link" {...defaultProps}>
-        Click Me!
-      </Button>
-    );
-    expect(
-      <Button type="link" {...defaultProps}>
-        Click Me!
-      </Button>
-    ).toMatchSnapshot();
-  });
-  test("is clicked", () => {
-    const handleClick = jest.fn();
-    render(
-      <Button type="link" onClick={handleClick}>
-        Click Me!
-      </Button>
-    );
-    const button = screen.getByTestId("button");
-    fireEvent.click(button);
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/Input.test.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import Input from "../src/components/Input";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  label: "Testing Input",
-  placeholder: "Placeholder",
-  value: "Default",
-  onChange: () => {},
-};
-
-describe("Input Test", () => {
-  //   it("is rendered correctly", () => {
-  //     render(<Input {...defaultProps} />);
-  //     expect(<Input {...defaultProps} />).toMatchSnapshot();
-  //   });
-
-  test("is clicked", () => {
-    const handleChange = jest.fn();
-
-    render(<Input {...defaultProps} />);
-    const input = screen.getByTestId("input");
-
-    // expect(screen.getByText("Placeholder")).toBeInTheDocument();
-
-    fireEvent.change(screen.getByPlaceholderText("Placeholder"), {
-      target: { value: "updated" },
-    });
-
-    // expect(input).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("Placeholder")).toHaveValue("Default");
-
-    // fireEvent.click(input);
-    // expect(handleChange).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/PinInput.test.tsx

@@ -1,89 +0,0 @@
-import * as React from "react";
-import PinInput from "../src/components/PinInput";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  length: 6,
-  label: "PinTest",
-  values: ["1", "1", "1", "1", "1", "1"],
-};
-
-describe("PinInput", () => {
-  it("is rendered correctly", () => {
-    render(<PinInput {...defaultProps} />);
-    expect(<PinInput {...defaultProps} />).toMatchSnapshot();
-  });
-
-  test("Input test", () => {
-    render(<PinInput {...defaultProps} />);
-
-    expect(screen.getAllByDisplayValue("1")).toHaveLength(6);
-
-    expect(screen.getByText("PinTest")).not.toHaveStyle("color:#EA6161");
-    expect(screen.getAllByDisplayValue("1")[0]).not.toHaveStyle(
-      "border:1px solid #EA6161"
-    );
-
-    const inputfocus = screen.getByTestId("pinInput0");
-    expect(inputfocus).not.toHaveFocus();
-    expect(screen.queryByTestId("pininput-label")).toBeInTheDocument();
-  });
-
-  test(" Masking test", () => {
-    render(<PinInput mask={true} {...defaultProps} />);
-
-    expect(screen.getAllByDisplayValue("*")).toHaveLength(6);
-    expect(screen.queryAllByDisplayValue("1")).not.toHaveLength(6);
-  });
-
-  test(" AutoFocus test", () => {
-    render(<PinInput {...defaultProps} autoFocus={true} />);
-    const inputfocus = screen.getByTestId("pinInput0");
-    expect(inputfocus).toHaveFocus();
-  });
-
-  test("Invalid Test", () => {
-    render(<PinInput {...defaultProps} invalid={true} />);
-
-    expect(screen.getByText("PinTest")).toHaveStyle("color:#EA6161");
-
-    const inputsAll = screen.getAllByDisplayValue("1");
-    for (let i = 0; i < inputsAll.length; i++) {
-      expect(inputsAll[i]).toHaveStyle("border:1px solid #EA6161");
-    }
-  });
-
-  test("disabled test", () => {
-    render(<PinInput {...defaultProps} disabled={true} />);
-
-    const inputsAll = screen.getAllByDisplayValue("1");
-    for (let i = 0; i < inputsAll.length; i++) {
-      expect(inputsAll[i]).toBeDisabled();
-      expect(inputsAll[i]).toHaveStyle("background: transparent");
-      expect(inputsAll[i]).toHaveStyle(
-        " border:1px solid rgba(192, 192, 238, 0.2)"
-      );
-      expect(inputsAll[i]).toHaveStyle("cursor:not-allowed");
-    }
-  });
-  test("No label test", () => {
-    render(<PinInput length={6} values={["1", "1", "1", "1", "1", "1"]} />);
-
-    expect(screen.queryByTestId("pininput-label")).toBeNull();
-  });
-
-  test("On change test", () => {
-    const handleChange = jest.fn();
-    render(
-      <PinInput {...defaultProps} disabled={true} onChange={handleChange} />
-    );
-    const inputsAll = screen.getAllByDisplayValue("1");
-    for (let i = 0; i < inputsAll.length; i++) {
-      fireEvent.change(inputsAll[i], { target: { value: "2" } });
-    }
-
-    expect(handleChange).toHaveBeenCalledTimes(6);
-  });
-});

package/tests/Popper.test.tsx

@@ -1,50 +0,0 @@
-import * as React from "react";
-import Popper from "../src/components/Popper";
-import { render, fireEvent, cleanup, screen } from "@testing-library/react";
-
-afterEach(cleanup);
-
-const defaultProps = {
-  content: <p>content</p>,
-};
-
-describe("Popper", () => {
-  it("is rendered correctly", () => {
-    render(
-      <Popper {...defaultProps}>
-        <p>Toggle</p>
-      </Popper>
-    );
-    expect(
-      <Popper {...defaultProps}>
-        <p>Toggle</p>
-      </Popper>
-    ).toMatchSnapshot();
-  });
-
-  test("Click test", () => {
-    const handleClick = jest.fn();
-    render(
-      <Popper {...defaultProps} onClose={handleClick}>
-        <p>Toggle</p>
-      </Popper>
-    );
-
-    const divClick = screen.getByTestId("tooltip-div");
-
-    //No Click (no content to be shown)
-    expect(screen.queryByText("content")).not.toBeInTheDocument();
-
-    //On Click ( content to be shown)
-    fireEvent.click(divClick);
-    expect(screen.queryByText("content")).toBeInTheDocument();
-    // expect(divClick).toHaveBeenCalledTimes(1);
-
-    const closeButtonClick = screen.getByTestId("tooltip-close-button");
-
-    //On Close Button Click (no content to be shown)
-    fireEvent.click(closeButtonClick);
-    expect(screen.queryByText("content")).not.toBeInTheDocument();
-    // expect(closeButtonClick).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/RewardOMeter.test.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-import RewardOMeter from "../src/components/RewardOMeter";
-import { render, fireEvent, screen, getByTestId } from "@testing-library/react";
-import { css } from "@emotion/react";
-
-const args = {
-    primaryList: {
-      data: [
-        { color: "#1ECAA233", percentage: 100 / 6 },
-        { color: "#1ECAA2", percentage: 100 / 6 },
-        { color: "#F9C35C", percentage: 100 / 6 },
-        { color: "#FFB100", percentage: 100 / 6 },
-        { color: "#EA6161", percentage: 100 / 6 },
-        { color: "#AD3030", percentage: 100 / 6 },
-      ],
-      width: 12,
-      radius: 85,
-    },
-    needleProperties: {
-      angle: 180 / 3,
-      size: 60,
-    },
-    secondaryList: {
-      data: [
-        { color: "#141B3A", percentage: 100 / 6 },
-        { color: "#062646", percentage: 100 / 6 },
-        { color: "#2F2528", percentage: 100 / 6 },
-        { color: "#302100", percentage: 100 / 6 },
-        { color: "#2C122A", percentage: 100 / 6 },
-        { color: "#210915", percentage: 100 / 6 },
-      ],
-      width: 10,
-      radius: 74,
-    },
-    style: css({
-      backgroundColor: "#181837",
-    }),
-  }
-
-describe("RewardOMeter", () => {
-  it("is rendered correctly", () => {
-    render(
-      <RewardOMeter {...args} />
-    );
-    expect(
-      <RewardOMeter {...args} />
-    ).toMatchSnapshot();
-  });
-
-  test("needle test", () => {
-    render(
-      <RewardOMeter {...args} />
-    );
-    
-    expect(screen.getByTestId("icon")).toBeInTheDocument();
-    expect(screen.getByTestId("icon")).toHaveStyle("font-size: 60px;")
-    expect(screen.getByTestId("icon")).toHaveStyle("transform: rotate(-30deg);")
-  });
-
-  test("color rendered properly", () => {
-    render(
-      <RewardOMeter {...args} />
-    );
-
-    expect(screen.getByRole("img")).toBeInTheDocument();
-
-    expect(screen.getByTestId("circle-svg0")).toBeInTheDocument();
-    expect(screen.getByTestId("circle-svg0")).toHaveAttribute("stroke", "#1ECAA233");
-
-    expect(screen.getByTestId("circle-svg1")).toBeInTheDocument();
-    expect(screen.getByTestId("circle-svg1")).toHaveAttribute("stroke", "#1ECAA2");
-  })
-});

package/tests/SearchInput.test.tsx

@@ -1,34 +0,0 @@
-import * as React from "react";
-import { SearchInput } from "../src/components";
-import { render, fireEvent, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("Search Input test", () => {
-  it("is rendered correctly", () => {
-    render(
-      <SearchInput
-        placeholder="Select Coin"
-        value=""
-        onChange={() => { }}
-      />
-    );
-    expect(
-      <SearchInput
-        placeholder="Select Coin"
-        value=""
-        onChange={() => { }}
-      />
-    ).toMatchSnapshot();
-  });
-
-  test("typing input", () => {
-    const onChangeHandler = jest.fn();
-    render(
-      <SearchInput
-        placeholder="Select Coin"
-        value=""
-        onChange={onChangeHandler}
-      />
-    );
-  });
-});

package/tests/Select.test.tsx

@@ -1,74 +0,0 @@
-import * as React from "react";
-import Select from "../src/components/Select";
-import { render, fireEvent, screen } from "@testing-library/react";
-import { css } from "@emotion/react";
-
-const optionsList = [
-  { label: "FIRST", value: "FIRST" },
-  { label: "SECOND", value: "SECOND" },
-  { label: "THIRD", value: "THIRD" },
-  { label: "FOURTH", value: "FOURTH" },
-  { label: "FIFTH", value: "FIFTH" }
-]
-
-describe("Select Test", () => {
-  it("is rendered correctly", () => {
-    render(
-      <Select
-        placeholder="Select Coin"
-        options={[]}
-        style={css({})}
-        selected=""
-        onChange={() => { }}
-      />
-    )
-    expect(<Select
-      placeholder="Select Coin"
-      options={[]}
-      style={css({})}
-      selected=""
-      onChange={() => { }}
-    />).toMatchSnapshot();
-  });
-
-  test("dropdown functionality", () => {
-    render(
-      <Select
-        placeholder="Select Coin"
-        options={optionsList}
-        selected=""
-        onChange={() => {}}
-      />
-    );
-
-    fireEvent.click(screen.getByTestId("button"));
-
-    expect(screen.getByText("FIRST")).toBeInTheDocument();
-    expect(screen.getByText("SECOND")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByTestId("button"));
-
-    expect(screen.queryByText("FIRST")).not.toBeInTheDocument();
-    expect(screen.queryByText("SECOND")).not.toBeInTheDocument();
-  });
-
-  test("select functionality", () => {
-    render(
-      <Select
-        placeholder="Select Coin"
-        options={optionsList}
-        style={css({})}
-        selected=""
-        onChange={() => { }}
-      />
-    );
-
-    fireEvent.click(screen.getByTestId("button"));
-    fireEvent.click(screen.getByText("FIRST"));
-
-    expect(screen.queryByText("SECOND")).not.toBeInTheDocument();
-    expect(screen.queryByText("Select Coin")).not.toBeInTheDocument();
-    expect(screen.getByText("FIRST")).toBeInTheDocument();
-
-  });
-})