openproject-primer_view_components 0.6.3

data/app/components/primer/beta/truncate.css.json

@@ -0,0 +1,12 @@
+{
+  "name": "beta/truncate",
+  "selectors": [
+    ".Truncate",
+    ".Truncate>.Truncate-text",
+    ".Truncate>.Truncate-text+.Truncate-text",
+    ".Truncate>.Truncate-text.Truncate-text--primary",
+    ".Truncate>.Truncate-text.Truncate-text--expandable:active",
+    ".Truncate>.Truncate-text.Truncate-text--expandable:focus",
+    ".Truncate>.Truncate-text.Truncate-text--expandable:hover"
+  ]
+}

data/app/components/primer/beta/truncate.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAEA,UACE,mBAAoB,CAEpB,cAAe,CADf,WA0BF,CAvBE,yBAEE,0BAAsB,CAAtB,qBAAsB,CADtB,aAAc,CAEd,eAAgB,CAChB,sBAAuB,CACvB,kBAiBF,CAfE,wCACE,2CACF,CAEA,gDACE,eACF,CAEA,4KAKE,cAAe,CADf,aAAc,CADd,wBAGF","file":"truncate.css","sourcesContent":["/* Truncate */\n\n.Truncate {\n  display: inline-flex;\n  min-width: 0;\n  max-width: 100%;\n\n  & > .Truncate-text {\n    min-width: 1ch;\n    max-width: fit-content;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    & + .Truncate-text {\n      margin-left: var(--control-small-gap);\n    }\n\n    &.Truncate-text--primary {\n      flex-basis: 200%;\n    }\n\n    &.Truncate-text--expandable:hover,\n    &.Truncate-text--expandable:focus,\n    &.Truncate-text--expandable:active {\n      max-width: 100% !important;\n      flex-shrink: 0;\n      cursor: pointer;\n    }\n  }\n}\n"]}

data/app/components/primer/beta/truncate.html.erb

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/primer/beta/truncate.pcss

