DevactionUI.Avatar (devaction_ui v0.2.3)

A person as two letters in a circle, and the stack of them overlapping by 8px. The letters come from the name (initials/1); the tone only tells people apart, it never carries meaning, and tone: :auto picks one of four colours (indigo, green, red, gray) from a stable hash of the name, so the same person always has the same colour. A circle with no name is decoration, so a stack names its people for assistive technology once, as a group.

Around it: five sizes (:xs to :xl), a square shape for what is not a person (a workspace, a repository, a client), a status dot (online, away, busy, offline), the AI agent (agent/1, amber, with its own mark) and the invite slot (avatar_invite/1). A status is never alone: it is also read out. group/1 is the canvas's overlapped group: rounded squares in three sizes, status dots, a +N chip and a caption beside.

Summary

Functions

agent(assigns)

The AI agent: amber, with its own mark instead of letters.

avatar(assigns)

A person as their initials, or an icon, in a circle or a square.

avatar_invite(assigns)

The empty place at the end of a group, to invite someone.

avatar_stack(assigns)

The people overlapping by 8px, with a +N chip for those past max.

group(assigns)

Avatars overlapping by a quarter of their size, with status dots, a +N chip and a caption beside.

initials(name)

Up to two capital letters: the first of the first and of the last word.

Functions

agent(assigns)

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

The AI agent: amber, with its own mark instead of letters.

Attributes

name (:string) (required) - the agent's name, read out.
size (:atom) - Defaults to :md. Must be one of :xs, :sm, :md, :lg, or :xl.
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required) - the mark of the agent, an icon.

avatar(assigns)

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

A person as their initials, or an icon, in a circle or a square.

Attributes

name (:string) (required) - the person (or the workspace); the letters come from it.
tone (:atom) - :auto takes one of four colours from a stable hash of the name. Defaults to :neutral. Must be one of :auto, :ok, :warn, :risk, :info, or :neutral.
size (:atom) - 22 (for stacks), 32, 40 (default), 56 and 72 px, with letters of 9, 11, 12, 16 and 20px. Defaults to :md. Must be one of :xs, :sm, :md, :lg, or :xl.
shape (:atom) - square is for a workspace, a repository, a client; it sets its letters in the sans, semibold. Defaults to :round. Must be one of :round, or :square.
status (:atom) - Defaults to nil.Must be one of nil, :online, :away, :busy, or :offline.
status_label (:string) - what the status says, read by screen readers. Defaults to nil.
ring (:boolean) - the 2px ring of the card colour that separates avatars in a stack, instead of the tone's line. Defaults to false.
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

icon - replaces the letters, such as the mark of a repository.

avatar_invite(assigns)

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

The empty place at the end of a group, to invite someone.

Attributes

label (:string) (required) - what pressing it does: Invite a person.
size (:atom) - Defaults to :md. Must be one of :xs, :sm, :md, :lg, or :xl.
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required) - a plus icon.

avatar_stack(assigns)

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

The people overlapping by 8px, with a +N chip for those past max.

Attributes

people (:list) (required) - %{name: ..., tone: ...} each (tone may be :auto), the first on top.
label (:string) (required) - what the group is, e.g. Reviewers.
max (:integer) - how many are drawn; the rest become a +N chip. Defaults to nil.
size (:atom) - Defaults to :sm. Must be one of :xs, :sm, :md, :lg, or :xl.
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

extra - after the people, such as an avatar_invite/1.

group(assigns)

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

Avatars overlapping by a quarter of their size, with status dots, a +N chip and a caption beside.

Attributes

people (:list) (required) - %{name: ..., tone: ..., status: ..., status_label: ...} each, the first on top; tone is :ink (the solid ink of whoever is the subject), :auto or a Tone, status and status_label are optional.
label (:string) (required) - what the group is, read by assistive technology.
max (:integer) - how many are drawn; the rest become a +N chip. Defaults to nil.
size (:atom) - 22, 28 and 36 px. Defaults to :md. Must be one of :xs, :sm, or :md.
shape (:atom) - the corners: rounded squares (the canvas's group) or circles. Defaults to :square. Must be one of :square, or :round.
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

caption - the text beside the avatars, such as Review team, 2 online.

initials(name)

@spec initials(String.t()) :: String.t()

Up to two capital letters: the first of the first and of the last word.