@stokr/components-library 0.5.6 → 0.5.8

package/dist/ChartBox/ChartBox.styles.js

@@ -1,50 +0,0 @@
-import styled from 'styled-components/macro';
-import rwd from 'styles/rwd';
-export const Container = styled.div`
-  position: relative;
-  font-size: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 0;
-
-  text-align: left;
-  width: 100%;
-
-  ${rwd.Medium`
-    align-items: start;
-    padding: 64px 0;
-    flex-direction: row;
-  `}
-
-  @media screen and (max-width: 767px) {
-    width: 100%;
-  }
-`;
-export const Chart = styled.div`
-  display: block;
-`;
-export const Legend = styled.div`
-  display: block;
-  width: 100%;
-  padding-top: 64px;
-
-  ${rwd.Medium`
-    width: auto;
-    flex-grow: 1;
-    padding-top: 0;
-    padding-left: 64px;
-
-    ${props => props.spaceTop && `
-      padding-top: 104px;
-    `}
-  `}
-
-  ${rwd.Large`
-    max-width: 768px;
-  `}
-`;
-export const SelectWrapper = styled.div`
-  padding-bottom: 64px;
-`;

package/dist/ChartBox/ChartBoxDistribution.js

@@ -1,20 +0,0 @@
-import React from 'react';
-
-// import Select from 'components/Input/Select';
-// import DonutChart from 'components/DonutChart/DonutChart';
-// import {
-//   DonutChartLabel, DonutChartValue,
-// } from 'components/DonutChart/DonutChart.styles';
-// import ChartLegend from 'components/ChartLegend/ChartLegend';
-
-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';
-
-export const ChartBoxDistribution = () => /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
-  center: true
-}, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h4", null, "No Distributions yet..."))));
-export default ChartBoxDistribution;

package/dist/ChartBox/ChartBoxDistribution.stories.js

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

package/dist/ChartLegend/ChartLegend.js

@@ -1,37 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Collapse } from 'react-collapse';
-import { Items, Item, Head, Body, ColorLabel, NameCol, ValueCol, LargeText, SmallText, Arrow } from './ChartLegend.styles';
-export const ChartLegend = props => {
-  const {
-    data
-  } = props;
-  const [activeItems, setActiveItems] = useState(data.map(() => false));
-  const toggleItem = key => {
-    let newActiveItems = data.map((item, itemKey) => {
-      return itemKey === key ? !activeItems[itemKey] : activeItems[itemKey];
-    });
-    setActiveItems(newActiveItems);
-  };
-  return /*#__PURE__*/React.createElement(Items, null, data.map((item, itemKey) => /*#__PURE__*/React.createElement(Item, {
-    key: item.name
-  }, /*#__PURE__*/React.createElement(Head, {
-    onClick: () => toggleItem(itemKey)
-  }, /*#__PURE__*/React.createElement(ColorLabel, {
-    itemColor: item.color
-  }), /*#__PURE__*/React.createElement(NameCol, null, /*#__PURE__*/React.createElement(LargeText, null, item.name), /*#__PURE__*/React.createElement(SmallText, null, item.subname)), /*#__PURE__*/React.createElement(ValueCol, null, /*#__PURE__*/React.createElement(LargeText, null, item.value), /*#__PURE__*/React.createElement(SmallText, null, item.info)), item.details && /*#__PURE__*/React.createElement(Arrow, {
-    isOpened: activeItems[itemKey]
-  })), item.details && /*#__PURE__*/React.createElement(Collapse, {
-    isOpened: activeItems[itemKey]
-  }, /*#__PURE__*/React.createElement(Body, null, item.details)))));
-};
-ChartLegend.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.number.isRequired,
-    name: PropTypes.string,
-    color: PropTypes.string,
-    subname: PropTypes.string,
-    info: PropTypes.string
-  })).isRequired
-};
-export default ChartLegend;

package/dist/ChartLegend/ChartLegend.stories.js

