openproject-primer_view_components 0.6.3

data/app/components/primer/component.rb

@@ -0,0 +1,145 @@
+# frozen_string_literal: true
+
+require "view_component/version"
+
+module Primer
+  # @private
+  # :nocov:
+  class Component < ViewComponent::Base
+    if Module.const_defined?("ViewComponent::SlotableV2") &&
+       !(ViewComponent::Base < ViewComponent::SlotableV2)
+      include ViewComponent::SlotableV2
+    end
+
+    if Module.const_defined?("ViewComponent::PolymorphicSlots") &&
+       !(ViewComponent::Base < ViewComponent::PolymorphicSlots)
+      include ViewComponent::PolymorphicSlots
+    end
+
+    include AttributesHelper
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+    include TestSelectorHelper
+    include JoinStyleArgumentsHelper
+    include ViewHelper
+    include Status::Dsl
+    include Audited::Dsl
+
+    INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
+
+    def self.deprecated?
+      status == :deprecated
+    end
+
+    def self.generate_id(base_name: name.demodulize.underscore.dasherize)
+      "#{base_name}-#{SecureRandom.uuid}"
+    end
+
+    private
+
+    def raise_on_invalid_options?
+      Rails.application.config.primer_view_components.raise_on_invalid_options
+    end
+
+    def raise_on_invalid_aria?
+      Rails.application.config.primer_view_components.raise_on_invalid_aria
+    end
+
+    def deprecated_component_warning(new_class: nil, version: nil)
+      return if Rails.env.production? || silence_deprecations?
+
+      message = "#{self.class.name} is deprecated"
+      message += " and will be removed in v#{version}." if version
+      message += " Use #{new_class.name} instead." if new_class
+
+      ActiveSupport::Deprecation.warn(message)
+    end
+
+    def validate_aria_label
+      aria_label = aria("label", @system_arguments)
+      aria_labelledby = aria("labelledby", @system_arguments)
+      raise ArgumentError, "`aria-label` or `aria-labelledby` is required." if aria_label.nil? && aria_labelledby.nil? && !Rails.env.production?
+    end
+
+    def silence_deprecations?
+      Rails.application.config.primer_view_components.silence_deprecations
+    end
+
+    def check_denylist(denylist = [], **arguments)
+      if should_raise_error?
+
+        # Convert denylist from:
+        # { [:p, :pt] => "message" } to:
+        # { p: "message", pt: "message" }
+        unpacked_denylist =
+          denylist.each_with_object({}) do |(keys, value), memo|
+            keys.each { |key| memo[key] = value }
+          end
+
+        violations = unpacked_denylist.keys & arguments.keys
+
+        if violations.any?
+          message = "Found #{violations.count} #{'violation'.pluralize(violations)}:"
+          violations.each do |violation|
+            message += "\n The #{violation} argument is not allowed here. #{unpacked_denylist[violation]}"
+          end
+
+          raise(ArgumentError, message)
+        end
+      end
+
+      arguments
+    end
+
+    def validate_arguments(tag:, denylist_name: :system_arguments_denylist, **arguments)
+      deny_single_argument(:class, "Use `classes` instead.", **arguments)
+
+      if (denylist = arguments[denylist_name])
+        check_denylist(denylist, **arguments)
+
+        # Remove :system_arguments_denylist key and any denied keys from system arguments
+        arguments.except!(denylist_name)
+        arguments.except!(*denylist.keys.flatten)
+      end
+
+      deny_aria_label(tag: tag, arguments: arguments)
+
+      arguments
+    end
+
+    def deny_single_argument(key, help_text, **arguments)
+      raise ArgumentError, "`#{key}` is an invalid argument. #{help_text}" \
+        if should_raise_error? && arguments.key?(key)
+
+      arguments.except!(key)
+    end
+
+    def deny_aria_label(tag:, arguments:)
+      return arguments.except!(:skip_aria_label_check) if arguments[:skip_aria_label_check]
+      return if arguments[:role]
+      return unless INVALID_ARIA_LABEL_TAGS.include?(tag)
+
+      deny_aria_key(
+        :label,
+        "Don't use `aria-label` on `#{tag}` elements. See https://www.tpgi.com/short-note-on-aria-label-aria-labelledby-and-aria-describedby/",
+        **arguments
+      )
+    end
+
+    def deny_aria_key(key, help_text, **arguments)
+      raise ArgumentError, help_text if should_raise_aria_error? && aria(key, arguments)
+    end
+
+    def deny_tag_argument(**arguments)
+      deny_single_argument(:tag, "This component has a fixed tag.", **arguments)
+    end
+
+    def should_raise_error?
+      !Rails.env.production? && raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
+    end
+
+    def should_raise_aria_error?
+      !Rails.env.production? && raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
+    end
+  end
+end

