@stokr/components-library 0.5.6 → 0.5.8

package/dist/ROI/ROIChart.styles.js

@@ -1,98 +0,0 @@
-import styled from 'styled-components/macro';
-import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
-import { Container as BarChartLegendContainer } from 'components/BarChartLegend/BarChartLegend.styles';
-import rwd from 'styles/rwd';
-export const Chart = styled.div`
-  position: relative;
-  display: block;
-  width: 100%;
-  height: auto;
-
-  .axisX,
-  .axisY {
-    & > path {
-      stroke: #e1e1e1;
-    }
-
-    .tick {
-      text {
-        font-weight: 600;
-        font-size: 14px;
-        fill: #9b9b9b;
-      }
-
-      line {
-        stroke: none;
-      }
-    }
-  }
-
-  .axisY {
-    display: none;
-    & > path {
-      stroke: none;
-    }
-  }
-
-  .gridX,
-  .gridY {
-    display: none;
-    & > path {
-      stroke: none;
-    }
-  }
-
-  .gridX {
-    .tick line {
-      stroke: none;
-    }
-  }
-
-  .gridY {
-    .tick line {
-      stroke: #dfe5f1;
-    }
-  }
-
-  .stackedBar__gainText,
-  .stackedBar__profitText {
-    font-weight: bold;
-  }
-`;
-export const TooltipWrapper = styled.div`
-  text-align: left;
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-`;
-export const BarChartTooltip = styled.div`
-  font-size: 10px;
-  min-width: 40px;
-
-  & > h3 {
-    font-weight: 400;
-    font-family: 'Open Sans';
-    font-size: 16px;
-    margin: 0;
-    padding: 0;
-  }
-
-  & > p {
-    color: #79ca65;
-    font-family: 'Open Sans';
-    font-size: 11px;
-    text-transform: uppercase;
-  }
-`;
-export const LegendWrapper = styled(ComponentWrapper)`
-  ${rwd.Large`
-    ${BarChartLegendContainer} {
-      display: inline-block;
-  
-      + ${BarChartLegendContainer} {
-        padding-left: 32px;
-      }
-    }
-  `}
-`;

package/dist/ROI/ROIModal.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Modal, ModalInner } from 'components/Modal/Modal';
-import Text from 'components/Text/Text.styles';
-import { Column } from 'components/Grid/Grid.styles';
-import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
-import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
-import Table from 'components/AdminDashboard/Table/Table';
-import { Label, ROIItemsRow, ROIItemContainer, ROIItemTitle, ROIItemContent } from './ROI.styles';
-const ROIModal = ({
-  isModalOpen,
-  onModalClose
-}) => /*#__PURE__*/React.createElement(Modal, {
-  isOpen: isModalOpen,
-  onClose: onModalClose
-}, /*#__PURE__*/React.createElement(ModalInner, null, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "COMPANY RELATED METRICS")), /*#__PURE__*/React.createElement(ComponentScroll, {
-  offset: -32,
-  autoHeight: true,
-  autoHeightMin: 200,
-  autoHeightMax: 400
-}, /*#__PURE__*/React.createElement(ComponentWrapper, {
-  noPaddingHorizontal: true
-}, /*#__PURE__*/React.createElement(Label, null, "INDUSTRY AVERAGE"), /*#__PURE__*/React.createElement(ROIItemsRow, null, /*#__PURE__*/React.createElement(Column, {
-  part: 1,
-  full: 3
-}, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "PROCE-TO-EARNING RATIO"), /*#__PURE__*/React.createElement(ROIItemContent, null, "3.00"))), /*#__PURE__*/React.createElement(Column, {
-  part: 1,
-  full: 3
-}, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "RETURN ON EQUITY (ROE)"), /*#__PURE__*/React.createElement(ROIItemContent, null, "\u20AC 200,000"))))), /*#__PURE__*/React.createElement(ComponentWrapper, {
-  noPaddingHorizontal: true
-}, /*#__PURE__*/React.createElement(Label, null, "COMPANY DATA"), /*#__PURE__*/React.createElement(ROIItemsRow, null, /*#__PURE__*/React.createElement(Column, {
-  part: 1,
-  full: 3
-}, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "COMPANY VALUATION"), /*#__PURE__*/React.createElement(ROIItemContent, null, "\u20AC 300,000"))), /*#__PURE__*/React.createElement(Column, {
-  part: 1,
-  full: 3
-}, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "SHARE OF TOKEN SUPPLY SOLD DURING STO"), /*#__PURE__*/React.createElement(ROIItemContent, null, "\u20AC 200,000"))), /*#__PURE__*/React.createElement(Column, {
-  part: 1,
-  full: 3
-}, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "INITIAL TOKEN PRICE"), /*#__PURE__*/React.createElement(ROIItemContent, null, "\u20AC 1.00"))), /*#__PURE__*/React.createElement(Column, {
-  part: 1,
-  full: 3
-}, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "Revenue share RATE"), /*#__PURE__*/React.createElement(ROIItemContent, null, "66.7%"))), /*#__PURE__*/React.createElement(Column, {
-  part: 1,
-  full: 3
-}, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "Revenue share PER TOKEN"), /*#__PURE__*/React.createElement(ROIItemContent, null, "0.000333%"))))), /*#__PURE__*/React.createElement(ComponentWrapper, {
-  noPaddingHorizontal: true
-}, /*#__PURE__*/React.createElement(Table, {
-  columns: [{
-    key: 'period',
-    label: 'PERIOD',
-    width: '24%'
-  }, {
-    key: 'profit_payout',
-    label: 'PROFIT PAYOUT RATIO',
-    width: '36%'
-  }, {
-    key: 'earnings',
-    label: 'COMPANY EARNINGS FORECAST (MLN)',
-    width: '40%'
-  }],
-  data: [...Array(10).fill({})].map((_, index) => ({
-    id: index,
-    period: `YEAR ${index + 1}`,
-    profit_payout: `${4 * (index + 1)}%`,
-    earnings: `€ ${Number(0.01 * 0.4 * (index + 1)).toFixed(2)}`
-  })),
-  noScroll: true
-})))));
-ROIModal.propTypes = {
-  isModalOpen: PropTypes.bool.isRequired,
-  onModalClose: PropTypes.func.isRequired
-};
-export default ROIModal;

