# Storybook component demo — a 1:1 square clip for a component library.
# Demonstrates: targeting a Storybook URL with story args, hover/click,
# scoped square aspect for design-system pages.

title: "Button — loading state"
render:
  preset: paper
  aspect: "1:1"
  quality: "1080p"

steps:
  - type: goto
    url: https://design.example.com/?path=/story/button--default&args=loading:true

  - type: hover
    target: { role: button, name: "Click me" }

  - type: click
    target: { role: button, name: "Click me" }

  - type: wait
    ms: 1500
    caption:
      text: "Loading state spins for 1.5s"