yattho_view_components 0.0.1

data/app/components/yattho/beta/subhead.rb

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.
+    #
+    # - Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.
+    # - Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.
+    # - Use the actions slot to render a related action to the right of the heading. Use <%= link_to_component(Yattho::ButtonComponent) %> or <%= link_to_component(Yattho::Beta::Link) %>.
+    #
+    # @accessibility
+    #   The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.
+    #   <%= link_to_heading_practices %>
+    class Subhead < Yattho::Component
+      status :beta
+
+      DEFAULT_HEADING_TAG = :div
+      HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
+
+      # The heading
+      #
+      # @param tag [Symbol] <%= one_of(Yattho::Beta::Subhead::HEADING_TAG_OPTIONS)%>
+      # @param danger [Boolean] Whether to style the heading as dangerous.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
+        system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "Subhead-heading",
+          'Subhead-heading--danger': danger
+        )
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      # Actions
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      # The description
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :description, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Yattho::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(tag: :h3) do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With dangerous heading
+      #   <%= render(Yattho::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(tag: :h3, danger: true) do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With long description
+      #   <%= render(Yattho::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading(tag: :h3) do %>
+      #       My Heading
+      #     <% end %>
+      #   <% end %>
+      #   <p> This is a longer description that is sitting below the Subhead. It's much longer than a description that could sit comfortably in the Subhead. </p>
+      #
+      # @example Without border
+      #   <%= render(Yattho::Beta::Subhead.new(hide_border: true)) do |component| %>
+      #     <% component.with_heading do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With actions
+      #   <%= render(Yattho::Beta::Subhead.new) do |component| %>
+      #     <% component.with_heading do %>
+      #       My Heading
+      #     <% end %>
+      #     <% component.with_description do %>
+      #       My Description
+      #     <% end %>
+      #     <% component.with_actions do %>
+      #       <%= render(
+      #         Yattho::ButtonComponent.new(
+      #           tag: :a, href: "http://www.google.com", scheme: :danger
+      #         )
+      #       ) { "Action" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param spacious [Boolean] Whether to add spacing to the Subhead.
+      # @param hide_border [Boolean] Whether to hide the border under the heading.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(spacious: false, hide_border: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "Subhead",
+            'Subhead--spacious': spacious,
+            'border-bottom-0': hide_border
+          )
+        @system_arguments[:mb] ||= hide_border ? 0 : nil
+      end
+
+      def render?
+        heading.present?
+      end
+    end
+  end
+end

data/app/components/yattho/beta/text.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # `Text` is a wrapper component that will apply typography styles to the text inside.
+    class Text < Yattho::Component
+      status :beta
+
+      DEFAULT_TAG = :span
+
+      # @example Default
+      #   <%= render(Yattho::Beta::Text.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
+      #   <%= render(Yattho::Beta::Text.new(tag: :p, color: :danger)) { "Danger Text" } %>
+      #
+      # @param tag [Symbol]
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: DEFAULT_TAG, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = tag
+      end
+
+      def call
+        render(Yattho::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/yattho/beta/timeline_item.css

@@ -0,0 +1,95 @@
+/* TimelineItem */
+
+.TimelineItem {
+  position: relative;
+  display: flex;
+  padding: var(--yattho-stack-padding-normal, 16px) 0;
+  margin-left: var(--yattho-stack-gap-normal, 16px);
+
+  /* The Timeline */
+}
+
+.TimelineItem::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: var(--yattho-borderWidth-thick, 2px);
+    content: '';
+    background-color: var(--color-border-muted);
+  }
+
+.TimelineItem:target .TimelineItem-badge {
+    border-color: var(--color-accent-emphasis);
+    box-shadow: 0 0 0.2em var(--color-accent-muted);
+  }
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: var(--yattho-control-medium-size, 32px);
+  height: var(--yattho-control-medium-size, 32px);
+  margin-right: var(--yattho-controlStack-medium-gap-condensed, 8px);
+  margin-left: calc(var(--yattho-control-medium-size, 32px) / -2 + 1px);
+  color: var(--color-fg-muted);
+  align-items: center;
+  background-color: var(--color-timeline-badge-bg);
+  border: var(--yattho-borderWidth-thick, 2px) solid var(--color-canvas-default);
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.TimelineItem-badge--success {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-success-emphasis);
+  border: var(--yattho-borderWidth-thin, 1px) solid transparent;
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--base-size-4, 4px);
+  color: var(--color-fg-muted);
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  left: -72px;
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: var(--yattho-stack-gap-spacious, 24px);
+  margin: 0;
+  margin-bottom: calc(var(--yattho-stack-gap-normal, 16px) * -1);
+  margin-left: -56px;
+  background-color: var(--color-canvas-default);
+  border: 0;
+  border-top: var(--yattho-borderWidth-thicker, 4px) solid var(--color-border-default);
+}
+
+.TimelineItem--condensed {
+  padding-top: var(--base-size-4, 4px);
+  padding-bottom: 0;
+
+  /* TimelineItem--condensed is often grouped. (commits) */
+}
+
+.TimelineItem--condensed:last-child {
+    padding-bottom: var(--yattho-stack-gap-normal, 16px);
+  }
+
+.TimelineItem--condensed .TimelineItem-badge {
+    height: var(--base-size-16, 16px);
+    margin-top: var(--base-size-8, 8px);
+    margin-bottom: var(--base-size-8, 8px);
+    color: var(--color-fg-muted);
+    background-color: var(--color-canvas-default);
+    border: 0;
+  }

