@stokr/components-library 0.5.3 → 0.5.5

package/dist/SigningSubflow/SignSubSendMetamask.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from 'components/Button/Button.styles';
+import TransactionInfo from 'components/TransactionInfo/TransactionInfo';
+import TransactionDetails from 'components/TransactionDetails/TransactionDetails';
+import FAQ from 'components/FAQ/FAQ';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+import { SignSubText } from './_styles';
+const SignSubSendMetamask = ({
+  changeStep
+}) => /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Invest in TYKN")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+  noPaddingVertical: true
+}, /*#__PURE__*/React.createElement(SignSubText, null, /*#__PURE__*/React.createElement("h3", null, "Unable to send transaction"), /*#__PURE__*/React.createElement("p", null, 'STOKR couldn’t send the transaction, please try again.'))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+  noPaddingBottom: true
+}, /*#__PURE__*/React.createElement(TransactionInfo, {
+  value1: "1.00000000",
+  unit1: "ETH",
+  name1: "Ethereum01",
+  owner1: "(you)",
+  address1: "0x1CC31c07710B7A6b75dE2DEeCB0d6A63B58A67C0",
+  value2: "150.000000",
+  unit2: "TYK",
+  name2: "TYKN",
+  owner2: "",
+  address2: "0x1CC31c07710B7A6b75dE2DEeCB0d6A63B58A67C0"
+}), /*#__PURE__*/React.createElement(TransactionDetails, {
+  data: [{
+    label: 'account balance',
+    value: '15.000000000 ETH',
+    valueInfo: '(before investment)'
+  }, {
+    label: 'gas limit',
+    value: '21000'
+  }, {
+    label: 'gas price',
+    value: '41 GWEI (0.0000000041 ETH)'
+  }, {
+    label: 'max tx fee',
+    value: '0.000861 ETH (861000 GWEI)'
+  }]
+})), /*#__PURE__*/React.createElement(ComponentWrapper, {
+  center: true
+}, /*#__PURE__*/React.createElement(Button, {
+  minWidth: "240px",
+  onClick: changeStep
+}, "Try again"))));
+SignSubSendMetamask.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default SignSubSendMetamask;

package/dist/SigningSubflow/SignSubTransactionLedger.js

