spina-conferences-primer_theme 0.1.17 → 0.2.0

data/app/views/spina/application/_footer_content.html.haml

@@ -1,6 +1,6 @@
 = render Primer::DetailsComponent.new(overlay: :dark, reset: true, mb: [2, 0, nil, nil], mr: [nil, 2, nil, nil]) do |component|
-  = component.summary(button: true, button_type: :outline, variant: :small, aria: { haspopup: 'dialog' }) do
-    = render Primer::OcticonComponent.new(icon: 'info')
+  = component.summary(button_type: :outline, variant: :small, aria: { haspopup: 'dialog' }) do
+    = render Primer::OcticonComponent.new('info')
     = t :'.cookies'
   = component.body(tag: :'details-dialog') do
     %include-fragment{ src: frontend_cookies_info_path, loading: :lazy }
@@ -8,6 +8,6 @@
         = box_component.body do
           = button_tag(data: { 'close-dialog': true }, aria: { label: t(:'spina.close') }, type: 'button',
                        class: %w[Box-btn-octicon btn-octicon m-0 position-absolute right-0 top-0]) do
-            = render Primer::OcticonComponent.new(icon: 'x')
+            = render Primer::OcticonComponent.new('x')
           = render Primer::BlankslateComponent.new(title: t('.loading')) do |blankslate_component|
             = blankslate_component.spinner(size: :large)

data/app/views/spina/application/_list_item.html.haml

@@ -1 +1 @@
-%li.list-style-none.py-4.border-bottom{ id: local_assigns[:list_item_id]&.call(local_assigns) }= yield
+%li.list-style-none.py-4.border-bottom= yield

data/app/views/spina/application/_logo.html.haml

@@ -1 +1 @@
-= render Primer::OcticonComponent.new(icon: 'home', mr: 2, height: 24)
+= render Primer::OcticonComponent.new('home', mr: 2, height: 24)

data/app/views/spina/application/_navigation.html.haml

@@ -1,11 +1,10 @@
-.Header.bg-blue.px-3.px-md-4.px-lg-5
+.Header.px-3.px-md-4.px-lg-5.flex-wrap.flex-lg-nowrap
   .Header-item.mt-n1.mb-n1= link_to render('logo'), root_path, class: 'Header-link'
-  .Header-item.Header-item--full.d-flex.d-lg-none{ aria: { hidden: true } }
-    %details.details-reset
-      %summary.btn-link.Header-link= octicon 'three-bars', height: 24
-      .px-3.px-md-4.px-lg-5.bg-blue.Popover.left-0.right-0.mt-3
-        = render partial: 'mobile_navigation_item', collection: main_navigation_items, cached: true
-        = link_to 'Conferences', frontend_conferences_url, class: %w[d-block py-2 border-top border-white-fade text-white]
-  = render partial: 'navigation_item', collection: main_navigation_items, cached: true
-  .Header-item.d-none.d-lg-flex
-    = link_to Spina::Admin::Conferences::Conference.model_name.human(count: 0), frontend_conferences_path, class: 'Header-link'
+  %details.details-reset.d-lg-none{ style: 'display: contents' }
+    %summary.Header-item
+      %button.Header-link.btn-link{ type: 'button' }
+        = render Primer::OcticonComponent.new('three-bars', height: 24)
+    .Header-item.Header-item--full.flex-column.width-full.flex-order-1.mr-0.mt-3
+      = render partial: 'navigation_items'
+  .Header-item.Header-item--full.flex-row.width-full.d-none.d-lg-flex
+    = render partial: 'navigation_items'

data/app/views/spina/application/_navigation_item.html.haml

@@ -1,12 +1,11 @@
 - if navigation_item.has_children?
-  .Header-item.d-none.d-lg-flex
-    %details.dropdown.details-reset.details-overlay
-      %summary.Header-link
-        = navigation_item.menu_title
-        %span.dropdown-caret
-      %details-menu.dropdown-menu.dropdown-menu-se.mt-3{ role: 'menu' }
-        - navigation_item.children.in_menu.sorted.each do |child|
-          %li= link_to child.menu_title, child.materialized_path, class: 'dropdown-item'
+  %details.details-reset
+    %summary.btn-link.d-block.py-2.border-top.border-white-fade.text-white
+      = navigation_item.menu_title
+      = render Primer::OcticonComponent.new('chevron-down')
+    %ul.list-style-none
+      - navigation_item.children.each do |child|
+        %li= link_to child.menu_title, child.materialized_path, class: %w[d-block py-2 pl-3 border-top border-white-fade text-white]
 - elsif navigation_item.is_root?
-  .Header-item.d-none.d-lg-flex
-    = link_to navigation_item.menu_title, navigation_item.materialized_path, class: 'Header-link'
+  = link_to navigation_item.menu_title, navigation_item.materialized_path,
+            class: %w[Header-link mt-lg-n3 mb-lg-n3 py-2 py-lg-3 mr-0 mr-lg-3 border-top border-lg-top-0 border-white-fade-15]

