@stokr/components-library 0.5.6 → 0.5.8

package/dist/BarChartLegend/BarChartLegend.js

@@ -1,74 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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