spina-conferences-primer_theme-fork 0.9.1 → 1.0.0.rc2

data/app/views/conferences_primer_theme/pages/committee.html.haml

@@ -1,22 +1,23 @@
 - cache current_page do
-  = render(Primer::HeadingComponent.new) { current_page.title }
+  = render(Primer::HeadingComponent.new(tag: :h1)) { current_page.title }
 
   - if content(:text).present?
-    = render(Primer::MarkdownComponent.new(mt: 4)) { content.html(:text) }
+    = render(Primer::Markdown.new(mt: 4)) { content.html(:text).to_s }
 
   - if content(:committee_bios).present?
     %ul.mt-4
       - repeater(:committee_bios) do |committee_bio|
         %li.list-style-none.py-4.border-bottom
-          = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil], align_items: :start) do
+          = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil], align_items: :flex_start) do
             - if committee_bio.content(:profile_picture).present?
-              = render Primer::AvatarComponent.new(src: committee_bio.content.image_url(:profile_picture, resize_to_fill: [150, 150]),
-                                                   srcset: srcset_string(committee_bio.content(:profile_picture),
-                                                                         variant: { resize_to_fill: [150, 150] }),
-                                                   draggable: false, alt: committee_bio.content(:profile_picture).alt, 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
+              -# TODO: create helper to replace this, because Primer::Beta::Avatar limits size to 80 sadly
+              %img.avatar.circle.mr-md-3.mb-3.mb-md-0.flex-shrink-0{src: committee_bio.content.image_url(:profile_picture, resize_to_fill: [150, 150]),
+                                                                    srcset: srcset_string(committee_bio.content(:profile_picture),
+                                                                                          variant: { resize_to_fill: [150, 150] }),
+                                                                    draggable: false,
+                                                                    alt: committee_bio.content(:profile_picture).alt}
+            = render Primer::BoxComponent.new(flex: :auto) do
+              = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil], mb: 1) do
                 = render Primer::BoxComponent.new do
                   - if committee_bio.content(:name).present?
                     = render(Primer::HeadingComponent.new(tag: :h3)) do
@@ -26,7 +27,7 @@
                         = committee_bio.content(:name)
                   - if committee_bio.content(:institution).present?
                     = render(Primer::HeadingComponent.new(tag: :h4)) { committee_bio.content(:institution) }