data/app/views/spina/application/_navigation_items.html.haml

@@ -0,0 +1,3 @@
+%nav.d-flex.flex-column.flex-lg-row.flex-self-stretch.flex-lg-self-auto
+  = render partial: 'navigation_item', collection: main_navigation_items, cached: true
+  = link_to 'Conferences', frontend_conferences_url, class: %w[Header-link mt-lg-n3 mb-lg-n3 py-2 py-lg-3 mr-0 mr-lg-3 border-top border-lg-top-0 border-white-fade-15]

data/app/views/spina/conferences/primer_theme/conferences/_conference.html.haml

@@ -1,15 +1,15 @@
 = render Primer::FlexComponent.new(direction: [:column, nil, :row_reverse, nil]) do
-  %ul.list-style-none.d-flex.flex-wrap.flex-md-justify-end.pl-md-2.pb-2.pb-md-0{ class: dom_class(conference.institutions) }
+  %ul.list-style-none.d-flex.flex-wrap.flex-md-justify-end.pl-md-2.pb-2.pb-md-0
     = render partial: 'institution', collection: conference.institutions, cached: -> institution { [institution, institution.logo] }
   = render Primer::FlexItemComponent.new(flex_auto: true) do
     = render(Primer::HeadingComponent.new(tag: :h3, mb: 1)) { link_to conference.name, frontend_conference_path(conference) }
-    %ul.text-gray.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
+    %ul.text-secondary.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
       %li.mr-sm-3
-        = render Primer::OcticonComponent.new(icon: 'calendar')
+        = render Primer::OcticonComponent.new('calendar')
         = t :'.dates_html', start_date: time_tag(conference.start_date, format: :date), finish_date: time_tag(conference.finish_date)
       - if conference.institutions.any?
         %li
-          = render Primer::OcticonComponent.new(icon: 'location')
+          = render Primer::OcticonComponent.new('location')
           = render Primer::BaseComponent.new(tag: :address, display: :inline) do
             = t :'.locations', institutions: conference.institutions.pluck(:name).to_sentence,
                                cities: conference.institutions.pluck(:city).uniq.to_sentence

data/app/views/spina/conferences/primer_theme/conferences/_event.html.haml

@@ -1,11 +1,11 @@
 = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil]) do
   = render Primer::FlexItemComponent.new(mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], col: [nil, nil, 4, nil]) do
     = render Primer::TextComponent.new(tag: :div, font_size: 3, font_weight: :light, mb: 1) do
-      = render Primer::OcticonComponent.new(icon: 'clock', vertical_align: :baseline)
+      = render Primer::OcticonComponent.new('clock', vertical_align: :baseline)
       = t :'.times_html', start_time: time_tag(event.start_time, format: :short), finish_time: time_tag(event.finish_time, format: :time)
-    = render Primer::TextComponent.new(tag: :div, color: :gray) do
-      = render Primer::OcticonComponent.new(icon: 'location')
+    = render Primer::TextComponent.new(tag: :div, color: :text_secondary) do
+      = render Primer::OcticonComponent.new('location')
       = render(Primer::BaseComponent.new(tag: :address, display: :inline)) { event.location }
   = render Primer::FlexItemComponent.new(flex_auto: true, col: [nil, nil, 8, nil]) do
     = render(Primer::HeadingComponent.new(tag: :h3, mb: 1)) { event.name }
-    = render(Primer::TextComponent.new(tag: :div, color: :gray)) { event.description.try(:html_safe) }
+    = render(Primer::TextComponent.new(tag: :div, color: :text_secondary)) { event.description.try(:html_safe) }

data/app/views/spina/conferences/primer_theme/conferences/_events.html.haml

@@ -8,7 +8,7 @@
             = octicon 'search', class: 'subnav-search-icon'
     %div{ id: 'event_list' }
       - if events.any?
-        %ul{ class: dom_class(events), data: { filter: { list: true } } }
+        %ul{ data: { filter: { list: true } } }
           = render partial: 'event', collection: events.sorted, layout: 'list_item', cached: true
       - else
         = render Primer::BlankslateComponent.new(title: t(:'.no_events'), icon: 'calendar')

data/app/views/spina/conferences/primer_theme/conferences/_header.html.haml

@@ -1,27 +1,46 @@
-- cache [@conference, @conference.institutions, @conference.parts.collect(&:partable), @conference.content(:gallery)&.images,
-         @conference.content(:sponsors)&.structure_items,
-         @conference.content(:sponsors)&.structure_items&.collect_concat(&:structure_parts)&.collect(&:structure_partable)] do
-  .container-lg.p-responsive.mb-4{ class: dom_class(@conference), id: dom_id(@conference) }
+- cache [@conference, @conference.institutions] do
+  .container-lg.p-responsive.mb-4
     = render(Primer::HeadingComponent.new( mb: [1, nil, 2, nil])) { @conference.name }
