panda-core 0.1.16 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fc34797acb112eaf3a36808d79575e2f070db2d7f16a084e99d4bda39807595a
-  data.tar.gz: 231c75cefbff1c0cdf22585bdf63d60b868bf8bd3a2ecca056507616b6d90b7f
+  metadata.gz: ae9cc770f537f0190416f1dece9c54ff839015625d0145a1bd97b77cb667455a
+  data.tar.gz: e4f6286a4f7c6a20aa5c71ae5528f7203bcaf30ceddda2ea9c774bee6ffec66c
 SHA512:
-  metadata.gz: 72bfa970356456551ec696c305b7f4b856b6998c1f0e9fb8c2146b1aefd4c75f2c95ead4dd6e86d1e9a5ebb2ced6b87a75a291cc87c285cd4bd4170c631c5db3
-  data.tar.gz: 83fda836d081fedd12dbe3614f6cbd1f3ff4f5c41682369e0c4c3372263472bc69f27c7384b33cdab2c1a1820d16e4f3be21013bf61b54cc9d857eec4f5a7415
+  metadata.gz: fa96a0fbfa58aaba72b3006455558736337f5cdfc504abf38af03db0e5697b599059a5a5501bc58d8b64cbac826f01122eea56f6a3e221de09d2eebfd57c478d
+  data.tar.gz: b9b96c780035db586a4fc566512e67de2922a29cb551c28fd3d3af72c72dc2b8853ca8a55364aa2fb62d8cf34cd19976a4b7afb6ab611c276a6ee799c4a3c182

data/README.md

@@ -2,7 +2,8 @@
 
 Core functionality shared between Panda Software gems:
 
