yattho_view_components 0.0.1

data/app/components/yattho/icon_button.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module Yattho
+  # Use `IconButton` to render Icon-only buttons without the default button styles.
+  #
+  # `IconButton` will always render with a tooltip unless the tag is `:summary`.
+  # @accessibility
+  #   `IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.
+  #   The `aria-label` should describe the action to be invoked rather than the icon itself. For instance,
+  #   if your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be
+  #   `"Search"` instead of `"Magnifying glass"`.
+  #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
+  #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
+  class IconButton < Yattho::Component
+    status :deprecated
+
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
+      :danger => "btn-octicon-danger"
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+    # @example Default
+    #
+    #   <%= render(Yattho::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
+    #
+    # @example Schemes
+    #
+    #   <%= render(Yattho::IconButton.new(icon: :search, "aria-label": "Search")) %>
+    #   <%= render(Yattho::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
+    #
+    # @example In a BorderBox
+    #
+    #   <%= render(Yattho::Beta::BorderBox.new) do |component| %>
+    #     <% component.body do %>
+    #       <%= render(Yattho::Beta::Text.new(pr: 2)) { "Body" } %>
+    #       <%= render(Yattho::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With an `aria-description`
+    #   @description
+    #     If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
+    #     attributes. A label should be short and concise, while the description can be longer as it is intended to provide
+    #     more context and information. See the accessibility section for more information.
+    #   @code
+    #     <%= render(Yattho::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
+    #
+    # @example Custom tooltip direction
+    #
+    #   <%= render(Yattho::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
+    #
+    # @param scheme [Symbol] <%= one_of(Yattho::IconButton::SCHEME_OPTIONS) %>
+    # @param icon [String] Name of <%= link_to_octicons %> to use.
+    # @param tag [Symbol] <%= one_of(Yattho::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Yattho::Beta::BaseButton::TYPE_OPTIONS) %>
+    # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
+    # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
+    # @param tooltip_direction [Symbol] (Yattho::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Yattho::Alpha::Tooltip::DIRECTION_OPTIONS) %>
+    # @param box [Boolean] Whether the button is in a <%= link_to_component(Yattho::Beta::BorderBox) %>. If `true`, the button will have the `Box-btn-octicon` class.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false,
+                   tooltip_direction: Yattho::Alpha::Tooltip::DIRECTION_DEFAULT, **system_arguments)
+      @icon = icon
+
+      @system_arguments = system_arguments
+
+      @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
+
+      @system_arguments[:classes] = class_names(
+        "btn-octicon",
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
+        system_arguments[:classes],
+        "Box-btn-octicon" => box
+      )
+
+      validate_aria_label
+
+      @aria_label = aria("label", @system_arguments)
+      @aria_description = aria("description", @system_arguments)
+
+      @tooltip_arguments = {
+        for_id: @system_arguments[:id],
+        direction: tooltip_direction
+      }
+
+      # If we have both an `aria-label` and a `aria-description`, we create a `Tooltip` with the description type and keep the `aria-label` in the button.
+      # Otherwise, the `aria-label` is used as the tooltip text, which is the `aria-labelled-by` of the button, so we don't set it in the button.
+      if @aria_label.present? && @aria_description.present?
+        @system_arguments.delete(:'aria-description')
+        @system_arguments[:aria].delete(:description) if @system_arguments.include?(:aria)
+        @tooltip_arguments[:text] = @aria_description
+        @tooltip_arguments[:type] = :description
+      else
+        @system_arguments.delete(:'aria-label')
+        @system_arguments[:aria].delete(:label) if @system_arguments.include?(:aria)
+        @tooltip_arguments[:text] = @aria_label
+        @tooltip_arguments[:type] = :label
+      end
+    end
+
+    private
+
+    def render_tooltip?
+      @system_arguments[:tag] != :summary
+    end
+  end
+end

data/app/components/yattho/label_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class LabelComponent < Yattho::Beta::Label
+    status :deprecated
+  end
+end

data/app/components/yattho/layout_component.html.erb

@@ -0,0 +1,9 @@
+<%= render(Yattho::BaseComponent.new(**@system_arguments)) do %>
+  <% if @side == :left %>
+    <%= sidebar %>
+  <% end %>
+  <%= main %>
+  <% if @side == :right %>
+    <%= sidebar %>
+  <% end %>
+<% end %>