-    %ul.text-gray-dark.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
+    %ul.text-secondary.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
       %li.mr-sm-3.mb-1
-        = render Primer::OcticonComponent.new(icon: 'calendar')
+        = render Primer::OcticonComponent.new('calendar')
         = t :'.dates_html', start_date: time_tag(@conference.start_date, format: :date), finish_date: time_tag(@conference.finish_date)
       - if @conference.institutions.any?
         - cache @conference.institutions do
           %li.mb-1
-            = render Primer::OcticonComponent.new(icon: 'location')
+            = render Primer::OcticonComponent.new('location')
             = render Primer::BaseComponent.new(tag: :address, display: :inline) do
               = t :'.locations', institutions: @conference.institutions.pluck(:name).to_sentence,
                                  cities: @conference.institutions.pluck(:city).uniq.to_sentence
     - if @conference.institutions.any?
-      %ul.list-style-none.d-flex.flex-wrap.mt-4{ class: dom_class(@conference.institutions) }
+      %ul.list-style-none.d-flex.flex-wrap.mt-4
         = render partial: 'institution', collection: @conference.institutions,
                  cached: -> institution { [institution, institution.logo] }
-    - cache [partable_for(:sponsors, parent: @conference), @conference.content(:sponsors)&.structure_items,
-               @conference.content(:sponsors)&.structure_items&.collect_concat(&:structure_parts)&.collect(&:structure_partable)] do
-      - if @conference.has_content?(:sponsors) && @conference.content(:sponsors).structure_items.any?
-        = render partial: 'sponsors', object: @conference.content(:sponsors)
-  - cache [partable_for(:gallery, parent: @conference), @conference.content(:gallery)&.images] do
-    - if @conference.has_content? :gallery
-      .mb-4= render partial: 'image_collection', object: @conference.content(:gallery), locals: { controls: true }
+    - if @conference.content(:sponsors).present?
+      = render Primer::SubheadComponent.new(spacious: true) do |component|
+        = component.heading(tag: :h2) { t :'.sponsors.title' }
+      = render Primer::FlexComponent.new(flex_wrap: true, ml: -2, mr: -2, mt: -2, mb: -2) do
+        - repeater @conference.content(:sponsors) do |sponsor|
+          = render Primer::FlexItemComponent.new(m: 2, vertical_align: :middle) do
+            - if sponsor.content(:logo).present?
+              = link_to sponsor.content(:website) do
+                = sponsor.content.image_tag(:logo, { resize_to_limit: [200, 60] }, draggable: false,
+                                            srcset: srcset(sponsor.content(:logo), variant: { resize_to_limit: [200, 60] }))
+            - else
+              = render(Primer::LinkComponent.new(href: sponsor.content(:website) || '')) { sponsor.content(:name) }
+
+  - if @conference.content(:gallery).present?
+    .mb-4.position-relative{ data: { controller: :slideshow, slideshow: { incrementer: 0, advance: true } } }
+      - @conference.content(:gallery).each_with_index do |image, index|
+        = @conference.content.image_tag(image, { resize_to_fill: [1680, 600] }, draggable: false, data: { 'slideshow-target': 'slide' },
+                                        srcset: srcset(image, variant: { resize_to_fill: [1680, 600] }), hidden: index != 0,
+                                        class: %w[d-block mx-auto])
+      .position-absolute.top-0.left-0.right-0.bottom-0.container-lg.p-responsive
+        - if @conference.content(:gallery).many?
+          .d-none.d-sm-flex.flex-justify-between.flex-items-center.height-full
+            = render Primer::ButtonComponent.new(data: { action: :'slideshow#previous' }) do
+              = render Primer::OcticonComponent.new('arrow-left')
+              = t(:'.gallery.previous')
+            = render Primer::ButtonComponent.new(data: { action: :'slideshow#next' }) do
+              = t(:'.gallery.next')
+              = render Primer::OcticonComponent.new('arrow-right')

data/app/views/spina/conferences/primer_theme/conferences/_presentation.html.haml

@@ -1,15 +1,15 @@
 = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil]) do
   = render Primer::BaseComponent.new(tag: :div, flex_shrink: 0, mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], col: [nil, nil, 3, nil]) do
     = render Primer::TextComponent.new(tag: :div, font_size: 3, font_weight: :light, mb: 1) do
-      = render Primer::OcticonComponent.new(icon: 'clock', vertical_align: :baseline)
+      = render Primer::OcticonComponent.new('clock', vertical_align: :baseline)
       = time_tag presentation.start_datetime, format: :short
