@stokr/components-library 1.0.9 → 1.1.1

package/dist/components/CryptoAddress/CryptoAddress.stories.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CryptoAddressRadioWrap = exports.CryptoAddressOverview = exports.CryptoAddressBorders = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CryptoAddress = _interopRequireDefault(require("./CryptoAddress"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Crypto Address',
+  component: _CryptoAddress.default,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    status: {
+      type: 'string',
+      defaultValue: ''
+    },
+    address: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    titleColor: {
+      type: 'string',
+      defaultValue: ''
+    },
+    capital: {
+      type: 'number',
+      defaultValue: 0,
+      required: true
+    },
+    fontSize: {
+      type: 'number',
+      defaultValue: 22
+    },
+    eqValueFontSize: {
+      type: 'number',
+      defaultValue: 9
+    },
+    wrapped: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    borderTop: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    noHead: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    noBody: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    flexHead: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    borderBottom: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    radio: {
+      type: 'shape',
+      defaultValue: null
+    },
+    data: {
+      type: 'shape',
+      defaultValue: {}
+    },
+    info: {
+      type: 'shape',
+      defaultValue: {}
+    },
+    dataBoxStyle: {
+      type: 'shape',
+      defaultValue: {}
+    },
+    headStyle: {
+      type: 'shape',
+      defaultValue: {}
+    },
+    infoBoxStyle: {
+      type: 'shape',
+      defaultValue: {}
+    },
+    sideOptions: {
+      type: 'node',
+      defaultValue: null
+    }
+  }
+}; //  info & data Shape defaults {
+//     value: '',
+//     unit: '',
+//     eqValue: '',
+//     eqUnit: '',
+//   },
+//  From Radiowrap.js - Radio shape
+//   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,
+//   }),
+// }
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_CryptoAddress.default, args));
+};
+var CryptoAddressOverview = Template.bind({});
+exports.CryptoAddressOverview = CryptoAddressOverview;
+CryptoAddressOverview.args = {
+  title: 'A Title',
+  status: 'Status',
+  address: 'Address',
+  capital: 100,
+  data: {
+    value: '1',
+    unit: '€',
+    eqValue: '2',
+    eqUnit: '$',
+    tooltip: true
+  },
+  info: {
+    value: '3',
+    unit: '$',
+    eqValue: '4',
+    eqUnit: '€'
+  }
+};
+var CryptoAddressBorders = Template.bind({});
+exports.CryptoAddressBorders = CryptoAddressBorders;
+CryptoAddressBorders.args = {
+  title: 'A Title',
+  status: 'Status',
+  address: 'Address',
+  capital: 100,
+  data: {
+    value: '1',
+    unit: '€',
+    eqValue: '2',
+    eqUnit: '$'
+  },
+  info: {
+    value: '3',
+    unit: '$',
+    eqValue: '4',
+    eqUnit: '€'
+  },
+  wrapped: true,
+  borderTop: true,
+  borderBottom: true
+};
+var CryptoAddressRadioWrap = Template.bind({});
+exports.CryptoAddressRadioWrap = CryptoAddressRadioWrap;
+CryptoAddressRadioWrap.args = {
+  title: 'A Title',
+  status: 'Status',
+  address: 'Address',
+  capital: 100,
+  data: {
+    value: '1',
+    unit: '€',
+    eqValue: '2',
+    eqUnit: '$'
+  },
+  info: {
+    value: '3',
+    unit: '$',
+    eqValue: '4',
+    eqUnit: '€'
+  },
+  wrapped: true,
+  borderTop: true,
+  borderBottom: true,
+  radio: {
+    id: '',
+    name: 'hover to see',
+    value: 'radiochoice',
+    checked: true,
+    hide: false,
+    onChange: function onChange() {}
+  }
+};
+
+//  From Radiowrap.js - Radio shape
+//   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,
+//   }),
+// }
+
+// doublecheck:
+// weird 'Address' showing up
+// radio checked not working

package/dist/components/CryptoAddress/CryptoAddress.styles.js

