@stokr/components-library 0.5.6 → 0.5.8

package/dist/BackButton/BackButton.styles.js

@@ -1,110 +0,0 @@
-import styled from 'styled-components/macro';
-import { Link } from '@reach/router';
-import theme from 'styles/theme';
-export const BackButtonIcon = styled.i.attrs({
-  className: 'ion ion-ios-arrow-back'
-})`
-  font-size: 16px;
-  position: absolute;
-  left: 0;
-  color: ${props => theme.cBlack};
-  transform: translateX(0);
-  transition: 0.3s color, 0.3s transform;
-`;
-export const ForwardButtonIcon = styled.i.attrs({
-  className: 'ion ion-ios-arrow-forward'
-})`
-  font-size: 16px;
-  position: absolute;
-  right: 0;
-  color: ${props => theme.cBlack};
-  transform: translateX(0);
-  transition: 0.3s color, 0.3s transform;
-`;
-export const StyledBackButton = styled(Link)`
-  display: block;
-  font-size: 11px;
-  line-height: 16px;
-  letter-spacing: 2px;
-  color: ${props => theme.cBlack};
-  position: relative;
-  padding-left: 16px;
-  transition: 0.3s color;
-
-  &:hover {
-    color: ${props => theme.cPrimaryDark};
-
-    ${BackButtonIcon} {
-      transform: translateX(-4px);
-      color: ${props => theme.cPrimaryDark};
-    }
-  }
-`;
-export const StyledBackButtonExternal = styled.a`
-  display: block;
-  font-size: 11px;
-  line-height: 16px;
-  letter-spacing: 2px;
-  color: ${props => theme.cBlack};
-  position: relative;
-  padding-left: 16px;
-  transition: 0.3s color;
-
-  &:hover {
-    color: ${props => theme.cPrimaryDark};
-
-    ${BackButtonIcon} {
-      transform: translateX(-4px);
-      color: ${props => theme.cPrimaryDark};
-    }
-  }
-`;
-export const StyledWindowBackButton = styled.span`
-  display: block;
-  font-size: 11px;
-  line-height: 16px;
-  cursor: pointer;
-  letter-spacing: 2px;
-  color: ${props => theme.cBlack};
-  position: relative;
-  padding-left: 16px;
-  transition: 0.3s color;
-
-  &:hover {
-    color: ${props => theme.cPrimaryDark};
-
-    ${BackButtonIcon} {
-      transform: translateX(-4px);
-      color: ${props => theme.cPrimaryDark};
-    }
-  }
-`;
-export const StyledBackButtonClick = styled.div`
-  display: block;
-  font-size: 11px;
-  line-height: 16px;
-  letter-spacing: 2px;
-  color: ${props => theme.cBlack};
-  position: relative;
-  padding-left: 16px;
-  transition: 0.3s color;
-  cursor: pointer;
-
-  ${props => props.forward && `
-    padding-right: 16px;
-  `}
-
-  &:hover {
-    color: ${props => theme.cPrimaryDark};
-
-    ${BackButtonIcon} {
-      transform: translateX(-4px);
-      color: ${props => theme.cPrimaryDark};
-    }
-
-    ${ForwardButtonIcon} {
-      transform: translateX(4px);
-      color: ${props => theme.cPrimaryDark};
-    }
-  }
-`;

package/dist/Background/Background.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Container, Wrap, Img, Content } from './Background.styles';
-export const Background = props => {
-  const {
-    children,
-    src,
-    mobileRatio,
-    investmentOpportunities,
-    withPadding,
-    contain
-  } = props;
-  return /*#__PURE__*/React.createElement(Container, {
-    mobileRatio: mobileRatio,
-    investmentOpportunities: investmentOpportunities
-  }, /*#__PURE__*/React.createElement(Wrap, null, /*#__PURE__*/React.createElement(Img, {
-    src: src,
-    alt: "background",
-    contain: contain,
-    withPadding: withPadding,
-    investmentOpportunities: investmentOpportunities
-  })), /*#__PURE__*/React.createElement(Content, null, children));
-};
-Background.propTypes = {
-  src: PropTypes.string.isRequired,
-  mobileRatio: PropTypes.string,
-  // example: '16:9'
-  children: PropTypes.node
-};
-Background.defaultProps = {
-  mobileRatio: '',
-  children: /*#__PURE__*/React.createElement("div", null)
-};
-export default Background;

package/dist/Background/Background.stories.js

