loco_motion-rails 0.0.8 → 0.5.0

data/app/components/daisy/actions/theme_controller_component.rb

@@ -1,31 +1,26 @@
 #
-# The Theme Controller component provides a simple interface for switching
-# between different DaisyUI themes. It renders a set of radio buttons that
-# allow users to select from a predefined list of themes.
-#
-# The component is designed to work with DaisyUI's theme system and
-# automatically updates the `data-theme` attribute on the HTML element when
-# a theme is selected.
+# The ThemeComponent serves as a foundation for building a full Theme Switcher.
+# It provides the building blocks that you will use such as the Theme Preview,
+# Theme Radio, and Stimulus ThemeController.
 #
 # @loco_example Basic Usage
-#   = daisy_theme_controller
-#
-# @loco_example Custom Theme List
-#   = daisy_theme_controller(themes: ["light", "dark", "cyberpunk"])
-#
-# @loco_example With Custom Styling
-#   = daisy_theme_controller(css: "gap-6 p-4 bg-base-200 rounded-lg")
+#   = daisy_theme_controller do |tc|
+#     - tc.themes.each do |theme|
+#       = tc.build_theme_preview(theme)
+#       = tc.build_radio_input(theme)
 #
 class Daisy::Actions::ThemeControllerComponent < LocoMotion::BaseComponent
   # Default list of themes to display in the controller
   SOME_THEMES = ["light", "dark", "synthwave", "retro", "cyberpunk", "wireframe"].freeze
 
+  attr_reader :themes
+
   #
   # Creates a new instance of the ThemeControllerComponent.
   #
   # @param kws [Hash] The keyword arguments for the component.
   #
-  # @option kws themes [Array<String>] List of DaisyUI theme names to include
+  # @option kws [Array<String>] :themes List of DaisyUI theme names to include
   #   in the controller. Defaults to {SOME_THEMES}.
   #
   def initialize(**kws, &block)
@@ -35,9 +30,55 @@ class Daisy::Actions::ThemeControllerComponent < LocoMotion::BaseComponent
   end
 
   #
-  # Sets up the component's CSS classes for proper layout and spacing.
+  # Sets up the component with theme Stimulus controller.
   #
   def before_render
-    add_css(:component, "flex flex-col lg:flex-row gap-4 items-center")
+    add_stimulus_controller(:component, "loco-theme")
+  end
+
+  #
+  # Renders the component and its content.
+  #
+  def call
+    part(:component) { content }
+  end
+
+  #
+  # Builder method to create a radio input for use in selecting themes.
+  #
+  # @param theme [String] The name of the theme that the input controls.
+  # @param options [Hash] Additional options to pass to the component.
+  #
+  # @return [Daisy::DataInput::RadioButtonComponent] A new radio button
+  #   component instance.
+  #
+  def build_radio_input(theme, **options)
+    options[:css] = (options[:css] || "").concat(" theme-controller")
+    default_options = { name: "theme", id: "theme-#{theme}", value: theme }
+
+    render Daisy::DataInput::RadioButtonComponent.new(**default_options.deep_merge(options))
+  end
+
+  #
+  # Builder method to create a theme preview showing the theme's colors in a 2x2
+  # grid.
+  #
+  # @param theme [String] The theme name to preview.
+  #
+  # @option options [Integer] :size Size of the preview in Tailwind size units.
+  #   Defaults to 4 (1rem).
+  #
+  # @option options [Boolean] :shadow Whether to add a shadow. Defaults to true.
+  #
+  # @option options [String] :css Additional CSS classes.
+  #
+  # @return [Daisy::Actions::ThemePreviewComponent] A new theme preview
+  #   component instance.
+  #
+  def build_theme_preview(theme, **options)
+    render Daisy::Actions::ThemePreviewComponent.new(
+      theme: theme,
+      **options
+    )
   end
 end

data/app/components/daisy/actions/theme_preview_component.html.haml

@@ -0,0 +1,5 @@
+= part(:component) do
+  = part(:dot_base)
+  = part(:dot_primary)
+  = part(:dot_secondary)
+  = part(:dot_accent)

