spina-conferences-primer_theme 0.1.14 → 0.1.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 747d8e4bd24f28e085f7f25e067975bded223945166f790a946344366c698604
-  data.tar.gz: d048d050d8b62c38bc33b831d4fbf6f3426b50b32123bc1d9ec423abdbb26eea
+  metadata.gz: 053a0eb11e7ced4282502df407443f30da98f6efd1499a9800aa3aeff8ca6b13
+  data.tar.gz: '08d5f2ccb2616cb2d58b153b2bbb00af4e5ee1e7ce45e4c44e04661c72241c8e'
 SHA512:
-  metadata.gz: a095e0ddfb8342743f321c5e1b3b79c342e4c6a106a91957d0a94559e13d0e4d1fb587d1c36f6080b012027f194d59ba2e8f9cd19ff739b87cf74dd310f636ad
-  data.tar.gz: d6f67677691a3183b7b870031552fc7c0c4a9c98a7be245f9997d8f58d7168dfaa41275cf4766d63b8a4de0147c7019bca03310a9928d0c331a80cca2f2701ce
+  metadata.gz: 319dac2e50330a0cdfd3faa9f897341f02eee1651825d45a5f917837c7da88d4b0ef223018fe1a23fab54d55fd02d71a7a8f5acf4f4fa0d2b5d0c3bcfe7cd462
+  data.tar.gz: 35e652f094562c9032877ce59782870fd5211e62cf4b2655f67eac1a4c47873f23480fef0fda1c202b32d693fe0ceb632544d88a6550d3fc253139a037d49d07

data/app/assets/javascripts/spina/conferences/primer_theme/application.js

@@ -1,6 +1,5 @@
 //= require stimulus
 //= require_directory ./controllers
-//= require turbolinks
 
 // eslint-disable-next-line no-undef
 const application = Stimulus.Application.start()

data/app/assets/stylesheets/spina/conferences/primer_theme/_turbolinks.sass

@@ -1,3 +1,3 @@
 //noinspection CssUnusedSymbol
-.turbolinks-progress-bar
+.turbo-progress-bar
   background-color: white

data/app/assets/stylesheets/spina/conferences/primer_theme/application.sass

@@ -8,6 +8,6 @@
 img
   max-width: 100%
   object-fit: cover
-  object-position: top left
+  object-position: center
 address
   font-style: normal

data/app/controllers/spina/conferences/primer_theme/conferences_controller.rb

@@ -5,7 +5,7 @@ module Spina
     module PrimerTheme
       # User-facing controller for conferences, serving both html and ics
       class ConferencesController < ApplicationController
-        before_action :set_conference, :set_tab, :set_presentation_type, :set_breadcrumb, only: :show
+        before_action :set_conference, :set_tab, :set_presentation_type, :set_presentations, :set_breadcrumb, only: :show
         before_action :set_metadata
 
         def index
@@ -34,13 +34,15 @@ module Spina
         end
 
         def set_presentation_type
-          @presentation_type = if params[:presentation_type].present?
-                                 @conference.presentation_types
+          if params[:presentation_type].present?
+            @presentation_type = @conference.presentation_types
                                             .includes(presentations: [session: [:room], presenters: [:institution]])
                                             .find(params[:presentation_type])
-                               else
-                                 @conference
-                               end
+          end
+        end
+
+        def set_presentations
+          @presentations = @presentation_type.present? ? @presentation_type.presentations : @conference.presentations
         end
 
         def set_breadcrumb

data/app/helpers/spina/conferences/primer_theme/application_helper.rb

@@ -16,9 +16,9 @@ module Spina
 
           render Primer::BreadcrumbComponent.new(mb: 4) do |component|
             current_page.ancestors.each do |ancestor|
-              component.slot(:item, href: ancestor.materialized_path) { ancestor.menu_title }
+              component.item(href: ancestor.materialized_path) { ancestor.menu_title }
             end
-            component.slot(:item, selected: true) { current_page.menu_title }
+            component.item(selected: true) { current_page.menu_title }
           end
         end
 

data/app/views/layouts/spina/conferences/primer_theme/application.html.haml

@@ -15,6 +15,7 @@
     = render 'spina/shared/analytics'
     = stylesheet_link_tag 'spina/conferences/primer_theme/application', media: 'all', data: { turbolinks_track: true }
     = javascript_include_tag 'spina/conferences/primer_theme/application', data: { turbolinks_track: true }
+    = javascript_include_tag 'turbo', type: 'module'
     %script{ type: 'module', src: asset_path('@github/details-dialog-element/dist/index.js') }
     %script{ type: 'module', src: asset_path('@github/include-fragment-element/dist/index.js') }
     %script{ type: 'module', src: asset_path('@github/tab-container-element/dist/index.js') }

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

@@ -1,14 +1,7 @@
 = render Primer::BorderBoxComponent.new(classes: 'Box--overlay') do |component|
-  = component.slot :header do
+  - component.header do
     = button_tag(data: { 'close-dialog': true }, aria: { label: t(:'spina.close') }, type: 'button',
                  class: %w[Box-btn-octicon btn-octicon float-right]) do
       = render Primer::OcticonComponent.new(icon: 'x')
     .Box-title= t(:'.title')
-  = component.slot(:body) { t(:'.purpose') }
-  = component.slot :row do
-    = t :'.used.rails_html', cookie: tag.code(Rails.application.config.session_options[:key])
-  = component.slot :row do
-    - ga_cookie_names = %w[_ga _gat _gid].collect{ |cookie| tag.code(cookie) }.to_sentence.html_safe
-    - ga_cookie_info_url = 'https://developers.google.com/analytics/devguides/collection/analyticsjs/cookie-usage'
-    = t :'.used.google_analytics_html', cookies: link_to(ga_cookie_names, ga_cookie_info_url)
-    = t :'.no_advertising'
+  = component.body { }

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

