@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Process/Process.styles.js

@@ -0,0 +1,84 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+import loader from "../../static/images/process-waiting.gif.js";
+const Process = styled.div.withConfig({
+  shouldForwardProp: (props) => !["waiting", "success", "failed"].includes(props)
+})`
+  display: block;
+  position: relative;
+  font-size: 11px;
+  line-height: 16px;
+  text-transform: uppercase;
+  padding-right: 26px;
+  color: ${() => theme.cPrimary};
+  opacity: 0.3;
+
+  ${rwd.Medium`
+    font-size: 14px;
+    line-height: 20px;
+  `}
+
+  &:before {
+    content: '';
+    font-family: 'Ionicons';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 19px;
+    line-height: 16px;
+    display: block;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    margin-top: -8px;
+
+    ${rwd.Medium`
+      font-size: 24px;
+      line-height: 20px;
+      width: 20px;
+      height: 20px;
+      margin-top: -10px;
+    `}
+  }
+
+  ${(props) => props.waiting && `
+    opacity: 1;
+
+    &:before {
+      content: '';
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: cover;
+      background-image: url(${loader});
+    }
+  `}
+
+  ${(props) => props.success && `
+    opacity: 1;
+
+    &:before {
+      content: '\\f14a';
+      color: ${theme.cProgressDone};
+    }
+  `}
+
+  ${(props) => props.failed && `
+    opacity: 1;
+    color: ${theme.cWarning};
+
+    &:before {
+      content: '\\f14e';
+    }
+  `}
+`;
+export {
+  Process
+};

package/dist/components/ProfileBadge/ProfileBadge.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import earlyadopter from "../../static/images/early-adopter.png.js";
+import graduation from "../../static/images/graduation.png.js";
+import { Wrapper, Title } from "./ProfileBadge.styles.js";
+const Badge = styled.img`
+  height: 100px;
+
+  @media screen and (max-width: 1023px) {
+    height: 80px;
+  }
+`;
+const GetBadge = (badge) => {
+  if (badge === "Graduation") {
+    return graduation;
+  } else {
+    return earlyadopter;
+  }
+};
+const ProfileBadge = ({ title, icon = void 0, withIcon = void 0, color = "white", centerVertically }) => /* @__PURE__ */ jsxs(Wrapper, { color, children: [
+  /* @__PURE__ */ jsx(Title, { centerVertically, children: title }),
+  icon,
+  withIcon && /* @__PURE__ */ jsx(Badge, { src: GetBadge(title), alt: title + " badge" })
+] });
+ProfileBadge.propTypes = {
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.node,
+  withIcon: PropTypes.bool,
+  color: PropTypes.string
+};
+export {
+  ProfileBadge
+};

package/dist/components/ProfileBadge/ProfileBadge.styles.js

@@ -0,0 +1,53 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Wrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["color"].includes(props)
+})`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-grow: 1;
+  padding: 32px;
+
+  ${rwd.Medium`
+    padding: 12px;
+  `}
+
+  ${(props) => props.color === "white" && `
+    color: ${theme.cBlack};
+    background-color: ${theme.cWhite};
+
+    svg {
+      stroke: ${theme.cBlack};
+    }
+  `}
+  
+  ${(props) => props.color === "red" && `
+    color: ${theme.cWhite};
+    background-color: ${theme.cWarning};
+
+    svg {
+      stroke: ${theme.cWhite};
+    }
+  `}
+`;
+const Title = styled.div.withConfig({
+  shouldForwardProp: (props) => !["centerVertically"].includes(props)
+})`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.06px;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+
+  ${({ centerVertically }) => centerVertically && css`
+      margin-bottom: 0;
+    `}
+`;
+export {
+  Title,
+  Wrapper
+};

