pulse_view_components 0.3.0

data/app/components/pulse/nav_list/group.html.slim

@@ -0,0 +1,6 @@
+/! components/pulse/nav_list/group
+- with_post_list_content do
+  - if show_more_item?
+    = show_more_item
+
+= render_parent

data/app/components/pulse/nav_list/group.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Pulse
+  class NavList
+    # A logical grouping of navigation links with an optional heading.
+    #
+    # See <%= link_to_component(Pulse::NavList) %> for usage examples.
+    class Group < ActionList
+      # A special "show more" list item that appears at the bottom of the group. Clicking
+      # the item will fetch the next page of results from the URL passed in the `src` argument
+      # and append the resulting chunk of HTML to the group.
+      #
+      # @param src [String] The URL to query for additional pages of list items.
+      # @param pages [Integer] The total number of pages in the result set.
+      # @param component_klass [Class] A component class to use instead of the default `Pulse::NavList::Item` class.
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Pulse::NavList::Item) %>.
+      renders_one :show_more_item, lambda { |src:, pages:,
+                                             component_klass: NavList::Item,
+                                             **system_arguments|
+        system_arguments[:classes] = merge_classes(
+          @item_classes,
+          system_arguments[:classes]
+        )
+        system_arguments[:tag] = :div
+        system_arguments[:id] ||= self.class.generate_id(base_name: 'item')
+        system_arguments[:hidden] = true
+        system_arguments[:href] = '#'
+        system_arguments[:data] ||= {}
+        system_arguments[:data][:target] = 'nav-list.showMoreItem'
+        system_arguments[:data][:action] = 'click:nav-list#showMore'
+        system_arguments[:data][:current_page] = '1'
+        system_arguments[:data][:total_pages] = pages.to_s
+        system_arguments[:label_arguments] = {
+          **system_arguments[:label_arguments] || {},
+          color: :accent
+        }
+
+        system_arguments[:content_arguments] = {
+          **system_arguments[:content_arguments] || {},
+          tag: :button
+        }
+
+        system_arguments[:content_arguments][:data] = merge_data(
+          system_arguments[:content_arguments],
+          data: { list_id: id }
+        )
+
+        component_klass.new(list: self, src:, **system_arguments)
+      }
+
+      # @private
+      def self.custom_element_name
+        Pulse::NavList.custom_element_name
+      end
+
+      # @param selected_item_id [Symbol] The ID of the currently selected item. Used internally.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(selected_item_id: nil, **system_arguments)
+        @system_arguments = system_arguments
+        @selected_item_id = selected_item_id
+
+        super(**@system_arguments)
+      end
+
+      # Cause this group to show its list of sub items when rendered.
+      # simplecov:disable
+      def expand!
+        @expanded = true
+      end
+      # simplecov:enable
+
+      # @!parse
+      #   # Items.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Pulse::NavList::Item) %>.
+      #   renders_many :items
+
+      # @private
+      def build_item(component_klass: NavList::Item, **system_arguments)
+        super(
+          component_klass:,
+          selected_item_id: @selected_item_id,
+          **system_arguments
+        )
+      end
+
+      # @private
+      def build_avatar_item(component_klass: NavList::Item, **system_arguments)
+        super(
+          component_klass:,
+          selected_item_id: @selected_item_id,
+          **system_arguments
+        )
+      end
+
+      def kind
+        :group
+      end
+
+      def before_render
+        super
+
+        return if heading?
+
+        raise ArgumentError,
+              'NavList groups are required to have headings'
+      end
+    end
+  end
+end

data/app/components/pulse/nav_list/heading.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Pulse
+  class NavList
+    # The heading placed above a `NavList`'s items.
+    #
+    # See <%= link_to_component(NavList) %> for usage examples.
+    class Heading < Pulse::Component
+      attr_reader :title, :id, :heading_level, :system_arguments
+
+      # @param title [String] The text content of the heading.
+      # @param id [String] The value of the ID HTML attribute. Auto-generated by default.
+      # @param heading_level [Integer] The heading level, i.e. 2 for an `<h2>`, 3 for an `<h3>`, etc.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(title:, id: self.class.generate_id, heading_level: 2,
+                     **system_arguments)
+        @title = title
+        @id = id
+        @heading_level = heading_level
+        @system_arguments = system_arguments
+      end
+
+      def call
+        render(
+          Pulse::Text.new(
+            type: :body4,
+            tag: :"h#{heading_level}",
+            id:,
+            classes: 'pulse-ml-2 pulse-mb-4',
+            **system_arguments
+          ).with_content(title)
+        )
+      end
+    end
+  end
+end