@@ -1,24 +1,15 @@
-.d-flex.flex-column.flex-md-row-reverse.flex-md-items-baseline
-  .flex-auto.d-flex.flex-column.flex-sm-row.flex-items-baseline.mb-4.mb-md-0
+= render Primer::FlexComponent.new(direction: [:column, nil, :row_reverse, nil], align_items: :center) do
+  = render Primer::FlexComponent.new(direction: [:column, :row, nil, nil], mb: [4, nil, 0, nil], flex: :auto) do
     %ul.list-style-none.flex-auto.mb-2.mb-sm-0.mr-sm-2
       - footer_navigation_items.each do |item|
         - cache item do
           %li
             = render Primer::ButtonComponent.new(tag: :a, href: item.materialized_path, variant: :small) { item.menu_title }
-    %details.details-reset.details-overlay.details-overlay-dark.mb-2.mb-sm-0.mr-sm-2
-      %summary.btn.btn-outline.btn-sm{ aria: { haspopup: 'dialog' } }
-        = octicon 'info'
-        = t :'.cookies'
-      %details-dialog
-        %include-fragment{ src: frontend_cookies_info_path }
-          .Box.Box--overlay.d-flex.flex-column
-            = 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::SpinnerComponent.new(my: 6, mx: :auto))
+    = render 'footer_content'
     - if current_account.has_content? :github_url
       = render Primer::ButtonComponent.new(tag: :a, href: current_account.content(:github_url), button_type: :outline, variant: :small,
                                            display: :inline_block) do
         = render Primer::OcticonComponent.new(icon: 'mark-github')
         = t :'.find_on_github'
-  %small.flex-auto.mr-sm-2.text-small.text-gray= t :'.copyright', name: Spina::Account.first.name, year: Date.today.year
+  = render(Primer::TextComponent.new(tag: :small, color: :gray, mr: [nil, 2, nil, nil], font_size: 6, flex_grow: 0)) do
+    = t :'.copyright', name: Spina::Account.first.name, year: Date.today.year

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

@@ -0,0 +1,13 @@
+= 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')
+    = t :'.cookies'
+  = component.body(tag: :'details-dialog') do
+    %include-fragment{ src: frontend_cookies_info_path, loading: :lazy }
+      = render Primer::BorderBoxComponent.new(classes: 'Box--overlay') do |box_component|
+        = 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::BlankslateComponent.new(title: t('.loading')) do |blankslate_component|
+            = blankslate_component.spinner(size: :large)

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

@@ -5,9 +5,9 @@
     - if image.file.present?
       = image_tag(main_app.url_for(image.file.variant(resize_to_fill: [1680, 600])), alt_description: image.file.name, draggable: false,
                   srcset: srcset(image.file, variant: { resize_to_fill: [1680, 600] }), hidden: index != 0,
-                  data: { 'slideshow-target': 'slide' })
+                  data: { 'slideshow-target': 'slide' }, class: %w[d-block mx-auto])
   .position-absolute.top-0.left-0.right-0.bottom-0.container-lg.p-responsive{ class: ('position-absolute top-0' if local_assigns[:controls]) }
-    - if local_assigns[:controls]
+    - if local_assigns[:controls] && image_collection.images.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(icon: 'arrow-left')

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

@@ -1 +1 @@
-.markdown-body= text.html_safe
+= render(Primer::MarkdownComponent.new) { text.html_safe }

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

@@ -1,15 +1,15 @@
-.d-flex.flex-column.flex-md-row-reverse.flex-justify-start.flex-md-justify-between
+= 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) }
     = render partial: 'institution', collection: conference.institutions, cached: -> institution { [institution, institution.logo] }
-  .flex-auto
-    %h3.mb-1
-      = link_to conference.name, frontend_conference_path(conference)
+  = 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
       %li.mr-sm-3