data/app/components/daisy/actions/theme_preview_component.rb

@@ -0,0 +1,68 @@
+#
+# The Theme Preview component displays a small preview of a DaisyUI theme's
+# colors.  It helps users visualize the theme by showing a 2x2 grid of colored
+# dots representing the base-content, primary, secondary, and accent colors of
+# the theme.
+#
+# @part dot_base The dot showing the base-content color of the theme.
+# @part dot_primary The dot showing the primary color of the theme.
+# @part dot_secondary The dot showing the secondary color of the theme.
+# @part dot_accent The dot showing the accent color of the theme.
+#
+# @loco_example Basic Usage
+#   = daisy_theme_preview(theme: "light")
+#
+# @loco_example Custom CSS
+#   = daisy_theme_preview(theme: "dark", css: "size-6")
+#
+class Daisy::Actions::ThemePreviewComponent < LocoMotion::BaseComponent
+  define_parts :dot_base, :dot_primary, :dot_secondary, :dot_accent
+
+  #
+  # Creates a new instance of the ThemePreviewComponent.
+  #
+  # @param theme [String] The theme name to preview, can be provided as a
+  #   positional or keyword argument.
+  #
+  # @option kws [String] :theme The theme name to preview (if not provided as
+  #   positional argument).
+  #
+  # @option kws [String] :css Additional CSS classes to apply to the component.
+  #
+  def initialize(theme = nil, **kws, &block)
+    super
+
+    @theme = config_option(:theme, theme)
+  end
+
+  #
+  # Sets up the component's CSS classes and other attributes before rendering.
+  #
+  def before_render
+    setup_component
+    setup_dots
+  end
+
+  #
+  # Sets up the component's CSS classes and data attributes.
+  #
+  def setup_component
+    classes = [
+      "where:size-4 where:grid where:grid-cols-2 where:place-items-center",
+      "where:shrink-0 where:rounded-md where:bg-base-100 where:shadow-sm"
+    ].join(" ")
+
+    add_css(:component, classes)
+    add_html(:component, { "data-theme": @theme })
+  end
+
+  #
+  # Sets up the CSS classes for the theme color dots.
+  #
+  def setup_dots
+    add_css(:dot_base, "where:bg-base-content where:size-1 where:rounded-full")
+    add_css(:dot_primary, "where:bg-primary where:size-1 where:rounded-full")
+    add_css(:dot_secondary, "where:bg-secondary where:size-1 where:rounded-full")
+    add_css(:dot_accent, "where:bg-accent where:size-1 where:rounded-full")
+  end
+end

data/app/components/daisy/data_display/accordion_component.html.haml

@@ -1,4 +1,3 @@
 = part(:component) do
   - sections.each do |section|
-    - section.set_loco_parent(component_ref)
     = section

data/app/components/daisy/data_display/accordion_component.rb

@@ -35,12 +35,12 @@
 #     - accordion.with_section do |section|
 #       - section.with_title do
 #         .flex.items-center.gap-2
-#           = heroicon_tag "star"
+#           = heroicon "star"
 #           Featured Section
 #       This is the content of the featured section
 #
 class Daisy::DataDisplay::AccordionComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   # Renders a single section of the accordion.
   #
@@ -93,7 +93,7 @@ class Daisy::DataDisplay::AccordionComponent < LocoMotion::BaseComponent
 
     def setup_component
       # Reset the name to the config option or the parent name if available
-      @name = config_option(:name, loco_parent&.name)
+      @name = config_option(:name, loco_parent.name)
 
       add_css(:component, "collapse")
       add_css(:component, "collapse-arrow") if loco_parent.config.modifiers.include?(:arrow)
@@ -151,9 +151,16 @@ class Daisy::DataDisplay::AccordionComponent < LocoMotion::BaseComponent
   #   Use `:arrow` to show arrow indicators, or `:plus` to show plus/minus
   #   indicators.
   #
+  # @option kws tip [String] The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(**kws, &block)
     super
 
     @name = config_option(:name, "accordion-#{SecureRandom.uuid}")
   end
+
+  def before_render
+    super
+  end
 end