@@ -0,0 +1,191 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Value = exports.TitleSide = exports.Title = exports.TableAddress = exports.Status = exports.Radio = exports.OptionsWrapper = exports.InfoBox = exports.Head = exports.Equal = exports.DataWrapper = exports.DataBox = exports.CryptoAddressToggle = exports.CryptoAddressOptionIcon = exports.CryptoAddressOption = exports.CopyToClipboardButton = exports.Container = exports.CheckMark = exports.Body = exports.AddressWrap = exports.Address = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _Icon = _interopRequireWildcard(require("../Icon/Icon.style"));
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject, _templateObject2;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__Container",
+  componentId: "sc-1wjvdgu-0"
+})(["position:relative;"]);
+exports.Container = Container;
+var Head = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__Head",
+  componentId: "sc-1wjvdgu-1"
+})(["position:relative;margin-bottom:5px;&:after{content:'';display:block;width:100%;height:0;clear:both;}", " ", " ", ""], function (_ref) {
+  var noBody = _ref.noBody;
+  return noBody && "margin-bottom: 0";
+}, function (_ref2) {
+  var flexHead = _ref2.flexHead;
+  return flexHead && "\n         display:flex;\n         justify-content:space-between;\n         align-items:center;\n         flex-wrap:wrap;\n         ";
+}, function (_ref3) {
+  var noHead = _ref3.noHead;
+  return noHead && "display: none";
+});
+//think I took flexhead out of CL ..
+//seems it is something passed from Algorand
+//so leaving it here
+exports.Head = Head;
+var Body = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__Body",
+  componentId: "sc-1wjvdgu-2"
+})(["position:relative;&:after{content:'';display:block;width:100%;height:0;clear:both;}", ""], function (_ref4) {
+  var noBody = _ref4.noBody;
+  return noBody && "display: none";
+});
+exports.Body = Body;
+var Title = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__Title",
+  componentId: "sc-1wjvdgu-3"
+})(["float:left;font-weight:bold;font-size:11px;line-height:24px;letter-spacing:2px;text-transform:uppercase;padding-right:20px;color:", ";"], function (props) {
+  return props.color;
+});
+exports.Title = Title;
+var Status = _styledComponents.default.span.withConfig({
+  displayName: "CryptoAddressstyles__Status",
+  componentId: "sc-1wjvdgu-4"
+})(["display:inline-block;vertical-align:top;padding:0px 16px;background-color:", ";color:", ";font-weight:600;font-size:8px;letter-spacing:1.78px;line-height:16px;border-radius:8px;margin-left:12px;margin-top:4px;"], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return _theme.default.cWhite;
+});
+exports.Status = Status;
+var TitleSide = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__TitleSide",
+  componentId: "sc-1wjvdgu-5"
+})(["display:block;float:right;margin:4px 0;width:40%;"]);
+exports.TitleSide = TitleSide;
+var AddressWrap = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__AddressWrap",
+  componentId: "sc-1wjvdgu-6"
+})(["display:flex;align-items:center;"]);
+exports.AddressWrap = AddressWrap;
+var Address = _styledComponents.default.span.withConfig({
+  displayName: "CryptoAddressstyles__Address",
+  componentId: "sc-1wjvdgu-7"
+})(["display:block;font-weight:600;font-size:11px;line-height:16px;margin-right:6px;color:", ";transition:color 0.2s;cursor:pointer;&:before{content:'\\f3d1';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;font-size:12px;line-height:8px;display:inline-block;width:8px;height:8px;margin-right:6px;}&:hover{color:", ";}"], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return _theme.default.cPrimary;
+});
+// TableAddress from VD
+exports.Address = Address;
+var TableAddress = _styledComponents.default.span.withConfig({
+  displayName: "CryptoAddressstyles__TableAddress",
+  componentId: "sc-1wjvdgu-8"
+})(["line-height:16px;cursor:pointer;&:hover{color:", ";}"], function (props) {
+  return _theme.default.cPrimary;
+});
+exports.TableAddress = TableAddress;
+var CopyToClipboardButton = (0, _styledComponents.default)(_reactFontawesome.FontAwesomeIcon).attrs({
+  icon: _freeSolidSvgIcons.faCopy
+}).withConfig({
+  displayName: "CryptoAddressstyles__CopyToClipboardButton",
+  componentId: "sc-1wjvdgu-9"
+})(["color:", ";cursor:pointer;"], function (props) {
+  return _theme.default.black;
+});
+exports.CopyToClipboardButton = CopyToClipboardButton;
+var DataBox = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__DataBox",
+  componentId: "sc-1wjvdgu-10"
+})(["float:left;"]);
+exports.DataBox = DataBox;
+var InfoBox = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__InfoBox",
+  componentId: "sc-1wjvdgu-11"
+})(["float:right;width:40%;@media (max-width:430px){width:100%;padding-top:14px;text-align:start;}"]);
+exports.InfoBox = InfoBox;
+var Value = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__Value",
+  componentId: "sc-1wjvdgu-12"
+})(["position:relative;font-weight:300;font-size:22px;font-size:", "px;line-height:28px;letter-spacing:0.4px;strong{font-weight:normal;&:after{content:' ';}}& > div{display:inline-block;margin-left:30px;& svg{max-width:16px;max-height:16px;}}"], function (props) {
+  return props.fontSize;
+});
+exports.Value = Value;
+var Equal = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__Equal",
+  componentId: "sc-1wjvdgu-13"
+})(["position:relative;font-size:9px;font-size:", "px;font-style:italic;line-height:16px;letter-spacing:0.4px;margin-top:8px;"], function (props) {
+  return props.fontSize;
+});
+exports.Equal = Equal;
+var DataWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__DataWrapper",
+  componentId: "sc-1wjvdgu-14"
+})(["position:relative;padding-right:24px;", ""], _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  \n  "])), function (props) {
+  return props.withOptions && "\n      padding-right: 100px;\n\n      ".concat(TitleSide, " {\n        width: 50%;\n      }\n\n      ").concat(InfoBox, " {\n        width: 50%;\n      }\n    ");
+}));
+exports.DataWrapper = DataWrapper;
+var CheckMark = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__CheckMark",
+  componentId: "sc-1wjvdgu-15"
+})(["position:absolute;display:block;width:14px;height:14px;top:50%;right:0;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:", ";box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);}"], function (props) {
+  return _theme.default.cPrimary;
+});
+exports.CheckMark = CheckMark;
+var Radio = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__Radio",
+  componentId: "sc-1wjvdgu-16"
+})(["& > input{", ";z-index:-1;position:absolute;top:4px;left:4px;display:block;width:1px;height:0;opacity:0;border:0;& + label{display:block;position:relative;", ";&: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;}", "{border-color:", "!important;background-color:", "!important;}}&:checked + label{&:before{background-color:", "!important;}", "{&: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:", ";}", "{border-color:", ";}}}"], function (props) {
+  return props.hide && 'visibility: hidden';
+}, function (props) {
+  return !props.disabled && 'cursor: pointer';
+}, CheckMark, function (props) {
+  return _theme.default.cLightGrey;
+}, function (props) {
+  return _theme.default.cGrey;
+}, function (props) {
+  return _theme.default.cWarning;
+}, CheckMark, function (props) {
+  return _theme.default.cLightGrey;
+}, CheckMark, function (props) {
+  return _theme.default.cPrimary;
+});
+exports.Radio = Radio;
+var OptionsWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressstyles__OptionsWrapper",
+  componentId: "sc-1wjvdgu-17"
+})(["text-align:center;margin-right:-24px;", ""], _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-right: 0;\n    position: absolute;\n    display: block;\n    width: 100px;\n    top: 50%;\n    right: 0;\n    text-align:center;\n    transform: translate(0, -50%);  \n  "]))));
+exports.OptionsWrapper = OptionsWrapper;
+var CryptoAddressOption = _styledComponents.default.button.withConfig({
+  displayName: "CryptoAddressstyles__CryptoAddressOption",
+  componentId: "sc-1wjvdgu-18"
+})(["display:inline-block;position:relative;width:40px;height:40px;outline:none;margin-left:10px;border:1px solid ", ";border-radius:20px;color:", ";transition:color 0.2s;&:focus,&:hover{color:", ";}"], function (props) {
+  return _theme.default.cLightGrey;
+}, function (props) {
+  return _theme.default.cWarning;
+}, function (props) {
+  return _theme.default.cPrimary;
+});
+exports.CryptoAddressOption = CryptoAddressOption;
+var CryptoAddressOptionIcon = (0, _styledComponents.default)(_Icon.default).withConfig({
+  displayName: "CryptoAddressstyles__CryptoAddressOptionIcon",
+  componentId: "sc-1wjvdgu-19"
+})(["position:absolute;top:50%;left:50%;width:16px;height:16px;font-size:16px;line-height:16px;margin-top:-8px;margin-left:-8px;text-align:center;", ""], function (props) {
+  return props.large && "\n    width: 20px;\n    height: 20px;\n    font-size: 20px;\n    line-height: 20px;\n    margin-top: -10px;\n    margin-left: -10px;\n  ";
+});
+exports.CryptoAddressOptionIcon = CryptoAddressOptionIcon;
+var CryptoAddressToggle = _styledComponents.default.button.withConfig({
+  displayName: "CryptoAddressstyles__CryptoAddressToggle",
+  componentId: "sc-1wjvdgu-20"
+})(["display:inline-block;position:relative;width:40px;height:40px;outline:none;margin-left:10px;border-radius:20px;color:", ";transition:color 0.2s;transform:translateZ(0);&:focus,&:hover{color:", ";}&:before{content:'", "';position:absolute;top:50%;left:50%;width:16px;height:16px;font-size:16px;line-height:16px;margin-top:-8px;margin-left:-8px;font-family:'icomoon' !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;transition:transform 0.2s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}", ""], function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return _theme.default.cPrimary;
+}, _Icon.iconsMap.arrowDown, function (props) {
+  return props.isActive && "\n    &:before {\n      transform: rotate(180deg);\n    }\n  ";
+});
+exports.CryptoAddressToggle = CryptoAddressToggle;