@@ -1,74 +0,0 @@
-import React from 'react';
-import { ChartLegend } from './ChartLegend';
-import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
-import BasicTable from 'components/BasicTable/BasicTable';
-export default {
-  title: 'Components Library/Chart Legend',
-  component: ChartLegend,
-  argTypes: {
-    data: {
-      type: 'array',
-      defaultValue: [{
-        value: 0
-      }, {
-        name: ''
-      }, {
-        color: ''
-      }, {
-        subname: ''
-      }, {
-        info: ''
-      }],
-      required: true
-    },
-    value: {
-      type: 'number',
-      required: true
-    },
-    name: {
-      type: 'string'
-    },
-    color: {
-      type: 'string',
-      defaultValue: ''
-    },
-    subname: {
-      type: 'string',
-      defaultValue: ''
-    },
-    info: {
-      type: 'string',
-      defaultValue: ''
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ChartLegend, args));
-const Table = (balance, symbol, price, address, link, label) => /*#__PURE__*/React.createElement(BasicTable, {
-  data: [{
-    label: 'Token balance',
-    value: balance.toString()
-  }, {
-    label: 'Token price',
-    value: `${symbol} ${price.toFixed(2)}`
-  }, {
-    label: 'Token value',
-    value: `${symbol} ${(balance * price).toFixed(2)}`
-  }, {
-    label: label,
-    value: address,
-    isLink: true,
-    link
-  }]
-});
-export const ChartLegendFull = Template.bind({});
-ChartLegendFull.args = {
-  data: [{
-    value: 1560,
-    name: 'Name',
-    color: 'red',
-    subname: 'Sub Name',
-    info: 'information',
-    price: 10000,
-    details: Table(1560, 'USD', 10000, 'some link', 'some label')
-  }]
-};

package/dist/ChartLegend/ChartLegend.styles.js

@@ -1,67 +0,0 @@
-import styled from 'styled-components/macro';
-export const Items = styled.div`
-  display: block;
-  margin: -16px 0;
-`;
-export const Item = styled.div`
-  padding: 16px 0;
-`;
-export const Head = styled.div`
-  cursor: pointer;
-  position: relative;
-  font-size: 0;
-  padding: 0 46px;
-`;
-export const Body = styled.div`
-  padding: 18px 0;
-`;
-export const ColorLabel = styled.div`
-  display: block;
-  width: 28px;
-  height: 28px;
-  background-color: ${props => props.itemColor};
-  position: absolute;
-  top: 0;
-  left: 0;
-`;
-export const NameCol = styled.div`
-  width: 50%;
-  display: inline-block;
-  vertical-align: top;
-`;
-export const ValueCol = styled.div`
-  width: 50%;
-  display: inline-block;
-  vertical-align: top;
-`;
-export const LargeText = styled.div`
-  font-weight: 300;
-  font-size: 22px;
-  line-height: 28px;
-`;
-export const SmallText = styled.div`
-  font-size: 11px;
-  line-height: 12px;
-  margin-top: 4px;
-  font-style: italic;
-`;
-export const Arrow = styled.i.attrs({
-  className: 'ion ion-ios-arrow-down'
-})`
-  &&& {
-    position: absolute;
-    top: 14px;
-    right: 24px;
-    transition: 0.3s transform;
-    transform: rotate(0);
-    text-align: center;
-    font-size: 16px;
-    line-height: 16px;
-    height: 16px;
-    margin-top: -8px;
-
-    ${props => props.isOpened && `
-      transform: rotate(180deg);
-    `}
-  }
-`;

package/dist/Checkbox/Checkbox.js

@@ -1,108 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Wrapper, Label, Input } from './Checkbox.styles';
-const TermsStyled = styled.span`
-  cursor: pointer;
-  font-size: 12px;
-  /* margin-left: 4px; */
-  text-decoration: underline;
-
-  &:hover {
-    opacity: 0.7;
-  }
-`;
-export const CheckBoxCaption = styled.div`
-  padding-top: 12px;
-  letter-spacing: 0.4px;
-  font-size: 11px;
-  font-weight: 400;
-`;
-const Terms = ({
-  onTermsClicked
-}) => /*#__PURE__*/React.createElement(TermsStyled, {
-  onClick: e => {
-    e.stopPropagation();
-    e.preventDefault();
-    onTermsClicked();
-  }
-}, "Terms of Use");
-
-// TODO: Refactor
-
-export const Checkbox = ({
-  id,
-  name,
-  text,
-  label,
-  value,
-  checked,
-  large,
-  error,
-  touched,
-  onChange,
-  onBlur,
-  onFocus,
-  textStyle,
-  isTerms,
-  disabled,
-  onTermsClicked,
-  onClick,
-  ...props
-}) => /*#__PURE__*/React.createElement(Wrapper, null, label && /*#__PURE__*/React.createElement(Label, {
-  error: error && touched,
-  htmlFor: id
-}, label), /*#__PURE__*/React.createElement(Input, {
-  error: error,
-  large: large,
-  disabled: disabled
-}, /*#__PURE__*/React.createElement("input", _extends({
-  type: "checkbox",
-  id: id,
-  name: name || id,
-  value: value,
-  checked: checked,
-  onChange: onChange,
-  onBlur: onBlur,
-  disabled: disabled,
-  onFocus: onFocus,
-  onClick: onClick
-}, props)), /*#__PURE__*/React.createElement("label", {
-  htmlFor: id,
-  style: textStyle
-}, text, isTerms && /*#__PURE__*/React.createElement(Terms, {
-  onTermsClicked: onTermsClicked,
-  onclick: "event.stopPropagation();"
-}))));
-export const CheckboxPropTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string,
-  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  label: PropTypes.string,
-  value: PropTypes.string,
-  checked: PropTypes.bool,
-  large: PropTypes.bool,
-  error: PropTypes.bool,
-  touched: PropTypes.bool,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  onFocus: PropTypes.func,
-  textStyle: PropTypes.object
-};
-Checkbox.propTypes = CheckboxPropTypes;
-Checkbox.defaultProps = {
-  name: '',
-  text: '',
-  label: '',
-  value: '',
-  checked: false,
-  large: false,
-  error: false,
-  touched: false,
-  onChange: () => {},
-  onBlur: () => {},
-  onFocus: () => {},
-  textStyle: {}
-};
-export default Checkbox;