data/app/components/yattho/layout_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Yattho
+  # Use `Layout` to build a main/sidebar layout.
+  class LayoutComponent < Yattho::Component
+    # The main content
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :main, lambda { |**system_arguments|
+      deny_tag_argument(**system_arguments)
+      system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
+      system_arguments[:col] = (@responsive ? [12, nil, @main_col] : @main_col)
+      system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)
+
+      Yattho::BaseComponent.new(tag: :div, **system_arguments)
+    }
+
+    # The sidebar content
+    #
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :sidebar, lambda { |**system_arguments|
+      system_arguments[:classes] = class_names("flex-shrink-0", system_arguments[:classes])
+      system_arguments[:col] = (@responsive ? [12, nil, @sidebar_col] : @sidebar_col)
+
+      if @side == :left
+        system_arguments[:mb] = (@responsive ? [4, nil, 0] : nil)
+      end
+
+      Yattho::BaseComponent.new(tag: :div, **system_arguments)
+    }
+
+    DEFAULT_SIDE = :right
+    ALLOWED_SIDES = [DEFAULT_SIDE, :left].freeze
+
+    MAX_COL = 12
+    DEFAULT_SIDEBAR_COL = 3
+    ALLOWED_SIDEBAR_COLS = (1..(MAX_COL - 1)).to_a.freeze
+
+    # @example Default
+    #   <%= render(Yattho::LayoutComponent.new) do |component| %>
+    #     <% component.with_sidebar { "Sidebar" } %>
+    #     <% component.with_main { "Main" } %>
+    #   <% end %>
+    #
+    # @example Left sidebar
+    #   <%= render(Yattho::LayoutComponent.new(side: :left)) do |component| %>
+    #     <% component.with_sidebar { "Sidebar" } %>
+    #     <% component.with_main { "Main" } %>
+    #   <% end %>
+    #
+    # @param responsive [Boolean] Whether to collapse layout to a single column at smaller widths.
+    # @param side [Symbol] Which side to display the sidebar on. <%= one_of(Yattho::LayoutComponent::ALLOWED_SIDES) %>
+    # @param sidebar_col [Integer] Sidebar column width.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(responsive: false, side: DEFAULT_SIDE, sidebar_col: DEFAULT_SIDEBAR_COL, **system_arguments)
+      @system_arguments = system_arguments
+      @side = fetch_or_fallback(ALLOWED_SIDES, side, DEFAULT_SIDE)
+      @responsive = responsive
+      @system_arguments[:classes] = class_names(
+        "gutter-condensed gutter-lg",
+        @system_arguments[:classes]
+      )
+      @system_arguments[:direction] = responsive ? [:column, nil, :row] : nil
+      @system_arguments[:display] = :flex
+      @system_arguments[:tag] = :div
+
+      @sidebar_col = fetch_or_fallback(ALLOWED_SIDEBAR_COLS, sidebar_col, DEFAULT_SIDEBAR_COL)
+      @main_col = MAX_COL - @sidebar_col
+    end
+  end
+end

data/app/components/yattho/link_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class LinkComponent < Yattho::Beta::Link
+    status :deprecated
+  end
+end

data/app/components/yattho/local_time.d.ts

@@ -0,0 +1 @@
+import '@github/relative-time-element';

data/app/components/yattho/local_time.js

@@ -0,0 +1 @@
+import '@github/relative-time-element';

