@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/BasicTable/BasicTable.styles.js

@@ -0,0 +1,76 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Table = styled.div.withConfig({
+  shouldForwardProp: (props) => !["filled"].includes(props)
+})`
+  display: block;
+  border: 1px solid ${() => theme.cLightGrey};
+  ${(props) => props.filled && `
+  background:  #e1e1e1; //${() => theme.cLightGrey};
+  `}
+`;
+const Row = styled.div.withConfig({
+  shouldForwardProp: (props) => !["smallPadding"].includes(props)
+})`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  padding: 16px 24px;
+  display: block;
+
+  ${rwd.XLarge`
+    padding: 16px 46px;
+  `}
+
+  & + & {
+    border-top: 1px solid ${() => theme.cLightGrey};
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 0;
+    clear: both;
+  }
+  ${(props) => props.smallPadding && `
+  padding:  14px 6px;
+  `}
+`;
+const Label = styled.div`
+  float: left;
+  max-width: 50%;
+  text-align: start;
+`;
+const Value = styled.div`
+  float: right;
+  display: grid;
+  max-width: 50%;
+`;
+const LabelWarning = styled.div`
+  float: left;
+  text-align: left;
+  width: 100%;
+  color: #ee220d;
+  line-height: 16px;
+`;
+const Caption = styled.div`
+  text-transform: initial;
+  font-size: 11px;
+  float: right;
+  letter-spacing: 0.6px;
+  font-style: italic;
+  //position: absolute;
+  //right: 7px;
+  //bottom: 0px;
+`;
+export {
+  Caption,
+  Label,
+  LabelWarning,
+  Row,
+  Table,
+  Value
+};

