@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/CryptoAddressDetails/CryptoAddressDetails.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Button } from "../Button/Button.styles.js";
+import { Container, Row, Column, Avatar, AvatarImg, Name } from "./CryptoAddressDetails.styles.js";
+const CryptoAddressDetails = ({ data }) => /* @__PURE__ */ jsxs(Container, { children: [
+  /* @__PURE__ */ jsxs(Row, { head: true, children: [
+    /* @__PURE__ */ jsx(Column, { tokens: true, children: "Tokens" }),
+    /* @__PURE__ */ jsx(Column, { balance: true, children: "Balance" }),
+    /* @__PURE__ */ jsx(Column, { transfer: true })
+  ] }),
+  data.map((datum, index) => /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsxs(Column, { tokens: true, nameBox: true, children: [
+      /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarImg, { src: datum.avatar, alt: "avatar" }) }),
+      /* @__PURE__ */ jsx(Name, { children: datum.name })
+    ] }),
+    /* @__PURE__ */ jsx(Column, { balance: true, balanceText: true, children: datum.balance }),
+    /* @__PURE__ */ jsx(Column, { transfer: true, children: /* @__PURE__ */ jsx(Button, { outline: true, fluid: true, onClick: datum.transferClick, children: "Transfer" }) })
+  ] }, `${datum.id}-${index.toString()}`))
+] });
+CryptoAddressDetails.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      avatar: PropTypes.string,
+      name: PropTypes.string,
+      balance: PropTypes.string,
+      transferClick: PropTypes.func
+    })
+  ).isRequired
+};
+export {
+  CryptoAddressDetails
+};

package/dist/components/CryptoAddressDetails/CryptoAddressDetails.styles.js

@@ -0,0 +1,125 @@
+import styled from "styled-components";
+import grid from "../../styles/grid.js";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Container = styled.div`
+  position: relative;
+`;
+const Row = styled.div.withConfig({
+  shouldForwardProp: (props) => !["head"].includes(props)
+})`
+  background-color: ${() => theme.cPrimaryDark};
+  color: ${() => theme.cWhite};
+  padding: 22px 32px;
+
+  ${rwd.Medium`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 22px ${grid(1.5)};
+  `}
+
+  ${(props) => props.head && `
+    display: none;
+    background-color: ${theme.cPrimary};
+    color: #ffffff;
+    font-size: 11px;
+    line-height: 24px;
+    letter-spacing: 2.06px;
+    text-transform: uppercase;
+    min-height: 56px;
+    padding: 10px 32px;
+
+    ${rwd.Medium`
+      display: flex;
+      padding: 10px ${grid(1.5)};
+    `}
+  `}
+
+  &:nth-child(n+3) {
+    border-top: 1px solid #003e9d;
+  }
+`;
+const Column = styled.div.withConfig({
+  shouldForwardProp: (props) => !["balance", "transfer", "tokens", "nameBox", "balanceText"].includes(props)
+})`
+  ${(props) => props.balance && `
+    margin-top: 20px;
+  `}
+
+  ${(props) => props.transfer && `
+    margin-top: 20px;
+  `}
+
+  ${rwd.Medium`
+    display: inline-block;
+
+    ${(props) => props.tokens && `
+      width: 40%;
+      padding-right: 10px;
+    `}
+      
+    ${(props) => props.balance && `
+      width: 30%;
+      padding-right: 10px;
+      margin-top: 0;
+    `}
+      
+    ${(props) => props.transfer && `
+      width: 30%;
+      margin-top: 0;
+    `}
+
+    ${(props) => props.nameBox && `
+      display: flex;
+    `}
+  `}
+
+  ${(props) => props.balanceText && `
+    font-weight: 300;
+    font-size: 22px;
+    line-height: 28px;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+  `}
+
+  ${(props) => props.nameBox && `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+  `}
+`;
+const Avatar = styled.div`
+  display: inline-block;
+  width: 48px;
+  height: 48px;
+  border-radius: 24px;
+  background-color: ${() => theme.cPrimary};
+  overflow: hidden;
+  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
+`;
+const AvatarImg = styled.img`
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center center;
+`;
+const Name = styled.div`
+  display: inline-block;
+  margin-left: 26px;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  word-break: break-all;
+`;
+export {
+  Avatar,
+  AvatarImg,
+  Column,
+  Container,
+  Name,
+  Row
+};

