@stokr/components-library 0.5.4 → 0.5.5

package/dist/ToDoList/ToDoList.stories.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import ToDoList from './ToDoList';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/ToDoList/ToDoList',
+  component: ToDoList,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: 'To do List'
+    },
+    subtitle: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    mandatoryTasks: {
+      type: 'array',
+      defaultValue: [{
+        title: ''
+      }, {
+        state: ''
+      }, {
+        link: ''
+      }, {
+        tooltip: ''
+      }]
+    },
+    optionalTasks: {
+      type: 'array',
+      defaultValue: [{
+        title: ''
+      }, {
+        state: ''
+      }, {
+        link: ''
+      }, {
+        tooltip: ''
+      }]
+    },
+    successText: {
+      type: 'string',
+      defaultValue: ''
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ToDoList, args));
+export const ToDoListMixedOverview = Template.bind({});
+ToDoListMixedOverview.args = {
+  subtitle: 'subtitle',
+  mandatoryTasks: [{
+    title: 'Title of an Mandatory Task - In Progress',
+    state: 'in_progress',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }, {
+    title: 'Title of an Mandatory Task - Rejected',
+    state: 'rejected',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }, {
+    title: 'Title of an Mandatory Task - Approved',
+    state: 'approved',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }, {
+    title: 'Title of an Mandatory Task - Skipped',
+    state: 'skipped',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }, {
+    title: 'Title of an Mandatory Task - Reapply',
+    state: 'reapply',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }, {
+    title: 'Title of an Mandatory Task - Not Available',
+    state: 'not_available',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }],
+  optionalTasks: [{
+    title: 'Title of an Optional Task - Draft',
+    state: 'draft',
+    link: 'www.optionallink.com',
+    tooltip: 'a tooltip for Optional Task'
+  }]
+};
+export const ToDoListApproved = Template.bind({});
+ToDoListApproved.args = {
+  subtitle: 'subtitle',
+  mandatoryTasks: [{
+    title: 'Title of an Mandatory Task - Approved',
+    state: 'approved',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }]
+};
+export const ToDoListRejected = Template.bind({});
+ToDoListRejected.args = {
+  subtitle: 'subtitle',
+  mandatoryTasks: [{
+    title: 'Title of an Mandatory Task - Rejected',
+    state: 'rejected',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }]
+};
+export const ToDoListSkipped2 = Template.bind({});
+ToDoListSkipped2.args = {
+  subtitle: 'subtitle',
+  mandatoryTasks: [{
+    title: 'Title of an Mandatory Task - Skipped',
+    state: 'skipped',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }, {
+    title: 'Title of an Mandatory Task - Skipped 2',
+    state: 'skipped',
+    link: 'www.madatorylink.com',
+    tooltip: 'a tooltip for Mandatory Task'
+  }]
+};

package/dist/ToDoList/ToDoList.styles.js

