@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Input/Input.js

@@ -0,0 +1,108 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Wrapper, Label, InputWrap } from "./Input.styles.js";
+const Input = (props) => {
+  const {
+    type = "text",
+    id,
+    name,
+    label = "",
+    placeholder = "",
+    value = "",
+    error = false,
+    touched = false,
+    readOnly = false,
+    inverted = false,
+    dashboard = false,
+    disabled,
+    inputWrapStyle,
+    wrapperStyle,
+    autoHeightLabel,
+    // Destructure these so they don't get spread to the input
+    onChange: onChangeProp,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+    ...restProps
+  } = props;
+  const [labelUp, setLabelUp] = useState(false);
+  const [hasFocus, setHasFocus] = useState(false);
+  const checkLabel = (focus) => {
+    setHasFocus(focus);
+    setLabelUp(focus || !!value);
+  };
+  useEffect(() => {
+    checkLabel(false);
+  }, []);
+  useEffect(() => {
+    if (!!value && !labelUp) {
+      checkLabel(false);
+    }
+  }, [labelUp, value]);
+  useEffect(() => {
+    if (value && !labelUp) setLabelUp(true);
+  }, [value, labelUp]);
+  const onBlur = (e, field) => {
+    onBlurProp?.(e, field);
+    checkLabel(false);
+  };
+  const onFocus = (e, field) => {
+    onFocusProp?.(e, field);
+    checkLabel(true);
+  };
+  const onChange = (e, field) => {
+    onChangeProp?.(e, field);
+  };
+  return /* @__PURE__ */ jsxs(Wrapper, { inverted, style: wrapperStyle, children: [
+    label && /* @__PURE__ */ jsx(Label, { isUp: labelUp, active: hasFocus, error: error && touched, htmlFor: id, autoHeightLabel, children: label }),
+    /* @__PURE__ */ jsx(
+      InputWrap,
+      {
+        error: error && touched,
+        dashboard,
+        disabled,
+        style: inputWrapStyle,
+        autoHeightLabel,
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type,
+            id,
+            name,
+            value,
+            onChange,
+            onBlur,
+            onFocus,
+            readOnly,
+            placeholder,
+            disabled,
+            style: { WebkitAppearance: "none", WebkitBorderRadius: 0 },
+            ...restProps
+          }
+        )
+      }
+    )
+  ] });
+};
+Input.propTypes = {
+  type: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  readOnly: PropTypes.bool,
+  inverted: PropTypes.bool,
+  dashboard: PropTypes.bool
+};
+export {
+  Input,
+  Label as InputLabel,
+  InputWrap,
+  Wrapper as InputWrapper
+};

package/dist/components/Input/Input.styles.js

