wix-style-react
Version:
113 lines (111 loc) • 3.02 kB
JavaScript
export const _structure = `
<StorybookComponents.Placeholder>
<Dropzone>
<Dropzone.Overlay>
<StorybookComponents.Background skin="blue">
<StorybookComponents.Stack
height="300px"
alignItems="center"
justifyContent="center"
width="100%"
>
Release on this Overlay to upload
</StorybookComponents.Stack>
</StorybookComponents.Background>
</Dropzone.Overlay>
<Dropzone.Content>
<StorybookComponents.Stack
height="300px"
alignItems="center"
justifyContent="center"
>
Drag file to this Dropzone
</StorybookComponents.Stack>
</Dropzone.Content>
</Dropzone>
</StorybookComponents.Placeholder>;
`;
export const _addItem = `
<Card>
<Card.Header
title={
<Stepper
activeStep={1}
steps={[
{ text: 'Prepare', type: 'completed' },
{ text: 'Upload' },
{ text: 'Match', type: 'disabled' },
{ text: 'Label', type: 'disabled' },
]}
/>
}
/>
<Card.Divider />
<Card.Content>
<Layout gap="24px">
<Cell>
<Heading appearance="H4">Upload your file</Heading>
</Cell>
<Cell>
<Dropzone onDrop={() => {}}>
<Dropzone.Overlay>
<Box
direction="vertical"
height="100%"
boxSizing="border-box"
border="dashed 1px"
borderRadius="6px"
borderColor="B20"
>
<AddItem theme="filled" size="large">
Drop Your Images Here
</AddItem>
</Box>
</Dropzone.Overlay>
<Dropzone.Content>
<Box
direction="vertical"
border="dashed 1px"
boxSizing="border-box"
borderRadius="6px"
padding="42px"
borderColor="B20"
>
<EmptyState
title="Drag Your Images Here"
subtitle="Or upload images from your computer"
image="generic_add_item_illustration.svg"
>
<FileUpload>
{({ openFileUploadDialog }) => (
<TextButton
onClick={openFileUploadDialog}
prefixIcon={<Icons.Upload />}
>
Upload Images
</TextButton>
)}
</FileUpload>
</EmptyState>
</Box>
</Dropzone.Content>
</Dropzone>
</Cell>
<Cell>
<Box width="100%" align="space-between">
<Button
size="small"
priority="secondary"
prefixIcon={<Icons.ChevronLeftSmall />}
>
Back
</Button>
<Button size="small" disabled>
Next
</Button>
</Box>
</Cell>
</Layout>
</Card.Content>
</Card>;
`;