Contents

<%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
    <%= pb_rails("flex", props: {align: "center"}) do %>
        Filter By
        <%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
            <div id="arrow-icon" style="display: flex">
                <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
            </div>
        <% end %>
    <% end %>
<% end %>
<%= pb_rails("popover", props: {trigger_element_id: "list", tooltip_id: "list-tooltip", position: 'bottom', padding: "none"}) do %>
    <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, xpadding: true}) do %>
        <%= pb_rails("list/item") do %><a>Popularity</a><% end %>
        <%= pb_rails("list/item") do %><a>Title</a><% end %>
        <%= pb_rails("list/item") do %><a>Duration</a><% end %>
        <%= pb_rails("list/item") do %><a>Date Started</a><% end %>
        <%= pb_rails("list/item") do %><a>Date Ended </a><% end %>
    <% end %>
<% end %>


<script type="text/javascript">
    const popoverButton = document.querySelector("#list")
    let buttonClicked = false

    const arrowDiv = document.querySelector("#arrow-icon")

    popoverButton.onclick = () => {
        buttonClicked = !buttonClicked
        if (buttonClicked) {
            arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
        } else {
            arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
        }
    }
</script>

Version data entries

2 entries across 2 versions & 2 rubygems

Version	Path
playbook_ui_docs-14.4.0.pre.alpha.PLAY1529removefaeasy3876	app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb
playbook_ui-14.4.0.pre.alpha.PLAY1529removefaeasy3876	app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb