zebpay-ui 0.0.3 → 0.0.4

package/src/components/Button/styles.ts

@@ -1,142 +0,0 @@
-import { css } from "@emotion/react";
-import { colors, typography, utils } from "../../styles";
-
-export const linkButton = css({
-  padding: 0,
-  backgroundColor: "transparent",
-  boxShadow: "none",
-  border: "none",
-  outline: "none",
-  ...typography.C3_14,
-  color: colors.Zeb_Solid_Bright_Blue,
-  "&.small": {
-    ...typography.C4_12,
-    color: colors.Zeb_Solid_Bright_Blue,
-  },
-});
-
-export const primaryButton = css({
-  background: colors.Zeb_Gradient_Blue_01,
-  borderRadius: utils.remConverter(8),
-  boxShadow: "none",
-  border: "none",
-  outline: "none",
-  whiteSpace: "nowrap",
-  ...typography.C4_12,
-  "&.small": {
-    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
-    ...typography.C4_12,
-  },
-  "&.medium": {
-    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
-    ...typography.C4_12,
-  },
-  "&.large": {
-    padding: `${utils.remConverter(8)} ${utils.remConverter(16)}`,
-    ...typography.C2_16,
-  },
-  "&.full-width": {
-    padding: `${utils.remConverter(8)} 0`,
-    width: "100%",
-  },
-  "&:disabled": {
-    opacity: 0.2,
-  },
-});
-
-export const secondaryButton = css({
-  padding: `${utils.remConverter(8)} ${utils.remConverter(16)}`,
-  background: colors.Zeb_Transparent_4,
-  border: `1px solid ${colors.Zeb_Solid_Bright_Blue}`,
-  borderRadius: "8px",
-  ...typography.C2_16,
-  "&.small": {
-    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
-    ...typography.C4_12,
-  },
-  "&.medium": {
-    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
-    ...typography.C4_12,
-  },
-  "&.large": {
-    padding: `${utils.remConverter(8)} ${utils.remConverter(16)}`,
-    ...typography.C2_16,
-  },
-  "&.full-width": {
-    padding: `${utils.remConverter(8)} 0`,
-  },
-  "&:disabled": {
-    borderColor: colors.Zeb_Solid_Grey,
-  },
-});
-
-export const specialButton = css({
-  padding: `${utils.remConverter(6)} 0`,
-  background: colors.Zeb_Gradient_Blue_01,
-  boxShadow: "none",
-  border: "none",
-  outline: "none",
-  borderRadius: "8px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  "&.small": {
-    width: "100%",
-    padding: `${utils.remConverter(8)} 0`,
-  },
-  "&.large": { width: "100%" },
-  "&.full-width": { width: "100%" },
-  "&.medium": { width: "100%" },
-});
-
-export const specialButtonText = css({
-  marginLeft: utils.remConverter(8),
-  ...typography.C3_14,
-});
-
-export const specialButtonSmText = css({
-  display: "none",
-});
-
-export const tertiaryButton = css({
-  padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
-  background: colors.Zeb_Transparent_4,
-  boxShadow: "none",
-  border: `1px solid ${colors.Zeb_Solid_Bright_Blue}`,
-  outline: "none",
-  borderRadius: "8px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  "&.medium": {
-    padding: `${utils.remConverter(8)} ${utils.remConverter(12)}`,
-  },
-});
-
-export const tertiaryButtonText = css({
-  marginLeft: utils.remConverter(4),
-  ...typography.C4_12,
-});
-
-export const tabButton = css({
-  border: `0.5px solid ${colors.Zeb_Solid_Light_Blue}`,
-  borderRadius: "4px",
-  padding: `${utils.remConverter(4)} ${utils.remConverter(8)}`,
-  ...typography.B5_12_semibold,
-  color: colors.Zeb_Solid_Light_Blue,
-  display: "flex",
-  justifyContent: "center",
-  flexGrow: 1,
-  textTransform: "uppercase",
-  cursor: "pointer",
-  "&.active": {
-    background: colors.Zeb_Solid_Dark_Blue,
-    borderColor: colors.Zeb_Solid_Bright_Blue,
-    ...typography.C4_12,
-  },
-});
-
-export const disabledButton = css({
-  opacity: 0.5,
-  cursor: "not-allowed",
-});

package/src/components/Button/typings.ts

@@ -1,20 +0,0 @@
-import { Interpolation, Theme } from "@emotion/react";
-
-export type ButtonSize = "small" | "medium" | "large" | "full-width";
-
-export type ButtonType =
-  | "link"
-  | "primary"
-  | "secondary"
-  | "special"
-  | "tertiary"
-  | "tab";
-
-export interface ButtonProps {
-  type: ButtonType;
-  size?: ButtonSize; // default is medium
-  onClick: () => void;
-  disabled?: boolean;
-  loading?: boolean;
-  style?: Interpolation<Theme>;
-}

package/src/components/Checkbox/index.tsx