@@ -0,0 +1,125 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Button from 'components/Button/Button.styles';
+import TransactionInfo from 'components/TransactionInfo/TransactionInfo';
+import TransactionDetails from 'components/TransactionDetails/TransactionDetails';
+import FAQ from 'components/FAQ/FAQ';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import Tabs, { Tab } from 'components/Tabs/Tabs';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+import hddIcon from 'static/images/hdd.png';
+import { SignSubText } from './_styles';
+class SignSubTransactionLedger extends PureComponent {
+  state = {
+    step: 1
+  };
+  onContinueClick = () => {
+    const {
+      changeStep
+    } = this.props;
+    changeStep && changeStep();
+  };
+  setStep = step => {
+    this.setState({
+      step
+    });
+  };
+  render() {
+    const {
+      step
+    } = this.state;
+    return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Invest in TYKN")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true
+    }, /*#__PURE__*/React.createElement(SignSubText, null, /*#__PURE__*/React.createElement("h3", null, "Review & sign transaction"))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true,
+      center: true
+    }, /*#__PURE__*/React.createElement("img", {
+      src: hddIcon,
+      alt: "HDD"
+    })), /*#__PURE__*/React.createElement(Tabs, {
+      activeTab: step
+    }, /*#__PURE__*/React.createElement(Tab, {
+      tabId: 1
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(SignSubText, null, /*#__PURE__*/React.createElement("p", null, 'Please review your transaction details below. Then press sign transaction and follow the instructions on your Ledger device.'))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(TransactionInfo, {
+      value1: "1.00000000",
+      unit1: "ETH",
+      name1: "Ethereum01",
+      owner1: "(you)",
+      address1: "0x1CC31c07710B7A6b75dE2DEeCB0d6A63B58A67C0",
+      value2: "150.000000",
+      unit2: "TYK",
+      name2: "TYKN",
+      owner2: "",
+      address2: "0x1CC31c07710B7A6b75dE2DEeCB0d6A63B58A67C0"
+    }), /*#__PURE__*/React.createElement(TransactionDetails, {
+      data: [{
+        label: 'account balance',
+        value: '15.000000000 ETH',
+        valueInfo: '(before investment)'
+      }, {
+        label: 'gas limit',
+        value: '21000'
+      }, {
+        label: 'gas price',
+        value: '41 GWEI (0.0000000041 ETH)'
+      }, {
+        label: 'max tx fee',
+        value: '0.000861 ETH (861000 GWEI)'
+      }]
+    })), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      minWidth: "240px",
+      onClick: () => {
+        this.setStep(2);
+      }
+    }, "Sign transaction"))), /*#__PURE__*/React.createElement(Tab, {
+      tabId: 2
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(SignSubText, null, /*#__PURE__*/React.createElement("p", null, 'STOKR couldn’t sign the transaction, please try again.'))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(TransactionInfo, {
+      value1: "1.00000000",
+      unit1: "ETH",
+      name1: "Ethereum01",
+      owner1: "(you)",
+      address1: "0x1CC31c07710B7A6b75dE2DEeCB0d6A63B58A67C0",
+      value2: "150.000000",
+      unit2: "TYK",
+      name2: "TYKN",
+      owner2: "",
+      address2: "0x1CC31c07710B7A6b75dE2DEeCB0d6A63B58A67C0"
+    }), /*#__PURE__*/React.createElement(TransactionDetails, {
+      data: [{
+        label: 'account balance',
+        value: '15.000000000 ETH',
+        valueInfo: '(before investment)'
+      }, {
+        label: 'gas limit',
+        value: '21000'
+      }, {
+        label: 'gas price',
+        value: '41 GWEI (0.0000000041 ETH)'
+      }, {
+        label: 'max tx fee',
+        value: '0.000861 ETH (861000 GWEI)'
+      }]
+    })), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      minWidth: "240px",
+      onClick: this.onContinueClick
+    }, "Try again"))))));
+  }
+}
+SignSubTransactionLedger.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default SignSubTransactionLedger;

package/dist/SigningSubflow/SignSubTransactionMetamask.js

