primer_view_components 0.0.17 → 0.0.22

data/app/components/primer/text_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # The Text component is a wrapper component that will apply typography styles to the text inside.
   class TextComponent < Primer::Component
-    # @example 70|Default
+    # @example Default
     #   <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
     #   <%= render(Primer::TextComponent.new(tag: :p, color: :red_5)) { "Red Text" } %>
     #

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

@@ -1,17 +1,5 @@
-<%= render Primer::BaseComponent.new(**system_arguments) do %>
-  <% if avatar %>
-    <%= render Primer::AvatarComponent.new(alt: avatar.alt, src: avatar.src, size: avatar.size, square: avatar.square, **avatar.system_arguments) %>
-  <% end %>
-
-  <% if badge %>
-    <%= render Primer::BaseComponent.new(**badge.system_arguments) do %>
-      <%= octicon badge.icon %>
-    <% end %>
-  <% end %>
-
-  <% if body %>
-    <%= render Primer::BaseComponent.new(**body.system_arguments) do %>
-      <%= body.content %>
-    <% end %>
-  <% end %>
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= avatar %>
+  <%= badge %>
+  <%= body %>
 <% end %>

data/app/components/primer/timeline_item_component.rb

@@ -3,20 +3,45 @@
 module Primer
   # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
   class TimelineItemComponent < Primer::Component
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :avatar, class_name: "Avatar"
-    with_slot :badge, class_name: "Badge"
-    with_slot :body, class_name: "Body"
+    # Avatar to be rendered to the left of the Badge.
+    #
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
+    renders_one :avatar, lambda { |src:, size: 40, square: true, **system_arguments|
+      system_arguments[:classes] = class_names(
+        "TimelineItem-avatar",
+        system_arguments[:classes]
+      )
+
+      Primer::AvatarComponent.new(src: src, size: size, square: square, **system_arguments)
+    }
 
-    attr_reader :system_arguments
+    # Badge that will be connected to other TimelineItems.
+    #
+    # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_one :badge, "BadgeComponent"
 
-    # @example 75|Default
+    # 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|
+      system_arguments[:tag] = :div
+      system_arguments[:classes] = class_names(
+        "TimelineItem-body",
+        system_arguments[:classes]
+      )
+
+      Primer::BaseComponent.new(**system_arguments)
+    }
+
+    # @example Default
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
-    #       <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
-    #       <% component.slot(:badge, bg: :green, color: :white, icon: :check) %>
-    #       <% component.slot(:body) { "Success!" } %>
+    #       <% component.avatar(src: "https://github.com/github.png", alt: "github") %>
+    #       <% component.badge(bg: :green, color: :white, icon: :check) %>
+    #       <% component.body { "Success!" } %>
     #     <% end %>
     #   </div>
     #
@@ -36,34 +61,9 @@ module Primer
       avatar.present? || badge.present? || body.present?
     end
 
-    class Avatar < Primer::Slot
-      attr_reader :system_arguments, :alt, :src, :size, :square
-
-      # @param alt [String] Alt text for avatar image.
-      # @param src [String] Src attribute for avatar image.
-      # @param size [Integer] Image size.
-      # @param square [Boolean] Whether to round the edges of the image.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(alt: nil, src: nil, size: 40, square: true, **system_arguments)
-        @alt = alt
-        @src = src
-        @size = size
-        @square = square
-
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(
-          "TimelineItem-avatar",
-          system_arguments[:classes]
-        )
-      end
-    end
-
-    class Badge < Primer::Slot
-      attr_reader :system_arguments, :icon
-
-      # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    # This component is part of `Primer::TimelineItemComponent` and should not be
+    # used as a standalone component.
+    class BadgeComponent < Primer::Component
       def initialize(icon: nil, **system_arguments)
         @icon = icon
 
@@ -74,19 +74,11 @@ module Primer
           system_arguments[:classes]
         )
       end
-    end
-
-    class Body < Primer::Slot
-      attr_reader :system_arguments
 
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(**system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(
-          "TimelineItem-body",
-          system_arguments[:classes]
-        )
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) do
+          render(Primer::OcticonComponent.new(icon: @icon))
+        end
       end
     end
   end

