Class: SolidusAdmin::UI::Toggletip::Component

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/solidus_admin/ui/toggletip/component.rb

Constant Summary collapse

POSITIONS =

Icon size: 1rem Arrow size: 0.375rem Banner padding x: 0.75rem

{
  up: {
    arrow: %w[before:top-0 before:left-1/2 before:translate-y-[-50%] before:translate-x-[-50%]],
    bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(0.375rem/2)]]
  },
  up_right: {
    arrow: %w[before:top-0 before:right-0 before:translate-y-[-50%]],
    bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.375rem/2))] translate-y-[calc(0.375rem/2)]]
  },
  right: {
    arrow: %w[before:top-1/2 before:right-0 before:translate-y-[-50%] before:translate-x-[0.93rem]],
    bubble: %w[translate-x-[calc(-100%+(-0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
  },
  down_right: {
    arrow: %w[before:bottom-0 before:right-0 before:translate-y-[50%]],
    bubble: %w[translate-x-[calc(-100%+0.75rem+(1rem/2)+(0.376rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
  },
  down: {
    arrow: %w[before:bottom-0 before:left-1/2 before:translate-y-[50%] before:translate-x-[-50%]],
    bubble: %w[translate-x-[calc(-50%+(1rem/2))] translate-y-[calc(-100%-1rem-(0.375rem/2))]]
  },
  down_left: {
    arrow: %w[before:bottom-0 before:left-0 before:translate-y-[50%]],
    bubble: %w[translate-x-[calc(-1rem/2)] translate-y-[calc(-100%-0.75rem-0.375rem)]]
  },
  left: {
    arrow: %w[before:top-1/2 before:left-0 before:translate-y-[-50%] before:translate-x-[-0.93rem]],
    bubble: %w[translate-x-[calc(1rem+(0.375rem/2))] translate-y-[calc(-50%-(1rem/2))]]
  },
  up_left: {
    arrow: %w[before:top-0 before:left-0 before:translate-y-[-50%]],
    bubble: %w[translate-x-[calc(-0.75rem+0.375rem)] translate-y-[calc(0.375rem/2)]]
  },
  none: {
    arrow: %w[before:hidden],
    bubble: %w[translate-x-[calc(-50%+0.75rem)]]
  }
}.freeze
THEMES = 
{
  light: {
    icon: %w[fill-gray-500],
    bubble: %w[text-gray-800 bg-gray-50]
  },
  dark: {
    icon: %w[fill-gray-800],
    bubble: %w[text-white bg-gray-800]
  }
}.freeze

Instance Method Summary collapse

Constructor Details

#initialize(text:, position: :down, theme: :light, **attributes) ⇒ Component

Returns a new instance of Component.

Parameters:

  • text (String) —

    The toggletip text

  • position (Symbol) (defaults to: :down) —

    The position of the arrow in relation to the toggletip. The latter will be positioned accordingly in relation to the help icon. Defaults to ‘:up`. See `POSITIONS` for available options.

  • theme (Symbol) (defaults to: :light) —

    The theme of the toggletip. Defaults to ‘:light`. See `THEMES` for available options.



63
64
65
66
67
68
69
70
71
72
 
# File 'app/components/solidus_admin/ui/toggletip/component.rb', line 63

def initialize(text:, position: :down, theme: :light, **attributes)
  @text = text
  @position = position
  @theme = theme
  @attributes = attributes
  @attributes[:class] = [
    "relative inline-block",
    @attributes[:class],
  ].join(" ")
end

Instance Method Details

#bubble_arrow_pseudo_element ⇒ Object 



86
87
88
89
90
91
92
93
94
95
96
97
 
# File 'app/components/solidus_admin/ui/toggletip/component.rb', line 86

def bubble_arrow_pseudo_element
  (
    [
      "before:content['']",
      "before:absolute",
      "before:w-[0.375rem]",
      "before:h-[0.375rem]",
      "before:rotate-45",
      "before:bg-inherit",
    ] + POSITIONS.fetch(@position)[:arrow]
  ).join(" ")
end

#bubble_position_classes ⇒ Object 



82
83
84
 
# File 'app/components/solidus_admin/ui/toggletip/component.rb', line 82

def bubble_position_classes
  POSITIONS.fetch(@position)[:bubble].join(" ")
end

#bubble_theme_classes ⇒ Object 



78
79
80
 
# File 'app/components/solidus_admin/ui/toggletip/component.rb', line 78

def bubble_theme_classes
  THEMES.fetch(@theme)[:bubble].join(" ")
end

#icon_theme_classes ⇒ Object 



74
75
76
 
# File 'app/components/solidus_admin/ui/toggletip/component.rb', line 74

def icon_theme_classes
  THEMES.fetch(@theme)[:icon].join(" ")
end