package/dist/components/CryptoAddress/RadioWrap.js

@@ -0,0 +1,56 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RadioWrap = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CryptoAddress = require("./CryptoAddress.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var RadioWrap = function RadioWrap(_ref) {
+  var children = _ref.children,
+    radio = _ref.radio;
+  var handleOnClick = function handleOnClick(e) {
+    if (radio) {
+      radio.handleCheckedAddressRadio(e.target.id);
+      radio.handleSelectedCryptoAddress(radio.address);
+    }
+  };
+  return radio ? /*#__PURE__*/_react.default.createElement(_CryptoAddress.Radio, {
+    hide: radio.hide
+  }, /*#__PURE__*/_react.default.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,
+    onClick: handleOnClick
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: radio.id
+  }, children)) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);
+};
+exports.RadioWrap = RadioWrap;
+RadioWrap.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  radio: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string,
+    value: _propTypes.default.string,
+    checked: _propTypes.default.bool,
+    onChange: _propTypes.default.func,
+    onBlur: _propTypes.default.func,
+    hide: _propTypes.default.bool
+  })
+};
+RadioWrap.defaultProps = {
+  radio: null
+};
+var _default = RadioWrap;
+exports.default = _default;

package/dist/components/CryptoAddressDetails/CryptoAddressDetails.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CryptoAddressDetails = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _CryptoAddressDetails = require("./CryptoAddressDetails.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var CryptoAddressDetails = function CryptoAddressDetails(_ref) {
+  var data = _ref.data;
+  return /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Container, null, /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Row, {
+    head: true
+  }, /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Column, {
+    tokens: true
+  }, "Tokens"), /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Column, {
+    balance: true
+  }, "Balance"), /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Column, {
+    transfer: true
+  })), data.map(function (datum) {
+    return /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Row, {
+      key: datum.id
+    }, /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Column, {
+      tokens: true,
+      nameBox: true
+    }, /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Avatar, null, /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.AvatarImg, {
+      src: datum.avatar,
+      alt: "avatar"
+    })), /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Name, null, datum.name)), /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Column, {
+      balance: true,
+      balanceText: true
+    }, datum.balance), /*#__PURE__*/_react.default.createElement(_CryptoAddressDetails.Column, {
+      transfer: true
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      outline: true,
+      fluid: true,
+      onClick: datum.transferClick
+    }, "Transfer")));
+  }));
+};
+exports.CryptoAddressDetails = CryptoAddressDetails;
+CryptoAddressDetails.propTypes = {
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.number,
+    avatar: _propTypes.default.string,
+    name: _propTypes.default.string,
+    balance: _propTypes.default.string,
+    transferClick: _propTypes.default.func
+  })).isRequired
+};
+var _default = CryptoAddressDetails;
+exports.default = _default;