data/app/components/primer/tooltip_component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Primer
+  # The Tooltip component is a wrapper component that will apply a tooltip to the provided content.
+  class TooltipComponent < Primer::Component
+    DIRECTION_DEFAULT = :n
+    ALIGN_DEFAULT = :default
+    MULTILINE_DEFAULT = false
+    DELAY_DEFAULT = false
+
+    ALIGN_MAPPING = {
+      ALIGN_DEFAULT => "",
+      :left_1 => "tooltipped-align-left-1",
+      :right_1 => "tooltipped-align-right-1",
+      :left_2 => "tooltipped-align-left-2",
+      :right_2 => "tooltipped-align-right-2"
+    }.freeze
+
+    DIRECTION_OPTIONS = [DIRECTION_DEFAULT] + %i[
+      nw
+      ne
+      w
+      e
+      sw
+      s
+      se
+    ]
+
+    # @example Default
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
+    #   </div>
+    #
+    # @example Wrapping another component
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder")) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
+    #     <% end %>
+    #   </div>
+    #
+    # @example With a direction
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
+    #   </div>
+    #
+    # @example With an alignment
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
+    #   </div>
+    #
+    # @example Without a delay
+    #   <div class="pt-5">
+    #     <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
+    #   </div>
+    #
+    # @param label [String] the text to appear in the tooltip
+    # @param direction [String] Direction of the tooltip. <%= one_of(Primer::TooltipComponent::DIRECTION_OPTIONS) %>
+    # @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Primer::TooltipComponent::ALIGN_MAPPING.keys) %>
+    # @param multiline [Boolean] Use this when you have long content
+    # @param no_delay [Boolean] By default the tooltips have a slight delay before appearing. Set true to override this
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      label:,
+      direction: DIRECTION_DEFAULT,
+      align: ALIGN_DEFAULT,
+      multiline: MULTILINE_DEFAULT,
+      no_delay: DELAY_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :span
+      @system_arguments[:aria] = { label: label }
+
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "tooltipped",
+        "tooltipped-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+        ALIGN_MAPPING[fetch_or_fallback(ALIGN_MAPPING.keys, align, ALIGN_DEFAULT)],
+        "tooltipped-no-delay" => fetch_or_fallback_boolean(no_delay, DELAY_DEFAULT),
+        "tooltipped-multiline" => fetch_or_fallback_boolean(multiline, MULTILINE_DEFAULT)
+      )
+    end
+
+    def call
+      render(Primer::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/primer/truncate_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use TruncateComponent to shorten overflowing text with an ellipsis.
+  class TruncateComponent < Primer::Component
+    # @example Default
+    #   <div class="col-2">
+    #     <%= render(Primer::TruncateComponent.new(tag: :p)) { "branch-name-that-is-really-long" } %>
+    #   </div>
+    #
+    # @example Inline
+    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example Expandable
+    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example Custom size
+    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
+    #
+    # @param inline [Boolean] Whether the element is inline (or inline-block).
+    # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.
+    # @param max_width [Integer] Sets the max-width of the text.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(inline: false, expandable: false, max_width: nil, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "css-truncate",
+        "css-truncate-overflow" => !inline,
+        "css-truncate-target" => inline,
+        "expandable" => inline && 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)) { content }
+    end
+  end
+end

data/app/components/primer/underline_nav_component.rb

@@ -1,12 +1,37 @@
 # frozen_string_literal: true
 
 module Primer
+  # Use the UnderlineNav component to style navigation with a minimal
+  # underlined selected state, typically used for navigation placed at the top
+  # of the page.
   class UnderlineNavComponent < Primer::Component
     ALIGN_DEFAULT = :left
-    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right]
+    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
 
     with_content_areas :body, :actions
 
+    # @example Default
+    #   <%= render(Primer::UnderlineNavComponent.new) do |component| %>
+    #     <% component.with(:body) do %>
+    #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
+    #     <% end %>
+    #     <% component.with(:actions) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Align right
+    #   <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
+    #     <% component.with(:body) do %>
+    #       <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
+    #     <% end %>
+    #     <% component.with(:actions) do %>
+    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(align: ALIGN_DEFAULT, **system_arguments)
       @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
 

data/{lib → app/lib}/primer/class_name_helper.rb

@@ -4,6 +4,7 @@
 #
 # Helps build a list of conditional class names
 module Primer
+  # :nodoc:
   module ClassNameHelper
     def class_names(*args)
       classes = []

data/app/lib/primer/classify.rb

