@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/AdminDashboard/Table/Table.styles.js

@@ -0,0 +1,263 @@
+import styled, { css } from "styled-components";
+const Container = styled.div`
+  position: relative;
+`;
+const HeadWrapper = styled.div`
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  background-color: ${(props) => props.theme.cWhite};
+`;
+const TableWrapper = styled.div`
+  z-index: 0;
+  position: relative;
+  display: block;
+`;
+const StyledTable = styled.div`
+  display: table;
+  min-width: 100%;
+`;
+const Row = styled.div`
+  display: table-row;
+`;
+const Column = styled.div.withConfig({
+  shouldForwardProp: (props) => !["colWidth", "minWidth", "maxWidth"].includes(props)
+})`
+  display: table-cell;
+  text-align: ${(props) => props.align};
+  font-family: 'Open Sans';
+
+  ${(props) => props.colWidth && `
+    width: ${props.colWidth}
+    min-width: ${props.colWidth}
+  `};
+
+  ${(props) => props.minWidth && `
+    min-width: ${props.minWidth}
+  `};
+
+  ${(props) => props.maxWidth && `
+    width: ${props.maxWidth}
+    max-width: ${props.maxWidth}
+  `};
+`;
+const Head = styled.div.withConfig({
+  shouldForwardProp: (props) => !["hidden"].includes(props)
+})`
+  display: table-header-group;
+
+  ${(props) => props.hidden && `
+    visibility: hidden;
+  `}
+
+  ${Row} {
+    ${Column} {
+      border-bottom: 1px solid ${(props) => props.theme.cLightGrey};
+    }
+  }
+
+  ${Column} {
+    color: ${(props) => props.theme.cProgress};
+    font-weight: 600;
+    font-size: 11px;
+    line-height: 20px;
+    letter-spacing: 1.98px;
+    text-transform: uppercase;
+    vertical-align: middle;
+    white-space: nowrap;
+    padding: 10px 10px;
+  }
+`;
+const Body = styled.div`
+  display: table-row-group;
+
+  ${Row} {
+    /* ${Column}:last-of-type {
+      padding-right: 0;
+    } */
+
+    & + ${Row} {
+      ${Column} {
+        border-top: 1px solid ${(props) => props.theme.cLightGrey};
+      }
+    }
+
+    /* &:hover {
+      ${Column} {
+        background-color: ${(props) => props.theme.cGrey};
+      }
+    } */
+  }
+
+  ${Column} {
+    color: ${(props) => props.theme.cBlack};
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    vertical-align: middle;
+    padding: 26px 10px;
+  }
+`;
+styled.div`
+  display: inline-block;
+  background-color: ${(props) => props.color};
+  color: ${(props) => props.theme.cWhite};
+  font-weight: 600;
+  min-width: 40px;
+  line-height: 24px;
+  border-radius: 3px;
+  text-align: center;
+`;
+const TableDropdownIcon = styled.i.withConfig({
+  shouldForwardProp: (props) => !["isActive"].includes(props)
+}).attrs({
+  className: "ion ion-ios-arrow-down"
+})`
+  width: 14px;
+  height: 20px;
+  font-size: 20px;
+  margin-top: -10px;
+  transform: rotate(0);
+  transition: 0.3s transform;
+  cursor: pointer;
+  ${(props) => props.isActive && `
+      transform: rotate(180deg);
+  `}
+`;
+const Styles = styled.div`
+  /* This is required to make the table full-width */
+  display: block;
+  max-width: 100%;
+
+  table {
+    th,
+    td {
+      /* The secret sauce */
+      /* Each cell should grow equally */
+      // width: 1%;
+      /* But "collapsed" cells should be as small as possible */
+      &.collapse {
+        width: 0.0000000001%;
+      }
+    }
+  }
+`;
+const TableWrap = styled.div`
+  display: block;
+  max-width: 100%;
+  overflow-x: auto; //scroll;
+  overflow-y: hidden;
+`;
+const StyledTh = styled.th.withConfig({
+  shouldForwardProp: (props) => !["blue", "width", "minWidth", "maxWidth"].includes(props)
+})`
+  text-transform: uppercase;
+  padding: 10px;
+  font-size: 11px;
+  letter-spacing: 1.6px;
+  font-weight: 600;
+  background-color: white;
+  color: #000000de;
+  border-bottom: 1px solid #e1e1e1;
+  line-height: 20px;
+
+  ${(props) => props.blue && `
+      background-color: #0050ca;
+      color: #ffffff;
+      border:none;
+  `}
+
+  ${(props) => props.width && `
+      width: ${props.width};
+      min-width: ${props.width};
+      max-width: ${props.width};
+  `}
+
+  ${(props) => props.minWidth && `
+      min-width: ${props.minWidth};
+  `}
+
+  ${(props) => props.maxWidth && `
+      max-width: ${props.maxWidth};
+  `}
+`;
+const StyledTd = styled.td.withConfig({
+  shouldForwardProp: (props) => !["blue", "subTable", "width", "minWidth", "maxWidth"].includes(props)
+})`
+  padding: 26px 15px;
+  border-bottom: 1px solid #e1e1e1;
+  font-size: 14px;
+  ${(props) => props.blue && `
+      background-color: #004bb7;
+    color: #ffffff;
+  `}
+
+  ${(props) => props.subTable && `
+     padding: 0;
+      &:last-child {
+        border-bottom: 0;
+      }
+  `}
+
+  ${(props) => props.width && `
+      width: ${props.width};
+      min-width: ${props.width};
+      max-width: ${props.width};
+  `}
+
+  ${(props) => props.minWidth && `
+      min-width: ${props.minWidth};
+  `}
+
+  ${(props) => props.maxWidth && `
+      max-width: ${props.maxWidth};
+  `}
+`;
+const StyledTr = styled.tr.withConfig({
+  shouldForwardProp: (props) => !["customRowStyles", "rowIndex", "rowData", "customRowHoverStyles"].includes(props)
+})`
+  ${(props) => props.customRowStyles && css`
+      ${props.customRowStyles(props.rowIndex, props.rowData)}
+    `}
+
+  ${(props) => props.customRowHoverStyles && css`
+      &:hover,
+      &:focus,
+      &:active {
+        ${props.customRowHoverStyles(props.rowIndex, props.rowData)}
+      }
+    `}
+`;
+const StyledReactTable = styled.table.withConfig({
+  shouldForwardProp: (props) => !["customTableStyles"].includes(props)
+})`
+  width: 100%;
+  border-spacing: 0;
+
+  ${(props) => props.customTableStyles && css`
+      ${props.customTableStyles()}
+    `}
+`;
+StyledReactTable.Tr = StyledTr;
+StyledReactTable.Th = StyledTh;
+StyledReactTable.Td = StyledTd;
+export {
+  Body,
+  Column,
+  Container,
+  Head,
+  HeadWrapper,
+  Row,
+  StyledReactTable,
+  StyledTable,
+  StyledTd,
+  StyledTh,
+  StyledTr,
+  Styles,
+  TableDropdownIcon,
+  TableWrap,
+  TableWrapper
+};