package/dist/components/ProfileBox/ProfileBox.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import stdin_default from "../Background/Background.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Container, ImageWrapper, EditButton, Name, EditIcon } from "./ProfileBox.styles.js";
+const lineBreaker = {
+  wordBreak: "break-all"
+};
+const ProfileBox = ({ pictureSrc, name = "", handleEdit = () => {
+}, withEditButton = true, nameStyle = {} }) => /* @__PURE__ */ jsxs(Container, { children: [
+  /* @__PURE__ */ jsx(ImageWrapper, { children: /* @__PURE__ */ jsx(stdin_default, { src: pictureSrc }) }),
+  /* @__PURE__ */ jsx(EditButton, { onClick: handleEdit, "data-cy": "edit-button-profile-box", children: /* @__PURE__ */ jsx(ComponentWrapper, { children: /* @__PURE__ */ jsxs(Name, { style: { ...lineBreaker, ...nameStyle }, children: [
+    name,
+    withEditButton && /* @__PURE__ */ jsx(EditIcon, {})
+  ] }) }) })
+] });
+ProfileBox.propTypes = {
+  pictureSrc: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  handleEdit: PropTypes.func,
+  withEditButton: PropTypes.bool,
+  nameStyle: PropTypes.object
+};
+export {
+  ProfileBox
+};

package/dist/components/ProfileBox/ProfileBox.styles.js

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+import { Container as Container$1 } from "../Background/Background.styles.js";
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const ImageWrapper = styled.div`
+  flex-grow: 1;
+  min-height: 300px;
+
+  ${Container$1} {
+    width: 100%;
+    padding-top: 100%;
+  }
+`;
+const EditButton = styled.button`
+  display: block;
+  width: 100%;
+  color: ${(props) => props.theme.cBlack};
+  border-bottom: 1px solid ${(props) => props.theme.cLightGrey};
+  transition: color 0.2s;
+
+  &:focus,
+  &:hover {
+    color: ${(props) => props.theme.cPrimary};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  & > div {
+    width: 100%;
+  }
+`;
+const Name = styled.div`
+  position: relative;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  text-align: center;
+`;
+const EditIcon = styled.i.attrs({
+  className: "ion-md-create"
+})`
+  margin-left: 12px;
+
+  &:before {
+    transform: rotate(-15deg);
+  }
+`;
+styled.i.attrs({
+  className: "ion-ios-add-circle-outline"
+})`
+  margin-left: 12px;
+  font-size: 30px;
+`;
+export {
+  Container,
+  EditButton,
+  EditIcon,
+  ImageWrapper,
+  Name
+};

package/dist/components/ProfileStat/ProfileStat.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Wrapper, Label, Value, Equal } from "./ProfileStat.styles.js";
+const lineBreaker = {
+  wordBreak: "break-all"
+};
+const ProfileStat = ({ label, unit = "", value, eqUnit = "", eqValue, withBorder }) => /* @__PURE__ */ jsxs(Wrapper, { withBorder, children: [
+  /* @__PURE__ */ jsx(Label, { withBorder, children: label }),
+  /* @__PURE__ */ jsxs(Value, { style: lineBreaker, children: [
+    unit && /* @__PURE__ */ jsx("span", { children: unit }),
+    value
+  ] }),
+  eqValue && eqUnit ? /* @__PURE__ */ jsxs(Equal, { children: [
+    "= ",
+    eqUnit && /* @__PURE__ */ jsx("span", { children: eqUnit }),
+    eqValue
+  ] }) : ""
+] });
+ProfileStat.propTypes = {
+  label: PropTypes.string.isRequired,
+  unit: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  eqUnit: PropTypes.string,
+  eqValue: PropTypes.string.isRequired
+};
+export {
+  ProfileStat
+};

package/dist/components/ProfileStat/ProfileStat.styles.js