-                = render Primer::ButtonGroupComponent.new(mt: [1, nil, 0, nil], ml: [nil, nil, 1, nil],
+                = render Primer::ButtonGroup.new(mt: [1, nil, 0, nil], ml: [nil, nil, 1, nil],
                                                           aria: { label: t(:'.contact_buttons') }) do |component|
                   - if committee_bio.content(:twitter_profile).present?
                     = component.button(tag: :a, href: committee_bio.content(:twitter_profile)) do
@@ -37,6 +38,6 @@
                       = render Primer::OcticonComponent.new('link-external')
                       = t(:'.facebook')
               - if committee_bio.content(:bio).present?
-                = render(Primer::TextComponent.new(tag: :div, color: :text_secondary)) { committee_bio.content.html(:bio) }
+                = render(Primer::Beta::Text.new(tag: :div, color: :muted)) { committee_bio.content.html(:bio).to_s }
   - else
     = render Primer::BlankslateComponent.new(title: t(:'.no_bios'), icon: 'file')

data/app/views/conferences_primer_theme/pages/embedded_form.html.haml

@@ -1,8 +1,8 @@
 - cache current_page do
-  = render(Primer::HeadingComponent.new) { current_page.title }
+  = render(Primer::HeadingComponent.new(tag: :h1)) { current_page.title }
 
   - if content(:text).present?
-    = render(Primer::MarkdownComponent.new(mt: 4)) { content.html(:text) }
+    = render(Primer::Markdown.new(mt: 4)) { content.html(:text).to_s }
 
   - if content(:embed_url).present?
     = render Primer::BoxComponent.new(mt: 4, col: 12) do

data/app/views/conferences_primer_theme/pages/events.html.haml

@@ -1,8 +1,8 @@
 - cache current_page do
-  = render(Primer::HeadingComponent.new) { current_page.title }
+  = render(Primer::HeadingComponent.new(tag: :h1)) { current_page.title }
 
   - if content(:text).present?
-    = render(Primer::MarkdownComponent.new(mt: 4)) { content.html(:text) }
+    = render(Primer::Markdown.new(mt: 4)) { content.html(:text).to_s }
 
   - if content(:events_list).present?
     = render Primer::SubheadComponent.new(mt: 4) do |component|
@@ -12,7 +12,7 @@
         - else
           = t :'.upcoming'
 
-    - content(:events_list).filter do |event| 
+    - content(:events_list).filter do |event|
       - (event.content(:start_date).blank? || event.content(:start_date) >= Date.today) && event.content(:is_archived) != Spina::Parts::Conferences::PrimerTheme::Checkbox::CHECKED_VALUE
     - end.then do |events|
       - if events.any?

data/app/views/conferences_primer_theme/pages/homepage.html.haml

@@ -8,8 +8,8 @@
           - content(:carousel).each_with_index do |carousel_item, index|
             = render partial: 'conferences_primer_theme/partials/homepage_item', locals: { item: carousel_item }
           - if content(:carousel).many?
-            .container-lg.height-full.d-flex.flex-column-reverse.mb-8
-              = render(Primer::ButtonGroupComponent.new) do |component|
+            .container-lg.height-full.d-flex.flex-column-reverse.mb-8{ style: 'z-index: 5' }
+              = render(Primer::ButtonGroup.new) do |component|
                 = component.button(data: { action: :'slideshow#previous' }) do
                   = render Primer::OcticonComponent.new('arrow-left')
                 = component.button(data: { action: :'slideshow#next' }) do

data/app/views/conferences_primer_theme/pages/information.html.haml

@@ -1,5 +1,5 @@
 - cache current_page do
-  = render(Primer::HeadingComponent.new) { current_page.title }
+  = render(Primer::HeadingComponent.new(tag: :h1)) { current_page.title }
 
   - if content(:text).present?
-    = render(Primer::MarkdownComponent.new(mt: 4)) { content.html(:text) }
+    = render(Primer::Markdown.new(mt: 4)) { content.html(:text).to_s }

data/app/views/conferences_primer_theme/pages/journal_information.html.haml

@@ -0,0 +1,10 @@
+- cache [current_page, journal_navigation_items] do
+  = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, nil, :row]) do
+    - cache current_page do
+      = render Primer::BoxComponent.new(col: [nil, nil, nil, 9]) do
+        = render(Primer::HeadingComponent.new(tag: :h1)) { current_page.title }
+
+        - if content(:text).present?
+          = render(Primer::Markdown.new(mt: 4)) { content.html(:text).to_s }
+
+    = render 'journal_navigation'

data/app/views/conferences_primer_theme/pages/periodical.html.haml

@@ -1,23 +1,23 @@
 - cache current_page do
-  = render(Primer::HeadingComponent.new) { current_page.title }
+  = render(Primer::HeadingComponent.new(tag: :h1)) { current_page.title }
 
   - if content(:text).present?
-    = render(Primer::MarkdownComponent.new(mt: 4)) { content.html(:text) }
-  
+    = render(Primer::Markdown.new(mt: 4)) { content.html(:text).to_s }
+
   - if content(:periodical_issues).present?
     %ul.mt-4
       - repeater(:periodical_issues) do |issue|
         %li.list-style-none.py-4.border-bottom
-          = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil], align_items: :start) do
+          = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil], align_items: :flex_start) do
             - if issue.content(:cover_img).present?