@@ -0,0 +1,130 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import Button from 'components/Button/Button.styles';
+import TransactionInfo from 'components/TransactionInfo/TransactionInfo';
+import TransactionDetails from 'components/TransactionDetails/TransactionDetails';
+import Form from 'components/Form/Form';
+import FAQ from 'components/FAQ/FAQ';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import AgreementItem from 'components/AgreementItem/AgreementItem';
+import { ModalWrapper } from 'components/Modal/Modal.styles';
+import { SignSubText } from './_styles';
+class SignSubTransactionMetamask extends PureComponent {
+  initialValues = {
+    paying: false,
+    token: false,
+    send: false
+  };
+  validationSchema = Yup.object().shape({
+    paying: Yup.bool().oneOf([true], 'Agree is required'),
+    token: Yup.bool().oneOf([true], 'Agree is required'),
+    send: Yup.bool().oneOf([true], 'Agree is required')
+  });
+  onSubmit = () => {
+    const {
+      changeStep
+    } = this.props;
+    changeStep();
+  };
+  render() {
+    return /*#__PURE__*/React.createElement(ModalWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Invest in TYKN")), /*#__PURE__*/React.createElement(ComponentScroll, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true
+    }, /*#__PURE__*/React.createElement(SignSubText, null, /*#__PURE__*/React.createElement("h3", null, "Confirm transaction"), /*#__PURE__*/React.createElement("p", null, 'To sign and send your transaction, please read and agree with all terms, then click ‘Confirm transaction’. After that you’re able to review the transaction details in Metamask and send the transaction to finalize the investment.'))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingBottom: true
+    }, /*#__PURE__*/React.createElement(TransactionInfo, {
+      value1: "1.00000000",
+      unit1: "ETH",
+      name1: "Ethereum01",
+      owner1: "(you)",
+      address1: "0x1CC31c07710B7A6b75dE2DEeCB0d6A63B58A67C0",
+      value2: "150.000000",
+      unit2: "TYK",
+      name2: "TYKN",
+      owner2: "",
+      address2: "0x1CC31c07710B7A6b75dE2DEeCB0d6A63B58A67C0"
+    }), /*#__PURE__*/React.createElement(TransactionDetails, {
+      data: [{
+        label: 'account balance',
+        value: '15.000000000 ETH',
+        valueInfo: '(before investment)'
+      }, {
+        label: 'gas limit',
+        value: '21000'
+      }, {
+        label: 'gas price',
+        value: '41 GWEI (0.0000000041 ETH)'
+      }, {
+        label: 'max tx fee',
+        value: '0.000861 ETH (861000 GWEI)'
+      }]
+    })), /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(SectionTitle, null, "Important")), /*#__PURE__*/React.createElement(Formik, {
+      initialValues: this.initialValues,
+      validationSchema: this.validationSchema,
+      onSubmit: this.onSubmit
+    }, ({
+      values,
+      handleChange,
+      handleBlur
+    }) => {
+      const submitDisabled = !values.paying || !values.token || !values.send;
+      return /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingTop: true
+      }, /*#__PURE__*/React.createElement(AgreementItem, {
+        text: "By clicking \u2018Confirm transaction\u2019 I agree with the <VentureName> token terms & STOKR terms.",
+        checkbox: {
+          id: 'token',
+          name: 'token',
+          text: 'I agree',
+          value: 'agree',
+          onChange: handleChange,
+          onBlur: handleBlur,
+          checked: values.token
+        },
+        info: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in arcu sit amet justo suscipit convallis eu eu nibh. Morbi faucibus eros ut lacinia viverra. Cras volutpat molestie diam, non scelerisque tellus ultrices in. Etiam justo mauris, pretium eu scelerisque eu, interdum at orci. Ut mollis nisi sit amet dolor fringilla, a pretium est congue. Integer convallis id sem eu mattis. Aenean tellus odio, fringilla quis varius quis, auctor sit amet neque. Cras non felis mattis, imperdiet eros non, suscipit enim. Vestibulum luctus, dui vel bibendum ultrices, est turpis placerat est, non volutpat ante ligula vel lacus."
+      })), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingTop: true
+      }, /*#__PURE__*/React.createElement(AgreementItem, {
+        text: "By clicking 'Confirm transaction\u2019 I agree with paying \u20AC 500,- for 1000 <VentureName> Tokens.",
+        checkbox: {
+          id: 'paying',
+          name: 'paying',
+          text: 'I agree',
+          value: 'agree',
+          onChange: handleChange,
+          onBlur: handleBlur,
+          checked: values.paying
+        },
+        info: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in arcu sit amet justo suscipit convallis eu eu nibh. Morbi faucibus eros ut lacinia viverra. Cras volutpat molestie diam, non scelerisque tellus ultrices in. Etiam justo mauris, pretium eu scelerisque eu, interdum at orci. Ut mollis nisi sit amet dolor fringilla, a pretium est congue. Integer convallis id sem eu mattis. Aenean tellus odio, fringilla quis varius quis, auctor sit amet neque. Cras non felis mattis, imperdiet eros non, suscipit enim. Vestibulum luctus, dui vel bibendum ultrices, est turpis placerat est, non volutpat ante ligula vel lacus."
+      })), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingTop: true
+      }, /*#__PURE__*/React.createElement(AgreementItem, {
+        text: "After clicking \u2018Confirm transaction\u2019 I\u2019ll click \u2018Confirm\u2019 in the MetaMask popup in order to send the transaction and finalize the investment.",
+        checkbox: {
+          id: 'send',
+          name: 'send',
+          text: 'I agree',
+          value: 'agree',
+          onChange: handleChange,
+          onBlur: handleBlur,
+          checked: values.send
+        },
+        info: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in arcu sit amet justo suscipit convallis eu eu nibh. Morbi faucibus eros ut lacinia viverra. Cras volutpat molestie diam, non scelerisque tellus ultrices in. Etiam justo mauris, pretium eu scelerisque eu, interdum at orci. Ut mollis nisi sit amet dolor fringilla, a pretium est congue. Integer convallis id sem eu mattis. Aenean tellus odio, fringilla quis varius quis, auctor sit amet neque. Cras non felis mattis, imperdiet eros non, suscipit enim. Vestibulum luctus, dui vel bibendum ultrices, est turpis placerat est, non volutpat ante ligula vel lacus."
+      })), /*#__PURE__*/React.createElement(ComponentWrapper, {
+        noPaddingTop: true,
+        center: true
+      }, /*#__PURE__*/React.createElement(Button, {
+        type: "submit",
+        minWidth: "240px",
+        disabled: submitDisabled
+      }, "Confirm transaction")));
+    })));
+  }
+}
+SignSubTransactionMetamask.propTypes = {
+  changeStep: PropTypes.func.isRequired
+};
+export default SignSubTransactionMetamask;