@@ -1,50 +0,0 @@
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import React from 'react';
-import { Background } from './Background';
-import { TwoSvg } from 'components/SvgIcons';
-export default {
-  title: 'Components Library/Background',
-  component: Background,
-  argTypes: {
-    src: {
-      type: 'string',
-      required: true,
-      defaultValue: 'https://www.cookingclassy.com/wp-content/uploads/2014/06/chocolate-chip-cookie-16.jpg'
-    },
-    mobileRatio: {
-      type: 'string',
-      defaultValue: ''
-    },
-    children: {
-      type: 'node',
-      defaultValue: /*#__PURE__*/React.createElement("div", null)
-    },
-    investmentOpportunities: {
-      type: 'node'
-    }
-  },
-  parameters: {
-    viewport: {
-      viewports: INITIAL_VIEWPORTS,
-      defaultViewport: ''
-    }
-  }
-};
-const Template = args => /*#__PURE__*/React.createElement(Background, args, /*#__PURE__*/React.createElement(TwoSvg, null));
-export const BackgroundDefault = Template.bind({});
-BackgroundDefault.args = {};
-BackgroundDefault.parameters = {
-  viewport: {
-    defaultViewport: 'reset viewport'
-  }
-};
-export const BackgroundMobile = Template.bind({});
-BackgroundMobile.args = {
-  mobileRatio: '16:9',
-  children: /*#__PURE__*/React.createElement("div", null)
-};
-BackgroundMobile.parameters = {
-  viewport: {
-    defaultViewport: 'iphonex'
-  }
-};

package/dist/Background/Background.styles.js