package/dist/components/CryptoAddressWrapper/CryptoAddressWrapper.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Container, Address, InfoBoxWrapper, InfoBox, Loader, Text, FailedIcon } from "./CryptoAddressWrapper.styles.js";
+const CryptoAddressWrapper = ({ children, refresh = "", failed = "", relative, noFailedIcon }) => /* @__PURE__ */ jsxs(Container, { children: [
+  children && /* @__PURE__ */ jsx(Address, { isHidden: refresh || failed, children }),
+  refresh && /* @__PURE__ */ jsx(InfoBoxWrapper, { relative, children: /* @__PURE__ */ jsxs(InfoBox, { refresh: true, children: [
+    /* @__PURE__ */ jsx(Loader, {}),
+    /* @__PURE__ */ jsx(Text, { children: refresh })
+  ] }) }),
+  failed && /* @__PURE__ */ jsx(InfoBoxWrapper, { relative, children: /* @__PURE__ */ jsxs(InfoBox, { failed: true, children: [
+    !noFailedIcon && /* @__PURE__ */ jsx(FailedIcon, {}),
+    /* @__PURE__ */ jsx(Text, { children: failed })
+  ] }) })
+] });
+CryptoAddressWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  refresh: PropTypes.string,
+  failed: PropTypes.string
+};
+var stdin_default = CryptoAddressWrapper;
+export {
+  CryptoAddressWrapper,
+  stdin_default as default
+};

package/dist/components/CryptoAddressWrapper/CryptoAddressWrapper.styles.js

@@ -0,0 +1,111 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import loader from "../../static/images/address-refreshing.gif.js";
+import theme from "../../styles/theme.js";
+const Container = styled.div`
+  position: relative;
+  display: block;
+`;
+const Address = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isHidden"].includes(props)
+})`
+  position: relative;
+  visibility: visible;
+  opacity: 1;
+
+  ${(props) => props.isHidden && `
+    visibility: hidden;
+    opacity: 0;
+  `}
+`;
+const InfoBoxWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["relative"].includes(props)
+})`
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  font-size: 0;
+
+  &:after {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    height: 100%;
+  }
+
+  // concerning merge: relative is added from SUF
+  ${({ relative }) => relative && `
+    position: relative;
+  `}
+`;
+const InfoBox = styled.div.withConfig({
+  shouldForwardProp: (props) => !["refresh", "failed"].includes(props)
+})`
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+
+  ${(props) => props.refresh && `
+    color: ${theme.cPrimary};
+  `};
+
+  ${(props) => props.failed && `
+    color: ${theme.cWarning};
+  `};
+`;
+const Loader = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  width: 40px;
+  height: 40px;
+  margin: 0 auto;
+  margin-right: -40px;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: cover;
+  background-image: url(${loader});
+`;
+const FailedIcon = styled.i.attrs({
+  className: "ion ion-ios-close-circle"
+})`
+  display: inline-block !important;
+  vertical-align: middle;
+  width: 40px;
+  height: 40px;
+  margin-right: -40px;
+
+  &:before {
+    display: block;
+    font-size: 48px;
+    line-height: 40px;
+    text-align: center;
+  }
+`;
+const Text = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 1.5em;
+  letter-spacing: 0.6px;
+  padding-left: 60px;
+  max-width: 100%;
+
+  ${rwd.XLarge`
+    font-size: 20px;
+  `}
+`;
+export {
+  Address,
+  Container,
+  FailedIcon,
+  InfoBox,
+  InfoBoxWrapper,
+  Loader,
+  Text
+};

package/dist/components/DoubleButton/DoubleButton.styles.js

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import { Button } from "../Button/Button.styles.js";
+const DoubleButtons = styled.div.withConfig({
+  shouldForwardProp: (props) => !["column"].includes(props)
+})`
+  margin: -12px;
+
+  ${Button} {
+    width: 100%;
+    margin: 12px;
+  }
+
+  ${rwd.Medium`
+    display: flex;
+       flex-direction: ${({ column }) => column ? "column" : "row"};
+
+    
+    ${Button} {
+      width: auto;
+      flex: 1;
+    }
+  `}
+`;
+export {
+  DoubleButtons
+};