package/dist/SigningSubflow/_styles.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components/macro';
+import grid from 'styles/grid';
+import rwd from 'styles/rwd';
+import Text from 'components/Text/Text.styles';
+import theme from 'styles/theme';
+export const SignSubStep = styled.div`
+  position: relative;
+  height: 100%;
+`;
+export const SignSubWrapper = styled.div`
+  position: relative;
+  padding: 40px ${grid(1)};
+
+  ${rwd.Medium`
+    padding: 53px ${grid(0.5, 8)};
+  `}
+
+  ${rwd.XLarge`
+    padding: 53px ${grid(0.5, 6)};
+  `}
+`;
+export const SignSubInfo = styled.div`
+  font-family: 'Open Sans';
+  font-weight: 300;
+  font-size: 9px;
+  line-height: 1.78em;
+  letter-spacing: 0.4px;
+  color: ${props => theme.cBlack};
+  opacity: 0.5;
+  ${props => props.center && 'text-align: center;'}
+
+  ${rwd.Large`
+    font-size: 12px;
+  `}
+
+  a {
+    text-decoration: underline;
+    transition: color 0.2s;
+
+    &:hover {
+      color: ${props => theme.cPrimary};
+    }
+  }
+`;
+export const NumberWithTitle = styled.div`
+  line-height: 24px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  padding-bottom: 18px;
+`;
+export const SignSubText = styled(Text)`
+  p {
+    ${rwd.Medium`
+      font-size: 16px;
+    `}
+  }
+`;

package/dist/SigningSubflow/index.js

@@ -0,0 +1,9 @@
+import SignSubIntro from './SignSubIntro';
+import SignSubConnectLedger from './SignSubConnectLedger';
+import SignSubConnectMetamask from './SignSubConnectMetamask';
+import SignSubTransactionLedger from './SignSubTransactionLedger';
+import SignSubTransactionMetamask from './SignSubTransactionMetamask';
+import SignSubSendLedger from './SignSubSendLedger';
+import SignSubSendMetamask from './SignSubSendMetamask';
+import { SignSubStep, SignSubWrapper, SignSubInfo } from './_styles';
+export { SignSubIntro, SignSubConnectLedger, SignSubConnectMetamask, SignSubTransactionLedger, SignSubTransactionMetamask, SignSubSendLedger, SignSubSendMetamask, SignSubStep, SignSubWrapper, SignSubInfo };

package/dist/Slider/Slider.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Slick from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import { Wrapper } from './Slider.styles';
+export const Slider = ({
+  children,
+  autoplay,
+  dots,
+  arrows,
+  infinite,
+  rtl = false
+}) => {
+  const settings = {
+    dots,
+    arrows,
+    infinite,
+    speed: 600,
+    autoplay: !!autoplay,
+    autoplaySpeed: autoplay,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    rtl
+  };
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Slick, settings, children));
+};
+Slider.propTypes = {
+  children: PropTypes.node.isRequired,
+  autoplay: PropTypes.number,
+  dots: PropTypes.bool,
+  arrows: PropTypes.bool,
+  infinite: PropTypes.bool
+};
+Slider.defaultProps = {
+  autoplay: 0,
+  dots: false,
+  arrows: false,
+  infinite: true
+};
+export default Slider;
+
+//rtl is reverse motion direction

