openproject-primer_view_components 0.83.1 → 0.84.0

data/app/components/primer/open_project/pagination.css

@@ -0,0 +1 @@
+.Page{align-items:center;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default);cursor:pointer;display:inline-flex;height:var(--base-size-32);justify-content:center;margin-right:var(--base-size-4);min-width:var(--base-size-32);padding:var(--base-size-8) var(--base-size-6);transition:background-color .2s cubic-bezier(.3,0,.5,1);vertical-align:middle;white-space:nowrap}.Page[rel=next]>svg,.Page[rel=prev]>svg{height:var(--base-size-16);width:var(--base-size-16)}.Page[rel=prev]>svg{margin-inline-end:var(--base-size-4)}.Page[rel=next]>svg{margin-inline-start:var(--base-size-4)}.Page:last-child{margin-right:0}.Page:focus,.Page:hover{background-color:var(--control-transparent-bgColor-hover);outline:0;-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.Page:focus-visible{outline:2px solid var(--bgColor-accent-emphasis)}.Page:active{border-color:var(--borderColor-muted)}.Page[rel=next],.Page[rel=prev]{color:var(--fgColor-accent)}.Page[aria-current],.Page[aria-current]:hover{background-color:var(--bgColor-accent-emphasis);border-color:#0000;color:var(--fgColor-onEmphasis)}.Page[aria-current]:focus-visible{box-shadow:inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);outline:2px solid var(--bgColor-accent-emphasis)}.Page[aria-hidden],.Page[aria-hidden]:hover,.Page[role=presentation],.Page[role=presentation]:hover{background-color:initial;color:var(--fgColor-disabled);cursor:default}.PaginationContainer{margin:var(--base-size-16) 0;text-align:center}@media (max-width:543.98px){.Page:not([rel=prev]):not([rel=next]){display:none}}

data/app/components/primer/open_project/pagination.css.json

@@ -0,0 +1,24 @@
+{
+  "name": "open_project/pagination",
+  "selectors": [
+    ".Page",
+    ".Page[rel=next]>svg",
+    ".Page[rel=prev]>svg",
+    ".Page:last-child",
+    ".Page:focus",
+    ".Page:hover",
+    ".Page:focus-visible",
+    ".Page:active",
+    ".Page[rel=next]",
+    ".Page[rel=prev]",
+    ".Page[aria-current]",
+    ".Page[aria-current]:hover",
+    ".Page[aria-current]:focus-visible",
+    ".Page[aria-hidden]",
+    ".Page[aria-hidden]:hover",
+    ".Page[role=presentation]",
+    ".Page[role=presentation]:hover",
+    ".PaginationContainer",
+    ".Page:not([rel=prev]):not([rel=next])"
+  ]
+}

data/app/components/primer/open_project/pagination.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["pagination.pcss"],"names":[],"mappings":"AAAA,MAYE,kBAAmB,CAHnB,gDAAiD,CAJjD,4BAA6B,CAG7B,cAAe,CAGf,mBAAoB,CATpB,0BAA2B,CAW3B,sBAAuB,CATvB,+BAAgC,CAHhC,6BAA8B,CAE9B,6CAA8C,CAO9C,uDAA8D,CAH9D,qBAAsB,CADtB,kBAQF,CAEA,wCAEE,0BAA2B,CAC3B,yBACF,CAEA,oBACE,oCACF,CAEA,oBACE,sCACF,CAEA,iBACE,cACF,CAEA,wBAGE,yDAA0D,CAC1D,SAAU,CAFV,4BAAqB,CAArB,oBAAqB,CAGrB,uBACF,CAEA,oBACE,gDACF,CAEA,aACE,qCACF,CAEA,gCAEE,2BACF,CAEA,8CAGE,+CAAgD,CAChD,kBAAyB,CAFzB,+BAGF,CAEA,kCAEE,mEAAoE,CADpE,gDAEF,CAEA,oGAME,wBAA6B,CAF7B,6BAA8B,CAC9B,cAEF,CAEA,qBACE,4BAA6B,CAC7B,iBACF,CAEA,4BACE,sCACE,YACF,CACF","file":"pagination.css","sourcesContent":[".Page {\n  min-width: var(--base-size-32);\n  height: var(--base-size-32);\n  padding: var(--base-size-8) var(--base-size-6);\n  margin-right: var(--base-size-4);\n  color: var(--fgColor-default);\n  white-space: nowrap;\n  vertical-align: middle;\n  cursor: pointer;\n  border-radius: var(--borderRadius-medium,.375rem);\n  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.Page[rel='prev'] > svg,\n.Page[rel='next'] > svg {\n  height: var(--base-size-16);\n  width: var(--base-size-16);\n}\n\n.Page[rel='prev'] > svg {\n  margin-inline-end: var(--base-size-4);\n}\n\n.Page[rel='next'] > svg {\n  margin-inline-start: var(--base-size-4);\n}\n\n.Page:last-child {\n  margin-right: 0;\n}\n\n.Page:hover,\n.Page:focus {\n  text-decoration: none;\n  background-color: var(--control-transparent-bgColor-hover);\n  outline: 0;\n  transition-duration: 0.1s;\n}\n\n.Page:focus-visible {\n  outline: 2px solid var(--bgColor-accent-emphasis);\n}\n\n.Page:active {\n  border-color: var(--borderColor-muted);\n}\n\n.Page[rel='prev'],\n.Page[rel='next'] {\n  color: var(--fgColor-accent);\n}\n\n.Page[aria-current],\n.Page[aria-current]:hover {\n  color: var(--fgColor-onEmphasis);\n  background-color: var(--bgColor-accent-emphasis);\n  border-color: transparent;\n}\n\n.Page[aria-current]:focus-visible {\n  outline: 2px solid var(--bgColor-accent-emphasis);\n  box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);\n}\n\n.Page[aria-hidden],\n.Page[aria-hidden]:hover,\n.Page[role='presentation'],\n.Page[role='presentation']:hover {\n  color: var(--fgColor-disabled);\n  cursor: default;\n  background-color: transparent;\n}\n\n.PaginationContainer {\n  margin: var(--base-size-16) 0;\n  text-align: center;\n}\n\n@media (max-width: 543.98px){\n  .Page:not([rel='prev']):not([rel='next']) {\n    display: none;\n  }\n}\n"]}

data/app/components/primer/open_project/pagination.html.erb

@@ -0,0 +1,15 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <% pages.each do |page| %>
+    <%= content_tag(page.props[:href].present? ? :a : :span, **page.props) do %>
+      <% if page.key == PAGE_TYPE__PREV %>
+        <%= render(Primer::Beta::Octicon.new(icon: "chevron-left", "aria-hidden": true)) %>
+      <% end %>
+
+      <%= page.content %>
+
+      <% if page.key == PAGE_TYPE__NEXT %>
+        <%= render(Primer::Beta::Octicon.new(icon: "chevron-right", "aria-hidden": true)) %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/pagination.pcss

@@ -0,0 +1,86 @@
+.Page {
+  min-width: var(--base-size-32);
+  height: var(--base-size-32);
+  padding: var(--base-size-8) var(--base-size-6);
+  margin-right: var(--base-size-4);
+  color: var(--fgColor-default);
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border-radius: var(--borderRadius-medium,.375rem);
+  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Page[rel='prev'] > svg,
+.Page[rel='next'] > svg {
+  height: var(--base-size-16);
+  width: var(--base-size-16);
+}
+
+.Page[rel='prev'] > svg {
+  margin-inline-end: var(--base-size-4);
+}
+
+.Page[rel='next'] > svg {
+  margin-inline-start: var(--base-size-4);
+}
+
+.Page:last-child {
+  margin-right: 0;
+}
+
+.Page:hover,
+.Page:focus {
+  text-decoration: none;
+  background-color: var(--control-transparent-bgColor-hover);
+  outline: 0;
+  transition-duration: 0.1s;
+}
+
+.Page:focus-visible {
+  outline: 2px solid var(--bgColor-accent-emphasis);
+}
+
+.Page:active {
+  border-color: var(--borderColor-muted);
+}
+
+.Page[rel='prev'],
+.Page[rel='next'] {
+  color: var(--fgColor-accent);
+}
+
+.Page[aria-current],
+.Page[aria-current]:hover {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-accent-emphasis);
+  border-color: transparent;
+}
+
+.Page[aria-current]:focus-visible {
+  outline: 2px solid var(--bgColor-accent-emphasis);
+  box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);
+}
+
+.Page[aria-hidden],
+.Page[aria-hidden]:hover,
+.Page[role='presentation'],
+.Page[role='presentation']:hover {
+  color: var(--fgColor-disabled);
+  cursor: default;
+  background-color: transparent;
+}
+
+.PaginationContainer {
+  margin: var(--base-size-16) 0;
+  text-align: center;
+}
+
+@media (max-width: 543.98px){
+  .Page:not([rel='prev']):not([rel='next']) {
+    display: none;
+  }
+}

