<h3 class="t-sage-heading-6">Default Lists</h3>
<p>Lists in Sage get simple default styling.</p>

<%= sage_component SageLists, {
} do %>
  <ul>
    <li>Lorem ipsum</li>
    <li>Dolor sit amet
    <ul>
      <li>Lorem ipsum</li>
      <li>Dolor sit amet</li>
        <ul>
          <li>Lorem ipsum</li>
          <li>Dolor sit amet</li>
        </ul>
      </li>
      <li>Consectetur adipiscing elit</li>
    </ul>
    </li>
    <li>Consectetur adipiscing elit</li>
  </ul>
<% end %>
<%= sage_component SageLists, {
} do %>
  <ol>
    <li>Lorem ipsum</li>
    <li>Dolor sit amet
      <ol>
        <li>Lorem ipsum</li>
        <li>Dolor sit amet</li>
        <ol>
          <li>Lorem ipsum</li>
          <li>Dolor sit amet</li>
        </ol>
        </li>
        <li>Consectetur adipiscing elit</li>
      </ol>
    </li>
    <li>Consectetur adipiscing elit</li>
  </ol>
<% end %>

<h3 class="t-sage-heading-6">Unstyled List</h3>
<p>Add <code>sage-list</code> to create an unstyled list such as for complex elements:</p>

<%= sage_component SageLists, {
} do %>
  <ol class="sage-list">
    <li>
      <%= sage_component SageSwitch, {
        type: "radio",
        id: "switch-0a",
        name: "group-1",
        value: "option-1",
        label_text: "It matters a whole lot.",
        message: ""
      } %>
    </li>
    <li>
      <%= sage_component SageSwitch, {
        type: "radio",
        id: "switch-1a",
        name: "group-1",
        value: "option-2",
        label_text: "It matters somewhat.",
        message: ""
      } %>
    </li>
    <li>
      <%= sage_component SageSwitch, {
        type: "radio",
        id: "switch-2a",
        name: "group-1",
        value: "option-3",
        label_text: "It does not matter one bit at all.",
        message: ""
      } %>
    </li>
    <li>
      <%= sage_component SageSwitch, {
        type: "radio",
        id: "switch-3a",
        name: "group-1",
        value: "option-4",
        label_text: "Undecided.",
        message: ""
      } %>
    </li>
  </ol>
<% end %>

<h3 class="t-sage-heading-6">Inline List</h3>
<p>Inline lists will wrap by default so this works best with items that have an intrinsically limited smaller width that affords space for other elements to a point.</p>

<%= sage_component SageLists, {
} do %>
  <ul class="sage-list sage-list--inline">
    <li>
      <%= sage_component SageSwitch, {
        type: "radio",
        id: "switch-0b",
        name: "group-2",
        value: "option-1",
        label_text: "It matters a whole lot.",
        message: ""
      } %>
    </li>
    <li>
      <%= sage_component SageSwitch, {
        type: "radio",
        id: "switch-1b",
        name: "group-2",
        value: "option-2",
        label_text: "It matters somewhat.",
        message: ""
      } %>
    </li>
    <li>
      <%= sage_component SageSwitch, {
        type: "radio",
        id: "switch-2b",
        name: "group-2",
        value: "option-3",
        label_text: "It does not matter one bit at all.",
        message: ""
      } %>
    </li>
    <li>
      <%= sage_component SageSwitch, {
        type: "radio",
        id: "switch-3b",
        name: "group-2",
        value: "option-4",
        label_text: "Undecided.",
        message: ""
      } %>
    </li>
  </ul>
<% end %>

<h3 class="t-sage-heading-6">Non-wrapping Inline List</h3>
<p>Non-wrapping list will stay packed on one line until 768px at which point it will wrap. This may be most relevant for inline lists for which wrapping is undesirable but has clear limitations inside restricted containers.</p>

<%= sage_component SageLists, {
} do %>
  <ul class="sage-list sage-list--inline-fit">
    <li>
      <%= sage_component SageProperty, { icon: "tag", value: "Lorem ipsum" } %>
    </li>
    <li>
      <%= sage_component SageProperty, { icon: "tag", value: "Lorem ipsum" } %>
    </li>
    <li>
      <%= sage_component SageProperty, { icon: "tag", value: "Lorem ipsum" } %>
    </li>
    <li>
      <%= sage_component SageProperty, { icon: "tag", value: "Lorem ipsum" } %>
    </li>
  </ul>
<% end %>