data/app/components/primer/conditional_wrapper.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  # Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition
+  # is true, a `Primer::BaseComponent` will render around the content. If the condition is false, only
+  # the content is rendered.
+  #
+  # @example True conditional
+  #   <%# condition is true, so content will be wrapped in a <span> tag
+  #   <%= render Primer::ConditionalWrapper.new(condition: true, tag: :span, class: "foobar")) do %>
+  #     <%# also rendered %>
+  #     <p class="bazboo">Some text</p>
+  #   <% end %>
+  #
+  # @example False conditional
+  #   <%# condition is false so no <span> tag will render around the content (i.e. the <p> tag)
+  #   <%= render(Primer::ConditionalWrapper.new(condition: false, tag: :span, class: "foobar")) do %>
+  #     <%# this content will be rendered %>
+  #     <p class="bazboo">Some text</p>
+  #   <% end %>
+  #
+  # @param condition [Boolean] Whether or not to wrap the content in a `Primer::BaseComponent`.
+  # @param base_component_arguments [Hash] The arguments to pass to `Primer::BaseComponent`.
+  class ConditionalWrapper < Primer::Component
+    def initialize(condition:, **base_component_arguments)
+      @condition = condition
+      @base_component_arguments = base_component_arguments
+    end
+
+    def call
+      return content unless @condition
+
+      BaseComponent.new(**@base_component_arguments).render_in(self) { content }
+    end
+  end
+end

data/app/components/primer/content.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Primer
+  # Use `Content` as a helper to render content passed to a slot without adding any tags.
+  class Content < Primer::Component
+    status :stable
+
+    def call
+      content
+    end
+  end
+end

data/app/components/primer/focus_group.d.ts

