wix-style-react/src/ImageViewer/docs/ImageViewer.examples.js

wix-style-react

export const _dimensions = `
<ImageViewer width="35%" height="240px"/>
`;

export const _status = `
<StorybookComponents.Stack>
  <ImageViewer status="error" />
  <ImageViewer status="warning" />
  <ImageViewer status="loading" />
</StorybookComponents.Stack>;
`;

export const _statusMessage = `
<ImageViewer status="error" statusMessage="Message explaining the status" />;
`;

export const _states = `
<StorybookComponents.Stack>
  <ImageViewer />
  <ImageViewer imageUrl="example.jpg" />
</StorybookComponents.Stack>;
`;

export const _borderRadius = `
<ImageViewer imageUrl="example.jpg" removeRoundedBorders />;
`;

export const _disabled = `
<ImageViewer
  disabled
  addImageInfo="Message explaining disabled item status"
/>;
`;

export const _actions = `
  <ImageViewer
    imageUrl="example.jpg"
    showUpdateButton={true}
    showDownloadButton={true}
    showRemoveButton={true}
    updateImageInfo="Change image"
    downloadImageInfo="Download image"
    removeImageInfo="Delete image"
    moreImageInfo="More actions"
  />;
`;

export const _form = `
<Card>
  <Card.Header title="Program Info" />
  <Card.Divider />
  <Card.Content>
    <Layout>
      <Cell span={8}>
        <Box direction="vertical" gap="12px">
          <FormField label="Program name" required>
            <Input value="Sugar Reset" />
          </FormField>
          <FormField label="Description">
            <InputArea
              value="Want to feel better, have more energy and trim down your waistline at the same time? Removing refined and added sugar from your diet is for you!"
              resizable
              maxLength={100}
              hasCounter
              minHeight={120}
            />
          </FormField>
        </Box>
      </Cell>
      <Cell span={4}>
        <FormField label="Cover Image">
          <ImageViewer imageUrl="FoodExample1.jpg" height="218px" />
        </FormField>
      </Cell>
    </Layout>
  </Card.Content>
</Card>;
`;