package/dist/Checkbox/Checkbox.stories.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import { Checkbox } from './Checkbox';
-import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
-
-// import { Wrapper, Label, InputWrap } from './Input.styles'
-// import { useState } from 'react'
-
-export default {
-  title: 'Components Library/Checkbox',
-  component: Checkbox,
-  argTypes: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    name: {
-      type: 'string',
-      required: true
-    },
-    text: {
-      control: {
-        type: 'object'
-      }
-    },
-    label: {
-      type: 'string',
-      defaultValue: ''
-    },
-    value: {
-      type: 'string'
-    },
-    checked: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    large: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    error: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    touched: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    disabled: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    onChange: {
-      type: 'function',
-      action: 'onChange'
-    },
-    onClick: {
-      type: 'function',
-      action: 'onClick'
-    },
-    onBlur: {
-      type: 'function',
-      action: 'onBlur'
-    },
-    onFocus: {
-      type: 'function',
-      action: 'onFocus'
-    },
-    textStyle: {
-      type: 'object'
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Checkbox, args));
-export const CheckboxUnchecked = Template.bind({});
-CheckboxUnchecked.args = {
-  label: 'A Label'
-};
-export const CheckboxChecked = Template.bind({});
-CheckboxChecked.args = {
-  label: 'A Label',
-  checked: true
-};

package/dist/Checkbox/Checkbox.styles.js

@@ -1,123 +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: 12px;
-      line-height: 16px;
-      font-weight: 300;
-      letter-spacing: 0.4px;
-      cursor: pointer;
-
-      ${props => props.error && `color: ${theme.cWarning}`};
-
-      &:before,
-      &:after {
-        display: block;
-        position: absolute;
-      }
-
-      &:before {
-        content: '';
-        top: 0;
-        left: 0;
-        width: 16px;
-        height: 16px;
-        border-radius: 3px;
-        border: 1px solid #9b9b9b;
-        box-shadow: none;
-        transition: border-color 0.2s;
-
-        ${props => props.large && `
-          width: 20px;
-          height: 20px;
-          border-radius: 4px;
-        `}
-        ${props => props.disabled && `
-            background-color: #9b9b9b30;
-
-        `}
-      }
-
-      &:after {
-        content: '\\f3ff';
-        font-family: 'Ionicons';
-        speak: none;
-        font-style: normal;
-        font-weight: normal;
-        font-variant: normal;
-        text-transform: none;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        top: 3px;
-        left: 3px;
-        width: 10px;
-        height: 10px;
-        font-size: 22px;
-        line-height: 10px;
-        text-align: center;
-        color: transparent;
-
-        ${props => props.large && `
-          top: 0;
-          left: 0;
-          width: 20px;
-          height: 20px;
-          font-size: 34px;
-          line-height: 20px;
-        `};
-      }
-    }
-
-    &:focus + label,
-    &:hover + label {
-      &:before {
-        border-color: ${props => props.disabled ? 'none' : theme.cPrimary};
-      }
-    }
-
-    &:checked + label {
-      &:after {
-        color: ${props => theme.cPrimary};
-      }
-    }
-  }
-`;
-
-// IIS had minor differences - leaving out of merge. lighter checkbox border, more margin
-// IIS Input & + label
-//    font-size: 16px;
-//    line-height: 22px;
-//    border: 1px solid ${theme.cGrey}
-// &:before  +  &:after
-//    margin-top: 3px;