@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Footer/FooterMenu.styles.js

@@ -0,0 +1,321 @@
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+import theme from "../../styles/theme.js";
+const Container = styled.div`
+  z-index: 2;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+`;
+const Groups = styled.ul`
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  @media screen and (min-width: 992px) {
+    display: flex;
+  }
+`;
+const Group = styled.li`
+  display: block;
+  border-top: 1px solid ${colors.lightGrey};
+
+  @media screen and (min-width: 992px) {
+    display: inline-block;
+    // padding: 12px;
+    padding: 64px 65px 68px;
+    flex-grow: 1;
+    // flex-basis: 25%;
+    /* border-top: 0; */
+    width: 25%;
+  }
+
+  @media screen and (max-width: 1270px) {
+    padding: 64px 3% 68px;
+
+    &:first-child {
+      padding-left: 65px;
+    }
+
+    &:last-child {
+      padding-right: 45px;
+      padding-top: 59px;
+    }
+  }
+
+  @media screen and (max-width: 992px) {
+    padding: 32px 48px;
+    &:first-child {
+      padding-left: 48px;
+    }
+    &:last-child {
+      padding: 32px 48px;
+      margin-bottom: 6px;
+    }
+  }
+
+  &:last-child {
+    @media screen and (min-width: 980px) {
+      // flex-basis: 30%;
+    }
+
+    @media screen and (min-width: 1150px) {
+      // flex-basis: 30%;
+      padding: 59px 65px 68px;
+    }
+
+    @media screen and (min-width: 1360px) {
+      // flex-basis: 25%;
+    }
+  }
+
+  @media screen and (min-width: 992px) and (max-width: 1270px) {
+    &:first-child {
+      width: 25%;
+    }
+
+    &:nth-child(2) {
+      width: 20%;
+    }
+
+    &:nth-child(3) {
+      width: 25%;
+    }
+
+    &:last-child {
+      width: 30%;
+    }
+  }
+`;
+const Title = styled.button.withConfig({
+  shouldForwardProp: (props) => !["collapse", "social"].includes(props)
+})`
+  position: relative;
+  display: block;
+  width: 100%;
+  font-family: 'Open Sans';
+  font-weight: normal;
+  font-size: 11px;
+  line-height: 2.18;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  border: 0;
+  margin: 0;
+  margin-bottom: 20px;
+  padding: 24px 32px;
+  outline: 0;
+  text-align: left;
+  color: ${theme.cBlack};
+  transition: color 0.2s;
+  cursor: default;
+  background-color: inherit;
+
+  ${(props) => props.collapse && `
+    padding-right: 48px;
+    cursor: pointer;
+
+    &:focus ,
+    &:hover {
+      // color: ${theme.cPrimary};
+      color: initial;
+    }
+  `}
+
+  ${(props) => props.social && `
+    margin-top: 14px;
+  `}
+  
+  @media screen and (min-width: 992px) {
+    padding: 0;
+    cursor: default;
+
+    &:focus,
+    &:hover {
+      color: ${theme.cBlack};
+    }
+  }
+
+  @media screen and (max-width: 992px) {
+    padding: 0;
+    margin: 0;
+  }
+`;
+const Items = styled.ul.withConfig({
+  shouldForwardProp: (props) => !["social"].includes(props)
+})`
+  display: block;
+  list-style: none;
+  padding: 0 24px;
+  padding-bottom: 24px;
+
+  @media screen and (min-width: 992px) {
+    display: block;
+    padding: 0;
+    margin-top: 22px;
+    margin: 0 -8px;
+    width: 224px;
+
+    ${(props) => props.social && `
+      margin-top: 14px;
+    `}
+  }
+
+  @media screen and (max-width: 992px) {
+    padding-top: 15px;
+    padding-left: 0;
+    padding-bottom: 0;
+  }
+`;
+const Item = styled.li.withConfig({
+  shouldForwardProp: (props) => !["social"].includes(props)
+})`
+  display: block;
+  padding: 7px 8px;
+
+  ${(props) => props.social && `
+    display: inline-block;
+  `};
+
+  @media screen and (max-width: 992px) {
+    &:first-of-type {
+    }
+    padding-left: 0;
+    padding-right: 16px;
+  }
+`;
+const Link = styled.a`
+  display: inline-block;
+  font-family: 'Open Sans';
+  font-weight: bold;
+  font-size: 11px;
+  line-height: 2.18;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  color: ${theme.cBlack};
+  transition: color 0.2s;
+  width: 100%;
+
+  &:focus,
+  &:hover {
+    //color: ${theme.cPrimary};
+    opacity: 0.6;
+  }
+`;
+const SocialLink = styled.a`
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  //background-color: ${theme.cPrimary};
+  transition: background-color 0.2s;
+
+  & > svg,
+  img {
+    height: 40px;
+    width: 40px;
+  }
+
+  &:focus,
+  &:hover {
+    //background-color: ${theme.cLightGrey};
+    opacity: 0.8;
+  }
+`;
+const HiringTotalNumber = styled.span`
+  background: #88fa51;
+  color: #000;
+  border-radius: 100px;
+  display: inline-flex;
+  width: 15px;
+  height: 15px;
+  margin-left: 0px;
+  text-align: center;
+  font-weight: 600;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+  font-size: 11px;
+  font-weight: 700;
+  padding-right: 0;
+  padding-top: 6px;
+`;
+const TitleContainer = styled.div`
+  @media screen and (max-width: 990px) {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+`;
+const ArrowDown = styled.i.withConfig({
+  shouldForwardProp: (props) => !["isOpened", "displayAlways"].includes(props)
+}).attrs({
+  className: "ion ion-ios-arrow-down"
+})`
+  &&& {
+    top: 50%;
+    right: 0;
+    transition: 0.3s transform;
+    transform: rotate(0);
+    text-align: center;
+    font-size: 16px;
+    line-height: 16px;
+    height: 16px;
+    margin-top: -8px;
+
+    ${(props) => props.isOpened && `
+      transform: rotate(180deg);
+    `}
+  }
+  ${(props) => !props.displayAlways && `
+  @media screen and (min-width: 992px) {
+    display: none;
+  }
+  `}
+`;
+const Footnotes = styled.div`
+  padding: 0px 48px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  @media screen and (min-width: 992px) {
+    padding: 0px 65px 48px;
+  }
+`;
+const FootnotesText = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isNumber"].includes(props)
+})`
+  font-family: 'Open Sans';
+  font-weight: 300;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  color: ${theme.cBlack};
+
+  ${(props) => props.isNumber && `
+      font-size: 9px;
+  `}
+`;
+const FootnotesItem = styled.div`
+  display: flex;
+  gap: 6px;
+`;
+export {
+  ArrowDown,
+  Container,
+  Footnotes,
+  FootnotesItem,
+  FootnotesText,
+  Group,
+  Groups,
+  HiringTotalNumber,
+  Item,
+  Items,
+  Link,
+  SocialLink,
+  Title,
+  TitleContainer
+};

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import { Modal } from "../Modal/Modal.js";
+import stdin_default$1 from "../Form/Form.js";
+import { Text } from "../Text/Text.styles.js";
+import { Input } from "../Input/Input.js";
+import { Button } from "../Button/Button.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { emailRegex } from "../../constants/globalVariables.js";
+import { ModalInner, ModalLinkWrap, ModalLink } from "../Modal/Modal.styles.js";
+import { FormField, FormError } from "../Form/Form.styles.js";
+class ForgotPasswordModal extends PureComponent {
+  initialValues = {
+    email: ""
+  };
+  validationSchema = Yup.object().shape({
+    email: Yup.string().matches(emailRegex, "Oops, that's not a valid address").required("Oops, this can‘t be blank")
+  });
+  render() {
+    const {
+      isModalOpen,
+      onModalClose,
+      onFormSend,
+      onModalSwitch,
+      popupError,
+      popupSuccess,
+      isActionLoading,
+      background,
+      isResettingExpiredToken
+    } = this.props;
+    const headerTextContent = isResettingExpiredToken ? "This Invite Link Has Expired" : "Reset Your password";
+    const mainTextContent = isResettingExpiredToken ? "To continue, request a new one using your email, and access will be sent shortly." : "No hints. No nudges. Just a nice, easy reset link direct to your inbox.";
+    const footerTextContent = isResettingExpiredToken ? "Already have an account? " : "Remember your password? ";
+    return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, background, children: /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsxs(Column, { part: 8, children: [
+        /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+          /* @__PURE__ */ jsx("h3", { children: headerTextContent }),
+          /* @__PURE__ */ jsx("p", { children: mainTextContent })
+        ] }) }),
+        /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
+          footerTextContent,
+          /* @__PURE__ */ jsx(ModalLink, { type: "button", to: "#", as: "button", onClick: onModalSwitch, children: "Log in" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: popupSuccess.popup !== "forgot" ? /* @__PURE__ */ jsx(
+        Formik,
+        {
+          initialValues: this.initialValues,
+          validationSchema: this.validationSchema,
+          onSubmit: (values) => {
+            onFormSend(values);
+          },
+          children: ({ values, errors, touched, handleChange, handleBlur }) => {
+            const submitDisabled = !values.email || !!errors.email || isActionLoading === "forgot";
+            return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
+              /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "forgot-email",
+                    name: "email",
+                    type: "email",
+                    label: "Your email",
+                    value: values.email,
+                    error: !!errors.email,
+                    touched: !!touched.email,
+                    onChange: handleChange,
+                    onBlur: handleBlur
+                  }
+                ),
+                /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
+              ] }) }),
+              /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "forgot-password-submit-btn", fluid: true, disabled: submitDisabled, children: isActionLoading === "forgot" ? "Sending Reset Link" : "Send Reset Link" }) }),
+              /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "forgot", children: popupError.message }) })
+            ] });
+          }
+        }
+      ) : /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx("p", { children: popupSuccess.message })
+      ] }) }) })
+    ] }) });
+  }
+}
+ForgotPasswordModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onFormSend: PropTypes.func.isRequired,
+  onModalSwitch: PropTypes.func.isRequired
+};
+var stdin_default = ForgotPasswordModal;
+export {
+  ForgotPasswordModal,
+  stdin_default as default
+};

