Class: Yattho::Beta::Blankslate

Inherits:

Component

• Object
• ViewComponent::Base
• Component
• Yattho::Beta::Blankslate

Defined in:

app/components/yattho/beta/blankslate.rb

Overview

Use ‘Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn’t there.

Constant Summary

VISUAL_OPTIONS =

%i[icon spinner image].freeze

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

• #initialize(narrow: false, spacious: false, border: false, **system_arguments) ⇒ Blankslate constructor

  A new instance of Blankslate.

• #render? ⇒ Boolean
• #wrapper ⇒ Object

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(narrow: false, spacious: false, border: false, **system_arguments) ⇒ Blankslate

Returns a new instance of Blankslate.

Examples:

Basic

<%= render Yattho::Beta::Blankslate.new do |component| %>
  <% component.with_heading(tag: :h2).with_content("Title") %>
  <% component.with_description { "Description"} %>
<% end %>

Icon

@description
  Add an `icon` to give additional context. Refer to the [Octicons](https://yattho.com/octicons/) documentation to choose an icon.
@code
  <%= render Yattho::Beta::Blankslate.new do |component| %>
    <% component.with_visual_icon(icon: :globe) %>
    <% component.with_heading(tag: :h2).with_content("Title") %>
    <% component.with_description { "Description"} %>
  <% end %>

Loading

@description
  Add a [SpinnerComponent](https://yattho.com/view-components/components/spinner) to the blankslate in place of an icon.
@code
  <%= render Yattho::Beta::Blankslate.new do |component| %>
    <% component.with_visual_spinner(size: :large) %>
    <% component.with_heading(tag: :h2).with_content("Title") %>
    <% component.with_description { "Description"} %>
  <% end %>

Using an image

@description
  Add an `image` to give context that an Octicon couldn't.
@code
  <%= render Yattho::Beta::Blankslate.new do |component| %>
    <% component.with_visual_image(src: Yattho::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
    <% component.with_heading(tag: :h2).with_content("Title") %>
    <% component.with_description { "Description"} %>
  <% end %>

Custom content

@description
  Pass custom content to `description`.
@code
  <%= render Yattho::Beta::Blankslate.new do |component| %>
    <% component.with_heading(tag: :h2).with_content("Title") %>
    <% component.with_description do %>
      <em>Your custom content here</em>
    <% end %>
  <% end %>

Primary action

@description
  Provide a `primary_action` to guide users to take action from the blankslate. The `primary_action` appears below the description and custom content.
@code
  <%= render Yattho::Beta::Blankslate.new do |component| %>
    <% component.with_visual_icon(icon: :book) %>
    <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
    <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
    <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
  <% end %>

Secondary action

@description
  Add an additional `secondary_action` to help users learn more about a feature. See <%= link_to_accessibility %>. `secondary_action` will be shown at the very bottom:
@code
  <%= render Yattho::Beta::Blankslate.new do |component| %>
    <% component.with_visual_icon(icon: :book) %>
    <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
    <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
    <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
  <% end %>

Primary and secondary actions

@description
  `primary_action` and `secondary_action` can also be used together. The `primary_action` will always be rendered before the `secondary_action`:
@code
  <%= render Yattho::Beta::Blankslate.new do |component| %>
    <% component.with_visual_icon(icon: :book) %>
    <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
    <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
    <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
    <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
  <% end %>

Variations

@description
  There are a few variations of how the Blankslate appears: `narrow` adds a maximum width of `485px`, and `spacious` increases the padding from `32px` to `80px 40px`.
@code
  <%= render Yattho::Beta::Blankslate.new(
    narrow: true,
    spacious: true,
  ) do |component| %>
    <% component.with_visual_icon(icon: :book) %>
    <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
    <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
  <% end %>

With border

@description
  It's possible to add a border around the Blankslate. This will wrap the Blankslate in a BorderBox.
@code
  <%= render Yattho::Beta::Blankslate.new(border: true) do |component| %>
    <% component.with_visual_icon(icon: :book) %>
    <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
    <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
  <% end %>

Parameters:

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

  Adds a maximum width of ‘485px` to the Blankslate.

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

  Increases the padding from ‘32px` to `80px 40px`.

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

  Adds a border around the Blankslate.

• system_arguments (Hash) —

  <%= link_to_system_arguments_docs %>

# File 'app/components/yattho/beta/blankslate.rb', line 210

def initialize(narrow: false, spacious: false, border: false, **system_arguments)
  @border = border
  @system_arguments = deny_tag_argument(**system_arguments)
  @system_arguments[:tag] = :div
  @system_arguments[:classes] = class_names(
    @system_arguments[:classes],
    "blankslate",
    'blankslate-narrow': narrow,
    'blankslate-spacious': spacious
  )
end

Instance Method Details

#render? ⇒ Boolean

Returns:

• (Boolean)

# File 'app/components/yattho/beta/blankslate.rb', line 222

def render?
  heading.present?
end

#wrapper ⇒ Object

# File 'app/components/yattho/beta/blankslate.rb', line 226

def wrapper
  unless @border
    yield
    return # returning `yield` caused a double render
  end

  content_tag(:div, class: "Box") do
    yield if block_given?
  end
end