Harmonium v2.0.0 Harmonium View Source

Styled HTML grid helpers, form helpers, and more.

Link to this section Summary

Functions

Renders a callout

Constructs a callout class

Renders a grid column. (Same usage as rev_row/1, rev_row/2, rev_row/3.)

Constructs a grid column class. (Same usage as row_class/1.)

Renders an email input stack

Renders an icon tag

Outputs CSS class names for an icon

Renders a menu

Constructs a menu class

Renders a rev-Menu-item

Constructs a menu item class

Utility function for mocking forms when you do not yet have the underlying data structure

With mock_form/2, rather than getting default inputs, you supply your own. Much the same as mock_form/1 and mock_form_input/4, the *_with_error inputs have attached errors

Utility function for mocking a form input. It adds two inputs: 1) :key, and 2) :key_with_error (which will have an attached error)

Same as select_stack/4, but renders the input as a <select multiple> and submits the list of all selected options

Renders a number input stack

Renders a phone input stack

Constructs a CSS class with SUIT modifiers

Renders an input error <small>

Renders an input help <small>

Renders an input label

Constructs an input label class

Renders an input label inner <span>

Renders grid row

Constructs a grid row class, following the modifier rules of rev_class/2

Similar usage to text_input_stack/3, but it also passes value_options through to Phoenix.HTML.Form.select/4

Render a single checkbox

Harmonium provides a number of shortcuts for building richly-styled form inputs. We refer to these as “stacks.” A stack is a label wrapper around an input with optional label text, help text, and error display. Under the covers, these stack helpers uses the input helpers from Phoenix.HTML.Form

Renders a textarea stack

Link to this section Functions

Link to this function button_class(modifiers \\ []) View Source
Link to this function button_group(modifiers, list) View Source
Link to this function button_group_class(modifiers \\ []) View Source

Renders a callout.

Link to this function callout(modifiers, list) View Source
Link to this function callout(tag, modifiers, list) View Source
Link to this function callout_class(modifiers \\ []) View Source

Constructs a callout class.

Link to this function card(tag, modifiers, list) View Source
Link to this function card_body(modifiers, list) View Source
Link to this function card_body(tag, modifiers, list) View Source
Link to this function card_body_class(modifiers \\ []) View Source
Link to this function card_class(modifiers \\ []) View Source
Link to this function card_footer(modifiers, list) View Source
Link to this function card_footer(tag, modifiers, list) View Source
Link to this function card_header(modifiers, list) View Source
Link to this function card_header(tag, modifiers, list) View Source
Link to this function card_header_class(modifiers \\ []) View Source

Renders a grid column. (Same usage as rev_row/1, rev_row/2, rev_row/3.)

Link to this function col(tag, modifiers, list) View Source
Link to this function col_class(modifiers \\ []) View Source

Constructs a grid column class. (Same usage as row_class/1.)

Link to this function drawer(tag, modifiers, list) View Source
Link to this function drawer_class(modifiers \\ []) View Source
Link to this function drawer_closer_class(modifiers \\ []) View Source
Link to this function drawer_contents_class(modifiers \\ []) View Source
Link to this function drawer_expander_class(modifiers \\ []) View Source
Link to this function email_input_stack(f, key, options \\ []) View Source

Renders an email input stack.

iex> text_input_stack(f, :required_string) |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  \n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\" value=\"hello\">\n  \n  \n</label>"

See text_input_stack/3 for more options.

Renders an icon tag.

iex> icon("up-arrow") |> safe_to_string()
"<span class=\"rev-Icon rev-Icon--up-arrow\"></span>"

You can override the tag type.

iex> icon(:i, "up-arrow") |> safe_to_string()
"<i class=\"rev-Icon rev-Icon--up-arrow\"></i>"

You can add additional classes and pass other attributes to the tag.

iex> icon("up-arrow", class: "ExtraClass", title: "An Icon") |> safe_to_string()
"<span class=\"rev-Icon rev-Icon--up-arrow ExtraClass\" title=\"An Icon\"></span>"

You can do all of these things at once.

iex> icon(:i, "up-arrow", class: "ExtraClass", title: "An Icon") |> safe_to_string()
"<i class=\"rev-Icon rev-Icon--up-arrow ExtraClass\" title=\"An Icon\"></i>"
Link to this function icon(tag, icon_name, options) View Source

Outputs CSS class names for an icon.

iex> icon_class(:star)
"rev-Icon rev-Icon--star"
iex> icon_class("star-hollow")
"rev-Icon rev-Icon--star-hollow"

Utility function for mocking forms when you do not yet have the underlying data structure.