package/dist/components/CryptoAddressDetails/CryptoAddressDetails.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CryptoAddressDetailsOverview = exports.CryptoAddressDetailsExamples = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CryptoAddressDetails = _interopRequireDefault(require("./CryptoAddressDetails"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Crypto Address Details',
+  component: _CryptoAddressDetails.default,
+  argTypes: {
+    data: {
+      type: 'shape',
+      defaultValue: [{
+        id: {
+          type: 'number'
+        }
+      }, {
+        transferClick: {
+          type: 'function',
+          action: 'transferClick'
+        }
+      }]
+    }
+  }
+}; //  data Shape ---
+//  data: PropTypes.arrayOf(
+// PropTypes.shape({
+//   id: PropTypes.number,
+//   avatar: PropTypes.string,
+//   name: PropTypes.string,
+//   balance: PropTypes.string,
+//   transferClick: PropTypes.func,
+// }),
+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(_CryptoAddressDetails.default, args)));
+};
+var CryptoAddressDetailsOverview = Template.bind({});
+exports.CryptoAddressDetailsOverview = CryptoAddressDetailsOverview;
+CryptoAddressDetailsOverview.args = {
+  data: [{
+    id: 1,
+    avatar: 'My Avatar',
+    name: 'Name',
+    balance: '€0'
+  }]
+};
+var CryptoAddressDetailsExamples = Template.bind({});
+exports.CryptoAddressDetailsExamples = CryptoAddressDetailsExamples;
+CryptoAddressDetailsExamples.args = {
+  data: [{
+    id: 1,
+    avatar: 'Face1',
+    name: 'John Doe',
+    balance: '€1234'
+  }, {
+    id: 1,
+    avatar: 'Face2',
+    name: 'Jennifer Doe',
+    balance: '€5678'
+  }, {
+    id: 1,
+    avatar: 'Face2',
+    name: 'Jackie Dough',
+    balance: '€91011'
+  }]
+};
+
+//doubleCheck:
+//action / function not working