@@ -0,0 +1,115 @@
+import styled, { css } from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import colors from 'styles/colors';
+export const Container = styled.div`
+  display: inline-block;
+`;
+export const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  ${({
+  marginBottom
+}) => marginBottom && css`
+      margin-bottom: ${marginBottom};
+    `}
+`;
+export const Title = styled.div`
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+`;
+export const Subtitle = styled.div`
+  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};
+    `}
+`;
+export 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;
+`;
+export const Section = styled.div`
+  padding: 28px 0;
+`;
+export const SectionTitle = 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.grey};
+`;
+export const Button = styled.div`
+  ${rwd.Medium`
+    margin-top: auto;
+  `}
+`;
+export const AllDoneContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  ${rwd.Medium`
+    flex-direction: row;
+  `}
+`;
+export const AllDoneIconContainer = 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;
+  `}
+`;
+export const AllDoneIcon = styled.i.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};`}
+`;

package/dist/ToDoList/ToDoListTask.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from '@reach/router';
+import { Tooltip } from 'react-tippy';
+import { Container, Content, Title, State, Icon, IconContainer, TitleContainer, Notifications } from './ToDoListTask.styles';
+import { TooltipIcon } from 'components/Icon/Icon.style';
+import { AlgoAddressFlowPage } from 'components/RegisterAlgorand';
+import setRedirectCookie from 'utils/set-redirect-cookie';
+import { AuthProvider } from 'components/context/AuthContext';
+import { ToDoModal } from './ToDoList';
+import { RegisterTaxIdFlow } from 'components/taxId';
+export const ToDoTask = ({
+  title,
+  message,
+  state,
+  icon,
+  link,
+  tooltip,
+  notificationCount,
+  disabled,
+  openModal,
+  redirectCookie = false
+}) => {
+  const [modalOpen, setmodalOpen] = React.useState(false);
+  const handleOpenModal = () => {
+    if (openModal) {
+      setmodalOpen(true);
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, link || openModal ? /*#__PURE__*/React.createElement("div", {
+    onClick: () => {
+      if (redirectCookie) {
+        const pathToRedirect = window.location.pathname === '/' ? 'checklist' : '';
+        setRedirectCookie(pathToRedirect);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: link
+  }, /*#__PURE__*/React.createElement(Container, {
+    disabled: disabled,
+    link: openModal,
+    onClick: handleOpenModal
+  }, /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    state: state
+  })), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Title, {
+    link: link || openModal,
+    state: state
+  }, title), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    title: tooltip,
+    theme: "light",
+    arrow: true,
+    duration: 200
+  }, /*#__PURE__*/React.createElement(TooltipIcon, {
+    onClick: e => e.preventDefault()
+  }))), message ? /*#__PURE__*/React.createElement(State, null, message) : '')))) : /*#__PURE__*/React.createElement(Container, {
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    state: state
+  })), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(TitleContainer, null, /*#__PURE__*/React.createElement(Title, {
+    state: state
+  }, title), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    title: tooltip,
+    theme: "light",
+    arrow: true,
+    duration: 200
+  }, /*#__PURE__*/React.createElement(TooltipIcon, {
+    onClick: e => e.preventDefault()
+  }))), message ? /*#__PURE__*/React.createElement(State, null, message) : '')), modalOpen && /*#__PURE__*/React.createElement(AuthProvider, null, openModal === ToDoModal.ALGO && /*#__PURE__*/React.createElement(AlgoAddressFlowPage, {
+    showFlow: modalOpen,
+    setShowFlow: setmodalOpen
+    // setShowPending={setShowPending}
+    ,
+    withSuccessPage: true
+  }), openModal === ToDoModal.TAX_ID && /*#__PURE__*/React.createElement(RegisterTaxIdFlow, {
+    showFlow: modalOpen,
+    setShowFlow: setmodalOpen
+  })));
+};
+ToDoTask.propTypes = {
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  state: PropTypes.string.isRequired,
+  icon: PropTypes.string.isRequired,
+  link: PropTypes.any,
+  tooltip: PropTypes.string,
+  notificationCount: PropTypes.string
+};
+ToDoTask.defaultProps = {
+  tooltip: '',
+  link: undefined
+};
+export default ToDoTask;

package/dist/ToDoList/ToDoListTask.stories.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import ToDoListTask from './ToDoListTask';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/ToDoList/ToDoListTask',
+  component: ToDoListTask,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    message: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    state: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    icon: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    link: {
+      type: 'any',
+      defaultValue: undefined
+    },
+    tooltip: {
+      type: 'string',
+      defaultValue: ''
+    },
+    notificationCount: {
+      type: 'string',
+      defaultValue: ''
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ToDoListTask, args));
+export const ToDoListTaskReal = Template.bind({});
+ToDoListTaskReal.args = {
+  title: 'Risk Questionaire',
+  message: 'You have read and understood the risks',
+  link: 'www.link.com',
+  state: 'approved',
+  tooltip: 'a tool tip for you',
+  notificationCount: '5'
+};
+export const ToDoListTaskOverview = Template.bind({});
+ToDoListTaskOverview.args = {
+  title: 'Task Title',
+  message: 'Task Message',
+  icon: 'Icon',
+  link: 'www.link.com',
+  tooltip: 'a tool-tip for you',
+  notificationCount: '5'
+};

package/dist/ToDoList/ToDoListTask.styles.js

@@ -0,0 +1,104 @@
+import styled from 'styled-components/macro';
+import BaseIcon from 'components/Icon/Icon.style';
+import { ToDoTaskState } from './ToDoList';
+import colors from 'styles/colors';
+export const Container = styled.div`
+  display: flex;
+  height: 56px;
+  align-items: center;
+
+  ${props => props.disabled && `
+    opacity:0.5;
+    cursor: context-menu;
+  `}
+  ${props => props.link && `
+    cursor:pointer;
+  `}
+`;
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+export const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+export const Title = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  text-align: left;
+
+  ${props => (props.state === ToDoTaskState.IN_PROGRESS || props.state === ToDoTaskState.APPROVED || props.state === ToDoTaskState.NOT_AVAILABLE) && `
+    opacity: 0.3;
+  `}
+
+  ${props => props.link && `
+    opacity: 1;
+  `}
+`;
+export const Notifications = styled.div`
+  position: relative;
+  right: -5px;
+  width: 16px;
+  height: 16px;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+  background-color: #ee220d;
+  border-radius: 50%;
+  padding-left: 0;
+`;
+export const State = styled.p`
+  margin-top: 3px;
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  font-weight: 300;
+  text-align: left;
+  opacity: 0.6;
+`;
+export const IconContainer = styled.div`
+  flex-shrink: 0;
+  width: 23px;
+  text-align: center;
+  /* margin: auto 0 auto auto; */
+
+  margin-right: 10px;
+  position: relative;
+  top: -10px;
+`;
+export const TooltipBox = styled.div`
+  max-width: 240px;
+  text-align: left;
+`;
+export const Icon = styled(BaseIcon)`
+  font-size: 20px;
+  width: 18px;
+  text-align: center;
+
+  ${props => props.state === ToDoTaskState.APPROVED && `
+    font-size: 13px;
+    color: ${colors.freshGreen};
+  `}
+
+  ${props => props.state === ToDoTaskState.REJECTED && `
+    color: ${colors.orangishRed};
+  `}
+
+  ${props => props.state === ToDoTaskState.IN_PROGRESS && `
+    opacity: 0.3;
+  `}
+
+  ${props => props.state === ToDoTaskState.SKIPPED && `
+    font-size: 13px;
+  `}
+
+  ${props => props.state === ToDoTaskState.NOT_AVAILABLE && `
+    font-size: 13px;
+    opacity: 0.3;
+  `}
+`;