package/dist/components/Form/Form.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import "yup";
+import PropTypes from "prop-types";
+import { FormContainer } from "./Form.styles.js";
+import { FormError, FormField, FormInfo } from "./Form.styles.js";
+const Form = ({ children, id }) => {
+  return /* @__PURE__ */ jsx(FormContainer, { autoComplete: "off", noValidate: true, id, children });
+};
+Form.propTypes = {
+  children: PropTypes.node.isRequired
+};
+var stdin_default = Form;
+export {
+  Form,
+  FormContainer,
+  FormError,
+  FormField,
+  FormInfo,
+  stdin_default as default
+};

package/dist/components/Form/Form.styles.js

@@ -0,0 +1,72 @@
+import styled from "styled-components";
+import { Form } from "formik";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const FormContainer = styled(Form)`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;
+const FormField = styled.div`
+  position: relative;
+`;
+const FormInfo = styled.div.withConfig({
+  shouldForwardProp: (props) => !["styledId", "center", "marginTop", "marginBottom"].includes(props)
+})`
+  font-family: 'Open Sans';
+  font-weight: ${(props) => props.styleID ? `400` : `300`};
+  // All  font-weight: 300;
+  // ID   font-weight: 400;
+  font-size: 9px;
+  line-height: 1.78em;
+  letter-spacing: 0.4px;
+  color: ${() => theme.cBlack};
+  opacity: ${(props) => props.styleID ? `1` : `0.5`};
+  // All opacity: 0.5;
+  // ID   opacity: 1;
+  ${(props) => props.center && "text-align: center;"}
+  ${(props) => props.marginTop && "margin-top: 18px;"}
+  // from ID:
+   ${(props) => props.marginBottom && "margin-bottom: 18px;"}
+  ${rwd.Large`
+    font-size: 12px;
+  `}
+
+  a {
+    text-decoration: underline;
+    transition: color 0.2s;
+
+    &:hover {
+      color: ${() => theme.cPrimary};
+    }
+  }
+`;
+const FormError = styled.div.withConfig({
+  shouldForwardProp: (props) => !["show", "styleSuf", "withMarginLeft", "withTopSpacing"].includes(props)
+})`
+  display: none;
+  font-family: 'Open Sans';
+  font-weight: 300;
+  font-size: 11px;
+  line-height: 12px;
+  margin: 0;
+  position: relative;
+  left: 0;
+  top: ${(props) => props.styleSUF ? `10px` : `2px`};
+  // SUF top: 10px;
+  // ID, IIS & VD    top: 2px;
+  margin-bottom: -12px;
+  letter-spacing: 0.4px;
+  color: ${() => theme.cWarning};
+
+  ${(props) => props.show && "display: block;"}
+  //from SUF
+  ${({ withMarginLeft }) => withMarginLeft && "margin-left: 28px;"}
+  ${({ withTopSpacing }) => withTopSpacing && "top: 10px;"}
+`;
+export {
+  FormContainer,
+  FormError,
+  FormField,
+  FormInfo
+};