-              = render Primer::FlexItemComponent.new(mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], flex_shrink: 0) do
+              = render Primer::BoxComponent.new(mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], flex_shrink: 0) do
                 = render Primer::LinkComponent.new(href: issue.content(:url)) do
                   = image_tag(issue.content.image_url(:cover_img, resize_to_limit: [300, 300]),
                               srcset: srcset_string(issue.content(:cover_img),
                                                     variant: { resize_to_limit: [300, 300] }),
                               alt: issue.content(:cover_img).alt)
-            = render Primer::FlexItemComponent.new(flex_auto: true) do
-              = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil], mb: 1) do
+            = render Primer::BoxComponent.new(flex: :auto) do
+              = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil], mb: 1) do
                 = render Primer::BoxComponent.new do
                   - if issue.content(:name).present?
                     = render Primer::HeadingComponent.new(tag: :h2) do
@@ -26,9 +26,9 @@
                     = render Primer::HeadingComponent.new(tag: :h4) do
                       = time_tag issue.content(:date), format: :long_ordinal
               - if issue.content(:description).present?
-                = render Primer::MarkdownComponent.new(tag: :div, color: :text_secondary) do
-                  = issue.content.html(:description)
-              = render Primer::FlexComponent.new(direction: [:column, nil, :row, nil], align_items: :start) do
+                = render Primer::Markdown.new(tag: :div, color: :muted) do
+                  = issue.content.html(:description).to_s
+              = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil], align_items: :flex_start) do
                 - if issue.content(:url).present?
                   = render Primer::ButtonComponent.new(scheme: :primary, tag: :a, href: issue.content(:url), mt: 2, mr: 2) do
                     = render Primer::OcticonComponent.new('link-external')

data/app/views/conferences_primer_theme/pages/show.html.haml

@@ -1,2 +1,2 @@
 - cache current_page do
-  = render(Primer::HeadingComponent.new) { current_page.title }
+  = render(Primer::HeadingComponent.new(tag: :h1)) { current_page.title }

data/app/views/conferences_primer_theme/partials/_event.html.haml

@@ -1,5 +1,5 @@
 %li.list-style-none.py-4.border-bottom
-  = render Primer::FlexComponent.new(direction: :column, align_items: :start) do
+  = render Primer::BoxComponent.new(display: :flex, direction: :column, align_items: :flex_start) do
     - if event.content(:name).present?
       = render(Primer::HeadingComponent.new(tag: :h3, flex: :auto)) { event.content(:name) }
     = render Primer::HeadingComponent.new(tag: :h4, flex: :auto) do
@@ -21,7 +21,7 @@
     = render Primer::HeadingComponent.new(tag: :h5, flex: :auto) do
       = event.content(:location).presence
     - if event.content(:description).present?
-      = render(Primer::MarkdownComponent.new(mt: 1, color: :text_secondary)) { event.content.html(:description) }
+      = render(Primer::Markdown.new(mt: 1, color: :muted)) { event.content.html(:description).to_s }
     - if event.content(:url).present?
       = render Primer::ButtonComponent.new(tag: :a, href: event.content(:url), mt: 2) do
         = render Primer::OcticonComponent.new('link-external')

data/app/views/conferences_primer_theme/partials/_homepage_item.html.haml

@@ -13,8 +13,8 @@
         = render(Primer::HeadingComponent.new(tag: :h1, classes: 'h000-mktg lh-condensed-ultra')) do
           = item.content(:title)
       %div{ style: 'text-shadow: 0 1px 1px rgba(var(--color-scale-black), 0.25), 0 1px 25px rgba(var(--color-scale-black), 0.75);' }
-        = render(Primer::MarkdownComponent.new(my: 4)) do
-          = item.content(:description).html_safe
+        = render(Primer::Markdown.new(my: 4)) do
+          = item.content.html(:description).to_s
       - if item.content(:url).present?
         = link_to t('.more_info'), item.content(:url),
                   class: %w[btn-mktg btn-large-mktg btn-primary-mktg f3 mt-4]

