app/pb_kits/playbook/pb_background/background.rb
# frozen_string_literal: true # rubocop:disable Layout/HashAlignment module Playbook module PbBackground class Background < Playbook::KitBase prop :background_color, type: Playbook::Props::Enum, values: %w[ gradient dark light white success warning error info neutral primary shadow category_1 category_2 category_3 category_4 category_5 category_6 category_7 category_8 category_9 category_10 category_11 category_12 category_13 category_14 category_15 category_16 category_17 category_18 category_19 category_20 category_21 success_secondary error_secondary info_secondary warning_secondary neutral_secondary primary_secondary text_lt_default text_lt_light text_lt_lighter text_dk_default text_dk_light text_dk_lighter card_light card_dark data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 border_light border_dark success_subtle warning_subtle error_subtle info_subtle neutral_subtle ], default: "light" prop :background_position, type: Playbook::Props::String, default: nil prop :background_repeat, type: Playbook::Props::Enum, values: %w[ repeat repeat-x repeat-y no-repeat space round initial inherit ], default: "initial" prop :background_size, type: Playbook::Props::Enum, values: %w[contain cover auto], default: "cover" prop :image_url prop :tag, type: Playbook::Props::Enum, values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td thead col], default: "div" prop :transition, type: Playbook::Props::Enum, values: ["blur", "fade", "scale", nil], default: nil prop :custom_color, type: Playbook::Props::String, default: nil def classname generate_classname("pb_background_kit", image_classname, separator: " ") end def custom_background_color "background-color: #{custom_color}; background-position: #{background_position}" end private def image_classname background_class = custom_color.present? ? "pb_background_custom_color" : "pb_background_color_#{background_color}" background_class_lazy = image_url.present? ? " lazyload #{transition}" : "" "#{background_class}#{background_class_lazy}" end end end end # rubocop:enable Layout/HashAlignment