<%= mock_form fn f -> %>
  <%= row do %>
    <%= col do text_input_stack f, :string end %>
    <%= col do text_input_stack f, :string, label: "Hello Label" end %>
    <%= col do text_input_stack f, :string, label: "Hello Label", help: "This is help text." end %>
    <%= col do text_input_stack f, :string_with_error end %>
    <%= col do text_input_stack f, :string_with_error, help: "Help text and errors stack." end %>
    <%= col do text_input_stack f, :nil, input: [placeholder: "Empty placeholder"] end %>
  <% end %>
<% end %>

With mock_form/1, you get a default set of inputs to work with:

iex> mock_form(fn f -> Map.keys(f.data) end)
[
  :boolean,
  :boolean_with_error,
  :datetime,
  :datetime_with_error,
  :empty,
  :empty_with_error,
  :float,
  :float_with_error,
  :int,
  :int_with_error,
  :string,
  :string_with_error
]

As you might expect, the *_with_error inputs will have errors attached to them.

iex> mock_form(fn f -> Keyword.keys(f.errors) end)
[
  :string_with_error,
  :int_with_error,
  :float_with_error,
  :empty_with_error,
  :datetime_with_error,
  :boolean_with_error
]

With mock_form/2, rather than getting default inputs, you supply your own. Much the same as mock_form/1 and mock_form_input/4, the *_with_error inputs have attached errors.

iex> mock_form(%{foo: "foo value", bar: "bar value"}, &(&1))
%Phoenix.HTML.Form{
  data: %{
    bar: "bar value",
    bar_with_error: "bar value",
    foo: "foo value",
    foo_with_error: "foo value"
  },
  errors: [
    foo_with_error: "There was an error.",
    bar_with_error: "There was an error."
  ],
  hidden: [],
  id: "mock",
  impl: nil,
  index: nil,
  name: "mock",
  options: [],
  params: %{},
  source: nil
}
Link to this function mock_form_input(form, key, value, error_string \\ "There was an error.") View Source

Utility function for mocking a form input. It adds two inputs: 1) :key, and 2) :key_with_error (which will have an attached error)

iex> f = %Phoenix.HTML.Form{data: %{}, errors: []}
iex> mocked = mock_form_input(f, :foo, "foo value", "oops")
iex> mocked.data
%{foo: "foo value", foo_with_error: "foo value"}
iex> mocked.errors
[foo_with_error: "oops"]
Link to this function multiple_select_stack(f, key, value_options, options \\ []) View Source

Same as select_stack/4, but renders the input as a <select multiple> and submits the list of all selected options.

iex> multiple_select_stack(f, :required_string, [“Hi”: “hi”, “Hello”: “hello”], label: “Greetings”, input: [required: true]) |> safe_to_string() “

See text_input_stack/3 for more options.

Link to this function number_input_stack(f, key, options \\ []) View Source

Renders a number input stack.

iex> text_input_stack(f, :required_string) |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  \n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\" value=\"hello\">\n  \n  \n</label>"

See text_input_stack/3 for more options.

Link to this function password_input_stack(f, key, options \\ []) View Source

See text_input_stack/3.

Link to this function phone_input_stack(f, key, options \\ []) View Source

Renders a phone input stack.

iex> phone_input_stack(f, :required_string) |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  \n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"tel\" value=\"hello\">\n  \n  \n</label>"

See text_input_stack/3 for more options.

Link to this function rev_class(base_class, modifiers) View Source

Constructs a CSS class with SUIT modifiers.

With no modifiers, it simply returns the base_class.

iex> rev_class(:Column, [])
"Column"

For a boolean modifier {key, value}, it modifies the class with key only if value is true.

iex> rev_class(:Column, shrink: true)
"Column Column--shrink"
iex> rev_class(:Column, shrink: false)
"Column"

For a non-boolean modifier {key, value}, it concatenates key and value.

iex> rev_class(:Column, medium: 4, large: 3, justify: :Left)
"Column Column--medium4 Column--large3 Column--justifyLeft"

For the special-case {:class, value}, it skips SUIT conventions and adds value directly

iex> rev_class(:Column, medium: 4, class: "more css classes")
"Column Column--medium4 more css classes"

Renders an input error <small>.

Renders an input help <small>.

Link to this function rev_label(modifiers, list) View Source

Renders an input label.

Link to this function rev_label_class(modifiers \\ []) View Source

Constructs an input label class.

Renders an input label inner <span>.

Renders grid row.