data/app/components/primer/open_project/pagination.rb

@@ -0,0 +1,277 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class Pagination < Primer::Component
+      status :open_project
+
+      PageData = Struct.new(:key, :content, :props, keyword_init: true)
+
+      DEFAULT_MARGIN_PAGE_COUNT = 1
+      DEFAULT_SURROUNDING_PAGE_COUNT = 2
+
+      PAGE_TYPE__BREAK = :break
+      PAGE_TYPE__PREV = :prev
+      PAGE_TYPE__NEXT = :next
+      PAGE_TYPE__NUM = :num
+
+      attr_reader :page_count,
+                  :current_page,
+                  :href_builder,
+                  :margin_page_count,
+                  :show_pages,
+                  :surrounding_page_count
+
+      def initialize(
+        page_count:,
+        current_page:,
+        href_builder: nil,
+        margin_page_count: DEFAULT_MARGIN_PAGE_COUNT,
+        show_pages: true,
+        surrounding_page_count: DEFAULT_SURROUNDING_PAGE_COUNT,
+        **system_arguments
+      )
+        @page_count = cast_integer!(page_count, "page_count")
+        @current_page = cast_integer!(current_page, "current_page")
+        @href_builder = href_builder || method(:default_href_builder)
+        @margin_page_count = cast_integer!(margin_page_count, "margin_page_count")
+        @show_pages = show_pages
+        @surrounding_page_count = cast_integer!(surrounding_page_count, "surrounding_page_count")
+        @system_arguments = system_arguments
+
+        @system_arguments[:tag] = :nav
+        @system_arguments[:classes] = class_names(
+          "PaginationContainer",
+          @system_arguments[:classes]
+        )
+        @system_arguments["aria-label"] = I18n.t("pagination.label")
+
+        validate_arguments!
+      end
+
+      def pages
+        build_pagination_model.map do |page|
+          build_component_data(page)
+        end
+      end
+
+      private
+
+      def cast_integer!(value, name)
+        Integer(value)
+      rescue ArgumentError, TypeError
+        raise ArgumentError, "#{name} must be a number"
+      end
+
+      def validate_arguments!
+        raise ArgumentError, "page_count must be >= 0" if page_count < 0
+        raise ArgumentError, "current_page must be >= 1" if current_page < 1
+        raise ArgumentError, "margin_page_count must be >= 0" if margin_page_count < 0
+        raise ArgumentError, "surrounding_page_count must be >= 0" if surrounding_page_count < 0
+        raise ArgumentError, "href_builder must respond to #call" unless href_builder.respond_to?(:call)
+        raise ArgumentError, "show_pages must be a boolean" unless [true, false].include?(show_pages)
+        raise ArgumentError, "current_page can't be larger than page_count" if current_page > page_count
+      end
+
+      def default_href_builder(page_num)
+        "##{page_num}"
+      end
+
+      def build_pagination_model
+        prev_page = previous_page_item
+        next_page = next_page_item
+
+        return [prev_page, next_page] unless show_pages || page_count <= 0
+
+        pages = if all_pages_fit?
+                  full_pagination_without_breaks
+                else
+                  paginated_number_items
+                end
+
+        [prev_page, *pages, next_page]
+      end
+
+      def previous_page_item
+        {
+          type: PAGE_TYPE__PREV,
+          num: current_page - 1,
+          disabled: current_page == 1
+        }
+      end
+
+      def next_page_item
+        {
+          type: PAGE_TYPE__NEXT,
+          num: current_page + 1,
+          disabled: current_page == page_count
+        }
+      end
+
+      def full_pagination_without_breaks
+        pages = []
+        add_pages(pages, 1, page_count)
+        pages
+      end
+
+      def paginated_number_items
+        pages = []
+
+        add_start_pages_and_ellipsis(pages)
+        add_middle_pages(pages)
+        add_end_pages_and_ellipsis(pages)
+
+        pages
+      end
+
+      def add_start_pages_and_ellipsis(pages)
+        add_pages(pages, 1, margin_page_count, has_start_ellipsis?)
+        add_ellipsis(pages, margin_page_count) if has_start_ellipsis?
+      end
+
+      def add_middle_pages(pages)
+        add_pages(
+          pages,
+          middle_start_page,
+          middle_end_page,
+          has_end_ellipsis?
+        )
+      end
+
+      def add_end_pages_and_ellipsis(pages)
+        add_ellipsis(pages, middle_end_page) if has_end_ellipsis?
+        add_pages(pages, ending_start_page, page_count)
+      end
+
+      def all_pages_fit?
+        page_count <= max_visible_pages
+      end
+
+      def max_visible_pages
+        # The standard gap on the left and the right +
+        # current page + 2 boundary pages (one on each side before an ellipsis would appear)
+        (standard_gap * 2) + 3
+      end
+
+      def standard_gap
+        surrounding_page_count + margin_page_count
+      end
+
+      def has_start_ellipsis?
+        start_gap.positive?
+      end
+
+      def has_end_ellipsis?
+        end_gap.positive?
+      end
+
+      def start_gap
+        @start_gap ||= near_start? ? 0 : current_page - standard_gap - 1
+      end
+
+      def start_offset
+        @start_offset ||= near_start? ? current_page - standard_gap - 2 : 0
+      end
+
+      def end_gap
+        @end_gap ||= near_end? ? 0 : page_count - current_page - standard_gap
+      end
+
+      def end_offset
+        @end_offset ||= near_end? ? page_count - current_page - standard_gap - 1 : 0
+      end
+
+      def near_start?
+        current_page - standard_gap - 1 <= 1
+      end
+
+      def near_end?
+        page_count - current_page - standard_gap <= 1
+      end
+
+      def middle_start_page
+        margin_page_count + start_gap + end_offset + 1
+      end
+
+      def middle_end_page
+        page_count - start_offset - end_gap - margin_page_count
+      end
+
+      def ending_start_page
+        page_count - margin_page_count + 1
+      end
+
+      def add_ellipsis(pages, previous_page)
+        pages << {
+          type: PAGE_TYPE__BREAK,
+          num: previous_page + 1
+        }
+      end
+
+      def add_pages(pages, start_page, end_page, precedes_break = false)
+        (start_page..end_page).each do |i|
+          pages << {
+            type: PAGE_TYPE__NUM,
+            num: i,
+            selected: i == current_page,
+            precedes_break: i == end_page && precedes_break
+          }
+        end
+      end
+
+      def build_component_data(page)
+        props = {}
+        content = ""
+        key = ""
+
+        case page[:type]
+        when PAGE_TYPE__PREV, PAGE_TYPE__NEXT
+          key = page[:type]
+          key_string = key.to_s
+          content = I18n.t("pagination.#{key_string}")
+
+          if page[:disabled]
+            props.merge!(
+              rel: key_string,
+              "aria-hidden": "true",
+              "aria-disabled": "true"
+            )
+          else
+            props.merge!(
+              rel: key_string,
+              href: href_builder.call(page[:num]),
+              "aria-label": I18n.t("pagination.#{key_string}_page")
+            )
+          end
+
+        when PAGE_TYPE__NUM
+          key = :"page-#{page[:num]}"
+          content = page[:num].to_s
+
+          props.merge!(
+            href: href_builder.call(page[:num]),
+            "aria-label": page[:precedes_break] ? I18n.t("pagination.page_with_more", number: page[:num]) : I18n.t("pagination.page", number: page[:num])
+          )
+
+          props[:"aria-current"] = "page" if page[:selected]
+
+        when PAGE_TYPE__BREAK
+          key = :"page-#{page[:num]}-break"
+          content = "…"
+
+          props.merge!(
+            role: "presentation"
+          )
+        end
+
+        props[:class] = class_names("Page", props[:class])
+
+        PageData.new(
+          key: key,
+          content: content,
+          props: props
+        )
+      end
+    end
+  end
+end