data/app/views/layouts/conferences_primer_theme/application.html.haml

@@ -1,5 +1,5 @@
 - content_for :breadcrumbs do
-  - if current_page.ancestors.any?
+  - if current_page.ancestors.any? || current_page.resource&.name == 'journal'
     = ancestors
 
 = render template: 'layouts/spina/conferences/primer_theme/application',

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

@@ -11,22 +11,17 @@
     %base{ target: '_blank' }
     = csrf_meta_tags
     %title= t(:'.title', title: seo_title, suffix: current_account.name)
-    = render 'spina/shared/google_site_verification'
-    = 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/filter-input-element/dist/index.js') }
-    %script{ type: 'module', src: asset_path('@github/details-menu-element/dist/index.js') }
+    = render 'google_site_verification'
+    = render 'analytics'
+    = stylesheet_link_tag 'spina/conferences/primer_theme/application', media: 'all', data: { turbo_track: true }
+    = primer_theme_importmap_tags
     = yield :head
   %body
     - if current_spina_user.present?
-      .admin= render 'spina/shared/admin_bar'
+      .admin= render 'admin_bar'
     %header= render 'navigation'
     - unless local_assigns[:hide_alert]
-      = render 'current_conference_alert'
+      = render 'alert'
     - if content_for? :flash
       .flash-messages= yield :flash
     %main
@@ -35,6 +30,4 @@
         .container-lg.p-responsive.mt-4= yield :breadcrumbs
       = yield :header
       .container-lg.p-responsive.mt-4= yield
-    %footer
-      .container-lg.p-responsive.py-4= render 'footer'
-    = render 'spina/shared/social'
+    %footer.footer.width-full.container-lg.p-responsive= render 'footer'

data/app/views/layouts/spina/conferences/primer_theme/journal/articles.html.haml

@@ -1,2 +1,5 @@
+- content_for :breadcrumbs do
+  = render_breadcrumbs(builder: Spina::Conferences::PrimerTheme::Breadcrumbs::Builder)
+
 = render template: 'layouts/spina/conferences/primer_theme/application',
          locals: { author: current_account.name, description: @description, title: @title, seo_title: @title, hide_alert: false }

data/app/views/layouts/spina/conferences/primer_theme/journal/authors.html.haml

@@ -0,0 +1,5 @@
+- content_for :breadcrumbs do
+  = render_breadcrumbs(builder: Spina::Conferences::PrimerTheme::Breadcrumbs::Builder)
+
+= render template: 'layouts/spina/conferences/primer_theme/application',
+         locals: { author: current_account.name, description: @description, title: @title, seo_title: @title, hide_alert: false }

data/app/views/layouts/spina/conferences/primer_theme/journal/issues.html.haml

@@ -1,2 +1,5 @@
+- content_for :breadcrumbs do
+  = render_breadcrumbs(builder: Spina::Conferences::PrimerTheme::Breadcrumbs::Builder)
+
 = render template: 'layouts/spina/conferences/primer_theme/application',
          locals: { author: current_account.name, description: @description, title: @title, seo_title: @title, hide_alert: false }

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

@@ -0,0 +1,7 @@
+- if current_spina_user.present?
+  #admin_bar
+    = render Primer::BoxComponent.new(bg: :accent, p: 3, text_align: :right) do
+      = render Primer::LinkComponent.new(href: spina.admin_root_path, mr: 3, data: { turbo: false }, classes: 'btn') do
+        = t 'spina.edit_website'
+      = render Primer::LinkComponent.new(href: spina.admin_logout_path, classes: 'btn') do
+        = t 'spina.logout'

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

@@ -0,0 +1,4 @@
+- content_for :flash do
+  - cache current_account do
+    - if current_account.has_content? :alert
+      = render(Primer::FlashComponent.new(full: true, variant: :warning)) { current_account.content(:alert).html_safe }