@@ -0,0 +1,31 @@
+/* Truncate */
+
+.Truncate {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+
+  & > .Truncate-text {
+    min-width: 1ch;
+    max-width: fit-content;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    & + .Truncate-text {
+      margin-left: var(--control-small-gap);
+    }
+
+    &.Truncate-text--primary {
+      flex-basis: 200%;
+    }
+
+    &.Truncate-text--expandable:hover,
+    &.Truncate-text--expandable:focus,
+    &.Truncate-text--expandable:active {
+      max-width: 100% !important;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+  }
+}

data/app/components/primer/beta/truncate.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Truncate` to shorten overflowing text with an ellipsis.
+    class Truncate < Primer::Component
+      status :beta
+
+      # Text slot used for the truncated text.
+      #
+      # @param priority [Boolean] if true, the text will be given priority
+      # @param expandable [Boolean] if true, the text will expand on hover or focus
+      # @param max_width [Integer] if provided, the text will be truncated at a maximum width
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, "TruncateText"
+
+      # @example Default
+      #   <%= render(Primer::Beta::Truncate.new) { "branch-name-that-is-really-long" } %>
+      #
+      # @example Multiple items
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.with_item do %>really-long-repository-owner-name<% end %>
+      #     <% component.with_item(font_weight: :bold) do %>
+      #       <%= render(Primer::BaseComponent.new(tag: :span, font_weight: :normal)) { "/" } %> really-long-repository-name
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Advanced multiple items
+      #   <%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %>
+      #     <% component.with_item(tag: :li) do %>primer<% end %>
+      #     <% component.with_item(tag: :li, priority: true) do %>/ css<% end %>
+      #     <% component.with_item(tag: :li) do %>/ Issues<% end %>
+      #     <% component.with_item(tag: :li) do %>/ #123 —<% end %>
+      #     <% component.with_item(tag: :li, priority: true) do %>
+      #       Visual bug on primer.style found in lists
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Expand on hover or focus
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #   <% end %>
+      #
+      # @example Max widths
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #     <% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #     <% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #
+      # @example Max widths on new lines
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #   <br/>
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #   <br/>
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = system_arguments[:tag] || :span
+        @system_arguments[:classes] = class_names(
+          "Truncate",
+          system_arguments[:classes]
+        )
+      end
+
+      def before_render
+        return unless content.present? && items.empty?
+
+        with_item { content }
+      end
+
+      def render?
+        items?
+      end
+
+      # This component is part of `Primer::Beta::Truncate` and should not be
+      # used as a standalone component.
+      class TruncateText < Primer::Component
+        def initialize(priority: false, expandable: false, max_width: nil, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = system_arguments[:tag] || :span
+          @system_arguments[:classes] = class_names(
+            "Truncate-text",
+            system_arguments[:classes],
+            "Truncate-text--primary": priority,
+            "Truncate-text--expandable": expandable
+          )
+
+          @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "max-width: #{max_width}px;") unless max_width.nil?
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            content
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/blankslate_component.html.erb

@@ -0,0 +1,25 @@
+<%# erblint:counter ButtonComponentMigrationCounter 1 %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if spinner.present? %>
+    <%= spinner %>
+  <% elsif @icon.present? %>
+    <%= primer_octicon @icon, size: @icon_size, classes: "blankslate-icon" %>
+  <% elsif @image_src.present? && @image_alt.present? %>
+    <%= image_tag @image_src.to_s, class: "mb-3", size: "56x56", alt: @image_alt.to_s %>
+  <% end %>
+  <% if @title.present? %>
+    <%= render Primer::BaseComponent.new(tag: @title_tag, mb: 1) do %><%= @title %><% end %>
+  <% end %>
+  <% if @description.present? %>
+    <p><%= @description %></p>
+  <% end %>
+  <%= content %>
+  <% if @button_text.present? && @button_url.present? %>
+    <a class="btn <%= @button_classes %>" href="<%= @button_url %>"><%= @button_text %></a>
+  <% end %>
+  <% if @link_text.present? && @link_url.present? %>
+    <p>
+      <%= link_to @link_url.to_s do %><%= @link_text %><% end %>
+    </p>
+  <% end %>
+<% end %>

data/app/components/primer/blankslate_component.rb

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
+  # @accessibility
+  #   `Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.
+  #   <%= link_to_heading_practices %>
+  class BlankslateComponent < Primer::Component
+    status :deprecated
+
+    # Optional Spinner.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Spinner) %>.
+    renders_one :spinner, lambda { |**system_arguments|
+      system_arguments[:mb] ||= 3
+      Primer::Beta::Spinner.new(**system_arguments)
+    }
+
+    #
+    # @example Basic
+    #   <%= render Primer::BlankslateComponent.new(
+    #     title: "Title",
+    #     description: "Description",
+    #   ) %>
+    #
+    # @example Icon
+    #   @description
+    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :globe,
+    #       title: "Title",
+    #       description: "Description",
+    #     ) %>
+    #
+    # @example Loading
+    #   @description
+    #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #       description: "Description",
+    #     ) do |component| %>
+    #       <% component.with_spinner(size: :large) %>
+    #     <% end %>
+    #
+    # @example Custom content
+    #   @description
+    #     Pass custom content as a block in place of `description`.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #     ) do %>
+    #       <em>Your custom content here</em>
+    #     <% end %>
+    #
+    # @example Action button
+    #   @description
+    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #
+    #       button_text: "Create the first page",
+    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
+    #     ) %>
+    #
+    # @example Link
+    #   @description
+    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       link_text: "Learn more about wikis",
+    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+    #     ) %>
+    #
+    # @example Variations
+    #   @description
+    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       narrow: true,
+    #       large: true,
+    #       spacious: true,
+    #     ) %>
+    #
+    # @param title [String] Text that appears in a larger bold font.
+    # @param title_tag [Symbol] HTML tag to use for title.
+    # @param icon [Symbol] Octicon icon to use at top of component.
+    # @param icon_size [Symbol] <%= one_of(Primer::Beta::Octicon::SIZE_MAPPINGS, sort: false) %>
+    # @param image_src [String] Image to display.
+    # @param image_alt [String] Alt text for image.
+    # @param description [String] Text that appears below the title. Typically a whole sentence.
+    # @param button_text [String] The text of the button.
+    # @param button_url [String] The URL where the user will be taken after clicking the button.
+    # @param button_classes [String] Classes to apply to action button
+    # @param link_text [String] The text of the link.
+    # @param link_url [String] The URL where the user will be taken after clicking the link.
+    # @param narrow [Boolean] Adds a maximum width.
+    # @param large [Boolean] Increases the font size.
+    # @param spacious [Boolean] Adds extra padding.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      title: "",
+      title_tag: :h3,
+      icon: "",
+      icon_size: :medium,
+      image_src: "",
+      image_alt: " ",
+      description: "",
+      button_text: "",
+      button_url: "",
+      button_classes: "btn-primary my-3",
+      link_text: "",
+      link_url: "",
+
+      # variations
+      narrow: false,
+      large: false,
+      spacious: false,
+
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "blankslate",
+        "blankslate-narrow": narrow,
+        "blankslate-large": large,
+        "blankslate-spacious": spacious
+      )
+
+      @title_tag = title_tag
+      @icon = icon
+      @icon_size = icon_size
+      @image_src = image_src
+      @image_alt = image_alt
+      @title = title
+      @description = description
+      @button_text = button_text
+      @button_url = button_url
+      @button_classes = button_classes
+      @link_text = link_text
+      @link_url = link_url
+    end
+  end
+end

data/app/components/primer/box.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  # `Box` is a basic wrapper component for most layout related needs.
+  class Box < Primer::Component
+    status :stable
+
+    # @example Default
+    #   <%= render(Primer::Box.new) { "Your content here" } %>
+    #
+    # @example Color and padding
+    #   <%= render(Primer::Box.new(bg: :subtle, p: 3)) { "Hello world" } %>
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = deny_tag_argument(**system_arguments)
+
+      @system_arguments[:tag] = :div
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/button_component.html.erb