package/dist/ROI/ROIScenarioBox.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip } from 'react-tippy';
-import { Wrap, CheckMark, Title, Subtitle, Container } from './ROIScenarioBox.styles';
-const ROIScenarioBox = ({
-  title,
-  subtitle,
-  tooltip,
-  radio
-}) => /*#__PURE__*/React.createElement(Wrap, null, /*#__PURE__*/React.createElement("input", {
-  type: "radio",
-  id: radio.id,
-  name: radio.name || radio.id,
-  value: radio.value,
-  checked: radio.checked,
-  disabled: radio.disabled,
-  onChange: radio.onChange,
-  onBlur: radio.onBlur
-}), /*#__PURE__*/React.createElement("label", {
-  htmlFor: radio.id
-}, /*#__PURE__*/React.createElement(Tooltip, {
-  position: "right",
-  title: tooltip,
-  theme: "light",
-  arrow: true,
-  duration: 200
-}, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Subtitle, null, subtitle), /*#__PURE__*/React.createElement(CheckMark, null)))));
-ROIScenarioBox.propTypes = {
-  title: PropTypes.string.isRequired,
-  subtitle: PropTypes.string,
-  tooltip: PropTypes.string,
-  radio: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string,
-    value: PropTypes.string,
-    checked: PropTypes.bool,
-    onChange: PropTypes.func,
-    onBlur: PropTypes.func,
-    hide: PropTypes.bool
-  }).isRequired
-};
-ROIScenarioBox.defaultProps = {
-  subtitle: '',
-  tooltip: ''
-};
-export default ROIScenarioBox;

package/dist/ROI/ROIScenarioBox.styles.js

