@stokr/components-library 0.5.4 → 0.5.6

package/dist/CryptoAddressWrapper/CryptoAddressWrapper.styles.js

@@ -0,0 +1,98 @@
+import styled from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import loader from 'static/images/address-refreshing.gif';
+import theme from 'styles/theme';
+export const Container = styled.div`
+  position: relative;
+  display: block;
+`;
+export const Address = styled.div`
+  position: relative;
+  visibility: visible;
+  opacity: 1;
+
+  ${props => props.isHidden && `
+    visibility: hidden;
+    opacity: 0;
+  `}
+`;
+export const InfoBoxWrapper = styled.div`
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  font-size: 0;
+
+  &:after {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    height: 100%;
+  }
+
+  // concerning merge: relative is added from SUF
+  ${({
+  relative
+}) => relative && `
+    position: relative;
+  `}
+`;
+export const InfoBox = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+
+  ${props => props.refresh && `
+    color: ${theme.cPrimary};
+  `};
+
+  ${props => props.failed && `
+    color: ${theme.cWarning};
+  `};
+`;
+export const Loader = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  width: 40px;
+  height: 40px;
+  margin: 0 auto;
+  margin-right: -40px;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: cover;
+  background-image: url(${loader});
+`;
+export const FailedIcon = styled.i.attrs({
+  className: 'ion ion-ios-close-circle'
+})`
+  display: inline-block !important;
+  vertical-align: middle;
+  width: 40px;
+  height: 40px;
+  margin-right: -40px;
+
+  &:before {
+    display: block;
+    font-size: 48px;
+    line-height: 40px;
+    text-align: center;
+  }
+`;
+export const Text = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 1.5em;
+  letter-spacing: 0.6px;
+  padding-left: 60px;
+  max-width: 100%;
+
+  ${rwd.XLarge`
+    font-size: 20px;
+  `}
+`;

package/dist/DonutChart/DonutChart.js

@@ -0,0 +1,137 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3';
+import { Chart, Content } from './DonutChart.styles';
+export class DonutChart extends PureComponent {
+  state = {
+    data: [],
+    key: 0
+  };
+  componentDidMount() {
+    const {
+      data
+    } = this.props;
+    this.setState({
+      data
+    }, () => {
+      this.createChart();
+      window.addEventListener('scroll', this.onScroll);
+      this.onScroll();
+    });
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      key
+    } = this.state;
+    const {
+      data: newData
+    } = this.props;
+    const {
+      data: prevData
+    } = prevProps;
+    if (newData && prevData && JSON.stringify(newData) !== JSON.stringify(prevData)) {
+      this.setState({
+        data: newData
+      }, () => {
+        this.drawn = false;
+        window.removeEventListener('scroll', this.onScroll);
+        this.setState({
+          key: key + 1
+        }, () => {
+          this.createChart();
+          window.addEventListener('scroll', this.onScroll);
+          this.onScroll();
+        });
+      });
+    }
+  }
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.onScroll);
+  }
+  createChart = () => {
+    if (!this.chartEl) return;
+    const {
+      data
+    } = this.state;
+    const width = 320;
+    const height = 320;
+    const pad = 10;
+    const thickness = 14;
+    const outerRadius = width / 2;
+    const innerRadius = outerRadius - thickness;
+    const padAngle = pad / (outerRadius - thickness / 2);
+    const customColors = data.map(item => item.color);
+    const color = customColors[0] ? d3.scaleOrdinal(customColors) : d3.scaleOrdinal(d3.schemeCategory10);
+    const svg = d3.select(this.chartEl).append('svg').attr('viewBox', `0 0 ${width} ${height}`);
+    const chart = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);
+    const pie = d3.pie().value(d => d.value).sort(null).padAngle(padAngle);
+    const arc = d3.arc().outerRadius(outerRadius).innerRadius(innerRadius);
+    function arcTween(a) {
+      const interp = d3.interpolate(this._current, a);
+      this._current = interp(1);
+      return time => arc(interp(time));
+    }
+    function setD(d) {
+      this._current = d;
+    }
+    this.drawDate = dataSet => {
+      // Join new data
+      const path = chart.selectAll('path').data(pie(dataSet));
+
+      // Update existing arcs
+      path.transition().ease(d3.easeQuadOut).duration(1000).attrTween('d', arcTween);
+
+      // Enter new arcs
+      path.enter().append('path').attr('fill', (d, i) => color(i)).attr('d', arc).each(setD);
+    };
+
+    // set init data
+    this.drawDate(data.map(datum => ({
+      ...datum,
+      value: 0
+    })));
+  };
+  drawChart = () => {
+    const {
+      data
+    } = this.props;
+    this.drawDate(data);
+    this.drawn = true;
+  };
+  onScroll = e => {
+    if (this.drawn) return;
+    if (this.chartEl.getBoundingClientRect().top < window.innerHeight) {
+      this.drawChart();
+    }
+  };
+  render() {
+    const {
+      children,
+      center
+    } = this.props;
+    const {
+      key
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Chart, {
+      ref: el => {
+        this.chartEl = el;
+      },
+      center: center,
+      key: key
+    }, /*#__PURE__*/React.createElement(Content, null, children));
+  }
+}
+DonutChart.propTypes = {
+  children: PropTypes.node,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.number.isRequired,
+    name: PropTypes.string,
+    color: PropTypes.string
+  })).isRequired,
+  center: PropTypes.bool
+};
+DonutChart.defaultProps = {
+  children: null,
+  center: false
+};
+export default DonutChart;

package/dist/DonutChart/DonutChart.stories.js

@@ -0,0 +1,39 @@
+// import React from 'react'
+// import DonutChart from './DonutChart'
+// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
+
+// export default {
+//   title: 'Components Library/DonutChart',
+//   component: DonutChart,
+//   argTypes: {
+//     children: { type: 'node', defaultValue: null },
+//     center: { type: 'boolean', defaultValue: false },
+//     data: {
+//       type: 'array',
+//       defaultValue: [{ value: '' }, { name: '' }, { color: '' }],
+//       required: true,
+//     },
+//   },
+// }
+
+// const Template = args => (
+//   <ComponentWrapper>
+//     <DonutChart {...args} />
+//   </ComponentWrapper>
+// )
+
+// export const DonutChartDefault = Template.bind({})
+// DonutChartDefault.args = {
+//   children: null,
+//   data: [
+//     {
+//       value: 'A Value',
+//       name: 'A Name',
+//       color: 'blue',
+//     },
+//   ],
+//   center: true,
+// }
+
+// doublecheck
+// cannot resolve d3

package/dist/DonutChart/DonutChart.styles.js

@@ -0,0 +1,101 @@
+import styled from 'styled-components/macro';
+export const Chart = styled.div`
+  position: relative;
+  display: block;
+  max-width: 320px;
+
+  & > svg {
+    width: 100%;
+    height: auto;
+  }
+
+  ${props => props.center && `
+    margin: 0 auto;
+  `}
+`;
+const thickness = '14px';
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: ${thickness};
+  left: ${thickness};
+  right: ${thickness};
+  bottom: ${thickness};
+  text-align: center;
+`;
+export const DonutChartLabel = styled.p`
+  font-family: 'Open Sans';
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  padding: 4px 0;
+  margin: 0;
+
+  ${props => props.strong && `
+    font-weight: bold;
+  `}
+`;
+export const DonutChartValue = styled.h3`
+  font-family: 'Open Sans';
+  font-weight: 300;
+  font-size: ${({
+  fontSize
+}) => fontSize ? `${fontSize}px` : '55px'};
+  line-height: 58px;
+  letter-spacing: 2.4px;
+  margin: 0;
+  padding: 7px 0;
+  margin-bottom: 7px;
+`;
+export const DonutChartInfo = styled.p`
+  font-family: 'Open Sans';
+  font-weight: 300;
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+  margin: 0;
+`;
+export const DonutChartTrend = styled.span`
+  display: inline-block;
+  margin-left: 8px;
+
+  &:before {
+    content: '\\f1fc';
+    font-family: 'Ionicons';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    text-rendering: auto;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 12px;
+    line-height: 12px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-top: -1px;
+    width: 12px;
+    height: 12px;
+    margin-right: 8px;
+  }
+
+  ${props => props.inc && `
+    color: ${props.theme.cProgressDone};
+
+    &:before {
+      content: '\\f3d8';
+    }
+  `}
+
+  ${props => props.dec && `
+    color: ${props.theme.cWarning};
+
+    &:before {
+      content: '\\f3d0';
+    }
+  `}
+`;