-    = render Primer::TextComponent.new(tag: :div, color: :gray) do
-      = render Primer::OcticonComponent.new(icon: 'location')
+    = render Primer::TextComponent.new(tag: :div, color: :text_secondary) do
+      = render Primer::OcticonComponent.new('location')
       = render(Primer::BaseComponent.new(tag: :address, display: :inline)) { presentation.session.room_name }
   = render Primer::BaseComponent.new(tag: :div, flex: :auto) do
     = render Primer::HeadingComponent.new(tag: :h3, mb: 1) do
       = render(Primer::LinkComponent.new(href: frontend_conference_presentation_path(conference, presentation), data: { turbo_frame: '_top' })) { presentation.title }
-    = render Primer::TextComponent.new(tag: :div, color: :gray) do
-      = render Primer::OcticonComponent.new(icon: presentation.presenters.many? ? 'people' : 'person')
+    = render Primer::TextComponent.new(tag: :div, color: :text_secondary) do
+      = render Primer::OcticonComponent.new(presentation.presenters.many? ? 'people' : 'person')
       = render Primer::BaseComponent.new(tag: :address, display: :inline) do
         = presentation.presenters.collect(&:full_name_and_institution).to_sentence

data/app/views/spina/conferences/primer_theme/conferences/_presentations.html.haml

@@ -19,9 +19,10 @@
               = octicon 'search', class: 'subnav-search-icon'
       %div{ id: 'presentation_list' }
         - if @presentations.any?
-          %ul{ class: dom_class(@presentations), data: { filter: { list: true } } }
+          %ul{ data: { filter: { list: true } } }
             = render partial: 'presentation', collection: @presentations.sorted.reverse_order, layout: 'list_item',
                      locals: { conference: @conference }, cached: -> presentation { [presentation, presentation.presenters] }