data/app/views/spina/application/_analytics.html.erb

@@ -0,0 +1,10 @@
+<script type="text/javascript">
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', '<%= current_account.google_analytics %>', 'auto');
+  ga('set', 'anonymizeIp', true);
+  ga('send', 'pageview');
+</script>

data/app/views/spina/application/{_footer_content.html.haml → _cookies_footer.html.haml}

@@ -1,4 +1,4 @@
-= render Primer::DetailsComponent.new(overlay: :dark, reset: true, mb: [2, 0, nil, nil], mr: [nil, 2, nil, nil]) do |component|
+= render Primer::DetailsComponent.new(overlay: :dark, reset: true) do |component|
   = component.summary(button_type: :outline, variant: :small, aria: { haspopup: 'dialog' }, type: nil) do
     = render Primer::OcticonComponent.new('info')
     = t :'.cookies'

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

@@ -1,17 +1,25 @@
 - cache [footer_navigation_items, current_account] do
-  = 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
-      - cache footer_navigation_items 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 }
-      = render 'footer_content'
+  = render Primer::BoxComponent.new(position: :relative, display: :flex,
+    flex_wrap: :wrap,
+    direction: [:column_reverse, nil, :row, nil],
+    align_items: :center,
+    justify_content: :space_between,
+    mt: 6, pt: 6, pb: 2, mb: 6,
+    font_size: 6, color: :muted, border: :top, border_color: :muted) do
+    %div
+      = render(Primer::Beta::Text.new(tag: :span, color: :muted, mr: [nil, 2, nil, nil], font_size: 6, flex_grow: 0)) do
+        = t :'.copyright', name: current_account.name, year: Date.today.year
+    - cache footer_navigation_items do
+      %ul.list-style-none.d-flex.flex-wrap.flex-1.flex-justify-center.flex-lg-justify-around.mb-2.mb-lg-0
+        - footer_navigation_items.each do |item|
+          - cache item do
+            %li.mr-3.mr-lg-0
+              = render Primer::LinkComponent.new(href: item.materialized_path) do
+                = item.menu_title
+    = render Primer::BoxComponent.new(display: :flex, mb: [2, nil, 0, nil]) do
+      = render 'cookies_footer'
       - 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
+                                              display: :inline_block, ml: 2) do
           = render Primer::OcticonComponent.new('mark-github')
           = t :'.find_on_github'
-    = render(Primer::TextComponent.new(tag: :small, color: :text_secondary, mr: [nil, 2, nil, nil], font_size: 6, flex_grow: 0)) do
-      = t :'.copyright', name: current_account.name, year: Date.today.year

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

@@ -0,0 +1 @@
+%meta{ name: 'google-site-verification' , content: current_account.google_site_verification  }

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

@@ -0,0 +1,17 @@
+- cache [current_page, journal_navigation_items] do
+  = render Primer::MenuComponent.new(ml: [0, nil, nil, 4], mt: [4, 0, nil, nil], col: [nil, nil, nil, 3]) do |component|
+    - component.heading(tag: :h2) do
+      = Spina::Admin::Journal::Journal.instance.name
+
+    - component.item(selected: controller_name == 'issues', href: frontend_issues_path) do
+      = t '.issues'
+    - component.item(selected: controller_name == 'authors', href: frontend_authors_path) do
+      = t '.authors'
+
+    - journal_navigation_items.each do |page|
+      - component.item(selected: page == current_page, href: page.materialized_path) do
+        = page.menu_title
+      - if page.children&.in_menu.live.any?
+        - page.children.in_menu.live.sorted.each do |sub_page|
+          - component.item(selected: sub_page == current_page, href: sub_page.materialized_path, pl: 5) do
+            = sub_page.menu_title

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

@@ -1,5 +1,2 @@
 %nav.d-flex.flex-column.flex-self-stretch
   = render partial: 'mobile_navigation_item', collection: main_navigation_items, as: :navigation_item, cache: -> navigation_item { [navigation_item, navigation_item.children] }
