@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/CapitalRaisedSummary/CaptialRaisedSummary.styles.js

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Wrapper = styled(ComponentWrapper)`
+  background: ${() => theme.cPrimary};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  margin-top: -1px;
+`;
+const Title = styled.div`
+  font-size: 11px;
+  line-height: 20px;
+  letter-spacing: 2px;
+  margin-bottom: 14px;
+  color: ${() => theme.cWhite};
+`;
+const Amount = styled.div`
+  font-size: 34px;
+  line-height: 40px;
+  font-weight: 300;
+  margin-bottom: 20px;
+  letter-spacing: 2px;
+  color: ${() => theme.cWhite};
+  white-space: nowrap;
+
+  ${rwd.Medium`
+    font-size: 28px;
+  `}
+
+  ${rwd.Large`
+    font-size: 34px;
+  `}
+`;
+export {
+  Amount,
+  Title,
+  Wrapper
+};

package/dist/components/Card/Card.styles.js

@@ -0,0 +1,97 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+import { SelectWrapper } from "../Input/Select.styles.js";
+import theme from "../../styles/theme.js";
+const Card = styled.div.withConfig({
+  shouldForwardProp: (props) => !["lessPadding", "lessPaddingHorizontal", "lessPaddingVertical", "chartPadding", "noPadding", "grow"].includes(
+    props
+  )
+})`
+  padding: 28px 22px;
+  background: ${theme.cWhite};
+
+  ${rwd.Medium`
+    padding: 40px 50px;
+
+    ${(props) => props.lessPadding && css`
+        padding: 28px 22px;
+      `}
+
+    ${(props) => props.lessPaddingHorizontal && css`
+        padding: 40px 22px;
+      `}
+
+    ${(props) => props.lessPaddingVertical && css`
+        padding: 28px 50px;
+      `}
+
+    ${(props) => props.chartPadding && css`
+        padding: 20px;
+      `}
+
+    ${(props) => props.noPadding && css`
+        padding: 0;
+      `}
+  `}
+
+  ${(props) => props.chartPadding && css`
+      padding: 10px;
+    `}
+
+  ${(props) => props.noPadding && css`
+      padding: 0;
+    `}
+
+  ${(props) => props.grow && `
+    flex-grow: ${props.grow};
+  `}
+`;
+const CardTitle = styled.div`
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 600;
+`;
+const CardTitleContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const CardRightText = styled.div`
+  margin-left: auto;
+  font-size: 16px;
+`;
+const CardLeftText = styled.div`
+  margin-left: 18px;
+  font-size: 16px;
+`;
+const CardHeader = styled.div.withConfig({
+  shouldForwardProp: (props) => !["paddingRight"].includes(props)
+})`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  ${(props) => props.paddingRight && css`
+      padding-right: ${props.paddingRight};
+    `}
+
+  ${SelectWrapper} {
+    height: 22px;
+    margin-top: -8px;
+  }
+`;
+const CardHeaderRegular = styled.div`
+  font-weight: 400;
+  display: inline-block;
+`;
+export {
+  Card,
+  CardHeader,
+  CardHeaderRegular,
+  CardLeftText,
+  CardRightText,
+  CardTitle,
+  CardTitleContainer
+};