data/app/components/daisy/data_display/avatar_component.html.haml

@@ -3,7 +3,7 @@
     - if @src.present?
       = part(:img)
     - elsif @icon.present?
-      = heroicon_tag(@icon, **rendered_html(:icon))
+      = render_icon
     - else
       = part(:placeholder) do
         = content

data/app/components/daisy/data_display/avatar_component.rb

@@ -28,17 +28,19 @@
 #     JD
 #
 # @loco_example With Custom Size
-#   = daisy_avatar(src: "avatar.jpg", css: "w-16 h-16")
+#   = daisy_avatar(src: "avatar.jpg", css: "size-16")
 #
 # @loco_example With Tooltip
 #   = daisy_avatar(src: "avatar.jpg", tip: "John Doe")
 #
 class Daisy::DataDisplay::AvatarComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::IconableComponent
+  include LocoMotion::Concerns::LinkableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   set_component_name :avatar
 
-  define_parts :wrapper, :img, :icon, :placeholder
+  define_parts :wrapper, :img, :placeholder
 
   # Create a new avatar component.
   #
@@ -51,15 +53,20 @@ class Daisy::DataDisplay::AvatarComponent < LocoMotion::BaseComponent
   #   provided. If neither src nor icon is provided, placeholder content from
   #   the block will be shown.
   #
+  # @option kws tip [String] The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(**kws, &block)
     super
 
     @src = config_option(:src)
-    @icon = config_option(:icon)
   end
 
   def before_render
+    # Run component setup *before* super to allow BaseComponent hooks to run last
     setup_component
+
+    super
   end
 
   private
@@ -69,14 +76,17 @@ class Daisy::DataDisplay::AvatarComponent < LocoMotion::BaseComponent
 
     # The where pseudo class reduces the specificity of the CSS selector to 0 so
     # that other Tailwind classes provided by the user will take presedence.
-    add_css(:wrapper, "[:where(&)]:w-24 [:where(&)]:rounded-full")
+    add_css(:wrapper, "where:w-24 where:rounded-full")
 
     if @src.present?
       set_tag_name(:img, :img)
       add_html(:img, { src: @src, title: @content })
     else
-      add_css(:component, "placeholder")
-      add_css(:wrapper, "[:where(&)]:bg-neutral [:where(&)]:text-neutral-content")
+      add_css(:component, "avatar-placeholder")
+      add_css(:wrapper, "where:bg-neutral where:text-neutral-content")
     end
+
+    # Concern setup is handled by BaseComponent hook via super in before_render
+    # setup_tippable_component
   end
 end

data/app/components/daisy/data_display/badge_component.rb

@@ -18,15 +18,93 @@
 # @loco_example With Tooltip
 #   = daisy_badge("Beta", tip: "This feature is in beta testing")
 #
+# @loco_example With Icons
+#   = daisy_badge(title: "New", left_icon: "sparkles")
+#   = daisy_badge(title: "Download", right_icon: "arrow-down")
+#   = daisy_badge(title: "Star", left_icon: "star", right_icon: "plus")
+#
+# @loco_example With Links
+#   = daisy_badge(title: "Documentation", href: "#", css: "badge-primary")
+#   = daisy_badge(title: "External", href: "#", target: "_blank", css: "badge-secondary")
+#   = daisy_badge(title: "GitHub", href: "#", left_icon: "code-bracket")
+#
 # @loco_example Using a Block
 #   = daisy_badge do
 #     %span.flex.items-center.gap-1
-#       = heroicon_tag "star", css: "size-4"
+#       = heroicon "star", css: "size-4"
 #       Featured
 #
