🧊Components

The majority of components comes from our open source package "Petal Components". However, there are some only in Petal Pro. There are two locations to find these:

• Petal Framework Components

  • These are maintained by us and located in /lib/_petal_framework/web/components

  • If you want to modify any of these, we recommend duplicating it into your apps component folder (/lib/<your_app>_web/components) first. That way, if we release updated versions of Petal Pro, you can still just copy and paste the whole _petal_framework folder into your project

• Components for you to modify

  • These are components that you will likely modify

    • eg. brand related or landing page related

  • Found in /lib/<your_app>_web/components

Layouts

See the layouts section.

Brand

See the Branding section.

Color scheme switch

<.color_scheme_switch />

The switch to switch between light and dark mode. Pairs with color-scheme-switch.js, which will use cookies and local storage to set the theme.

Email helpers

A set of components for email templates. Kind of like Petal Components, but for emails.

<h1>Let's verify your account</h1>

<p>Touch the button below to verify your account</p>

<EmailComponents.button_centered to={@url}>
  Verify account
</EmailComponents.button_centered>

<EmailComponents.small_text>
  If you didn't create an account with us, please ignore this.
</EmailComponents.small_text>

Landing page

A set of landing page related components. For example:

<LandingPage.features
  title={gettext("Features")}
  description={gettext("Here are some features you can use to get started with your web app.")}
  features={
    [
      %{
        title: "Authentication",
        description: Faker.Lorem.sentence(10..20),
        icon: :lightning_bolt
      },
      %{
        title: "HTML Emails",
        description: Faker.Lorem.sentence(10..20),
        icon: :puzzle
      },
      %{
        title: "Wallaby testing",
        description: Faker.Lorem.sentence(10..20),
        icon: :at_symbol
      }
    ]
  }
/>

Language select

A dropdown for setting your language.

<.language_select
  current_locale={Gettext.get_locale(PetalProWeb.Gettext)}
  language_options={PetalPro.config(:language_options)}
/>

Notification

A flash notification component. Will appear down the bottom right of the screen and has a timer before disappearing (pairs with RemoveFlashHook).

The top dark bit is an animated bar that progresses to the right hand corner, then the box disappears

Page components

A growing set of generic page components to help with building pages.

Box

<.box padded>
  <%= live_component(PetalProWeb.OrgFormComponent, [...]) %>
</.box>

Page header

Shows a heading and optional slot for buttons on the right hand side.

<.page_header title="Listing Discounts">
  <.button
    link_type="live_patch"
    label="New Discount"
    to={Routes.discount_index_path(@socket, :new)}
  />
</.page_header>

Sidebar tabs container

A panel with a sidebar for a menu, and a slot for content on the right.

<.sidebar_tabs_container current_page={:edit_profile} menu_items={[
  %{
    name: :edit_profile,
    label: gettext("Edit profile"),
    path: Routes.live_path(Endpoint, PetalProWeb.EditProfileLive),
    icon: :user_circle
  },
  ...
]}>
  <%= render_slot(@inner_block) %>
</.sidebar_tabs_container>

User dropdown menu

Displays the user's avatar and will show a dropdown menu upon being clicked. Used in the navbar. Displays a list of menu items (see the Menus section).

<.user_menu_dropdown
  user_menu_items={@user_menu_items}
  avatar_src={@avatar_src}
  current_user_name={if @current_user, do: user_name(@current_user), else: nil}
/>

Markdown

Pretty markdown

Renders the markdown as HTML and uses the Tailwind Typography classes to prettify it.

<.pretty_markdown content={some_markdown} class="mx-auto" />

Markdown

Simple renders pure HTML from markdown.

<.markdown content={some_markdown} />

Social Button

<.social_button
  link_type="a"
  to={Routes.user_ueberauth_path(@conn_or_socket, :request, "google")}
  variant="outline"
  logo="google"
  class="w-full"
/>

<.social_button
  link_type="a"
  to={Routes.user_ueberauth_path(@conn_or_socket, :request, "github")}
  variant="outline"
  logo="github"
  class="w-full"
/>