package/dist/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { Collapse } from "react-collapse";
+import { Items, Item, Head, ColorLabel, NameCol, LargeText, SmallText, MarketDataCol, Arrow, Body } from "./ChartLegend.styles.js";
+const ChartLegend = (props) => {
+  const { data } = props;
+  const [activeItems, setActiveItems] = useState(data.map(() => false));
+  const toggleItem = (key) => {
+    let newActiveItems = data.map((item, itemKey) => {
+      return itemKey === key ? !activeItems[itemKey] : activeItems[itemKey];
+    });
+    setActiveItems(newActiveItems);
+  };
+  return /* @__PURE__ */ jsx(Items, { children: data.map((item, itemKey) => /* @__PURE__ */ jsxs(Item, { children: [
+    /* @__PURE__ */ jsxs(Head, { onClick: () => toggleItem(itemKey), children: [
+      /* @__PURE__ */ jsx(ColorLabel, { itemColor: item.color }),
+      /* @__PURE__ */ jsxs(NameCol, { children: [
+        /* @__PURE__ */ jsx(
+          LargeText,
+          {
+            onClick: (e) => {
+              item.onNameClick?.(e, item);
+            },
+            isLink: !!item.onNameClick,
+            children: item.name
+          }
+        ),
+        /* @__PURE__ */ jsx(SmallText, { children: item.subname })
+      ] }),
+      /* @__PURE__ */ jsxs(NameCol, { children: [
+        /* @__PURE__ */ jsx(LargeText, { children: item.value }),
+        /* @__PURE__ */ jsx(SmallText, { children: item.info })
+      ] }),
+      /* @__PURE__ */ jsxs(MarketDataCol, { isPositive: item.isPositive, children: [
+        /* @__PURE__ */ jsx(LargeText, { isPositive: item.isPositive, children: item.marketValue }),
+        /* @__PURE__ */ jsx(SmallText, { children: item.marketInfo })
+      ] }),
+      item.details && /* @__PURE__ */ jsx(Arrow, { isOpened: activeItems[itemKey] })
+    ] }),
+    item.details && /* @__PURE__ */ jsx(Collapse, { isOpened: activeItems[itemKey], children: /* @__PURE__ */ jsx(Body, { children: item.details }) })
+  ] }, item.name)) });
+};
+ChartLegend.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.number.isRequired,
+      name: PropTypes.string,
+      onNameClick: PropTypes.func,
+      color: PropTypes.string,
+      subname: PropTypes.string,
+      info: PropTypes.string,
+      details: PropTypes.any,
+      isPositive: PropTypes.bool,
+      marketValue: PropTypes.string,
+      marketInfo: PropTypes.string
+    })
+  ).isRequired
+};
+export {
+  ChartLegend
+};

package/dist/components/ChartLegend/ChartLegend.styles.js