data/app/components/pulse/nav_list/item.rb

@@ -0,0 +1,171 @@
+# frozen_string_literal: true
+
+module Pulse
+  class NavList
+    # Items are rendered as styled links. They can optionally include leading and/or trailing visuals,
+    # such as icons, avatars, and counters. Items are selected by ID. IDs can be specified via the
+    # `selected_item_ids` argument, which accepts a list of valid IDs for the item. Items can also
+    # themselves contain sub items. Sub items are rendered collapsed by default.
+    class Item < Pulse::ActionList::Item
+      attr_reader :selected_by_ids, :sub_item
+
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Pulse::ActionList::Item) %>.
+      renders_many :items, lambda { |**system_arguments|
+        raise 'Items can only be nested 2 levels deep' if sub_item?
+
+        @list.build_item(parent: self,
+                         sub_item: true,
+                         **system_arguments).tap do |item|
+          @list.will_add_item(item)
+        end
+      }
+
+      # Whether or not this item is nested under a parent item.
+      #
+      # @return [Boolean]
+      alias sub_item? sub_item
+
+      # @param selected_item_id [Symbol] The ID of the currently selected list item. Used internally.
+      # @param selected_by_ids [Array<Symbol>] The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected.
+      # @param expanded [Boolean] Whether this item shows (expands) or hides (collapses) its list of sub items.
+      # @param sub_item [Boolean] Whether or not this item is nested under a parent item. Used internally.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(selected_item_id: nil, selected_by_ids: [],
+                     sub_item: false, expanded: false, **system_arguments)
+        @selected_item_id = selected_item_id
+        @selected_by_ids = Array(selected_by_ids)
+        @expanded = expanded
+        @sub_item = sub_item
+
+        system_arguments[:classes] = merge_classes(
+          system_arguments[:classes],
+          'ActionListItem--subItem' => @sub_item
+        )
+
+        @sub_list_arguments = {
+          classes: merge_classes(
+            'ActionList',
+            'ActionList--subGroup'
+          )
+        }
+
+        @list = system_arguments[:list]
+
+        if @list
+          @sub_list_arguments['data-action'] =
+            "keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown"
+        end
+
+        overrides = { 'data-item-id': @selected_by_ids.join(' ') }
+
+        super(**system_arguments, **overrides)
+      end
+
+      def active?
+        item_active?(self) && items.empty?
+      end
+
+      # Cause this item to show its list of sub items when rendered.
+      def expand!
+        @expanded = true
+      end
+
+      def before_render
+        if active_sub_item?
+          expand!
+
+          @content_arguments[:classes] = merge_classes(
+            @content_arguments[:classes],
+            'ActionListContent--hasActiveSubItem'
+          )
+        else
+          @system_arguments[:classes] = merge_classes(
+            @system_arguments[:classes],
+            'pulse-outline-none pulse-bg-gray-50' => active?
+          )
+        end
+
+        @content_arguments[:'aria-current'] = 'page' if active?
+
+        super
+
+        if items.present? && trailing_action.present?
+          raise 'Cannot render a trailing action for an item with subitems'
+        end
+
+        if items.present? && @selected_by_ids.present?
+          raise 'Cannot pass `selected_by_ids:` for an item with subitems, ' \
+                'since parent items cannot be selected'
+        end
+
+        return if items.blank?
+
+        @sub_list_arguments[:aria] = merge_aria(
+          @sub_list_arguments,
+          { aria: { labelledby: id } }
+        )
+
+        if href.present?
+          raise ArgumentError,
+                'Items with sub-items cannot have hrefs'
+        end
+
+        @content_arguments[:tag] = :button
+        @content_arguments[:'aria-expanded'] = @expanded.to_s
+        @content_arguments[:'data-action'] = "
+          click:#{@list.custom_element_name}#handleItemWithSubItemClick
+          keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown
+        "
+
+        with_private_trailing_action_icon(
+          :'chevron-down',
+          classes: 'ActionListItem-collapseIcon'
+        )
+
+        @system_arguments[:classes] = merge_classes(
+          @system_arguments[:classes],
+          'ActionListItem--hasSubItem'
+        )
+      end
+
+      def kind
+        :item
+      end
+
+      private
+
+      # Normally it would be easier to simply ask each item for its active status, eg.
+      # items.any?(&:active?), but unfortunately the view context is not set on each
+      # item until _after_ the parent's before_render, etc methods have been called.
+      # This means helper methods like current_page? will blow up with an error, since
+      # `helpers` is simply an alias for the view context (i.e. an instance of
+      # ActionView::Base). Since we know the view context for the parent object must
+      # be set before `before_render` is invoked, we can call helper methods here in
+      # the parent and bypass the problem entirely. Maybe not the most OO approach,
+      # but it works.
+      def item_active?(item)
+        if item.selected_by_ids.present?
+          item.selected_by_ids.include?(@selected_item_id)
+        elsif item.href
+          current_page?(item.href)
+        else
+          # simplecov:disable
+          false
+          # simplecov:enable
+        end
+      end
+
+      def active_sub_item?
+        items.any? { |subitem| item_active?(subitem) }
+      end
+
+      def current_page?(url)
+        helpers.current_page?(url)
+      end
+
+      def list_class
+        Pulse::NavList
+      end
+    end
+  end
+end