@@ -0,0 +1,280 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  class Classify
+    MARGIN_DIRECTION_KEYS = %i[mt ml mb mr].freeze
+    SPACING_KEYS = (%i[m my mx p py px pt pl pb pr] + MARGIN_DIRECTION_KEYS).freeze
+    DIRECTION_KEY = :direction
+    JUSTIFY_CONTENT_KEY = :justify_content
+    ALIGN_ITEMS_KEY = :align_items
+    DISPLAY_KEY = :display
+    RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
+    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
+
+    # Keys where we can simply translate { key: value } into ".key-value"
+    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
+
+    INVALID_CLASS_NAME_PREFIXES =
+      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
+    FUNCTIONAL_COLOR_REGEX = /(primary|secondary|tertiary|link|success|warning|danger|info)/.freeze
+
+    COLOR_KEY = :color
+    BG_KEY = :bg
+    VERTICAL_ALIGN_KEY = :vertical_align
+    WORD_BREAK_KEY = :word_break
+    TEXT_KEYS = %i[text_align font_weight].freeze
+    FLEX_KEY = :flex
+    FLEX_GROW_KEY = :flex_grow
+    FLEX_SHRINK_KEY = :flex_shrink
+    ALIGN_SELF_KEY = :align_self
+    WIDTH_KEY = :width
+    HEIGHT_KEY = :height
+    BOX_SHADOW_KEY = :box_shadow
+    VISIBILITY_KEY = :visibility
+    ANIMATION_KEY = :animation
+
+    BOOLEAN_MAPPINGS = {
+      underline: {
+        mappings: [
+          {
+            value: true,
+            css_class: "text-underline"
+          },
+          {
+            value: false,
+            css_class: "no-underline"
+          }
+        ]
+      },
+      top: {
+        mappings: [
+          {
+            value: false,
+            css_class: "top-0"
+          }
+        ]
+      },
+      bottom: {
+        mappings: [
+          {
+            value: false,
+            css_class: "bottom-0"
+          }
+        ]
+      },
+      left: {
+        mappings: [
+          {
+            value: false,
+            css_class: "left-0"
+          }
+        ]
+      },
+      right: {
+        mappings: [
+          {
+            value: false,
+            css_class: "right-0"
+          }
+        ]
+      }
+    }.freeze
+    BORDER_KEYS = %i[border border_color].freeze
+    BORDER_MARGIN_KEYS = %i[border_top border_bottom border_left border_right].freeze
+    BORDER_RADIUS_KEY = :border_radius
+    TYPOGRAPHY_KEYS = [:font_size].freeze
+    VALID_KEYS = (
+      CONCAT_KEYS +
+      BOOLEAN_MAPPINGS.keys +
+      BORDER_KEYS +
+      BORDER_MARGIN_KEYS +
+      TYPOGRAPHY_KEYS +
+      TEXT_KEYS +
+      [
+        BORDER_RADIUS_KEY,
+        COLOR_KEY,
+        BG_KEY,
+        DISPLAY_KEY,
+        VERTICAL_ALIGN_KEY,
+        WORD_BREAK_KEY,
+        DIRECTION_KEY,
+        JUSTIFY_CONTENT_KEY,
+        ALIGN_ITEMS_KEY,
+        FLEX_KEY,
+        FLEX_GROW_KEY,
+        FLEX_SHRINK_KEY,
+        ALIGN_SELF_KEY,
+        WIDTH_KEY,
+        HEIGHT_KEY,
+        BOX_SHADOW_KEY,
+        VISIBILITY_KEY,
+        ANIMATION_KEY
+      ]
+    ).freeze
+
+    class << self
+      def call(classes: "", style: nil, **args)
+        extracted_results = extract_hash(args)
+
+        extracted_results[:class] = [
+          validated_class_names(classes),
+          extracted_results.delete(:classes)
+        ].compact.join(" ").presence
+
+        extracted_results[:style] = [
+          extracted_results.delete(:styles),
+          style
+        ].compact.join("").presence
+
+        extracted_results
+      end
+
+      private
+
+      def validated_class_names(classes)
+        return if classes.blank?
+
+        if ENV["RAILS_ENV"] == "development"
+          invalid_class_names =
+            classes.split(" ").each_with_object([]) do |class_name, memo|
+              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
+            end
+
+          raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production." if invalid_class_names.any?
+        end
+
+        classes
+      end
+
+      # NOTE: This is a fairly naive implementation that we're building as we go.
+      # Feel free to refactor as this is thoroughly tested.
+      #
+      # Utility for mapping component configuration into Primer CSS class names
+      #
+      # styles_hash - A hash with utility keys that mimic the interface used by https://github.com/primer/components
+      #
+      # Returns a string of Primer CSS class names to be added to an HTML class attribute
+      #
+      # Example usage:
+      # extract_hash({ mt: 4, py: 2 }) => "mt-4 py-2"
+      def extract_hash(styles_hash)
+        memo = { classes: [], styles: +"" }
+        styles_hash.each do |key, value|
+          next unless VALID_KEYS.include?(key)
+
+          if value.is_a?(Array)
+            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key)
+
+            value.each_with_index do |val, index|
+              Primer::Classify::Cache.read(memo, key, val, BREAKPOINTS[index]) || extract_value(memo, key, val, BREAKPOINTS[index])
+            end
+          else
+            Primer::Classify::Cache.read(memo, key, value, BREAKPOINTS[0]) || extract_value(memo, key, value, BREAKPOINTS[0])
+          end
+        end
+
+        memo[:classes] = memo[:classes].join(" ")
+
+        memo
+      end
+
+      def extract_value(memo, key, val, breakpoint)
+        return if val.nil? || val == ""
+
+        if SPACING_KEYS.include?(key)
+          if MARGIN_DIRECTION_KEYS.include?(key)
+            raise ArgumentError, "value of #{key} must be between -6 and 6" if val < -6 || val > 6
+          elsif !((key == :mx || key == :my) && val == :auto)
+            raise ArgumentError, "value of #{key} must be between 0 and 6" if val.negative? || val > 6
+          end
+        end
+
+        if BOOLEAN_MAPPINGS.key?(key)
+          BOOLEAN_MAPPINGS[key][:mappings].map { |m| m[:css_class] if m[:value] == val }.compact.each do |css_class|
+            memo[:classes] << css_class
+          end
+        elsif key == BG_KEY
+          if val.to_s.start_with?("#")
+            memo[:styles] << "background-color: #{val};"
+          else
+            memo[:classes] << "bg-#{val.to_s.dasherize}"
+          end
+        elsif key == COLOR_KEY
+          char_code = val[-1].ord
+          # Does this string end in a character that is NOT a number?
+          memo[:classes] <<
+            if (char_code >= 48 && char_code <= 57) || # 48 is the charcode for 0; 57 is the charcode for 9
+               FUNCTIONAL_COLOR_REGEX.match?(val)
+              "color-#{val.to_s.dasherize}"
+            else
+              "text-#{val.to_s.dasherize}"
+            end
+        elsif key == DISPLAY_KEY
+          memo[:classes] << "d#{breakpoint}-#{val.to_s.dasherize}"
+        elsif key == VERTICAL_ALIGN_KEY
+          memo[:classes] << "v-align-#{val.to_s.dasherize}"
+        elsif key == WORD_BREAK_KEY
+          memo[:classes] << "wb-#{val.to_s.dasherize}"
+        elsif BORDER_KEYS.include?(key)
+          border_value = if val == true
+                           "border"
+                         else
+                           "border-#{val.to_s.dasherize}"
+                         end
+
+          memo[:classes] << border_value
+        elsif BORDER_MARGIN_KEYS.include?(key)
+          memo[:classes] << "#{key.to_s.dasherize}-#{val}"
+        elsif key == BORDER_RADIUS_KEY
+          memo[:classes] << "rounded-#{val}"
+        elsif key == DIRECTION_KEY
+          memo[:classes] << "flex#{breakpoint}-#{val.to_s.dasherize}"
+        elsif key == JUSTIFY_CONTENT_KEY
+          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
+          memo[:classes] << "flex#{breakpoint}-justify-#{formatted_value}"
+        elsif key == ALIGN_ITEMS_KEY
+          memo[:classes] << "flex#{breakpoint}-items-#{val.to_s.gsub('flex_', '')}"
+        elsif key == FLEX_KEY
+          memo[:classes] << "flex-#{val}"
+        elsif key == FLEX_GROW_KEY
+          memo[:classes] << "flex-grow-#{val}"
+        elsif key == FLEX_SHRINK_KEY
+          memo[:classes] << "flex-shrink-#{val}"
+        elsif key == ALIGN_SELF_KEY
+          memo[:classes] << "flex-self-#{val}"
+        elsif key == WIDTH_KEY || key == HEIGHT_KEY
+          if val == :fit || val == :fill
+            memo[:classes] << "#{key}-#{val}"
+          else
+            memo[key] = val
+          end
+        elsif TEXT_KEYS.include?(key)
+          memo[:classes] << "text-#{val.to_s.dasherize}"
+        elsif TYPOGRAPHY_KEYS.include?(key)
+          memo[:classes] << "f#{val.to_s.dasherize}"
+        elsif MARGIN_DIRECTION_KEYS.include?(key) && val.negative?
+          memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
+        elsif key == BOX_SHADOW_KEY
+          memo[:classes] << if val == true
+                              "box-shadow"
+                            else
+                              "box-shadow-#{val.to_s.dasherize}"
+                            end
+        elsif key == VISIBILITY_KEY
+          memo[:classes] << "v-#{val.to_s.dasherize}"
+        elsif key == ANIMATION_KEY
+          memo[:classes] << if val == :grow
+                              "hover-grow"
+                            else
+                              "anim-#{val.to_s.dasherize}"
+                            end
+        else
+          memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
+        end
+      end
+    end
+
+    Cache.preload!
+  end
+end