@@ -0,0 +1,19 @@
+import '@oddbird/popover-polyfill';
+export default class FocusGroupElement extends HTMLElement {
+    #private;
+    get nowrap(): boolean;
+    set nowrap(value: boolean);
+    get direction(): 'horizontal' | 'vertical' | 'both';
+    set direction(value: 'horizontal' | 'vertical' | 'both');
+    get retain(): boolean;
+    set retain(value: boolean);
+    get mnemonics(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+}
+declare global {
+    interface Window {
+        FocusGroupElement: typeof FocusGroupElement;
+    }
+}

data/app/components/primer/focus_group.js

@@ -0,0 +1,139 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
+import '@oddbird/popover-polyfill';
+const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
+const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
+const printable = /^\S$/;
+export default class FocusGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _FocusGroupElement_instances.add(this);
+        _FocusGroupElement_abortController.set(this, null);
+    }
+    get nowrap() {
+        return this.hasAttribute('nowrap');
+    }
+    set nowrap(value) {
+        this.toggleAttribute('nowrap', value);
+    }
+    get direction() {
+        if (this.getAttribute('direction') === 'horizontal')
+            return 'horizontal';
+        return 'vertical';
+    }
+    set direction(value) {
+        this.setAttribute('direction', `${value}`);
+    }
+    get retain() {
+        return this.hasAttribute('retain');
+    }
+    set retain(value) {
+        this.toggleAttribute('retain', value);
+    }
+    get mnemonics() {
+        return this.hasAttribute('mnemonics');
+    }
+    connectedCallback() {
+        __classPrivateFieldSet(this, _FocusGroupElement_abortController, new AbortController(), "f");
+        const { signal } = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f");
+        this.addEventListener('keydown', this, { signal });
+        this.addEventListener('click', this, { signal });
+        this.addEventListener('mouseover', this, { signal });
+        this.addEventListener('focusin', this, { signal });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    handleEvent(event) {
+        const { direction, nowrap } = this;
+        if (event.type === 'focusin') {
+            if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+                for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
+                    item.setAttribute('tabindex', item === event.target ? '0' : '-1');
+                }
+            }
+        }
+        else if (event instanceof KeyboardEvent) {
+            const items = Array.from(__classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get));
+            let index = items.indexOf(event.target);
+            const key = event.key;
+            if (key === 'Up' || key === 'ArrowUp') {
+                if (direction === 'vertical' || direction === 'both') {
+                    index -= index < 0 ? 0 : 1;
+                    event.preventDefault();
+                }
+            }
+            else if (key === 'Down' || key === 'ArrowDown') {
+                if (direction === 'vertical' || direction === 'both') {
+                    index += 1;
+                    event.preventDefault();
+                }
+            }
+            else if (event.key === 'Left' || event.key === 'ArrowLeft') {
+                if (direction === 'horizontal' || direction === 'both') {
+                    index -= 1;
+                    event.preventDefault();
+                }
+            }
+            else if (event.key === 'Right' || event.key === 'ArrowRight') {
+                if (direction === 'horizontal' || direction === 'both') {
+                    index += 1;
+                    event.preventDefault();
+                }
+            }
+            else if (event.key === 'Home' || event.key === 'PageUp') {
+                index = 0;
+                event.preventDefault();
+            }
+            else if (event.key === 'End' || event.key === 'PageDown') {
+                index = items.length - 1;
+                event.preventDefault();
+            }
+            else if (this.mnemonics && printable.test(key)) {
+                const mnemonic = key.toLowerCase();
+                const offset = index > 0 && getMnemonicFor(event.target) === mnemonic ? index : 0;
+                index = items.findIndex((item, i) => i > offset && getMnemonicFor(item) === mnemonic);
+                if (index < 0 && !nowrap) {
+                    index = items.findIndex(item => getMnemonicFor(item) === mnemonic);
+                }
+            }
+            else {
+                return;
+            }
+            if (nowrap && index < 0)
+                index = 0;
+            if (!nowrap && index >= items.length)
+                index = 0;
+            const focusEl = items.at(Math.min(index, items.length - 1));
+            {
+                let el = focusEl;
+                do {
+                    el = el.closest(`[popover]:not(:popover-open)`);
+                    if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
+                        el.showPopover();
+                    }
+                    el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
+                } while (el);
+            }
+            focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
+        }
+    }
+}
+_FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
+    return this.querySelectorAll(menuItemSelector);
+};
+if (!customElements.get('focus-group')) {
+    window.FocusGroupElement = FocusGroupElement;
+    customElements.define('focus-group', FocusGroupElement);
+}

data/app/components/primer/focus_group.ts