@@ -0,0 +1,154 @@
+import styled, { css } from "styled-components";
+import theme from "../../styles/theme.js";
+const Label = styled.label.withConfig({
+  shouldForwardProp: (props) => !["autoHeightLabel", "isUp", "active", "error"].includes(props)
+})`
+  z-index: 11;
+  display: block;
+  position: absolute;
+  left: 0;
+  top: -2px;
+  font-weight: 500;
+  height: 12px;
+  font-size: 11px;
+  line-height: 20px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: ${() => theme.cBlack};
+  pointer-events: none;
+  transform: translateY(15px);
+  transition:
+    transform 0.2s,
+    font-size 0.2s;
+
+  ${(props) => props.autoHeightLabel && `
+      height:auto;
+      position: relative;
+    `}
+
+  ${(props) => props.isUp && `
+    font-size: 10px;
+    transform: translateY(0);
+  `}
+
+  ${(props) => props.active && `
+    color: ${theme.cPrimary};
+  `}
+
+  ${(props) => props.error && `
+    color: ${theme.cWarning};
+  `}
+`;
+const InputWrap = styled.div.withConfig({
+  shouldForwardProp: (props) => !["autoHeightLabel", "disabled", "dashboard", "error"].includes(props)
+})`
+  position: relative;
+
+  & > input {
+    z-index: 0;
+    font-family: 'Open sans';
+    display: block;
+    width: 100%;
+    height: 40px;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
+    padding: 15px 0;
+    padding-bottom: 5px;
+    box-shadow: none;
+    border: 0;
+    outline: 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid ${() => theme.cGrey};
+    color: ${() => theme.cBlack};
+    background-color: transparent;
+    transition: border-color 0.2s;
+
+    ${(props) => props.autoHeightLabel && `
+        height:20px;
+        padding-top:0;
+      `}
+
+    &:focus,
+    &:hover {
+      border-top-color: transparent;
+      border-bottom-color: ${() => theme.cPrimary};
+    }
+
+    &::placeholder {
+      color: transparent;
+      opacity: 0;
+    }
+  }
+
+  ${(props) => props.disabled && css`
+      & > input {
+        color: ${() => theme.cGrey2};
+        &:focus,
+        &:hover {
+          border-top-color: transparent;
+          border-bottom-color: ${() => theme.cGrey};
+        }
+      }
+    `}
+
+  ${(props) => props.dashboard && css`
+      & > input {
+        border: 0;
+        padding: 0;
+        height: 22px;
+        font-family: 'Open Sans';
+        font-weight: 300;
+        font-size: 14px;
+        line-height: 22px;
+        letter-spacing: 0.53px;
+        text-transform: normal;
+        color: ${theme.cBlack};
+
+        &::placeholder {
+          color: ${theme.cGrey2};
+          opacity: 1;
+        }
+      }
+    `}
+    
+  ${(props) => props.error && `
+    color: ${theme.cWarning};
+  `}
+`;
+const Wrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["inverted"].includes(props)
+})`
+  position: relative;
+  display: block;
+
+  input:-webkit-autofill {
+    border: none;
+    border-bottom: 1px solid #e1e1e1;
+    box-shadow: 0 0 0px 1000px #fff inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  ${(props) => props.inverted && css`
+      ${Label} {
+        color: ${theme.cWhite};
+        opacity: 0.4;
+      }
+      ${InputWrap} {
+        & > input {
+          color: ${theme.cWhite};
+          border-bottom-color: ${theme.cWhite};
+
+          &:focus,
+          &:hover {
+            border-bottom-color: rgba(255, 255, 255, 0.4);
+          }
+        }
+      }
+    `}
+`;
+export {
+  InputWrap,
+  Label,
+  Wrapper
+};

package/dist/components/Input/InputPassword.js

@@ -0,0 +1,122 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import stdin_default$1 from "../SvgIcons/CapsLockSvg.js";
+import "../SvgIcons/SocialInstagram.js";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+import { Wrapper, Label, InputWrap } from "./Input.styles.js";
+import { InfoIconWrapper, ShowPassword, BottomWrap, PasswordStrengthWrap, PasswordStrengthIndicators, PasswordStrengthIndicator, PasswordStrengthText, CapslockIndicator } from "./InputPassword.styles.js";
+const PasswordStrength = {
+  NONE: "none",
+  WEAK: "Weak",
+  MEDIUM: "Average",
+  STRONG: "Excellent"
+};
+const InputPassword = (props) => {
+  const {
+    label = "",
+    id,
+    name,
+    value = "",
+    error = false,
+    touched = false,
+    info = "",
+    showStrength = false,
+    autoComplete = "current-password"
+  } = props;
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [isCapslockOn, setIsCapslockOn] = useState(false);
+  const [labelUp, setLabelUp] = useState(!!value);
+  const [hasFocus, setHasFocus] = useState(false);
+  useEffect(() => {
+    setLabelUp(hasFocus || !!value);
+  }, [hasFocus, value]);
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+  const handleCapslock = (e) => {
+    setIsCapslockOn(e.getModifierState("CapsLock"));
+  };
+  const onFocus = (e, field) => {
+    props.onFocus?.(e, field);
+    setHasFocus(true);
+  };
+  const onBlur = (e, field) => {
+    if (props.onBlur) props.onBlur(e, field);
+    setHasFocus(false);
+  };
+  const onChange = (e, field) => {
+    props.onChange?.(e, field);
+  };
+  const passwordStrengthFunction = () => {
+    if (value.length === 0) {
+      return PasswordStrength.NONE;
+    }
+    if (value.length < 6) {
+      return PasswordStrength.WEAK;
+    }
+    if (value.length < 11) {
+      return PasswordStrength.MEDIUM;
+    }
+    return PasswordStrength.STRONG;
+  };
+  const passwordStrength = passwordStrengthFunction();
+  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+    label && /* @__PURE__ */ jsx(Label, { isUp: labelUp, active: hasFocus, error: error && touched, htmlFor: id, children: label }),
+    info && /* @__PURE__ */ jsx(InfoIconWrapper, { isPassword: true, labelUp, children: /* @__PURE__ */ jsx(InfoIcon, { position: "bottom", title: info, noMarginLeft: true }) }),
+    /* @__PURE__ */ jsx(InputWrap, { error: error && touched, children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: isPasswordVisible ? "text" : "password",
+        id,
+        name,
+        value,
+        autoComplete,
+        onChange,
+        onBlur,
+        onFocus,
+        onKeyUp: handleCapslock,
+        onKeyDown: handleCapslock
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ShowPassword, { onClick: togglePasswordVisibility, children: isPasswordVisible ? /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye-off" }) : /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye" }) }),
+    /* @__PURE__ */ jsxs(BottomWrap, { children: [
+      showStrength ? /* @__PURE__ */ jsxs(PasswordStrengthWrap, { children: [
+        /* @__PURE__ */ jsxs(PasswordStrengthIndicators, { passwordStrength, children: [
+          /* @__PURE__ */ jsx(PasswordStrengthIndicator, {}),
+          /* @__PURE__ */ jsx(PasswordStrengthIndicator, {}),
+          /* @__PURE__ */ jsx(PasswordStrengthIndicator, {})
+        ] }),
+        /* @__PURE__ */ jsx(PasswordStrengthText, { children: passwordStrength !== PasswordStrength.NONE && passwordStrength })
+      ] }) : (
+        // info && (
+        //   <InfoIconWrapper>
+        //     <InfoIcon position="bottom" title={info} noMarginLeft />
+        //   </InfoIconWrapper>
+        // )
+        /* @__PURE__ */ jsx(Fragment, {})
+      ),
+      /* @__PURE__ */ jsx(CapslockIndicator, { children: isCapslockOn && /* @__PURE__ */ jsx(stdin_default$1, {}) })
+    ] })
+  ] });
+};
+InputPassword.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  value: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  info: PropTypes.string,
+  showStrength: PropTypes.bool,
+  autoComplete: PropTypes.string
+};
+var stdin_default = InputPassword;
+export {
+  InputPassword,
+  PasswordStrength,
+  stdin_default as default
+};

