@wix/design-system/dist/esm/MobilePreviewWidget/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/MobilePreviewWidget/docs/index.story.jsx";
import React from 'react';
import { header, tabs, tab, description, importExample, title, columns, divider, code, playground, api, testkit } from '@wix/wix-storybook-utils/Sections';
import { storySettings } from '../test/storySettings';
import MobilePreviewWidget from '..';
import Box from '../../Box';
import Text from '../../Text';
var childrenNodesExamples = [{
  label: 'Short Content',
  value: /*#__PURE__*/React.createElement(Box, {
    align: "center",
    verticalAlign: "middle",
    height: "100%",
    backgroundColor: "Y30",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28,
      columnNumber: 7
    }
  }, /*#__PURE__*/React.createElement(Text, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34,
      columnNumber: 9
    }
  }, "Content goes here"))
}, {
  label: 'Long Content',
  value: /*#__PURE__*/React.createElement(Box, {
    align: "center",
    verticalAlign: "middle",
    height: "650px",
    backgroundColor: "Y30",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41,
      columnNumber: 7
    }
  }, /*#__PURE__*/React.createElement(Text, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 9
    }
  }, "Content goes here"))
}];
var childNodeString = "<Box align=\"center\" verticalAlign=\"middle\" height=\"100%\" backgroundColor=\"Y30\">\n        <Text>Content goes here</Text>\n      </Box>";
export default {
  category: "".concat(storySettings.category, "/Preview"),
  storyName: 'MobilePreviewWidget',
  component: MobilePreviewWidget,
  componentPath: '..',
  componentProps: {
    dataHook: '',
    children: childrenNodesExamples[0].value,
    skin: 'neutral'
  },
  exampleProps: {
    children: childrenNodesExamples
  },
  sections: [header({
    sourceUrl: 'https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/MobilePreviewWidget/'
  }), tabs([tab({
    title: 'Description',
    sections: [columns([description({
      title: 'Description',
      text: 'Mobile preview widget. Displays custom content within a mobile device.'
    })]), columns([importExample("import { MobilePreviewWidget } from '@wix/design-system';")]), divider(), title('Examples'), columns([description({
      title: 'Simple Usage'
    }), code({
      compact: true,
      source: "<MobilePreviewWidget>".concat(childNodeString, "</MobilePreviewWidget>")
    })]), description({
      title: 'Skin',
      text: 'MobilePreviewWidget supports `neutral` (default), `gradient` and `custom` skins. To use `custom` skin, set it to `custom` and use the `backgroundColor` prop with the desired color'
    }), code({
      compact: true,
      source: "<Layout cols={2}>\n                    <MobilePreviewWidget skin='gradient'>".concat(childNodeString, "</MobilePreviewWidget>\n                    <MobilePreviewWidget skin='custom' backgroundColor='B10'>").concat(childNodeString, "</MobilePreviewWidget>\n                   </Layout>")
    })]
  })].concat(_toConsumableArray([{
    title: 'API',
    sections: [api()]
  }, {
    title: 'Testkit',
    sections: [testkit()]
  }, {
    title: 'Playground',
    sections: [playground()]
  }].map(tab))))]
};