Process List

A process list displays a series of steps or stages in a process, helping users understand what to expect.

Props

`c-process_list`

The main wrapper component. No props required.

`c-process_list.item`

Prop	Default	Description
`heading`		The heading text for the step
`heading_tag`	`h4`	HTML tag for heading (`h4`, `p`, etc.)
`heading_classes`		Additional CSS classes for the heading (e.g., `font-sans-xl`)
`extra_classes`		Additional CSS classes for the list item (e.g., `padding-bottom-4`)

Example Usage

Default Process List

<c-process_list>
    <c-process_list.item heading="Start a process">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <ul>
            <li>First sub-item</li>
            <li>Second sub-item</li>
        </ul>
    </c-process_list.item>
    <c-process_list.item heading="Proceed to the second step">
        <p>More description text here.</p>
    </c-process_list.item>
    <c-process_list.item heading="Complete the step-by-step process">
        <p>Final step description.</p>
    </c-process_list.item>
</c-process_list>

Custom Sizing (No Body Text)

<c-process_list>
    <c-process_list.item 
        heading="Start a process." 
        heading_tag="p" 
        extra_classes="padding-bottom-4"
    />
    <c-process_list.item 
        heading="Proceed to the second step." 
        heading_tag="p" 
        extra_classes="padding-bottom-4"
    />
    <c-process_list.item 
        heading="Complete the step-by-step process." 
        heading_tag="p"
    />
</c-process_list>

Custom Sizing (With Body Text)

<c-process_list>
    <c-process_list.item 
        heading="Start a process."
        heading_classes="font-sans-xl line-height-sans-1"
        extra_classes="padding-bottom-4"
    >
        <p class="font-sans-lg margin-top-1 text-light">
            Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
        </p>
    </c-process_list.item>
    <c-process_list.item 
        heading="Proceed to the second step."
        heading_classes="font-sans-xl line-height-sans-1"
        extra_classes="padding-bottom-4"
    >
        <p class="font-sans-lg margin-top-1 text-light">
            Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
        </p>
    </c-process_list.item>
    <c-process_list.item 
        heading="Complete the step-by-step process."
        heading_classes="font-sans-xl line-height-sans-1"
    >
        <p class="font-sans-lg margin-top-1 text-light">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </p>
    </c-process_list.item>
</c-process_list>

{% load cotton %}

<div class="component-variants">
    <h1>Process List Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton process_list %}
            {% for item in variant.items %}
            {% cotton process_list.item heading="{{ item.heading }}" heading_tag="{{ item.heading_tag|default:'h4' }}" heading_classes="{{ item.heading_classes }}" extra_classes="{{ item.extra_classes }}" %}
                {% if item.content %}<p class="{{ item.content_classes }}">{{ item.content }}</p>{% endif %}
                {% if item.list_items %}
                <ul>
                    {% for list_item in item.list_items %}
                    <li>{{ list_item }}</li>
                    {% endfor %}
                </ul>
                {% endif %}
            {% endcotton %}
            {% endfor %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Process List
context:
  variants:
    - title: "Default Process List"
      items:
        - heading: "Start a process"
          content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque."
          list_items:
            - "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
            - "Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum."
            - "Aliquam erat volutpat. Sed quis velit."
        - heading: "Proceed to the second step"
          content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis."
        - heading: "Complete the step-by-step process"
          content: "Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat."
    - title: "Custom Sizing (No Body Text)"
      items:
        - heading: "Start a process."
          heading_tag: "p"
          extra_classes: "padding-bottom-4"
        - heading: "Proceed to the second step."
          heading_tag: "p"
          extra_classes: "padding-bottom-4"
        - heading: "Complete the step-by-step process."
          heading_tag: "p"
    - title: "Custom Sizing (With Body Text)"
      items:
        - heading: "Start a process."
          heading_classes: "font-sans-xl line-height-sans-1"
          extra_classes: "padding-bottom-4"
          content: "Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum."
          content_classes: "font-sans-lg margin-top-1 text-light"
        - heading: "Proceed to the second step."
          heading_classes: "font-sans-xl line-height-sans-1"
          extra_classes: "padding-bottom-4"
          content: "Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat."
          content_classes: "font-sans-lg margin-top-1 text-light"
        - heading: "Complete the step-by-step process."
          heading_classes: "font-sans-xl line-height-sans-1"
          content: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque."
          content_classes: "font-sans-lg margin-top-1 text-light"