package/dist/components/Input/InputPassword.styles.js

@@ -0,0 +1,166 @@
+import styled, { css } from "styled-components";
+import { PasswordStrength } from "./InputPassword.js";
+import theme from "../../styles/theme.js";
+const BottomWrap = styled.div`
+  position: relative;
+  margin-top: 6px;
+`;
+const ShowPassword = styled.div`
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  transition: color 0.2s;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 12px 0;
+  height: 40px;
+  width: 20px;
+  text-align: right;
+
+  &:hover {
+    color: ${() => theme.cPrimary};
+  }
+`;
+const CapslockIndicator = styled.div`
+  position: absolute;
+  top: 4px;
+  right: 2px;
+
+  & > svg {
+    fill: ${() => theme.cBlack};
+  }
+`;
+const PasswordStrengthWrap = styled.div`
+  padding: 3px 0;
+  display: block;
+  width: 100%;
+  padding-right: 20px;
+  font-size: 0;
+`;
+const PasswordStrengthIndicator = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  width: 32px;
+  height: 6px;
+  border-radius: 3px;
+  margin: 3px 4px;
+  background-color: ${() => theme.cGrey};
+`;
+const PasswordStrengthText = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: 300;
+  font-size: 9px;
+  line-height: 12px;
+  letter-spacing: 0.4px;
+  font-style: italic;
+  color: ${() => theme.cText};
+`;
+styled.div`
+  &&& > .DayPickerInput {
+    z-index: 100;
+    display: block;
+    position: relative;
+    width: 100%;
+  }
+
+  &&& > .DayPickerInput > input {
+    font-family: 'Open sans';
+    display: block;
+    width: 100%;
+    height: 40px;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 18px;
+    padding: 13px 0;
+    padding-bottom: 7px;
+    border-radius: 0;
+    box-shadow: none;
+    outline: 0;
+    border: 0;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid ${() => theme.cGrey};
+    color: ${() => theme.cBlack};
+    background-color: transparent;
+    transition: border-color 0.2s;
+
+    &:focus,
+    &:hover {
+      box-shadow: none;
+      border-top-color: transparent;
+      border-bottom-color: ${() => theme.cPrimary};
+    }
+
+    &::placeholder {
+      color: transparent;
+      opacity: 0;
+    }
+  }
+`;
+const InfoIconWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isPassword", "labelUp"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+  margin: -2px 0;
+
+  left: 80px;
+
+  position: absolute;
+  z-index: 10;
+  top: 2px;
+
+  transition: all 0.5s;
+
+  ${({ isPassword }) => isPassword && css`
+      opacity: ${({ labelUp }) => labelUp ? 1 : 0};
+      pointer-events: ${({ labelUp }) => labelUp ? "auto" : "none"};
+    `}
+`;
+const PasswordStrengthIndicators = styled.div.withConfig({
+  shouldForwardProp: (props) => !["passwordStrength"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 -4px;
+  padding-right: 12px;
+
+  ${(props) => props.passwordStrength === PasswordStrength.WEAK && css`
+      ${PasswordStrengthIndicator} {
+        &:nth-child(1) {
+          background-color: ${theme.cWarning};
+        }
+      }
+    `}
+
+  ${(props) => props.passwordStrength === PasswordStrength.MEDIUM && css`
+      ${PasswordStrengthIndicator} {
+        &:nth-child(1),
+        &:nth-child(2) {
+          background-color: ${theme.cYellow};
+        }
+      }
+    `}
+
+  ${(props) => props.passwordStrength === PasswordStrength.STRONG && css`
+      ${PasswordStrengthIndicator} {
+        &:nth-child(1),
+        &:nth-child(2),
+        &:nth-child(3) {
+          background-color: ${theme.cLighterGreen};
+        }
+      }
+    `}
+`;
+export {
+  BottomWrap,
+  CapslockIndicator,
+  InfoIconWrapper,
+  PasswordStrengthIndicator,
+  PasswordStrengthIndicators,
+  PasswordStrengthText,
+  PasswordStrengthWrap,
+  ShowPassword
+};

