@wix/design-system/dist/cjs/AnalyticsSummaryCard/docs/index.story.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireDefault(require("react"));
var _Sections = require("@wix/wix-storybook-utils/Sections");
var _storySettings = require("./storySettings");
var _IconButton = _interopRequireDefault(require("../../IconButton"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _ = _interopRequireDefault(require(".."));
var examples = _interopRequireWildcard(require("./examples"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AnalyticsSummaryCard/docs/index.story.jsx";
/* eslint-disable no-console */
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
var chartData = [{
  label: new Date('Thu Sep 4 2020'),
  value: 3
}, {
  label: new Date('Thu Sep 5 2020'),
  value: 17
}, {
  label: new Date('Thu Sep 6 2020'),
  value: 18
}];
var _default = exports["default"] = {
  category: "".concat(_storySettings.storySettings.category, "/AnalyticsSummary"),
  storyName: 'AnalyticsSummaryCard',
  component: _["default"],
  componentPath: '..',
  componentProps: {
    title: 'Sessions',
    titleTooltip: 'tooltip',
    value: '1,9K',
    valueTooltip: '1,943',
    trend: 12,
    invertedTrend: false,
    isTrendVisible: false,
    isLoading: false,
    chartHighlightedStartingIndex: 0,
    ctaButton: /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
      size: "tiny",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 46,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Refresh, {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 47,
        columnNumber: 9
      }
    })),
    onCTAClick: function onCTAClick() {
      return console.log('refresh click');
    },
    onClick: function onClick() {
      return console.log('general click');
    },
    alwaysShowCTA: false,
    onChartHover: function onChartHover() {
      return console.log('on chart hover');
    },
    chartWidth: 169,
    chartData: chartData,
    chartColorHex: '#3899ec',
    footer: /*#__PURE__*/_react["default"].createElement("div", {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 57,
        columnNumber: 13
      }
    }, " This is footer")
  },
  exampleProps: {},
  sections: [(0, _Sections.header)({
    sourceUrl: "https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/".concat(_["default"].displayName, "/")
  }), (0, _Sections.tabs)([(0, _Sections.tab)({
    title: 'Description',
    sections: [(0, _Sections.description)({
      title: 'Description',
      text: 'This line here should briefly describe component in just a sentence or two. It should be short and easy to read.'
    }), (0, _Sections.divider)(), (0, _Sections.title)('Examples'), (0, _Sections.example)({
      title: 'Simple Usage',
      text: 'a simple usage',
      source: examples.simple
    }), (0, _Sections.example)({
      title: 'Footer',
      text: "Summary card can have a footer for extra content.\n            The footer is a node box with no height limitation.",
      source: examples.footer
    }), (0, _Sections.example)({
      title: 'Trend',
      text: "The trend indicates the change of the value in percentage.\n            It has 2 modes:\n            Positive - colored green with arrow upwards\n            Negative - colored red with arrow downwards.\n            If there\u2019s no change in value, trend won\u2019t be displayed.",
      source: examples.trend
    }), (0, _Sections.example)({
      title: 'Action Button',
      text: "Summary card can have action button inside to assist with any action needed, since it\u2019s a node.",
      source: examples.actionButton
    }), (0, _Sections.example)({
      title: 'Clickable Card',
      text: "Card can be clickable or not",
      source: examples.clickable
    }), (0, _Sections.example)({
      title: 'Loader',
      text: "Card supports loading state.It will replace the action button when it\u2019s active.If the card is clickable it won\u2019t be as long the loader is active.",
      source: examples.loader
    }), (0, _Sections.example)({
      title: 'Sparkline Width',
      text: "Sparkline width is set by px only.The minimum width is 69px.\n            ",
      source: examples.sparkline
    }), (0, _Sections.example)({
      title: 'Tooltip On Title',
      text: "If needed, the title can have tooltip to better explain the context.\n            ",
      source: examples.tooltipOnTitle
    }), (0, _Sections.example)({
      title: 'Tooltip On Value',
      text: "When value appears as abbreviated number, tooltip will appear on hover.\n            ",
      source: examples.tooltipOnValue
    })]
  })].concat((0, _toConsumableArray2["default"])([{
    title: 'API',
    sections: [(0, _Sections.api)()]
  }, {
    title: 'Testkit',
    sections: [(0, _Sections.testkit)()]
  }, {
    title: 'Playground',
    sections: [(0, _Sections.playground)()]
  }].map(_Sections.tab))))]
};