Class: Yattho::Alpha::Dialog

Inherits:
Component
  • Object
show all
Defined in:
app/components/yattho/alpha/dialog.rb,
app/components/yattho/alpha/dialog/body.rb,
app/components/yattho/alpha/dialog/footer.rb,
app/components/yattho/alpha/dialog/header.rb

Overview

A ‘Dialog` is used to remove the user from the main application flow, to confirm actions, ask for disambiguation or to present small forms.

Defined Under Namespace

Classes: Body, Footer, Header

Constant Summary collapse

DEFAULT_SIZE = 
:medium
SIZE_MAPPINGS = 
{
  :small => "Overlay--size-small-portrait",
  :medium_portrait => "Overlay--size-medium-portrait",
  DEFAULT_SIZE => "Overlay--size-medium",
  :large => "Overlay--size-large",
  :xlarge => "Overlay--size-xlarge",
  :auto => "Overlay--size-auto"
}.freeze
SIZE_OPTIONS = 
SIZE_MAPPINGS.keys
DEFAULT_POSITION = 
:center
POSITION_MAPPINGS = 
{
  DEFAULT_POSITION => "Overlay-backdrop--center",
  :left => "Overlay-backdrop--side Overlay-backdrop--placement-left",
  :right => "Overlay-backdrop--side Overlay-backdrop--placement-right"
}.freeze
POSITION_OPTIONS = 
POSITION_MAPPINGS.keys
DEFAULT_POSITION_NARROW = 
:inherit
POSITION_NARROW_MAPPINGS = 
{
  DEFAULT_POSITION_NARROW => "",
  :bottom => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-bottom-whenNarrow",
  :fullscreen => "Overlay-backdrop--full-whenNarrow",
  :left => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-left-whenNarrow",
  :right => "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-right-whenNarrow"
}.freeze
POSITION_NARROW_OPTIONS = 
POSITION_NARROW_MAPPINGS.keys

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Method Summary collapse

Methods inherited from Component

deprecated?, generate_id

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(title:, subtitle: nil, size: DEFAULT_SIZE, position: DEFAULT_POSITION, position_narrow: DEFAULT_POSITION_NARROW, visually_hide_title: false, id: self.class.generate_id, **system_arguments) ⇒ Dialog

Returns a new instance of Dialog.

Examples:

Dialog with Cancel and Submit buttons

@description
  An ID is provided which enables wiring of the open and close buttons to the dialog.
@code
  <%= render(Yattho::Alpha::Dialog.new(
    title: "Dialog Example",
    id: "my-dialog",
  )) do |d| %>
    <% d.with_show_button { "Show Dialog" } %>
    <% d.with_body do %>
      <p>Some content</p>
    <% end %>
    <% d.footer do %>
      <%= render(Yattho::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
      <%= render(Yattho::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
    <% end %>
  <% end %>

Parameters:

  • id (String) (defaults to: self.class.generate_id) —

    The id of the dialog.

  • title (String) —

    Describes the content of the dialog.

  • subtitle (String) (defaults to: nil) —

    Provides additional context for the dialog, also setting the ‘aria-describedby` attribute.

  • size (Symbol) (defaults to: DEFAULT_SIZE) —

    The size of the dialog. <%= one_of(Yattho::Alpha::Dialog::SIZE_OPTIONS) %>

  • position (Symbol) (defaults to: DEFAULT_POSITION) —

    The position of the dialog. <%= one_of(Yattho::Alpha::Dialog::POSITION_OPTIONS) %>

  • position_narrow (Symbol) (defaults to: DEFAULT_POSITION_NARROW) —

    The position of the dialog when narrow. <%= one_of(Yattho::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>

  • visually_hide_title (Boolean) (defaults to: false) —

    If true will hide the heading title, while still making it available to Screen Readers.

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
# File 'app/components/yattho/alpha/dialog.rb', line 117

def initialize(
  title:,
  subtitle: nil,
  size: DEFAULT_SIZE,
  position: DEFAULT_POSITION,
  position_narrow: DEFAULT_POSITION_NARROW,
  visually_hide_title: false,
  id: self.class.generate_id,
  **system_arguments
)
  @system_arguments = deny_tag_argument(**system_arguments)

  @system_arguments[:tag] = "modal-dialog"
  @system_arguments[:role] = "dialog"
  @system_arguments[:id] = id
  @system_arguments[:aria] = { modal: true }
  @system_arguments[:classes] = class_names(
    "Overlay",
    "Overlay-whenNarrow",
    SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
    "Overlay--motion-scaleFade",
    system_arguments[:classes]
  )
  @backdrop_classes = class_names(
    POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, position, DEFAULT_POSITION)],
    POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, position_narrow,
                                               DEFAULT_POSITION_NARROW)]
  )

  @id = id.to_s
  @title = title
  @position = position
  @position_narrow = position_narrow
  @visually_hide_title = visually_hide_title

  @subtitle = subtitle

  @system_arguments[:aria] ||= {}
  @system_arguments[:aria][:describedby] ||= "#{@id}-description"
end

Instance Method Details

#before_render ⇒ Object 



158
159
160
161
 
# File 'app/components/yattho/alpha/dialog.rb', line 158

def before_render
  with_header unless header?
  with_body unless body?
end