data/app/components/primer/primer.pcss

@@ -55,3 +55,4 @@
 @import "./open_project/side_panel/section.pcss";
 @import "./open_project/border_box/collapsible_header.pcss";
 @import "./open_project/collapsible_section.pcss";
+@import "./open_project/pagination.pcss";

data/config/locales/en.yml

@@ -30,3 +30,11 @@ en:
   danger_dialog:
     confirmation_live_message_checked: "The button to proceed is now active."
     confirmation_live_message_unchecked: "The button to proceed is now inactive. You need to tick the checkbox to continue."
+  pagination:
+    label: "Pagination"
+    prev: "Previous"
+    prev_page: "Previous Page"
+    next: "Next"
+    next_page: "Next Page"
+    page: "Page %{number}"
+    page_with_more: "Page %{number}..."

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 83
-      PATCH = 1
+      MINOR = 84
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/open_project/pagination_preview/default.html.erb

@@ -0,0 +1,7 @@
+<%= render(
+      Primer::OpenProject::Pagination.new(
+        current_page: 6,
+        page_count: 20,
+        href_builder: ->(page) { "#page-#{page}" }
+      )
+    ) %>

data/previews/primer/open_project/pagination_preview/playground.html.erb

@@ -0,0 +1,10 @@
+<%= render(
+      Primer::OpenProject::Pagination.new(
+        current_page: current_page,
+        page_count: page_count,
+        margin_page_count: margin_page_count,
+        surrounding_page_count: surrounding_page_count,
+        show_pages: show_pages,
+        href_builder: ->(page) { "#page-#{page}" }
+      )
+    ) %>