@@ -1,131 +0,0 @@
-import styled from 'styled-components/macro';
-import theme from 'styles/theme';
-export const CheckMark = styled.div`
-  position: absolute;
-  display: block;
-  width: 14px;
-  height: 14px;
-  top: 50%;
-  right: 44px;
-  margin-top: -7px;
-  border: 1px solid #9b9b9b;
-  border-radius: 7px;
-  background-color: transparent;
-  transition: border-color 0.2s, background-color 0.2s;
-
-  &:before,
-  &:after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    opacity: 0;
-    transform: scale(0);
-    transition: opacity 0.2s, transform 0.4s cubic-bezier(0.8, -0.5, 0.6, 0.6);
-  }
-
-  &:after {
-    width: 4px;
-    height: 4px;
-    margin-top: -2px;
-    margin-left: -2px;
-    border-radius: 2px;
-    background-color: ${props => theme.cPrimary};
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
-  }
-`;
-export const Wrap = styled.div`
-  margin-bottom: 12px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  & > input {
-    ${props => props.hide && 'visibility: hidden'};
-    z-index: -1;
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    display: block;
-    width: 1px;
-    height: 0;
-    opacity: 0;
-    border: 0;
-
-    & + label {
-      display: block;
-      position: relative;
-      cursor: pointer;
-
-      &:before {
-        content: '';
-        width: 6px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        background-color: transparent;
-        transition: background-color 0.2s;
-      }
-    }
-
-    &:disabled + label {
-      &:before {
-        background-color: transparent !important;
-      }
-
-      ${CheckMark} {
-        border-color: ${props => theme.cLightGrey}!important;
-        background-color: ${props => theme.cGrey}!important;
-      }
-    }
-
-    &:checked + label {
-      &:before {
-        background-color: ${props => theme.cWarning}!important;
-      }
-
-      ${CheckMark} {
-        &:before,
-        &:after {
-          opacity: 1;
-          transform: scale(1);
-          transition: opacity 0.2s,
-            transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-        }
-      }
-    }
-
-    &:focus + label,
-    &:hover + label,
-    & + label:hover {
-      &:before {
-        background-color: ${props => theme.cLightGrey};
-      }
-
-      ${CheckMark} {
-        border-color: ${props => theme.cPrimary};
-      }
-    }
-  }
-`;
-export const Container = styled.div`
-  padding: 24px 44px;
-  border: 1px solid ${props => theme.cLightGrey};
-  background: ${props => theme.cWhite};
-`;
-export const Title = styled.div`
-  font-size: 22px;
-  font-weight: 300;
-  line-height: 28px;
-  letter-spacing: 0.8px;
-  padding-bottom: 4px;
-`;
-export const Subtitle = styled.div`
-  font-size: 9px;
-  font-style: italic;
-  line-height: 16px;
-  letter-spacing: 0.4px;
-`;

package/dist/Radio/Radio.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Wrapper, Label, Input } from './Radio.styles';
-export const Radio = ({
-  id,
-  name,
-  text,
-  label,
-  value,
-  checked,
-  error,
-  touched,
-  onChange,
-  onBlur,
-  onFocus
-}) => /*#__PURE__*/React.createElement(Wrapper, null, label && /*#__PURE__*/React.createElement(Label, {
-  error: error && touched,
-  htmlFor: id
-}, label), /*#__PURE__*/React.createElement(Input, {
-  error: error && touched
-}, /*#__PURE__*/React.createElement("input", {
-  type: "radio",
-  id: id,
-  name: name || id,
-  value: value,
-  checked: checked,
-  onChange: onChange,
-  onBlur: onBlur,
-  onFocus: onFocus
-}), /*#__PURE__*/React.createElement("label", {
-  htmlFor: id
-}, text)));
-Radio.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string,
-  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  label: PropTypes.string,
-  value: PropTypes.string,
-  checked: PropTypes.bool,
-  error: PropTypes.bool,
-  touched: PropTypes.bool,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func
-};
-Radio.defaultProps = {
-  name: '',
-  text: '',
-  label: '',
-  value: '',
-  checked: false,
-  error: false,
-  touched: false,
-  onChange: () => {},
-  onBlur: () => {},
-  onFocus: () => {}
-};
-export default Radio;

package/dist/Radio/Radio.stories.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import Radio from './Radio';
-import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
-export default {
-  title: 'Components Library/Radio',
-  component: Radio,
-  argTypes: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    name: {
-      type: 'string',
-      defaultValue: ''
-    },
-    text: {
-      type: 'string or node',
-      defaultValue: ''
-    },
-    label: {
-      type: 'string',
-      defaultValue: ''
-    },
-    value: {
-      type: 'string',
-      defaultValue: ''
-    },
-    checked: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    error: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    touched: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    onChange: {
-      type: 'function',
-      action: 'onChange'
-    },
-    onBlur: {
-      type: 'function',
-      action: 'onBlur'
-    },
-    onFocus: {
-      type: 'function',
-      action: 'onFocus'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Radio, args));
-export const RadioChecked = Template.bind({});
-RadioChecked.args = {
-  value: 'Value',
-  name: 'Name',
-  text: 'Text, or other Element',
-  label: 'Label',
-  checked: true
-};
-
-//doublecheck:
-// actions not working

package/dist/Radio/Radio.styles.js