-  .Header-item.mr-0.border-top.border-white-fade-15= link_to 'Blog', frontend_blog_root_path, class: %w[Header-link py-2 py-lg-0]
-  .Header-item.mr-0.border-top.border-white-fade-15= link_to 'Journal', frontend_issues_path, class: %w[Header-link py-2 py-lg-0]
-  .Header-item.mr-0.border-top.border-white-fade-15= link_to 'Conferences', frontend_conferences_path, class: %w[Header-link py-2 py-lg-0]

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

@@ -7,6 +7,3 @@
       .Header-item.Header-item--full.flex-column.width-full.flex-order-1.mr-0.mt-3
         = render partial: 'mobile_navigation_items'
     = render partial: 'navigation_item', collection: main_navigation_items, cache: -> navigation_item { [navigation_item, navigation_item.children] }
-    .Header-item.d-none.d-lg-flex= link_to 'Blog', frontend_blog_root_path, class: %w[Header-link]
-    .Header-item.d-none.d-lg-flex= link_to 'Journal', frontend_issues_path, class: %w[Header-link]
-    .Header-item.d-none.d-lg-flex= link_to 'Conferences', frontend_conferences_path, class: %w[Header-link]

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

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

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

@@ -1,10 +1,10 @@
-= render(Primer::HeadingComponent.new) do
+= render(Primer::HeadingComponent.new(tag: :h1)) do
   Blog
 = render(Primer::HeadingComponent.new(tag: :h2)) do
   = t '.category', name: @category.name
 
-= render(Primer::FlexComponent.new(flex: :auto, direction: [:column, nil, :row, nil])) do
-  = render(Primer::FlexItemComponent.new(flex_auto: true)) do
+= render(Primer::BoxComponent.new(display: :flex, flex: :auto, direction: [:column, nil, :row, nil])) do
+  = render(Primer::BoxComponent.new(flex: :auto)) do
     - if @posts.any?
       %ul= render collection: @posts, partial: 'spina/conferences/primer_theme/blog/posts/post', layout: 'list_item', cached: true
     - else

data/app/views/spina/conferences/primer_theme/blog/posts/_post.html.haml

@@ -4,7 +4,8 @@
   = link_to post.title, frontend_blog_post_path(post)
 = render(Primer::HeadingComponent.new(tag: :h4)) do
   = time_tag post.published_at, format: :ordinal_datetime_with_year
-= render(Primer::MarkdownComponent.new(color: :text_secondary)) do
-  = post.excerpt.html_safe
-= render(Primer::TextComponent.new(tag: :div, color: :text_secondary)) do
+- if post.excerpt.present?
+  = render(Primer::Markdown.new(color: :muted)) do
+    = post.excerpt.html_safe
+= render(Primer::Beta::Text.new(tag: :div, color: :muted)) do
   = t '.category_html', name: link_to(post.category.name, frontend_blog_category_path(post.category))

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

@@ -1,8 +1,8 @@
-= render(Primer::HeadingComponent.new) do
+= render(Primer::HeadingComponent.new(tag: :h1)) do
   Blog
 
-= render(Primer::FlexComponent.new(flex: :auto, direction: [:column, nil, :row, nil])) do
-  = render(Primer::FlexItemComponent.new(flex_auto: true)) do
+= render(Primer::BoxComponent.new(display: :flex, flex: :auto, direction: [:column, nil, :row, nil])) do
+  = render(Primer::BoxComponent.new(flex: :auto)) do
     - if @posts.any?
       %ul= render collection: @posts, partial: 'post', layout: 'list_item', cached: true
     - else

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

@@ -1,17 +1,17 @@
-= render(Primer::HeadingComponent.new) do
+= render(Primer::HeadingComponent.new(tag: :h1)) do
   = @post.title
 
 %ul.list-style-none.d-flex.flex-column.flex-sm-row.my-2