+# @loco_example Default Badge
+#   = daisy_badge { "Default Badge" }
+#
+# @loco_example Primary Badge
+#   = daisy_badge(css: "badge-primary") { "Primary Badge" }
+#
+# @loco_example Secondary Badge
+#   = daisy_badge(css: "badge-secondary") { "Secondary Badge" }
+#
+# @loco_example Accent Badge
+#   = daisy_badge(css: "badge-accent") { "Accent Badge" }
+#
+# @loco_example Ghost Badge
+#   = daisy_badge(css: "badge-ghost") { "Ghost Badge" }
+#
+# @loco_example Info Badge
+#   = daisy_badge(css: "badge-info") { "Info Badge" }
+#
+# @loco_example Success Badge
+#   = daisy_badge(css: "badge-success") { "Success Badge" }
+#
+# @loco_example Warning Badge
+#   = daisy_badge(css: "badge-warning") { "Warning Badge" }
+#
+# @loco_example Error Badge
+#   = daisy_badge(css: "badge-error") { "Error Badge" }
+#
+# @loco_example Outline Primary Badge
+#   = daisy_badge(css: "badge-primary badge-outline") { "Outline Primary" }
+#
+# @loco_example Outline Success Badge
+#   = daisy_badge(css: "badge-success badge-outline") { "Outline Success" }
+#
+# @loco_example Outline Warning Badge
+#   = daisy_badge(css: "badge-warning badge-outline") { "Outline Warning" }
+#
+# @loco_example Outline Error Badge
+#   = daisy_badge(css: "badge-error badge-outline") { "Outline Error" }
+#
+# @loco_example Soft Primary Badge
+#   = daisy_badge(css: "badge-primary badge-soft") { "Soft Primary" }
+#
+# @loco_example Soft Success Badge
+#   = daisy_badge(css: "badge-success badge-soft") { "Soft Success" }
+#
+# @loco_example Soft Warning Badge
+#   = daisy_badge(css: "badge-warning badge-soft") { "Soft Warning" }
+#
+# @loco_example Soft Error Badge
+#   = daisy_badge(css: "badge-error badge-soft") { "Soft Error" }
+#
+# @loco_example Dash Primary Badge
+#   = daisy_badge(css: "badge-primary badge-dash") { "Dash Primary" }
+#
+# @loco_example Dash Success Badge
+#   = daisy_badge(css: "badge-success badge-dash") { "Dash Success" }
+#
+# @loco_example Dash Warning Badge
+#   = daisy_badge(css: "badge-warning badge-dash") { "Dash Warning" }
+#
+# @loco_example Dash Error Badge
+#   = daisy_badge(css: "badge-error badge-dash") { "Dash Error" }
+#
+# @loco_example Badge with Icon
+#   = daisy_badge(icon: "check") { "Icon Badge" }
+#
 # @!parse class Daisy::DataDisplay::BadgeComponent < LocoMotion::BaseComponent; end
 class Daisy::DataDisplay::BadgeComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::IconableComponent
+  include LocoMotion::Concerns::LinkableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   set_component_name :badge
 
@@ -41,14 +119,50 @@ class Daisy::DataDisplay::BadgeComponent < LocoMotion::BaseComponent
   # @option kwargs title [String] The text to display in the badge. You can also
   #   pass the title as the first argument or provide content via a block.
   #
+  # @option kwargs href [String] A path or URL to which the user will be
+  #   directed when the badge is clicked. Forces the Badge to use an `<a>` tag.
+  #
+  # @option kwargs target [String] The HTML `target` of for the `<a>` tag
+  #   (`_blank`, `_parent`, or a specific tab / window / iframe, etc).
+  #
+  # @option kwargs icon [String] The name of Hero icon to render inside the
+  #   badge. This is an alias of `left_icon`.
+  #
+  # @option kwargs icon_css [String] The CSS classes to apply to the icon.
+  #   This is an alias of `left_icon_css`.
+  #
+  # @option kwargs icon_html [Hash] Additional HTML attributes to apply to the
+  #   icon. This is an alias of `left_icon_html`.
+  #
+  # @option kwargs left_icon [String] The name of Hero icon to render inside
+  #   the badge to the left of the text.
+  #
+  # @option kwargs left_icon_css [String] The CSS classes to apply to the left
+  #   icon.
+  #
+  # @option kwargs left_icon_html [Hash] Additional HTML attributes to apply to
+  #   the left icon.
+  #
+  # @option kwargs right_icon [String] The name of Hero icon to render inside
+  #   the badge to the right of the text.
+  #
+  # @option kwargs right_icon_css [String] The CSS classes to apply to the
+  #   right icon.
+  #
+  # @option kwargs right_icon_html [Hash] Additional HTML attributes to apply
+  #   to the right icon.
+  #
   def initialize(title = nil, **kws, &block)
     super
 
