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

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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("../test/storySettings");
var _ = _interopRequireDefault(require(".."));
var _Box = _interopRequireDefault(require("../../Box"));
var _Text = _interopRequireDefault(require("../../Text"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/MobilePreviewWidget/docs/index.story.jsx";
var childrenNodesExamples = [{
  label: 'Short Content',
  value: /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    align: "center",
    verticalAlign: "middle",
    height: "100%",
    backgroundColor: "Y30",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34,
      columnNumber: 9
    }
  }, "Content goes here"))
}, {
  label: 'Long Content',
  value: /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    align: "center",
    verticalAlign: "middle",
    height: "650px",
    backgroundColor: "Y30",
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 41,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    __self: void 0,
    __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>";
var _default = exports["default"] = {
  category: "".concat(_storySettings.storySettings.category, "/Preview"),
  storyName: 'MobilePreviewWidget',
  component: _["default"],
  componentPath: '..',
  componentProps: {
    dataHook: '',
    children: childrenNodesExamples[0].value,
    skin: 'neutral'
  },
  exampleProps: {
    children: childrenNodesExamples
  },
  sections: [(0, _Sections.header)({
    sourceUrl: 'https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/MobilePreviewWidget/'
  }), (0, _Sections.tabs)([(0, _Sections.tab)({
    title: 'Description',
    sections: [(0, _Sections.columns)([(0, _Sections.description)({
      title: 'Description',
      text: 'Mobile preview widget. Displays custom content within a mobile device.'
    })]), (0, _Sections.columns)([(0, _Sections.importExample)("import { MobilePreviewWidget } from '@wix/design-system';")]), (0, _Sections.divider)(), (0, _Sections.title)('Examples'), (0, _Sections.columns)([(0, _Sections.description)({
      title: 'Simple Usage'
    }), (0, _Sections.code)({
      compact: true,
      source: "<MobilePreviewWidget>".concat(childNodeString, "</MobilePreviewWidget>")
    })]), (0, _Sections.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'
    }), (0, _Sections.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((0, _toConsumableArray2["default"])([{
    title: 'API',
    sections: [(0, _Sections.api)()]
  }, {
    title: 'Testkit',
    sections: [(0, _Sections.testkit)()]
  }, {
    title: 'Playground',
    sections: [(0, _Sections.playground)()]
  }].map(_Sections.tab))))]
};