## Feature Examples

### Dimensions
- description: Specify the component's dimensions in pixels or by percentage using the `width` and `height` properties.
- example:
```jsx
<ImageViewer width="35%" height="240px" />;
```

### Status
- description: Control the component's status using the `status` prop. It supports three states: - `error` indicates when an image failed to upload. - `warning` highlights that the media can't be validated. - `loading` shows that the media file is loading.
- example:
```jsx
<StorybookComponents.Stack>
  <ImageViewer status="error" />
  <ImageViewer status="warning" />
  <ImageViewer status="loading" />
</StorybookComponents.Stack>;
```

### Status message
- description: Add text that explains the status or what action the user should take with the `statusMessage` prop. Showing the status message inline, directly below the image viewer is preferred in all default cases. - To add an accessible inline message, wrap the component in a `<FormField/>` and add the `statusMessage`. - To add a status message in a tooltip that requires users to hover on the icon, use the `statusMessage` prop. Control tooltip placement with `tooltipPlacement` prop. View more inline status message examples in `<FormField/>`.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack flexDirection="column" gap="12px">
    <Text secondary>For all default cases:</Text>
    <FormField status="error" statusMessage="This is an error message.">
      <ImageViewer />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="12px">
    <Text secondary>For narrow layouts only:</Text>
    <ImageViewer status="error" statusMessage="This is an error message." />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### States
- description: Supports two states: - No image source - uses `<AddItem/>` component to upload media in a required way. Use `addImageInfo` to specify a message to display in a tooltip when users hover over the component. - With image source - use `imageUrl` prop to pass a link to a media file.
- example:
```jsx
<StorybookComponents.Stack>
  <ImageViewer />
  <ImageViewer imageUrl="example.jpg" />
</StorybookComponents.Stack>;
```

### Border radius
- description: Remove default corner radius with the `removeRoundedBorders` prop. Use it when component is used as a part of another widget.
- example:
```jsx
<ImageViewer imageUrl="example.jpg" removeRoundedBorders />;
```

### Disabled
- description: Disable all viewer interactions with the `disabled` prop. Use it to highlight unavailable functions. Customize the tooltip's style with all common `tooltipProps`.
- example:
```jsx
<ImageViewer disabled addImageInfo="Message explaining disabled item status" />;
```

### Actions
- description: Control which actions are visible with the `showUpdateButton`, `showDownloadButton` and `showRemoveButton` props. Tooltip messages explaining the actions can be customized according to their need.
- example:
```jsx
<ImageViewer
  imageUrl="example.jpg"
  showUpdateButton={true}
  showDownloadButton={true}
  showRemoveButton={true}
  updateImageInfo="Change image"
  downloadImageInfo="Download image"
  removeImageInfo="Delete image"
  moreImageInfo="More actions"
/>;
```

## Common Use Case Examples

### Form
- description: Use image viewer in forms where only a single image can be uploaded at a time, e.g., a cover for an event, group or program.
- example:
```jsx
<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="120px"
            />
          </FormField>
        </Box>
      </Cell>
      <Cell span={4}>
        <FormField label="Cover image">
          <ImageViewer imageUrl="FoodExample1.jpg" height="218px" />
        </FormField>
      </Cell>
    </Layout>
  </Card.Content>
</Card>;
```