@@ -1,93 +0,0 @@
-import styled from 'styled-components/macro';
-import { Label as InputLabel } from 'components/Input/Input.styles';
-import theme from 'styles/theme';
-export const Wrapper = styled.div`
-  position: relative;
-  display: block;
-`;
-export const Label = styled(InputLabel)`
-  position: relative;
-  top: 0;
-  transform: none;
-  font-size: 10px;
-  margin-bottom: 5px;
-`;
-export const Input = styled.div`
-  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: 13px;
-      line-height: 16px;
-      letter-spacing: 0.4px;
-      cursor: pointer;
-
-      &:before,
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-      }
-
-      &:before {
-        top: 0;
-        left: 0;
-        width: 16px;
-        height: 16px;
-        border-radius: 8px;
-        border: 1px solid #9b9b9b;
-        box-shadow: none;
-        transition: border-color 0.2s;
-      }
-
-      &:after {
-        top: 5px;
-        left: 5px;
-        width: 6px;
-        height: 6px;
-        border-radius: 3px;
-        background-color: transparent;
-      }
-    }
-
-    &:focus + label,
-    &:hover + label {
-      &:before {
-        border-color: ${props => theme.cPrimary};
-      }
-    }
-
-    &:checked + label {
-      &:after {
-        background-color: ${props => theme.cPrimary};
-      }
-    }
-  }
-
-  ${props => props.error && `
-    & > input {
-
-      & + label {
-
-        &:before {
-          border-color: ${theme.cWarning};
-        }
-      }
-    }
-  `}
-`;

package/dist/RefreshButton/RefreshButton.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { RefreshSvg } from 'components/SvgIcons';
-import { StyledButton, IconWrap, Content } from './RefreshButton.styles';
-export const RefreshButton = props => {
-  const {
-    children
-  } = props;
-  return /*#__PURE__*/React.createElement(StyledButton, props, /*#__PURE__*/React.createElement(IconWrap, null, /*#__PURE__*/React.createElement(RefreshSvg, null)), /*#__PURE__*/React.createElement(Content, null, children));
-};
-RefreshButton.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default RefreshButton;

package/dist/RefreshButton/RefreshButton.stories.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import Number from 'components/Number/Number';
-import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
-import RefreshButton from './RefreshButton';
-export default {
-  title: 'Components Library/Buttons/RefreshButton',
-  component: RefreshButton,
-  argTypes: {
-    children: {
-      type: 'node',
-      required: true
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(RefreshButton, args));
-export const RefreshButtonDefault = Template.bind({});
-RefreshButtonDefault.args = {};
-export const RefreshButtonChild1 = Template.bind({});
-RefreshButtonChild1.args = {
-  children: /*#__PURE__*/React.createElement(Number, null)
-};
-// export const RefreshButtonChild2 = Template.bind({})
-// RefreshButtonChild2.args = {
-//   children: <TransactionDetails1 />,
-// }
-
-// doublecheck:
-//children = node
-//try to get e.g. story of Transactiondetails in here as child - not working cause data not moved?

package/dist/RefreshButton/RefreshButton.styles.js

@@ -1,57 +0,0 @@
-import styled from 'styled-components/macro';
-import Button from 'components/Button/Button.styles';
-import theme from 'styles/theme';
-export const IconWrap = styled.div`
-  display: block;
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  top: 50%;
-  margin-top: -12px;
-  left: 0;
-  border-radius: 12px;
-
-  & > svg {
-    fill: ${props => theme.cPrimary};
-    stroke: ${props => theme.cPrimary};
-    display: block;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -8px;
-    margin-left: -8px;
-    transition: color 0.2s;
-  }
-`;
-export const StyledButton = styled(Button).attrs(props => ({
-  type: props.type || 'button'
-}))`
-  position: relative;
-  color: ${props => theme.cBlack};
-  border: 1px solid transparent;
-  background-color: transparent;
-  text-align: left;
-  padding: 11px 0;
-  padding-left: 34px;
-
-  &:hover,
-  &:focus,
-  &:active {
-    color: ${props => theme.cBlack};
-    border-color: transparent;
-    background-color: transparent;
-
-    ${IconWrap} {
-      & > svg {
-        fill: ${props => theme.cPrimaryDark};
-        transform: rotate(360deg);
-        transition: color 0.2s, transform 0.3s ease-out;
-      }
-    }
-  }
-`;
-export const Content = styled.div`
-  display: inline-block;
-`;