feat: Add no_title support (and stories) for RelativeTime

.changeset/old-panthers-exist.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+chore: Update '@github/relative-time-element' from 4.4.0 to 4.4.1

app/components/primer/beta/relative_time.rb

@@ -101,6 +101,7 @@ class RelativeTime < Primer::Component
       # @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
       # @param lang [string] The language to use.
       # @param title [string] Provide a custom title to the element.
+      # @param no_title [Boolean] Removes the `title` attribute provided on the element by default.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         datetime:,
@@ -120,6 +121,7 @@ def initialize(
         format_style: nil,
         lang: nil,
         title: nil,
+        no_title: false,
         **system_arguments
       )
         @system_arguments = deny_tag_argument(**system_arguments)
@@ -137,6 +139,7 @@ def initialize(
         @system_arguments[:threshold] = threshold if threshold.present?
         @system_arguments[:precision] = precision if precision.present?
         @system_arguments[:title] = title if title.present?
+        @system_arguments[:"no-title"] = no_title if no_title
         @system_arguments[:lang] = lang if lang.present?
         @system_arguments[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
         @system_arguments[:"format-style"] = format_style if format_style.present?

previews/primer/beta/relative_time_preview.rb

@@ -281,6 +281,18 @@ def count_down_timer(
                  title: title
                ))
       end
+
+      # @label No Title Attribute
+      # @snapshot
+      def no_title_attribute
+        render(Primer::Beta::RelativeTime.new(datetime: Time.utc(2020, 1, 1, 0, 0, 0), no_title: true))
+      end
+
+      # @label Link With Tooltip
+      # @snapshot
+      def link_with_tooltip
+        render_with_template
+      end
     end
   end
 end

previews/primer/beta/relative_time_preview/link_with_tooltip.html.erb

@@ -0,0 +1,13 @@
+<% time = Time.utc(2020, 1, 1, 0, 0, 0) %>
+
+<%= render(Primer::Beta::Link.new(href: "#", id: "link")) do |link| %>
+  <% link.with_tooltip(id: "tool-tip", text: time.to_s) %>
+  <%= render(Primer::Beta::RelativeTime.new(id: "relative-time", datetime: time, no_title: true)) %>
+<% end %>
+
+<script>
+  // When `<relative-time>`’s `title` changes, update `<tool-tip>` text.
+  document.getElementById("relative-time").addEventListener("relative-time-updated", ({newTitle}) => {
+    document.getElementById("tool-tip").textContent = newTitle
+  })
+</script>