@wix/design-system/dist/esm/FloatingHelper/FloatingHelperContent/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/FloatingHelper/FloatingHelperContent/docs/index.story.jsx";
import React from 'react';
import FloatingHelperContent from '..';
import Box from '../../../Box/Box';
import Text from '../../../Text/Text';
import { storySettings } from './storySettings';
import { Image } from '@wix/wix-ui-icons-common';
import * as examples from './examples';
import LinkTo from '@storybook/addon-links/react';
import { header, tabs, tab, description, title, divider, example, playground, api, testkit, columns } from '@wix/wix-storybook-utils/Sections';
import { Category } from '../../../../stories/storiesHierarchy';
var image = /*#__PURE__*/React.createElement(Image, {
  width: "102",
  height: "102",
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 26,
    columnNumber: 15
  }
});
var componentProps = {
  title: 'This is the title',
  body: 'This is the a long text which is passed in the "body" property',
  actionText: 'Ok, Take Me There!',
  onActionClick: function onActionClick() {
    return 'I was called!';
  },
  skin: 'light',
  actionSkin: 'standard'
};
var previewProps = {
  style: {
    width: '75%',
    display: 'block',
    marginLeft: 'auto',
    marginRight: 'auto'
  }
};
var exampleProps = {
  onActionClick: function onActionClick() {
    return 'I was called!';
  },
  image: [{
    label: 'with image',
    value: image
  }],
  footer: [{
    label: 'Dark skin',
    value: /*#__PURE__*/React.createElement(Box, {
      align: "center",
      verticalAlign: "middle",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 53,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement(Text, {
      light: true,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 54,
        columnNumber: 11
      }
    }, "This is a footer of a dark skin"))
  }, {
    label: 'Light skin',
    value: /*#__PURE__*/React.createElement(Box, {
      align: "center",
      verticalAlign: "middle",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 61,
        columnNumber: 9
      }
    }, /*#__PURE__*/React.createElement(Text, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 62,
        columnNumber: 11
      }
    }, "This is a footer of a light skin"))
  }]
};
export default {
  category: "".concat(storySettings.category, "/FloatingHelper"),
  storyName: 'FloatingHelperContent',
  component: FloatingHelperContent,
  componentPath: '..',
  componentProps: componentProps,
  exampleProps: exampleProps,
  sections: [header({
    sourceUrl: 'https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/FloatingHelper/FloatingHelperContent'
  }), tabs([tab({
    title: 'Description',
    sections: [columns([description({
      title: 'Description',
      text: ['This component should be used with the "content" prop of the  ', /*#__PURE__*/React.createElement(LinkTo, {
        kind: Category.COMPONENTS,
        story: "FloatingHelper",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 92,
          columnNumber: 17
        }
      }, "<FloatingHelper/>"), ' component.']
    })]), divider(), title('Examples'), example({
      title: 'skin',
      text: '`<FloatingHelper.Content/>` has two skins: `dark` (default) and `light`.',
      source: examples.skin,
      previewProps: previewProps
    }), example({
      title: 'Action Button Skins',
      text: '`<FloatingHelper.Content/>` action button has 5 action skins: `white` (default) , `standard`, `standardPrimary`, `premium` and `lightPrimary`.',
      source: examples.actionThemes,
      previewProps: previewProps
    }), example({
      title: 'Direction',
      text: 'Control the direction value. It supports 2 values: `horizontal` (default) - use it for small illustration cases `vertical` - use it when the illustration is too big to lay next to the content.',
      source: examples.direction,
      previewProps: previewProps
    })]
  })].concat(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};