data/app/components/yattho/beta/timeline_item.css.json

@@ -0,0 +1 @@
+{"name":"beta/timeline_item","selectors":[".TimelineItem",".TimelineItem::before",".TimelineItem:target .TimelineItem-badge",".TimelineItem-badge",".TimelineItem-badge--success",".TimelineItem-body",".TimelineItem-avatar",".TimelineItem-break",".TimelineItem--condensed",".TimelineItem--condensed:last-child",".TimelineItem--condensed .TimelineItem-badge"]}

data/app/components/yattho/beta/timeline_item.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;EACE,kBAAkB;EAClB,aAAa;EACb,mDAAmD;EACnD,iDAAiD;;EAEjD,iBAAiB;AAgBnB;;AAfE;IACE,kBAAkB;IAClB,MAAM;IACN,SAAS;IACT,OAAO;IACP,cAAc;IACd,2CAA2C;IAC3C,WAAW;IACX,2CAA2C;EAC7C;;AAEA;IACE,0CAA0C;IAC1C,+CAA+C;EACjD;;AAGF;EACE,kBAAkB;EAClB,UAAU;EACV,aAAa;EACb,8CAA8C;EAC9C,+CAA+C;EAC/C,kEAAkE;EAClE,qEAAqE;EACrE,4BAA4B;EAC5B,mBAAmB;EACnB,gDAAgD;EAChD,8EAA8E;EAC9E,kBAAkB;EAClB,uBAAuB;EACvB,cAAc;AAChB;;AAEA;EACE,kCAAkC;EAClC,+CAA+C;EAC/C,6DAA6D;AAC/D;;AAEA;EACE,YAAY;EACZ,eAAe;EACf,mCAAmC;EACnC,4BAA4B;EAC5B,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,UAAU;EACV,8CAA8C;EAC9C,SAAS;EACT,8DAA8D;EAC9D,kBAAkB;EAClB,6CAA6C;EAC7C,SAAS;EACT,oFAAoF;AACtF;;AAEA;EACE,oCAAoC;EACpC,iBAAiB;;EAEjB,wDAAwD;AAa1D;;AAZE;IACE,oDAAoD;EACtD;;AAEA;IACE,iCAAiC;IACjC,mCAAmC;IACnC,sCAAsC;IACtC,4BAA4B;IAC5B,6CAA6C;IAC7C,SAAS;EACX","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n  position: relative;\n  display: flex;\n  padding: var(--yattho-stack-padding-normal, 16px) 0;\n  margin-left: var(--yattho-stack-gap-normal, 16px);\n\n  /* The Timeline */\n  &::before {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    display: block;\n    width: var(--yattho-borderWidth-thick, 2px);\n    content: '';\n    background-color: var(--color-border-muted);\n  }\n\n  &:target .TimelineItem-badge {\n    border-color: var(--color-accent-emphasis);\n    box-shadow: 0 0 0.2em var(--color-accent-muted);\n  }\n}\n\n.TimelineItem-badge {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: var(--yattho-control-medium-size, 32px);\n  height: var(--yattho-control-medium-size, 32px);\n  margin-right: var(--yattho-controlStack-medium-gap-condensed, 8px);\n  margin-left: calc(var(--yattho-control-medium-size, 32px) / -2 + 1px);\n  color: var(--color-fg-muted);\n  align-items: center;\n  background-color: var(--color-timeline-badge-bg);\n  border: var(--yattho-borderWidth-thick, 2px) solid var(--color-canvas-default);\n  border-radius: 50%;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n  color: var(--color-fg-on-emphasis);\n  background-color: var(--color-success-emphasis);\n  border: var(--yattho-borderWidth-thin, 1px) solid transparent;\n}\n\n.TimelineItem-body {\n  min-width: 0;\n  max-width: 100%;\n  margin-top: var(--base-size-4, 4px);\n  color: var(--color-fg-muted);\n  flex: auto;\n}\n\n.TimelineItem-avatar {\n  position: absolute;\n  left: -72px;\n  z-index: 1;\n}\n\n.TimelineItem-break {\n  position: relative;\n  z-index: 1;\n  height: var(--yattho-stack-gap-spacious, 24px);\n  margin: 0;\n  margin-bottom: calc(var(--yattho-stack-gap-normal, 16px) * -1);\n  margin-left: -56px;\n  background-color: var(--color-canvas-default);\n  border: 0;\n  border-top: var(--yattho-borderWidth-thicker, 4px) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n  padding-top: var(--base-size-4, 4px);\n  padding-bottom: 0;\n\n  /* TimelineItem--condensed is often grouped. (commits) */\n  &:last-child {\n    padding-bottom: var(--yattho-stack-gap-normal, 16px);\n  }\n\n  & .TimelineItem-badge {\n    height: var(--base-size-16, 16px);\n    margin-top: var(--base-size-8, 8px);\n    margin-bottom: var(--base-size-8, 8px);\n    color: var(--color-fg-muted);\n    background-color: var(--color-canvas-default);\n    border: 0;\n  }\n}"]}

data/app/components/yattho/beta/timeline_item.html.erb

@@ -0,0 +1,5 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <%= avatar %>
+  <%= badge %>
+  <%= body %>
+<% end %>

data/app/components/yattho/beta/timeline_item.pcss

@@ -0,0 +1,93 @@
+/* TimelineItem */
+
+.TimelineItem {
+  position: relative;
+  display: flex;
+  padding: var(--yattho-stack-padding-normal, 16px) 0;
+  margin-left: var(--yattho-stack-gap-normal, 16px);
+
+  /* The Timeline */
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: var(--yattho-borderWidth-thick, 2px);
+    content: '';
+    background-color: var(--color-border-muted);
+  }
+
+  &:target .TimelineItem-badge {
+    border-color: var(--color-accent-emphasis);
+    box-shadow: 0 0 0.2em var(--color-accent-muted);
+  }
+}
+
+.TimelineItem-badge {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: var(--yattho-control-medium-size, 32px);
+  height: var(--yattho-control-medium-size, 32px);
+  margin-right: var(--yattho-controlStack-medium-gap-condensed, 8px);
+  margin-left: calc(var(--yattho-control-medium-size, 32px) / -2 + 1px);
+  color: var(--color-fg-muted);
+  align-items: center;
+  background-color: var(--color-timeline-badge-bg);
+  border: var(--yattho-borderWidth-thick, 2px) solid var(--color-canvas-default);
+  border-radius: 50%;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.TimelineItem-badge--success {
+  color: var(--color-fg-on-emphasis);
+  background-color: var(--color-success-emphasis);
+  border: var(--yattho-borderWidth-thin, 1px) solid transparent;
+}
+
+.TimelineItem-body {
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--base-size-4, 4px);
+  color: var(--color-fg-muted);
+  flex: auto;
+}
+
+.TimelineItem-avatar {
+  position: absolute;
+  left: -72px;
+  z-index: 1;
+}
+
+.TimelineItem-break {
+  position: relative;
+  z-index: 1;
+  height: var(--yattho-stack-gap-spacious, 24px);
+  margin: 0;
+  margin-bottom: calc(var(--yattho-stack-gap-normal, 16px) * -1);
+  margin-left: -56px;
+  background-color: var(--color-canvas-default);
+  border: 0;
+  border-top: var(--yattho-borderWidth-thicker, 4px) solid var(--color-border-default);
+}
+
+.TimelineItem--condensed {
+  padding-top: var(--base-size-4, 4px);
+  padding-bottom: 0;
+
+  /* TimelineItem--condensed is often grouped. (commits) */
+  &:last-child {
+    padding-bottom: var(--yattho-stack-gap-normal, 16px);
+  }
+
+  & .TimelineItem-badge {
+    height: var(--base-size-16, 16px);
+    margin-top: var(--base-size-8, 8px);
+    margin-bottom: var(--base-size-8, 8px);
+    color: var(--color-fg-muted);
+    background-color: var(--color-canvas-default);
+    border: 0;
+  }
+}