package/dist/components/Input/InputUsername.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { Wrapper, Label, InputWrap } from "./Input.styles.js";
+class InputUsername extends PureComponent {
+  state = {
+    labelUp: false,
+    hasFocus: false
+  };
+  componentDidMount() {
+    this.checkLabel(false);
+  }
+  componentDidUpdate() {
+    this.checkLabel(false);
+  }
+  onFocus = (e, field) => {
+    const { onFocus } = this.props;
+    onFocus?.(e, field);
+    this.checkLabel(true);
+  };
+  onBlur = (e, field) => {
+    const { onBlur } = this.props;
+    onBlur?.(e, field);
+    this.checkLabel(false);
+  };
+  onChange = (e, field) => {
+    const { onChange } = this.props;
+    onChange?.(e, field);
+  };
+  checkLabel = (focus) => {
+    const { value } = this.props;
+    this.setState({
+      labelUp: focus || !!value,
+      hasFocus: focus
+    });
+  };
+  render() {
+    const { labelUp, hasFocus } = this.state;
+    const {
+      type = "text",
+      id,
+      name,
+      label = "",
+      placeholder = "",
+      value = "",
+      error = false,
+      touched = false,
+      readOnly = false,
+      inverted = false,
+      dashboard = false
+    } = this.props;
+    if (value && !labelUp) {
+      this.setState({ labelUp: true });
+    }
+    return /* @__PURE__ */ jsxs(Wrapper, { inverted, children: [
+      label && /* @__PURE__ */ jsx(Label, { isUp: labelUp, active: hasFocus, error: error && touched, htmlFor: id, children: label }),
+      /* @__PURE__ */ jsx(InputWrap, { error: error && touched, dashboard, children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type,
+          id,
+          name,
+          value,
+          onChange: this.onChange,
+          onBlur: this.onBlur,
+          onFocus: this.onFocus,
+          readOnly,
+          placeholder
+        }
+      ) })
+    ] });
+  }
+}
+InputUsername.propTypes = {
+  type: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  readOnly: PropTypes.bool,
+  inverted: PropTypes.bool,
+  dashboard: PropTypes.bool
+};
+export {
+  InputUsername
+};

package/dist/components/Input/InputWithButton.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Container, InputWrap, Input, ButtonWrap } from "./InputWithButton.styles.js";
+const InputWithButton = ({
+  children,
+  type = "search",
+  id,
+  name,
+  placeholder = "",
+  value = "",
+  onChange = () => {
+  },
+  onBlur = () => {
+  },
+  onFocus = () => {
+  },
+  separatorTop = false
+}) => /* @__PURE__ */ jsxs(Container, { separatorTop, children: [
+  /* @__PURE__ */ jsx(InputWrap, { children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      type,
+      id,
+      name,
+      value,
+      onChange,
+      onBlur,
+      onFocus,
+      placeholder
+    }
+  ) }),
+  /* @__PURE__ */ jsx(ButtonWrap, { children })
+] });
+InputWithButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  type: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  separatorTop: PropTypes.bool
+};
+var stdin_default = InputWithButton;
+export {
+  InputWithButton,
+  stdin_default as default
+};