-  = render(Primer::FlexComponent.new(tag: :li, mr: 4, align_items: :center)) do
-    = render(Primer::FlexItemComponent.new(mr: 2)) do
+  = render(Primer::BoxComponent.new(display: :flex, tag: :li, mr: 4, align_items: :center)) do
+    = render(Primer::BoxComponent.new(mr: 2)) do
       = render(Primer::OcticonComponent.new('person'))
-    = render(Primer::FlexComponent.new(tag: :address, direction: :column)) do
-      = render(Primer::TextComponent.new(tag: :div, font_weight: :bold)) { @post.user.name }
+    = render(Primer::BoxComponent.new(display: :flex, tag: :address, direction: :column)) do
+      = render(Primer::Beta::Text.new(tag: :div, font_weight: :bold)) { @post.user.name }
 
 - if @post.image
   = image_tag main_app.url_for(@post.image.file)
 
-= render(Primer::FlexComponent.new(flex: :auto, direction: [:column, nil, :row, nil])) do
-  = render(Primer::FlexItemComponent.new(flex_auto: true)) do
-    = render(Primer::MarkdownComponent.new(tag: :article)) do
+= render(Primer::BoxComponent.new(display: :flex, flex: :auto, direction: [:column, nil, :row, nil])) do
+  = render(Primer::BoxComponent.new(flex: :auto)) do
+    = render(Primer::Markdown.new(tag: :article)) do
       = @post.content.html_safe

data/app/views/spina/conferences/primer_theme/blog/shared/_sidebar.html.haml

@@ -3,7 +3,7 @@
     = render(Primer::HeadingComponent.new(tag: :h3)) do
       = t '.categories'
   - sidebar.row do
-    = render(Primer::MarkdownComponent.new(tag: :div, font_weight: :bold)) do
+    = render(Primer::Markdown.new(tag: :div, font_weight: :bold)) do
       %ul
         - Spina::Admin::Conferences::Blog::Category.all.each do |cat|
           %li= link_to cat.name, frontend_blog_category_path(cat)

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

