@stokr/components-library 0.5.6 → 0.5.7

package/dist/Header/Header.styles.js

@@ -1,493 +0,0 @@
-import styled, { css } from 'styled-components/macro';
-import rwd, { rwdMax, sizes } from 'styles/rwd';
-import colors from 'styles/colors';
-import spacing from 'styles/spacing';
-import Button from 'components/Button/Button.styles';
-import * as sc from 'constants/style';
-import { SocialLink } from 'components/Footer/FooterMenu.styles';
-import Icon, { iconsMap } from 'components/Icon/Icon.style';
-export const StyledSubMenu = styled.div`
-  position: relative;
-`;
-export const StyledHeader = styled.header`
-  z-index: 20;
-  position: relative;
-  color: ${colors.black};
-  border-bottom: 1px solid rgb(237, 237, 237);
-
-  ${rwd.MLarge`
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: ${spacing.headerHeight}px;
-    background-color: ${colors.white};
-    box-shadow: inset 0 -1px 0 0 ${colors.lightGrey};
-  `}
-`;
-export const HeaderInner = styled.div`
-  position: relative;
-  padding: 24px;
-
-  ${props => props.withSidebar && `
-     left: 64px;
-    transition: 0.3s width;
-  `}
-
-  ${rwd.MLarge`
-    display: flex;
-    padding: 28px 32px;
-    align-items: center;
-    height: 100%;
-
-    ${props => props.withSidebar && `
-      width:100%;
-      left:0;
-    `}
-  `}
-`;
-export const MainNavWrap = styled.div`
-  z-index: 2;
-  position: relative;
-  font-size: 0;
-
-  ${rwd.MLarge`
-    flex-grow: ${({
-  isFixedWidth
-}) => !isFixedWidth && 1};
-    width: ${({
-  isFixedWidth
-}) => isFixedWidth && '200px'};
-
-${props => props.noProgress && `
-    flex-grow: 3;
-  `}
-
-      ${props => props.hasProgress && `
-    width:33.3%;
-    `}
-`}
-`;
-export const SidebarToggle = styled.div`
-  width: 64px;
-  height: 100%;
-  background: ${colors.rustyRed};
-  transition: 0.3s width;
-  flex-shrink: 0;
-  display: flex;
-  position: absolute;
-  cursor: pointer;
-  z-index: 10;
-
-  ${rwd.MLarge`
-    position: relative;
-    width: 100px;
-  `}
-
-  ${props => props.isSidebarExpanded && rwd.MLarge`
-    width: 300px;
-  `}
-`;
-export const HamburgerIcon = styled(Icon)`
-  display: block;
-  width: 18px;
-  height: 18px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -9px;
-  margin-left: -9px;
-  font-size: 18px;
-  line-height: 18px;
-  color: ${colors.white};
-
-  &:before {
-    content: '${iconsMap.hamburger}';
-  }
-
-  ${rwd.MLarge`
-    left: 50px;
-  `}
-`;
-export const ProgressWrap = styled.div`
-  z-index: 0;
-  position: relative;
-  text-align: center;
-  margin-top: 24px;
-
-  ${rwd.MLarge`
-    flex-grow: 2;
-    margin-top: 0;
-
-    
-
-  `}
-`;
-export const QuickNavWrap = styled.div`
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-
-  ${rwd.MLarge`
-    position: relative;
-    right: auto;
-    flex-grow: ${({
-  isFixedWidth
-}) => !isFixedWidth && 1};
-    width: ${({
-  isFixedWidth
-}) => isFixedWidth && '200px'};
-    text-align: right;
-
-    ${props => props.hasProgress && `
-    width:33.3%;
-    `}
-  `}
-`;
-export const Logo = styled.div`
-  display: inline-block;
-  vertical-align: middle;
-  color: ${colors.black};
-  transition: color 0.4s;
-
-  ${props => props.isHighlight && `
-    color: ${colors.blue};
-  `}
-
-  a {
-    display: block;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-
-  img {
-    display: block;
-    height: 16px;
-    width: auto;
-  }
-
-  svg {
-    display: block;
-    height: 16px;
-    width: auto;
-    fill: currentColor;
-  }
-
-  ${rwd.MLarge`
-    margin-left: 0;
-    margin-right: 42px;
-  `}
-`;
-export const HeaderMainNav = styled.div`
-  display: none;
-
-  ${rwd.MLarge`
-    display: inline-block;
-  `}
-
-  button {
-    text-transform: uppercase;
-  }
-`;
-export const HeaderQuickNav = styled.div`
-  display: none;
-
-  ${rwd.MLarge`
-    display: inline-block;
-
-    & > * {
-      margin-left: 32px;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-
-      ${props => !props.isUserLogged && `
-         display: flex;
-    align-items: center;
-    justify-content: flex-end;
-         `}
-  `}
-
-  button {
-    text-transform: uppercase;
-
-    ${rwd.MLarge`
-      vertical-align: middle;
-    `}
-  }
-`;
-export const MobileMenuToggler = styled.button`
-  display: block;
-  width: 32px;
-  height: 32px;
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  outline: none;
-  cursor: pointer;
-  border: none;
-  background-color: inherit;
-
-  ${props => props.withSidebar && `
-    right:-15px;
-  `}
-
-  ${rwd.MLarge`
-    display: none;
-  `}
-
-  span {
-    display: block;
-    width: 16px;
-    height: 2px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -1px;
-    margin-left: -8px;
-    background-color: ${colors.black};
-    transition: background-color 0.4s, transform 0.4s;
-
-    &:nth-child(1) {
-      transform: translateY(-6px);
-    }
-
-    &:nth-child(3) {
-      transform: translateY(6px);
-    }
-  }
-
-  ${props => props.isActive && `
-    span {
-      background-color: ${colors.blue};
-
-      &:nth-child(1) {
-        transform: translateY(0) rotate(135deg);
-      }
-
-      &:nth-child(2) {
-        transform: scaleX(0);
-      }
-
-      &:nth-child(3) {
-        transform: translateY(0) rotate(-135deg);
-      }
-    }
-  `}
-`;
-export const MobileMenu = styled.nav`
-  z-index: 1;
-  position: absolute;
-  top: 65px;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-height: calc(100vh - 65px);
-  background-color: ${colors.white};
-  padding: 0;
-  text-align: center;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.4s, visibility 0.4s;
-
-  height: calc(100vh - 65px);
-  overflow: scroll;
-
-  ${props => props.isActive && `
-    opacity: 1;
-    visibility: visible;
-  `}
-
-  ${props => props.withSidebar && `
-  width:180%;
-  left:-64px;
-  `}
-
-  // &:before {
-  //   content: '';
-  //   display: block;
-  //   width: 100%;
-  //   height: 1px;
-  //   background-color: ${colors.lightGrey};
-  //   position: absolute;
-  //   top: 0;
-  //   left: 0;
-  // }
-
-  ${rwd.MLarge`
-    display: none;
-  `}
-
-  button {
-    text-transform: uppercase;
-  }
-`;
-export const MobileMenuItem = styled.li`
-  align-items: center;
-  display: flex !important;
-  justify-content: center;
-
-  ${props => props.red && `
-    background: #D2200D;
-    color:white;
-        border-bottom: 1px solid #979797;
-  `}
-`;
-export const MobileMenuPart = styled.div`
-  ${props => props.withPadding && `
-    padding: 30px 0;
-
-    @media screen and (max-width: 320px) {
-      padding: 15px 0;
-    }
-  `}
-
-  ${props => props.grow && `
-    flex-grow: ${props.grow};
-  `}
-
-  ${props => props.flexColumn && `
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    button {
-      margin: 10px 0;
-    }
-  `}
-
-  ${props => props.noPaddingTop && `
-    padding-top: 0;
-  `}
-
-  ${props => props.borderTop && `
-    border-top: 1px solid ${colors.lightGrey};
-  `}
-`;
-export const UserAccount = styled.div`
-  z-index: 1;
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-
-  ${rwd.MLarge`
-    margin: -4px 0;
-    margin-left: 32px;
-  `}
-`;
-export const UserButton = styled.button`
-  display: inline-block;
-  vertical-align: middle;
-  width: 48px;
-  height: 48px;
-  border-radius: 24px;
-  overflow: hidden;
-  background-color: ${colors.grey2};
-  opacity: 1;
-  transition: opacity 0.2s;
-  outline: none;
-  cursor: pointer;
-  box-shadow: none;
-  border: none;
-  background-color: buttonface;
-
-  /* &:hover {
-    opacity: 0.5;
-  } */
-`;
-export const UserAvatar = styled.img`
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center center;
-`;
-export const UserName = styled.div`
-  z-index: 0;
-  position: relative;
-  display: block;
-  padding-top: 36px;
-  padding-bottom: 20px;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
-  background-color: ${colors.orangishRed};
-  color: ${colors.white};
-  margin-top: -24px;
-`;
-export const LoginButton = styled.span`
-  cursor: pointer;
-  margin-right: 24px;
-  display: none;
-
-  &:hover {
-    opacity: 0.6;
-  }
-
-  @media screen and (min-width: 992px) {
-    display: block;
-  }
-`;
-export const SignupButton = styled(Button)`
-  padding-right: 32px !important;
-  color: ${sc.WHITE_HEX} !important;
-
-  &:hover {
-    background: ${sc.BLUE_BASE_RELEASED_HEX};
-  }
-
-  ${props => props.isMobile && `
-   margin: 0;
-  width: 163.94px;
-  `}
-`;
-export const CTAContainer = styled.div`
-  align-items: center;
-  border-top: 1px solid ${sc.GRAY_BASE_HEX};
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 56px 0;
-  width: 100%;
-
-  span {
-    color: 1px solid ${sc.GRAY_BASE_HEX};
-    font-size: 10px;
-    letter-spacing: 2.1px;
-    margin-bottom: 14px;
-  }
-
-  div {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  ${rwdMax.Medium`
-    div{
-        width: 192px; /* Fit exactly 3 icons */
-    }
-  `}
-
-  ${SocialLink} {
-    display: flex;
-    justify-content: center;
-
-    background: transparent;
-    margin: 12px;
-
-    svg {
-      fill: rgb(32, 32, 32);
-      height: 18px !important;
-      width: 18px !important;
-    }
-  }
-`;

package/dist/Icon/Icon.style.js

@@ -1,75 +0,0 @@
-import styled, { css } from 'styled-components/macro';
-export const iconsMap = {
-  expand: '\\e923',
-  shrink: '\\e924',
-  emoji: '\\e922',
-  arrowDown: '\\e900',
-  arrowLeft: '\\e901',
-  arrowRight: '\\e902',
-  arrowUp: '\\e903',
-  heart: '\\e904',
-  heartFill: '\\e921',
-  lock: '\\e905',
-  menu: '\\e906',
-  pen: '\\e907',
-  star: '\\e908',
-  trash: '\\e909',
-  unread: '\\e90a',
-  user: '\\e90b',
-  edit: '\\e90c',
-  check: '\\e90d',
-  inProgress: '\\e90e',
-  warning: '\\e90f',
-  logout: '\\e910',
-  tokenHolder: '\\e911',
-  teams: '\\e912',
-  tokenSales: '\\e913',
-  analytics: '\\e914',
-  updates: '\\e915',
-  overview: '\\e916',
-  comments: '\\e917',
-  hamburger: '\\e918',
-  share: '\\e919',
-  facebook: '\\e91a',
-  linkedin: '\\e91b',
-  medium: '\\e91c',
-  reddit: '\\e91d',
-  telegram: '\\e91e',
-  twitter: '\\e91f',
-  youtube: '\\e920'
-};
-export const TooltipIcon = styled.i.attrs({
-  className: 'ion ion-md-information-circle'
-})`
-  position: relative;
-  left: -0.4px;
-  font-size: 18px;
-  opacity: 0.2;
-  transform: rotateY(180deg);
-  margin: 0 14px;
-`;
-export const Icon = styled.i`
-  font-family: 'icomoon' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  &::before {
-    content: "${props => props.icon}";
-  }
-
-  ${({
-  checklist
-}) => checklist && css`
-      margin-left: 3px;
-      margin-right: 11px;
-    `}
-`;
-export default Icon;

package/dist/InfoIcon/InfoIcon.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip } from 'react-tippy';
-import { Container, Icon } from './InfoIcon.styles';
-export const InfoIcon = ({
-  title,
-  html,
-  position,
-  noMargin,
-  noMarginLeft,
-  noMarginRight
-}) => /*#__PURE__*/React.createElement(Container, {
-  noMargin: noMargin,
-  noMarginLeft: noMarginLeft,
-  noMarginRight: noMarginRight
-}, /*#__PURE__*/React.createElement(Tooltip, {
-  position: position,
-  title: title,
-  html: html,
-  theme: "light",
-  arrow: true,
-  duration: 200
-}, /*#__PURE__*/React.createElement(Icon, null)));
-InfoIcon.propTypes = {
-  title: PropTypes.string,
-  html: PropTypes.node,
-  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  noMargin: PropTypes.bool,
-  noMarginLeft: PropTypes.bool,
-  noMarginRight: PropTypes.bool
-};
-InfoIcon.defaultProps = {
-  title: null,
-  html: null,
-  position: 'bottom',
-  noMargin: false,
-  noMarginLeft: false,
-  noMarginRight: false
-};
-export default InfoIcon;

