@stokr/components-library 0.5.4 → 0.5.6

package/dist/BackButton/BackButton.styles.js

@@ -0,0 +1,110 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,258 @@
+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

@@ -0,0 +1,46 @@
+// 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

@@ -0,0 +1,93 @@
+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;
+`;