Packages
moon
2.76.1
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/parts/header/title_with_description.ex
defmodule Moon.Parts.Header.TitleWithDescription do
@moduledoc false
use Moon.StatelessComponent
@doc "Id for DOM element"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional Tailwind classes"
prop(title_class, :css_class)
@doc "Additional Tailwind classes"
prop(description_class, :css_class)
@doc "Conditional displaying due to an issue with named slots in Surface"
prop(is_hidden, :boolean, default: false)
@doc "Conditional displaying due to an issue with named slots in Surface"
prop(breadcrumbs_hidden, :boolean, default: false)
@doc "Title"
prop(title, :string, required: true)
@doc "Default slot"
slot(default, required: true)
def render(assigns) do
~F"""
<div
{=@id}
data-testid={@testid}
class={merge([
[
"w-full text-bulma text-moon-24 font-grotesk p-4 lg:p-8 lg:not-first:pt-0 px-4 pb-6 pt-[5.5rem] flex flex-col gap-3",
hidden: @is_hidden,
"lg:not-first:pt-8": @breadcrumbs_hidden
],
@class
])}
>
<h3 class={merge(["text-moon-32 text-bulma font-grotesk", @title_class])}>{@title}</h3>
<p class={merge(["text-moon-16 lg:text-moon-18 text-trunks", @description_class])}><#slot /></p>
</div>
"""
end
end