-    @title = config_option(:title, title)
+    @simple_title = config_option(:title, title)
   end
 
   def before_render
+    # Run component setup *before* super to allow LinkableComponent to override tag
     setup_component
+
+    super
   end
 
   #
@@ -59,7 +173,11 @@ class Daisy::DataDisplay::BadgeComponent < LocoMotion::BaseComponent
   # additional whitespace gets added to the output.
   #
   def call
-    part(:component) { content || @title }
+    part(:component) do
+      concat(render_left_icon)
+      concat(content || @simple_title)
+      concat(render_right_icon)
+    end
   end
 
   private

data/app/components/daisy/data_display/card_component.html.haml

@@ -1,7 +1,7 @@
 = part(:component) do
   = top_figure if top_figure?
 
-  .card-body
+  = part(:body) do
     = title if title?
     = content
     = actions if actions?

data/app/components/daisy/data_display/card_component.rb

@@ -39,7 +39,7 @@
 #     - card.with_top_figure(src: "header.jpg")
 #     - card.with_title do
 #       .flex.items-center.gap-2
-#         = heroicon_tag "star"
+#         = heroicon "star"
 #         Featured Article
 #     %p{ class: "text-base-content/70" } A beautifully designed card with rich content.
 #     - card.with_bottom_figure(src: "footer.jpg")
@@ -51,13 +51,16 @@
 #           = daisy_button(icon: "share", tip: "Share")
 #
 class Daisy::DataDisplay::CardComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::LinkableComponent
 
   renders_one :title, LocoMotion::BasicComponent.build(tag_name: :h2, css: "card-title")
   renders_one :top_figure, Daisy::DataDisplay::FigureComponent.build(css: "card-image")
   renders_one :bottom_figure, Daisy::DataDisplay::FigureComponent.build(css: "card-image")
   renders_one :actions, LocoMotion::BasicComponent.build(css: "card-actions")
 
+  define_part :body
+
   # @return [String] The title text when using the simple title option.
   attr_reader :simple_title
 
@@ -71,19 +74,30 @@ class Daisy::DataDisplay::CardComponent < LocoMotion::BaseComponent
   # @option kws css [String] Additional CSS classes for styling. Common
   #   options include:
   #   - Image Side: `image-full` (image becomes background)
-  #   - Borders: `bordered`
-  #   - Compact: `compact` (less padding)
+  #   - Borders: `card-border`
+  #   - Sizes: `card-sm` (less padding)
   #   - Colors: `bg-base-100`, `bg-primary`, `bg-secondary`
   #
+  # @option kws tip [String] The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(**kws, &block)
     super
 
     @simple_title = kws[:title]
-
-    add_css(:component, "card")
   end
 
   def before_render
+    setup_component
+    super # Runs TippableComponent's setup hook
+
     with_title { simple_title } if simple_title && !title?
   end
+
+  private
+
+  def setup_component
+    add_css(:component, "card")
+    add_css(:body, "card-body")
+  end
 end

data/app/components/daisy/data_display/chat_component.rb

@@ -47,8 +47,8 @@
 #
 class Daisy::DataDisplay::ChatComponent < LocoMotion::BaseComponent
   renders_one :avatar, Daisy::DataDisplay::AvatarComponent.build(css: "chat-image", icon_css: "size-6 text-base-100", wrapper_css: "w-10 rounded-full")
-  renders_one :header, LocoMotion::BasicComponent.build(css: "chat-header [:where(&)]:text-neutral-500")
-  renders_one :footer, LocoMotion::BasicComponent.build(css: "chat-footer [:where(&)]:text-neutral-500")
+  renders_one :header, LocoMotion::BasicComponent.build(css: "chat-header where:text-neutral-500")
+  renders_one :footer, LocoMotion::BasicComponent.build(css: "chat-footer where:text-neutral-500")
 
   renders_many :bubbles, LocoMotion::BasicComponent.build(css: "chat-bubble")
 

