@stokr/components-library 0.5.3 → 0.5.5

package/dist/BarChartLegend/BarChartLegend.js

@@ -0,0 +1,74 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3';
+import { Container, Bar, Label } from './BarChartLegend.styles';
+const gradients = {
+  default: {
+    start: '#0050ca',
+    end: '#0050ca'
+  },
+  red: {
+    start: '#f24f45',
+    end: '#ee220d'
+  },
+  blue: {
+    start: '#6a97e0',
+    end: '#0050ca'
+  }
+};
+export class BarChartLegend extends PureComponent {
+  componentDidMount() {
+    this.createChart();
+  }
+  createChart = () => {
+    if (!this.barEl) return;
+    const {
+      id,
+      colorTheme
+    } = this.props;
+    const width = 50;
+    const thickness = 6;
+    const radius = thickness / 2;
+    this.svg = d3.select(this.barEl).append('svg').attr('width', width).attr('height', thickness);
+    this.defs = this.svg.append('defs');
+
+    // #region gradient
+    this.gradient = this.defs.append('linearGradient').attr('id', `${id}-barChartLegend-gradient`).attr('x1', '0%').attr('x2', '100%').attr('y1', '50%').attr('y2', '50%');
+    this.gradient.append('stop').attr('class', 'start').attr('offset', '0%').attr('stop-color', gradients[colorTheme].start).attr('stop-opacity', 1);
+    this.gradient.append('stop').attr('class', 'end').attr('offset', '100%').attr('stop-color', gradients[colorTheme].end).attr('stop-opacity', 1);
+    // #endregion gradient
+
+    // #region bars
+    this.bar = this.svg.append('path').attr('class', 'bar').style('fill', `url(#${id}-barChartLegend-gradient)`).attr('d', item => `
+        M 0 0
+        A ${radius} ${radius} 0 0 1 ${radius} ${-radius}
+        H ${width - radius}
+        A ${radius} ${radius} 0 0 1 ${width} 0
+        A ${radius} ${radius} 0 0 1 ${width - radius} ${radius}
+        H ${radius}
+        A ${radius} ${radius} 0 0 1 0 0 
+        Z
+      `).attr('transform', `translate(0, ${radius})`);
+    // #endregion bars
+  };
+
+  render() {
+    const {
+      label
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Bar, {
+      ref: el => {
+        this.barEl = el;
+      }
+    }), /*#__PURE__*/React.createElement(Label, null, label));
+  }
+}
+BarChartLegend.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  colorTheme: PropTypes.oneOf(['default', 'red', 'blue'])
+};
+BarChartLegend.defaultProps = {
+  colorTheme: 'default'
+};
+export default BarChartLegend;

package/dist/BarChartLegend/BarChartLegend.styles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components/macro';
+import theme from 'styles/theme';
+export const Container = styled.div`
+  position: relative;
+  font-size: 0;
+  padding: 2px 0;
+`;
+export const Bar = styled.div`
+  z-index: 1;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: 50px;
+  margin-right: -50px;
+`;
+export const Label = styled.div`
+  z-index: 0;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 70px;
+  max-width: 100%;
+  color: ${props => theme.cGrey2};
+  font-size: 11px;
+  line-height: 16px;
+`;

package/dist/BasicTable/BasicTable.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table, Row, Label, Value, LabelWarning, Caption } from './BasicTable.styles';
+export const BasicTable = ({
+  data,
+  filled,
+  smallPadding
+}) => /*#__PURE__*/React.createElement(Table, {
+  filled: filled
+}, data.map((item, itemKey) => /*#__PURE__*/React.createElement(Row, {
+  key: item.label,
+  smallPadding: smallPadding
+}, /*#__PURE__*/React.createElement(Label, null, item.label), /*#__PURE__*/React.createElement(Value, null, item.value, /*#__PURE__*/React.createElement(Caption, null, item.valueDescription)), item.labelwarning ? /*#__PURE__*/React.createElement(LabelWarning, null, item.labelwarning) : '')));
+BasicTable.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired
+  })).isRequired
+};
+export default BasicTable;

