@stokr/components-library 3.0.16 → 3.0.17

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
+};

package/dist/components/Timeline/Timeline.styles.js

@@ -0,0 +1,147 @@
+import styled, { css } from "styled-components";
+import { colors } from "../../styles/colors.js";
+const iconSize = 20;
+const TimelineContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["maxWidth"].includes(props)
+})`
+  position: relative;
+  width: 100%;
+  max-width: ${(props) => props.maxWidth || "100%"};
+`;
+const TimelineStepWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isLast"].includes(props)
+})`
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: ${(props) => props.isLast ? "0" : "10px"};
+`;
+const IconContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 24px;
+  width: 24px;
+  margin-right: 16px;
+  align-self: stretch;
+  gap: 4px;
+`;
+const StepIcon = styled.div.withConfig({
+  shouldForwardProp: (props) => !["state"].includes(props)
+})`
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  ${(props) => {
+  switch (props.state) {
+    case "completed":
+      return css`
+          background-color: ${colors.freshGreen};
+          color: ${colors.white};
+        `;
+    case "pending":
+      return css`
+          background-color: ${colors.warningOrange};
+          color: ${colors.white};
+        `;
+    case "failed":
+    case "cancelled":
+      return css`
+          background-color: ${colors.darkRed};
+          color: ${colors.white};
+        `;
+    case "inactive":
+    default:
+      return css`
+          background-color: transparent;
+          border: 1.5px solid ${colors.lightGrey};
+          color: ${colors.grey2};
+        `;
+  }
+}}
+
+  svg path {
+    stroke: ${colors.white};
+  }
+`;
+const ConnectingLine = styled.div.withConfig({
+  shouldForwardProp: (props) => !["state"].includes(props)
+})`
+  width: 2px;
+  flex: 1;
+  min-height: 10px;
+  align-self: center;
+
+  ${(props) => {
+  const lineColor = props.state === "completed" ? colors.freshGreen : props.state === "pending" ? colors.warningOrange : props.state === "failed" || props.state === "cancelled" ? colors.darkRed : colors.lightGrey;
+  return css`
+      background-color: ${lineColor};
+    `;
+}}
+`;
+const StepContent = styled.div`
+  flex: 1;
+  padding-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+const StepHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+const StepDate = styled.span`
+  color: ${colors.black};
+  font-size: 11px;
+  font-weight: 400;
+  text-transform: uppercase;
+  line-height: 15px;
+  letter-spacing: 2px;
+  word-wrap: break-word;
+`;
+const StepTitle = styled.span.withConfig({
+  shouldForwardProp: (props) => !["state"].includes(props)
+})`
+  color: ${(props) => {
+  switch (props.state) {
+    case "inactive":
+    case "pending":
+      return colors.grey2;
+    default:
+      return colors.black;
+  }
+}};
+
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  word-wrap: break-word;
+`;
+const StepCaption = styled.div`
+  color: ${colors.grey2};
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.6px;
+  word-wrap: break-word;
+`;
+export {
+  ConnectingLine,
+  IconContainer,
+  StepCaption,
+  StepContent,
+  StepDate,
+  StepHeader,
+  StepIcon,
+  StepTitle,
+  TimelineContainer,
+  TimelineStepWrapper
+};

package/dist/components/Timeline/TimelineStep.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+import { TimelineStepWrapper, IconContainer, StepIcon, ConnectingLine, StepContent, StepDate, StepHeader, StepTitle, StepCaption } from "./Timeline.styles.js";
+import SvgCrossIcon from "../../static/images/cross-icon.svg.js";
+import SvgCheckIcon from "../../static/images/check-icon.svg.js";
+import { format } from "date-fns";
+const TimelineStep = ({
+  state = "inactive",
+  date,
+  title,
+  tooltip,
+  caption,
+  isLast = false,
+  customIcon,
+  showInfoIcon = true,
+  infoIconPosition = "right",
+  // Style props
+  stepStyle,
+  iconStyle,
+  contentStyle,
+  className
+}) => {
+  const getIcon = () => {
+    if (customIcon) return customIcon;
+    switch (state) {
+      case "completed":
+        return /* @__PURE__ */ jsx(SvgCheckIcon, { width: 12, height: 12 });
+      case "pending":
+        return /* @__PURE__ */ jsx(Icon, { icon: iconsMap.inProgress, size: 12, style: { marginLeft: 1 } });
+      case "failed":
+      case "cancelled":
+        return /* @__PURE__ */ jsx(SvgCrossIcon, { width: 8, height: 8 });
+      case "inactive":
+      default:
+        return null;
+    }
+  };
+  const formattedDate = date ? format(new Date(date), "dd. MMM yyyy HH:mm") : null;
+  return /* @__PURE__ */ jsxs(TimelineStepWrapper, { isLast, style: stepStyle, className, children: [
+    /* @__PURE__ */ jsxs(IconContainer, { children: [
+      /* @__PURE__ */ jsx(StepIcon, { state, style: iconStyle, children: getIcon() }),
+      !isLast && /* @__PURE__ */ jsx(ConnectingLine, { state })
+    ] }),
+    /* @__PURE__ */ jsxs(StepContent, { style: contentStyle, children: [
+      formattedDate && /* @__PURE__ */ jsx(StepDate, { children: formattedDate }),
+      /* @__PURE__ */ jsxs(StepHeader, { children: [
+        /* @__PURE__ */ jsx(StepTitle, { state, children: title }),
+        showInfoIcon && tooltip && /* @__PURE__ */ jsx(InfoIcon, { title: tooltip, position: infoIconPosition, noMargin: true, containerStyle: { marginTop: 1 } })
+      ] }),
+      caption && /* @__PURE__ */ jsx(StepCaption, { children: caption })
+    ] })
+  ] });
+};
+export {
+  TimelineStep
+};

