@stokr/components-library 0.5.4 → 0.5.6

package/dist/ROI/ROIChart.styles.js

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+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;
+`;