package/dist/components/BlogPost/BlogPost.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Container, ImageWrapper, LoaderWrapper, LoaderImage, Image, Content, Category, TextWrapper, BottomRow, StyledButton } from "./BlogPost.styles.js";
+import { Breakdown } from "../breakdown/Breakdown.js";
+import { loaderGif } from "../StokrLoader/StokrLoader.js";
+const BlogPost = ({
+  layout = "image-left",
+  category,
+  title,
+  description,
+  image,
+  date,
+  link,
+  onClick,
+  onContainerClick,
+  withHoverBg = false,
+  CTAText = "Read full",
+  offestViewport = 100,
+  ...props
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const imageRef = useRef(null);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      {
+        rootMargin: `${offestViewport}px`
+        // Start loading image when it's 50px from viewport
+      }
+    );
+    if (imageRef.current) {
+      observer.observe(imageRef.current);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [offestViewport]);
+  const handleImageLoad = () => {
+    setImageLoaded(true);
+  };
+  return /* @__PURE__ */ jsxs(Container, { layout, ...props, withHoverBg, onClick: () => onContainerClick?.(), children: [
+    /* @__PURE__ */ jsxs(ImageWrapper, { layout, children: [
+      !imageLoaded && isVisible && /* @__PURE__ */ jsx(LoaderWrapper, { children: /* @__PURE__ */ jsx(LoaderImage, { src: loaderGif, alt: "Loading..." }) }),
+      /* @__PURE__ */ jsx(
+        Image,
+        {
+          ref: imageRef,
+          src: isVisible ? image : null,
+          "data-src": image,
+          alt: title,
+          loading: "lazy",
+          onLoad: handleImageLoad,
+          style: { opacity: imageLoaded ? 1 : 0 }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Content, { layout, children: [
+      /* @__PURE__ */ jsx(Category, { category, children: category }),
+      /* @__PURE__ */ jsxs(TextWrapper, { children: [
+        /* @__PURE__ */ jsx("h3", { children: title }),
+        description && layout !== "image-fullscreen" && layout !== "image-cover" && /* @__PURE__ */ jsx("p", { children: description })
+      ] }),
+      /* @__PURE__ */ jsxs(BottomRow, { children: [
+        date && /* @__PURE__ */ jsx(Breakdown, { children: date }),
+        /* @__PURE__ */ jsx(
+          StyledButton,
+          {
+            onClick: () => {
+              if (link && !onClick) window.location.href = link;
+              if (onClick) onClick();
+            },
+            children: CTAText
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+BlogPost.propTypes = {
+  layout: PropTypes.oneOf(["image-left", "image-right", "image-cover", "image-fullscreen"]),
+  category: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  image: PropTypes.string.isRequired,
+  date: PropTypes.string,
+  link: PropTypes.string.isRequired,
+  withHoverBg: PropTypes.bool
+};
+export {
+  BlogPost
+};

package/dist/components/BlogPost/BlogPost.styles.js

@@ -0,0 +1,230 @@
+import rwd from "../../styles/rwd.js";
+import { Breakdown } from "../breakdown/Breakdown.js";
+import theme from "../../styles/theme.js";
+import { Button } from "../Button/Button.styles.js";
+import styled, { css } from "styled-components";
+const Content = styled.div.withConfig({
+  shouldForwardProp: (props) => props !== "layout"
+})`
+  flex: ${({ layout }) => layout === "image-cover" || layout === "image-fullscreen" ? "0" : "1"};
+  padding: ${({ layout }) => layout === "image-cover" || layout === "image-fullscreen" ? "16px" : "16px 0"};
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  word-break: break-word;
+  transition: all 0.3s ease;
+  position: ${({ layout }) => layout === "image-cover" || layout === "image-fullscreen" ? "absolute" : "relative"};
+  ${({ layout }) => (layout === "image-cover" || layout === "image-fullscreen") && css`
+      bottom: 0;
+      left: 0;
+      right: 0;
+      color: ${theme.cWhite};
+    `}
+
+  ${rwd.Medium`
+    gap: 24px;
+    padding: 24px; 
+
+    ${({ layout }) => layout === "image-left" && css`
+        padding-right: 0;
+      `};
+
+     ${({ layout }) => layout === "image-right" && css`
+         padding-left: 0;
+       `};
+  
+  `}
+`;
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["withHoverBg", "layout"].includes(props)
+})`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: ${theme.cWhite};
+  height: 100%;
+  min-height: 400px;
+  max-height: 540px;
+  transition: all 0.3s ease;
+
+  ${rwd.Medium`
+
+    flex-direction: ${({ layout }) => layout === "image-cover" || layout === "image-fullscreen" ? "column" : layout === "image-right" ? "row-reverse" : "row"};
+    min-height: 500px;
+
+     ${({ layout }) => layout === "image-fullscreen" && css`
+         grid-column: 1 / -1;
+       `}
+  `}
+
+  ${rwd.XLarge`
+    min-height: 540px;
+  `}
+
+  ${(props) => props.withHoverBg && `
+    @media (hover: hover) and (pointer: fine) {
+    cursor:pointer;
+    &:hover {
+    box-shadow: 0 0 0 10px #fafafa;
+
+      ${(props.layout === "image-right" || props.layout === "image-left") && `
+        ${Content}  {
+          background-color: #fafafa;
+          }
+        `}
+    }
+  }
+    `}
+`;
+const ImageWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => props !== "layout"
+})`
+  position: relative;
+  flex: ${({ layout }) => layout === "image-cover" || layout === "image-fullscreen" ? "1" : "0 0 50%"};
+  overflow: hidden;
+
+  ${({ layout }) => (layout === "image-cover" || layout === "image-fullscreen") && css`
+      &:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.4);
+        transition: background 0.3s ease;
+      }
+    `}
+`;
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.3s ease;
+`;
+const TextWrapper = styled.div`
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  // max-height: 70%;
+
+  h3 {
+    font-weight: 800;
+    font-size: 20px;
+    line-height: 30px;
+    letter-spacing: 1.41px;
+    text-transform: uppercase;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+
+    -webkit-line-clamp: 3;
+
+    ${rwd.Mobile`
+      -webkit-line-clamp: 4;
+    `}
+
+    ${rwd.Medium`
+      font-size: 22px;
+      -webkit-line-clamp: 6;
+    `}
+
+    ${rwd.Large`
+      -webkit-line-clamp: 8;
+    `}
+  }
+
+  p {
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.6px;
+    margin: 24px 0 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+
+    ${rwd.Medium`
+    -webkit-line-clamp: 3;
+
+    `}
+
+    ${rwd.XLarge`
+      -webkit-line-clamp: 4;
+    `}
+  }
+`;
+const BottomRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: auto;
+  width: 100%;
+  gap: 12px;
+`;
+const Category = styled(Breakdown).withConfig({
+  shouldForwardProp: (props) => props !== "category"
+})`
+  font-weight: 500 !important;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  ${({ category }) => category === "PODCAST" && css`
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 6px 0 6px 8px;
+        border-color: transparent transparent transparent ${theme.cLightGrey};
+      }
+    `}
+`;
+const StyledButton = styled(Button)`
+  opacity: 0;
+  transition: opacity 0.3s ease;
+
+  /* Only use hover effects on non-touch devices */
+  @media (hover: hover) and (pointer: fine) {
+    ${Container}:hover & {
+      opacity: 1;
+    }
+  }
+`;
+const LoaderWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+`;
+const LoaderImage = styled.img`
+  width: 100px;
+  height: 100px;
+`;
+export {
+  BottomRow,
+  Category,
+  Container,
+  Content,
+  Image,
+  ImageWrapper,
+  LoaderImage,
+  LoaderWrapper,
+  StyledButton,
+  TextWrapper
+};

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,207 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+import theme from "../../styles/theme.js";
+const Button = styled.button.withConfig({
+  shouldForwardProp: (props) => ![
+    "isUpdates",
+    "isCancel",
+    "isDone",
+    "withMarginBottom",
+    "minWidth",
+    "fluid",
+    "center",
+    "secondary",
+    "onlyText",
+    "disabled",
+    "negative",
+    "outline",
+    "outlineBlack",
+    "marginTop",
+    "marginRight",
+    "isLoginMobile"
+  ].includes(props)
+}).attrs((props) => ({
+  type: props.type || "button"
+}))`
+  display: inline-block;
+  height: auto;
+  min-height: 40px;
+  max-width: 100%;
+  background-color: ${() => theme.cPrimary};
+  border: 1px solid ${() => theme.cPrimary};
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 16px;
+  color: ${() => theme.cWhite};
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 2px;
+  border-radius: 28px;
+  padding: 11px 32px;
+  margin: 0;
+  outline: 0;
+  vertical-align: baseline;
+  text-shadow: none;
+  user-select: none;
+  cursor: pointer;
+  transition:
+    color 0.2s,
+    background-color 0.2s,
+    border-color 0.2s;
+
+  //next 3 added from VD
+  ${({ isUpdates, isCancel }) => isUpdates && isCancel && css`
+      padding: 11px 0;
+      margin-left: 32px;
+    `}
+
+  ${({ isUpdates, isDone }) => isUpdates && isDone && css`
+      margin-left: 32px;
+
+      @media screen and (max-width: 850px) {
+        padding: 11px 20px;
+      }
+    `}
+
+  ${({ withMarginBottom }) => withMarginBottom && css`
+      margin-bottom: 32px;
+    `}
+
+
+  ${(props) => props.minWidth && css`
+      min-width: ${props.minWidth};
+    `}
+
+  ${(props) => props.fluid && css`
+      display: block;
+      width: 100%;
+      padding: 11px 12px;
+    `}
+
+  ${(props) => props.center && css`
+      margin-left: auto;
+      margin-right: auto;
+    `}
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: ${() => theme.cPrimaryDark};
+    border-color: ${() => theme.cPrimaryDark};
+    color: ${() => theme.cWhite};
+  }
+
+  ${(props) => props.secondary && css`
+      background-color: ${theme.cWhite};
+      color: ${theme.cPrimary};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cPrimary};
+        border-color: ${theme.cPrimary};
+        color: ${theme.cWhite};
+      }
+    `}
+
+  ${(props) => props.onlyText && css`
+      border-color: transparent;
+      background-color: transparent;
+      color: ${theme.cBlack};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: transparent;
+        border-color: transparent;
+        color: ${theme.cPrimary};
+      }
+    `}
+
+  ${(props) => props.disabled && css`
+      border-color: ${theme.cBlack};
+      background-color: ${theme.cWhite};
+      color: ${theme.cBlack};
+      opacity: 0.2;
+      cursor: default;
+      box-shadow: none !important;
+      pointer-events: none !important;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cPrimary};
+        border-color: ${theme.cPrimary};
+        color: ${theme.cWhite};
+      }
+    `}
+
+  ${(props) => props.negative && css`
+      border-color: ${theme.cWarning};
+      background-color: ${theme.cWhite};
+      color: ${theme.cWarning};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cWhite};
+        border-color: ${theme.cWarningDark};
+        color: ${theme.cWarningDark};
+      }
+    `}
+
+  ${(props) => props.outline && css`
+      border-color: ${theme.cWhite};
+      background-color: transparent;
+      color: ${theme.cWhite};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cWhite};
+        border-color: ${theme.cWhite};
+        color: ${theme.cWarning};
+      }
+    `}
+
+  ${(props) => props.outlineBlack && css`
+      border-color: ${theme.grey4};
+      background-color: ${theme.cWhite};
+      color: ${theme.cBlack};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cPrimary};
+        border-color: ${theme.cPrimary};
+        color: ${theme.cWhite};
+      }
+    `}
+
+    //next 2 props added from SUF
+
+  ${(props) => props.marginTop && css`
+      margin-top: ${props.marginTop};
+    `}
+
+  ${(props) => props.marginRight && css`
+      margin-right: ${props.marginRight};
+    `}
+
+    ${(props) => props.isLoginMobile && `
+     margin-bottom: 20px;
+  width: 163.94px;
+    `}
+`;
+Button.propTypes = {
+  secondary: PropTypes.bool,
+  disabled: PropTypes.bool,
+  negative: PropTypes.bool,
+  center: PropTypes.bool,
+  outline: PropTypes.bool,
+  outlineBlack: PropTypes.bool
+};
+export {
+  Button,
+  Button as default
+};

package/dist/components/ButtonContainer/ButtonContainer.styles.js

@@ -0,0 +1,51 @@
+import styled from "styled-components";
+import { Button } from "../Button/Button.styles.js";
+const ButtonContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["flexColumn"].includes(props)
+})`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  ${(props) => props.flexColumn && `
+    flex-direction:column;
+  `}
+
+  ${Button} {
+    min-width: 150px;
+    max-width: 300px;
+  }
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+
+    ${Button} {
+      min-width: 150px;
+      max-width: 400px;
+    }
+  }
+`;
+const ButtonGridContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  justify-items: center;
+  align-items: center;
+
+  ${Button} {
+    min-width: 150px;
+    max-width: 300px;
+    width: 100%;
+  }
+
+  @media screen and (max-width: 767px) {
+    grid-template-columns: repeat(1, 1fr);
+
+    ${Button} {
+      max-width: 400px;
+    }
+  }
+`;
+export {
+  ButtonContainer,
+  ButtonGridContainer
+};

package/dist/components/CapitalRaisedSummary/CaptialRaisedSummary.js

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import CountUp from "react-countup";
+import PropTypes from "prop-types";
+import stdin_default, { MultiProgressBarPropTypes } from "../MultiProgressBar/MultiProgressBar.js";
+import { Wrapper, Title, Amount } from "./CaptialRaisedSummary.styles.js";
+const CaptialRaisedSummary = ({ capital, multiProgressBar }) => /* @__PURE__ */ jsxs(Wrapper, { children: [
+  /* @__PURE__ */ jsx(Title, { children: "CAPITAL RAISED" }),
+  /* @__PURE__ */ jsx(Amount, { children: /* @__PURE__ */ jsx(CountUp, { end: capital, prefix: "€ ", duration: 0.01, separator: "," }) }),
+  /* @__PURE__ */ jsx(stdin_default, { ...multiProgressBar })
+] });
+CaptialRaisedSummary.propTypes = {
+  capital: PropTypes.number.isRequired,
+  multiProgressBar: PropTypes.shape(MultiProgressBarPropTypes).isRequired
+};
+export {
+  CaptialRaisedSummary
+};