@wix/design-system/dist/cjs/FloatingHelper/FloatingHelperContent/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 _ = _interopRequireDefault(require(".."));
var _Box = _interopRequireDefault(require("../../../Box/Box"));
var _Text = _interopRequireDefault(require("../../../Text/Text"));
var _storySettings = require("./storySettings");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var examples = _interopRequireWildcard(require("./examples"));
var _react2 = _interopRequireDefault(require("@storybook/addon-links/react"));
var _Sections = require("@wix/wix-storybook-utils/Sections");
var _storiesHierarchy = require("../../../../stories/storiesHierarchy");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FloatingHelper/FloatingHelperContent/docs/index.story.jsx";
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 image = /*#__PURE__*/_react["default"].createElement(_wixUiIconsCommon.Image, {
  width: "102",
  height: "102",
  __self: void 0,
  __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["default"].createElement(_Box["default"], {
      align: "center",
      verticalAlign: "middle",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 53,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
      light: true,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 54,
        columnNumber: 11
      }
    }, "This is a footer of a dark skin"))
  }, {
    label: 'Light skin',
    value: /*#__PURE__*/_react["default"].createElement(_Box["default"], {
      align: "center",
      verticalAlign: "middle",
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 61,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 62,
        columnNumber: 11
      }
    }, "This is a footer of a light skin"))
  }]
};
var _default = exports["default"] = {
  category: "".concat(_storySettings.storySettings.category, "/FloatingHelper"),
  storyName: 'FloatingHelperContent',
  component: _["default"],
  componentPath: '..',
  componentProps: componentProps,
  exampleProps: exampleProps,
  sections: [(0, _Sections.header)({
    sourceUrl: 'https://github.com/wix-private/wix-design-systems/tree/master/packages/wix-design-system/src/FloatingHelper/FloatingHelperContent'
  }), (0, _Sections.tabs)([(0, _Sections.tab)({
    title: 'Description',
    sections: [(0, _Sections.columns)([(0, _Sections.description)({
      title: 'Description',
      text: ['This component should be used with the "content" prop of the  ', /*#__PURE__*/_react["default"].createElement(_react2["default"], {
        kind: _storiesHierarchy.Category.COMPONENTS,
        story: "FloatingHelper",
        __self: void 0,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 92,
          columnNumber: 17
        }
      }, "<FloatingHelper/>"), ' component.']
    })]), (0, _Sections.divider)(), (0, _Sections.title)('Examples'), (0, _Sections.example)({
      title: 'skin',
      text: '`<FloatingHelper.Content/>` has two skins: `dark` (default) and `light`.',
      source: examples.skin,
      previewProps: previewProps
    }), (0, _Sections.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
    }), (0, _Sections.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((0, _toConsumableArray2["default"])([{
    title: 'API',
    sections: [(0, _Sections.api)()]
  }, {
    title: 'Testkit',
    sections: [(0, _Sections.testkit)()]
  }, {
    title: 'Playground',
    sections: [(0, _Sections.playground)()]
  }].map(_Sections.tab))))]
};