OctantisWeb.Core (octantis v0.2.0)

Renders slot with render_slot if it is a slot. Otherwise it renders the inner_block. Allows for React like child or attribute pattern found repeatedly in Polaris.

translate_error(arg)

translate_errors(field)

web_component()

Functions

assign_default_nil(assigns, key)

assign_extra_styles(assigns)

assign_phx_bindings(assigns, binding_keys \\ [:phx_values, :phx_click, :phx_click_away, :phx_change, :phx_submit, :phx_feedback_for, :phx_feedback_group, :phx_disable_with, :phx_trigger_action, :phx_auto_recover, :phx_blur, :phx_focus, :phx_window_blur, :phx_window_focus, :phx_keydown, :phx_keyup, :phx_window_keydown, :phx_window_keyup, :phx_key, :phx_viewport_top, :phx_viewport_bottom, :phx_mounted, :phx_update, :phx_remove, :phx_hook, :phx_connected, :phx_disconnected, :phx_debounce, :phx_throttle, :phx_track_static])

Transform phx_ prefixed assigns to both data-phx- and phx- assigns.

This allows us use bindingPrefix: "data-phx-" in production as required by Shopify's AppBridge (See AppBridge section of the README) but also use the default bindingPrefix: "phx-" for tests and Storybook.

phx_values is a special case that is expanded to phx-value-key and data-phx-value-key

This should only be used html tags, and not on heex components.

See

https://hexdocs.pm/phoenix_live_view/bindings.html

Examples

iex> assigns |> assign_phx_bindings(%{phx_click={&click}, phx_values={[key: "value"]}}) %{

phx-click={&click}
data-phx-click={&click}
phx-value-key="value"
data-phx-value-key="value"

}

heex> <button {@bindings} /> <button

phx-click={&click}
data-phx-click={&click}
phx-value-key="value"
data-phx-value-key="value"

assign_style(assigns)

(macro)

attr_extra_styles(opts \\ [])

(macro)

class_for_attribute(prefix, attribute, value)

Build the class in the magic way that matches polaris classes

Examples

iex> class_for_attribute("Polaris-Badge", :tone, "success") "Polaris-Badge--toneSuccess"

iex> class_for_attribute("Polaris-Badge", :tone, "success--strong") "Polaris-Badge__toneSuccess--strong"

component()

div_wrapper(assigns)

Optionally wrap the inner_block in a div.

This is primarily to address the react pattern:

return descriptionMarkup ? (
    <div>
      {labelMarkup}
      {descriptionMarkup}
    </div>
  ) : (
    {labelMarkup}
  );

which can now be rendered with

<.div_wrapper wrap={@description}>
  {@label}
  {@description}
</.div_wrapper>

Attributes

wrap (:boolean) - Render the div, or just have the inner block. Defaults to true.
Global attributes are accepted.

Slots

inner_block

extra_styles(existing_styles \\ "", attrs)

Assign common styles based on attributes. Use with the attr_extra_styles macro.

Examples

heex> <.block_stack flex_grow="1"/> <div style="flex-grow:1;"/>

import_polaris_components(components)

(macro)

is_slot(slot)

(macro)

phx_bindings(assigns, binding_keys \\ [:phx_values, :phx_click, :phx_click_away, :phx_change, :phx_submit, :phx_feedback_for, :phx_feedback_group, :phx_disable_with, :phx_trigger_action, :phx_auto_recover, :phx_blur, :phx_focus, :phx_window_blur, :phx_window_focus, :phx_keydown, :phx_keyup, :phx_window_keydown, :phx_window_keyup, :phx_key, :phx_viewport_top, :phx_viewport_bottom, :phx_mounted, :phx_update, :phx_remove, :phx_hook, :phx_connected, :phx_disconnected, :phx_debounce, :phx_throttle, :phx_track_static])

slot_attributes(slots)

Convenient syntax for sending slot attributes to a slot

Examples

heex> <.block_stack {slot_attributes(@myslot)} />

slot_wrapper(assigns)

Renders slot with render_slot if it is a slot. Otherwise it renders the inner_block. Allows for React like child or attribute pattern found repeatedly in Polaris.

Examples

heex>

<.slot_wrapper slot={@title}>
  <.text variant="headingSm" as="h2">
    <%= @title %>
  </.text>
</.slot_wrapper>