Class: Primer::BlankslateComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/primer/blankslate_component.rb

Overview

Use Primer::BlankslateComponent 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 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 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|Add an ‘icon` to give additional context. Refer to the [Octicons](primer.style/octicons/) documentation to choose an icon.

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

Loading|Add a [SpinnerComponent](primer.style/view-components/components/spinner) to the blankslate in place of an icon.

<%= render Primer::BlankslateComponent.new(
  title: "Title",
  description: "Description",
) do |component| %>
  <% component.spinner(size: :large) %>
<% end %>

Custom content|Pass custom content as a block in place of ‘description`.

<%= render Primer::BlankslateComponent.new(
  title: "Title",
) do %>
  <em>Your custom content here</em>
<% end %>

Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.

<%= 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|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:

<%= 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|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.

<%= 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 (String) (defaults to: "") —

    Octicon icon to use at top of component.

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

    <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>

  • 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.



89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
 
# File 'app/components/primer/blankslate_component.rb', line 89

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