@@ -1,113 +0,0 @@
-import styled from 'styled-components/macro';
-import rwd from 'styles/rwd';
-export const Container = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  font-size: 0;
-
-  ${props => {
-  if (!props.mobileRatio) return '';
-  const ratio = props.mobileRatio.split(':');
-  const percent = 100 * ratio[1] / ratio[0];
-  return `
-      &:after {
-        z-index: 0;
-        content: '';
-        position: relative;
-        display: inline-block;
-        vertical-align: top;
-        width: 100%;
-        height: 100%;
-        padding-top: ${percent}%;
-        margin-left: -100%;
-      }
-    `;
-}}
-
-  &:after {
-    ${rwd.Medium`
-      display: none;
-    `}
-  }
-
-  ${props => props.investmentOpportunities && `
-    padding-top: 33% !important;
-  `}
-`;
-export const Wrap = styled.div`
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  & > div {
-    height: 100%;
-  }
-`;
-
-// // Concerning MERGE:
-// // differences from Img SUF below, left out of merge. Visually gave extra padding to background
-// const Img
-// export const Img = styled.img`
-//   top: 50%;
-//   left: 50%;
-//   height: auto;
-//   padding: 20px;
-//   transform: translate(-50%, -50%);
-// // same as others:
-//   position: absolute;
-//   width: 100%;
-//   object-fit: cover;
-//   object-position: center center;
-
-export const Img = styled.img`
-  position: absolute;
-  width: 100%;
-  object-fit: cover;
-  object-position: center center;
-  top: 0;
-  left: 0;
-  height: 100%;
-
-  ${props => props.investmentOpportunities && `
-    height: 100%;
-  `}
-  ${props => props.withPadding && `
-    padding: 20px;
-  `}
-  ${props => props.contain && `
-    object-fit:contain;
-  `}
-`;
-export const Video = styled.video`
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-`;
-export const Image = styled.img`
-  /* Make video to at least 100% wide and tall */
-  min-width: 100%;
-  min-height: 100%;
-
-  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
-  width: auto;
-  height: auto;
-
-  /* Center the video */
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
-export const Content = styled.div`
-  z-index: 2;
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
-  width: 100%;
-  font-size: 10px;
-`;

package/dist/BarChart/BarChart.js

@@ -1,258 +0,0 @@
-import React, { PureComponent, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import * as d3 from 'd3';
-import { Tooltip } from 'react-tippy';
-
-/*
-  inspired on https://blog.risingstack.com/d3-js-tutorial-bar-charts-with-javascript/
-*/
-
-import { Chart, TooltipWrapper, ChartTitle } from './BarChart.styles';
-const gradients = {
-  default: {
-    start: '#0050ca',
-    end: '#0050ca'
-  },
-  red: {
-    start: '#f24f45',
-    end: '#ee220d'
-  },
-  blue: {
-    start: '#6a97e0',
-    end: '#0050ca'
-  }
-};
-export class BarChart extends PureComponent {
-  transitionDuration = 800;
-  transitionDatumDelay = 100;
-  state = {
-    tooltipOpen: false,
-    dataIndex: 0
-  };
-  componentDidMount() {
-    this.createChart();
-    window.addEventListener('resize', this.onResize);
-    window.addEventListener('scroll', this.onScroll);
-    this.onScroll();
-  }
-  componentWillUnmount() {
-    clearTimeout(this.resizeTimeout);
-    window.removeEventListener('resize', this.onResize);
-    window.removeEventListener('scroll', this.onScroll);
-  }
-  onResize = () => {
-    clearTimeout(this.resizeTimeout);
-    this.resizeTimeout = setTimeout(this.onResizeTimeout, 200);
-  };
-  onResizeTimeout = () => {
-    this.updateChart(true);
-  };
-  onScroll = e => {
-    if (this.drawn) return;
-    if (this.chartEl.getBoundingClientRect().top < window.innerHeight) {
-      this.initialDrawChart();
-    }
-  };
-  initialDrawChart = () => {
-    this.updateChart();
-    this.drawn = true;
-  };
-  createChart = () => {
-    if (!this.chartEl) return;
-    const {
-      id,
-      data,
-      colorTheme
-    } = this.props;
-    const initData = data.map(datum => ({
-      ...datum,
-      value: 0
-    }));
-    const {
-      dataIndex
-    } = this.state;
-    const tooltip = !!data[dataIndex].tooltip;
-    const wrapperWidth = this.chartEl.offsetWidth;
-    const wrapperHeight = 320;
-    const margin = {
-      top: 20,
-      left: 0,
-      right: 40,
-      bottom: 30
-    };
-    const width = wrapperWidth - (margin.left + margin.right);
-    const height = wrapperHeight - (margin.top + margin.bottom);
-    const thickness = 6;
-    const hThickness = thickness / 2;
-    this.hThickness = hThickness;
-
-    // #region x scale
-    const xScale = this.getXScale(data, width);
-    // #endregion x scale
-
-    // #region y scale
-    const yScale = this.getYScale(data, height);
-    // #endregion y scale
-
-    this.svg = d3.select(this.chartEl).append('svg').attr('width', wrapperWidth).attr('height', wrapperHeight);
-    this.chart = this.svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
-    const defs = this.svg.append('defs');
-
-    // #region gradient
-    const gradient = defs.append('linearGradient').attr('id', `${id}-barChart-gradient`).attr('x1', '50%').attr('x2', '50%').attr('y1', '100%').attr('y2', '0%');
-    gradient.append('stop').attr('class', 'start').attr('offset', '0%').attr('stop-color', gradients[colorTheme].start).attr('stop-opacity', 1);
-    gradient.append('stop').attr('class', 'end').attr('offset', '100%').attr('stop-color', gradients[colorTheme].end).attr('stop-opacity', 1);
-    // #endregion gradient
-
-    // #region grid x axis
-    this.xGrid = this.chart.append('g').attr('class', 'gridX').attr('transform', `translate(0, ${height})`).call(d3.axisBottom().scale(xScale).tickSize(-height, 0, 0).tickFormat(''));
-    // #endregion grid x axis
-
-    // #region grid y axis
-    this.yGrid = this.chart.append('g').attr('class', 'gridY').attr('transform', `translate(${width}, 0)`).call(d3.axisRight().scale(yScale).tickSize(-width, 0, 0).ticks(4).tickFormat(''));
-    // #endregion grid y axis
-
-    const tickValues = xScale.domain().length > 20 ? xScale.domain().filter((datum, index) => !(index % 2)) : xScale.domain();
-
-    // #region x axis
-    this.xAxis = this.chart.append('g').attr('class', 'axisX').attr('transform', `translate(0, ${height})`).call(d3.axisBottom().scale(xScale).tickValues(tickValues));
-    // #endregion x axis
-
-    // #region y axis
-    this.yAxis = this.chart.append('g').attr('class', 'axisY').attr('transform', `translate(${width}, 0)`).call(d3.axisRight().scale(yScale).ticks(4));
-    // #endregion y axis
-
-    // #region bars
-    const chartContext = this;
-    this.chart.selectAll().data(initData).enter().append('path').attr('class', 'bar').style('fill', `url(#${id}-barChart-gradient)`).attr('transform', `translate(${-hThickness}, 0)`).each(function bindContext(d, i) {
-      d3.select(this).node().chartContext = chartContext;
-    }).on('mouseenter', tooltip ? this.onMouseEnter : () => {}).on('mouseleave', tooltip ? this.onMouseLeave : () => {}).attr('d', this.getBarDAttrFn(xScale, yScale, height, hThickness, thickness));
-    // #endregion bars
-  };
-
-  setTooltip = (opened, dataIndex) => {
-    const newState = {
-      tooltipOpen: opened
-    };
-    if (dataIndex !== undefined) newState.dataIndex = dataIndex;
-    this.setState(newState);
-  };
-  onMouseEnter = function onMouseEnter(d, i) {
-    const chartRect = this.chartContext.chartEl.getBoundingClientRect();
-    const barRect = this.getBoundingClientRect();
-    const y = barRect.y - chartRect.y;
-    const x = barRect.x - chartRect.x + this.chartContext.hThickness;
-    this.chartContext.tooltipEl.style.left = `${x}px`;
-    this.chartContext.tooltipEl.style.top = `${y}px`;
-    this.chartContext.setTooltip(true, i);
-  };
-  onMouseLeave = function onMouseLeave(d, i) {
-    this.chartContext.setTooltip(false);
-  };
-  updateChart = resizeUpdate => {
-    if (!this.chartEl) return;
-    const {
-      data
-    } = this.props;
-    const durration = this.transitionDuration;
-    const delay = this.transitionDatumDelay;
-    const wrapperWidth = this.chartEl.offsetWidth;
-    const wrapperHeight = 320;
-    const margin = {
-      top: 20,
-      left: 0,
-      right: 40,
-      bottom: 30
-    };
-    const width = wrapperWidth - (margin.left + margin.right);
-    const height = wrapperHeight - (margin.top + margin.bottom);
-    const thickness = 6;
-    const hThickness = thickness / 2;
-
-    // #region x scale
-    const xScale = this.getXScale(data, width);
-    // #endregion x scale
-
-    // #region y scale
-    const yScale = this.getYScale(data, height);
-    // #endregion y scale
-
-    // #region root svg
-    this.svg.transition().duration(durration).attr('width', wrapperWidth).attr('height', wrapperHeight);
-    // #endregion root svg
-
-    // #region grid x axis
-    this.xGrid.transition().duration(durration).attr('transform', `translate(0, ${height})`).call(d3.axisBottom().scale(xScale).tickSize(-height, 0, 0).tickFormat(''));
-    // #endregion grid x axis
-
-    // #region grid y axis
-    this.yGrid.transition().duration(durration).attr('transform', `translate(${width}, 0)`).call(d3.axisRight().scale(yScale).tickSize(-width, 0, 0).ticks(4).tickFormat(''));
-    // #endregion grid y axis
-
-    const tickValues = xScale.domain().length > 20 ? xScale.domain().filter((datum, index) => !(index % 2)) : xScale.domain();
-
-    // #region x axis
-    this.xAxis.transition().duration(durration).attr('transform', `translate(0, ${height})`).call(d3.axisBottom().scale(xScale).tickValues(tickValues));
-    // #endregion x axis
-
-    // #region y axis
-    this.yAxis.transition().duration(durration).attr('transform', `translate(${width}, 0)`).call(d3.axisRight().scale(yScale).ticks(4));
-    // #endregion y axis
-
-    // #region bars
-    this.chart.selectAll('.bar').data(data).transition().delay((_, index) => resizeUpdate ? 0 : index * delay).duration(durration).attr('d', this.getBarDAttrFn(xScale, yScale, height, hThickness, thickness));
-    // #endregion bars
-  };
-
-  getBarDAttrFn = (xScale, yScale, height, hThickness, thickness) => datum => `
-    M${xScale(datum.name)},${yScale(datum.value) + hThickness}
-    a${hThickness},${hThickness} 0 0 1 ${hThickness},${-hThickness}
-    a${hThickness},${hThickness} 0 0 1 ${hThickness},${hThickness}
-    v${height - yScale(datum.value) - hThickness}
-    h${-thickness}Z
-  `;
-  getXScale = (data, width) => d3.scaleBand().range([0, width]).domain(data.map(datum => datum.name)).paddingInner(1).paddingOuter(0.5);
-  getYScale = (data, height) => d3.scaleLinear().range([height, 0]).domain([0, d3.max(data, datum => Math.ceil(datum.value / 10) * 10)]);
-  render() {
-    const {
-      tooltipOpen,
-      dataIndex
-    } = this.state;
-    const {
-      data,
-      title
-    } = this.props;
-    return /*#__PURE__*/React.createElement(Fragment, null, title && /*#__PURE__*/React.createElement(ChartTitle, null, title), /*#__PURE__*/React.createElement(Chart, {
-      ref: el => {
-        this.chartEl = el;
-      }
-    }, data[dataIndex].tooltip && /*#__PURE__*/React.createElement(TooltipWrapper, {
-      ref: el => {
-        this.tooltipEl = el;
-      }
-    }, /*#__PURE__*/React.createElement(Tooltip, {
-      open: tooltipOpen,
-      position: "top",
-      animation: "fade",
-      html: data[dataIndex].tooltip,
-      theme: "light",
-      arrow: true,
-      duration: 200
-    }))));
-  }
-}
-BarChart.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  data: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.number.isRequired,
-    name: PropTypes.string,
-    tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-  })).isRequired,
-  colorTheme: PropTypes.oneOf(['default', 'red', 'blue'])
-};
-BarChart.defaultProps = {
-  title: '',
-  colorTheme: 'default'
-};
-export default BarChart;