-        = octicon 'calendar'
+        = render Primer::OcticonComponent.new(icon: '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
-          = octicon 'location'
-          %address.d-inline= t :'.locations', institutions: conference.institutions.pluck(:name).to_sentence,
-                                  cities: conference.institutions.pluck(:city).uniq.to_sentence
+          = render Primer::OcticonComponent.new(icon: '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 @@
-.d-flex.flex-column.flex-sm-row
-  .flex-shrink-0.mr-sm-3.mb-3.mb-sm-0.col-sm-4
-    %span.f3-light.mb-1
-      = octicon 'clock', class: 'v-align-baseline'
+= 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)
       = t :'.times_html', start_time: time_tag(event.start_time, format: :short), finish_time: time_tag(event.finish_time, format: :time)
-    .text-gray
-      = octicon 'location'
-      %address.d-inline= event.location
-  .flex-auto
-    %h3.mb-1= event.name
-    .text-gray= event.description.try(:html_safe)
+    = render Primer::TextComponent.new(tag: :div, color: :gray) do
+      = render Primer::OcticonComponent.new(icon: '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) }

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

@@ -1,15 +1,16 @@
 - cache [events, @tab] do
-  - if events.any?
-    %filter-input.d-flex.flex-sm-justify-start{ aria: { owns: 'event_list' } }
-      .subnav.subnav-flush
-        .subnav-search.m-0.width-full
-          = search_field_tag 'search', nil, class: %w[form-control subnav-search-input width-full], aria: { label: t(:'.search') }
-          = octicon 'search', class: 'subnav-search-icon'
-  %div{ id: 'event_list' }
+  = render Primer::BaseComponent.new(tag: :div, my: 4) do
     - if events.any?
-      %ul{ class: dom_class(events), 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')
-    = render Primer::BlankslateComponent.new(title: t(:'.no_matching_events'), icon: 'calendar', hidden: true,
-                                             data: { 'filter-empty-state': true })
+      %filter-input{ aria: { owns: 'event_list' } }
+        .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') }
+            = octicon 'search', class: 'subnav-search-icon'
+    %div{ id: 'event_list' }
+      - if events.any?
+        %ul{ class: dom_class(events), 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')
+      = render Primer::BlankslateComponent.new(title: t(:'.no_matching_events'), icon: 'calendar', hidden: true,
+                                               data: { 'filter-empty-state': true })

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

@@ -0,0 +1,27 @@
+- 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) }
+    = 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
+      %li.mr-sm-3.mb-1
+        = render Primer::OcticonComponent.new(icon: '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::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) }
+        = 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 }

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

@@ -1,4 +1,4 @@
 - if text.present?
-  .markdown-body= text.try(:html_safe)
+  = render(Primer::MarkdownComponent.new(my: 4)) { text.try(:html_safe) }
 - else
-  = render Primer::BlankslateComponent.new(title: t(:'.no_information'), icon: 'info')
+  = render Primer::BlankslateComponent.new(title: t(:'.no_information'), icon: 'info', my: 4)

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

@@ -1,13 +1,15 @@
-.d-flex.flex-column.flex-sm-row
-  .flex-shrink-0.mr-sm-3.mb-3.mb-sm-0.col-sm-3
-    %span.f3-light.mb-1
-      = octicon 'clock', class: 'v-align-baseline'
+= 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)
       = time_tag presentation.start_datetime, format: :short
-    .text-gray
-      = octicon 'location'
-      %address.d-inline= presentation.session.room_name
-  .flex-auto
-    %h3.mb-1= link_to presentation.title, frontend_conference_presentation_path(conference, presentation)
-    .text-gray
-      = octicon presentation.presenters.many? ? 'people' : 'person'
-      %address.d-inline= presentation.presenters.collect(&:full_name_and_institution).to_sentence
+    = render Primer::TextComponent.new(tag: :div, color: :gray) do
+      = render Primer::OcticonComponent.new(icon: '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))) { presentation.title }
+    = render Primer::TextComponent.new(tag: :div, color: :gray) do
+      = render Primer::OcticonComponent.new(icon: 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

@@ -1,27 +1,26 @@
-- cache [@conference.presentations, @presentation_type, @presentation_type.presentations,
-         @presentation_type.presentations.collect(&:presenters), @tab] do
-  .d-flex.flex-column.flex-lg-row
-    .col-12.col-lg-3.pr-lg-4.mb-4.mb-lg-0
+- cache [@conference.presentations, @presentation_type, @presentations, @presentations.collect(&:presenters), @tab] do
+  = render Primer::FlexComponent.new(direction: [:column, nil, nil, :row], my: 4) do
+    = render Primer::FlexItemComponent.new(pr: [nil, nil, nil, 4], mb: [4, nil, nil, 0], col: [12, nil, nil, 3]) do
       %ul.filter-list
         - cache [@conference.presentations, @presentation_type] do
           %li
             = link_to frontend_conference_url(@conference, tab: 'presentations'),
-                      class: 'filter-item', aria: { current: @presentation_type == @conference ? 'page' : nil } do
+                      class: 'filter-item', aria: { current: ('page' if @presentation_type.blank?) } do
               = t('.all_presentation_types')
               %span.count{ title: t(:'.results') }= @conference.presentations.count
         = render partial: 'presentation_type', collection: @conference.presentation_types.sorted,
                  cached: -> presentation_type { [presentation_type, @presentation_type] }
-    .flex-auto.col-12.col-lg-8
-      - if @presentation_type.presentations.any?
-        %filter-input.d-flex.flex-sm-justify-start{ aria: { owns: 'presentation_list' } }
+    = render Primer::FlexItemComponent.new(col: [12, nil, nil, 9]) do
+      - if @presentations.any?
+        %filter-input{ aria: { owns: 'presentation_list' } }
           .subnav.subnav-flush
-            .subnav-search.m-0.width-full
-              = search_field_tag 'search', nil, class: %w[form-control subnav-search-input width-full], aria: { label: t(:'.search') }
+            .subnav-search.float-left.ml-0
+              = search_field_tag 'search', nil, class: %w[form-control subnav-search-input], aria: { label: t(:'.search') }
               = octicon 'search', class: 'subnav-search-icon'
       %div{ id: 'presentation_list' }
-        - if @presentation_type.presentations.any?
-          %ul{ class: dom_class(@presentation_type.presentations), data: { filter: { list: true } } }
-            = render partial: 'presentation', collection: @presentation_type.presentations.sorted, layout: 'list_item',
+        - if @presentations.any?
+          %ul{ class: dom_class(@presentations), data: { filter: { list: true } } }
+            = render partial: 'presentation', collection: @presentations.sorted, layout: 'list_item',
                      locals: { conference: @conference }, cached: -> presentation { [presentation, presentation.presenters] }
         - else
           = render Primer::BlankslateComponent.new(title: t(:'.no_presentations'), icon: 'mortar-board')

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

@@ -1,8 +1,8 @@
-%li.d-inline-block.m-2.v-align-middle
+= render Primer::FlexItemComponent.new(m: 2, vertical_align: :middle) do
   - if sponsor.has_content?(:logo) && sponsor.content(:logo).file.present?
     = link_to sponsor.content(:website) do
       = image_tag(main_app.url_for(sponsor.content(:logo).file.variant(resize_to_limit: [200, 60])),
                   srcset: srcset(sponsor.content(:logo).file, variant: { resize_to_limit: [200, 60] }),
                   alt_description: sponsor.content(:name), draggable: false)
   - else
-    = link_to sponsor.content(:name), sponsor.content(:website)
+    = render(Primer::LinkComponent.new(href: sponsor.content(:website) || '')) { sponsor.content(:name) }

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

@@ -1,6 +1,6 @@
-.Subhead.Subhead--spacious
-  %h2.Subhead-heading= t :'.title'
+= render Primer::SubheadComponent.new(spacious: true) do |component|
+  = component.heading(tag: :h2) { t :'.title' }
 
-%ul.ml-n2.mr-n2.mb-n2.mt-n2{ class: dom_class(sponsors), id: dom_id(sponsors) }
+= render Primer::FlexComponent.new(flex_wrap: true, classes: dom_class(sponsors), ml: -2, mr: -2, mt: -2, mb: -2) do
   = render partial: 'sponsor', collection: sponsors.structure_items.sorted_by_structure,
            cached: -> sponsor { [sponsor, sponsor.structure_parts.collect(&:structure_partable)] }

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

@@ -0,0 +1,14 @@
+- 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'

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

@@ -1,15 +1,17 @@
-.d-flex.flex-column-reverse.flex-sm-row
-  %filter-input.col-12.col-sm-8.mb-4.mb-sm-0.d-flex.flex-sm-justify-start{ aria: { owns: 'conference_list' } }
-    - if @conferences.any?
-      .subnav.subnav-flush
-        .subnav-search.m-0.width-full
-          = search_field_tag 'search', nil, class: %w[form-control subnav-search-input width-full], aria: { label: t(:'.search') }
-          = octicon 'search', class: 'subnav-search-icon'
-  .col-12.col-sm-4.mb-4.mb-sm-0.d-flex.flex-sm-justify-end
+= render Primer::FlexComponent.new(direction: [:column_reverse, nil, :row, nil]) do
+  = render Primer::FlexItemComponent.new(flex_auto: true, mb: [4, nil, 0, nil]) do
+    %filter-input{ aria: { owns: 'conference_list' } }
+      - if @conferences.any?
+        .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::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, 6, nil, nil]) do
+                                         ml: [0, nil, 6, nil]) do
       = render Primer::OcticonComponent.new(icon: 'calendar')
       = t(:'.subscribe')
