Merge pull request #268 from opf/bump/primer-upstream

HDinger · web-flow · commit 26783e59795f · 2025-04-07T11:51:00.000+02:00
Bump/primer upstream 0.40.0
diff --git a/.changeset/six-moose-wait.md b/.changeset/six-moose-wait.md
@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Adding upsell scheme to Primer::Alpha::Banner
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_upsell/aria-snapshot.yml b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_upsell/aria-snapshot.yml
@@ -0,0 +1 @@
+- paragraph: This is a upsell banner!
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_upsell/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_upsell/default.png
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_upsell/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/banner/scheme_upsell/focused.png
diff --git a/app/components/primer/alpha/banner.pcss b/app/components/primer/alpha/banner.pcss
@@ -13,7 +13,7 @@
   grid-template-columns: min-content 1fr minmax(0, auto) min-content;
   grid-template-rows: min-content;
 
-  /* `sm` breakpoint variantion */
+  /* `sm` breakpoint variation */
   @media (max-width: 543.98px) {
     grid-template-areas:
       'visual message close'
@@ -108,6 +108,16 @@
     }
   }
 
+  &.Banner--upsell {
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-done-muted), var(--bgColor-done-muted));
+    border-color: var(--borderColor-done-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--fgColor-done);
+    }
+  }
+
   /* Full-width */
 
   &.Banner--full {
diff --git a/app/components/primer/alpha/banner.rb b/app/components/primer/alpha/banner.rb
@@ -61,21 +61,23 @@ class Banner < Primer::Component
         DEFAULT_SCHEME => "",
         :warning => "Banner--warning",
         :danger => "Banner--error",
-        :success => "Banner--success"
+        :success => "Banner--success",
+        :upsell => "Banner--upsell"
       }.freeze
 
       LEGACY_SCHEME_MAPPINGS = {
         DEFAULT_SCHEME => "",
         :warning => "flash-warn",
         :danger => "flash-error",
-        :success => "flash-success"
+        :success => "flash-success",
       }.freeze
 
       DEFAULT_ICONS = {
         default: :bell,
         warning: :alert,
         danger: :stop,
-        success: :"check-circle"
+        success: :"check-circle",
+        upsell: :info,
       }.freeze
 
       DEFAULT_DISMISS_SCHEME = :none
diff --git a/app/components/primer/alpha/select_panel.rb b/app/components/primer/alpha/select_panel.rb
@@ -354,9 +354,8 @@ def with_avatar_item(**system_arguments)
       # @param dynamic_aria_label_prefix [String] If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button.
       # @param body_id [String] The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a "-body" suffix.
       # @param list_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy.
-      # @param form_arguments [Hash] Form arguments
-
-      # @param use_experimental_non_local_form [Boolean] A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values.
+      # @param form_arguments [Hash] Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag.
+      # @param use_experimental_non_local_form [Boolean] A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923.
       # @param show_filter [Boolean] Whether or not to show the filter input.
       # @param open_on_load [Boolean] Open the panel when the page loads.
       # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
diff --git a/demo/Gemfile b/demo/Gemfile
@@ -38,7 +38,7 @@ gem "bootsnap", ">= 1.4.2", require: false
 
 gem "openproject-primer_view_components", path: "../"
 gem "view_component", '>= 3.11.0'
-gem "lookbook", "~> 2.3.5" unless rails_version.to_f < 7
+gem "lookbook", "~> 2.3.8" unless rails_version.to_f < 7
 
 gem "vite_rails", "~> 3.0"
 gem "cssbundling-rails", "~> 1.4"
diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock
@@ -53,13 +53,13 @@ GEM
     bootsnap (1.18.4)
       msgpack (~> 1.2)
     builder (3.3.0)
-    byebug (11.1.3)
+    byebug (12.0.0)
     coderay (1.1.3)
     colorize (0.8.1)
-    concurrent-ruby (1.3.5)
+    concurrent-ruby (1.3.4)
     connection_pool (2.5.0)
     crass (1.0.6)
-    css_parser (1.21.0)
+    css_parser (1.21.1)
       addressable
     cssbundling-rails (1.4.3)
       railties (>= 6.0.0)