data/previews/primer/open_project/pagination_preview.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label Pagination
+    class PaginationPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param current_page number
+      # @param page_count number
+      # @param margin_page_count number
+      # @param surrounding_page_count number
+      # @param show_pages toggle
+      def playground(
+        current_page: 6,
+        page_count: 20,
+        margin_page_count: 1,
+        surrounding_page_count: 2,
+        show_pages: true
+      )
+        current_page = (current_page.presence || 6).to_i
+        page_count = (page_count.presence || 20).to_i
+        margin_page_count = (margin_page_count.presence || 1).to_i
+        surrounding_page_count = (surrounding_page_count.presence || 2).to_i
+
+        render(
+          Primer::OpenProject::Pagination.new(
+            current_page: current_page,
+            page_count: page_count,
+            margin_page_count: margin_page_count,
+            surrounding_page_count: surrounding_page_count,
+            show_pages: show_pages,
+            href_builder: ->(page) { "#page-#{page}" }
+          )
+        )
+      end
+
+      # @snapshot
+      # @label Default
+      def default
+        render(
+          Primer::OpenProject::Pagination.new(
+            current_page: 6,
+            page_count: 20,
+            href_builder: ->(page) { "#page-#{page}" }
+          )
+        )
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/static/arguments.json

@@ -6462,6 +6462,15 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::Pagination",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectPagination",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/pagination.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/pagination/default/",
+    "parameters": []
+  },
   {
     "component": "OpenProject::SidePanel",
     "status": "open_project",

data/static/audited_at.json

@@ -165,6 +165,7 @@
   "Primer::OpenProject::PageHeader::Dialog": "",
   "Primer::OpenProject::PageHeader::Menu": "",
   "Primer::OpenProject::PageHeader::Title": "",
+  "Primer::OpenProject::Pagination": "",
   "Primer::OpenProject::SidePanel": "",
   "Primer::OpenProject::SidePanel::Section": "",
   "Primer::OpenProject::SubHeader": "",

data/static/classes.json

@@ -497,6 +497,9 @@
   "Overlay-headerFilter": [
     "Primer::Alpha::Dialog"
   ],
+  "Page": [
+    "Primer::OpenProject::Pagination"
+  ],
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],
@@ -539,6 +542,9 @@
   "PageHeader-titleBar": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PaginationContainer": [