+
 %div{ id: 'conference_list' }
   - if @conferences.any?
     %ul{ class: dom_class(@conferences), data: { filter: { list: true } } }

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

@@ -1,68 +1,38 @@
 - if @conference.has_content?(:submission_date) && @conference.content(:submission_date) >= Date.today
-  - content_for :flash do
-    - cache partable_for(:submission_url, :submission_date, :submission_text, parent: @conference) do
-      = render Primer::FlashComponent.new(variant: :warning, full: true, classes: dom_class(@conference)) do
-        - cache partable_for(:submission_url, parent: @conference) do
-          - if @conference.content(:submission_url).present?
-            = link_to t(:'.submit_abstract'), @conference.content(:submission_url),
-                      class: %i[btn btn-primary flash-action]
-        - cache partable_for(:submission_date, parent: @conference) do
-          %p
-            = octicon('clock')
-            = 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?
-            %p= @conference.content(:submission_text).html_safe
+  - content_for(:flash) { render 'submission_flash' }
 
-- content_for :header do
-  - 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) }
-      %h1.mb-1.mb-md-2= @conference.name
-      %ul.text-gray-dark.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
-        %li.mr-sm-3.mb-1
-          = octicon '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
-              = octicon 'location'
-              %address.d-inline= 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) }
-          = 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 }
+- content_for(:header) { render 'header' }
 
-  %tab-container
-    %nav.UnderlineNav
-      .container-lg.p-responsive.d-flex.flex-justify-between.flex-auto
-        .UnderlineNav-body{ role: 'tablist' }
-          = button_tag t(:'.tabs.information'), aria: { selected: (@tab == 'information').to_s }, class: 'UnderlineNav-item', role: 'tab',
-                                                type: 'button'
-          = button_tag t(:'.tabs.presentations'), aria: { selected: (@tab == 'presentations').to_s }, class: 'UnderlineNav-item',
-                                                  role: 'tab', type: 'button'
-          = button_tag t(:'.tabs.events'), aria: { selected: (@tab == 'events').to_s }, class: 'UnderlineNav-item', role: 'tab',
-                                           type: 'button'
-        .UnderlineNav-actions
-          = 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')
-            = t(:'.subscribe')
-    .container-lg.p-responsive
+= 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')
+    - 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')
+        = t(:'.subscribe')
+  - case @tab
+    - when 'information'
       - cache [partable_for(:text, parent: @conference), @tab] do
-        = render partial: 'information', layout: 'tab',
-                 locals: { text: (@conference.content(:text) if @conference.has_content? :text), hidden: @tab != 'information' }
-      - cache [@conference.presentations, @presentation_type, @presentation_type.presentations,
-               @presentation_type.presentations.collect(&:presenters), @tab] do
-        = render partial: 'presentations', layout: 'tab', locals: { hidden: @tab != 'presentations' }
+        = render partial: 'information', locals: { text: (@conference.content(:text) if @conference.has_content? :text) }
+    - when 'presentations'
+      - cache [@conference.presentations, @presentation_type, @presentations, @presentations.collect(&:presenters), @tab] do
+        = render partial: 'presentations'
+    - when 'events'
       - cache [@conference.events, @tab] do
-        = render partial: 'events', layout: 'tab', locals: { events: @conference.events, hidden: @tab != 'events' }
+        = render partial: 'events', locals: { events: @conference.events }
+    - else
+      = render Primer::BlankslateComponent.new(title: t('.no_tab'), description: t('.tab_does_not_exist', tab: @tab), icon: 'x-circle',
+                                               my: 4)

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

@@ -1 +1 @@
-.markdown-body.my-4= abstract.html_safe
+= render(Primer::MarkdownComponent.new(my: 4)) { abstract.html_safe }

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

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

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

@@ -1,4 +1,5 @@
 - cache [attachments, attachments.collect(&:attachment)] do
   - if attachments.any?
-    .BtnGroup.mt-1
-      = render partial: 'attachment', collection: attachments, cached: -> attachment { [attachment, attachment.attachment] }
+    = render Primer::ButtonGroupComponent.new(mt: 1) do |component|
+      = render partial: 'attachment', collection: attachments, cached: -> attachment { [attachment, attachment.attachment] },
+               locals: { component: component }

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

@@ -1,16 +1,18 @@
 - cache [@presentation, @presentation.presenters, @presentation.attachments.collect(&:attachment)] do
   - cache [@presentation, @presentation.presenters] do
-    %h1.mb-1.mb-md-2= @presentation.title
+    = 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
       %li.mr-sm-3.mb-1