package/dist/DoubleButton/DoubleButton.styles.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import Button from 'components/Button/Button.styles';
+export const DoubleButtons = styled.div`
+  margin: -12px;
+
+  ${Button} {
+    width: 100%;
+    margin: 12px;
+  }
+
+  ${rwd.Medium`
+    display: flex;
+       flex-direction: ${({
+  column
+}) => column ? 'column' : 'row'};
+
+    
+    ${Button} {
+      width: auto;
+      flex: 1;
+    }
+  `}
+`;
+export default DoubleButtons;

package/dist/ErrorMessage/ErrorMessage.styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components/macro';
+export const ErrorMessage = styled.p`
+  color: #ee220d;
+  font-size: 12px;
+  margin-top: 20px;
+`;
+export default ErrorMessage;
+
+// unused component

package/dist/FAQ/FAQ.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import * as scrollToElement from 'scroll-to-element';
+import Text from 'components/Text/Text.styles';
+import { FaqItems, FaqItem, FaqTitle, FaqContent, FaqText, FaqDropdownIcon } from './FAQ.styles';
+export const FAQ = props => {
+  const {
+    items,
+    noScroll
+  } = props;
+  const [activeIndex, setActiveIndex] = useState(null);
+  const onTitleClick = (e, index) => {
+    e.persist();
+    const newActiveIndex = activeIndex === index ? null : index;
+    setActiveIndex(newActiveIndex);
+    if (!noScroll && newActiveIndex !== null) {
+      scrollToElement(e.target.parentElement, {
+        duration: 300,
+        offset: 20
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement(FaqItems, null, items.map((item, index) => /*#__PURE__*/React.createElement(FaqItem, {
+    key: item.title
+  }, /*#__PURE__*/React.createElement(FaqTitle, {
+    isActive: activeIndex === index,
+    onClick: e => onTitleClick(e, index)
+  }, item.title, /*#__PURE__*/React.createElement(FaqDropdownIcon, null)), /*#__PURE__*/React.createElement(FaqContent, {
+    isOpened: activeIndex === index
+  }, typeof item.content === 'string' ? /*#__PURE__*/React.createElement(FaqText, null, item.content) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("ul", null, item.content.map(answer => /*#__PURE__*/React.createElement("li", {
+    key: answer
+  }, answer)))))))));
+};
+FAQ.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    content: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired
+  })).isRequired
+};
+export default FAQ;