+    "Primer::OpenProject::Pagination"
+  ],
   "Popover": [
     "Primer::Beta::Popover"
   ],

data/static/constants.json

@@ -1939,6 +1939,16 @@
       "h6"
     ]
   },
+  "Primer::OpenProject::Pagination": {
+    "DEFAULT_MARGIN_PAGE_COUNT": 1,
+    "DEFAULT_SURROUNDING_PAGE_COUNT": 2,
+    "GeneratedSlotMethods": "Primer::OpenProject::Pagination::GeneratedSlotMethods",
+    "PAGE_TYPE__BREAK": "break",
+    "PAGE_TYPE__NEXT": "next",
+    "PAGE_TYPE__NUM": "num",
+    "PAGE_TYPE__PREV": "prev",
+    "PageData": "Primer::OpenProject::Pagination::PageData"
+  },
   "Primer::OpenProject::SidePanel": {
     "GeneratedSlotMethods": "Primer::OpenProject::SidePanel::GeneratedSlotMethods",
     "Section": "Primer::OpenProject::SidePanel::Section"

data/static/info_arch.json

@@ -21440,6 +21440,89 @@
     "previews": [],
     "subcomponents": []
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::Pagination",
+    "description": "",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::Pagination",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectPagination",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/pagination.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/pagination/default/",
+    "parameters": [],
+    "slots": [],
+    "methods": [
+      {
+        "name": "page_count",
+        "description": "Returns the value of attribute page_count.",
+        "parameters": [],
+        "return_types": []
+      },
+      {
+        "name": "current_page",
+        "description": "Returns the value of attribute current_page.",
+        "parameters": [],
+        "return_types": []
+      },
+      {
+        "name": "href_builder",
+        "description": "Returns the value of attribute href_builder.",
+        "parameters": [],
+        "return_types": []
+      },
+      {
+        "name": "margin_page_count",
+        "description": "Returns the value of attribute margin_page_count.",
+        "parameters": [],
+        "return_types": []
+      },
+      {
+        "name": "show_pages",
+        "description": "Returns the value of attribute show_pages.",
+        "parameters": [],
+        "return_types": []
+      },
+      {
+        "name": "surrounding_page_count",
+        "description": "Returns the value of attribute surrounding_page_count.",
+        "parameters": [],
+        "return_types": []
+      }
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/pagination/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/pagination/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": []
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::SidePanel",
     "description": "Add a general description of component here\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.",