Packages
petal_components
2.2.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components_web/a11y_live.ex
defmodule PetalComponentsWeb.A11yLive do
@moduledoc """
A LiveView to test the accessibility of Petal Components using `:a11y_audit`.
It's worth noting that this view is ugly because classes defined with @apply
are not able to be processed for Phoenix Playground at this time (as far as I can tell).
To run locally:
$ iex -S mix
iex> Run.playground()
"""
use Phoenix.LiveView, global_prefixes: ~w(x-)
use PetalComponents
def mount(_params, _session, socket) do
{:ok,
assign(socket,
count: 0,
form: to_form(%{}, as: :user),
main_menu_items: [
%{
name: :sign_in,
label: "Path",
path: "/path",
icon: "hero-key"
}
],
group_size: "lg",
current_page: :current_page,
sidebar_title: "blah",
posts: [
%{
id: 1,
name: "Some post"
},
%{
id: 2,
name: "Another post"
}
],
user_menu_items: [%{path: "/path", icon: "hero-home", label: "blah"}],
avatar_src: "https://avatars.githubusercontent.com/u/82628117?v=4",
current_user_name: "petal_components"
)}
end
def render(assigns) do
~H"""
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js">
</script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">
</script>
<script defer src="https://cdn.tailwindcss.com">
</script>
<style type="text/css">
/* css transitions can cause flaky a11y tests */
.env-test {
*, *::before, *::after {
transition: unset !important;
}
}
svg {
height: 1em; width: 1em;
}
</style>
<main role="main" class="env-test">
<.h1>Petal Components A11y Audit</.h1>
<.h2>Heading 2</.h2>
<.h3>Heading 3</.h3>
<.h4>Heading 4</.h4>
<.h5>Heading 5</.h5>
<.ul class="mb-5" x-random-attribute="lol">
<li>Item 1</li>
<li>Item 2</li>
</.ul>
<.ol class="mb-5" x-random-attribute="lol">
<li>Item 1</li>
<li>Item 2</li>
</.ol>
<.prose class="md:prose-lg" x-random-attribute="lol">
<p>A paragraph</p>
</.prose>
<.p x-text="input">Paragraph</.p>
<.accordion>
<:item heading="Accordion">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</:item>
<:item heading="Accordion Two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</:item>
</.accordion>
<.alert with_icon color="info" label="Info alert" />
<.alert with_icon color="info" label="Info alert with heading" heading="Info" />
<.alert with_icon color="danger" label="Error alert" />
<.avatar src={@avatar_src} />
<.badge color="primary" label="Primary" />
<.breadcrumbs
class="text-md"
links={[
%{label: "Link 1", to: "/", icon: "hero-home"},
%{label: "Link 2", to: "/", icon: "hero-home"},
%{label: "Link 3", to: "/", icon: "hero-home"}
]}
/>
<.button label="Press me" phx-click="click_event" />
<.button_group aria_label="My options" size={@group_size}>
<:button label="XS" phx-click="change_size" phx-value-size="xs" />
<:button label="SM" kind="link" patch="/app/orgs" />
<:button label="MD" phx-click="change_size" phx-value-size="md" />
<:button phx-click="change_size" phx-value-size="lg">LG</:button>
<:button phx-click="change_size" phx-value-size="xl">XL</:button>
</.button_group>
<.button_group aria_label="My links" size="md">
<:button kind="link" patch="/path-one">Link 1</:button>
<:button kind="link" patch="/path-two">Link 2</:button>
<:button label="Link 3" kind="link" navigate="/other" />
</.button_group>
<.card>
<.card_content category="Article" heading="Enhance your Phoenix development">
<div class="mt-4 font-light text-gray-500 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget leo interdum, feugiat ligula eu, facilisis massa. Nunc sollicitudin massa a elit laoreet.
</div>
</.card_content>
</.card>
<.container max_width="full"></.container>
<.dropdown
class="dropdown_class"
menu_items_wrapper_class="menu_items_wrapper_class"
label="Dropdown"
>
<.dropdown_menu_item class="dropdown_menu_item_class" type="button">
<.icon name="hero-home-mini" class="w-5 h-5 text-gray-500" /> Button item with icon
</.dropdown_menu_item>
</.dropdown>
<.form for={@form}>
<.field
field={@form[:name]}
type="text"
placeholder="eg. Sally"
class="!w-max"
label_class="label-class"
/>
<.field field={@form[:color]} type="color" class="!w-max" label_class="label-class" />
<.field field={@form[:date]} type="date" class="!w-max" label_class="label-class" />
<.field
field={@form[:datetime_local]}
type="datetime-local"
class="!w-max"
label_class="label-class"
/>
<.field field={@form[:email]} type="email" class="!w-max" label_class="label-class" />
<.field field={@form[:file]} type="file" class="!w-max" label_class="label-class" />
<.field field={@form[:hidden]} type="hidden" class="!w-max" label_class="label-class" />
<.field field={@form[:month]} type="month" class="!w-max" label_class="label-class" />
<.field field={@form[:number]} type="number" class="!w-max" label_class="label-class" />
<.field field={@form[:password]} type="password" class="!w-max" label_class="label-class" />
<.field field={@form[:range]} type="range" class="!w-max" label_class="label-class" />
<.field field={@form[:search]} type="search" class="!w-max" label_class="label-class" />
<.field field={@form[:tel]} type="tel" class="!w-max" label_class="label-class" />
<.field field={@form[:time]} type="time" class="!w-max" label_class="label-class" />
<.field field={@form[:url]} type="url" class="!w-max" label_class="label-class" />
<.field field={@form[:week]} type="week" class="!w-max" label_class="label-class" />
</.form>
<.icon name="hero-arrow-right" class="text-gray-300" />
<PetalComponents.Link.a link_type="a" to="/" label="Press me" phx-click="click_event" />
<.spinner show={true} />
<.vertical_menu
menu_items={@main_menu_items}
current_page={@current_page}
title={@sidebar_title}
/>
<.modal max_width="sm" title="Modal">
<div class="gap-5 text-sm">
<.form_label label="Add some text here." />
<div class="flex justify-end">
<.button label="close" phx-click={PetalComponents.Modal.hide_modal()} />
</div>
</div>
</.modal>
<.progress size="xl" value={10} max={100} label="15%" />
<.rating include_label rating={3.3} total={5} />
<.skeleton />
<.slide_over title="SlideOver" origin="left">
<div class="gap-5 text-sm">
<.form_label label="Add some text here." />
<div class="flex justify-end">
<.button label="close" phx-click={PetalComponents.SlideOver.hide_slide_over("left")} />
</div>
</div>
</.slide_over>
<.table class="my-class" id="posts" row_id={fn post -> "row_#{post.id}" end} rows={@posts}>
<:col :let={post} label="Name" class="col-class" row_class="row-class"><%= post.name %></:col>
</.table>
<.tabs class="flex-col sm:flex-row space-x">
<.tab is_active to="/">Home</.tab>
<.tab link_type="a" to="/" label="Press me" phx-click="click_event" />
</.tabs>
<.user_dropdown_menu
user_menu_items={@user_menu_items}
avatar_src={@avatar_src}
current_user_name={@current_user_name}
/>
</main>
"""
end
end