package/dist/components/AgreementItem/AgreementItem.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import PropTypes from "prop-types";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+import { Text } from "../Text/Text.styles.js";
+import stdin_default, { CheckboxPropTypes } from "../Checkbox/Checkbox.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Container, InfoBox } from "./AgreementItem.styles.js";
+const AgreementItem = ({ title = "", text, checkbox, info = "" }) => /* @__PURE__ */ jsxs(Container, { children: [
+  /* @__PURE__ */ jsxs(Text, { children: [
+    title && /* @__PURE__ */ jsx("h3", { children: title }),
+    text && /* @__PURE__ */ jsx("p", { children: text })
+  ] }),
+  checkbox && /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingBottom: true, children: /* @__PURE__ */ jsx(
+    stdin_default,
+    {
+      id: checkbox.id,
+      name: checkbox.name || checkbox.id,
+      text: /* @__PURE__ */ jsxs(Fragment, { children: [
+        checkbox.text,
+        info && /* @__PURE__ */ jsx(InfoIcon, { position: "bottom", html: /* @__PURE__ */ jsx(InfoBox, { children: info }) })
+      ] }),
+      value: checkbox.value,
+      checked: checkbox.checked,
+      onChange: checkbox.onChange,
+      onBlur: checkbox.onBlur,
+      onClick: checkbox.onClick
+    }
+  ) })
+] });
+AgreementItem.propTypes = {
+  title: PropTypes.string,
+  text: PropTypes.string.isRequired,
+  info: PropTypes.string,
+  checkbox: PropTypes.shape(CheckboxPropTypes).isRequired
+};
+export {
+  AgreementItem
+};

package/dist/components/AgreementItem/AgreementItem.styles.js

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+const Container = styled.div`
+  display: block;
+`;
+styled.div`
+  padding: 6px 0;
+`;
+const InfoBox = styled.div`
+  max-width: 240px;
+  text-align: left;
+`;
+styled.a`
+  text-decoration: underline;
+
+  &:hover {
+    color: #0050ca !important;
+    opacity: 0.7;
+    text-decoration: underline;
+  }
+`;
+styled.a`
+  text-decoration: underline;
+
+  &:hover {
+    opacity: 0.7;
+    text-decoration: underline;
+  }
+`;
+export {
+  Container,
+  InfoBox
+};

package/dist/components/BackButton/BackButton.js

@@ -0,0 +1,34 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { StyledBackButtonExternal, BackButtonIcon, StyledBackButton, StyledWindowBackButton } from "./BackButton.styles.js";
+import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+const BackButton = ({ children, to, href }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(IoniconsStyles, {}),
+    href ? /* @__PURE__ */ jsxs(StyledBackButtonExternal, { href, children: [
+      /* @__PURE__ */ jsx(BackButtonIcon, {}),
+      children
+    ] }) : to ? /* @__PURE__ */ jsxs(StyledBackButton, { to, children: [
+      /* @__PURE__ */ jsx(BackButtonIcon, {}),
+      children
+    ] }) : /* @__PURE__ */ jsxs(StyledWindowBackButton, { onClick: () => window.history.back(), children: [
+      /* @__PURE__ */ jsx(BackButtonIcon, {}),
+      children
+    ] })
+  ] });
+};
+BackButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  to: PropTypes.string,
+  href: PropTypes.string
+};
+var stdin_default = BackButton;
+export {
+  BackButton,
+  BackButtonIcon,
+  StyledBackButton,
+  StyledBackButtonExternal,
+  StyledWindowBackButton,
+  stdin_default as default
+};

package/dist/components/BackButton/BackButton.styles.js

@@ -0,0 +1,123 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import theme from "../../styles/theme.js";
+const BackButtonIcon = styled.i.attrs({
+  className: "ion ion-ios-arrow-back"
+})`
+  font-size: 16px;
+  position: absolute;
+  left: 0;
+  color: ${() => theme.cBlack};
+  transform: translateX(0);
+  transition:
+    0.3s color,
+    0.3s transform;
+`;
+const ForwardButtonIcon = styled.i.attrs({
+  className: "ion ion-ios-arrow-forward"
+})`
+  font-size: 16px;
+  position: absolute;
+  right: 0;
+  color: ${() => theme.cBlack};
+  transform: translateX(0);
+  transition:
+    0.3s color,
+    0.3s transform;
+`;
+const StyledBackButton = styled(Link)`
+  display: block;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 2px;
+  color: ${() => theme.cBlack};
+  position: relative;
+  padding-left: 16px;
+  transition: 0.3s color;
+
+  &:hover {
+    color: ${() => theme.cPrimaryDark};
+
+    ${BackButtonIcon} {
+      transform: translateX(-4px);
+      color: ${() => theme.cPrimaryDark};
+    }
+  }
+`;
+const StyledBackButtonExternal = styled.a`
+  display: block;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 2px;
+  color: ${() => theme.cBlack};
+  position: relative;
+  padding-left: 16px;
+  transition: 0.3s color;
+
+  &:hover {
+    color: ${() => theme.cPrimaryDark};
+
+    ${BackButtonIcon} {
+      transform: translateX(-4px);
+      color: ${() => theme.cPrimaryDark};
+    }
+  }
+`;
+const StyledWindowBackButton = styled.span`
+  display: block;
+  font-size: 11px;
+  line-height: 16px;
+  cursor: pointer;
+  letter-spacing: 2px;
+  color: ${() => theme.cBlack};
+  position: relative;
+  padding-left: 16px;
+  transition: 0.3s color;
+
+  &:hover {
+    color: ${() => theme.cPrimaryDark};
+
+    ${BackButtonIcon} {
+      transform: translateX(-4px);
+      color: ${() => theme.cPrimaryDark};
+    }
+  }
+`;
+styled.div.withConfig({
+  shouldForwardProp: (props) => !["forward"].includes(props)
+})`
+  display: block;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 2px;
+  color: ${() => theme.cBlack};
+  position: relative;
+  padding-left: 16px;
+  transition: 0.3s color;
+  cursor: pointer;
+
+  ${(props) => props.forward && `
+    padding-right: 16px;
+  `}
+
+  &:hover {
+    color: ${() => theme.cPrimaryDark};
+
+    ${BackButtonIcon} {
+      transform: translateX(-4px);
+      color: ${() => theme.cPrimaryDark};
+    }
+
+    ${ForwardButtonIcon} {
+      transform: translateX(4px);
+      color: ${() => theme.cPrimaryDark};
+    }
+  }
+`;
+export {
+  BackButtonIcon,
+  ForwardButtonIcon,
+  StyledBackButton,
+  StyledBackButtonExternal,
+  StyledWindowBackButton
+};

