DevactionUI.EmailTable (devaction_ui v0.4.0)

Copy Markdown View Source

The tabular parts of an e-mail: label and value rows, the lists of findings, scope items and events, numbered steps and a row of numbers.

Each is a table with inline styles, with the em-line-b, em-soft, em-ink and em-panel classes that the dark mode of DevactionUI.Email.document/1 restyles. The lists reuse DevactionUI.EmailTag for their labels.

Summary

Functions

A list of items with a short mono code on the left and a line of text.

The details of one thing as lines: the label on the left in the soft color, the value on the right.

A list of dated events: a title and a detail on the left, a tag and the date on the right.

A list of findings: a tag, a bold title and the place in mono.

A row of big numbers, each on a grey tile with its caption.

Numbered steps: a round number, a bold title and a line under it. The current step has the solid circle.

Functions

code_list(assigns)

@spec code_list(map()) :: Phoenix.LiveView.Rendered.t()

A list of items with a short mono code on the left and a line of text.

Example

<.code_list>
  <:item code="1.1">Export invoices as CSV</:item>
  <:item code="1.2">Filter by client</:item>
</.code_list>

Attributes

  • Global attributes are accepted.

Slots

  • item (required) - a line of the list; the content is the text. Accepts attributes:
    • code (:string) (required) - the short mono code on the left.

details(assigns)

@spec details(map()) :: Phoenix.LiveView.Rendered.t()

The details of one thing as lines: the label on the left in the soft color, the value on the right.

Example

<.details>
  <:row label="Device">Firefox on Linux</:row>
  <:row label="When">Oct 16, 09:12</:row>
</.details>

Attributes

  • Global attributes are accepted.

Slots

  • row (required) - a line: the value is the content. Accepts attributes:
    • label (:string) (required)

event_list(assigns)

@spec event_list(map()) :: Phoenix.LiveView.Rendered.t()

A list of dated events: a title and a detail on the left, a tag and the date on the right.

Example

<.event_list>
  <:item title="Renewal" detail="Hub API" tone={:warn} tag="30 DAYS" date="Nov 15" />
</.event_list>

Attributes

  • Global attributes are accepted.

Slots

  • item (required) - an event. Accepts attributes:
    • title (:string) (required)
    • detail (:string) (required) - the line under the title.
    • tone (:atom) (required) - Must be one of :risk, :warn, :ok, :info, or :neutral.
    • tag (:string) (required) - the label of the tag, in capitals.
    • date (:string) (required) - the date under the tag.

finding_list(assigns)

@spec finding_list(map()) :: Phoenix.LiveView.Rendered.t()

A list of findings: a tag, a bold title and the place in mono.

Example

<.finding_list>
  <:item tone={:risk} tag="RISK" title="Unscoped query" location="lib/billing.ex:112" />
  <:item tone={:info} tag="TIP" title="Extract the helper" location="lib/billing.ex:140" />
</.finding_list>

Attributes

  • Global attributes are accepted.

Slots

  • item (required) - a finding. Accepts attributes:
    • tone (:atom) (required) - Must be one of :risk, :warn, :ok, :info, or :neutral.
    • tag (:string) (required) - the label of the tag, in capitals.
    • title (:string) (required)
    • location (:string) (required) - where, in mono: a file and a line.

stats(assigns)

@spec stats(map()) :: Phoenix.LiveView.Rendered.t()

A row of big numbers, each on a grey tile with its caption.

Example

<.stats>
  <:stat value="12" label="PRs reviewed" />
  <:stat value="3" label="Risks found" />
</.stats>

Attributes

  • Global attributes are accepted.

Slots

  • stat (required) - a number. Accepts attributes:
    • value (:string) (required)
    • label (:string) (required)

steps(assigns)

@spec steps(map()) :: Phoenix.LiveView.Rendered.t()

Numbered steps: a round number, a bold title and a line under it. The current step has the solid circle.

Example

<.steps>
  <:step title="Confirm your e-mail" current>You are here.</:step>
  <:step title="Connect GitHub">Pick the repositories.</:step>
</.steps>

Attributes

  • Global attributes are accepted.

Slots

  • step (required) - a step; the content is its description. Accepts attributes:
    • title (:string) (required)
    • current (:boolean) - the step the reader is on, in the solid circle.