package/dist/BasicTable/BasicTable.stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import BasicTable from './BasicTable';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Basic Table',
+  component: BasicTable,
+  argTypes: {
+    data: {
+      type: 'array of shape with two strings',
+      required: true,
+      defaultValue: [{
+        lable: ''
+      }]
+    },
+    filled: {
+      defaultValue: ''
+    },
+    smallPadding: {
+      defaultValue: ''
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(BasicTable, args));
+export const BasicTableExample = Template.bind({});
+BasicTableExample.args = {
+  data: [{
+    lable: 'table lable',
+    value: 'a value'
+  }]
+};
+export const BasicTableSeveral = Template.bind({});
+BasicTableSeveral.args = {
+  data: [{
+    lable: 'table lable',
+    value: 'a value'
+  }, {
+    lable: 'table lable 1',
+    value: 'another value'
+  }, {
+    lable: 'table lable 2',
+    value: 'and another'
+  }, {
+    lable: 'table lable 3',
+    value: 'value'
+  }]
+};
+
+//doublecheck:
+// why is lable not showing?
+// took out {value:''} from default data array
+// because since merge it includes a caption component that breaks SB

package/dist/BasicTable/BasicTable.styles.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import theme from 'styles/theme';
+export const Table = styled.div`
+  display: block;
+  border: 1px solid ${props => theme.cLightGrey};
+  ${props => props.filled && `
+  background:  #e1e1e1; //${props => theme.cLightGrey};
+  `}
+`;
+export const Row = styled.div`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  padding: 16px 24px;
+  display: block;
+
+  ${rwd.XLarge`
+    padding: 16px 46px;
+  `}
+
+  & + & {
+    border-top: 1px solid ${props => theme.cLightGrey};
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 0;
+    clear: both;
+  }
+  ${props => props.smallPadding && `
+  padding:  14px 6px;
+  `}
+`;
+export const Label = styled.div`
+  float: left;
+  max-width: 50%;
+  text-align: start;
+`;
+export const Value = styled.div`
+  float: right;
+  display: grid;
+  max-width: 50%;
+`;
+export const LabelWarning = styled.div`
+  float: left;
+  text-align: left;
+  width: 100%;
+  color: #ee220d;
+  line-height: 16px;
+`;
+export const Caption = styled.div`
+  text-transform: initial;
+  font-size: 11px;
+  float: right;
+  letter-spacing: 0.6px;
+  font-style: italic;
+  //position: absolute;
+  //right: 7px;
+  //bottom: 0px;
+`;

package/dist/Button/Button.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Button from 'components/Button/Button.styles';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+import { ButtonContainer } from '../ButtonContainer/ButtonContainer.styles';
+// import { DoubleButtons } from '../DoubleButton/DoubleButton.styles'
+
+export default {
+  title: 'Components Library/Buttons/Button',
+  component: Button,
+  argTypes: {
+    secondary: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    disabled: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    negative: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    center: {
+      type: 'boolean',
+      defaultValue: false
+    }
+    // outLine: { type: 'boolean', defaultValue: false },
+    // marginTop: { type: 'boolean', defaultValue: false },
+    // marginRight: { type: 'boolean', defaultValue: false },
+  }
+};
+
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, null, /*#__PURE__*/React.createElement(Button, args, "Button")));
+export const ButtonDefault = Template.bind({});
+ButtonDefault.args = {};
+export const ButtonSecondary = Template.bind({});
+ButtonSecondary.args = {
+  secondary: true
+};
+export const ButtonDisabled = Template.bind({});
+ButtonDisabled.args = {
+  disabled: true
+};
+export const ButtonNegative = Template.bind({});
+ButtonNegative.args = {
+  negative: true
+};
+export const ButtonCenter = Template.bind({});
+ButtonCenter.args = {
+  center: true
+};
+export const ButtonLong = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ButtonContainer, null, /*#__PURE__*/React.createElement(Button, args, "Much Longer Button Label")));
+
+// export const DoubleButton = args => (
+//   <ComponentWrapper>
+//     <DoubleButtons />
+//   </ComponentWrapper>
+// )
+
+// doublecheck:
+//other props mentioned in Button.styles that are not in propTypes:
+//type, minWidth, fluid, onlyText, outLine, marginTop, isUpdates, isDone..
+// Doublebuttons not showing, cannot find use

