Packages
moon
2.72.2
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_web/pages/components/button_page.ex
defmodule MoonWeb.Pages.Components.ButtonPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.Button
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/button",
name: "Button"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"animation",
:type => ~c"progress | success | error | pulse",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Animation of button"
},
%{
:name => ~c"disabled",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Disabled Button"
},
%{
:name => ~c"full_width",
:type => ~c"boolean",
:required => ~c"No",
:default => ~c"false",
:description => ~c"Full width Button"
},
%{
:name => ~c"left_icon",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Asset name for the left icon"
},
%{
:name => ~c"right_icon",
:type => ~c"string",
:required => ~c"No",
:default => ~c"-",
:description => ~c"Asset name for the right icon"
},
%{
:name => ~c"size",
:type => ~c"xs | sm | md | lg | xl",
:required => ~c"No",
:default => ~c"md",
:description => ~c"Size of button"
},
%{
:name => ~c"variant",
:type =>
~c"primary | secondary | tertiary | ghost | link (deprecated) | none (deprecated)",
:required => ~c"No",
:default => ~c"primary",
:description => ~c"Visual/Logical variant of button"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Button">
<DeprecationWarning
name="Button"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.Button.ButtonPage)}
/>
</ComponentPageDescription>
<ExampleAndCode title="Default" id="button0">
<:example>
<Button>Default</Button>
</:example>
<:code>{button_0_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Variants" id="button1">
<:example>
<Button>Primary is default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>
</:example>
<:code>{button_1_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Sizes" id="button2">
<:example>
<Button variant="primary" size="xs">xSmall</Button>
<Button variant="primary" size="sm">Small</Button>
<Button variant="primary" size="md">Medium (Default)</Button>
<Button variant="primary" size="lg">Large</Button>
<Button variant="primary" size="xl">xLarge</Button>
</:example>
<:code>{button_2_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Icons" id="button3">
<:example>
<Button left_icon="arrows_left" variant="primary">Left Icon</Button>
<Button right_icon="arrows_right" variant="primary">Right Icon</Button>
<Button variant="primary" left_icon="arrows_left" size="sm">Left Icon</Button>
<Button variant="primary" right_icon="arrows_right" size="sm">Right Icon</Button>
<Button variant="primary" icon_only="generic_settings" size="lg" />
</:example>
<:code>{button_3_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Full width" id="button4">
<:example>
<Button variant="primary" full_width="true">
Full Width
</Button>
</:example>
<:code>{button_4_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Disabled" id="button5">
<:example>
<Button variant="primary" disabled="true">
Disabled
</Button>
</:example>
<:code>{button_5_code()}</:code>
</ExampleAndCode>
<ExampleAndCode title="Animation" id="button6">
<:example>
<Button animation="progress">Progress</Button>
<Button animation="success">Success</Button>
<Button animation="error">Error</Button>
<Button animation="pulse">Pulse</Button>
</:example>
<:code>{button_6_code()}</:code>
</ExampleAndCode>
<PropsTable title="Button props" data={@props_info_array} />
</Page>
"""
end
def button_0_code do
"""
<Button>Default</Button>
"""
end
def button_1_code do
"""
<Button>Primary (default)</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>
"""
end
def button_2_code do
"""
<Button variant="primary" size="xs">xSmall</Button>
<Button variant="primary" size="sm">Small</Button>
<Button variant="primary" size="md">Medium (Default)</Button>
<Button variant="primary" size="lg">Large</Button>
<Button variant="primary" size="xl">xLarge</Button>
"""
end
def button_3_code do
"""
<Button left_icon="arrows_left" variant="primary">Left Icon</Button>
<Button right_icon="arrows_right" variant="primary">Right Icon</Button>
<Button variant="primary" left_icon="arrows_left" size="sm">Left Icon</Button>
<Button variant="primary" right_icon="arrows_right" size="sm">Right Icon</Button>
<Button variant="primary" icon_only="generic_settings" size="lg" />
"""
end
def button_4_code do
"""
<Button variant="primary" full_width="true">
Full Width
</Button>
"""
end
def button_5_code do
"""
<Button variant="primary" disabled="true">
Disabled
</Button>
"""
end
def button_6_code do
"""
<Button animation="progress">Progress</Button>
<Button animation="success">Success</Button>
<Button animation="error">Error</Button>
<Button animation="pulse">Pulse</Button>
"""
end
end