package/dist/InfoIcon/InfoIcon.stories.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { InfoIcon } from './InfoIcon';
-import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles';
-export default {
-  title: 'Components Library/Icons/Info Icon',
-  component: InfoIcon,
-  argTypes: {
-    title: {
-      type: 'string',
-      defaultValue: 'default is null/ add some title'
-    },
-    html: {
-      type: 'node',
-      defaultValue: 'default is null/ add some html'
-    },
-    position: {
-      type: 'string',
-      defaultValue: 'bottom'
-    },
-    noMargin: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    noMarginLeft: {
-      type: 'boolean',
-      defaultValue: false
-    },
-    noMarginRight: {
-      type: 'boolean',
-      defaultValue: false
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(InfoIcon, args));
-export const InfoIconBottom = Template.bind({});
-InfoIconBottom.args = {};
-export const InfoIconTop = Template.bind({});
-InfoIconTop.args = {
-  position: 'top'
-};

package/dist/InfoIcon/InfoIcon.styles.js

@@ -1,42 +0,0 @@
-import styled from 'styled-components/macro';
-import theme from 'styles/theme';
-export const Container = styled.div`
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 12px;
-  font-size: 0;
-  line-height: 0;
-
-  ${props => props.noMargin && `
-    margin: 0;
-  `}
-  ${props => props.noMarginLeft && `
-    margin-left: 0;
-  `}
-  ${props => props.noMarginRight && `
-    margin-right: 0;
-  `}
-
-  & > div {
-    position: relative;
-    display: inline-block!important;
-  }
-`;
-export const Icon = styled.i.attrs({
-  className: 'ion ion-md-information-circle'
-})`
-  position: relative;
-  left: -0.4px;
-
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 16px;
-  line-height: 16px;
-  vertical-align: middle;
-  color: ${props => theme.cGrey2};
-  transition: color 0.2s;
-
-  &:hover {
-    color: ${props => theme.cPrimary};
-  }
-`;