package/dist/Button/Button.styles.js

@@ -0,0 +1,180 @@
+import styled, { css } from 'styled-components/macro';
+import PropTypes from 'prop-types';
+import theme from 'styles/theme';
+export const Button = styled.button.attrs(props => ({
+  type: props.type || 'button'
+}))`
+display: inline-block;
+  height: auto;
+  min-height: 40px;
+  max-width: 100%;
+  background-color: ${props => theme.cPrimary};
+  border: 1px solid ${props => theme.cPrimary};
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 16px;
+  color: ${props => theme.cWhite};
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 2px;
+  border-radius: 28px;
+  padding: 11px 32px;
+  margin: 0;
+  outline: 0;
+  vertical-align: baseline;
+  text-shadow: none;
+  user-select: none;
+  cursor: pointer;
+  transition: color .2s, background-color .2s, border-color .2s;
+
+  //next 3 added from VD
+  ${({
+  isUpdates,
+  isCancel
+}) => isUpdates && isCancel && css`
+      padding: 11px 0;
+      margin-left: 32px;
+    `}
+
+  ${({
+  isUpdates,
+  isDone
+}) => isUpdates && isDone && css`
+      margin-left: 32px;
+
+      @media screen and (max-width: 850px) {
+        padding: 11px 20px;
+      }
+    `}
+
+  ${({
+  withMarginBottom
+}) => withMarginBottom && css`
+      margin-bottom: 32px;
+    `}
+
+
+  ${props => props.minWidth && css`
+      min-width: ${props.minWidth};
+    `}
+
+  ${props => props.fluid && css`
+      display: block;
+      width: 100%;
+      padding: 11px 12px;
+    `}
+
+  ${props => props.center && css`
+      margin-left: auto;
+      margin-right: auto;
+    `}
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: ${props => theme.cPrimaryDark};
+    border-color: ${props => theme.cPrimaryDark};
+    color: ${props => theme.cWhite};
+  }
+
+  ${props => props.secondary && css`
+      background-color: ${theme.cWhite};
+      color: ${theme.cPrimary};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cPrimary};
+        border-color: ${theme.cPrimary};
+        color: ${theme.cWhite};
+      }
+    `}
+
+  ${props => props.onlyText && css`
+      border-color: transparent;
+      background-color: transparent;
+      color: ${theme.cBlack};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: transparent;
+        border-color: transparent;
+        color: ${theme.cPrimary};
+      }
+    `}
+
+  ${props => props.disabled && css`
+      border-color: ${theme.cBlack};
+      background-color: ${theme.cWhite};
+      color: ${theme.cBlack};
+      opacity: 0.2;
+      cursor: default;
+      box-shadow: none !important;
+      pointer-events: none !important;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cPrimary};
+        border-color: ${theme.cPrimary};
+        color: ${theme.cWhite};
+      }
+    `}
+
+  ${props => props.negative && css`
+      border-color: ${theme.cWarning};
+      background-color: ${theme.cWhite};
+      color: ${theme.cWarning};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cWhite};
+        border-color: ${theme.cWarningDark};
+        color: ${theme.cWarningDark};
+      }
+    `}
+
+  ${props => props.outline && css`
+      border-color: ${theme.cWhite};
+      background-color: transparent;
+      color: ${theme.cWhite};
+
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: ${theme.cWhite};
+        border-color: ${theme.cWhite};
+        color: ${theme.cWarning};
+      }
+    `}
+
+    //next 2 props added from SUF
+
+  ${props => props.marginTop && css`
+      margin-top: ${props.marginTop};
+    `}
+
+  ${props => props.marginRight && css`
+      margin-right: ${props.marginRight};
+    `}
+
+    ${props => props.isLoginMobile && `
+     margin-bottom: 20px;
+  width: 163.94px;
+    `}
+`;
+Button.propTypes = {
+  secondary: PropTypes.bool,
+  disabled: PropTypes.bool,
+  negative: PropTypes.bool,
+  center: PropTypes.bool
+};
+Button.defaultProps = {
+  secondary: false,
+  disabled: false,
+  negative: false,
+  center: false
+};
+export default Button;