-        = octicon @presentation.presenters.many? ? 'people' : 'person'
-        %address.d-inline= @presentation.presenters.collect(&:full_name_and_institution).to_sentence
+        = render Primer::OcticonComponent.new(icon: @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
-        = octicon 'clock'
+        = render Primer::OcticonComponent.new(icon: 'clock')
         = time_tag @presentation.start_datetime, format: :short
       %li.mb-1
-        = octicon 'location'
-        %address.d-inline= t :'.room_and_institution', room: @presentation.session.room_name, institution: @presentation.room.institution.name
+        = render Primer::OcticonComponent.new(icon: 'location')
+        = render Primer::TextComponent.new(tag: :address, display: :inline) do
+          = t :'.room_and_institution', room: @presentation.session.room_name, institution: @presentation.room.institution.name
 
   = render partial: 'attachments', object: @presentation.attachments
   = render partial: 'abstract', object: @presentation.abstract

data/app/views/spina/pages/_committee_bio.html.haml

@@ -1,34 +1,36 @@
 - cache [committee_bio, committee_bio.structure_parts.collect(&:structure_partable)] do
-  .d-flex.flex-column.flex-md-row.flex-items-start
+  = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil], align_items: :start) do
     - cache partable_for(:profile_picture, parent: committee_bio) do
       - if committee_bio.has_content?(:profile_picture) && committee_bio.content(:profile_picture).persisted? && committee_bio.content(:profile_picture).file.present?
-        .flex-shrink-0
-          = render Primer::AvatarComponent.new(src: main_app.url_for(committee_bio.content(:profile_picture).file.variant(resize_to_fill: [150, 150])),
-                                               srcset: srcset_string(committee_bio.content(:profile_picture).file,
-                                                                     variant: { resize_to_limit: [150, 150] }),
-                                               draggable: false, alt: committee_bio.content(:name), size: 150, mr: [nil, nil, 3, nil],
-                                               mb: [3, nil, 0, nil])
-    .flex-auto
-      .d-flex.flex-column.flex-md-row.mb-1
+        = render Primer::AvatarComponent.new(src: main_app.url_for(committee_bio.content(:profile_picture).file.variant(resize_to_fill: [150, 150])),
+                                             srcset: srcset_string(committee_bio.content(:profile_picture).file,
+                                                                   variant: { resize_to_limit: [150, 150] }),
+                                             draggable: false, alt: committee_bio.content(:name), size: 150, mr: [nil, nil, 3, nil],
+                                             mb: [3, nil, 0, nil], flex_shrink: 0)
+    = render Primer::FlexItemComponent.new(flex_auto: true) do
+      = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil], mb: 1) do
         - cache partable_for(:name, :role, :institution, parent: committee_bio) do
-          .flex-column
-            - if committee_bio.has_content?(:name) && committee_bio.has_content?(:role)
-              %h3.flex-auto= t :'.name_and_role', name: committee_bio.content(:name), role: committee_bio.content(:role)
-            - elsif committee_bio.has_content?(:name)
-              %h3.flex-auto= committee_bio.content(:name)
+          = render Primer::BoxComponent.new do
+            - if committee_bio.has_content?(:name)
+              = render(Primer::HeadingComponent.new(tag: :h3)) do
+                - if committee_bio.has_content?(:role)
+                  = t :'.name_and_role', name: committee_bio.content(:name), role: committee_bio.content(:role)
+                - else
+                  = committee_bio.content(:name)
             - if committee_bio.has_content?(:institution)
-              %h4.flex-auto= committee_bio.content(:institution)
-        .BtnGroup.mt-1.mt-md-0.ml-md-1{ aria: { label: t(:'.contact_buttons') } }
+              = render(Primer::HeadingComponent.new(tag: :h4)) { committee_bio.content(:institution) }
+        = render Primer::ButtonGroupComponent.new(mt: [1, nil, 0, nil], ml: [nil, nil, 1, nil],
+                                                  aria: { label: t(:'.contact_buttons') }) do |component|
           - cache partable_for(:twitter_profile, parent: committee_bio) do
             - if committee_bio.has_content?(:twitter_profile)
-              = render Primer::ButtonComponent.new(tag: :a, href: committee_bio.content(:twitter_profile), group_item: true) do
+              = component.button(tag: :a, href: committee_bio.content(:twitter_profile)) do
                 = render Primer::OcticonComponent.new(icon: 'link-external')
                 = t(:'.twitter')
           - cache partable_for(:facebook_profile, parent: committee_bio) do
             - if committee_bio.has_content?(:facebook_profile)
-              = render Primer::ButtonComponent.new(tag: :a, href: committee_bio.content(:facebook_profile), group_item: true) do
+              = component.button(tag: :a, href: committee_bio.content(:facebook_profile)) do
                 = render Primer::OcticonComponent.new(icon: 'link-external')
                 = t(:'.facebook')
       - cache partable_for(:bio, parent: committee_bio) do
         - if committee_bio.has_content?(:bio)
-          .text-gray-light= committee_bio.content(:bio).try(:html_safe)
+          = render(Primer::TextComponent.new(tag: :div, color: :gray_light)) { committee_bio.content(:bio).try(:html_safe) }

data/app/views/spina/pages/_constitution.html.haml

@@ -1,11 +1,12 @@
 = render Primer::SubheadComponent.new do |component|
-  = component.slot(:heading) { t :'.title' }
+  = component.heading { t :'.title' }
 
 - if constitution.present?
-  .py-1.d-flex.flex-items-center
-    .flex-auto.pr-1= t :'.uploaded', date: l(constitution.created_at.to_date, format: :long)
+  = render Primer::FlexComponent.new(align_items: :center, py: 1) do
+    = render Primer::FlexItemComponent.new(flex_auto: true, pr: 1) do
+      = t :'.uploaded', date: l(constitution.created_at.to_date, format: :long)
     = render Primer::ButtonComponent.new(tag: :a, href: main_app.rails_blob_path(constitution, disposition: :attachment), ml: 2) do
       = render Primer::OcticonComponent.new(icon: 'desktop-download')
-      = t(:'.download')
+      = t :'.download'
 - else
   = render Primer::BlankslateComponent.new(title: t(:'.no_constitution'), icon: 'law')

data/app/views/spina/pages/_contact.html.haml

@@ -1,4 +1,4 @@
 = render Primer::SubheadComponent.new do |component|
-  = component.slot(:heading) { t :'.title' }
+  = component.heading { t :'.title' }
 
 = render partial: 'text', object: contact

data/app/views/spina/pages/_document.html.haml

@@ -1,10 +1,8 @@
 - cache [document, document.structure_parts.collect(&:structure_partable)] do
   %li.list-style-none.py-1.d-flex.flex-items-center
     - cache partable_for(:name, parent: document) do
