@stokr/components-library 1.0.9 → 1.1.0

package/dist/components/ChartLegend/ChartLegend.stories.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChartLegendFull = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ChartLegend = require("./ChartLegend");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _BasicTable = _interopRequireDefault(require("../BasicTable/BasicTable"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Chart Legend',
+  component: _ChartLegend.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: ''
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.ChartLegend, args)));
+};
+var Table = function Table(balance, symbol, price, address, link, label) {
+  return /*#__PURE__*/_react.default.createElement(_BasicTable.default, {
+    data: [{
+      label: 'Token balance',
+      value: balance.toString()
+    }, {
+      label: 'Token price',
+      value: "".concat(symbol, " ").concat(price.toFixed(2))
+    }, {
+      label: 'Token value',
+      value: "".concat(symbol, " ").concat((balance * price).toFixed(2))
+    }, {
+      label: label,
+      value: address,
+      isLink: true,
+      link: link
+    }]
+  });
+};
+var ChartLegendFull = Template.bind({});
+exports.ChartLegendFull = ChartLegendFull;
+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/components/ChartLegend/ChartLegend.styles.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValueCol = exports.SmallText = exports.NameCol = exports.LargeText = exports.Items = exports.Item = exports.Head = exports.ColorLabel = exports.Body = exports.Arrow = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Items = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__Items",
+  componentId: "sc-gh1vwu-0"
+})(["display:block;margin:-16px 0;"]);
+exports.Items = Items;
+var Item = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__Item",
+  componentId: "sc-gh1vwu-1"
+})(["padding:16px 0;"]);
+exports.Item = Item;
+var Head = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__Head",
+  componentId: "sc-gh1vwu-2"
+})(["cursor:pointer;position:relative;font-size:0;padding:0 46px;"]);
+exports.Head = Head;
+var Body = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__Body",
+  componentId: "sc-gh1vwu-3"
+})(["padding:18px 0;"]);
+exports.Body = Body;
+var ColorLabel = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__ColorLabel",
+  componentId: "sc-gh1vwu-4"
+})(["display:block;width:28px;height:28px;background-color:", ";position:absolute;top:0;left:0;"], function (props) {
+  return props.itemColor;
+});
+exports.ColorLabel = ColorLabel;
+var NameCol = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__NameCol",
+  componentId: "sc-gh1vwu-5"
+})(["width:50%;display:inline-block;vertical-align:top;"]);
+exports.NameCol = NameCol;
+var ValueCol = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__ValueCol",
+  componentId: "sc-gh1vwu-6"
+})(["width:50%;display:inline-block;vertical-align:top;"]);
+exports.ValueCol = ValueCol;
+var LargeText = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__LargeText",
+  componentId: "sc-gh1vwu-7"
+})(["font-weight:300;font-size:22px;line-height:28px;"]);
+exports.LargeText = LargeText;
+var SmallText = _styledComponents.default.div.withConfig({
+  displayName: "ChartLegendstyles__SmallText",
+  componentId: "sc-gh1vwu-8"
+})(["font-size:11px;line-height:12px;margin-top:4px;font-style:italic;"]);
+exports.SmallText = SmallText;
+var Arrow = _styledComponents.default.i.attrs({
+  className: 'ion ion-ios-arrow-down'
+}).withConfig({
+  displayName: "ChartLegendstyles__Arrow",
+  componentId: "sc-gh1vwu-9"
+})(["&&&{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;", "}"], function (props) {
+  return props.isOpened && "\n      transform: rotate(180deg);\n    ";
+});
+exports.Arrow = Arrow;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CheckboxPropTypes = exports.Checkbox = exports.CheckBoxCaption = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Checkbox = require("./Checkbox.styles");
+var _excluded = ["id", "name", "text", "label", "value", "checked", "large", "error", "touched", "onChange", "onBlur", "onFocus", "textStyle", "isTerms", "disabled", "onTermsClicked", "onClick"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var TermsStyled = _styledComponents.default.span.withConfig({
+  displayName: "Checkbox__TermsStyled",
+  componentId: "sc-knu01c-0"
+})(["cursor:pointer;font-size:12px;text-decoration:underline;&:hover{opacity:0.7;}"]);
+var CheckBoxCaption = _styledComponents.default.div.withConfig({
+  displayName: "Checkbox__CheckBoxCaption",
+  componentId: "sc-knu01c-1"
+})(["padding-top:12px;letter-spacing:0.4px;font-size:11px;font-weight:400;"]);
+exports.CheckBoxCaption = CheckBoxCaption;
+var Terms = function Terms(_ref) {
+  var onTermsClicked = _ref.onTermsClicked;
+  return /*#__PURE__*/_react.default.createElement(TermsStyled, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      onTermsClicked();
+    }
+  }, "Terms of Use");
+};
+
+// TODO: Refactor
+
+var Checkbox = function Checkbox(_ref2) {
+  var id = _ref2.id,
+    name = _ref2.name,
+    text = _ref2.text,
+    label = _ref2.label,
+    value = _ref2.value,
+    checked = _ref2.checked,
+    large = _ref2.large,
+    error = _ref2.error,
+    touched = _ref2.touched,
+    onChange = _ref2.onChange,
+    onBlur = _ref2.onBlur,
+    onFocus = _ref2.onFocus,
+    textStyle = _ref2.textStyle,
+    isTerms = _ref2.isTerms,
+    disabled = _ref2.disabled,
+    onTermsClicked = _ref2.onTermsClicked,
+    onClick = _ref2.onClick,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Checkbox.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Checkbox.Label, {
+    error: error && touched,
+    htmlFor: id
+  }, label), /*#__PURE__*/_react.default.createElement(_Checkbox.Input, {
+    error: error,
+    large: large,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.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.default.createElement("label", {
+    htmlFor: id,
+    style: textStyle
+  }, text, isTerms && /*#__PURE__*/_react.default.createElement(Terms, {
+    onTermsClicked: onTermsClicked,
+    onclick: "event.stopPropagation();"
+  }))));
+};
+exports.Checkbox = Checkbox;
+var CheckboxPropTypes = {
+  id: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string,
+  text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  label: _propTypes.default.string,
+  value: _propTypes.default.string,
+  checked: _propTypes.default.bool,
+  large: _propTypes.default.bool,
+  error: _propTypes.default.bool,
+  touched: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  textStyle: _propTypes.default.object
+};
+exports.CheckboxPropTypes = CheckboxPropTypes;
+Checkbox.propTypes = CheckboxPropTypes;
+Checkbox.defaultProps = {
+  name: '',
+  text: '',
+  label: '',
+  value: '',
+  checked: false,
+  large: false,
+  error: false,
+  touched: false,
+  onChange: function onChange() {},
+  onBlur: function onBlur() {},
+  onFocus: function onFocus() {},
+  textStyle: {}
+};
+var _default = Checkbox;
+exports.default = _default;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CheckboxUnchecked = exports.CheckboxChecked = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Checkbox = require("./Checkbox");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import { Wrapper, Label, InputWrap } from './Input.styles'
+// import { useState } from 'react'
+var _default = {
+  title: 'Components Library/Checkbox',
+  component: _Checkbox.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'
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, args)));
+};
+var CheckboxUnchecked = Template.bind({});
+exports.CheckboxUnchecked = CheckboxUnchecked;
+CheckboxUnchecked.args = {
+  label: 'A Label'
+};
+var CheckboxChecked = Template.bind({});
+exports.CheckboxChecked = CheckboxChecked;
+CheckboxChecked.args = {
+  label: 'A Label',
+  checked: true
+};