package/dist/components/ErrorMessage/ErrorMessage.styles.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+const ErrorMessage = styled.p`
+  color: #ee220d;
+  font-size: 12px;
+  margin-top: 20px;
+`;
+export {
+  ErrorMessage
+};

package/dist/components/FAQ/FAQ.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { Text } from "../Text/Text.styles.js";
+import { useState } from "react";
+import scrollToElement from "scroll-to-element";
+import { FaqItems, FaqItem, FaqTitle, FaqDropdownIcon, FaqContent, FaqText } from "./FAQ.styles.js";
+const FAQ = (props) => {
+  const { items, noScroll, scrollRef, modalViewMore, withTextStyling } = props;
+  const [activeIndex, setActiveIndex] = useState(null);
+  const onTitleClick = (e, index) => {
+    e.persist();
+    const newActiveIndex = activeIndex === index ? null : index;
+    setActiveIndex(newActiveIndex);
+    if (!noScroll && newActiveIndex !== null) {
+      if (scrollRef?.current) {
+        setTimeout(() => {
+          scrollRef?.current.scrollToBottom();
+        }, 0);
+      } else {
+        scrollToElement?.(e.target.parentElement, {
+          duration: 300,
+          offset: 20
+        });
+      }
+    }
+  };
+  const textStyling = {
+    paddingLeft: "28px",
+    fontSize: "12px",
+    fontWeight: "300",
+    lineHeight: "16px"
+  };
+  return /* @__PURE__ */ jsx(FaqItems, { children: items.map((item, index) => (
+    // eslint-disable-next-line @eslint-react/no-array-index-key
+    /* @__PURE__ */ jsxs(FaqItem, { children: [
+      /* @__PURE__ */ jsxs(
+        FaqTitle,
+        {
+          isActive: activeIndex === index,
+          onClick: (e) => onTitleClick(e, index),
+          modalViewMore,
+          children: [
+            item.title,
+            /* @__PURE__ */ jsx(FaqDropdownIcon, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(FaqContent, { isOpened: activeIndex === index, children: !Array.isArray(item.content) ? /* @__PURE__ */ jsx(FaqText, { children: item.content }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("br", {}),
+        /* @__PURE__ */ jsx(Text, { style: withTextStyling ? textStyling : {}, children: /* @__PURE__ */ jsx("ul", { children: item.content.map((answer) => /* @__PURE__ */ jsx("li", { children: answer }, answer)) }) })
+      ] }) })
+    ] }, index)
+  )) });
+};
+FAQ.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.node.isRequired,
+      content: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.node]).isRequired
+    })
+  ).isRequired
+};
+var stdin_default = FAQ;
+export {
+  FAQ,
+  FaqContent,
+  FaqDropdownIcon,
+  FaqItem,
+  FaqItems,
+  FaqText,
+  FaqTitle,
+  stdin_default as default
+};

package/dist/components/FAQ/FAQ.styles.js