-      - if(document.has_content?(:name))
-        %h3.flex-auto= document.content(:name)
-      - else
-        %h3.flex-auto= t :'.no_name'
+      = render Primer::TextComponent.new(tag: :div, flex: :auto) do
+        = document.has_content?(:name) ? document.content(:name) :  :'.no_name'
     - cache partable_for(:attachment, parent: document) do
       - if document.has_content?(:attachment) && document.content(:attachment).persisted?
         = render Primer::ButtonComponent.new(tag: :a, ml: 2,
@@ -12,4 +10,4 @@
           = render Primer::OcticonComponent.new(icon: 'desktop-download')
           = t(:'.download')
       - else
-        .text-small.text-gray= t :'.no_file'
+        = render(Primer::TextComponent.new(tag: :div, font_size: 6, color: :gray)) { t :'.no_file' }

data/app/views/spina/pages/_documents.html.haml

@@ -1,6 +1,6 @@
 - if documents.present? && documents.structure_items.any?
   = render Primer::SubheadComponent.new do |component|
-    = component.slot(:heading) { t :'.title' }
+    = component.heading { t :'.title' }
 
   %ul{ class: dom_class(documents), id: dom_id(documents) }
     = render partial: 'document', collection: documents.structure_items.sorted_by_structure,

data/app/views/spina/pages/_event.html.haml

@@ -1,17 +1,18 @@
 - cache [event, event.structure_parts.collect(&:structure_partable)] do
-  .d-flex.flex-column.flex-items-start
+  = render Primer::FlexComponent.new(direction: :column, align_items: :start) do
     - cache partable_for(:name, parent: event) do
       - if event.has_content?(:name)
-        %h3.flex-auto= event.content(:name)
+        = render(Primer::HeadingComponent.new(tag: :h3, flex: :auto)) { event.content(:name) }
     - cache partable_for(:location, :start_time, parent: event) do
-      %h4.flex-auto= t(:'.time_and_place', time: event.has_content?(:start_time) ? time_tag(event.content(:start_time), format: :ordinal_datetime_with_year) : t('.time_tbc'),
-                                          place: event.has_content?(:location) ? event.content(:location) : t('.location_tbc')).try(:html_safe)
+      = render Primer::HeadingComponent.new(tag: :h4, flex: :auto) do
+        = t(:'.time_and_place_html',
+            time: event.has_content?(:start_time) ? time_tag(event.content(:start_time), format: :ordinal_datetime_with_year) : t('.time_tbc'),
+            place: event.has_content?(:location) ? event.content(:location) : t('.location_tbc'))
     - cache partable_for(:description, parent: event) do
       - if event.has_content?(:description)
-        .mt-1.text-gray-light= event.content(:description).try(:html_safe)
+        = render(Primer::TextComponent.new(mt: 1, color: :gray_light)) { event.content(:description).try(:html_safe) }
     - cache partable_for(:url, parent: event) do
       - if event.has_content?(:url)
-        .mt-2
-          = render Primer::ButtonComponent.new(tag: :a, href: event.content(:url)) do
-            = render Primer::OcticonComponent.new(icon: 'link-external')
-            = t :'.more_info'
+        = render Primer::ButtonComponent.new(tag: :a, href: event.content(:url), mt: 2) do
+          = render Primer::OcticonComponent.new(icon: 'link-external')
+          = t :'.more_info'

data/app/views/spina/pages/_events_list.html.haml

@@ -1,6 +1,6 @@
 %div{ class: dom_class(events_list), id: dom_id(events_list) }
   = render Primer::SubheadComponent.new(mt: 4) do |component|
-    = component.slot(:heading) { t :'.upcoming' }
+    = component.heading { t :'.upcoming' }
   - events_list.structure_items.sorted_by_structure.filter { |item| item.has_content?(:start_time) && item.content(:start_time) >= Time.now }.then do |events|
     - if events.any?
       %ul
@@ -9,7 +9,7 @@
     - else
       = render Primer::BlankslateComponent.new(title: t(:'.no_events'), icon: 'calendar')
   = render Primer::SubheadComponent.new(mt: 4) do |component|
-    = component.slot(:heading) { t :'.past' }
+    = component.heading { t :'.past' }
   - events_list.structure_items.sorted_by_structure.filter { |item| item.has_content?(:start_time) && item.content(:start_time) < Time.now }.then do |events|
     - if events.any?
       %ul

data/app/views/spina/pages/_homepage_content.html.haml

@@ -1,15 +1,14 @@
-.py-3.py-lg-6
+= render Primer::BoxComponent.new(py: [3, nil, nil, 6]) do
+  .text-shadow-dark
+    - if latest_conference.present? && latest_conference.finish_date >= Date.today
+      = render(Primer::HeadingComponent.new(tag: :h1, classes: 'h000-mktg lh-condensed-ultra')) { conference.name }
+      = render(Primer::TextComponent.new(tag: :address, classes: 'f2-light')) { conference.institutions.collect(&:name).to_sentence }
+      = render(Primer::TextComponent.new(tag: :time, classes: 'f2-light')) do
+        = t :'.dates_html', start_date: time_tag(conference.start_date, format: :day_and_month),
+                            finish_date: time_tag(conference.finish_date, format: :day_and_month)
+    - else
+      = render(Primer::HeadingComponent.new(tag: :h1, classes: 'h000-mktg lh-condensed-ultra')) { Spina::Account.first.name }
   - if latest_conference.present? && latest_conference.finish_date >= Date.today
-    .text-shadow-dark
-      %h1.h000-mktg.lh-condensed-ultra= conference.name
-      %address.f2-light= conference.institutions.collect(&:name).to_sentence
-      %time.f2-light= t(:'.dates_html', start_date: time_tag(conference.start_date, format: :day_and_month),
-                                                        finish_date: time_tag(conference.finish_date, format: :day_and_month))
-      .markdown-body.my-4= content(:text).try(:html_safe)
-    .d-block.mt-4
-      = link_to t('.more_info'), frontend_conference_path(conference), class: %w[btn-mktg btn-large-mktg btn-primary-mktg f3]
-  - else
-    .text-shadow-dark
-      %h1.h000-mktg.lh-condensed-ultra= Spina::Account.first.name
-      .markdown-body.my-4= content(:text).try(:html_safe)
-
+    = link_to t('.more_info'), frontend_conference_path(conference), class: %w[btn-mktg btn-large-mktg btn-primary-mktg f3 mt-4]
+  .text-shadow-dark
+    = render(Primer::MarkdownComponent.new(my: 4)) { content(:text).try(:html_safe) }

data/app/views/spina/pages/_jumbotron.html.haml

@@ -1,2 +1,2 @@
-.bg-blue
+= render Primer::BoxComponent.new(bg: :blue) do
   .container-lg.p-responsive.text-white= yield

data/app/views/spina/pages/_minutes.html.haml

@@ -1,5 +1,5 @@
 = render Primer::SubheadComponent.new do |component|
-  = component.slot(:heading) { t :'.title' }
+  = component.heading { t :'.title' }
 
 - if minutes.present? && minutes.structure_items.any?
   %ul{ class: dom_class(minutes), id: dom_id(minutes) }

data/app/views/spina/pages/_minutes_entry.html.haml

@@ -1,12 +1,14 @@
 - cache [minutes_entry, minutes_entry.structure_parts.collect(&:structure_partable)] do
   %li.list-style-none.py-1.d-flex.flex-items-center{ id: dom_id(local_assigns[:minutes_entry]) }
     - cache partable_for(:date, parent: minutes_entry) do
-      .flex-auto= minutes_entry.has_content?(:date) ? t(:'.minutes_html', date: time_tag(minutes_entry.content(:date))) : t(:'.no_date')
+      = render Primer::FlexItemComponent.new(flex_auto: true) do
+        = minutes_entry.has_content?(:date) ? t(:'.minutes_html', date: time_tag(minutes_entry.content(:date))) : t(:'.no_date')
     - cache partable_for(:attachment, parent: minutes_entry) do
       - if minutes_entry.has_content?(:attachment) && minutes_entry.content(:attachment).persisted?
         = render Primer::ButtonComponent.new(tag: :a, ml: 2,
-                                             href: main_app.rails_blob_path(minutes_entry.content(:attachment), disposition: :attachment)) do
+                                             href: main_app.rails_blob_path(minutes_entry.content(:attachment),
+                                                                            disposition: :attachment)) do
           = render Primer::OcticonComponent.new(icon: 'desktop-download')
           = t(:'.download')
       - else