package/dist/ButtonContainer/ButtonContainer.styles.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components/macro';
+import Button from 'components/Button/Button.styles';
+export const ButtonContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  ${props => props.flexColumn && `
+    flex-direction:column;
+  `}
+
+  ${Button} {
+    min-width: 150px;
+    max-width: 300px;
+  }
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+
+    ${Button} {
+      min-width: 150px;
+      max-width: 400px;
+    }
+  }
+`;
+export default ButtonContainer;

package/dist/CapitalRaisedSummary/CapitalRaisedSummery.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import CaptialRaisedSummary from './CaptialRaisedSummary';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+// import Checkbox, { CheckboxPropTypes } from 'components/Checkbox/Checkbox'
+
+export default {
+  title: 'Components Library/Capital Raised Summary',
+  component: CaptialRaisedSummary,
+  argTypes: {
+    capital: {
+      type: 'number',
+      defaultValue: 0,
+      required: true
+    },
+    multiProgressBar: {
+      type: 'shape',
+      defaultValue: {}
+    }
+  }
+};
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(CaptialRaisedSummary, args));
+export const CapitalRaisedSum = Template.bind({});
+CapitalRaisedSum.args = {
+  capital: 150,
+  multiProgressBar: {
+    backParts: [{
+      value: 7,
+      label: 'backparts - minumum fill'
+    }],
+    fillParts: [{
+      value: 60,
+      label: 'fillparts - maximum fill'
+    }]
+  }
+};

package/dist/CapitalRaisedSummary/CaptialRaisedSummary.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import CountUp from 'react-countup';
+import PropTypes from 'prop-types';
+import MultiProgressBar, { MultiProgressBarPropTypes } from 'components/MultiProgressBar/MultiProgressBar';
+import { Wrapper, Title, Amount } from './CaptialRaisedSummary.styles';
+export const CaptialRaisedSummary = ({
+  capital,
+  multiProgressBar
+}) => /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Title, null, "CAPITAL RAISED"), /*#__PURE__*/React.createElement(Amount, null, /*#__PURE__*/React.createElement(CountUp, {
+  end: capital,
+  prefix: "\u20AC ",
+  duration: 0.01,
+  separator: ","
+})), /*#__PURE__*/React.createElement(MultiProgressBar, multiProgressBar));
+CaptialRaisedSummary.propTypes = {
+  capital: PropTypes.number.isRequired,
+  multiProgressBar: PropTypes.shape(MultiProgressBarPropTypes).isRequired
+};
+export default CaptialRaisedSummary;
+
+//MERGE:
+//check IIS for better logic, yet unmerged
+//only IIS is used, so replace, but context is unresolved

package/dist/CapitalRaisedSummary/CaptialRaisedSummary.styles.js

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

package/dist/ChartBox/ChartBox.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+// import Select from "components/Input/Select";
+// import DonutChart from "components/DonutChart/DonutChart";
+// import {
+//   DonutChartLabel,
+//   DonutChartValue,
+//   DonutChartInfo,
+//   DonutChartTrend
+// } from "components/DonutChart/DonutChart.styles";
+// import ChartLegend from "components/ChartLegend/ChartLegend";
+// import  from "components//";
+
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import Text from 'components/Text/Text.styles';
+import { Container } from './ChartBox.styles';
+// import { Container, Chart, Legend, SelectWrapper } from "./ChartBox.styles";
+
+// const example = (
+//   <
+//     data={[
+//       { label: "Token balance", value: "TYK 300" },
+//       { label: "Token price", value: "€ 2.50" },
+//       { label: "Token value", value: "€ 750" },
+//       { label: "Distributions", value: "€ 150" },
+//       { label: "ROI", value: "20.0%" }
+//     ]}
+//   />
+// );
+
+export const ChartBox = () => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+  center: true
+}, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h4", null, "No Investments yet..."))));
+export default ChartBox;

package/dist/ChartBox/ChartBox.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ChartBox } from './ChartBox';
+export default {
+  title: 'Components Library/Chart Box/Chart Box',
+  component: ChartBox
+};
+export const chartBoxEmpty = () => /*#__PURE__*/React.createElement(ChartBox, null);
+
+//ChartBox the component is pretty much commented out