package/dist/Slider/Slider.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Slider } from './Slider';
+import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
+import { Number } from 'index';
+export default {
+  title: 'Components Library/Slider',
+  component: Slider,
+  argTypes: {
+    children: {
+      type: 'node',
+      defaultValue: [],
+      required: true
+    },
+    autoplay: {
+      type: 'number',
+      defaultValue: 0
+    },
+    dots: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    arrows: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    infinite: {
+      type: 'boolean',
+      defaultValue: true
+    },
+    rtl: {
+      type: 'boolean',
+      defaultValue: false
+    },
+    settings: [{}]
+  }
+};
+
+// const Template = ({ numberOfChildren, args }) => (
+//   <Wrapper>
+//     <Slider {...args}>
+//       {[...Array(numberOfChildren).keys].map(n => ({ children }))}
+//     </Slider>
+//   </Wrapper>
+// )
+
+const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(Slider, args));
+export const SliderActive = Template.bind({});
+SliderActive.args = {
+  children: [/*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null)],
+  autoplay: 3,
+  dots: true,
+  arrows: true
+};
+export const SliderActiveRtl = Template.bind({});
+SliderActiveRtl.args = {
+  children: [/*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null), /*#__PURE__*/React.createElement(Number, null)],
+  autoplay: 3,
+  dots: true,
+  arrows: true,
+  rtl: true
+};
+
+//doublecheck:

package/dist/Slider/Slider.styles.js

@@ -0,0 +1,115 @@
+import styled from 'styled-components/macro';
+export const Wrapper = styled.div`
+  height: 100%;
+
+  .slick-list {
+    z-index: 0;
+  }
+
+  .slick-arrow {
+    z-index: 1;
+    width: 24px;
+    height: 24px;
+
+    &.slick-prev,
+    &.slick-next {
+      &:before {
+        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: 20px;
+        line-height: 24px;
+        text-align: center;
+        text-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
+        opacity: 1;
+        color: #fff;
+        transition: color 0.2s;
+      }
+
+      &:hover {
+        &:before {
+          color: #0050ca;
+        }
+      }
+    }
+
+    &.slick-prev {
+      left: 4px;
+
+      &:before {
+        content: '\f3cf';
+      }
+    }
+
+    &.slick-next {
+      right: 4px;
+
+      &:before {
+        content: '\f3d1';
+      }
+    }
+  }
+
+  .slick-dots {
+    z-index: 1;
+    height: auto;
+    bottom: 4px;
+
+    li {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      margin: 0;
+
+      button {
+        display: block;
+        padding: 8px;
+        width: 24px;
+        height: 24px;
+
+        &:before {
+          position: relative;
+          content: '';
+          display: block;
+          width: 8px;
+          height: 8px;
+          border-radius: 4px;
+          background-color: #fff;
+          opacity: 1;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
+          transition: background-color 0.2s;
+        }
+
+        &:hover {
+          &:before {
+            background-color: #0050ca;
+          }
+        }
+      }
+
+      &.slick-active {
+        button {
+          &:before {
+            background-color: #ee220d;
+          }
+        }
+      }
+    }
+  }
+`;
+export const ImageSlide = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center center;
+`;
+export const ImageSlideWrapper = styled.div`
+  height: 193px;
+  position: relative;
+`;

package/dist/SpanButton/SpanButton.styles.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components/macro';
+export const SpanButton = styled.span`
+  color: #0050ca;
+  cursor: pointer;
+  font-weight: 400;
+
+  ${props => props.urlLink && `
+    text-decoration: underline;
+  `}
+
+  &:hover {
+    color: #202020;
+  }
+`;

package/dist/StatusBadge/StatusBadge.styles.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components/macro';
+import theme from 'styles/theme';
+export const StatusBadge = styled.div`
+  display: inline-block;
+  vertical-align: top;
+  padding: 0px 16px;
+  background-color: ${props => theme.cBlack};
+  color: ${props => theme.cWhite};
+  font-weight: 600;
+  font-size: 8px;
+  letter-spacing: 1.78px;
+  line-height: 16px;
+  border-radius: 8px;
+  margin-left: 12px;
+`;
+export default StatusBadge;