-        .text-small.text-gray= t :'.no_file'
+        = render(Primer::TextComponent.new(color: :gray, font_size: 6)) { t :'.no_file' }

data/app/views/spina/pages/_partner_societies.html.haml

@@ -1,5 +1,5 @@
 = render Primer::SubheadComponent.new do |component|
-  = component.slot(:heading) { t :'.title' }
+  = component.heading { t :'.title' }
 
 - if partner_societies.structure_items.any?
   %ul{ class: dom_class(partner_societies), id: dom_id(partner_societies) }

data/app/views/spina/pages/_partner_society.html.haml

@@ -1,24 +1,26 @@
 - cache [partner_society, partner_society.structure_parts.collect(&:structure_partable)] do
-  .d-flex.flex-column.flex-md-row-reverse.flex-items-start
-    .flex-auto
-      %h3.d-flex.flex-wrap.mb-1
-        - cache partable_for(:name, parent: partner_society) do
-          - if partner_society.has_content? :name
-            .flex-auto= partner_society.content(:name)
-        .BtnGroup.mt-1.mt-sm-0{ aria: { label: t(:'.contact_buttons') } }
-          - cache partable_for(:website, parent: partner_society) do
-            - if partner_society.has_content? :website
-              = render Primer::ButtonComponent.new(tag: :a, href: partner_society.content(:website), group_item: true) do
-                = render Primer::OcticonComponent.new(icon: 'browser')
-                = t(:'.website')
-          - cache partable_for(:email_address, parent: partner_society) do
-            - if partner_society.has_content? :email_address
-              = render Primer::ButtonComponent.new(tag: :a, href: "mailto:#{partner_society.content(:email_address)}", group_item: true) do
-                = render Primer::OcticonComponent.new(icon: 'mail')
-                = t(:'.email')
+  = render Primer::FlexComponent.new(direction: [:column, nil, :row_reverse, nil], align_items: :start) do
+    = render Primer::BaseComponent.new(tag: :div, flex: :auto) do
+      = render Primer::HeadingComponent.new(tag: :h3, mb: 1) do
+        = render Primer::FlexComponent.new(flex_wrap: true, justify_content: :space_between) do
+          - cache partable_for(:name, parent: partner_society) do
+            - if partner_society.has_content? :name
+              = render(Primer::TextComponent.new(tag: :div)) { partner_society.content(:name) }
+          = render Primer::ButtonGroupComponent.new(aria: { label: t(:'.contact_buttons') }) do |component|
+            - cache partable_for(:website, parent: partner_society) do
+              - if partner_society.has_content? :website
+                = component.button(tag: :a, href: partner_society.content(:website)) do
+                  = render Primer::OcticonComponent.new(icon: 'browser')
+                  = t(:'.website')
+            - cache partable_for(:email_address, parent: partner_society) do
+              - if partner_society.has_content? :email_address
+                = component.button(tag: :a, href: "mailto:#{partner_society.content(:email_address)}") do
+                  = render Primer::OcticonComponent.new(icon: 'mail')
+                  = t(:'.email')
       - cache partable_for(:description, parent: partner_society) do
         - if partner_society.has_content? :description
