@stokr/components-library 0.5.4 → 0.5.6

package/dist/ComponentWrapper/ComponentWrapper.styles.js

@@ -0,0 +1,128 @@
+import styled, { css } from 'styled-components/macro';
+import rwd from 'styles/rwd';
+import theme from 'styles/theme';
+export const ComponentWrapper = styled.div`
+  position: relative;
+  padding: 32px;
+ // text-align left only from ID
+      text-align: left !important;
+   
+
+  ${rwd.Large`
+    padding: 32px 64px;
+  `}
+
+  ${props => props.borderLeft && css`
+      border-left: 1px solid ${theme.cLightGrey};
+    `}
+
+  ${props => props.borderRight && css`
+      border-right: 1px solid ${theme.cLightGrey};
+    `}
+
+  ${props => props.borderTop && css`
+      border-top: 1px solid ${theme.cLightGrey};
+    `}
+
+  ${props => props.borderBottom && css`
+      border-bottom: 1px solid ${theme.cLightGrey};
+    `}
+
+  ${props => props.noPaddingLeft && css`
+      padding-left: 0 !important;
+    `}
+
+  ${props => props.noPaddingRight && css`
+      padding-right: 0 !important;
+    `}
+
+  ${props => props.noPaddingTop && css`
+      padding-top: 0 !important;
+    `}
+
+  ${props => props.noPaddingBottom && css`
+      padding-bottom: 0 !important;
+    `}
+
+  ${props => props.noPaddingVertical && css`
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+    `}
+
+  ${props => props.horizontalPaddingHalf && css`
+      padding-left: 18px !important;
+      padding-right: 18px !important;
+    `}
+
+  ${props => props.noPaddingHorizontal && css`
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    `}
+
+  ${props => props.paddingVeticalHalf && css`
+      padding-top: 16px !important;
+      padding-bottom: 16px !important;
+    `}
+
+  ${props => props.noPadding && css`
+      padding: 0 !important;
+    `}
+
+  ${props => props.center && css`
+      text-align: center !important;
+    `}
+
+  ${props => props.grow && css`
+      flex-grow: 1;
+    `}
+
+  ${props => props.wrap && css`
+      flex-wrap: wrap;
+    `}
+
+  ${props => props.background && css`
+      background-color: ${theme.cGrey};
+    `}
+
+  ${props => props.fluid && css`
+      width: 100%;
+    `}
+    
+      ${props => props.fluidcenter && css`
+          width: 100% !important;
+          text-align: center !important;
+        `}
+  
+  h4 {
+    width: 50%;
+
+    @media screen and (max-width: 767px) {
+      width: 100%;
+    }
+  }
+
+  @media screen and (max-width: 767px) {
+    padding: 32px;
+
+    ${props => props.investmentNotifications && css`
+        padding: 0;
+      `}
+  }
+
+  ${props => props.alignVertically && css`
+      display: flex;
+      align-items: center;
+    `}
+
+  ${props => props.marginTop && css`
+      margin-top: ${props.marginTop};
+    `}
+
+    ${props => props.isAddMember && css`
+        @media screen and (min-width: 768px) {
+          padding-left: 10px !important;
+          padding-right: 10px !important;
+        }
+      `}
+`;
+export default ComponentWrapper;

package/dist/CryptoAddress/ComponentWrap.js

@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+export const ComponentWrap = ({
+  children,
+  wrapped,
+  borderTop,
+  borderBottom
+}) => wrapped ? /*#__PURE__*/React.createElement(ComponentWrapper, {
+  borderTop: borderTop,
+  borderBottom: borderBottom
+}, children) : /*#__PURE__*/React.createElement(Fragment, null, children);
+ComponentWrap.propTypes = {
+  children: PropTypes.node.isRequired,
+  wrapped: PropTypes.bool,
+  borderTop: PropTypes.bool,
+  borderBottom: PropTypes.bool
+};
+ComponentWrap.defaultProps = {
+  wrapped: false,
+  borderTop: false,
+  borderBottom: false
+};
+export default ComponentWrap;