data/app/components/daisy/data_display/collapse_component.rb

@@ -20,7 +20,7 @@
 #   = daisy_collapse do |collapse|
 #     - collapse.with_title do
 #       .flex.items-center.gap-2
-#         = heroicon_tag "chevron-down"
+#         = heroicon "chevron-down"
 #         Advanced Settings
 #     %p These are some advanced configuration options.
 #     = daisy_button("Apply Settings")
@@ -40,7 +40,7 @@
 #     This section has a plus/minus indicator.
 #
 class Daisy::DataDisplay::CollapseComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   define_parts :title, :wrapper
 
@@ -64,6 +64,9 @@ class Daisy::DataDisplay::CollapseComponent < LocoMotion::BaseComponent
   # @option kws checkbox [Boolean] Whether to use a checkbox for toggle state
   #   (true) or focus/tabindex mode (false). Defaults to true.
   #
+  # @option kws tip [String] The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(*args, **kws, &block)
     super
 
@@ -72,9 +75,10 @@ class Daisy::DataDisplay::CollapseComponent < LocoMotion::BaseComponent
   end
 
   def before_render
-    setup_component
-    setup_title
-    setup_wrapper
+    setup_component # Set base styles/attributes
+    super           # Run concern setup hooks
+    setup_title     # Set title part styles
+    setup_wrapper   # Set wrapper part styles
   end
 
   def setup_component

data/app/components/daisy/data_display/countdown_component.rb

@@ -26,7 +26,7 @@
 #   = daisy_countdown(3.hours + 30.minutes, separator: " → ")
 #
 class Daisy::DataDisplay::CountdownComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   define_parts :days, :hours, :minutes, :seconds
   define_modifiers :words, :letters
@@ -53,6 +53,9 @@ class Daisy::DataDisplay::CountdownComponent < LocoMotion::BaseComponent
   #
   # @option kws [Hash] :parts_html HTML attributes to apply to all time parts.
   #
+  # @option kws [String] :tip The tooltip text to display when hovering over
+  #   the component.
+  #
   def initialize(*args, **kws, &block)
     super
 
@@ -63,22 +66,29 @@ class Daisy::DataDisplay::CountdownComponent < LocoMotion::BaseComponent
   end
 
   def before_render
-    add_stimulus_controller(:component, "countdown")
+    setup_component # Configure countdown parts and stimulus
+    super           # Run TippableComponent hook
+  end
+
+  private
+
+  def setup_component
+    add_stimulus_controller(:component, "loco-countdown")
 
     add_css(:component, "flex")
-    add_css(:component, "[:where(&)]:gap-x-2") if modifiers.include?(:words)
+    add_css(:component, "where:gap-x-2") if modifiers.include?(:words)
 
     %i(days hours minutes seconds).each do |part|
       default_html = {
         data: {
           # Note: We can't use nested hashes here because the Rails content_tag
           # helper is stupid and won't traverse them.
-          "countdown-target": part
+          "loco-countdown-target": part
         }
       }
 
       add_css(part, "countdown")
-      add_css(part, "[:where(&)]:gap-x-1") if modifiers.include?(:words)
+      add_css(part, "where:gap-x-1") if modifiers.include?(:words)
       add_css(part, @parts_css) if @parts_css
 
       add_html(part, default_html)

data/app/components/daisy/data_display/figure_component.rb

@@ -16,6 +16,8 @@
 #     Content when no image is provided
 #
 class Daisy::DataDisplay::FigureComponent < LocoMotion::BaseComponent
+  include LocoMotion::Concerns::LinkableComponent
+
   define_part :image, tag_name: :img
 
   # Creates a new figure component.
@@ -35,15 +37,18 @@ class Daisy::DataDisplay::FigureComponent < LocoMotion::BaseComponent
   def before_render
     set_tag_name(:component, :figure)
     add_html(:image, src: @src) if @src
+
+    super
   end
 
   def call
     part(:component) do
       if @src
-        part(:image)
-      else
-        content
+        concat(part(:image))
       end
+
+      # Always show the content
+      concat(content)
     end
   end
 end