package/dist/components/ToDoList/ToDoList.js

@@ -0,0 +1,172 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { iconsMap, TooltipIcon } from "../Icon/Icon.style.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Container, TitleContainer, PendingCounter, Title, Subtitle } from "./ToDoList.styles.js";
+import stdin_default from "./ToDoListTask.js";
+import { Icon } from "./ToDoListTask.styles.js";
+import { Tooltip } from "react-tippy";
+const ToDoTaskState = {
+  REJECTED: "rejected",
+  DENIED: "rejected",
+  DRAFT: "draft",
+  IN_PROGRESS: "in_progress",
+  APPROVED: "approved",
+  SKIPPED: "skipped",
+  REAPPLY: "reapply",
+  NOT_AVAILABLE: "not_available"
+};
+const ToDoTaskMessage = {
+  [ToDoTaskState.REJECTED]: "Rejected. Please re-apply.",
+  [ToDoTaskState.DENIED]: "Rejected. Please re-apply.",
+  [ToDoTaskState.DRAFT]: "Draft",
+  [ToDoTaskState.IN_PROGRESS]: "In progress",
+  [ToDoTaskState.APPROVED]: "Verified",
+  [ToDoTaskState.SKIPPED]: "Skipped"
+};
+const ToDoModal = {
+  TAX_ID: "taxid"
+};
+const ToDoTaskIcons = {
+  [ToDoTaskState.REJECTED]: iconsMap.warning,
+  [ToDoTaskState.DENIED]: iconsMap.warning,
+  [ToDoTaskState.DRAFT]: iconsMap.edit,
+  [ToDoTaskState.IN_PROGRESS]: iconsMap.inProgress,
+  [ToDoTaskState.APPROVED]: iconsMap.check,
+  [ToDoTaskState.SKIPPED]: iconsMap.arrowRight,
+  [ToDoTaskState.NOT_AVAILABLE]: iconsMap.arrowRight
+};
+const ToDoList = ({
+  mandatoryTasks = [],
+  walletsTasks = [],
+  optionalTasks = [],
+  mandatoryTasksCount,
+  walletsTasksCount,
+  pendingTasksCount,
+  additionalTasks,
+  redirectCookie,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(TitleContainer, { children: [
+      pendingTasksCount !== 0 ? /* @__PURE__ */ jsx(PendingCounter, { children: pendingTasksCount }) : /* @__PURE__ */ jsx(
+        Icon,
+        {
+          state: "approved",
+          checklist: true
+        }
+      ),
+      /* @__PURE__ */ jsx(Title, { children: "Checklist" })
+    ] }) }),
+    mandatoryTasks.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(TitleContainer, { marginBottom: "10px", children: [
+        mandatoryTasksCount !== 0 ? /* @__PURE__ */ jsx(PendingCounter, { children: mandatoryTasksCount }) : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            state: "approved",
+            checklist: true
+          }
+        ),
+        /* @__PURE__ */ jsx(Subtitle, { children: "Mandatory" })
+      ] }) }),
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingHorizontal: true, children: mandatoryTasks.map((task) => /* @__PURE__ */ jsx(
+        stdin_default,
+        {
+          title: task.title,
+          message: task.message || ToDoTaskMessage[task.state],
+          state: task.state,
+          icon: ToDoTaskIcons[task.state],
+          link: task.link,
+          tooltip: task.tooltip,
+          redirectCookie,
+          ...props
+        },
+        task.title
+      )) })
+    ] }),
+    walletsTasks.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsxs(TitleContainer, { marginBottom: "10px", children: [
+        walletsTasksCount !== 0 ? /* @__PURE__ */ jsx(PendingCounter, { children: walletsTasksCount }) : /* @__PURE__ */ jsx(
+          Icon,
+          {
+            state: "approved",
+            checklist: true
+          }
+        ),
+        /* @__PURE__ */ jsx(Subtitle, { children: "Register Wallets" }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            position: "right",
+            title: "Before you invest you must have registered the wallet that can hold your purchased securities. Click below and register it to proceed with your investment.",
+            theme: "light",
+            arrow: true,
+            duration: 200,
+            size: 40,
+            style: { cursor: "help", fontSize: 16 },
+            children: /* @__PURE__ */ jsx(TooltipIcon, { onClick: (e) => e.preventDefault() })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingHorizontal: true, children: walletsTasks.map((task) => /* @__PURE__ */ jsx(
+        stdin_default,
+        {
+          title: task.title,
+          message: task.message || ToDoTaskMessage[task.state],
+          state: task.state,
+          icon: ToDoTaskIcons[task.state],
+          link: task.link,
+          disabled: task.disabled,
+          tooltip: task.tooltip,
+          openModal: task.openModal,
+          redirectCookie,
+          ...props
+        },
+        task.title
+      )) })
+    ] }),
+    optionalTasks.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(TitleContainer, { marginBottom: "10px", children: /* @__PURE__ */ jsx(Subtitle, { marginLeft: "32px", children: "Optional" }) }) }),
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, noPaddingHorizontal: true, children: optionalTasks.map((task) => /* @__PURE__ */ jsx(
+        stdin_default,
+        {
+          title: task.title,
+          message: task.message || ToDoTaskMessage[task.state],
+          state: task.state,
+          icon: ToDoTaskIcons[task.state],
+          link: task.link,
+          tooltip: task.tooltip,
+          redirectCookie,
+          openModal: task.openModal,
+          ...props
+        },
+        task.title
+      )) })
+    ] }),
+    additionalTasks && additionalTasks
+  ] });
+};
+const taskListPropType = PropTypes.arrayOf(
+  PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    // message: PropTypes.string.isRequired,
+    state: PropTypes.oneOf([...Object.values(ToDoTaskState)]).isRequired,
+    link: PropTypes.any,
+    tooltip: PropTypes.string
+  })
+);
+ToDoList.propTypes = {
+  mandatoryTasks: taskListPropType,
+  optionalTasks: taskListPropType,
+  successText: PropTypes.string,
+  additionalTasks: PropTypes.node,
+  mandatoryTasksCount: PropTypes.number,
+  walletsTasksCount: PropTypes.number
+};
+export {
+  ToDoList,
+  ToDoModal,
+  ToDoTaskMessage,
+  ToDoTaskState
+};