data/app/components/pulse/nav_list.html.slim

@@ -0,0 +1,11 @@
+/! components/pulse/nav_list
+= render Pulse::BaseComponent.new(tag: :nav, **@system_arguments) do
+  = heading
+  nav-list
+    = render(Pulse::ConditionalWrapper.new(condition: render_outer_list?, tag: :ul)) do
+      - items.each_with_index do |item, index|
+        - if index > 0 && render_divider_between?(item, items[index - 1])
+          = render(Pulse::ActionList::Divider.new)
+
+        = render(Pulse::ConditionalWrapper.new(condition: render_outer_list? && group?(item), tag: :li)) do
+          = item

data/app/components/pulse/nav_list.rb

@@ -0,0 +1,225 @@
+# frozen_string_literal: true
+
+module Pulse
+  # `NavList` provides a simple way to render side navigation, i.e. navigation
+  # that appears to the left or right side of some main content. Each group in a
+  # nav list is a list of links.
+  #
+  # Nav list groups can contain sub items. Rather than navigating to a URL, groups
+  # with sub items expand and collapse on click. To indicate this functionality, the
+  # group will automatically render with a trailing chevron icon that changes direction
+  # when the group expands and collapses.
+  #
+  # Nav list items appear visually active when selected. Each nav item must have one
+  # or more ID values that determine which item will appear selected. Use the
+  # `selected_item_id` argument to select the appropriate item.
+  class NavList < Pulse::Component
+    # @private
+    def self.custom_element_name
+      'nav-list'
+    end
+
+    # The heading for the list at large. Accepts the arguments accepted by <%= link_to_component(Pulse::NavList::Heading) %>.
+    #
+    renders_one :heading, Pulse::NavList::Heading
+
+    # @!parse
+    #   # Adds an item to the list.
+    #   #
+    #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Pulse::NavList::Item) %>
+    #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Pulse::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+    #   def with_item(component_klass: Pulse::NavList::Item, **system_arguments, &block)
+    #   end
+
+    # @!parse
+    #   # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
+    #   #
+    #   # @param src [String] The source url of the avatar image.
+    #   # @param username [String] The username associated with the avatar.
+    #   # @param full_name [String] Optional. The user's full name.
+    #   # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+    #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Pulse::NavList::Item) %>
+    #   # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Pulse::Avatar) %>
+    #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Pulse::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+    #   def with_avatar_item(src:, username:, full_name: nil, full_name_scheme: ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: Pulse::NavList::Item, avatar_arguments: {}, **system_arguments, &block)
+    #   end
+
+    # @!parse
+    #   # Adds a group to the list. A group is a list of links and a (required) heading.
+    #   #
+    #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Pulse::NavList::Group) %>.
+    #   def with_group(**system_arguments, &block)
+    #   end
+
+    # @!parse
+    #   # Adds a divider to the list. Dividers visually separate items and groups.
+    #   #
+    #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Pulse::NavList::Divider) %>.
+    #   def with_divider(**system_arguments, &block)
+    #   end
+
+    # Items. Items can be individual items, dividers, or groups. See the documentation for `#with_item`, `#with_divider`, and `#with_group` respectively for more information.
+    #
+    renders_many :items, types: {
+      item: {
+        renders: lambda { |**system_arguments, &block|
+          build_item(**system_arguments, &block)
+        },
+
+        as: :item
+      },
+
+      avatar_item: {
+        renders: lambda { |**system_arguments|
+          build_avatar_item(**system_arguments)
+        },
+
+        as: :avatar_item
+      },
+
+      divider: {
+        renders: Pulse::NavList::Divider,
+        as: :divider
+      },
+
+      group: {
+        renders: lambda { |**system_arguments, &block|
+          Pulse::NavList::Group.new(
+            selected_item_id: @selected_item_id,
+            **system_arguments,
+            &block
+          )
+        },
+
+        as: :group
+      }
+    }
+
+    # @param selected_item_id [Symbol] The ID of the currently selected item. The default is `nil`, meaning no item is selected.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(selected_item_id: nil, **system_arguments)
+      @system_arguments = system_arguments
+      @selected_item_id = selected_item_id
+    end
+
+    # Builds a new item but does not add it to the list. Use this method
+    # instead of the `#with_item` slot if you need to render an item outside
+    # the context of a list, eg. if rendering additional items to append to
+    # an existing list, perhaps via a separate HTTP request.
+    #
+    # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Pulse::NavList::Item) %>
+    # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Pulse::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+    def build_item(component_klass: Pulse::NavList::Item, **system_arguments,
+                   &)
+      component_klass.new(
+        list: top_level_group,
+        selected_item_id: @selected_item_id,
+        **system_arguments,
+        &
+      )
+    end
+
+    # Builds a new avatar item but does not add it to the list. Avatar items
+    # are a convenient way to accessibly add an item with a leading avatar
+    # image. Use this method instead of the `#with_avatar_item` slot if you
+    # need to render an avatar item outside the context of a list, eg. if
+    # rendering additional items to append to an existing list, perhaps via
+    # a separate HTTP request.
+    #
+    # @param src [String] The source url of the avatar image.
+    # @param username [String] The username associated with the avatar.
+    # @param full_name [String] Optional. The user's full name.
+    # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(ActionList::ItemComponent::DESCRIPTION_SCHEME_OPTIONS) %>
+    # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Pulse::NavList::Item) %>
+    # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Pulse::Avatar) %>
+    # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Pulse::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+    def build_avatar_item(
+      src:, username:, full_name: nil,
+      full_name_scheme: ActionList::Item::DEFAULT_DESCRIPTION_SCHEME,
+      component_klass: Pulse::NavList::Item, avatar_arguments: {},
+      **system_arguments
+    )
+      component_klass.new(
+        list: top_level_group,
+        selected_item_id: @selected_item_id,
+        label: username,
+        description_scheme: full_name_scheme,
+        **system_arguments
+      ).tap do |item|
+        item.with_leading_visual_raw_content do
+          # no alt text necessary
+          item.render(Pulse::Avatar.new(src:, **avatar_arguments,
+                                        role: :presentation, size: 16))
+        end
+
+        item.with_description_content(full_name) if full_name
+      end
+    end
+
+    private
+
+    def before_render
+      if heading?
+        if aria(
+          :label, @system_arguments
+        )
+          raise ArgumentError,
+                "Please don't set an aria-label if a heading is provided"
+        end
+
+        @system_arguments[:aria] = merge_aria(
+          @system_arguments,
+          { aria: { labelledby: heading.id } }
+        )
+      else
+        unless aria(
+          :label, @system_arguments
+        )
+          raise ArgumentError,
+                'When no heading is provided, an aria-label must be given'
+        end
+      end
+    end
+
+    # Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>
+    def render_outer_list?
+      items.any? { |item| !group?(item) }
+    end
+
+    def render_divider_between?(item1, item2)
+      return false if either_is_divider?(item1, item2)
+
+      both_are_groups?(item1, item2) || heterogeneous?(item1, item2)
+    end
+
+    def both_are_groups?(item1, item2)
+      group?(item1) && group?(item2)
+    end
+
+    def heterogeneous?(item1, item2)
+      kind(item1) != kind(item2)
+    end
+
+    def either_is_divider?(item1, item2)
+      divider?(item1) || divider?(item2)
+    end
+
+    def group?(item)
+      kind(item) == :group
+    end
+
+    def divider?(item)
+      kind(item) == :divider
+    end
+
+    def kind(item)
+      item.respond_to?(:kind) ? item.kind : :item
+    end
+
+    def top_level_group
+      # dummy group for the list: argument in the item slot above
+      @top_level_group ||=
+        Pulse::NavList::Group.new(selected_item_id: @selected_item_id)
+    end
+  end
+end

