@stokr/components-library 2.3.65-beta.1 → 2.3.65-beta.11

package/dist/components/BarChart/BarChart.js

@@ -1,263 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BarChart = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var d3 = _interopRequireWildcard(require("d3"));
-var _reactTippy = require("react-tippy");
-var _BarChart2 = require("./BarChart.styles");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
-  inspired on https://blog.risingstack.com/d3-js-tutorial-bar-charts-with-javascript/
-*/
-const gradients = {
-  default: {
-    start: '#0050ca',
-    end: '#0050ca'
-  },
-  red: {
-    start: '#f24f45',
-    end: '#ee220d'
-  },
-  blue: {
-    start: '#6a97e0',
-    end: '#0050ca'
-  }
-};
-class BarChart extends _react.PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "transitionDuration", 800);
-    _defineProperty(this, "transitionDatumDelay", 100);
-    _defineProperty(this, "state", {
-      tooltipOpen: false,
-      dataIndex: 0
-    });
-    _defineProperty(this, "onResize", () => {
-      clearTimeout(this.resizeTimeout);
-      this.resizeTimeout = setTimeout(this.onResizeTimeout, 200);
-    });
-    _defineProperty(this, "onResizeTimeout", () => {
-      this.updateChart(true);
-    });
-    _defineProperty(this, "onScroll", e => {
-      if (this.drawn) return;
-      if (this.chartEl.getBoundingClientRect().top < window.innerHeight) {
-        this.initialDrawChart();
-      }
-    });
-    _defineProperty(this, "initialDrawChart", () => {
-      this.updateChart();
-      this.drawn = true;
-    });
-    _defineProperty(this, "createChart", () => {
-      if (!this.chartEl) return;
-      const {
-        id,
-        data,
-        colorTheme
-      } = this.props;
-      const initData = data.map(datum => _objectSpread(_objectSpread({}, 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(".concat(margin.left, ", ").concat(margin.top, ")"));
-      const defs = this.svg.append('defs');
-
-      // #region gradient
-      const gradient = defs.append('linearGradient').attr('id', "".concat(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, ".concat(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(".concat(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, ".concat(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(".concat(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(#".concat(id, "-barChart-gradient)")).attr('transform', "translate(".concat(-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
-    });
-    _defineProperty(this, "setTooltip", (opened, dataIndex) => {
-      const newState = {
-        tooltipOpen: opened
-      };
-      if (dataIndex !== undefined) newState.dataIndex = dataIndex;
-      this.setState(newState);
-    });
-    _defineProperty(this, "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 = "".concat(x, "px");
-      this.chartContext.tooltipEl.style.top = "".concat(y, "px");
-      this.chartContext.setTooltip(true, i);
-    });
-    _defineProperty(this, "onMouseLeave", function onMouseLeave(d, i) {
-      this.chartContext.setTooltip(false);
-    });
-    _defineProperty(this, "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, ".concat(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(".concat(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, ".concat(height, ")")).call(d3.axisBottom().scale(xScale).tickValues(tickValues));
-      // #endregion x axis
-
-      // #region y axis
-      this.yAxis.transition().duration(durration).attr('transform', "translate(".concat(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
-    });
-    _defineProperty(this, "getBarDAttrFn", (xScale, yScale, height, hThickness, thickness) => datum => "\n    M".concat(xScale(datum.name), ",").concat(yScale(datum.value) + hThickness, "\n    a").concat(hThickness, ",").concat(hThickness, " 0 0 1 ").concat(hThickness, ",").concat(-hThickness, "\n    a").concat(hThickness, ",").concat(hThickness, " 0 0 1 ").concat(hThickness, ",").concat(hThickness, "\n    v").concat(height - yScale(datum.value) - hThickness, "\n    h").concat(-thickness, "Z\n  "));
-    _defineProperty(this, "getXScale", (data, width) => d3.scaleBand().range([0, width]).domain(data.map(datum => datum.name)).paddingInner(1).paddingOuter(0.5));
-    _defineProperty(this, "getYScale", (data, height) => d3.scaleLinear().range([height, 0]).domain([0, d3.max(data, datum => Math.ceil(datum.value / 10) * 10)]));
-  }
-  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);
-  }
-  render() {
-    const {
-      tooltipOpen,
-      dataIndex
-    } = this.state;
-    const {
-      data,
-      title
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_BarChart2.ChartTitle, null, title), /*#__PURE__*/_react.default.createElement(_BarChart2.Chart, {
-      ref: el => {
-        this.chartEl = el;
-      }
-    }, data[dataIndex].tooltip && /*#__PURE__*/_react.default.createElement(_BarChart2.TooltipWrapper, {
-      ref: el => {
-        this.tooltipEl = el;
-      }
-    }, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
-      open: tooltipOpen,
-      position: "top",
-      animation: "fade",
-      html: data[dataIndex].tooltip,
-      theme: "light",
-      arrow: true,
-      duration: 200
-    }))));
-  }
-}
-exports.BarChart = BarChart;
-BarChart.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  title: _propTypes.default.string,
-  data: _propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.number.isRequired,
-    name: _propTypes.default.string,
-    tooltip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
-  })).isRequired,
-  colorTheme: _propTypes.default.oneOf(['default', 'red', 'blue'])
-};
-BarChart.defaultProps = {
-  title: '',
-  colorTheme: 'default'
-};
-var _default = exports.default = BarChart;

