# Browse Variant List

<!-- User story defining a specific requirement within a business flow.
The name of the story should start with the actor followed by `--` and the story name.
 -->

<!-- This section should contain the following subsections in order: -->
<!-- 1. ## User Story (required) -->
<!-- 2. ## Story Diagram (required) -->
<!-- 3. ## Scenario Patterns (required) -->
<!-- 4. ## Test Cases (required) -->
<!-- 5. ## Screens (required) -->
<!-- 6. ## Resolvers (required) -->

## User Story

<!-- Define the user story in the format:
As a [role], I want [goal], so that [benefit].
 -->

As a viewer, I want to browse the list of variants for a product along with their Item SKUs, so that I can look up available product variants in the catalog.

## Story Diagram

<!-- Mermaid flowchart showing user interactions with screens.
Focus on actors, UI screens, and business outcomes.
Avoid technical details (APIs, databases, endpoints).
 -->

<!-- Code block requirements: -->
<!-- Minimum 1 mermaid code blocks required -->

```mermaid
flowchart TD
    A([Viewer]) --> B[Product Detail Screen]
    B --> C[Variant List Screen]
    C --> D{Variants Exist?}
    D -- No --> E[Show Empty State: No Variants Available]
    D -- Yes --> F[Display Variant List with SKUs and Attribute Values]
    F --> G[Back to Product Detail Screen]
```

## Scenario Patterns

<!-- List requirements: -->
<!-- Minimum 1 unordered lists required -->
<!-- Minimum 1 items per list -->

- Viewer opens a product's variant list and sees all generated Items with their SKUs and the attribute value combination each represents in read-only mode.
- When no variants exist for a product, an empty state is shown.

## Test Cases

<!-- List requirements: -->
<!-- Minimum 1 items per list -->

- Given variants have been generated for a product, when the variant list is opened, then each Item is shown with its SKU and attribute value combination.
- Given no variants exist for a product, when the variant list is opened, then an empty state is displayed.

## Screens

<!-- Link to screen docs that implement this story's UI.
 -->

<!-- List requirements: -->
<!-- Minimum 1 unordered lists required -->
<!-- Minimum 1 items per list -->

- [variant-list](../../../screen/variant-list.md)

## Resolvers

<!-- Link to resolver docs that implement this story's backend operations.
Write "None" if this story does not require any resolvers.
 -->

<!-- List requirements: -->
<!-- Minimum 1 items per list -->

- None