package/dist/components/CryptoAddressDetails/CryptoAddressDetails.styles.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Row = exports.Name = exports.Container = exports.Column = exports.AvatarImg = exports.Avatar = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _grid = _interopRequireDefault(require("../../styles/grid"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Container = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressDetailsstyles__Container",
+  componentId: "sc-1aj5egi-0"
+})(["position:relative;"]);
+exports.Container = Container;
+var Row = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressDetailsstyles__Row",
+  componentId: "sc-1aj5egi-1"
+})(["background-color:", ";color:", ";padding:22px 32px;", " ", " &:nth-child(n+3){border-top:1px solid #003e9d;}"], function (props) {
+  return _theme.default.cPrimaryDark;
+}, function (props) {
+  return _theme.default.cWhite;
+}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 22px ", ";\n  "])), (0, _grid.default)(1.5)), function (props) {
+  return props.head && "\n    display: none;\n    background-color: ".concat(_theme.default.cPrimary, ";\n    color: #ffffff;\n    font-size: 11px;\n    line-height: 24px;\n    letter-spacing: 2.06px;\n    text-transform: uppercase;\n    min-height: 56px;\n    padding: 10px 32px;\n\n    ").concat(_rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      padding: 10px ", ";\n    "])), (0, _grid.default)(1.5)), "\n  ");
+});
+exports.Row = Row;
+var Column = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressDetailsstyles__Column",
+  componentId: "sc-1aj5egi-2"
+})(["", " ", " ", " ", " ", ""], function (props) {
+  return props.balance && "\n    margin-top: 20px;\n  ";
+}, function (props) {
+  return props.transfer && "\n    margin-top: 20px;\n  ";
+}, _rwd.default.Medium(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: inline-block;\n\n    ", "\n      \n    ", "\n      \n    ", "\n\n    ", "\n  "])), function (props) {
+  return props.tokens && "\n      width: 40%;\n      padding-right: 10px;\n    ";
+}, function (props) {
+  return props.balance && "\n      width: 30%;\n      padding-right: 10px;\n      margin-top: 0;\n    ";
+}, function (props) {
+  return props.transfer && "\n      width: 30%;\n      margin-top: 0;\n    ";
+}, function (props) {
+  return props.nameBox && "\n      display: flex;\n    ";
+}), function (props) {
+  return props.balanceText && "\n    font-weight: 300;\n    font-size: 22px;\n    line-height: 28px;\n    letter-spacing: 0.8px;\n    text-transform: uppercase;\n  ";
+}, function (props) {
+  return props.nameBox && "\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n  ";
+});
+exports.Column = Column;
+var Avatar = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressDetailsstyles__Avatar",
+  componentId: "sc-1aj5egi-3"
+})(["display:inline-block;width:48px;height:48px;border-radius:24px;background-color:", ";overflow:hidden;box-shadow:0 1px 8px 0 rgba(0,0,0,0.1);"], function (props) {
+  return _theme.default.cPrimary;
+});
+exports.Avatar = Avatar;
+var AvatarImg = _styledComponents.default.img.withConfig({
+  displayName: "CryptoAddressDetailsstyles__AvatarImg",
+  componentId: "sc-1aj5egi-4"
+})(["display:block;width:100%;height:100%;object-fit:cover;object-position:center center;"]);
+exports.AvatarImg = AvatarImg;
+var Name = _styledComponents.default.div.withConfig({
+  displayName: "CryptoAddressDetailsstyles__Name",
+  componentId: "sc-1aj5egi-5"
+})(["display:inline-block;margin-left:26px;font-weight:600;font-size:16px;line-height:24px;letter-spacing:0.6px;word-break:break-all;"]);
+exports.Name = Name;