data/app/components/yattho/local_time.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Yattho
+  # Use `LocalTime` to format a date and time in the user's preferred locale format. This component requires JavaScript.
+  class LocalTime < Yattho::Component
+    status :deprecated
+
+    DEFAULT_DIGIT_TYPE = :numeric
+    DIGIT_TYPE_OPTIONS = [DEFAULT_DIGIT_TYPE, :'2-digit'].freeze
+
+    DEFAULT_TEXT_TYPE = :short
+    TEXT_TYPE_OPTIONS = [DEFAULT_TEXT_TYPE, :long].freeze
+
+    # @example Default
+    #   <%= render(Yattho::LocalTime.new(datetime: DateTime.parse("2014-06-01T13:05:07Z"))) %>
+    #
+    # @example All the options
+    #   <%= render(Yattho::LocalTime.new(datetime: DateTime.parse("2014-06-01T13:05:07Z"), weekday: :long, year: :"2-digit", month: :long, day: :"2-digit", hour: :"2-digit", minute: :"2-digit", second: :"2-digit", time_zone_name: :long)) %>
+    #
+    # @example With initial content
+    #   <%= render(Yattho::LocalTime.new(datetime: DateTime.parse("2014-06-01T13:05:07Z"))) do %>
+    #     <!-- This content will be replaced once the component connects -->
+    #     2014/06/01 13:05
+    #   <% end %>
+    #
+    # @param datetime [DateTime] The date to parse
+    # @param initial_text [String] Text to render before component is initialized
+    # @param weekday [Symbol] <%= one_of(Yattho::LocalTime::TEXT_TYPE_OPTIONS) %>
+    # @param year [Symbol] <%= one_of(Yattho::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param month [Symbol] <%= one_of(Yattho::LocalTime::TEXT_TYPE_OPTIONS) %>
+    # @param day [Symbol] <%= one_of(Yattho::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param hour [Symbol] <%= one_of(Yattho::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param minute [Symbol] <%= one_of(Yattho::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param second [Symbol] <%= one_of(Yattho::LocalTime::DIGIT_TYPE_OPTIONS) %>
+    # @param time_zone_name [Symbol] <%= one_of(Yattho::LocalTime::TEXT_TYPE_OPTIONS) %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(datetime:, initial_text: nil, weekday: DEFAULT_TEXT_TYPE, year: DEFAULT_DIGIT_TYPE,
+                   month: DEFAULT_TEXT_TYPE, day: DEFAULT_DIGIT_TYPE, hour: DEFAULT_DIGIT_TYPE, minute: DEFAULT_DIGIT_TYPE, second: DEFAULT_DIGIT_TYPE, time_zone_name: DEFAULT_TEXT_TYPE, **system_arguments)
+      @system_arguments = deny_tag_argument(**system_arguments)
+
+      @datetime = datetime
+
+      @system_arguments[:tag] = "relative-time"
+      @system_arguments[:threshold] = "PT0S"
+      @system_arguments[:prefix] = ""
+      @system_arguments[:datetime] = datetime
+
+      @initial_text = initial_text
+
+      @system_arguments[:weekday] = fetch_or_fallback(TEXT_TYPE_OPTIONS, weekday, DEFAULT_TEXT_TYPE)
+      @system_arguments[:year] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, year, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:month] = fetch_or_fallback(TEXT_TYPE_OPTIONS, month, DEFAULT_TEXT_TYPE)
+      @system_arguments[:day] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, day, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:hour] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, hour, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:minute] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, minute, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:second] = fetch_or_fallback(DIGIT_TYPE_OPTIONS, second, DEFAULT_DIGIT_TYPE)
+      @system_arguments[:'time-zone-name'] = fetch_or_fallback(TEXT_TYPE_OPTIONS, time_zone_name, DEFAULT_TEXT_TYPE)
+    end
+
+    def call
+      render(Yattho::BaseComponent.new(**@system_arguments).with_content(@initial_text || @datetime.strftime("%B %-d, %Y %H:%M %Z")))
+    end
+  end
+end

data/app/components/yattho/local_time.ts

@@ -0,0 +1 @@
+import '@github/relative-time-element'

data/app/components/yattho/markdown.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class Markdown < Yattho::Beta::Markdown
+    status :deprecated
+  end
+end

data/app/components/yattho/menu_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class MenuComponent < Yattho::Alpha::Menu
+    status :deprecated
+  end
+end

data/app/components/yattho/navigation/tab_component.html.erb

@@ -0,0 +1,11 @@
+<%= wrapper do %>
+  <%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+    <%= icon %>
+    <% if text.present? %>
+      <%= text %>
+    <% else %>
+      <%= content %>
+    <% end %>
+    <%= counter %>
+  <% end %>
+<% end %>

data/app/components/yattho/navigation/tab_component.rb