@@ -0,0 +1,90 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Wrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["withBorder"].includes(props)
+})`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  flex-grow: 1;
+  background-color: ${() => theme.cPrimary};
+  color: ${() => theme.cWhite};
+  padding: 32px;
+
+  ${(props) => props.withBorder && `
+    box-shadow: inset 0 0.4px 0 0 #313131;
+  `}
+
+  ${rwd.Medium`
+    padding: 12px 32px;
+    text-align: left;
+  `}
+
+  ${rwd.Large`
+    padding: 12px 64px;
+    text-align: left;
+  `}
+
+  @media screen and (max-width: 768px) {
+    max-width: 100vw;
+  }
+`;
+const Label = styled.div.withConfig({
+  shouldForwardProp: (props) => !["withBorder"].includes(props)
+})`
+  font-size: 11px;
+  line-height: 2.18;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+
+  ${(props) => props.withBorder && `
+    color: #88fa51;
+  `}
+`;
+const Value = styled.div`
+  font-weight: 300;
+  font-size: 32px;
+  line-height: 36px;
+  letter-spacing: 2.43px;
+  text-transform: uppercase;
+
+  & > span {
+    &:after {
+      content: ' ';
+    }
+  }
+
+  ${rwd.Medium`
+    font-size: 44px;
+    line-height: 48px;
+  `}
+
+  ${rwd.Large`
+    font-size: 55px;
+    line-height: 58px;
+  `}
+`;
+const Equal = styled.div`
+  font-size: 11px;
+  line-height: 2.18;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  margin-top: 10px;
+  color: ${() => theme.cLighterGreen};
+  overflow-wrap: break-word;
+
+  & > span {
+    &:after {
+      content: ' ';
+    }
+  }
+`;
+export {
+  Equal,
+  Label,
+  Value,
+  Wrapper
+};

package/dist/components/QRCode/QRCode.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { QRCodeSVG } from "qrcode.react";
+import styled from "styled-components";
+const QRCodeWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["padding", "backgroundColor", "withShadow"].includes(props)
+})`
+  display: inline-block;
+  padding: ${({ padding }) => padding}px;
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  border-radius: 8px;
+  box-shadow: ${({ withShadow }) => withShadow ? "0 2px 8px rgba(0, 0, 0, 0.2)" : "none"};
+`;
+const QRCode = ({
+  value,
+  size = 128,
+  fgColor = "#000000",
+  bgColor = "#ffffff",
+  backgroundColor = "#ffffff",
+  level = "L",
+  padding = 8,
+  withShadow = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(QRCodeWrapper, { padding, withShadow, backgroundColor, ...props, children: /* @__PURE__ */ jsx(QRCodeSVG, { value, size, fgColor, bgColor, level, includeMargin: false }) });
+};
+QRCode.propTypes = {
+  /** URL or text to encode in the QR code */
+  value: PropTypes.string.isRequired,
+  /** Size of the QR code in pixels */
+  size: PropTypes.number,
+  /** Foreground color (the QR code pattern itself) */
+  fgColor: PropTypes.string,
+  /** Background color of the QR code itself */
+  bgColor: PropTypes.string,
+  /** Background color of the wrapper */
+  backgroundColor: PropTypes.string,
+  /** Error correction level: 'L', 'M', 'Q', 'H' */
+  level: PropTypes.oneOf(["L", "M", "Q", "H"]),
+  /** Padding around the QR code in pixels */
+  padding: PropTypes.number,
+  /** Whether to add a shadow effect */
+  withShadow: PropTypes.bool
+};
+var stdin_default = QRCode;
+export {
+  QRCode,
+  QRCodeWrapper,
+  stdin_default as default
+};

package/dist/components/Radio/Radio.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Wrapper, Label, Input } from "./Radio.styles.js";
+const Radio = ({
+  id,
+  name = "",
+  text = "",
+  label = "",
+  value = "",
+  checked = false,
+  error = false,
+  touched = false,
+  onChange,
+  onBlur,
+  onFocus
+}) => /* @__PURE__ */ jsxs(Wrapper, { children: [
+  label && /* @__PURE__ */ jsx(Label, { error: error && touched, htmlFor: id, children: label }),
+  /* @__PURE__ */ jsxs(Input, { error: error && touched, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        id,
+        name: name || id,
+        value,
+        checked,
+        onChange,
+        onBlur,
+        onFocus
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: text })
+  ] })
+] });
+Radio.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  label: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func
+};
+export {
+  Radio
+};

package/dist/components/Radio/Radio.styles.js