+          = paginate @presentations.sorted, views_prefix: 'spina/conferences/primer_theme'
         - else
           = render Primer::BlankslateComponent.new(title: t(:'.no_presentations'), icon: 'mortar-board')
         = render Primer::BlankslateComponent.new(title: t(:'.no_matching_presentations'), icon: 'mortar-board', hidden: true,

data/app/views/spina/conferences/primer_theme/conferences/_submission_flash.html.haml

@@ -1,14 +1,10 @@
-- cache partable_for(:submission_url, :submission_date, :submission_text, parent: @conference) do
-  = render Primer::FlashComponent.new(variant: :warning, full: true, icon: 'clock', classes: dom_class(@conference)) do |component|
-    - cache partable_for(:submission_date, parent: @conference) do
-      = render Primer::TextComponent.new(tag: :div, display: :inline) do
-        = t :'.submit_by_html', date: time_tag(@conference.content(:submission_date), format: :full)
-    - cache partable_for(:submission_text, parent: @conference) do
-      - if @conference.content(:submission_text).present?
-        = render(Primer::TextComponent.new(tag: :div, color: :gray, display: :inline)) { @conference.content(:submission_text).html_safe }
-    - cache partable_for(:submission_url, parent: @conference) do
-      - if @conference.content(:submission_url).present?
-        - component.action do
-          = render Primer::ButtonComponent.new(tag: :a, href: @conference.content(:submission_url), button_type: :primary,
-                                               variant: :small) do
-            = t :'.submit_abstract'
+= render Primer::FlashComponent.new(variant: :warning, full: true, icon: 'clock') do |component|
+  = render Primer::TextComponent.new(tag: :div, display: :inline) do
+    = t :'.submit_by_html', date: time_tag(@conference.content(:submission_date), format: :full)
+  - if @conference.content(:submission_text).present?
+    = render(Primer::TextComponent.new(tag: :div, color: :text_secondary, display: :inline)) { @conference.content.html(:submission_text) }
+  - if @conference.content(:submission_url).present?
+    - component.action do
+      = render Primer::ButtonComponent.new(tag: :a, href: @conference.content.html(:submission_url), button_type: :primary,
+                                           variant: :small) do
+        = t :'.submit_abstract'

data/app/views/spina/conferences/primer_theme/conferences/index.html.haml

@@ -5,18 +5,17 @@
         .subnav.subnav-flush
           .subnav-search.float-left.ml-0
             = search_field_tag 'search', nil, class: %w[form-control subnav-search-input], aria: { label: t(:'.search') }
-            = render Primer::OcticonComponent.new(icon: 'search', classes: 'subnav-search-icon')
+            = render Primer::OcticonComponent.new('search', classes: 'subnav-search-icon')
   = render Primer::FlexItemComponent.new(mb: [4, nil, 0, nil]) do
     = render Primer::ButtonComponent.new(tag: :a, href: frontend_conferences_url(protocol: :webcal, format: :ics), button_type: :primary,
                                          ml: [0, nil, 6, nil]) do
-      = render Primer::OcticonComponent.new(icon: 'calendar')
+      = render Primer::OcticonComponent.new('calendar')
       = t(:'.subscribe')
 
 %div{ id: 'conference_list' }
   - if @conferences.any?
-    %ul{ class: dom_class(@conferences), data: { filter: { list: true } } }
+    %ul{ data: { filter: { list: true } } }
       = render partial: 'conference', collection: @conferences, layout: 'list_item',
-               locals: { list_item_id: ->(local_assigns) { dom_id(local_assigns[:conference]) } },
                cached: -> conference { [conference, conference.institutions, conference.institutions.collect(&:logo)] }
   - else
     = render Primer::BlankslateComponent.new(title: t(:'.no_conferences'), icon: 'mortar-board')

data/app/views/spina/conferences/primer_theme/conferences/show.html.haml

@@ -1,32 +1,31 @@
-- if @conference.has_content?(:submission_date) && @conference.content(:submission_date) >= Date.today
+- if @conference.content(:submission_date).present? && @conference.content(:submission_date) >= Date.today
   - content_for(:flash) { render 'submission_flash' }
 
 - content_for(:header) { render 'header' }
 
 = turbo_frame_tag 'conference_tabs' do
-  = render Primer::UnderlineNavComponent.new do |component|
-    - component.body(role: 'tablist') do
-      = render Primer::LinkComponent.new(href: frontend_conference_url(@conference, tab: 'information',
-                                                                                    presentation_type: @presentation_type&.id),
-                                         aria: { selected: (@tab == 'information').to_s }, classes: 'UnderlineNav-item', role: 'tab') do
-        = t(:'.tabs.information')
-      = render Primer::LinkComponent.new(href: frontend_conference_url(@conference, tab: 'presentations',
-                                                                                    presentation_type: @presentation_type&.id),
-                                         aria: { selected: (@tab == 'presentations').to_s }, classes: 'UnderlineNav-item', role: 'tab') do
-        = t(:'.tabs.presentations')
-      = render Primer::LinkComponent.new(href: frontend_conference_url(@conference, tab: 'events',
-                                                                                    presentation_type: @presentation_type&.id),
-                                         aria: { selected: (@tab == 'events').to_s }, classes: 'UnderlineNav-item', role: 'tab') do
-        = t(:'.tabs.events')
+  = render Primer::UnderlineNavComponent.new(label: t(:'.conference_navigationcle')) do |component|
+    - component.tab(href: frontend_conference_url(@conference, tab: 'information', presentation_type: @presentation_type&.id),
+                    aria: { selected: (@tab == 'information').to_s }, classes: 'UnderlineNav-item', role: 'tab') do
+      = t(:'.tabs.information')
+    - component.tab(href: frontend_conference_url(@conference, tab: 'presentations', presentation_type: @presentation_type&.id),
+                    saria: { selected: (@tab == 'presentations').to_s }, classes: 'UnderlineNav-item', role: 'tab') do
+      = t(:'.tabs.presentations')
+    - component.tab(href: frontend_conference_url(@conference, tab: 'events', presentation_type: @presentation_type&.id),
+                    aria: { selected: (@tab == 'events').to_s }, classes: 'UnderlineNav-item', role: 'tab') do
+      = t(:'.tabs.events')
     - component.actions do
       = render Primer::ButtonComponent.new(tag: :a, href: frontend_conference_url(@conference, protocol: :webcal, format: :ics),
                                            button_type: :primary, variant: :small) do
-        = render Primer::OcticonComponent.new(icon: 'calendar')
+        = render Primer::OcticonComponent.new('calendar')
         = t(:'.subscribe')
   - case @tab
     - when 'information'
-      - cache [partable_for(:text, parent: @conference), @tab] do
-        = render partial: 'information', locals: { text: (@conference.content(:text) if @conference.has_content? :text) }
+      - cache [@conference, @tab] do
+        - if @conference.content(:text).present?
+          = render(Primer::MarkdownComponent.new(my: 4)) { @conference.content.html(:text) }
+        - else
+          = render Primer::BlankslateComponent.new(title: t(:'.no_information'), icon: 'info', my: 4)
     - when 'presentations'
       - cache [@conference.presentations, @presentation_type, @presentations, @presentations.collect(&:presenters), @tab] do
         = render partial: 'presentations'

data/app/views/spina/conferences/primer_theme/kaminari/_gap.html.haml

@@ -0,0 +1,2 @@
+%span.gap
+  …

data/app/views/spina/conferences/primer_theme/kaminari/_next_page.html.haml

@@ -0,0 +1,9 @@
+-# Link to the "Previous" page
+-#  - available local variables
+-#    url:           url to the previous page
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+= link_to_unless current_page.last?, t(:'.next'), url, rel: 'next', class: 'next_page', aria: { label: t('.next_page') } do
+  %span.next_page{ aria: { disabled: 'true' } }= t('.next')

data/app/views/spina/conferences/primer_theme/kaminari/_page.html.haml

@@ -0,0 +1,10 @@
+-# Link showing page number
+-#  - available local variables
+-#    page:          a page object for "this" page
+-#    url:           url to this page
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+= link_to_unless page.current?, page, url, aria: { label: t(:'.page', number: page) } do
+  %em{ aria: { current: 'page' } }= page

data/app/views/spina/conferences/primer_theme/kaminari/_paginator.html.haml

@@ -0,0 +1,17 @@
+-# The container tag
+-#  - available local variables
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+-#    paginator:     the paginator that renders the pagination tags inside
+= paginator.render do
+  %nav.paginate-container{ aria: { label: 'Pagination' } }
+    .pagination
+      = prev_page_tag
+      - each_page do |page|
+        - if page.display_tag?
+          = page_tag page
+        - elsif !page.was_truncated?
+          = gap_tag
+      = next_page_tag

data/app/views/spina/conferences/primer_theme/kaminari/_prev_page.html.haml

@@ -0,0 +1,9 @@
+-# Link to the "Previous" page
+-#  - available local variables
+-#    url:           url to the previous page
+-#    current_page:  a page object for the currently displayed page
+-#    total_pages:   total number of pages
+-#    per_page:      number of items to fetch per page
+-#    remote:        data-remote
+= link_to_unless current_page.first?, t(:'.previous'), url, rel: 'prev', class: 'previous_page', aria: { label: t('.previous_page') } do
+  %span.previous_page{ aria: { disabled: 'true' } }= t('.previous')

data/app/views/spina/conferences/primer_theme/presentations/_attachment.html.haml

@@ -1,5 +1,5 @@
 - cache [attachment, attachment.attachment] do
   - unless attachment.attachment.blank?
     = component.button(tag: :a, href: main_app.rails_blob_path(attachment.attachment.file, disposition: :attachment)) do
-      = render Primer::OcticonComponent.new(icon: 'download')
+      = render Primer::OcticonComponent.new('download')
       = attachment.name

data/app/views/spina/conferences/primer_theme/presentations/show.html.haml

@@ -1,16 +1,16 @@
 - cache [@presentation, @presentation.presenters, @presentation.attachments.collect(&:attachment)] do
   - cache [@presentation, @presentation.presenters] do
     = render(Primer::HeadingComponent.new(mb: [1, nil, 2, nil])) { @presentation.title }
-    %ul.text-gray-dark.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
+    %ul.text-secondary-dark.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
       %li.mr-sm-3.mb-1
-        = render Primer::OcticonComponent.new(icon: @presentation.presenters.many? ? 'people' : 'person')
+        = render Primer::OcticonComponent.new(@presentation.presenters.many? ? 'people' : 'person')
         = render Primer::TextComponent.new(tag: :address, display: :inline) do
           = @presentation.presenters.collect(&:full_name_and_institution).to_sentence
       %li.mr-sm-3.mb-1
-        = render Primer::OcticonComponent.new(icon: 'clock')
+        = render Primer::OcticonComponent.new('clock')
         = time_tag @presentation.start_datetime, format: :short
       %li.mb-1
-        = render Primer::OcticonComponent.new(icon: 'location')
+        = render Primer::OcticonComponent.new('location')
         = render Primer::TextComponent.new(tag: :address, display: :inline) do
           = t :'.room_and_institution', room: @presentation.session.room_name, institution: @presentation.room.institution.name
 

data/config/initializers/primer.rb

@@ -1,3 +1,3 @@
 # frozen_string_literal: true
 
-Rails.application.config.primer_view_components.force_functional_colors = false
+Rails.application.config.primer_view_components.silence_deprecations = true

data/config/initializers/themes/conferences_primer_theme.rb

@@ -4,274 +4,191 @@
   theme.name = 'conferences_primer_theme'
   theme.title = 'Conferences Primer theme'
 
-  theme.page_parts = [{
+  theme.layout_parts = %w[current_conference_alert]
+
+  theme.parts = [{
     name: 'text',
     title: 'Text',
-    partable_type: 'Spina::Text'
+    part_type: 'Spina::Parts::Text'
   }, {
     name: 'gallery',
     title: 'Gallery',
-    partable_type: 'Spina::ImageCollection'
+    part_type: 'Spina::Parts::ImageCollection'
   }, {
     name: 'constitution',
     title: 'Constitution',
-    partable_type: 'Spina::Attachment'
+    part_type: 'Spina::Parts::Attachment'
   }, {
     name: 'slides',
     title: 'Slides',
-    partable_type: 'Spina::Attachment'
+    part_type: 'Spina::Parts::Attachment'
   }, {
     name: 'handout',
     title: 'Handout',
-    partable_type: 'Spina::Attachment'
+    part_type: 'Spina::Parts::Attachment'
   }, {
     name: 'poster',
     title: 'Poster',
-    partable_type: 'Spina::Attachment'
+    part_type: 'Spina::Parts::Attachment'
   }, {
     name: 'partner_societies',
     title: 'Partner societies',
-    partable_type: 'Spina::Structure'
+    part_type: 'Spina::Parts::Repeater',
+    parts: %w[name logo email_address website description]
   }, {
     name: 'minutes',
     title: 'Minutes',
-    partable_type: 'Spina::Structure'
+    part_type: 'Spina::Parts::Repeater',
+    parts: %w[date attachment]
   }, {
     name: 'documents',
     title: 'Documents',
-    partable_type: 'Spina::Structure'
+    part_type: 'Spina::Parts::Repeater',
+    parts: %w[name attachment]
   }, {
     name: 'contact',
     title: 'Contact',
-    partable_type: 'Spina::Text'
+    part_type: 'Spina::Parts::Text'
   }, {
     name: 'socials',
     title: 'Socials',
-    partable_type: 'Spina::Structure'
+    part_type: 'Spina::Parts::Repeater',
+    parts: %w[name location description]
   }, {
     name: 'meetings',
     title: 'Meetings',
-    partable_type: 'Spina::Structure'
+    part_type: 'Spina::Parts::Repeater',
+    parts: %w[name location description]
   }, {
     name: 'submission_url',
     title: 'Submission URL',
-    partable_type: 'Spina::Admin::Conferences::UrlPart'
+    part_type: 'Spina::Parts::Admin::Conferences::Url'
   }, {
     name: 'submission_date',
     title: 'Submission date',
-    partable_type: 'Spina::Admin::Conferences::DatePart'
+    part_type: 'Spina::Parts::Admin::Conferences::Date'
   }, {
     name: 'submission_text',
     title: 'Submission text',
-    partable_type: 'Spina::Line'
+    part_type: 'Spina::Parts::Line'
   }, {
     name: 'committee_bios',
     title: 'Committee bios',
-    partable_type: 'Spina::Structure'
+    part_type: 'Spina::Parts::Repeater',
+    parts: %w[name role bio profile_picture]
   }, {
     name: 'sponsors',
     title: 'Sponsors',
-    partable_type: 'Spina::Structure'
+    part_type: 'Spina::Parts::Repeater',
+    parts: %w[name website logo]
   }, {
     name: 'events_list',
     title: 'Events',
-    partable_type: 'Spina::Structure'
-  }]
-
-  theme.layout_parts = [{
+    part_type: 'Spina::Parts::Repeater',
+    parts: %w[name start_time location description url]
+  }, {
     name: 'current_conference_alert',
     title: 'Alert',
-    partable_type: 'Spina::Text'
+    part_type: 'Spina::Parts::Text'
   }, {
     name: 'github_url',
     title: 'GitHub URL',
-    partable_type: 'Spina::Line'
-  }]
-
-  theme.structures = [{
-    name: 'partner_societies',
-    structure_parts: [{
-      name: 'name',
-      title: 'Name',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'logo',
-      title: 'Logo',
-      partable_type: 'Spina::Image'
-    }, {
-      name: 'description',
-      title: 'Description',
-      partable_type: 'Spina::Text'
-    }, {
-      name: 'website',
-      title: 'Website',
-      partable_type: 'Spina::Admin::Conferences::UrlPart'
-    }, {
-      name: 'email_address',
-      title: 'Email address',
-      partable_type: 'Spina::Admin::Conferences::EmailAddressPart'
-    }]
+    part_type: 'Spina::Parts::Line'
   }, {
-    name: 'minutes',
-    structure_parts: [{
-      name: 'date',
-      title: 'Date',
-      partable_type: 'Spina::Admin::Conferences::DatePart'
-    }, {
-      name: 'attachment',
-      title: 'Attachment',
-      partable_type: 'Spina::Attachment'
-    }]
+    name: 'name',
+    title: 'Name',
+    part_type: 'Spina::Parts::Line'
   }, {
-    name: 'documents',
-    structure_parts: [{
-      name: 'name',
-      title: 'Name',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'attachment',
-      title: 'Attachment',
-      partable_type: 'Spina::Attachment'
-    }]
+    name: 'logo',
+    title: 'Logo',
+    part_type: 'Spina::Parts::Image'
   }, {
-    name: 'socials',
-    structure_parts: [{
-      name: 'name',
-      title: 'Name',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'start_time',
-      title: 'Time',
-      partable_type: 'Spina::Admin::Conferences::TimePart'
-    }, {
-      name: 'location',
-      title: 'Location',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'description',
-      title: 'Description',
-      partable_type: 'Spina::Text'
-    }]
+    name: 'description',
+    title: 'Description',
+    part_type: 'Spina::Parts::Text'
   }, {
-    name: 'meetings',
-    structure_parts: [{
-      name: 'name',
-      title: 'Name',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'start_time',
-      title: 'Time',
-      partable_type: 'Spina::Admin::Conferences::TimePart'
-    }, {
-      name: 'location',
-      title: 'Location',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'description',
-      title: 'Description',
-      partable_type: 'Spina::Text'
-    }]
+    name: 'website',
+    title: 'Website',
+    part_type: 'Spina::Parts::Admin::Conferences::Url'
   }, {
-    name: 'committee_bios',
-    structure_parts: [{
-      name: 'name',
-      title: 'Name',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'institution',
-      title: 'Institution',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'role',
-      title: 'Role',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'bio',
-      title: 'Bio',
-      partable_type: 'Spina::Text'
-    }, {
-      name: 'profile_picture',
-      title: 'Profile picture',
-      partable_type: 'Spina::Image'
-    }, {
-      name: 'facebook_profile',
-      title: 'Facebook profile',
-      partable_type: 'Spina::Admin::Conferences::UrlPart'
-    }, {
-      name: 'twitter_profile',
-      title: 'Twitter profile',
-      partable_type: 'Spina::Admin::Conferences::UrlPart'
-    }]
+    name: 'email_address',
+    title: 'Email address',
+    part_type: 'Spina::Parts::Admin::Conferences::EmailAddress'
   }, {
-    name: 'sponsors',
-    structure_parts: [{
-      name: 'name',
-      title: 'Name',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'logo',
-      title: 'Logo',
-      partable_type: 'Spina::Image'
-    }, {
-      name: 'website',
-      title: 'Website',
-      partable_type: 'Spina::Admin::Conferences::UrlPart'
-    }]
+    name: 'date',
+    title: 'Date',
+    part_type: 'Spina::Parts::Admin::Conferences::Date'
   }, {
-    name: 'events_list',
-    title: 'Events',
-    structure_parts: [{
-      name: 'name',
-      title: 'Name',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'start_time',
-      title: 'Time',
-      partable_type: 'Spina::Admin::Conferences::TimePart'
-    }, {
-      name: 'location',
-      title: 'Location',
-      partable_type: 'Spina::Line'
-    }, {
-      name: 'description',
-      title: 'Description',
-      partable_type: 'Spina::Text'
-    }, {
-      name: 'url',
-      title: 'Link',
-      partable_type: 'Spina::Admin::Conferences::UrlPart'
-    }]
+    name: 'attachment',
+    title: 'Attachment',
+    part_type: 'Spina::Parts::Attachment'
+  }, {
+    name: 'start_time',
+    title: 'Time',
+    part_type: 'Spina::Parts::Admin::Conferences::Time'
+  }, {
+    name: 'location',
+    title: 'Location',
+    part_type: 'Spina::Parts::Line'
+  }, {
+    name: 'institution',
+    title: 'Institution',
+    part_type: 'Spina::Parts::Line'
+  }, {
+    name: 'role',
+    title: 'Role',
+    part_type: 'Spina::Parts::Line'
+  }, {
+    name: 'bio',
+    title: 'Bio',
+    part_type: 'Spina::Parts::Text'
+  }, {
+    name: 'profile_picture',
+    title: 'Profile picture',
+    part_type: 'Spina::Parts::Image'
+  }, {
+    name: 'facebook_profile',
+    title: 'Facebook profile',
+    part_type: 'Spina::Parts::Admin::Conferences::Url'
+  }, {
+    name: 'twitter_profile',
+    title: 'Twitter profile',
+    part_type: 'Spina::Parts::Admin::Conferences::Url'
+  }, {
+    name: 'url',
+    title: 'Link',
+    part_type: 'Spina::Parts::Admin::Conferences::Url'
   }]
 
   theme.view_templates = [{
     name: 'homepage',
     title: 'Homepage',
-    page_parts: %w[gallery text]
+    parts: %w[gallery text]
   }, {
     name: 'information',
     title: 'Information',
     description: 'Contains general information',
-    page_parts: %w[text]
+    parts: %w[text]
   }, {
     name: 'committee',
     title: 'Committee',
     description: 'Contains committee bios',
-    page_parts: %w[text committee_bios]
+    parts: %w[text committee_bios]
   }, {
     name: 'about',
     title: 'About',
     description: 'Contains information about the society',
-    page_parts: %w[text constitution minutes documents partner_societies contact]
+    parts: %w[text constitution minutes documents partner_societies contact]
   }, {
     name: 'events',
     title: 'Events',
     description: 'Contains details of past and upcoming events',
-    page_parts: %w[text events_list]
+    parts: %w[text events_list]
   }, {
     name: 'show',
     title: 'Blank',
     description: 'Blank template',
-    page_parts: []
+    parts: []
   }]
 
   theme.custom_pages = [{