Class: Playbook::PbEmptyState::EmptyState

Inherits:
KitBase
  • Object
show all
Defined in:
app/pb_kits/playbook/pb_empty_state/empty_state.rb

Constant Summary collapse

SIZE_CONFIGS = 
{
  sm: {
    vertical: {
      image_width: "100px",
      title_size: 4,
      title_padding: "xxs",
      description_pad: "sm",
      button_size: "sm",
      button_margin: "xs",
      scss_class: "sm-state-vertical",
      flex_direction: "column",
    },
    horizontal: {
      image_width: "100px",
      title_size: 4,
      title_padding: "xxs",
      description_pad: "sm",
      button_size: "sm",
      button_margin: "xs",
      scss_class: "sm-state-horizontal",
      flex_direction: "row",
    },
  },
  md: {
    vertical: {
      image_width: "140px",
      title_size: 3,
      title_padding: "xs",
      description_pad: "md",
      button_size: "md",
      button_margin: "sm",
      scss_class: "md-state-vertical",
      flex_direction: "column",
    },
    horizontal: {
      image_width: "140px",
      title_size: 3,
      title_padding: "xs",
      description_pad: "md",
      button_size: "md",
      button_margin: "sm",
      scss_class: "md-state-horizontal",
      flex_direction: "row",
    },
  },
  lg: {
    vertical: {
      image_width: "100%",
      title_size: 1,
      title_padding: "sm",
      description_pad: "lg",
      button_size: "md",
      button_margin: "md",
      scss_class: "lg-state-vertical",
      flex_direction: "column",
    },
    horizontal: {
      image_width: "100%",
      title_size: 2,
      title_padding: "sm",
      description_pad: "lg",
      button_size: "md",
      button_margin: "md",
      scss_class: "lg-state-horizontal",
      flex_direction: "row",
    },
  },
}.freeze

Constants included from Playbook::PositionPropsCss

Playbook::PositionPropsCss::POSITION_VALUES

Instance Attribute Summary

Attributes included from Playbook::Props

#values

Instance Method Summary collapse

Methods inherited from KitBase

#combined_html_options, #global_inline_props, #object, #pb_content_tag

Methods included from MaxHeight

included, #max_height_options, #max_height_props, #max_height_values

Methods included from MinHeight

included, #min_height_options, #min_height_props, #min_height_values

Methods included from Height

#height_options, #height_props, #height_values, included

Methods included from VerticalAlign

included, #vertical_align_options, #vertical_align_props, #vertical_align_values

Methods included from Bottom

#bottom_options, #bottom_values, included

Methods included from Playbook::PositionPropsCss

#positioning_css

Methods included from Right

included, #right_options, #right_values

Methods included from Top

included, #top_options, #top_values

Methods included from Left

included, #left_options, #left_values

Methods included from Truncate

included, #truncate_options, #truncate_props, #truncate_values

Methods included from Overflow

included, #overflow_options, #overflow_props, #overflow_values

Methods included from TextAlign

included, #text_align_options, #text_align_props, #text_align_values

Methods included from BorderRadius

#border_radius_options, #border_radius_props, #border_radius_values, included

Methods included from Hover

#hover_attributes, #hover_background_values, #hover_color_values, #hover_options, #hover_props, #hover_scale_values, #hover_shadow_values, #hover_underline_values, #hover_values, included

Methods included from Playbook::Position

included, #position_options, #position_values

Methods included from Order

included, #order_options, #order_props, #order_values

Methods included from FlexShrink

#flex_shrink_options, #flex_shrink_props, #flex_shrink_values, included

Methods included from FlexGrow

#flex_grow_options, #flex_grow_props, #flex_grow_values, included

Methods included from Flex

#flex_options, #flex_props, #flex_values, included

Methods included from AlignSelf

#align_self_options, #align_self_props, #align_self_values, included

Methods included from AlignContent

#align_content_options, #align_content_props, #align_content_values, included

Methods included from AlignItems

#align_items_options, #align_items_props, #align_items_values, included

Methods included from JustifySelf

included, #justify_self_options, #justify_self_props, #justify_self_values

Methods included from JustifyContent

included, #justify_content_options, #justify_content_props, #justify_content_values

Methods included from FlexWrap

#flex_wrap_options, #flex_wrap_props, #flex_wrap_values, included

Methods included from FlexDirection

#flex_direction_options, #flex_direction_props, #flex_direction_values, included

Methods included from Cursor

#cursor_options, #cursor_props, #cursor_values, included

Methods included from Display

#display_options, #display_props, #display_size_values, #display_values, included

Methods included from LineHeight

included, #line_height_options, #line_height_props, #line_height_values

Methods included from Shadow

included, #shadow_options, #shadow_props, #shadow_values

Methods included from NumberSpacing

included, #number_spacing_options, #number_spacing_values

Methods included from ZIndex

included, #screen_size_values, #z_index_options, #z_index_props, #z_index_values

Methods included from Spacing

#break_method_values, #column_gap_options, #column_gap_props, #filter_classname, #gap_options, #gap_props, #gap_values, included, #max_width_options, #max_width_props, #max_width_values, #min_width_options, #min_width_props, #min_width_values, #row_gap_options, #row_gap_props, #screen_size_values, #spacing_options, #spacing_props, #spacing_values, #width_options, #width_props, #width_values

Methods included from Classnames

#generate_classname, #generate_classname_without_spacing, included

Methods included from Playbook::Props

#initialize, #prop

Methods included from Playbook::PbKitHelper

#pb_rails

Methods included from Playbook::PbFormsHelper

#pb_form_with

Instance Method Details

#classname ⇒ Object 



92
93
94
 
# File 'app/pb_kits/playbook/pb_empty_state/empty_state.rb', line 92

def classname
  generate_classname("pb_empty_state_kit")
end

#config ⇒ Object 



96
97
98
 
# File 'app/pb_kits/playbook/pb_empty_state/empty_state.rb', line 96

def config
  SIZE_CONFIGS[size.to_sym][orientation.to_sym]
end

#default_image_data_uri ⇒ Object 



100
101
102
103
104
105
 
# File 'app/pb_kits/playbook/pb_empty_state/empty_state.rb', line 100

def default_image_data_uri
  svg_path = __dir__.then { |d| File.join(d, "docs", "default_image", "computer_fly_no_branding.svg") }
  svg      = File.read(svg_path)
  encoded  = ERB::Util.url_encode(svg)
  "data:image/svg+xml,#{encoded}"
end

#flex_align ⇒ Object 



111
112
113
114
115
116
117
118
119
120
 
# File 'app/pb_kits/playbook/pb_empty_state/empty_state.rb', line 111

def flex_align
  case alignment
  when "left"
    "start"
  when "right"
    "end"
  else
    "center"
  end
end

#padding_size ⇒ Object 



107
108
109
 
# File 'app/pb_kits/playbook/pb_empty_state/empty_state.rb', line 107

def padding_size
  size == "sm" ? "xs" : "xl"
end