@@ -0,0 +1,100 @@
+import styled from "styled-components";
+import { Label as Label$1 } from "../Input/Input.styles.js";
+import theme from "../../styles/theme.js";
+const Wrapper = styled.div`
+  position: relative;
+  display: block;
+`;
+const Label = styled(Label$1)`
+  position: relative;
+  top: 0;
+  transform: none;
+  font-size: 10px;
+  margin-bottom: 5px;
+`;
+const Input = styled.div.withConfig({
+  shouldForwardProp: (props) => !["error"].includes(props)
+})`
+  position: relative;
+
+  & > input {
+    z-index: -1;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    display: block;
+    width: 1px;
+    height: 0;
+    opacity: 0;
+    border: 0;
+
+    & + label {
+      position: relative;
+      display: inline-block;
+      max-width: 100%;
+      padding-left: 28px;
+      font-family: 'Open Sans';
+      font-size: 13px;
+      line-height: 16px;
+      letter-spacing: 0.4px;
+      cursor: pointer;
+
+      &:before,
+      &:after {
+        content: '';
+        display: block;
+        position: absolute;
+      }
+
+      &:before {
+        top: 0;
+        left: 0;
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        border: 1px solid #9b9b9b;
+        box-shadow: none;
+        transition: border-color 0.2s;
+      }
+
+      &:after {
+        top: 5px;
+        left: 5px;
+        width: 6px;
+        height: 6px;
+        border-radius: 3px;
+        background-color: transparent;
+      }
+    }
+
+    &:focus + label,
+    &:hover + label {
+      &:before {
+        border-color: ${() => theme.cPrimary};
+      }
+    }
+
+    &:checked + label {
+      &:after {
+        background-color: ${() => theme.cPrimary};
+      }
+    }
+  }
+
+  ${(props) => props.error && `
+    & > input {
+
+      & + label {
+
+        &:before {
+          border-color: ${theme.cWarning};
+        }
+      }
+    }
+  `}
+`;
+export {
+  Input,
+  Label,
+  Wrapper
+};

package/dist/components/RefreshButton/RefreshButton.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import stdin_default$1 from "../SvgIcons/RefreshSvg.js";
+import "../SvgIcons/SocialInstagram.js";
+import { StyledButton, IconWrap, Content } from "./RefreshButton.styles.js";
+const RefreshButton = (props) => {
+  const { children } = props;
+  return /* @__PURE__ */ jsxs(StyledButton, { ...props, children: [
+    /* @__PURE__ */ jsx(IconWrap, { children: /* @__PURE__ */ jsx(stdin_default$1, {}) }),
+    /* @__PURE__ */ jsx(Content, { children })
+  ] });
+};
+RefreshButton.propTypes = {
+  children: PropTypes.node.isRequired
+};
+var stdin_default = RefreshButton;
+export {
+  RefreshButton,
+  stdin_default as default
+};

package/dist/components/RefreshButton/RefreshButton.styles.js

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+import { Button } from "../Button/Button.styles.js";
+import theme from "../../styles/theme.js";
+const IconWrap = styled.div`
+  display: block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 50%;
+  margin-top: -12px;
+  left: 0;
+  border-radius: 12px;
+
+  & > svg {
+    fill: ${() => theme.cPrimary};
+    stroke: ${() => theme.cPrimary};
+    display: block;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -8px;
+    margin-left: -8px;
+    transition: color 0.2s;
+  }
+`;
+const StyledButton = styled(Button).attrs((props) => ({
+  type: props.type || "button"
+}))`
+  position: relative;
+  color: ${() => theme.cBlack};
+  border: 1px solid transparent;
+  background-color: transparent;
+  text-align: left;
+  padding: 11px 0;
+  padding-left: 34px;
+
+  &:hover,
+  &:focus,
+  &:active {
+    color: ${() => theme.cBlack};
+    border-color: transparent;
+    background-color: transparent;
+
+    ${IconWrap} {
+      & > svg {
+        fill: ${() => theme.cPrimaryDark};
+        transform: rotate(360deg);
+        transition:
+          color 0.2s,
+          transform 0.3s ease-out;
+      }
+    }
+  }
+`;
+const Content = styled.div`
+  display: inline-block;
+`;
+export {
+  Content,
+  IconWrap,
+  StyledButton
+};