Class: Primer::BlankslateComponent

Inherits:

Component

• Object
• ViewComponent::Base
• Component
• Primer::BlankslateComponent

Defined in:

app/components/primer/blankslate_component.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

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(title: "", title_tag: :h3, icon: "", icon_size: :medium, image_src: "", image_alt: " ", description: "", button_text: "", button_url: "", button_classes: "btn-primary my-3", link_text: "", link_url: "", narrow: false, large: false, spacious: false, **system_arguments) ⇒ BlankslateComponent constructor

  A new instance of BlankslateComponent.

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: "", title_tag: :h3, icon: "", icon_size: :medium, image_src: "", image_alt: " ", description: "", button_text: "", button_url: "", button_classes: "btn-primary my-3", link_text: "", link_url: "", narrow: false, large: false, spacious: false, **system_arguments) ⇒ BlankslateComponent

Returns a new instance of BlankslateComponent.

Examples:

Basic

<%= render Primer::BlankslateComponent.new(
  title: "Title",
  description: "Description",
) %>

Icon

@description
  Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
@code
  <%= render Primer::BlankslateComponent.new(
    icon: :globe,
    title: "Title",
    description: "Description",
  ) %>

Loading

@description
  Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
@code
  <%= render Primer::BlankslateComponent.new(
    title: "Title",
    description: "Description",
  ) do |component| %>
    <% component.spinner(size: :large) %>
  <% end %>

Custom content

@description
  Pass custom content as a block in place of `description`.
@code
  <%= render Primer::BlankslateComponent.new(
    title: "Title",
  ) do %>
    <em>Your custom content here</em>
  <% end %>

Action button

@description
  Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
@code
  <%= render Primer::BlankslateComponent.new(
    icon: :book,
    title: "Welcome to the mona wiki!",
    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.",

    button_text: "Create the first page",
    button_url: "https://github.com/monalisa/mona/wiki/_new",
  ) %>

Link

@description
  Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
@code
  <%= render Primer::BlankslateComponent.new(
    icon: :book,
    title: "Welcome to the mona wiki!",
    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.",
    link_text: "Learn more about wikis",
    link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
  ) %>

Variations

@description
  There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
@code
  <%= render Primer::BlankslateComponent.new(
    icon: :book,
    title: "Welcome to the mona wiki!",
    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.",
    narrow: true,
    large: true,
    spacious: true,
  ) %>

Parameters:

• title (String) (defaults to: "") —

  Text that appears in a larger bold font.

• title_tag (Symbol) (defaults to: :h3) —

  HTML tag to use for title.

• icon (Symbol) (defaults to: "") —

  Octicon icon to use at top of component.

• icon_size (Symbol) (defaults to: :medium) —

  <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS, sort: false) %>

• image_src (String) (defaults to: "") —

  Image to display.

• image_alt (String) (defaults to: " ") —

  Alt text for image.

• description (String) (defaults to: "") —

  Text that appears below the title. Typically a whole sentence.

• button_text (String) (defaults to: "") —

  The text of the button.

• button_url (String) (defaults to: "") —

  The URL where the user will be taken after clicking the button.

• button_classes (String) (defaults to: "btn-primary my-3") —

  Classes to apply to action button

• link_text (String) (defaults to: "") —

  The text of the link.

• link_url (String) (defaults to: "") —

  The URL where the user will be taken after clicking the link.

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

  Adds a maximum width.

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

  Increases the font size.

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

  Adds extra padding.

• system_arguments (Hash) —

  <%= link_to_system_arguments_docs %>

# File 'app/components/primer/blankslate_component.rb', line 111

def initialize(
  title: "",
  title_tag: :h3,
  icon: "",
  icon_size: :medium,
  image_src: "",
  image_alt: " ",
  description: "",
  button_text: "",
  button_url: "",
  button_classes: "btn-primary my-3",
  link_text: "",
  link_url: "",

  # variations
  narrow: false,
  large: false,
  spacious: false,

  **system_arguments
)
  @system_arguments = system_arguments
  @system_arguments[:tag] = :div
  @system_arguments[:classes] = class_names(
    @system_arguments[:classes],
    "blankslate",
    "blankslate-narrow": narrow,
    "blankslate-large": large,
    "blankslate-spacious": spacious
  )

  @title_tag = title_tag
  @icon = icon
  @icon_size = icon_size
  @image_src = image_src
  @image_alt = image_alt
  @title = title
  @description = description
  @button_text = button_text
  @button_url = button_url
  @button_classes = button_classes
  @link_text = link_text
  @link_url = link_url
end