{% stories breadcrumb with { title: 'Components/breadcrumb' } %}

{% story default with {
    name: '1. Default Breadcrumb',
    args: { 
      breadcrumb_style: 'default',
      breadcrumb: [{"text":"Home","url":"\/page\/1"},{"text":"Profile","url":"\/page\/2"},{"text":"Contact","url":"\/page\/3"},{"text":"Settings","url":"\/settings"}]
    }
  } %}
{% embed 'components:breadcrumb' with { 
  breadcrumb_style: breadcrumb_style,
  breadcrumb: breadcrumb
} %}{% endembed %}
{% endstory %}

{% story primary with {
    name: '2. Primary Breadcrumb',
    args: { 
      breadcrumb_style: 'primary',
      breadcrumb: [{"text":"Home","url":"\/page\/1"},{"text":"Profile","url":"\/page\/2"},{"text":"Contact","url":"\/page\/3"},{"text":"Settings","url":"\/settings"}]
    }
  } %}
{% embed 'components:breadcrumb' with { 
  breadcrumb_style: breadcrumb_style,
  breadcrumb: breadcrumb
} %}{% endembed %}
{% endstory %}

{% story secondary with {
    name: '3. Secondary Breadcrumb',
    args: { 
      breadcrumb_style: 'secondary',
      breadcrumb: [{"text":"Home","url":"\/page\/1"},{"text":"Profile","url":"\/page\/2"},{"text":"Contact","url":"\/page\/3"},{"text":"Settings","url":"\/settings"}]
    }
  } %}
{% embed 'components:breadcrumb' with { 
  breadcrumb_style: breadcrumb_style,
  breadcrumb: breadcrumb
} %}{% endembed %}
{% endstory %}

{% story tertiary with {
    name: '4. Tertiary Breadcrumb',
    args: { 
      breadcrumb_style: 'tertiary',
      breadcrumb: [{"text":"Home","url":"\/page\/1"},{"text":"Profile","url":"\/page\/2"},{"text":"Contact","url":"\/page\/3"},{"text":"Settings","url":"\/settings"}]
    }
  } %}
{% embed 'components:breadcrumb' with { 
  breadcrumb_style: breadcrumb_style,
  breadcrumb: breadcrumb
} %}{% endembed %}
{% endstory %}

{% endstories %}