package/dist/TransactionDetails/TransactionDetails.js

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import BasicTable from 'components/BasicTable/BasicTable';
+import { Container, Toggle, DetailsCollapse } from './TransactionDetails.styles';
+export const TransactionDetails = props => {
+  const {
+    data
+  } = props;
+  const [showDetails, setShowDetails] = useState(true);
+  const toggleDetails = () => {
+    setShowDetails(!showDetails);
+  };
+  return /*#__PURE__*/React.createElement(Container, null, data.length > 0 ? /*#__PURE__*/React.createElement(Toggle, {
+    onClick: toggleDetails
+  }, showDetails ? 'hide details' : 'view details') : /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(DetailsCollapse, {
+    isOpened: showDetails
+  }, /*#__PURE__*/React.createElement(BasicTable, {
+    data: data
+  })));
+};
+TransactionDetails.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string.isRequired
+  })).isRequired
+};
+export default TransactionDetails;

package/dist/TransactionDetails/TransactionDetails.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TransactionDetails } from './TransactionDetails';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/TransactionDetails',
+  component: TransactionDetails,
+  argTypes: {
+    data: [{
+      label: {
+        type: 'string'
+      }
+    }, {
+      value: {
+        type: 'string',
+        required: true
+      }
+    }],
+    required: true
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(TransactionDetails, args));
+export const TransactionDetails1 = Template.bind({});
+TransactionDetails1.args = {
+  data: [{
+    label: 'This is a Label',
+    value: 'This is a value'
+  }]
+};
+export const TransactionDetails4 = Template.bind({});
+TransactionDetails4.args = {
+  data: [{
+    label: 'This is a Label',
+    value: 'This is a value'
+  }, {
+    label: 'This is a Label too',
+    value: 'This is a value too'
+  }, {
+    label: 'This is Label three',
+    value: 'This is value three'
+  }, {
+    label: 'This is Label four',
+    value: 'This is value four'
+  }]
+};
+
+//doublecheck:
+// state?

package/dist/TransactionDetails/TransactionDetails.styles.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components/macro';
+import { Collapse } from 'react-collapse';
+import theme from 'styles/theme';
+export const Container = styled.div`
+  display: block;
+  position: relative;
+  text-align: center;
+  padding-top: 8px;
+`;
+export const Toggle = styled.button`
+  display: inline-block;
+  font-size: 11px;
+  line-height: 16px;
+  color: ${props => theme.cGrey2};
+  transition: color 0.2s;
+  outline: 0;
+
+  &:hover {
+    color: ${props => theme.cPrimary};
+  }
+`;
+export const DetailsCollapse = styled(Collapse)`
+  opacity: 0;
+  transition: opacity 0.2s;
+  margin-top: 12px;
+
+  ${props => props.isOpened && `
+    opacity: 1;
+    border-bottom: 1px solid ${theme.cLightGrey};
+  `}
+`;

package/dist/TransactionInfo/TransactionInfo.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Account, TransferIcon, Value, Name } from './TransactionInfo.styles';
+export const TransactionInfo = ({
+  value1,
+  unit1,
+  name1,
+  owner1,
+  value2,
+  unit2,
+  name2,
+  owner2,
+  green,
+  red
+}) => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Account, null, /*#__PURE__*/React.createElement(Name, {
+  green: green,
+  red: red
+}, `${name1} ${owner1}`), /*#__PURE__*/React.createElement(Value, {
+  green: green,
+  red: red
+}, `${unit1} ${value1}`)), /*#__PURE__*/React.createElement(TransferIcon, null), /*#__PURE__*/React.createElement(Account, null, /*#__PURE__*/React.createElement(Name, {
+  green: green,
+  red: red
+}, `${name2} ${owner2}`), /*#__PURE__*/React.createElement(Value, {
+  green: green,
+  red: red
+}, `${unit2} ${value2}`)));
+TransactionInfo.propTypes = {
+  value1: PropTypes.string,
+  unit1: PropTypes.string,
+  name1: PropTypes.string,
+  owner1: PropTypes.string,
+  value2: PropTypes.string,
+  unit2: PropTypes.string,
+  name2: PropTypes.string,
+  owner2: PropTypes.string
+};
+TransactionInfo.defaultProps = {
+  value1: '',
+  unit1: '',
+  name1: '',
+  owner1: '',
+  value2: '',
+  unit2: '',
+  name2: '',
+  owner2: ''
+};
+export default TransactionInfo;