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

@wix/design-system

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/AnalyticsSummaryCard/docs/index.story.jsx";
/* eslint-disable no-console */
import React from 'react';
import { header, tabs, tab, description, title, divider, example, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from './storySettings';
import IconButton from '../../IconButton';
import { Refresh } from '@wix/wix-ui-icons-common';
import AnalyticsSummaryCard from '..';
import * as examples from './examples';
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
}];
export default {
  category: "".concat(storySettings.category, "/AnalyticsSummary"),
  storyName: 'AnalyticsSummaryCard',
  component: AnalyticsSummaryCard,
  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.createElement(IconButton, {
      size: "tiny",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 46,
        columnNumber: 7
      }
    }, /*#__PURE__*/React.createElement(Refresh, {
      __self: this,
      __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.createElement("div", {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 57,
        columnNumber: 13
      }
    }, " This is footer")
  },
  exampleProps: {},
  sections: [header({
    sourceUrl: "https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/".concat(AnalyticsSummaryCard.displayName, "/")
  }), tabs([tab({
    title: 'Description',
    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.'
    }), divider(), title('Examples'), example({
      title: 'Simple Usage',
      text: 'a simple usage',
      source: examples.simple
    }), 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
    }), 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
    }), 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
    }), example({
      title: 'Clickable Card',
      text: "Card can be clickable or not",
      source: examples.clickable
    }), 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
    }), example({
      title: 'Sparkline Width',
      text: "Sparkline width is set by px only.The minimum width is 69px.\n            ",
      source: examples.sparkline
    }), example({
      title: 'Tooltip On Title',
      text: "If needed, the title can have tooltip to better explain the context.\n            ",
      source: examples.tooltipOnTitle
    }), example({
      title: 'Tooltip On Value',
      text: "When value appears as abbreviated number, tooltip will appear on hover.\n            ",
      source: examples.tooltipOnValue
    })]
  })].concat(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};