-- Panda CMS (https://github.com/tastybamboo/panda_cms)
+- [Panda CMS](https://github.com/tastybamboo/panda-cms)
+- [Panda Editor](https://github.com/tastybamboo/panda-editor)
 
 ## Installation
 
@@ -117,22 +118,14 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/tastyb
 
 ## Releasing
 
-For e.g. v0.1.8, run the following commands:
+Panda Core uses automated releases via GitHub Actions. When changes to `lib/panda/core/version.rb` are merged to the `main` branch:
 
-```bash
-RELEASE_VERSION=0.1.8
-git checkout -b release/v$RELEASE_VERSION
-gem bump --no-commit --version $RELEASE_VERSION
-bundle update
-git commit -am "Release $RELEASE_VERSION"
-git tag -a $RELEASE_VERSION -m "Release $RELEASE_VERSION"
-git push origin release/v$RELEASE_VERSION
-gem release panda-core -v $RELEASE_VERSION
-git checkout main && git merge release/v$RELEASE_VERSION
-git push origin main
-git push origin :release/v$RELEASE_VERSION
-```
+1. The CI workflow runs tests
+2. If tests pass, the auto-release workflow triggers
+3. A git tag is created automatically (e.g., `v0.2.1`)
+4. The gem is built and published to RubyGems
+5. A GitHub release is created with changelog
 
 ## License
 
-The gem is available as open source under the terms of the [BSD 3-Clause License](https://opensource.org/licenses/BSD-3-Clause).
+Copyright 2024-2025 Otaina Limited. The gem is available as open source under the terms of the [BSD 3-Clause License](https://opensource.org/licenses/BSD-3-Clause).

data/Rakefile

@@ -5,3 +5,6 @@ load "rails/tasks/engine.rake"
 load "rails/tasks/statistics.rake"
 
 require "bundler/gem_tasks"
+
+# Load Panda Core rake tasks
+Dir[File.expand_path("lib/tasks/*.rake", __dir__)].each { |f| load f }

data/app/builders/panda/core/form_builder.rb

@@ -0,0 +1,225 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    class FormBuilder < ActionView::Helpers::FormBuilder
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::FormTagHelper
+
+      def label(attribute, text = nil, options = {})
+        super(attribute, text, options.reverse_merge(class: label_styles))
+      end
+
+      def text_field(attribute, options = {})
+        if options.dig(:data, :prefix)
+          content_tag :div, class: container_styles do
+            label(attribute) + meta_text(options) +
+              content_tag(:div, class: "flex flex-grow") do
+                content_tag(:span,
+                  class: "inline-flex items-center px-3 text-base border border-r-none rounded-s-md whitespace-nowrap break-keep") do
+                  options.dig(:data, :prefix)
+                end +
+                  super(attribute, options.reverse_merge(class: "#{input_styles_prefix} input-prefix rounded-l-none border-l-none"))
+              end + error_message(attribute)
+          end
+        else
+          content_tag :div, class: container_styles do
+            label(attribute) + meta_text(options) + super(attribute, options.reverse_merge(class: input_styles)) + error_message(attribute)
+          end
+        end
+      end
+
+      def email_field(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
+      def datetime_field(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
+      def text_area(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
+      def password_field(attribute, options = {})
+        content_tag :div, class: container_styles do
+          label(attribute) + meta_text(options) + super(attribute, options.reverse_merge(class: input_styles)) + error_message(attribute)
+        end
+      end
+
+      def select(method, choices = nil, options = {}, html_options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, choices, options, html_options.reverse_merge(class: select_styles)) + select_svg + error_message(method)
+        end
+      end
+
+      def collection_select(method, collection, value_method, text_method, options = {}, html_options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, collection, value_method, text_method, options, html_options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
+      def time_zone_select(method, priority_zones = nil, options = {}, html_options = {})
+        wrap_field(method, options) do
+          super(
+            method,
+            priority_zones,
+            options,
+            html_options.reverse_merge(class: select_styles)
+          )
+        end
+      end
+
+      def file_field(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: "file:rounded file:border-0 file:text-sm file:bg-white file:text-gray-500 hover:file:bg-gray-50 bg-white px-2.5 hover:bg-gray-50".concat(input_styles)))
+        end
+      end
+
+      def button(value = nil, options = {}, &block)
+        value ||= submit_default_value
+        options = options.dup
+
+        # Handle formmethod specially
+        if options[:formmethod] == "delete"
+          options[:name] = "_method"
+          options[:value] = "delete"
+        end
+
+        base_classes = [
+          "inline-flex items-center rounded-md",
+          "px-3 py-2",
+          "text-base font-semibold",
+          "shadow-sm"
+        ]
+
+        # Only add fa-circle-check for non-block buttons
+        base_classes << "fa-circle-check" unless block_given?
+
+        options[:class] = [
+          *base_classes,
+          options[:class]
+        ].compact.join(" ")
+
+        if block_given?
+          @template.button_tag(options, &block)
+        else
+          @template.button_tag(value, options)
+        end
+      end
+
+      def submit(value = nil, options = {})
+        value ||= submit_default_value
+
+        # Use the same style logic as ButtonComponent
+        action = object.persisted? ? :save : :create
+        button_classes = case action
+        when :save, :create
+          "text-white bg-green-600 hover:bg-green-700"
+        when :save_inactive
+          "text-white bg-gray-400"
+        when :secondary
+          "text-gray-700 border-2 border-gray-500 bg-transparent hover:bg-gray-100 transition-all"
+        else
+          "text-gray-700 border-2 border-gray-500 bg-transparent hover:bg-gray-100 transition-all"
+        end
+
+        # Combine with common button classes
+        classes = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 #{button_classes}"
+
+        options[:class] = options[:class] ? "#{options[:class]} #{classes}" : classes
+
+        super
+      end
+
+      def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: "border-gray-300 ml-2"), checked_value, unchecked_value)
+        end
+      end
+
+      def date_field(method, options = {})
+        content_tag :div, class: container_styles do
+          label(method) + meta_text(options) + super(method, options.reverse_merge(class: input_styles))
+        end
+      end
+
+      def meta_text(options)
+        return unless options[:meta]
+
+        @template.content_tag(:p, options[:meta], class: "block text-black/60 text-sm mb-2")
+      end
+
+      private
+
+      def label_styles
+        "font-light inline-block mb-1 text-base leading-6"
+      end
+
+      def base_input_styles
+        "bg-white block w-full rounded-md border border-gray-500 focus:border-gray-700 p-2 text-gray-900 outline-0 focus:outline-0 ring-0 focus:ring-0 focus:ring-gray-700 ring-offset-0 focus:ring-offset-0 shadow-none focus:shadow-none"
+      end
+
+      def input_styles
+        base_input_styles
+      end
+
+      def input_styles_prefix
+        input_styles.concat(" prefix")
+      end
+
+      def select_styles
+        "col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-gray-900 text-base outline-0 outline-gray-700 focus:outline focus:-outline-offset-2 focus:outline-gray-700"
+      end
+
+      def select_svg
+        @template.content_tag(:svg,
+          class: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400", aria_hidden: true) do
+          @template.content_tag(:path, d: "M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z")
+        end
+      end
+
+      def button_styles
+        "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-0 focus-visible:outline-offset-none text-gray-700 border-2 border-gray-500 bg-transparent hover:bg-gray-100 transition-all gap-x-1.5 px-3 py-2 text-base gap-x-1.5 px-2.5 py-1.5 mt-2 "
+      end
+
+      def container_styles
+        "panda-core-field-container mb-4"
+      end
+
+      def textarea_styles
+        input_styles.concat(" min-h-32")
+      end
+
+      def submit_default_value
+        object.persisted? ? "Update #{object.class.name.demodulize}" : "Create #{object.class.name.demodulize}"
+      end
+
+      def wrap_field(method, options = {}, &block)
+        @template.content_tag(:div, class: "panda-core-field-container") do
+          label(method, class: "font-light inline-block mb-1 text-base leading-6") +
+            meta_text(options) +
+            @template.content_tag(:div, class: field_wrapper_styles, &block)
+        end
+      end
+
+      def field_wrapper_styles
+        "mt-1"
+      end
+
+      def error_message(attribute)
+        return unless object.respond_to?(:errors) && object.errors[attribute]&.any?
+
+        content_tag(:p, class: "mt-2 text-sm text-red-600") do
+          object.errors[attribute].join(", ")
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/button_component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class ButtonComponent < ViewComponent::Base
+        attr_accessor :text, :action, :link, :icon, :size, :data
+
+        def initialize(text: "Button", action: nil, data: {}, link: "#", icon: nil, size: :regular, id: nil)
+          @text = text
+          @action = action
+          @data = data
+          @link = link
+          @icon = icon
+          @size = size
+          @id = id
+        end
+
+        def call
+          @icon = set_icon_from_action(@action) if @action && @icon.nil?
+          icon = content_tag(:i, "", class: "mr-2 fa-regular fa-#{@icon}") if @icon
+          @text = "#{icon} #{@text.titleize}".html_safe
+
+          classes = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 "
+
+          case @size
+          when :small, :sm
+            classes += "gap-x-1.5 px-2.5 py-1.5 text-sm "
+          when :medium, :regular, :md
+            classes += "gap-x-1.5 px-3 py-2 text-base "
+          when :large, :lg
+            classes += "gap-x-2 px-3.5 py-2.5 text-lg "
+          end
+
+          classes += case @action
+          when :save, :create
+            "text-white bg-green-600 hover:bg-green-700"
+          when :save_inactive
+            "text-white bg-gray-400"
+          when :secondary
+            "text-gray-700 border-2 border-gray-700 bg-transparent hover:bg-gray-100 transition-all "
+          when :delete, :destroy, :danger
+            "text-red-600 border border-red-600 bg-red-100 hover:bg-red-200 hover:text-red-700 focus-visible:outline-red-300 "
+          else
+            "text-gray-700 border-2 border-gray-700 bg-transparent hover:bg-gray-100 transition-all "
+          end
+
+          content_tag :a, href: @link, class: classes, data: @data, id: @id do
+            @text
+          end
+        end
+
+        private
+
+        def set_icon_from_action(action)
+          case action
+          when :add, :new, :create
+            "plus"
+          when :save
+            "check"
+          when :edit, :update
+            "pencil"
+          when :delete, :destroy
+            "trash"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/container_component.html.erb

@@ -0,0 +1,12 @@
+<main class="overflow-auto flex-1 h-full min-h-full max-h-full">
+  <div class="overflow-auto px-2 pt-4 mx-auto sm:px-6 lg:px-6">
+    <%= heading %>
+    <%= tab_bar %>
+    <section class="flex-auto h-[calc(100vh-10rem)]">
+      <div class="flex-1 mt-4 w-full h-full">
+        <%= content %>
+      </div>
+      <%= slideover %>
+    </section>
+  </div>
+</main>

data/app/components/panda/core/admin/container_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class ContainerComponent < ViewComponent::Base
+        renders_one :heading, "Panda::Core::Admin::HeadingComponent"
+        renders_one :tab_bar, "Panda::Core::Admin::TabBarComponent"
+        renders_one :slideover, "Panda::Core::Admin::SlideoverComponent"
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/flash_message_component.html.erb

@@ -0,0 +1,31 @@
+<div class="fixed top-2 right-2 z-[9999] p-2 space-y-4 w-full max-w-sm sm:items-end"
+     data-controller="alert"
+     <% if @temporary %> data-alert-dismiss-after-value="3000"<% end %>
+     data-transition-enter="ease-in-out duration-500"
+     data-transition-enter-from="translate-x-full opacity-0"
+     data-transition-enter-to="translate-x-0 opacity-100"
+     data-transition-leave="ease-in-out duration-500"
+     data-transition-leave-from="translate-x-0 opacity-100"
+     data-transition-leave-to="translate-x-full opacity-0">
+  <div class="overflow-hidden w-full max-w-sm bg-white rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg">
+    <div class="p-4">
+      <div class="flex items-start">
+        <div class="flex-shrink-0">
+          <i class="fa-regular text-xl <%= icon_css %> <%= text_colour_css %>"></i>
+        </div>
+        <div class="flex-1 pt-0.5 ml-3 w-0">
+          <p class="mb-1 text-sm font-medium flash-message-title <%= text_colour_css %>"><%= kind.to_s.titleize %></p>
+          <p class="mt-1 mb-0 text-sm text-gray-500 flash-message-text"><%= message %></p>
+        </div>
+        <div class="flex flex-shrink-0 ml-4">
+          <button data-action="alert#close" type="button" class="inline-flex text-gray-400 bg-white rounded-md transition duration-150 ease-in-out hover:text-gray-500 focus:ring-2 focus:ring-offset-2 focus:outline-none focus:ring-sky-500">
+            <span class="sr-only">Close</span>
+            <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/panda/core/admin/flash_message_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class FlashMessageComponent < ::ViewComponent::Base
+        attr_reader :kind, :message
+
+        def initialize(message:, kind:, temporary: true)
+          @kind = kind.to_sym
+          @message = message
+          @temporary = temporary
+        end
+
+        def text_colour_css
+          case kind
+          when :success
+            "text-green-600"
+          when :alert, :error
+            "text-red-600"
+          when :warning
+            "text-yellow-600"
+          when :info, :notice
+            "text-blue-600"
+          else
+            "text-gray-600"
+          end
+        end
+
+        def icon_css
+          case kind
+          when :success
+            "fa-circle-check"
+          when :alert
+            "fa-circle-xmark"
+          when :warning
+            "fa-triangle-exclamation"
+          when :info, :notice
+            "fa-circle-info"
+          else
+            "fa-circle-info"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/heading_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class HeadingComponent < ViewComponent::Base
+        renders_many :buttons, Panda::Core::Admin::ButtonComponent
+
+        attr_reader :text, :level, :icon, :additional_styles
+
+        def initialize(text:, level: 2, icon: "", additional_styles: "")
+          @text = text
+          @level = level
+          @icon = icon
+          @additional_styles = additional_styles
+          @additional_styles = @additional_styles.split(" ") if @additional_styles.is_a?(String)
+        end
+
+        def call
+          output = ""
+          output += content_tag(:div, @text, class: "grow")
+
+          if buttons?
+            output += content_tag(:span, class: "actions flex gap-x-2 -mt-1") do
+              safe_join(buttons, "")
+            end
+          end
+
+          output = output.html_safe
+          base_heading_styles = "flex pt-1 text-black mb-5 -mt-1"
+
+          case level
+          when 1
+            content_tag(:h1, output, class: [base_heading_styles, "text-2xl font-medium", @additional_styles])
+          when 2
+            content_tag(:h2, output, class: [base_heading_styles, "text-xl font-medium", @additional_styles])
+          when 3
+            content_tag(:h3, output, class: [base_heading_styles, "text-xl", "font-light", @additional_styles])
+          when :panel
+            content_tag(:h3, output, class: ["text-base font-medium p-4 text-white"])
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/panel_component.html.erb

@@ -0,0 +1,7 @@
+<div class="col-span-3 mt-5 rounded-lg shadow-md bg-gray-500 shadow-inherit/20">
+  <%= heading %>
+
+  <div class="p-4 text-black bg-white rounded-b-lg">
+    <%= content %>
+  </div>
+</div>

data/app/components/panda/core/admin/panel_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class PanelComponent < ViewComponent::Base
+        renders_one :heading, lambda { |text:, icon: "", level: :panel, additional_styles: ""|
+          Panda::Core::Admin::HeadingComponent.new(text: text, icon: icon, level: level, additional_styles: additional_styles)
+        }
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/slideover_component.html.erb

@@ -0,0 +1,9 @@
+<% content_for :sidebar do %>
+  <aside class="hidden overflow-y-auto w-96 h-full bg-white lg:block">
+    <%= content %>
+  </aside>
+<% end %>
+
+<% content_for :sidebar_title do %>
+  <%= title %>
+<% end %>

data/app/components/panda/core/admin/slideover_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class SlideoverComponent < ViewComponent::Base
+        attr_reader :title
+
+        def initialize(title: "Settings")
+          @title = title
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/table_component.html.erb

@@ -0,0 +1,29 @@
+<div class="table overflow-x-auto mb-12 w-full rounded-lg border border-gray-500">
+  <div class="table-header-group">
+    <div class="table-row text-base font-medium text-white bg-gray-500">
+      <% columns.each_with_index do |column, i| %>
+        <div class="table-cell sticky top-0 z-10 p-4 <% if i.zero? %>rounded-tl-md<% elsif i == columns.size - 1 %>rounded-tr-md<% end %>"><%= column.label %></div>
+      <% end %>
+    </div>
+  </div>
+
+  <% if @rows.any? %>
+  <div class="table-row-group">
+    <% @rows.each do |row| %>
+      <div class="table-row relative bg-gray-500/5 hover:bg-gray-500/20" data-post-id="<%= row.id %>">
+        <% @columns.each do |column| %>
+          <div class="table-cell py-5 px-3 h-20 text-sm align-middle whitespace-nowrap border-b border-gray-500/20">
+            <%= view_context.capture(row, &column.cell) %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>
+  <% else %>
+</div>
+<div class="text-center mx-12 block border border-dashed py-12 rounded-lg">
+  <h3 class="py-1 text-xl font-semibold text-gray-900">No <%= @term.pluralize %></h3>
+  <p class="py-1 text-base text-gray-500">Get started by creating a new <%= @term %>.</p>
+</div>
+<% end %>

data/app/components/panda/core/admin/table_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class TableComponent < ViewComponent::Base
+        attr_reader :columns
+
+        def initialize(term:, rows:)
+          @term = term
+          @rows = rows
+          @columns = []
+        end
+
+        def column(label, &)
+          @columns << Column.new(label, &)
+        end
+
+        private
+
+        # Ensures @columns gets populated [https://dev.to/rolandstuder/supercharged-table-component-built-with-viewcomponent-3j6i]
+        def before_render
+          content
+        end
+      end
+
+      class Column
+        attr_reader :label, :cell
+
+        def initialize(label, &block)
+          @label = label
+          @cell = block
+        end
+      end
+
+      class TagColumn < Column
+        attr_reader :label, :cell
+
+        def initialize(label, &block)
+          @label = label
+          @cell = Panda::Core::Admin::TagComponent.new(status: block)
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/tag_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class TagComponent < ViewComponent::Base
+        attr_accessor :status, :text
+
+        def initialize(status: :active, text: nil)
+          @status = status.to_sym
+          @text = text || status.to_s.humanize
+        end
+
+        def call
+          classes = "inline-flex items-center py-1 px-2 text-xs font-medium rounded-md ring-1 ring-inset "
+
+          classes += case @status
+          when :active
+            "text-white ring-black/30 bg-green-600 border-0 "
+          when :draft
+            "text-black ring-black/30 bg-yellow-400 "
+          when :inactive, :hidden
+            "text-black ring-black/30 bg-black/5 bg-white "
+          else
+            "text-black bg-white "
+          end
+
+          content_tag :span, class: classes do
+            @text
+          end
+        end
+      end
+    end
+  end
+end