@@ -0,0 +1,128 @@
+import styled from "styled-components";
+import { Collapse } from "react-collapse";
+import theme from "../../styles/theme.js";
+const FaqItems = styled.div`
+  position: relative;
+`;
+const FaqDropdownIcon = styled.i.attrs({
+  className: "ion ion-ios-arrow-down"
+})`
+  width: 14px;
+  height: 20px;
+  font-size: 20px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -10px;
+  transform: rotate(0);
+  transition: 0.3s transform;
+`;
+const FaqItem = styled.div.withConfig({
+  shouldForwardProp: (props) => !["center", "customContainerStyle"].includes(props)
+})`
+  & + & {
+    margin-top: 30px;
+  }
+
+  ${(props) => props.center && `
+    text-align:center;
+  `}
+
+  ${(props) => props.customContainerStyle}
+`;
+const FaqTitle = styled.button.withConfig({
+  shouldForwardProp: (props) => !["uppercase", "white", "center", "hideIcon", "isActive", "modalViewMore"].includes(props)
+})`
+  display: block;
+  width: 100%;
+  position: relative;
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.4px;
+  color: ${() => theme.cBlack};
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: none;
+  padding-right: 30px;
+  text-align: left;
+  transition: color 0.2s;
+  background: none;
+
+  &:hover {
+    color: inherit;
+  }
+
+  ${(props) => props.uppercase && `
+    text-transform:uppercase;
+    font-weight:700;
+    letter-spacing: 0.6px;
+  `}
+
+  ${({ white }) => white && `
+    color:white;
+  `}
+
+   ${({ center }) => center && `
+    text-align:center;
+  `}
+
+    ${({ hideIcon }) => hideIcon && `
+    padding-right:0;
+  `}
+
+  ${(props) => props.isActive && `
+    ${FaqDropdownIcon} {
+      transform: rotate(180deg);
+    }
+  `}
+
+   ${(props) => props.modalViewMore && `
+    font-size: 12px;
+    font-weight: 300;
+    line-height: 16px;
+    padding-left: 28px;
+    cursor: pointer;
+    text-decoration: underline;
+
+    &:hover {
+      color: initial;
+    }
+  `}
+`;
+const FaqContent = styled(Collapse).withConfig({
+  shouldForwardProp: (props) => !["largeSpacing"].includes(props)
+})`
+  opacity: 0;
+  transition: opacity 0.2s;
+
+  ${(props) => props.isOpened && `
+    opacity: 1;
+  `}
+`;
+const FaqText = styled.div.withConfig({
+  shouldForwardProp: (props) => !["largeSpacing"].includes(props)
+})`
+  padding: 0;
+  padding-top: 30px;
+  padding-bottom: 10px;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.4px;
+
+  ${(props) => props.largeSpacing && `
+        padding-bottom: 30px;
+
+  `}
+`;
+export {
+  FaqContent,
+  FaqDropdownIcon,
+  FaqItem,
+  FaqItems,
+  FaqText,
+  FaqTitle
+};

package/dist/components/Footer/Footer.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "react";
+import { Wrapper } from "../Grid/Grid.styles.js";
+import { StyledFooter, FooterInner, PartnerWrap, Partner, LogoWrap, PoweredWrap, Copyright } from "./Footer.styles.js";
+import MangoPayLogo from "../../static/images/mangopay.svg.js";
+const Footer = ({ color = "primary", hasSidebar = false, isSidebarExpanded }) => /* @__PURE__ */ jsx(StyledFooter, { color, isSidebarExpanded, hasSidebar, children: /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(FooterInner, { hasSidebar, children: [
+  /* @__PURE__ */ jsx(PartnerWrap, { children: /* @__PURE__ */ jsxs(Partner, { children: [
+    "STOKR is a virtual asset service provider (VASP), ",
+    /* @__PURE__ */ jsx("br", {}),
+    " ",
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: "https://searchentities.apps.cssf.lu/search-entities/search?&st=advanced&entType=VAP&entDate=2020-08-01",
+        title: "registered",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: { textDecoration: "underline", color: "white" },
+        children: "registered"
+      }
+    ),
+    " ",
+    "with the Luxembourg regulator CSSF."
+  ] }) }),
+  /* @__PURE__ */ jsx(LogoWrap, { children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      style: {
+        verticalAlign: "middle",
+        minWidth: 44,
+        maxWidth: 120
+      },
+      loading: "lazy",
+      src: MangoPayLogo,
+      alt: "Mangopay logo"
+    }
+  ) }),
+  /* @__PURE__ */ jsx(PoweredWrap, { children: /* @__PURE__ */ jsxs(Copyright, { children: [
+    "Copyright ",
+    (/* @__PURE__ */ new Date()).getFullYear(),
+    " STOKR. All rights reserved."
+  ] }) })
+] }) }) });
+Footer.propTypes = {
+  color: PropTypes.oneOf(["primary", "red"]),
+  lemonwayLogo: PropTypes.string,
+  hasSidebar: PropTypes.bool,
+  isSidebarExpanded: PropTypes.bool
+};
+var stdin_default = Footer;
+export {
+  Footer,
+  stdin_default as default
+};