data/app/components/pulse/popover.html.slim

@@ -0,0 +1,5 @@
+/! components/pulse/popover
+= render Pulse::BaseComponent.new(**@system_arguments) do
+  = render(body_component) do
+    = heading
+    = body

data/app/components/pulse/popover.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Use `Popover` to bring attention to specific user interface elements,
+  # typically to suggest an action or to guide users through a new experience.
+  #
+  # By default, the popover renders with absolute positioning, meaning it should
+  # usually be wrapped in an element with a relative position in order to be
+  # positioned properly. To render the popover with relative positioning, use
+  # the relative property.
+  class Popover < Pulse::Component
+    CARET_DEFAULT = :top
+    CARET_MAPPINGS = {
+      CARET_DEFAULT => 'pulse-caret-top',
+      :bottom => 'pulse-caret-bottom',
+      :bottom_right => 'Popover-message--bottom-right',
+      :bottom_left => 'Popover-message--bottom-left',
+      :left => 'pulse-caret-left',
+      :left_bottom => 'Popover-message--left-bottom',
+      :left_top => 'Popover-message--left-top',
+      :right => 'pulse-caret-right',
+      :right_bottom => 'Popover-message--right-bottom',
+      :right_top => 'Popover-message--right-top',
+      :top_left => 'Popover-message--top-left',
+      :top_right => 'Popover-message--top-right'
+    }.freeze
+
+    DEFAULT_HEADING_TAG = :h4
+
+    # The heading
+    #
+    # @param tag [Symbol] (Pulse::Popover::DEFAULT_HEADING_TAG) <%= one_of(Pulse::Heading::TAG_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG,
+                                    **system_arguments|
+      system_arguments[:type] = :body3
+      system_arguments[:tag] = tag
+      system_arguments[:classes] = merge_classes(
+        'pulse-mb-2',
+        system_arguments[:classes]
+      )
+
+      Pulse::Text.new(**system_arguments)
+    }
+
+    # The body
+    #
+    # @param caret [Symbol] <%= one_of(Pulse::Popover::CARET_MAPPINGS.keys) %>
+    # @param large [Boolean] Whether to use the large version of the component.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :body, lambda { |caret: CARET_DEFAULT, large: false,
+                                 **system_arguments|
+      @body_arguments = system_arguments
+      @body_arguments['data-caret'] = caret
+      @body_arguments[:classes] = merge_classes(
+        @body_arguments[:classes],
+        CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret,
+                                         CARET_DEFAULT)],
+        'Popover-message--large' => large
+      )
+      @body_arguments[:classes] = merge_classes(
+        @body_arguments[:classes],
+        'pulse-bg-white pulse-border pulse-border-gray-300 pulse-rounded-lg',
+        'pulse-p-4 pulse-mt-2 pulse-mx-auto pulse-text-left pulse-shadow-lg'
+      )
+
+      Pulse::Content.new
+    }
+
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(**system_arguments)
+      @system_arguments = deny_tag_argument(**system_arguments)
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = merge_classes(
+        'pulse-relative pulse-z-10 pulse-w-64',
+        system_arguments[:classes]
+      )
+    end
+
+    def render?
+      body.present?
+    end
+
+    def body_component
+      Pulse::Box.new(**@body_arguments)
+    end
+  end
+end

