@stokr/components-library/dist/components/CryptoAddress/CryptoAddress.stories.js

STOKR - Components Library

"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(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.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,
//   }),
// }
const Template = args => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_CryptoAddress.default, args));
const CryptoAddressOverview = exports.CryptoAddressOverview = Template.bind({});
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: '€'
  }
};
const CryptoAddressBorders = exports.CryptoAddressBorders = Template.bind({});
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
};
const CryptoAddressRadioWrap = exports.CryptoAddressRadioWrap = Template.bind({});
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: () => {}
  }
};

//  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