@@ -1,44 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { FC } from "react";
-import * as checkboxStyles from "./styles";
-import { CheckboxProps } from "./typings";
-
-const Checkbox: FC<CheckboxProps> = ({
-  label,
-  value,
-  style,
-  checked,
-  onChange,
-  disabled,
-}) => {
-  return (
-    <label
-      css={[
-        checkboxStyles.checkboxContainer,
-        checkboxStyles.labelContainer,
-        style,
-        disabled ? checkboxStyles.disabledLabel : "",
-      ]}
-    >
-      {label && <div css={checkboxStyles.checkLabel}>{label}</div>}
-      <input
-        checked={checked}
-        onChange={(e) =>
-          onChange({ checked: e.target.checked, value: e.target.value })
-        }
-        type="checkbox"
-        css={checkboxStyles.input}
-        value={value}
-        disabled={disabled}
-      />
-      <span
-        css={[
-          checkboxStyles.checkmark,
-          checked && checkboxStyles.checkCheckmark,
-        ]}
-      />
-    </label>
-  );
-};
-
-export default Checkbox;

package/src/components/Checkbox/styles.ts

@@ -1,76 +0,0 @@
-import { css } from "@emotion/react";
-import { colors, typography, utils } from "../../styles";
-
-export const checkboxContainer = css({
-  minWidth: utils.remConverter(16),
-});
-
-export const labelContainer = css({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  height: "auto",
-  position: "relative",
-  cursor: "pointer",
-  marginBottom: 0,
-  ...typography.B4_14_semibold,
-  "&:hover": {
-    "input ~ .checkmark": {
-      backgroundColor: colors.Zeb_Solid_White,
-    },
-  },
-});
-
-export const disabledLabel = css({
-  opacity: 0.5,
-  cursor: "not-allowed",
-});
-
-export const input = css({
-  opacity: 0,
-  cursor: "pointer",
-  height: 0,
-  width: 0,
-});
-
-export const checkCheckmark = css({
-  backgroundColor: colors.Zeb_Solid_White,
-  border: `1px solid ${colors.Zeb_Solid_White}`,
-  borderRadius: 4,
-
-  "&:after": {
-    display: "block",
-  },
-});
-
-export const checkLabel = css({
-  marginLeft: utils.remConverter(20),
-});
-
-export const checkComponent = css({
-  marginLeft: utils.remConverter(20),
-});
-
-export const checkmark = css({
-  position: "absolute",
-  top: "50%",
-  left: 0,
-  transform: "translateY(-50%)",
-  height: utils.remConverter(12),
-  width: utils.remConverter(12),
-  backgroundColor: "transparent",
-  border: `1px solid ${colors.Zeb_Solid_White}`,
-  borderRadius: 4,
-  "&:after": {
-    content: "''",
-    position: "absolute",
-    display: "none",
-    left: 2,
-    top: "45%",
-    width: 4,
-    height: 8,
-    border: `solid ${colors.Zeb_Solid_Dark_Blue}`,
-    borderWidth: "0 2px 2px 0",
-    transform: "rotate(45deg) translate(-50%, -50%)",
-  },
-});

package/src/components/Checkbox/typings.ts

@@ -1,11 +0,0 @@
-import { SerializedStyles } from "@emotion/react";
-import { ReactText } from "react";
-
-export interface CheckboxProps {
-  value: ReactText;
-  checked: boolean;
-  onChange: (args: { checked: boolean; value: ReactText }) => void;
-  label?: string | JSX.Element;
-  disabled?: boolean;
-  style?: SerializedStyles;
-}

package/src/components/CircularLoader/index.tsx

@@ -1,22 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import { FC } from "react";
-import { loader } from "./style";
-import { CircularLoaderProps } from "./typings";
-
-const CircularLoader: FC<CircularLoaderProps> = ({ size, color }) => {
-  return (
-    <div
-      css={[
-        loader,
-        css({
-          height: `${size}px`,
-          width: `${size}px`,
-          color: color,
-        }),
-      ]}
-    />
-  );
-};
-
-export default CircularLoader;

package/src/components/CircularLoader/style.ts

@@ -1,18 +0,0 @@
-import { css, keyframes } from "@emotion/react";
-
-export const rotateAnimation = keyframes`
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }`;
-
-export const loader = css({
-  borderRadius: "100%",
-  borderWidth: 3,
-  borderStyle: "solid",
-  borderTopColor: "rgba(255,255,255,0.4)",
-  margin: "0 auto",
-  animation: `${rotateAnimation} 1s linear infinite`,
-});

package/src/components/DateRangePicker/index.tsx

@@ -1,36 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import React from "react";
-import { DateRange } from "react-date-range";
-import "./styles.css";
-
-interface DateRangePickerProps {
-  months: number;
-  onChange(ranges: Selection): void;
-  ranges: Selection;
-}
-
-interface Selection {
-  startDate: Date;
-  endDate: Date;
-}
-
-const DateRangePicker: React.FC<DateRangePickerProps> = ({
-  months,
-  onChange,
-  ranges,
-}) => {
-  return (
-    <DateRange
-      ranges={[ranges]}
-      onChange={(rangesByKey) => onChange(rangesByKey as unknown as Selection)}
-      months={months}
-      direction="horizontal"
-      showDateDisplay={false}
-      showPreview={false}
-      showMonthAndYearPickers={false}
-      moveRangeOnFirstSelection={true}
-    />
-  );
-};
-
-export default DateRangePicker;