# Image Assets

This folder contains all image assets used by the UI library components.

## Structure

- Place all image files (PNG, SVG, JPG, etc.) in this directory
- Use descriptive file names (e.g., `test-case-icon.svg`, `empty-state-default.png`)
- For component-specific images, consider creating subdirectories if needed

## Available Images

The following images are configured for use in empty state components:

- `TestCaseIcon.png` - Test case/document with gear icon
- `SearchIcon.png` - Magnifying glass with question mark
- `FilesIcon.png` - Folder/upload icon
- `DashboardIcon.png` - Dashboard overview cards
- `StepsIcon.png` - Checklist / tasks icon
- `document-gear-icon.svg` - Document with gear overlay
- `ReportsIcon.png` - Analytics/Reports chart icon
- `SearchIcon.png` - Default fallback icon

## Usage

### Using Image Constants

Import the image constants for type-safe access:

```typescript
import { EMPTY_STATE_IMAGES } from '../assets/images/image-assets.constants';

// In component
imageUrl: EMPTY_STATE_IMAGES.TEST_CASE
```

### Direct Path Reference

You can also reference images directly:

```typescript
// Example in component
imageUrl: 'assets/images/test-case-icon.svg'
```

### In Storybook

Images are automatically available in Storybook stories:

```typescript
import { EMPTY_STATE_IMAGES } from '../assets/images/image-assets.constants';

export const MyStory = Template.bind({});
MyStory.args = {
  imageUrl: EMPTY_STATE_IMAGES.TEST_CASE,
  // ...
};
```

## Notes

- Keep image file sizes optimized for web
- Use SVG format when possible for scalability
- Ensure all images are properly licensed for use in the library
- Images will be included in the built library and available to consuming applications