package/dist/components/ToDoList/ToDoList.styles.js

@@ -0,0 +1,122 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+import { colors } from "../../styles/colors.js";
+const Container = styled.div`
+  display: inline-block;
+`;
+const TitleContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["marginBottom"].includes(props)
+})`
+  display: flex;
+  align-items: center;
+
+  ${({ marginBottom }) => marginBottom && css`
+      margin-bottom: ${marginBottom};
+    `}
+`;
+const Title = styled.div`
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+`;
+const Subtitle = styled.div.withConfig({
+  shouldForwardProp: (props) => !["centerVertically", "marginLeft"].includes(props)
+})`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.06px;
+  text-transform: uppercase;
+  // margin-bottom: 10px;
+
+  ${({ centerVertically }) => centerVertically && css`
+      margin-bottom: 0;
+    `}
+
+  ${({ marginLeft }) => marginLeft && css`
+      margin-left: ${marginLeft};
+    `}
+`;
+const PendingCounter = styled.span`
+  width: 16px;
+  height: 16px;
+  margin-left: 3px;
+  margin-right: 13px;
+  color: ${colors.white};
+  background: ${colors.orangishRed};
+  border-radius: 50%;
+  font-size: 9px;
+  font-weight: 600;
+  text-align: center;
+  line-height: 16px;
+  padding-left: 1px;
+`;
+styled.div`
+  padding: 28px 0;
+`;
+styled.div`
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 20px;
+  letter-spacing: 1.8px;
+  text-transform: uppercase;
+  padding-bottom: 14px;
+  margin-bottom: 16px;
+  text-align: left;
+  border-bottom: 1px solid ${colors.lightGrey};
+`;
+styled.div`
+  ${rwd.Medium`
+    margin-top: auto;
+  `}
+`;
+styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ${rwd.Medium`
+    flex-direction: row;
+  `}
+`;
+styled.div`
+  width: 102px;
+  height: 102px;
+  display: flex;
+  border: 1px dashed ${colors.blue};
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-bottom: 16px;
+
+  ${rwd.Medium`
+    margin-right: 26px;
+    margin-bottom: 0;
+  `}
+`;
+styled.i.withConfig({
+  shouldForwardProp: (props) => !["green"].includes(props)
+}).attrs({
+  className: "ion ion-md-checkmark"
+})`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${colors.blue};
+  color: ${colors.white};
+  font-size: 18px;
+  padding: 12px;
+  border-radius: 50%;
+  margin: auto;
+  ${(props) => props.green && `
+  background-color: ${colors.freshGreen};`}
+`;
+export {
+  Container,
+  PendingCounter,
+  Subtitle,
+  Title,
+  TitleContainer
+};