@@ -1,7 +1,7 @@
-= render Primer::FlexComponent.new(direction: [:column, nil, :row_reverse, nil]) do
+= render Primer::BoxComponent.new(display: :flex, 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
     = render partial: 'institution', collection: conference.institutions, cached: -> institution { [institution, institution.logo] }
-  = render Primer::FlexItemComponent.new(flex_auto: true) do
+  = render Primer::BoxComponent.new(flex: :auto) do
     = render(Primer::HeadingComponent.new(tag: :h3, mb: 1)) { link_to conference.name, frontend_conference_path(conference) }
     %ul.text-secondary.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
       %li.mr-sm-3

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

@@ -1,12 +1,12 @@
-= 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::BoxComponent.new(display: :flex, direction: [:column, nil, :row, nil]) do
+  = render Primer::BoxComponent.new(mr: [nil, nil, 3, nil], mb: [3, nil, 0, nil], col: [nil, nil, 4, nil]) do
+    = render Primer::Beta::Text.new(tag: :div, font_size: 3, font_weight: :light, mb: 1) do
       = render Primer::OcticonComponent.new('clock', vertical_align: :baseline)
       = t :'.times_html', start_time: time_tag(event.start_time, format: :short), finish_time: time_tag(event.finish_time, format: :time)
-    = render Primer::TextComponent.new(tag: :div, color: :text_secondary) do
+    = render Primer::Beta::Text.new(tag: :div, color: :muted) do
       = render Primer::OcticonComponent.new('location')
       = render(Primer::BaseComponent.new(tag: :address, display: :inline)) { event.location }
-  = render Primer::FlexItemComponent.new(flex_auto: true, col: [nil, nil, 8, nil]) do
+  = render Primer::BoxComponent.new(flex: :auto, col: [nil, nil, 8, nil]) do
     = render(Primer::HeadingComponent.new(tag: :h3, mb: 1)) { event.name }
-    = render(Primer::TextComponent.new(tag: :div, color: :text_secondary)) do
+    = render(Primer::Beta::Text.new(tag: :div, color: :muted)) do
       = event.description

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

@@ -5,7 +5,7 @@
         .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'
+            = render Primer::OcticonComponent.new('search', class: 'subnav-search-icon')
     %div{ id: 'event_list' }
       - if events.any?
         %ul{ data: { filter: { list: true } } }

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

@@ -1,6 +1,6 @@
 - cache [@conference, @conference.institutions] do
   .container-lg.p-responsive.mb-4
-    = render(Primer::HeadingComponent.new( mb: [1, nil, 2, nil])) { @conference.name }
+    = render(Primer::HeadingComponent.new(tag: :h1, mb: [1, nil, 2, nil])) { @conference.name }
     %ul.text-secondary.list-style-none.d-flex.flex-column.flex-sm-row.flex-wrap
       %li.mr-sm-3.mb-1
         = render Primer::OcticonComponent.new('calendar')
@@ -19,9 +19,9 @@
     - if @conference.content(:sponsors).present?
       = render Primer::SubheadComponent.new(spacious: true) do |component|
         = component.heading(tag: :h2) { t :'.sponsors.title' }
-      = render Primer::FlexComponent.new(flex_wrap: true, ml: -2, mr: -2, mt: -2, mb: -2) do
+      = render Primer::BoxComponent.new(display: :flex, flex_wrap: :wrap, ml: -2, mr: -2, mt: -2, mb: -2) do
         - repeater @conference.content(:sponsors) do |sponsor|
-          = render Primer::FlexItemComponent.new(m: 2, vertical_align: :middle) do
+          = render Primer::BoxComponent.new(m: 2, vertical_align: :middle) do
             - if sponsor.content(:logo).present?
               = link_to sponsor.content(:website) do
                 = sponsor.content.image_tag(:logo, { resize_to_limit: [200, 60] }, draggable: false,
@@ -30,7 +30,7 @@
               = render(Primer::LinkComponent.new(href: sponsor.content(:website) || '')) { sponsor.content(:name) }
 
   - if @conference.content(:gallery).present?
-    = render Primer::FlexComponent.new(flex_direction: :column, justify_content: :center, align_items: :center, mb: 4, position: :relative,
+    = render Primer::BoxComponent.new(display: :flex, flex_direction: :column, justify_content: :center, align_items: :center, mb: 4, position: :relative,
                                        data: { controller: :slideshow, slideshow_incrementer: 0, slideshow_advance: true }) do
       - @conference.content(:gallery).each_with_index do |image, index|
         = @conference.content.image_tag(image, { resize_to_fill: [1680, 600] }, draggable: false, data: { 'slideshow-target': 'slide' },

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

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

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

@@ -1,6 +1,6 @@
 - 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
+  = render Primer::BoxComponent.new(display: :flex, direction: [:column, nil, nil, :row], my: 4) do
+    = render Primer::BoxComponent.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
@@ -10,13 +10,13 @@
               %span.count{ title: t(:'.results') }= @conference.presentations.count
         = render partial: 'presentation_type', collection: @conference.presentation_types.sorted,
                  cached: -> presentation_type { [presentation_type, @presentation_type] }
-    = render Primer::FlexItemComponent.new(col: [12, nil, nil, 9]) do
+    = render Primer::BoxComponent.new(col: [12, nil, nil, 9]) do
       - if @presentations.any?
         %filter-input{ aria: { owns: 'presentation_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'
+              = render Primer::OcticonComponent.new('search', class: 'subnav-search-icon')
       %div{ id: 'presentation_list' }
         - if @presentations.any?
           %ul{ data: { filter: { list: true } } }

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

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