package/dist/FAQ/FAQ.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FAQ } from './FAQ';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/FAQ',
+  component: FAQ,
+  argTypes: {
+    // item: { type: 'string', defaultValue: 'FAQ Item' },
+    items: {
+      type: 'array of shapes',
+      required: true,
+      defaultValue: []
+      // title: { type: 'string', required: true, defaultValue: 'Default Title' },
+      // content: {
+      //   type: 'string',
+      //   required: true,
+      //   defaultValue: 'Default Content',
+      // },
+    },
+
+    onTitleClick: {
+      action: 'titleClick',
+      type: 'function'
+    },
+    scrollToElement: {
+      action: 'scroll',
+      type: 'function'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(FAQ, args));
+export const FAQExample = Template.bind({});
+FAQExample.args = {
+  items: [{
+    title: 'What kind of Ventures can be found on STOKR?',
+    content: 'You can find startups and small to medium sized companies led by motivated and qualified founders, committed to making a positive impact. Ventures are selected based on their business model and have various risk levels.'
+  }, {
+    title: 'What can I invest with?',
+    content: "Investors can invest via Bitcoin (BTC), Liquid Bitcoin (L-BTC), Ether (ETH) and stable coins such as Gemini Dollar (GUSD) and USD Tether (USDT). If you're not into cryptocurrencies, you can simply do a SEPA transfer and invest with Euro."
+  }, {
+    title: 'List that for me (only SUF)',
+    content: ['Bitcoin (BTC)', 'Liquid Bitcoin (L-BTC)', 'Ether (ETH)', 'stable coins such as Gemini Dollar (GUSD) and USD Tether (USDT)', "If you're not into cryptocurrencies, you can simply do a SEPA transfer and invest with Euro."]
+  }]
+};
+
+// simple:
+// export const FAQExample = () => (
+//   <ComponentWrapper>
+//     <FAQ
+//       items={[
+//         { title: 'example title', content: 'some content' },
+//         { title: 'example title 2', content: [1, 2, 3, 4, 5] },
+//       ]}
+//     />
+//   </ComponentWrapper>
+// )
+
+//doublecheck:
+
+// state (activeIndex), mapping, shape,  scroll, activeIndex
+// actions not firing, maybe cause not props
+// map over items (item,index)?
+// cannot fill in own text (control) as title and content are part of items shape

package/dist/FAQ/FAQ.styles.js

@@ -0,0 +1,69 @@
+import styled from 'styled-components/macro';
+import { Collapse } from 'react-collapse';
+import theme from 'styles/theme';
+export const FaqItems = styled.div`
+  position: relative;
+`;
+export const FaqItem = styled.div`
+  & + & {
+    margin-top: 30px;
+  }
+`;
+export const FaqTitle = styled.button`
+  display: block;
+  width: 100%;
+  position: relative;
+  font-family: 'Open Sans';
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.4px;
+  color: ${props => theme.cBlack};
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: none;
+  padding-right: 30px;
+  text-align: left;
+  transition: color 0.2s;
+
+  &:hover {
+    color: inherit;
+  }
+
+  ${props => props.isActive && `
+    ${FaqDropdownIcon} {
+      transform: rotate(180deg);
+    }
+  `}
+`;
+export const FaqDropdownIcon = styled.i.attrs({
+  className: 'ion ion-ios-arrow-down'
+})`
+  width: 14px;
+  height: 20px;
+  font-size: 20px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -10px;
+  transform: rotate(0);
+  transition: 0.3s transform;
+`;
+export const FaqContent = styled(Collapse)`
+  opacity: 0;
+  transition: opacity 0.2s;
+
+  ${props => props.isOpened && `
+    opacity: 1;
+  `}
+`;
+export const FaqText = styled.div`
+  padding: 0;
+  padding-top: 30px;
+  padding-bottom: 10px;
+  font-weight: 300;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.4px;
+`;

package/dist/Footer/Footer.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Wrapper } from 'components/Grid/Grid.styles';
+import SicosLogo from './sicos-logo.svg';
+import { StyledFooter, FooterInner, PartnerWrap, PoweredWrap, Copyright, Partner, Powered } from './Footer.styles';
+import LemonwayLogo from './lemonway.png';
+export const Footer = ({
+  color,
+  lemonwayLogo = LemonwayLogo,
+  hasSidebar = false,
+  isSidebarExpanded
+}) => /*#__PURE__*/React.createElement(StyledFooter, {
+  color: color,
+  isSidebarExpanded: isSidebarExpanded,
+  hasSidebar: hasSidebar
+}, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(FooterInner, {
+  hasSidebar: hasSidebar
+}, /*#__PURE__*/React.createElement(PartnerWrap, null, /*#__PURE__*/React.createElement(Partner, null, "STOKR is a virtual asset service provider (VASP), ", /*#__PURE__*/React.createElement("br", null), ' ', /*#__PURE__*/React.createElement("a", {
+  href: "https://searchentities.apps.cssf.lu/search-entities/search?&st=advanced&entType=VAP&entDate=2020-08-01",
+  title: "registered",
+  target: "_blank",
+  rel: "noopener noreferrer",
+  style: {
+    textDecoration: 'underline',
+    color: 'white'
+  }
+}, "registered"), ' ', "with the Luxembourg regulator CSSF.")), /*#__PURE__*/React.createElement(PoweredWrap, null, /*#__PURE__*/React.createElement(Powered, null, /*#__PURE__*/React.createElement("div", null, "Partner of", ' ', /*#__PURE__*/React.createElement("a", {
+  href: "http://www.lemonway.com/",
+  title: "Lemon Way - Payment Institution for the new economy",
+  target: "_blank",
+  rel: "noopener noreferrer",
+  style: {
+    color: 'white',
+    textDecoration: 'none'
+  }
+}, /*#__PURE__*/React.createElement("img", {
+  style: {
+    verticalAlign: 'middle'
+  },
+  src: lemonwayLogo,
+  height: 20,
+  width: 20,
+  alt: "Lemonway logo"
+}), ' ', "LEMONWAY"), ". A European payment institution ", /*#__PURE__*/React.createElement("br", null), " accredited in France by the ACPR (CIB 16568).")), /*#__PURE__*/React.createElement(Copyright, null, "Copyright ", new Date().getFullYear(), " STOKR. All rights reserved.")))));
+Footer.propTypes = {
+  color: PropTypes.oneOf(['primary', 'red']),
+  lemonwayLogo: PropTypes.string,
+  hasSidebar: PropTypes.bool,
+  isSidebarExpanded: PropTypes.bool
+};
+Footer.defaultProps = {
+  color: 'primary'
+};
+export default Footer;

package/dist/Footer/Footer.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Footer } from './Footer';
+export default {
+  title: 'Components Library/Footer',
+  component: Footer,
+  argTypes: {
+    color: {
+      options: ['primary', 'red'],
+      control: {
+        type: ''
+      },
+      hasSidebar: {
+        type: 'boolean',
+        default: false
+      },
+      isSidebarExpanded: {
+        type: 'boolean',
+        default: false
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(Footer, args);
+export const FooterPrimary = Template.bind({});
+FooterPrimary.args = {};
+export const FooterRed = Template.bind({});
+FooterRed.args = {
+  color: 'red'
+};
+export const FooterRedWithSidebar = Template.bind({});
+FooterRedWithSidebar.args = {
+  color: 'red',
+  hasSidebar: true,
+  isSidebarExpanded: true
+};
+
+// export const footerprimary = () => <Footer color="primary"></Footer>
+// export const footerred = () => <Footer color="red"></Footer>
+
+//doublecheck:
+// padding missing for primary in Footer.styles