spina-conferences-primer_theme 0.1.11 → 0.1.16

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), 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::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,19 +1,22 @@
-.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 } } }
       = 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,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) 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?
-        .flex-shrink-0
-          = render Primer::AvatarComponent.new(src: src(committee_bio.content(:profile_picture).file, resize_to_fill: [150, 150]),
-                                               srcset: concat_srcset(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
+      - if committee_bio.has_content?(:profile_picture) && committee_bio.content(:profile_picture).persisted? && committee_bio.content(:profile_picture).file.present?
+        = 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/_committee_bios.html.haml

@@ -1,6 +1,7 @@
 - if committee_bios.structure_items.any?
   %ul{ class: dom_class(committee_bios), id: dom_id(committee_bios) }
     = render partial: 'committee_bio', collection: committee_bios.structure_items.sorted_by_structure, layout: 'list_item',
+             locals: { list_item_id: ->(local_assigns) { dom_id(local_assigns[:committee_bio]) } },
              cached: ->(committee_bio) { [committee_bio, committee_bio.structure_parts.collect(&:structure_partable)] }
 - else
   = render Primer::BlankslateComponent.new(title: t(:'.no_bios'), icon: 'file')

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,