package/dist/BarChart/BarChart.stories.js

@@ -1,46 +0,0 @@
-// import React from 'react'
-// import { BarChart } from './BarChart'
-// import { ComponentWrapper } from '../ComponentWrapper/ComponentWrapper.styles'
-
-// export default {
-//   title: 'Components Library/BarChart',
-//   component: BarChart,
-//   argTypes: {
-//     data: {
-//       type: 'array of shape',
-//       defaultValue: [{ value: 0 }, { name: '' }, { tooltip: '' }],
-//       required: true,
-//     },
-//     value: { type: 'number', required: true },
-//     name: { type: 'string' },
-//     tooltip: { type: 'string or node' },
-//     id: { type: 'string', required: true },
-//     title: { type: 'string', defaultValue: '' },
-//     colorTheme: { type: 'string', defaultValue: 'default' },
-//   },
-// }
-
-// const Template = args => (
-//   <ComponentWrapper>
-//     <BarChart {...args} />
-//   </ComponentWrapper>
-// )
-
-// export const BarChartDefault = Template.bind({})
-// BarChartDefault.args = {}
-
-// export const BarChartFull = Template.bind({})
-// BarChartFull.args = {
-//   data: [
-//     {
-//       value: 1560,
-//       name: 'Name',
-//       colorThem: 'red',
-//     },
-//   ],
-//   id: 'Identity',
-//   title: 'A Title',
-// }
-
-// doublecheck:
-// d3 causing SB to crash. cannot resolve