package/dist/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Label = exports.Input = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Input = require("../Input/Input.styles");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Checkboxstyles__Wrapper",
+  componentId: "sc-1drozoj-0"
+})(["position:relative;display:block;"]);
+exports.Wrapper = Wrapper;
+var Label = (0, _styledComponents.default)(_Input.Label).withConfig({
+  displayName: "Checkboxstyles__Label",
+  componentId: "sc-1drozoj-1"
+})(["position:relative;top:0;transform:none;font-size:10px;margin-bottom:5px;"]);
+exports.Label = Label;
+var Input = _styledComponents.default.div.withConfig({
+  displayName: "Checkboxstyles__Input",
+  componentId: "sc-1drozoj-2"
+})(["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;", ";&: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;", " ", "}&: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;", ";}}&:focus + label,&:hover + label{&:before{border-color:", ";}}&:checked + label{&:after{color:", ";}}}"], function (props) {
+  return props.error && "color: ".concat(_theme.default.cWarning);
+}, function (props) {
+  return props.large && "\n          width: 20px;\n          height: 20px;\n          border-radius: 4px;\n        ";
+}, function (props) {
+  return props.disabled && "\n            background-color: #9b9b9b30;\n\n        ";
+}, function (props) {
+  return props.large && "\n          top: 0;\n          left: 0;\n          width: 20px;\n          height: 20px;\n          font-size: 34px;\n          line-height: 20px;\n        ";
+}, function (props) {
+  return props.disabled ? 'none' : _theme.default.cPrimary;
+}, function (props) {
+  return _theme.default.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;
+exports.Input = Input;