@@ -0,0 +1,133 @@
+import '@oddbird/popover-polyfill'
+
+const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
+
+const getMnemonicFor = (item: Element) => item.textContent?.trim()[0].toLowerCase()
+
+const printable = /^\S$/
+
+export default class FocusGroupElement extends HTMLElement {
+  get nowrap(): boolean {
+    return this.hasAttribute('nowrap')
+  }
+
+  set nowrap(value: boolean) {
+    this.toggleAttribute('nowrap', value)
+  }
+
+  get direction(): 'horizontal' | 'vertical' | 'both' {
+    if (this.getAttribute('direction') === 'horizontal') return 'horizontal'
+    return 'vertical'
+  }
+
+  set direction(value: 'horizontal' | 'vertical' | 'both') {
+    this.setAttribute('direction', `${value}`)
+  }
+
+  get retain() {
+    return this.hasAttribute('retain')
+  }
+
+  set retain(value: boolean) {
+    this.toggleAttribute('retain', value)
+  }
+
+  get mnemonics() {
+    return this.hasAttribute('mnemonics')
+  }
+
+  #abortController: AbortController | null = null
+  connectedCallback() {
+    this.#abortController = new AbortController()
+    const {signal} = this.#abortController
+
+    this.addEventListener('keydown', this, {signal})
+    this.addEventListener('click', this, {signal})
+    this.addEventListener('mouseover', this, {signal})
+    this.addEventListener('focusin', this, {signal})
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort()
+  }
+
+  get #items() {
+    return this.querySelectorAll(menuItemSelector)
+  }
+
+  handleEvent(event: Event) {
+    const {direction, nowrap} = this
+    if (event.type === 'focusin') {
+      if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+        for (const item of this.#items) {
+          item.setAttribute('tabindex', item === event.target ? '0' : '-1')
+        }
+      }
+    } else if (event instanceof KeyboardEvent) {
+      const items = Array.from(this.#items)
+      let index = items.indexOf(event.target as Element)
+      const key = event.key
+      if (key === 'Up' || key === 'ArrowUp') {
+        if (direction === 'vertical' || direction === 'both') {
+          index -= index < 0 ? 0 : 1
+          event.preventDefault()
+        }
+      } else if (key === 'Down' || key === 'ArrowDown') {
+        if (direction === 'vertical' || direction === 'both') {
+          index += 1
+          event.preventDefault()
+        }
+      } else if (event.key === 'Left' || event.key === 'ArrowLeft') {
+        if (direction === 'horizontal' || direction === 'both') {
+          index -= 1
+          event.preventDefault()
+        }
+      } else if (event.key === 'Right' || event.key === 'ArrowRight') {
+        if (direction === 'horizontal' || direction === 'both') {
+          index += 1
+          event.preventDefault()
+        }
+      } else if (event.key === 'Home' || event.key === 'PageUp') {
+        index = 0
+        event.preventDefault()
+      } else if (event.key === 'End' || event.key === 'PageDown') {
+        index = items.length - 1
+        event.preventDefault()
+      } else if (this.mnemonics && printable.test(key)) {
+        const mnemonic = key.toLowerCase()
+        const offset = index > 0 && getMnemonicFor(event.target as Element) === mnemonic ? index : 0
+        index = items.findIndex((item, i) => i > offset && getMnemonicFor(item) === mnemonic)
+        if (index < 0 && !nowrap) {
+          index = items.findIndex(item => getMnemonicFor(item) === mnemonic)
+        }
+      } else {
+        return
+      }
+      if (nowrap && index < 0) index = 0
+      if (!nowrap && index >= items.length) index = 0
+      const focusEl = items.at(Math.min(index, items.length - 1)) as HTMLElement
+      {
+        let el: HTMLElement | null = focusEl
+        do {
+          el = el.closest(`[popover]:not(:popover-open)`)
+          if (el?.popover === 'auto') {
+            el.showPopover()
+          }
+          el = el?.parentElement || null
+        } while (el)
+      }
+      focusEl?.focus()
+    }
+  }
+}
+
+if (!customElements.get('focus-group')) {
+  window.FocusGroupElement = FocusGroupElement
+  customElements.define('focus-group', FocusGroupElement)
+}
+
+declare global {
+  interface Window {
+    FocusGroupElement: typeof FocusGroupElement
+  }
+}

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

@@ -0,0 +1,12 @@
+<% if render_tooltip? %>
+  <%= render Primer::BaseComponent.new(tag: :div, position: :relative, display: :inline_block) do %>
+    <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+      <%= render Primer::Beta::Octicon.new(icon: @icon) %>
+    <% end -%>
+    <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
+  <% end %>
+<% else %>
+  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= render Primer::Beta::Octicon.new(icon: @icon) %>
+  <% end -%>
+<% end %>

data/app/components/primer/icon_button.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module Primer
+  # 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 < Primer::Component
+    status :deprecated
+
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
+      :danger => "btn-octicon-danger"
+    }.freeze
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+    # @example Default
+    #
+    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
+    #
+    # @example Schemes
+    #
+    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %>
+    #   <%= render(Primer::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
+    #
+    # @example In a BorderBox
+    #
+    #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
+    #     <% component.with_body do %>
+    #       <%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %>
+    #       <%= render(Primer::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(Primer::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
+    #
+    # @example Custom tooltip direction
+    #
+    #   <%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
+    #
+    # @param scheme [Symbol] <%= one_of(Primer::IconButton::SCHEME_OPTIONS) %>
+    # @param icon [String] Name of <%= link_to_octicons %> to use.
+    # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Primer::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] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
+    # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::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: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, **system_arguments)
+      @icon = icon
+
+      @system_arguments = system_arguments
+
+      @system_arguments[:id] ||= self.class.generate_id
+
+      @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/primer/layout_component.html.erb

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