-          .text-gray= render partial: 'text', object: partner_society.content(:description)
+          = render Primer::MarkdownComponent.new(color: :gray) do
+            = partner_society.content(:description).try(:html_safe)
     - cache partable_for(:logo, parent: partner_society) do
       - if partner_society.has_content?(:logo) && partner_society.content(:logo).persisted? && partner_society.content(:logo).file.present?
         = image_tag(main_app.url_for(partner_society.content(:logo).file.variant(resize_to_limit: [200, 150])),

data/config/initializers/primer.rb

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

data/config/locales/en.yml

@@ -43,15 +43,12 @@ en:
     application:
       cookies:
         title: About cookies
-        purpose: We use cookies for security, functionality, and analytics purposes.
-        no_advertising: We do not use Google Analytics Advertising features.
-        used:
-          rails_html: We use the %{cookie} cookie to track sessions.
-          google_analytics_html: Google Analytics sets the %{cookies} cookies for analytics purposes.
       footer:
         copyright: © %{name} %{year}
         find_on_github: Find us on GitHub
+      footer_content:
         cookies: About cookies
+        loading: Loading…
       image_collection:
         previous: Previous
         next: Next
@@ -84,6 +81,7 @@ en:
         no_date: No date specified.
       documents:
         title: Documents
+      document:
         download: Download
         no_file: No file uploaded.
         no_name: No name.
@@ -101,7 +99,7 @@ en:
         past: Past events
         no_events: No events.
       event:
-        time_and_place: "%{place}, %{time}"
+        time_and_place_html: "%{place}, %{time}"
         time_tbc: Time TBC
         location_tbc: Location TBC
         more_info: More information
@@ -115,18 +113,16 @@ en:
             search: Search
             no_matching_conferences: No matching conferences.
           show:
-            dates_html: "%{start_date}–%{finish_date}"
-            submit_by_html: Submit abstracts by %{date}
-            submit_abstract: Submit an abstract
             information: Information
             presentations: Presentations
             events: Events
             subscribe: Subscribe
-            locations: "%{institutions}, %{cities}"
             tabs:
               information: Information
               presentations: Presentations
               events: Events
+            no_tab: No tab.
+            tab_does_not_exist: "The tab '%{tab}' does not exist."
           presentations:
             all_presentation_types: All
             results: Results
@@ -148,6 +144,12 @@ en:
           conference:
             dates_html: "%{start_date}–%{finish_date}"
             locations: "%{institutions}, %{cities}"
+          submission_flash:
+            submit_by_html: Submit abstracts by %{date}
+            submit_abstract: Submit an abstract
+          header:
+            dates_html: "%{start_date}–%{finish_date}"
+            locations: "%{institutions}, %{cities}"
         presentations:
           show:
             room_and_institution: "%{room}, %{institution}"

data/lib/spina/conferences/primer_theme.rb

@@ -4,9 +4,10 @@ require 'spina'
 require 'spina/conferences/primer_theme/engine'
 require 'spina/conferences/primer_theme/breadcrumbs/builder'
 require 'spina/admin/conferences'
+require 'octicons_helper'
+require 'view_component'
 require 'primer/view_components'
 require 'icalendar'
-require 'octicons_helper'
 
 module Spina
   module Conferences

data/lib/spina/conferences/primer_theme/breadcrumbs/builder.rb

@@ -22,9 +22,9 @@ module Spina
           def render_element(component, element)
             url = compute_path(element)
             if @context.current_page? url
-              component.slot(:item, selected: true, **element.options) { compute_name(element) }
+              component.item(selected: true, **element.options) { compute_name(element) }
             else
-              component.slot(:item, href: compute_path(element), **element.options) { compute_name(element) }
+              component.item(href: compute_path(element), **element.options) { compute_name(element) }
             end
           end
         end

data/lib/spina/conferences/primer_theme/version.rb

@@ -3,7 +3,7 @@
 module Spina
   module Conferences
     module PrimerTheme
-      VERSION = '0.1.14'
+      VERSION = '0.1.15'
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: spina-conferences-primer_theme
 version: !ruby/object:Gem::Version
-  version: 0.1.14
+  version: 0.1.15
 platform: ruby
 authors:
 - Justin Malčić
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-02-19 00:00:00.000000000 Z
+date: 2021-03-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: babel-transpiler
@@ -58,14 +58,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.0.19
+        version: 0.0.30
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.0.19
+        version: 0.0.30
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -315,6 +315,7 @@ files:
 - app/views/spina/application/_cookies.html.haml
 - app/views/spina/application/_current_conference_alert.html.haml
 - app/views/spina/application/_footer.html.haml
+- app/views/spina/application/_footer_content.html.haml
 - app/views/spina/application/_image_collection.html.haml
 - app/views/spina/application/_list_item.html.haml
 - app/views/spina/application/_logo.html.haml
@@ -327,6 +328,7 @@ files:
 - app/views/spina/conferences/primer_theme/conferences/_event.html.haml
 - app/views/spina/conferences/primer_theme/conferences/_event.ics.erb
 - app/views/spina/conferences/primer_theme/conferences/_events.html.haml
+- app/views/spina/conferences/primer_theme/conferences/_header.html.haml
 - app/views/spina/conferences/primer_theme/conferences/_information.html.haml
 - app/views/spina/conferences/primer_theme/conferences/_institution.html.haml
 - app/views/spina/conferences/primer_theme/conferences/_institution_logo.html.haml
@@ -336,7 +338,7 @@ files:
 - app/views/spina/conferences/primer_theme/conferences/_presentations.html.haml
 - app/views/spina/conferences/primer_theme/conferences/_sponsor.html.haml
 - app/views/spina/conferences/primer_theme/conferences/_sponsors.html.haml
-- app/views/spina/conferences/primer_theme/conferences/_tab.html.haml
+- app/views/spina/conferences/primer_theme/conferences/_submission_flash.html.haml
 - app/views/spina/conferences/primer_theme/conferences/index.html.haml
 - app/views/spina/conferences/primer_theme/conferences/index.ics.erb
 - app/views/spina/conferences/primer_theme/conferences/show.html.haml
@@ -360,6 +362,7 @@ files:
 - app/views/spina/pages/_partner_societies.html.haml
 - app/views/spina/pages/_partner_society.html.haml
 - config/initializers/assets.rb
+- config/initializers/primer.rb
 - config/initializers/themes/conferences_primer_theme.rb
 - config/locales/en.rb
 - config/locales/en.yml

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

@@ -1 +0,0 @@
-.my-4{ role: 'tabpanel', hidden: hidden }= yield