@@ -0,0 +1,133 @@
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+const Items = styled.div`
+  display: block;
+  margin: -16px 0;
+`;
+const Item = styled.div`
+  padding: 16px 0;
+`;
+const Head = styled.div`
+  cursor: pointer;
+  position: relative;
+  font-size: 0;
+  padding: 0 46px;
+`;
+const Body = styled.div`
+  padding: 18px 0;
+`;
+const ColorLabel = styled.div.withConfig({
+  shouldForwardProp: (props) => props !== "itemColor"
+})`
+  display: block;
+  width: 28px;
+  height: 28px;
+  background-color: ${(props) => props.itemColor};
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const NameCol = styled.div`
+  width: 40%;
+  display: inline-block;
+  vertical-align: top;
+`;
+styled.div`
+  width: 50%;
+  display: inline-block;
+  vertical-align: top;
+`;
+const LargeText = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isPositive", "isLink"].includes(props)
+})`
+  font-weight: 300;
+  font-size: 22px;
+  line-height: 28px;
+
+  ${(props) => props.isPositive && `
+    color: ${theme.cProgressDone};
+  `}
+
+  ${(props) => props.isPositive === false && `
+    color: ${theme.cWarning};
+  `}
+
+    ${(props) => props.isLink && `
+    text-decoration:underline;
+    text-decoration-thickness: from-font;
+  `}
+`;
+const SmallText = styled.div`
+  font-size: 11px;
+  line-height: 12px;
+  margin-top: 4px;
+  font-style: italic;
+`;
+const MarketDataCol = styled.div.withConfig({
+  shouldForwardProp: (props) => props !== "isPositive"
+})`
+  width: 20%;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+
+  ${SmallText} {
+    position: relative;
+    left: -20px;
+  }
+
+  &::before {
+    display: block;
+    position: absolute;
+    content: '';
+    top: 30%;
+    left: -20px;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    ${(props) => props.isPositive && `
+      border-bottom: 7px solid
+        ${theme.cProgressDone};
+    `}
+
+    ${(props) => props.isPositive === false && `
+      border-top: 7px solid
+        ${theme.cWarning};
+    `}
+  }
+`;
+const Arrow = styled.i.withConfig({
+  shouldForwardProp: (props) => props !== "isOpened"
+}).attrs({
+  className: "ion ion-ios-arrow-down"
+})`
+  & {
+    position: absolute;
+    top: 14px;
+    right: 24px;
+    transition: 0.3s transform;
+    transform: rotate(0);
+    text-align: center;
+    font-size: 16px;
+    line-height: 16px;
+    height: 16px;
+    margin-top: -8px;
+
+    ${(props) => props.isOpened && `
+      transform: rotate(180deg);
+    `}
+  }
+`;
+export {
+  Arrow,
+  Body,
+  ColorLabel,
+  Head,
+  Item,
+  Items,
+  LargeText,
+  MarketDataCol,
+  NameCol,
+  SmallText
+};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import { Wrapper, Label, Input } from "./Checkbox.styles.js";
+const CheckBoxCaption = styled.div`
+  padding-top: 12px;
+  letter-spacing: 0.4px;
+  font-size: 11px;
+  font-weight: 400;
+`;
+const Checkbox = ({
+  id,
+  name = "",
+  text = "",
+  label = "",
+  value = "",
+  checked = false,
+  large = false,
+  error = false,
+  touched = false,
+  onChange = () => {
+  },
+  onBlur = () => {
+  },
+  onFocus = () => {
+  },
+  textStyle = {},
+  disabled,
+  onClick = () => {
+  },
+  marginTop,
+  ...props
+}) => /* @__PURE__ */ jsxs(Wrapper, { marginTop, children: [
+  label && /* @__PURE__ */ jsx(Label, { error: error && touched, htmlFor: id, children: label }),
+  /* @__PURE__ */ jsxs(Input, { error, large, disabled, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        id,
+        name: name || id,
+        value,
+        checked,
+        onChange,
+        onBlur,
+        disabled,
+        onFocus,
+        onClick,
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: id, style: textStyle, children: text })
+  ] })
+] });
+const CheckboxPropTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  label: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  large: PropTypes.bool,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onClick: PropTypes.func,
+  textStyle: PropTypes.object,
+  defaultChecked: PropTypes.bool
+};
+Checkbox.propTypes = CheckboxPropTypes;
+var stdin_default = Checkbox;
+export {
+  CheckBoxCaption,
+  Checkbox,
+  CheckboxPropTypes,
+  stdin_default as default
+};

package/dist/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,133 @@
+import styled from "styled-components";
+import { Label as Label$1 } from "../Input/Input.styles.js";
+import theme from "../../styles/theme.js";
+const Wrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["marginTop"].includes(props)
+})`
+  position: relative;
+  display: block;
+  margin-top: ${({ marginTop }) => marginTop && "7px"};
+`;
+const Label = styled(Label$1)`
+  position: relative;
+  top: 0;
+  transform: none;
+  font-size: 10px;
+  margin-bottom: 5px;
+`;
+const Input = styled.div.withConfig({
+  shouldForwardProp: (props) => !["error", "large", "disabled"].includes(props)
+})`
+  position: relative;
+
+  & > input {
+    z-index: -1;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    display: block;
+    width: 1px;
+    height: 0;
+    opacity: 0;
+    border: 0;
+
+    & + label {
+      position: relative;
+      display: inline-block;
+      max-width: 100%;
+      padding-left: 28px;
+      font-family: 'Open Sans';
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 300;
+      letter-spacing: 0.4px;
+      cursor: pointer;
+
+      p {
+        margin: 0;
+      }
+
+      ${(props) => props.error && `color: ${theme.cWarning}`};
+
+      p {
+        font-size: 12px;
+      }
+
+      &:before,
+      &:after {
+        display: block;
+        position: absolute;
+      }
+
+      &:before {
+        content: '';
+        top: 0;
+        left: 0;
+        width: 16px;
+        height: 16px;
+        border-radius: 3px;
+        border: 1px solid #9b9b9b;
+        box-shadow: none;
+        transition: border-color 0.2s;
+
+        ${(props) => props.large && `
+          width: 20px;
+          height: 20px;
+          border-radius: 4px;
+        `}
+        ${(props) => props.disabled && `
+            background-color: #9b9b9b30;
+
+        `}
+      }
+
+      &:after {
+        content: '\\f3ff';
+        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;
+        top: 3px;
+        left: 3px;
+        width: 10px;
+        height: 10px;
+        font-size: 22px;
+        line-height: 10px;
+        text-align: center;
+        color: transparent;
+
+        ${(props) => props.large && `
+          top: 0;
+          left: 0;
+          width: 20px;
+          height: 20px;
+          font-size: 34px;
+          line-height: 20px;
+        `};
+      }
+    }
+
+    &:focus + label,
+    &:hover + label {
+      &:before {
+        border-color: ${(props) => props.disabled ? "none" : theme.cPrimary};
+      }
+    }
+
+    &:checked + label {
+      &:after {
+        color: ${() => theme.cPrimary};
+      }
+    }
+  }
+`;
+export {
+  Input,
+  Label,
+  Wrapper
+};

package/dist/components/Checklist/ChecklistCard.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { iconsMap } from "../Icon/Icon.style.js";
+import { CardContainer, IconBlock, IconCopy, CardTitle, CardDescription } from "./ChecklistCard.styles.js";
+import { Icon } from "../ToDoList/ToDoListTask.styles.js";
+import { colors } from "../../styles/colors.js";
+import SvgWarningFilled from "../../static/images/warning-filled.svg.js";
+const ICON_MAP = {
+  done: {
+    icon: iconsMap.check,
+    color: colors.freshGreen
+  },
+  missing: {
+    icon: /* @__PURE__ */ jsx(SvgWarningFilled, {}),
+    color: colors.warningYellow
+  },
+  in_progress: {
+    icon: iconsMap.inProgress,
+    color: colors.lightGrey
+  }
+};
+const ChecklistCard = ({
+  iconState = "missing",
+  title,
+  description,
+  link,
+  onClick,
+  iconCopy,
+  disabled = false,
+  isClickable = true,
+  ...rest
+}) => {
+  const { icon, color } = ICON_MAP[iconState] || ICON_MAP["missing"];
+  const iconElement = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { icon, style: { color, display: "block", fontSize: 16 } }) : /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", width: 20, height: 20, color }, children: icon });
+  const content = /* @__PURE__ */ jsxs(
+    CardContainer,
+    {
+      "aria-disabled": disabled,
+      isClickable,
+      tabIndex: disabled ? -1 : 0,
+      ...onClick ? { role: "button", onClick } : {},
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs(IconBlock, { children: [
+          iconElement,
+          /* @__PURE__ */ jsx(IconCopy, { children: iconCopy })
+        ] }),
+        /* @__PURE__ */ jsx(CardTitle, { children: title }),
+        /* @__PURE__ */ jsx(CardDescription, { children: description })
+      ]
+    }
+  );
+  if (link && !onClick && !disabled) {
+    return /* @__PURE__ */ jsx("a", { href: link, tabIndex: 0, "aria-disabled": disabled, style: { textDecoration: "none", color: "inherit" }, children: content });
+  }
+  return content;
+};
+ChecklistCard.propTypes = {
+  iconState: PropTypes.oneOf(["done", "missing", "in_progress"]),
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  link: PropTypes.string,
+  onClick: PropTypes.func,
+  tooltip: PropTypes.string,
+  iconCopy: PropTypes.string.isRequired,
+  disabled: PropTypes.bool
+};
+export {
+  ChecklistCard
+};

package/dist/components/Checklist/ChecklistCard.styles.js

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+const CardContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isClickable"].includes(props)
+})`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 1px solid #eaeaea;
+  border-radius: 1px;
+  background: #fff;
+  padding: 32px 32px 32px 32px;
+  min-width: 320px;
+  min-height: 220px;
+  height: 100%;
+  box-sizing: border-box;
+  transition: box-shadow 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
+  }
+  ${({ isClickable }) => !isClickable && `
+      cursor: initial;
+    `}
+
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+const IconBlock = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 32px;
+`;
+const IconCopy = styled.span`
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 2px;
+  margin-left: 8px;
+  line-height: 16px;
+  text-transform: uppercase;
+`;
+const CardTitle = styled.div`
+  margin-bottom: 32px;
+  text-transform: uppercase;
+  color: #202020;
+  font-weight: 800;
+  word-wrap: break-word;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+
+  ${rwd.Medium`
+    font-size: 22px;
+    letter-spacing: 0.8px;
+    line-height: 28px;
+  `}
+`;
+const CardDescription = styled.div`
+  color: #202020;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  word-wrap: break-word;
+
+  ${rwd.Medium`
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0.8px;
+  `}
+`;
+export {
+  CardContainer,
+  CardDescription,
+  CardTitle,
+  IconBlock,
+  IconCopy
+};