wix-style-react
Version:
wix-style-react
42 lines (38 loc) • 2.03 kB
JavaScript
import React from 'react';
import Markdown from 'wix-storybook-utils/Markdown';
import { Layout, Cell } from 'wix-style-react/Layout';
import LiveCodeExample, { createPropsArray } from '../../utils/Components/LiveCodeExample';
var createStaticPopoverExample = function createStaticPopoverExample(props) {
return '\n<div\n style={{\n display: \'flex\',\n justifyContent: \'center\',\n alignItems: \'center\',\n overflow: \'auto\',\n height: 80\n }}\n>\n <Popover\n shown\n showArrow\n placement="right"\n appendTo="scrollParent"\n ' + createPropsArray(props).join('\n ') + '\n >\n <Popover.Element>\n <Button>I am a plain Button</Button>\n </Popover.Element>\n <Popover.Content>\n <div style={{ padding: \'12px 24px\', textAlign: \'center\', width: 180 }}>\n <Text size="small" skin="standard" weight="normal">\n I am a very long popover\'s content\n </Text>\n </div>\n </Popover.Content>\n </Popover>\n</div>\n';
};
export default (function () {
return React.createElement(
'div',
{ style: { maxWidth: 1254 }, 'data-hook': 'story-popover-flip-behaviour' },
React.createElement(Markdown, {
source: '\nThe `<Popover/>` uses the `flip` behaviour by default. This behaviour used to flip the\n`<Popover/>`\'s placement when it starts to overlap the target element (`<Popover.Element/>`).\n '
}),
React.createElement(
Layout,
null,
React.createElement(
Cell,
{ span: 6 },
React.createElement(LiveCodeExample, {
compact: true,
title: 'Flip enabled and placement="right"',
initialCode: createStaticPopoverExample({ flip: true })
})
),
React.createElement(
Cell,
{ span: 6 },
React.createElement(LiveCodeExample, {
compact: true,
title: 'Flip disabled and placement="right"',
initialCode: createStaticPopoverExample({ flip: false })
})
)
)
);
});