package/dist/CryptoAddress/CryptoAddress.js

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from 'react-tippy';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { Container, Head, Body, Title, Status, TitleSide, AddressWrap, Address, CopyToClipboardButton, DataBox, Value, Equal, InfoBox, DataWrapper, CheckMark, OptionsWrapper } from './CryptoAddress.styles';
+
+// import './tooltip.css' is added in SUF which file? where?
+import RadioWrap from './RadioWrap';
+import ComponentWrap from './ComponentWrap';
+import getShortAddress from '../../utils/get-short-address';
+export const CryptoAddress = ({
+  title,
+  status,
+  address,
+  data,
+  info,
+  wrapped,
+  borderTop,
+  borderBottom,
+  radio,
+  sideOptions,
+  src,
+  //merge from SUF
+  noBody,
+  noBorderBottom,
+  flexHead,
+  //merge from IIS
+  fontSize,
+  titleColor
+}) => {
+  const [copiedAddressToClipboard, setCopiedAddressToClipboard] = useState(false);
+  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(RadioWrap, {
+    radio: radio
+  }, /*#__PURE__*/React.createElement(ComponentWrap, {
+    wrapped: wrapped,
+    borderTop: borderTop,
+    borderBottom: !noBorderBottom && borderBottom
+  }, /*#__PURE__*/React.createElement(DataWrapper, {
+    withOptions: !!sideOptions
+  }, radio && !radio.hide && /*#__PURE__*/React.createElement(CheckMark, null), /*#__PURE__*/React.createElement(Head, {
+    noBody: noBody,
+    flexHead: flexHead
+  }, /*#__PURE__*/React.createElement(Title, {
+    color: titleColor
+  }, title, status && /*#__PURE__*/React.createElement(Status, null, status)), /*#__PURE__*/React.createElement(TitleSide, null, address && /*#__PURE__*/React.createElement(AddressWrap, null, /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    title: address,
+    theme: "light",
+    arrow: true,
+    duration: 200
+  }, /*#__PURE__*/React.createElement(Address, null, getShortAddress(address))), /*#__PURE__*/React.createElement("div", {
+    onClick: e => e.preventDefault()
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    title: copiedAddressToClipboard ? 'Copied to clipboard!' : 'Click to copy address to clipboard',
+    theme: "light",
+    arrow: true,
+    hideOnClick: false,
+    onHidden: () => setCopiedAddressToClipboard(false),
+    duration: 200
+  }, /*#__PURE__*/React.createElement(CopyToClipboard, {
+    text: address,
+    onCopy: () => setCopiedAddressToClipboard(true)
+  }, /*#__PURE__*/React.createElement(CopyToClipboardButton, null))))), src && /*#__PURE__*/React.createElement("img", {
+    src: src,
+    alt: "project logo",
+    height: "50",
+    width: 100,
+    style: {
+      objectFit: 'contain'
+    }
+  }))), /*#__PURE__*/React.createElement(Body, {
+    noBody: noBody
+  }, /*#__PURE__*/React.createElement(DataBox, null, data.value && /*#__PURE__*/React.createElement(Value, null, data.unit && `${data.unit} `, data.value), data.eqValue && /*#__PURE__*/React.createElement(Equal, null, '= ', data.eqUnit && `${data.eqUnit} `, data.eqValue)), /*#__PURE__*/React.createElement(InfoBox, null, /*#__PURE__*/React.createElement(Value, null, info.unit && /*#__PURE__*/React.createElement("strong", null, info.unit), info.value), info.eqValue && /*#__PURE__*/React.createElement(Equal, null, info.noEqualsToSign ? ' ' : '= ', info.eqUnit && /*#__PURE__*/React.createElement("strong", null, info.eqUnit), info.eqValue))), sideOptions && /*#__PURE__*/React.createElement(OptionsWrapper, null, sideOptions)))));
+};
+const dataShape = PropTypes.shape({
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  unit: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  eqValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  eqUnit: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+});
+CryptoAddress.propTypes = {
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string,
+  address: PropTypes.string.isRequired,
+  wrapped: PropTypes.bool,
+  borderTop: PropTypes.bool,
+  borderBottom: PropTypes.bool,
+  radio: RadioWrap.propTypes.radio,
+  data: dataShape,
+  info: dataShape,
+  sideOptions: PropTypes.node,
+  // fontSize from IIS
+  fontSize: PropTypes.number
+};
+//address not required in IIS, instead wrapping {address &&( .. now doing both which is redundant
+
+CryptoAddress.defaultProps = {
+  status: '',
+  wrapped: false,
+  borderTop: false,
+  borderBottom: false,
+  radio: null,
+  address: '',
+  data: {
+    value: '',
+    unit: '',
+    eqValue: '',
+    eqUnit: ''
+  },
+  info: {
+    value: '',
+    unit: '',
+    eqValue: '',
+    eqUnit: ''
+  },
+  // fontSize from IIS
+  fontSize: 22,
+  sideOptions: null
+};
+export const MemoCryptoAddress = /*#__PURE__*/React.memo(CryptoAddress);
+export default CryptoAddress;
+
+//defaultValue of info: { value:'-'} in ISS and VD

package/dist/CryptoAddress/CryptoAddress.stories.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import CryptoAddress from './CryptoAddress';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+export default {
+  title: 'Components Library/Crypto Address',
+  component: CryptoAddress,
+  argTypes: {
+    title: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    status: {
+      type: 'string',
+      defaultValue: ''
+    },
+    address: {
+      type: 'string',
+      defaultValue: '',
+      required: true
+    },
+    capital: {
+      type: 'number',
+      defaultValue: 0,
+      required: true
+    },
+    wrapped: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    borderTop: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    borderBottom: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    radio: {
+      type: 'shape',
+      defaultValue: null
+    },
+    data: {
+      type: 'shape',
+      defaultValue: {}
+    },
+    info: {
+      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.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(CryptoAddress, args));
+export const CryptoAddressOverview = Template.bind({});
+CryptoAddressOverview.args = {
+  title: 'A Title',
+  status: 'Status',
+  address: 'Address',
+  capital: 100,
+  data: {
+    value: '1',
+    unit: '€',
+    eqValue: '2',
+    eqUnit: '$'
+  },
+  info: {
+    value: '3',
+    unit: '$',
+    eqValue: '4',
+    eqUnit: '€'
+  }
+};
+export const 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
+};
+export const 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