package/dist/components/BarChart/BarChart.stories.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BarChartFull = exports.BarChartDefault = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BarChart = require("./BarChart");
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/BarChart',
-  component: _BarChart.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 => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_BarChart.BarChart, args)));
-const BarChartDefault = exports.BarChartDefault = Template.bind({});
-BarChartDefault.args = {};
-const BarChartFull = exports.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/components/BarChart/BarChart.styles.js

@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TooltipWrapper = exports.ChartTitle = exports.Chart = exports.BarChartTooltip = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _theme = _interopRequireDefault(require("../../styles/theme"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Chart = exports.Chart = _styledComponents.default.div.withConfig({
-  displayName: "BarChartstyles__Chart",
-  componentId: "sc-2ptm80-0"
-})(["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;color:", ";}line{stroke:none;}}}.axisY{& > path{stroke:none;}}.gridX,.gridY{& > path{stroke:none;}}.gridX{.tick line{stroke:none;}}.gridY{.tick line{stroke:#dfe5f1;}}"], props => _theme.default.cGrey2);
-var _default = exports.default = Chart;
-const TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div.withConfig({
-  displayName: "BarChartstyles__TooltipWrapper",
-  componentId: "sc-2ptm80-1"
-})(["position:absolute;top:0;left:0;pointer-events:none;"]);
-const BarChartTooltip = exports.BarChartTooltip = _styledComponents.default.div.withConfig({
-  displayName: "BarChartstyles__BarChartTooltip",
-  componentId: "sc-2ptm80-2"
-})(["font-size:10px;min-width:40px;& > h3{font-weight:400;font-family:'Open Sans';font-size:16px;margin:0;padding:0;}& > p{color:#79ca65;font-family:'Open Sans';font-size:11px;text-transform:uppercase;}"]);
-const ChartTitle = exports.ChartTitle = _styledComponents.default.div.withConfig({
-  displayName: "BarChartstyles__ChartTitle",
-  componentId: "sc-2ptm80-3"
-})(["font-family:'Open Sans';font-size:12px;line-height:20px;text-align:center;letter-spacing:2px;text-transform:uppercase;padding:0;margin:0;"]);

package/dist/components/BarChartLegend/BarChartLegend.js

@@ -1,79 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BarChartLegend = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var d3 = _interopRequireWildcard(require("d3"));
-var _BarChartLegend2 = require("./BarChartLegend.styles");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const gradients = {
-  default: {
-    start: '#0050ca',
-    end: '#0050ca'
-  },
-  red: {
-    start: '#f24f45',
-    end: '#ee220d'
-  },
-  blue: {
-    start: '#6a97e0',
-    end: '#0050ca'
-  }
-};
-class BarChartLegend extends _react.PureComponent {
-  constructor() {
-    super(...arguments);
-    _defineProperty(this, "createChart", () => {
-      if (!this.barEl) return;
-      const {
-        id,
-        colorTheme
-      } = this.props;
-      const width = 50;
-      const thickness = 6;
-      const radius = thickness / 2;
-      this.svg = d3.select(this.barEl).append('svg').attr('width', width).attr('height', thickness);
-      this.defs = this.svg.append('defs');
-
-      // #region gradient
-      this.gradient = this.defs.append('linearGradient').attr('id', "".concat(id, "-barChartLegend-gradient")).attr('x1', '0%').attr('x2', '100%').attr('y1', '50%').attr('y2', '50%');
-      this.gradient.append('stop').attr('class', 'start').attr('offset', '0%').attr('stop-color', gradients[colorTheme].start).attr('stop-opacity', 1);
-      this.gradient.append('stop').attr('class', 'end').attr('offset', '100%').attr('stop-color', gradients[colorTheme].end).attr('stop-opacity', 1);
-      // #endregion gradient
-
-      // #region bars
-      this.bar = this.svg.append('path').attr('class', 'bar').style('fill', "url(#".concat(id, "-barChartLegend-gradient)")).attr('d', item => "\n        M 0 0\n        A ".concat(radius, " ").concat(radius, " 0 0 1 ").concat(radius, " ").concat(-radius, "\n        H ").concat(width - radius, "\n        A ").concat(radius, " ").concat(radius, " 0 0 1 ").concat(width, " 0\n        A ").concat(radius, " ").concat(radius, " 0 0 1 ").concat(width - radius, " ").concat(radius, "\n        H ").concat(radius, "\n        A ").concat(radius, " ").concat(radius, " 0 0 1 0 0 \n        Z\n      ")).attr('transform', "translate(0, ".concat(radius, ")"));
-      // #endregion bars
-    });
-  }
-  componentDidMount() {
-    this.createChart();
-  }
-  render() {
-    const {
-      label
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_BarChartLegend2.Container, null, /*#__PURE__*/_react.default.createElement(_BarChartLegend2.Bar, {
-      ref: el => {
-        this.barEl = el;
-      }
-    }), /*#__PURE__*/_react.default.createElement(_BarChartLegend2.Label, null, label));
-  }
-}
-exports.BarChartLegend = BarChartLegend;
-BarChartLegend.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  label: _propTypes.default.string.isRequired,
-  colorTheme: _propTypes.default.oneOf(['default', 'red', 'blue'])
-};
-BarChartLegend.defaultProps = {
-  colorTheme: 'default'
-};
-var _default = exports.default = BarChartLegend;

package/dist/components/BarChartLegend/BarChartLegend.styles.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Label = exports.Container = exports.Bar = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _theme = _interopRequireDefault(require("../../styles/theme"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Container = exports.Container = _styledComponents.default.div.withConfig({
-  displayName: "BarChartLegendstyles__Container",
-  componentId: "sc-442fg9-0"
-})(["position:relative;font-size:0;padding:2px 0;"]);
-const Bar = exports.Bar = _styledComponents.default.div.withConfig({
-  displayName: "BarChartLegendstyles__Bar",
-  componentId: "sc-442fg9-1"
-})(["z-index:1;position:relative;display:inline-block;vertical-align:middle;width:50px;margin-right:-50px;"]);
-const Label = exports.Label = _styledComponents.default.div.withConfig({
-  displayName: "BarChartLegendstyles__Label",
-  componentId: "sc-442fg9-2"
-})(["z-index:0;position:relative;display:inline-block;vertical-align:middle;padding-left:70px;max-width:100%;color:", ";font-size:11px;line-height:16px;"], props => _theme.default.cGrey2);

package/dist/components/BasicTable/BasicTable.stories.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.BasicTableSeveral = exports.BasicTableExample = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _BasicTable = _interopRequireDefault(require("./BasicTable"));
-var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
-var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Components Library/Basic Table',
-  component: _BasicTable.default,
-  argTypes: {
-    data: {
-      type: 'array of shape with two strings',
-      required: true,
-      defaultValue: [{
-        lable: ''
-      }]
-    },
-    filled: {
-      defaultValue: ''
-    },
-    smallPadding: {
-      defaultValue: ''
-    }
-  }
-};
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_BasicTable.default, args)));
-const BasicTableExample = exports.BasicTableExample = Template.bind({});
-BasicTableExample.args = {
-  data: [{
-    lable: 'table lable',
-    value: 'a value'
-  }]
-};
-const BasicTableSeveral = exports.BasicTableSeveral = Template.bind({});
-BasicTableSeveral.args = {
-  data: [{
-    lable: 'table lable',
-    value: 'a value'
-  }, {
-    lable: 'table lable 1',
-    value: 'another value'
-  }, {
-    lable: 'table lable 2',
-    value: 'and another'
-  }, {
-    lable: 'table lable 3',
-    value: 'value'
-  }]
-};
-
-//doublecheck:
-// why is lable not showing?
-// took out {value:''} from default data array
-// because since merge it includes a caption component that breaks SB