package/dist/components/Background/Background.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Container, Wrap, Img, Caption, Content } from "./Background.styles.js";
+const Background = (props) => {
+  const {
+    caption = "",
+    children,
+    contain = false,
+    investmentOpportunities = false,
+    mobileRatio,
+    src,
+    withPadding = false
+  } = props;
+  const resolvedChildren = children ?? /* @__PURE__ */ jsx("div", {});
+  return /* @__PURE__ */ jsxs(Container, { mobileRatio, investmentOpportunities, children: [
+    /* @__PURE__ */ jsx(Wrap, { children: /* @__PURE__ */ jsx(
+      Img,
+      {
+        src,
+        alt: "background",
+        contain,
+        withPadding,
+        investmentOpportunities
+      }
+    ) }),
+    caption && /* @__PURE__ */ jsx(Caption, { withPadding, children: caption }),
+    /* @__PURE__ */ jsx(Content, { children: resolvedChildren })
+  ] });
+};
+Background.propTypes = {
+  caption: PropTypes.string,
+  children: PropTypes.node,
+  contain: PropTypes.bool,
+  investmentOpportunities: PropTypes.bool,
+  mobileRatio: PropTypes.string,
+  // example: '16:9'
+  src: PropTypes.string.isRequired,
+  withPadding: PropTypes.bool
+};
+var stdin_default = Background;
+export {
+  Background,
+  stdin_default as default
+};

package/dist/components/Background/Background.styles.js

@@ -0,0 +1,119 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["mobileRatio", "investmentOpportunities"].includes(props)
+})`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font-size: 0;
+
+  ${(props) => {
+  if (!props.mobileRatio) return "";
+  const ratio = props.mobileRatio?.split(":");
+  const percent = 100 * ratio[1] / ratio[0];
+  return `
+      &:after {
+        z-index: 0;
+        content: '';
+        position: relative;
+        display: inline-block;
+        vertical-align: top;
+        width: 100%;
+        height: 100%;
+        padding-top: ${percent}%;
+        margin-left: -100%;
+      }
+    `;
+}}
+
+  &:after {
+    ${rwd.Medium`
+      display: none;
+    `}
+  }
+
+  ${(props) => props.investmentOpportunities && `
+    padding-top: 33% !important;
+  `}
+`;
+const Wrap = styled.div`
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  & > div {
+    height: 100%;
+  }
+`;
+const Caption = styled.div.withConfig({
+  shouldForwardProp: (props) => props !== "withPadding"
+})`
+  font-size: 11px;
+  position: absolute;
+  bottom: -25px;
+
+  ${(props) => props.withPadding && `
+    bottom: -12px;
+  `}
+`;
+const Img = styled.img.withConfig({
+  shouldForwardProp: (props) => !["contain", "withPadding", "investmentOpportunities"].includes(props)
+})`
+  position: absolute;
+  width: 100%;
+  object-fit: cover;
+  object-position: center center;
+  top: 0;
+  left: 0;
+  height: 100%;
+
+  ${(props) => props.investmentOpportunities && `
+    height: 100%;
+  `}
+  ${(props) => props.withPadding && `
+    padding: 20px;
+  `}
+  ${(props) => props.contain && `
+    object-fit:contain;
+  `}
+`;
+styled.video`
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+`;
+styled.img`
+  /* Make video to at least 100% wide and tall */
+  min-width: 100%;
+  min-height: 100%;
+
+  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
+  width: auto;
+  height: auto;
+
+  /* Center the video */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+const Content = styled.div`
+  z-index: 2;
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  font-size: 10px;
+`;
+export {
+  Caption,
+  Container,
+  Content,
+  Img,
+  Wrap
+};

package/dist/components/BasicTable/BasicTable.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Table, Row, Label, Value, Caption, LabelWarning } from "./BasicTable.styles.js";
+const BasicTable = ({ data, filled, smallPadding }) => /* @__PURE__ */ jsx(Table, { filled, children: data.map((item, itemKey) => /* @__PURE__ */ jsxs(Row, { smallPadding, children: [
+  /* @__PURE__ */ jsx(Label, { children: item.label }),
+  /* @__PURE__ */ jsxs(Value, { children: [
+    item.value,
+    /* @__PURE__ */ jsx(Caption, { children: item.valueDescription })
+  ] }),
+  item.labelwarning ? /* @__PURE__ */ jsx(LabelWarning, { children: item.labelwarning }) : ""
+] }, `${item.label}-${itemKey.toString()}`)) });
+BasicTable.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+    })
+  ).isRequired
+};
+var stdin_default = BasicTable;
+export {
+  BasicTable,
+  stdin_default as default
+};