data/app/components/yattho/beta/timeline_item.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
+    class TimelineItem < Yattho::Component
+      status :beta
+
+      # Avatar to be rendered to the left of the Badge.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Yattho::Beta::Avatar) %>.
+      renders_one :avatar, lambda { |src:, size: 40, shape: :square, **system_arguments|
+        system_arguments[:classes] = class_names(
+          "TimelineItem-avatar",
+          system_arguments[:classes]
+        )
+
+        Yattho::Beta::Avatar.new(src: src, size: size, shape: shape, **system_arguments)
+      }
+
+      # Badge that will be connected to other TimelineItems.
+      #
+      # @param icon [String] Name of <%= link_to_octicons %> to use.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :badge, "Badge"
+
+      # Body to be rendered to the left of the Badge.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "TimelineItem-body",
+          system_arguments[:classes]
+        )
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <div style="padding-left: 60px">
+      #     <%= render(Yattho::Beta::TimelineItem.new) do |component| %>
+      #       <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "github") %>
+      #       <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
+      #       <% component.with_body { "Success!" } %>
+      #     <% end %>
+      #   </div>
+      #
+      # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(condensed: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "TimelineItem",
+          condensed ? "TimelineItem--condensed" : "",
+          system_arguments[:classes]
+        )
+      end
+
+      def render?
+        avatar? || badge? || body?
+      end
+
+      # This component is part of `Yattho::Beta::TimelineItem` and should not be
+      # used as a standalone component.
+      class Badge < Yattho::Component
+        status :beta
+
+        def initialize(icon: nil, **system_arguments)
+          @icon = icon
+
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "TimelineItem-badge",
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Yattho::BaseComponent.new(**@system_arguments)) do
+            render(Yattho::Beta::Octicon.new(@icon))
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/yattho/beta/truncate.css

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

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

@@ -0,0 +1 @@
+{"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:hover","\n    .Truncate > .Truncate-text.Truncate-text--expandable:focus","\n    .Truncate > .Truncate-text.Truncate-text--expandable:active"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAAA,aAAa;;AAEb;EACE,oBAAoB;EACpB,YAAY;EACZ,eAAe;AAyBjB;;AAvBE;IACE,cAAc;IACd,2BAAsB;IAAtB,sBAAsB;IACtB,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;EAiBrB;;AAfE;MACE,iDAAiD;IACnD;;AAEA;MACE,gBAAgB;IAClB;;AAEA;;;MAGE,0BAA0B;IAG5B;;AANA;;;MAIE,cAAc;MACd,eAAe;IACjB","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(--yattho-control-small-gap, 4px);\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}"]}

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

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

data/app/components/yattho/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(--yattho-control-small-gap, 4px);
+    }
+
+    &.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/yattho/beta/truncate.rb

@@ -0,0 +1,114 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `Truncate` to shorten overflowing text with an ellipsis.
+    class Truncate < Yattho::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(Yattho::Beta::Truncate.new) { "branch-name-that-is-really-long" } %>
+      #
+      # @example Multiple items
+      #   <%= render(Yattho::Beta::Truncate.new) do |component| %>
+      #     <% component.with_item do %>really-long-repository-owner-name<% end %>
+      #     <% component.with_item(font_weight: :bold) do %>
+      #       <%= render(Yattho::BaseComponent.new(tag: :span, font_weight: :normal)) { "/" } %> really-long-repository-name
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Advanced multiple items
+      #   <%= render(Yattho::Beta::Truncate.new(tag: :ol)) do |component| %>
+      #     <% component.with_item(tag: :li) do %>yattho<% 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 yattho.com found in lists
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Expand on hover or focus
+      #   <%= render(Yattho::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(Yattho::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(Yattho::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(Yattho::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(Yattho::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 `Yattho::Beta::Truncate` and should not be
+      # used as a standalone component.
+      class TruncateText < Yattho::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
+          )
+
+          return if max_width.nil?
+
+          @system_arguments[:style] =
+            join_style_arguments(@system_arguments[:style], "max-width: #{max_width}px;")
+        end
+
+        def call
+          render(Yattho::BaseComponent.new(**@system_arguments)) do
+            content
+          end
+        end
+      end
+    end
+  end
+end