@@ -0,0 +1,12 @@
+<% if tooltip.present? %>
+  <%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+    <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+      <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+    <% end -%>
+    <%= tooltip %>
+  <% end -%>
+<% else %>
+  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+  <% end -%>
+<% end %>

data/app/components/primer/button_component.rb

@@ -0,0 +1,175 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+  class ButtonComponent < Primer::Component
+    status :deprecated
+
+    DEFAULT_SCHEME = :default
+    LINK_SCHEME = :link
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
+      :primary => "btn-primary",
+      :danger => "btn-danger",
+      :outline => "btn-outline",
+      :invisible => "btn-invisible",
+      LINK_SCHEME => "btn-link"
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+    DEFAULT_SIZE = :medium
+    SIZE_MAPPINGS = {
+      :small => "btn-sm",
+      DEFAULT_SIZE => ""
+    }.freeze
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    # Leading visuals appear to the left of the button text.
+    #
+    # Use:
+    #
+    # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
+    #
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+    renders_one :leading_visual, types: {
+      icon: lambda { |**system_arguments|
+        system_arguments[:mr] = 2
+
+        Primer::Beta::Octicon.new(**system_arguments)
+      }
+    }
+    alias icon with_leading_visual_icon # remove alias when all buttons are migrated to new slot names
+
+    # Trailing visuals appear to the right of the button text.
+    #
+    # Use:
+    #
+    # - `trailing_visual_counter` for a <%= link_to_component(Primer::Beta::Counter) %>.
+    #
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
+    renders_one :trailing_visual, types: {
+      counter: lambda { |**system_arguments|
+        system_arguments[:ml] = 2
+
+        Primer::Beta::Counter.new(**system_arguments)
+      }
+    }
+    alias counter with_trailing_visual_counter # remove alias when all buttons are migrated to new slot names
+
+    # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
+    # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
+    # Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+    #
+    # @param type [Symbol] (:description) <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
+    # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Alpha::Tooltip) %>.
+    renders_one :tooltip, lambda { |**system_arguments|
+      raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
+
+      system_arguments[:for_id] = @id
+      system_arguments[:type] ||= :description
+
+      Primer::Alpha::Tooltip.new(**system_arguments)
+    }
+
+    # @example Schemes
+    #   <%= render(Primer::ButtonComponent.new) { "Default" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
+    #   <%= render(Primer::ButtonComponent.new(scheme: :link)) { "Link" } %>
+    #
+    # @example Sizes
+    #   <%= render(Primer::ButtonComponent.new(size: :small)) { "Small" } %>
+    #   <%= render(Primer::ButtonComponent.new(size: :medium)) { "Medium" } %>
+    #
+    # @example Block
+    #   <%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
+    #   <%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
+    #
+    # @example With leading visual
+    #   <%= render(Primer::ButtonComponent.new) do |component| %>
+    #     <% component.with_leading_visual_icon(icon: :star) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With trailing visual
+    #   <%= render(Primer::ButtonComponent.new) do |component| %>
+    #     <% component.with_trailing_visual_counter(count: 15) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With leading and trailing visuals
+    #   <%= render(Primer::ButtonComponent.new) do |component| %>
+    #     <% component.with_leading_visual_icon(icon: :star) %>
+    #     <% component.with_trailing_visual_counter(count: 15) %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With dropdown caret
+    #   <%= render(Primer::ButtonComponent.new(dropdown: true)) do %>
+    #     Button
+    #   <% end %>
+    #
+    # @example With tooltip
+    #   @description
+    #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+    #   @code
+    #     <%= render(Primer::ButtonComponent.new(id: "button-with-tooltip")) do |component| %>
+    #       <% component.with_tooltip(text: "Tooltip text") %>
+    #       Button
+    #     <% end %>
+    #
+    # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
+    # @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
+    # @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
+    # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+    # @param group_item [Boolean] Whether button is part of a ButtonGroup.
+    # @param block [Boolean] Whether button is full-width with `display: block`.
+    # @param dropdown [Boolean] Whether or not to render a dropdown caret.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      scheme: DEFAULT_SCHEME,
+      variant: nil,
+      size: DEFAULT_SIZE,
+      group_item: false,
+      block: false,
+      dropdown: false,
+      **system_arguments
+    )
+      @scheme = scheme
+      @dropdown = dropdown
+
+      @system_arguments = system_arguments
+
+      @id = @system_arguments[:id]
+
+      @system_arguments[:classes] = class_names(
+        system_arguments[:classes],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, variant || size, DEFAULT_SIZE)],
+        "btn" => !link?,
+        "btn-block" => block,
+        "BtnGroup-item" => group_item
+      )
+    end
+
+    private
+
+    def link?
+      @scheme == LINK_SCHEME
+    end
+
+    def trimmed_content
+      return if content.blank?
+
+      trimmed_content = content.strip
+
+      return trimmed_content unless content.html_safe?
+
+      # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+      trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
+    end
+  end
+end