@@ -0,0 +1,166 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Navigation
+    # This component is part of navigation components such as `Yattho::Alpha::TabNav`
+    # and `Yattho::Alpha::UnderlineNav` and should not be used by itself.
+    #
+    # @accessibility
+    #   `TabComponent` renders the selected anchor tab with `aria-current="page"` by default.
+    #    When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
+    class TabComponent < Yattho::Component
+      DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
+      ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
+      # Panel controlled by the Tab. This will not render anything in the tab itself.
+      # It will provide a accessor for the Tab's parent to call and render the panel
+      # content in the appropriate place.
+      # Refer to `UnderlineNav` and `TabNav` implementations for examples.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :panel, lambda { |**system_arguments|
+        return unless @with_panel
+
+        deny_tag_argument(**system_arguments)
+        system_arguments[:id] = @panel_id
+        system_arguments[:tag] = :div
+        system_arguments[:role] ||= :tabpanel
+        system_arguments[:tabindex] = 0
+        system_arguments[:hidden] = true unless @selected
+
+        label_present = aria("label", system_arguments) || aria("labelledby", system_arguments)
+        unless label_present
+          if @id.present?
+            system_arguments[:'aria-labelledby'] = @id
+          elsif !Rails.env.production?
+            raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
+          end
+        end
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      # Icon to be rendered in the Tab left.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Yattho::Beta::Octicon) %>.
+      renders_one :icon, lambda { |icon = nil, **system_arguments|
+        system_arguments[:classes] = class_names(
+          @icon_classes,
+          system_arguments[:classes]
+        )
+        Yattho::Beta::Octicon.new(icon, **system_arguments)
+      }
+
+      # The Tab's text.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Yattho::Beta::Text) %>.
+      renders_one :text, Yattho::Beta::Text
+
+      # Counter to be rendered in the Tab right.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Yattho::Beta::Counter) %>.
+      renders_one :counter, Yattho::Beta::Counter
+
+      attr_reader :selected
+
+      # @example Default
+      #   <%= render(Yattho::Navigation::TabComponent.new(selected: true)) do |component| %>
+      #     <% component.with_text { "Selected" } %>
+      #   <% end %>
+      #   <%= render(Yattho::Navigation::TabComponent.new) do |component| %>
+      #     <% component.with_text { "Not selected" } %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Yattho::Navigation::TabComponent.new) do |component| %>
+      #     <% component.with_icon(:star) %>
+      #     <% component.with_text { "Tab" } %>
+      #   <% end %>
+      #   <%= render(Yattho::Navigation::TabComponent.new) do |component| %>
+      #     <% component.with_icon(:star) %>
+      #     <% component.with_text { "Tab" } %>
+      #     <% component.with_counter(count: 10) %>
+      #   <% end %>
+      #   <%= render(Yattho::Navigation::TabComponent.new) do |component| %>
+      #     <% component.with_text { "Tab" } %>
+      #     <% component.with_counter(count: 10) %>
+      #   <% end %>
+      #
+      # @example Inside a list
+      #   <%= render(Yattho::Navigation::TabComponent.new(list: true)) do |component| %>
+      #     <% component.with_text { "Tab" } %>
+      #   <% end %>
+      #
+      # @example With custom HTML
+      #   <%= render(Yattho::Navigation::TabComponent.new) do %>
+      #     <div>
+      #       This is my <strong>custom HTML</strong>
+      #     </div>
+      #   <% end %>
+      #
+      # @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
+      # @param selected [Boolean] Whether the Tab is selected or not.
+      # @param with_panel [Boolean] Whether the Tab has an associated panel.
+      # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
+      # @param icon_classes [Boolean] Classes that must always be applied to icons.
+      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "",
+                     wrapper_arguments: {}, **system_arguments)
+        @selected = selected
+        @icon_classes = icon_classes
+        @list = list
+        @with_panel = with_panel
+
+        @system_arguments = system_arguments
+        @id = @system_arguments[:id]
+        @wrapper_arguments = wrapper_arguments
+
+        if with_panel || @system_arguments[:tag] == :button
+          @system_arguments[:tag] = :button
+          @system_arguments[:type] = :button
+          @system_arguments[:role] = :tab
+          panel_id(panel_id)
+          # https://www.w3.org/TR/wai-aria-practices/#presentation_role
+          @wrapper_arguments[:role] = :presentation
+        else
+          @system_arguments[:tag] = :a
+        end
+
+        @wrapper_arguments[:tag] = :li
+        @wrapper_arguments[:display] ||= :inline_flex
+
+        return unless @selected
+
+        if @system_arguments[:tag] == :a
+          aria_current = aria("current", system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
+          @system_arguments[:'aria-current'] =
+            fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
+        else
+          @system_arguments[:'aria-selected'] = true
+        end
+      end
+
+      def wrapper
+        unless @list
+          yield
+          return # returning `yield` caused a double render
+        end
+
+        render(Yattho::BaseComponent.new(**@wrapper_arguments)) do
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def panel_id(panel_id)
+        if panel_id.blank?
+          raise ArgumentError, "`panel_id` is required" unless Rails.env.production?
+        else
+          @panel_id = panel_id
+          @system_arguments[:'aria-controls'] = @panel_id
+        end
+      end
+    end
+  end
+end

data/app/components/yattho/octicon_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class OcticonComponent < Yattho::Beta::Octicon
+    status :deprecated
+  end
+end

data/app/components/yattho/octicon_symbols_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class OcticonSymbolsComponent < Yattho::Alpha::OcticonSymbols
+    status :deprecated
+  end
+end

data/app/components/yattho/popover_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Yattho
+  # :nodoc:
+  class PopoverComponent < Yattho::Beta::Popover
+    status :deprecated
+  end
+end

data/app/components/yattho/spinner_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class SpinnerComponent < Yattho::Beta::Spinner
+    status :deprecated
+  end
+end

data/app/components/yattho/state_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class StateComponent < Yattho::Beta::State
+    status :deprecated
+  end
+end

data/app/components/yattho/subhead_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class SubheadComponent < Yattho::Beta::Subhead
+    status :deprecated
+  end
+end

data/app/components/yattho/tab_container_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Yattho
+  class TabContainerComponent < Yattho::Alpha::TabContainer
+    status :deprecated
+  end
+end

data/app/components/yattho/time_ago_component.d.ts

@@ -0,0 +1 @@
+import '@github/relative-time-element';

data/app/components/yattho/time_ago_component.js

@@ -0,0 +1 @@
+import '@github/relative-time-element';

data/app/components/yattho/time_ago_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Yattho
+  # Use `TimeAgo` to display a time relative to how long ago it was. This component requires JavaScript.
+  class TimeAgoComponent < Yattho::Component
+    status :deprecated
+
+    # @example Default
+    #   <%= render(Yattho::TimeAgoComponent.new(time: Time.at(628232400))) %>
+    #
+    # @param time [Time] The time to be formatted
+    # @param micro [Boolean] If true then the text will be formatted in "micro" mode, using as few characters as possible
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(time:, micro: false, **system_arguments)
+      @system_arguments = deny_tag_argument(**system_arguments)
+      @system_arguments[:datetime] = time.utc.iso8601
+      @system_arguments[:classes] = class_names("no-wrap", @system_arguments[:classes])
+      @system_arguments[:tag] = "relative-time"
+      @system_arguments[:tense] = "past"
+      @system_arguments[:format] = "micro" if micro
+      @time = time
+      @micro = micro
+    end
+
+    def call
+      render(Yattho::BaseComponent.new(**@system_arguments)) { time_in_words }
+    end
+
+    private
+
+    def time_in_words
+      return @time.in_time_zone.strftime("%b %-d, %Y") unless @micro
+
+      seconds_ago = Time.current - @time
+
+      if seconds_ago < 1.minute
+        # :nocov:
+        "1m"
+        # :nocov:
+      elsif seconds_ago >= 1.minute && seconds_ago < 1.hour
+        "#{(seconds_ago / 60).floor}m"
+      elsif seconds_ago >= 1.hour && seconds_ago < 1.day
+        "#{(seconds_ago / 60 / 60).floor}h"
+      elsif seconds_ago >= 1.day && seconds_ago < 1.year
+        "#{(seconds_ago / 60 / 60 / 24).floor}d"
+      elsif seconds_ago >= 1.year
+        "#{(seconds_ago / 60 / 60 / 24 / 365).floor}y"
+      end
+    end
+  end
+end

data/app/components/yattho/time_ago_component.ts

@@ -0,0 +1 @@
+import '@github/relative-time-element'

data/app/components/yattho/timeline_item_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Yattho
+  # nodoc
+  class TimelineItemComponent < Yattho::Beta::TimelineItem
+    status :deprecated
+
+    # nodoc
+    class BadgeComponent < Yattho::Component
+      status :deprecated
+    end
+  end
+end