@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/TermsModal/_styles.js

@@ -0,0 +1,313 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+import { Button } from "../Button/Button.styles.js";
+import "../Form/Form.js";
+import { Row } from "../Grid/Grid.styles.js";
+import { Text } from "../Text/Text.styles.js";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+import { FormField, FormError } from "../Form/Form.styles.js";
+const Wrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 33px 0;
+
+  ${Text} {
+    p {
+      ${rwd.XLarge`
+        font-size: 16px;
+      `}
+    }
+  }
+`;
+const Header = styled.div`
+  min-height: 82px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 12px 24px;
+  flex-shrink: 0;
+
+  ${rwd.Large`
+    padding: 21px 64px;
+  `}
+`;
+const HeaderTitle = styled.div.withConfig({
+  shouldForwardProp: (props) => !["withMargin"].includes(props)
+})`
+  font-family: 'Open Sans';
+  font-weight: 800;
+  font-size: 22px;
+  line-height: 1.27em;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+  ${(props) => props.withMargin && "margin-top: 16px;"}
+`;
+styled.div`
+  margin: 0 auto;
+  padding: 8px 0;
+
+  & > * {
+    display: inline-block !important;
+  }
+
+  ${rwd.Large`
+    margin-right: 0;
+  `}
+
+  ${Button}${Button}${Button} {
+    margin-right: 16px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+`;
+const Body = styled.div.withConfig({
+  shouldForwardProp: (props) => !["noVerticalPadding", "noHorizontalPadding", "form"].includes(props)
+})`
+  padding: 21px 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow-y: auto;
+
+  @media screen and (max-width: 767px) {
+    display: flex;
+    justify-content: space-between;
+    padding: 0;
+  }
+
+  ${(props) => props.noVerticalPadding && `
+    padding-top: 0!important;
+    padding-bottom: 0!important;
+  `}
+
+  ${(props) => props.noHorizontalPadding && `
+    padding-left: 0;
+    padding-right: 0;
+  `}
+
+  ${(props) => props.form && css`
+      padding: 21px 48px;
+      justify-content: flex-start;
+
+      ${Row} {
+        flex-shrink: 0;
+      }
+    `}
+`;
+styled.div`
+  ${FormField} {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+
+    ${rwd.Medium`
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 44px;
+    `}
+
+    + ${FormField} {
+      padding-top: 32px;
+
+      ${rwd.Medium`
+        padding-top: 0;
+      `}
+    }
+
+    ${FormError} {
+      white-space: nowrap;
+      padding-left: 28px;
+    }
+  }
+`;
+styled.div.withConfig({
+  shouldForwardProp: (props) => !["faceScan"].includes(props)
+})`
+  text-align: center;
+  margin: 0 auto;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 1.82;
+  letter-spacing: 2px;
+
+  ${(props) => props.faceScan && `
+    margin-top: 20px;
+  `}
+`;
+styled.div.withConfig({
+  shouldForwardProp: (props) => ![
+    "verticalPadding",
+    "horizontalPadding",
+    "formInner",
+    "withSeparator",
+    "verticalCenter",
+    "verticalSpaceAround"
+  ].includes(props)
+})`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+
+  ${(props) => props.verticalPadding && `
+    padding-top: 40px;
+    padding-bottom: 40px;
+  `}
+
+  ${(props) => props.horizontalPadding && `
+    padding-left: 36px;
+    padding-right: 36px;
+  `}
+
+  ${(props) => props.formInner && `
+    padding-left: 18px;
+    padding-right: 18px;
+    align-items: stretch;
+  `}
+  
+  ${(props) => props.withSeparator && `
+    border-bottom: 1px solid ${props.theme.cLightGrey};
+  `}
+
+  ${(props) => props.verticalCenter && `
+    justify-content: center;
+  `}
+
+  ${(props) => props.verticalSpaceAround && `
+    justify-content: space-around;
+  `}
+
+  ${rwd.Medium`
+    ${(props) => props.withSeparator && `
+      border-bottom: 0;
+      border-right: 1px solid ${props.theme.cLightGrey};
+    `}
+  `}
+`;
+styled.input.attrs((props) => ({
+  type: "file",
+  ...props
+}))`
+  visibility: hidden;
+  position: absolute;
+  width: 0.1px;
+  height: 0.1px;
+  z-index: -1;
+`;
+styled(Button).attrs({
+  as: "label",
+  type: void 0
+})`
+  position: relative;
+  word-break: break-all;
+`;
+styled(Icon).attrs({
+  icon: iconsMap.trash
+})`
+  position: absolute;
+  top: 50%;
+  right: 0px;
+  transform: translateY(-50%);
+  font-size: 16px;
+  cursor: pointer;
+  transition: 0.3s color;
+  color: ${(props) => props.theme.cWarning};
+  border-radius: 50%;
+  border: 1px solid ${(props) => props.theme.cLightGrey};
+  padding: 10px;
+
+  &:hover {
+    color: ${(props) => props.theme.cPrimary};
+  }
+`;
+styled(Icon).withConfig({
+  shouldForwardProp: (props) => !["isHidden"].includes(props)
+}).attrs({
+  icon: iconsMap.check
+})`
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  color: ${(props) => props.theme.cSuccess};
+  margin: auto;
+  font-size: 18px;
+
+  ${(props) => props.isHidden && `
+    opacity: 0;
+  `}
+`;
+styled.ul`
+  list-style-type: none;
+  padding: 0;
+  font-size: 12px;
+  width: 100%;
+`;
+styled.li`
+  padding: 0 46px 0 8px;
+  margin-right: 8px;
+  position: relative;
+  word-break: break-all;
+`;
+const DocumentScanButtonsStyle = css`
+  width: 40px;
+  height: 40px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+  border-radius: 50%;
+  background: ${(props) => props.theme.cPrimary};
+  color: ${(props) => props.theme.cWhite};
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  font-size: 18px;
+
+  & > svg {
+    fill: ${(props) => props.theme.cWhite};
+    stroke: ${(props) => props.theme.cWhite};
+  }
+`;
+styled.button`
+  ${DocumentScanButtonsStyle};
+
+  & > svg {
+    width: 22px !important;
+    height: 23px !important;
+  }
+`;
+styled.button.attrs({
+  className: "ion ion-md-checkmark"
+})`
+  ${DocumentScanButtonsStyle};
+`;
+styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(201, 255, 233, 0.6);
+  position: relative;
+`;
+styled(Row)`
+  padding-left: 18px;
+  padding-right: 18px;
+  padding-top: 64px;
+`;
+styled.div`
+  padding-top: 32px;
+  margin: auto;
+
+  ${rwd.Medium`
+    padding-top: 0;
+    margin-right: 0;
+  `}
+`;
+export {
+  Body,
+  Header,
+  HeaderTitle,
+  Wrapper
+};

package/dist/components/Text/Text.styles.js

@@ -0,0 +1,220 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Text = styled.div.withConfig({
+  shouldForwardProp: (props) => ![
+    "fullWidth",
+    "center",
+    "withMarginBottom",
+    "withMarginRight",
+    "blockchainLoadingMsg",
+    "responsiveFont",
+    "small",
+    "success"
+  ].includes(props)
+})`
+  display: block;
+
+  ${({ withMarginBottom }) => withMarginBottom && `
+      margin-bottom: 32px;
+    `}
+
+  ${({ withMarginRight }) => withMarginRight && `
+      margin-right: 20px;
+    `}
+
+  ${(props) => props.fullWidth && "width: 100%;"}
+
+  ${(props) => props.center && `
+    text-align: center;
+  `}
+
+ 
+
+  h1 {
+    font-family: 'Open Sans';
+    font-weight: 800;
+    font-size: 22px;
+    line-height: 1.18;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+    margin-top: 1em;
+    margin-bottom: 32px;
+
+    ${rwd.Medium`
+      font-size: 34px;
+      letter-spacing: 1.5px;
+      margin-bottom: 45px;
+    `}
+  }
+
+  h2 {
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 34px;
+    line-height: 1.18em;
+    letter-spacing: 1.5px;
+    margin-top: 1em;
+    margin-bottom: 0.18em;
+
+    ${rwd.Medium`
+      font-size: 42px;
+    `}
+
+    ${rwd.Large`
+      font-size: 50px;
+    `}
+  }
+
+  h4 {
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 17px;
+    line-height: 1.27em;
+    letter-spacing: 0.8px;
+    margin-top: 1em;
+    margin-bottom: 0.27em;
+    opacity: 0.5;
+
+    ${rwd.Medium`
+      //font-size: 34px;
+    `}
+
+    ${(props) => props.blockchainLoadingMsg && `
+      width: 100% !important;
+    `}
+  }
+
+  h3 {
+    font-family: 'Open Sans';
+    font-weight: 800;
+    font-size: 22px;
+    line-height: 1.27em;
+    letter-spacing: 0.8px;
+    margin-top: 1em;
+    margin-bottom: 0.27em;
+    text-transform: uppercase;
+
+    ${rwd.Medium`
+      font-size: 34px;
+    `}
+
+    @media screen and (max-width: 991px) and (min-width: 768px) {
+      ${(props) => props.responsiveFont && `
+          font-size: 22px;
+        `}
+    }
+  }
+
+  h5 {
+    font-family: 'Open Sans';
+    font-weight: 800;
+    font-size: 22px;
+    line-height: 1.27em;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+  }
+
+  p {
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 1.5em;
+    letter-spacing: 0.6px;
+    margin: 1em 0;
+
+    ${(props) => props.small && `
+    font-size:12px;
+    `}
+
+    ${rwd.XLarge`
+      font-size: 20px;
+
+      ${(props) => props.small && `
+        font-size:16px;
+      `}
+
+    `}
+
+    a {
+      text-decoration: underline;
+      transition: color 0.2s;
+      color: inherit;
+
+      &:hover {
+        color: ${() => theme.cText};
+      }
+    }
+
+    ${(props) => props.success && `
+      color: ${theme.cProgressDone};
+    `}
+  }
+
+  ul {
+    margin: 16px;
+
+    li {
+      font-size: 14px;
+      font-weight: 300;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 2;
+      letter-spacing: 0.6px;
+    }
+
+    @media screen and (max-width: 479px) {
+      padding-left: 15px;
+    }
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+`;
+const Caption = styled.p.withConfig({
+  shouldForwardProp: (props) => !["center", "link"].includes(props)
+})`
+  &&& {
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 9px;
+    line-height: 1.78em;
+    letter-spacing: 0.4px;
+
+    //this is for the checkboxes and html parser in VD
+    p {
+      font-size: 9px;
+    }
+
+    ${rwd.Large`
+      font-size: 12px;
+       
+      p {
+        font-size: 12px;
+      }
+    `}
+
+    ${(props) => props.center && "text-align: center;"}
+    ${(props) => props.link && "margin-top: 36px;"}
+    
+    a {
+      text-decoration: underline;
+      transition: color 0.2s;
+      color: ${() => theme.cPrimary};
+
+      &:hover {
+        color: ${() => theme.cText};
+      }
+    }
+  }
+`;
+Text.Caption = Caption;
+export {
+  Text,
+  Text as default
+};

package/dist/components/TextLink/TextLink.styles.js

@@ -0,0 +1,67 @@
+import styled, { css } from "styled-components";
+import { Link } from "react-router-dom";
+import theme from "../../styles/theme.js";
+const styles = css`
+  background: #fff;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  font-family: 'Open Sans';
+  font-weight: bold;
+  font-size: 11px;
+  line-height: 14px;
+  text-transform: uppercase;
+  display: inline-block;
+  padding-left: 18px;
+  padding-right: 6px;
+  transition: padding 0.2s;
+
+  &:before {
+    content: '\\f3d1';
+    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: 12px;
+    line-height: 8px;
+    display: block;
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    margin-top: -4px;
+    color: ${() => theme.cWarning};
+    transform: ${(props) => props.reverse ? "rotate(180deg)" : "none"};
+  }
+
+  &:hover {
+    padding-left: 24px;
+    padding-right: 0;
+  }
+
+  ${(props) => props.disabled && css`
+      opacity: 0.5;
+      pointer-events: none;
+    `}
+`;
+const TextLink = styled(Link).withConfig({
+  shouldForwardProp: (props) => !["reverse", "disabled"].includes(props)
+})`
+  ${styles}
+`;
+const TextButton = styled.button.withConfig({
+  shouldForwardProp: (props) => !["reverse", "disabled"].includes(props)
+})`
+  ${styles}
+`;
+export {
+  TextButton,
+  TextLink,
+  TextLink as default
+};

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { TimelineContainer } from "./Timeline.styles.js";
+import { TimelineStep } from "./TimelineStep.js";
+const Timeline = ({
+  steps = [],
+  maxWidth,
+  showInfoIcons = true,
+  infoIconPosition = "right",
+  // Style props
+  containerStyle,
+  className,
+  stepStyle,
+  iconStyle,
+  contentStyle
+}) => {
+  return /* @__PURE__ */ jsx(TimelineContainer, { maxWidth, style: containerStyle, className, children: steps.map((step, index) => {
+    const isLast = index === steps.length - 1;
+    const nextStep = !isLast ? steps[index + 1] : null;
+    return /* @__PURE__ */ jsx(
+      TimelineStep,
+      {
+        state: step.state || "inactive",
+        date: step.date,
+        title: step.title,
+        tooltip: step.tooltip,
+        caption: step.caption,
+        isLast,
+        nextState: nextStep?.state,
+        customIcon: step.customIcon,
+        showInfoIcon: showInfoIcons,
+        infoIconPosition,
+        stepStyle: step.stepStyle || stepStyle,
+        iconStyle: step.iconStyle || iconStyle,
+        contentStyle: step.contentStyle || contentStyle,
+        className: step.className
+      },
+      step.id || index
+    );
+  }) });
+};
+export {
+  Timeline
+};