Packages
moon
2.90.5
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
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon_web/pages/components/typography/text_page.ex
# This component is deprecated, use /components/typography/ css classes
defmodule MoonWeb.Pages.Components.Typography.TextPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Text
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components"
},
%{
to: "/components/text",
name: "Text"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"color",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Text color"
},
%{
:name => ~c"size",
:type => ~c"9 | 10 | 12 | 14 | 16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72",
:required => ~c"No",
:default => ~c"16",
:description => ~c"TODO - Text size (support size 9)"
},
%{
:name => ~c"is_bold",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Whether font weight is bold"
},
%{
:name => ~c"text_align",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Alignment"
},
%{
:name => ~c"is_uppercase",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Whether text is uppercase"
},
%{
:name => ~c"is_underline",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Whether text is underlined"
},
%{
:name => ~c"line_height",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Custom line height"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
@spec render(any) :: Phoenix.LiveView.Rendered.t()
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Text">
<p class="font-medium">
NB! The component is depricated. Please use our
<a
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Components.TypographyPage,
theme_name: @theme_name,
direction: @direction
)}
class="text-piccolo transition-colors duration-200 hover:text-hit visited:text-hit"
>
new Typography
</a>
built with Tailwind.
</p>
<p>
We have predefined font sizes: 10 | 12 | 14 | 16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72. Line heights are calculated automatically based on font size.
</p>
<p>By default font size is 16. You can choose any size.</p>
<p>
By default font weight is regular. You can make it bolder.
</p>
<p>
By default Text color is bulma.100. You can use any color.
</p>
</ComponentPageDescription>
<ExampleAndCode id="text_1" title="Default">
<:example>
<div class="flex flex-col gap-2 w-full">
<Text>Text with default font size</Text>
<Text size={10}>Text with font size 10</Text>
<Text size={12}>Text with font size 12</Text>
<Text size={14}>Text with font size 14</Text>
<Text size={16}>Text with font size 16</Text>
<Text size={18}>Text with font size 18</Text>
<Text size={20}>Text with font size 20</Text>
<Text size={24}>Text with font size 24</Text>
<Text size={32}>Text with font size 32</Text>
<Text size={48}>font size 48</Text>
<Text size={56}>font size 56</Text>
<Text size={64}>font size 64</Text>
<Text size={72}>font size 72</Text>
</div>
</:example>
<:code>{text_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="text_2" title="Bold">
<:example>
<div class="flex flex-col gap-2 w-full">
<Text size={24}>Text with default font weight</Text>
<Text size={24} is_bold>
Text with font-weight: semibold
</Text>
</div>
</:example>
<:code>{text_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode id="text_3" title="color">
<:example>
<div class="flex flex-col gap-2 w-full">
<Text size={24}>Text with default color</Text>
<Text size={24} color="trunks">
Text with defined color
</Text>
<Text size={24} color="piccolo">
Text with defined color
</Text>
<Text size={24} color="krillin">
Text with defined color
</Text>
</div>
</:example>
<:code>{text_3_code()}</:code>
</ExampleAndCode>
<PropsTable data={@props_info_array} />
</Page>
"""
end
def text_1_code do
"""
<Text>Text with default font size</Text>
<Text size={10}>Text with font size 10</Text>
<Text size={12}>Text with font size 12</Text>
<Text size={14}>Text with font size 14</Text>
<Text size={16}>Text with font size 16</Text>
<Text size={18}>Text with font size 18</Text>
<Text size={20}>Text with font size 20</Text>
<Text size={24}>Text with font size 24</Text>
<Text size={32}>Text with font size 32</Text>
<Text size={48}>font size 48</Text>
<Text size={56}>font size 56</Text>
<Text size={64}>font size 64</Text>
<Text size={72}>font size 72</Text>
"""
end
def text_2_code do
"""
<Text size=24>Text with default font weight</Text>
<Text size=24 is_bold=true>
Text with font-weight: semibold
</Text>
"""
end
def text_3_code do
"""
<Text size=24>Text with default color</Text>
<Text size=24 color="trunks_100">
Text with defined color
</Text>
<Text size=24 color="piccolo_100">
Text with defined color
</Text>
<Text size=24 color="krillin_100">
Text with defined color
</Text>
"""
end
end