package/dist/BarChart/BarChart.styles.js

@@ -1,93 +0,0 @@
-import styled from 'styled-components/macro';
-import theme from 'styles/theme';
-export const Chart = styled.div`
-  position: relative;
-  display: block;
-  width: 100%;
-  height: auto;
-  overflow: hidden;
-
-  .axisX,
-  .axisY {
-    & > path {
-      stroke: #e1e1e1;
-    }
-
-    .tick {
-      text {
-        font-family: 'Open Sans';
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 20px;
-        /* fill: #9b9b9b; */
-        color: ${props => theme.cGrey2};
-      }
-
-      line {
-        stroke: none;
-      }
-    }
-  }
-
-  .axisY {
-    & > path {
-      stroke: none;
-    }
-  }
-
-  .gridX,
-  .gridY {
-    & > path {
-      stroke: none;
-    }
-  }
-
-  .gridX {
-    .tick line {
-      stroke: none;
-    }
-  }
-
-  .gridY {
-    .tick line {
-      stroke: #dfe5f1;
-    }
-  }
-`;
-export default Chart;
-export const TooltipWrapper = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-`;
-export const BarChartTooltip = styled.div`
-  font-size: 10px;
-  min-width: 40px;
-
-  & > h3 {
-    font-weight: 400;
-    font-family: 'Open Sans';
-    font-size: 16px;
-    margin: 0;
-    padding: 0;
-  }
-
-  & > p {
-    /* color: ${props => theme.cProgressDone}; */
-    color: #79ca65;
-    font-family: 'Open Sans';
-    font-size: 11px;
-    text-transform: uppercase;
-  }
-`;
-export const ChartTitle = styled.div`
-  font-family: 'Open Sans';
-  font-size: 12px;
-  line-height: 20px;
-  text-align: center;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  padding: 0;
-  margin: 0;
-`;