@@ -208,7 +208,7 @@ GEM
     loofah (2.24.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    lookbook (2.3.7)
+    lookbook (2.3.8)
       activemodel
       css_parser
       htmlbeautifier (~> 1.3)
@@ -226,7 +226,7 @@ GEM
       logger
       mime-types-data (~> 3.2015)
     mime-types-data (3.2025.0304)
-    minitest (5.25.4)
+    minitest (5.25.5)
     ms_rest (0.7.6)
       concurrent-ruby (~> 1.0)
       faraday (>= 0.9, < 2.0.0)
@@ -242,11 +242,11 @@ GEM
     mutex_m (0.2.0)
     netrc (0.11.0)
     nio4r (2.7.4)
-    nokogiri (1.18.3-arm64-darwin)
+    nokogiri (1.18.6-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.3-x86_64-darwin)
+    nokogiri (1.18.6-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.3-x86_64-linux-gnu)
+    nokogiri (1.18.6-x86_64-linux-gnu)
       racc (~> 1.4)
     oj (3.16.10)
       bigdecimal (>= 3.0)
@@ -257,12 +257,12 @@ GEM
     pp (0.6.2)
       prettyprint
     prettyprint (0.2.0)
-    pry (0.14.2)
+    pry (0.15.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
-    pry-byebug (3.10.1)
-      byebug (~> 11.0)
-      pry (>= 0.13, < 0.15)
+    pry-byebug (3.11.0)
+      byebug (~> 12.0)
+      pry (>= 0.13, < 0.16)
     psych (5.2.3)
       date
       stringio
@@ -301,7 +301,7 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rdoc (6.12.0)
+    rdoc (6.13.1)
       psych (>= 4.0.0)
     recursive-open-struct (1.3.1)
       ostruct
@@ -334,17 +334,17 @@ GEM
     statsd-instrument (3.9.9)
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
-    stringio (3.1.5)
+    stringio (3.1.6)
     thor (1.3.2)
     timeliness (0.3.10)
-    turbo-rails (2.0.12)
-      actionpack (>= 6.0.0)
-      railties (>= 6.0.0)
+    turbo-rails (2.0.13)
+      actionpack (>= 7.1.0)
+      railties (>= 7.1.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    view_component (3.19.0)
+    view_component (3.22.0)
       activesupport (>= 5.2.0, < 8.1)
-      concurrent-ruby (~> 1.0)
+      concurrent-ruby (= 1.3.4)
       method_source (~> 1.0)
     vite_rails (3.0.19)
       railties (>= 5.1, < 9)
@@ -385,7 +385,7 @@ DEPENDENCIES
   kuby-core (~> 0.20)
   kuby-kind (~> 0.2)
   listen
-  lookbook (~> 2.3.5)
+  lookbook (~> 2.3.8)
   openproject-primer_view_components!
   pry-byebug
   puma (~> 6.6.0)
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "dependencies": {
     "@primer/css": "^21.5.1",
-    "@primer/primitives": "^10.4.0",
+    "@primer/primitives": "^10.5.0",
     "@rails/actioncable": "^7.2.100",
     "@rails/ujs": "^7.1.501",
     "turbolinks": "^5.2.0"
diff --git a/docs/adr/0246-record-architecture-decisions.md b/docs/adr/0246-record-architecture-decisions.md
@@ -4,7 +4,7 @@ Date: 2021-02-18
 
 ## Status
 
-Accepted
+Accepted and adopted
 
 ## Context
 
diff --git a/docs/adr/0250-developing-and-publishing-clientside-behaviours.md b/docs/adr/0250-developing-and-publishing-clientside-behaviours.md
@@ -4,18 +4,18 @@ Date: 2021-02-19
 
 ## Status
 
-Accepted
+Accepted and adopted
 
 ## Context
 
 We want to ship client side behavioural elements with Primer View Components to increase the fidelity of our components.
 
 Doing so requires us to align to a set of constraints for the Browser ecosystem, as well as the ecosystems that consumers of Primer View Components have:
 
-- We need to produce a JavaScript based artefact, as this is the language browsers use for client side behaviours.
-- The artefact should be easily consumable by existing tool chains of our consumers, which may or may not be the Rails Asset Pipeline.
-- The setup process should be uncomplicated and familiar to consumers; by using existing Rails paradigms, or JavaScript ecosystem paradigms or tools such as npm.
-- Client side behaviours should be well tested and offer the same level of quality the existing non-behavioural components do.
+* We need to produce a JavaScript based artefact, as this is the language browsers use for client side behaviours.
+* The artefact should be easily consumable by existing tool chains of our consumers, which may or may not be the Rails Asset Pipeline.
+* The setup process should be uncomplicated and familiar to consumers; by using existing Rails paradigms, or JavaScript ecosystem paradigms or tools such as npm.
+* Client side behaviours should be well tested and offer the same level of quality the existing non-behavioural components do.
 
 ## Decision
 
diff --git a/docs/adr/0251-use-catalyst-for-client-side-behaviours.md b/docs/adr/0251-use-catalyst-for-client-side-behaviours.md
@@ -4,7 +4,7 @@ Date: 2022-04-12
 
 ## Status
 
-Accepted
+Accepted and adopted
 
 ## Context
 
@@ -22,22 +22,22 @@ Any new Primer ViewComponent behaviours should be authored using Catalyst.
 
 ## Considered Options
 
-- Don't use Catalyst in PVC.
-  - Pros:
+* Don't use Catalyst in PVC.
+  * Pros:
     Developers who don't have Catalyst experience don't need to learn how the library works.
-    - The bundle size doesn't need to increase by 1kb.
-  - Cons:
-    - Migrating components from the github.com codebase would need to be converted to Web Components without Catalyst.
-- Use another JavaScript behaviour library or strategy than Catalyst.
-  - Pros:
-    - The bundle size doesn't need to increase by 1kb.
-  - Cons:
-    - Migrating components from the github.com codebase would need to be converted to Web Components without Catalyst.
-    - PVC JavaScript behaviours would differ from how GitHub engineers write JavaScript behaviours today.
+    * The bundle size doesn't need to increase by 1kb.
+  * Cons:
+    * Migrating components from the github.com codebase would need to be converted to Web Components without Catalyst.
+* Use another JavaScript behaviour library or strategy than Catalyst.
+  * Pros:
+    * The bundle size doesn't need to increase by 1kb.
+  * Cons:
+    * Migrating components from the github.com codebase would need to be converted to Web Components without Catalyst.
+    * PVC JavaScript behaviours would differ from how GitHub engineers write JavaScript behaviours today.
 
 ## Consequences
 
 <!-- What becomes easier or more difficult to do and any risks introduced by the change that will need to be mitigated.-->
 
-- The Primer ViewComponents JS bundle gets larger.
-- Developers unfamiliar with Catalyst need to get familiar with the library.
+* The Primer ViewComponents JS bundle gets larger.
+* Developers unfamiliar with Catalyst need to get familiar with the library.
diff --git a/docs/adr/0252-build-component-css-with-ruby-code.md b/docs/adr/0252-build-component-css-with-ruby-code.md
@@ -4,7 +4,7 @@ Date: 2022-08-17
 
 ## Status
 
-Accepted
+Accepted and Adopted
 
 ## Context
 
@@ -38,16 +38,16 @@ In our github.com production bundle we have a few options:
 
 Pros:
 
-- Doesn't require us to change already established norms.
-- Has storybook site
+* Doesn't require us to change already established norms.
+* Has storybook site
 
 Cons:
 
-- Requires extra releases in both libraries when iterating on component architecture.
-- Cognitive disassociation between Primer::ViewComponent and .PrimerCssComponent
-- Uses old SCSS technology
+* Requires extra releases in both libraries when iterating on component architecture.
+* Cognitive disassociation between Primer::ViewComponent and .PrimerCssComponent
+* Uses old SCSS technology
 
 ## Consequences
 
-- This might make sharing CSS with Primer React more difficult, as it will now be located in a Rails-specific repository.
-- The source of truth for CSS will be split across PVC and PCSS, at least in the short term.
+* This might make sharing CSS with Primer React more difficult, as it will now be located in a Rails-specific repository.
+* The source of truth for CSS will be split across PVC and PCSS, at least in the short term.
diff --git a/package-lock.json b/package-lock.json
diff --git a/previews/primer/alpha/banner_preview.rb b/previews/primer/alpha/banner_preview.rb
diff --git a/test/components/alpha/banner_test.rb b/test/components/alpha/banner_test.rb

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@openproject/primer-view-components': minor
 +---
++
 +Adding upsell scheme to Primer::Alpha::Banner