Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | import React from 'react';
import { Typography } from '@mui/material';
import { Story } from '@storybook/react';
import PlacementWrapper, { PlacementWrapperProps } from '../components/PlacementWrapper';
import { Button } from '../index';
export default {
title: 'PlacementWrapper',
component: PlacementWrapper,
argTypes: {
objectPlacement: {
options: [
'top-start',
'top',
'top-end',
'bottom-start',
'bottom',
'bottom-end',
'left-start',
'left',
'left-end',
'right-start',
'right',
'right-end',
],
control: { type: 'radio' },
},
},
};
const Template: Story<PlacementWrapperProps> = (args) => <PlacementWrapper {...args} />;
const WithElements: Story<PlacementWrapperProps> = (args) => (
<Template {...args} placedObject={<Button icon={'iconComment'} onClick={() => null} />}>
<Typography
width={'100%'}
height={'100px'}
display={'flex'}
border={'1px solid black'}
borderRadius={'8px'}
padding={'8px'}
textAlign={'center'}
style={{ backgroundColor: 'lightgrey' }}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</Typography>
</Template>
);
export const Default = WithElements.bind({});
|