iex> row(do: "hello") |> safe_to_string()
"<div class=\"rev-Row\">hello</div>"
iex> row(flex: true) do "hello" end |> safe_to_string()
"<div class=\"rev-Row rev-Row--flex\">hello</div>"
iex> row(:section, flex: true) do "hello" end |> safe_to_string()
"<section class=\"rev-Row rev-Row--flex\">hello</section>"
Link to this function row(tag, modifiers, list) View Source
Link to this function row_class(modifiers \\ []) View Source

Constructs a grid row class, following the modifier rules of rev_class/2.

iex> row_class()
"rev-Row"
iex> row_class(flex: true)
"rev-Row rev-Row--flex"
Link to this function select_stack(f, key, value_options, options \\ []) View Source

Similar usage to text_input_stack/3, but it also passes value_options through to Phoenix.HTML.Form.select/4.

iex> select_stack(f, :required_string, [“Hi”: “hi”, “Hello”: “hello”]) |> safe_to_string() “

See text_input_stack/3 for more options.

Link to this function single_checkbox(f, key, options \\ []) View Source

Render a single checkbox.

iex> single_checkbox(f, :bool) |> safe_to_string()
"<label class=\"rev-InputLabel rev-Checkbox\"><input name=\"widget[bool]\" type=\"hidden\" value=\"false\"><input class=\"rev-Checkbox-input\" id=\"widget_bool\" name=\"widget[bool]\" type=\"checkbox\" value=\"true\"></label>"

You may optionally add a label:

iex> single_checkbox(f, :bool, label: "Publish?") |> safe_to_string()
"<label class=\"rev-InputLabel rev-Checkbox\"><input name=\"widget[bool]\" type=\"hidden\" value=\"false\"><input class=\"rev-Checkbox-input\" id=\"widget_bool\" name=\"widget[bool]\" type=\"checkbox\" value=\"true\"><span class=\"rev-Checkbox-label\">Publish?</span></label>"
Link to this function single_radio_button(f, key, value, options \\ []) View Source

Render a single radio button.

iex> single_radio_button(f, :required_string, "one") |> safe_to_string()
"<label class=\"rev-InputLabel rev-Radio\"><input class=\"rev-Radio-input\" id=\"widget_required_string_one\" name=\"widget[required_string]\" type=\"radio\" value=\"one\"></label>"

You may optionally add a label:

iex> single_radio_button(f, :required_string, "one", label: "Option One") |> safe_to_string()
"<label class=\"rev-InputLabel rev-Radio\"><input class=\"rev-Radio-input\" id=\"widget_required_string_one\" name=\"widget[required_string]\" type=\"radio\" value=\"one\"><span class=\"rev-Radio-label\">Option One</span></label>"
Link to this function text_input_stack(f, key, options \\ []) View Source

Harmonium provides a number of shortcuts for building richly-styled form inputs. We refer to these as “stacks.” A stack is a label wrapper around an input with optional label text, help text, and error display. Under the covers, these stack helpers uses the input helpers from Phoenix.HTML.Form.

This particular function renders a text input stack.

iex> text_input_stack(f, :required_string) |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  \n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\" value=\"hello\">\n  \n  \n</label>"

You may optionally add a label.

iex> text_input_stack(f, :required_string, label: "Required String") |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  <span class=\"rev-LabelText\">Required String</span>\n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\" value=\"hello\">\n  \n  \n</label>"

You may optionally add help.

iex> text_input_stack(f, :required_string, help: "This field is required.") |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  \n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\" value=\"hello\">\n  \n  <small class=\"rev-HelpText rev-InputHelpText\">This field is required.</small>\n</label>"

The :input option passes another set of options through to the <input> field.

iex> text_input_stack(f, :required_string, input: [placeholder: "Required String"]) |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack \">  \n  <input class=\"rev-Input \" id=\"widget_required_string\" name=\"widget[required_string]\" placeholder=\"Required String\" type=\"text\" value=\"hello\">\n  \n  \n</label>"

When the field has an error, error styles are applied, and it is displayed.

iex> text_input_stack(form_with_errors, :required_string) |> safe_to_string()
"<label class=\"rev-InputLabel rev-InputStack is-invalid\">  \n  <input class=\"rev-Input is-invalid\" id=\"widget_required_string\" name=\"widget[required_string]\" type=\"text\">\n  <small class=\"rev-InputErrors\">can&#39;t be blank</small>\n  \n</label>"
Link to this function textarea_stack(f, key, options \\ []) View Source

Renders a textarea stack.

iex> textarea_stack(f, :required_string) |> safe_to_string()
"<label class=\"rev-InputLabel rev-TextareaStack \">  \n  <textarea class=\"rev-Textarea \" id=\"widget_required_string\" name=\"widget[required_string]\">\nhello</textarea>\n  \n  \n</label>"

See text_input_stack/3 for more options.