data/app/components/pulse/progress_bar.html.slim

@@ -0,0 +1,5 @@
+/! components/pulse/progress_bar
+= render Pulse::BaseComponent.new(**@system_attributes) do
+  div class="pulse-h-1 pulse-bg-success" style="width: #{[@percentage, 100].min}%"
+  - if @percentage > 100
+    div class="pulse-h-1 pulse-bg-error" style="width: #{@percentage - 100}%"

data/app/components/pulse/progress_bar.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Pulse
+  # Renders a simple progress bar
+  class ProgressBar < Pulse::Component
+    def initialize(percentage: 0, **system_attributes)
+      @percentage = percentage.to_i
+      @system_attributes = system_attributes
+      @system_attributes[:tag] ||= :div
+      @system_attributes[:class] = merge_classes(
+        'pulse-flex pulse-flex-row pulse-h-1 pulse-w-full pulse-bg-gray-300',
+        'dark:pulse-bg-gray-600',
+        system_attributes[:classes]
+      )
+    end
+
+    private
+
+    def before_render
+      @system_attributes[:title] ||= t('.title', percentage: @percentage)
+    end
+  end
+end

data/app/components/pulse/progress_bar.yml

@@ -0,0 +1,2 @@
+en:
+  title: "%{percentage}% of budgeted hours used"