Move Banner to alpha namespace (#1579)

Co-authored-by: Jon Rohan <[email protected]>

.changeset/fast-spies-fry.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Move Banner to alpha namespace

app/components/primer/beta/banner.rb → app/components/primer/alpha/banner.rb

@@ -1,10 +1,10 @@
 # frozen_string_literal: true
 
 module Primer
-  module Beta
+  module Alpha
     # Use `Banner` to highlight important information.
     class Banner < Primer::Component
-      status :beta
+      status :alpha
 
       # A button or custom content that will render on the right-hand side of the component.
       #
@@ -50,29 +50,29 @@ class Banner < Primer::Component
 
       # @example Schemes
       #   <div style="display: grid; row-gap: 15px">
-      #     <%= render(Primer::Beta::Banner.new) { "This is a banner message!" } %>
-      #     <%= render(Primer::Beta::Banner.new(scheme: :warning)) { "This is a warning banner!" } %>
-      #     <%= render(Primer::Beta::Banner.new(scheme: :danger)) { "This is a danger banner!" } %>
-      #     <%= render(Primer::Beta::Banner.new(scheme: :success)) { "This is a success banner!" } %>
+      #     <%= render(Primer::Alpha::Banner.new) { "This is a banner message!" } %>
+      #     <%= render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" } %>
+      #     <%= render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" } %>
+      #     <%= render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" } %>
       #   </div>
       #
       # @example Full width
-      #   <%= render(Primer::Beta::Banner.new(full: true)) { "This is a full width banner!" } %>
+      #   <%= render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner!" } %>
       #
       # @example Dismissible
-      #   <%= render(Primer::Beta::Banner.new(dismissible: true, reappear: true)) { "This is a dismissible banner!" } %>
+      #   <%= render(Primer::Alpha::Banner.new(dismissible: true, reappear: true)) { "This is a dismissible banner!" } %>
       #
       # @example Custom icon
-      #   <%= render(Primer::Beta::Banner.new(icon: :people)) { "This is a banner with a custom icon!" } %>
+      #   <%= render(Primer::Alpha::Banner.new(icon: :people)) { "This is a banner with a custom icon!" } %>
       #
       # @example With action button
-      #   <%= render(Primer::Beta::Banner.new) do |component| %>
+      #   <%= render(Primer::Alpha::Banner.new) do |component| %>
       #     This is a banner with an action button!
       #     <% component.with_action_button(size: :small) { "Take action" } %>
       #   <% end %>
       #
       # @example With custom action
-      #   <%= render(Primer::Beta::Banner.new) do |component| %>
+      #   <%= render(Primer::Alpha::Banner.new) do |component| %>
       #     Comment saved!
       #     <% component.with_action_content do %>
       #       <%= render(Primer::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
@@ -84,7 +84,7 @@ class Banner < Primer::Component
       # @param dismissible [Boolean] Whether the component can be dismissed with an "x" button.
       # @param description [String] Description text rendered underneath the message.
       # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use. If no icon is provided, a default one will be chosen based on the scheme.
-      # @param scheme [Symbol] <%= one_of(Primer::Beta::Banner::SCHEME_MAPPINGS.keys) %>
+      # @param scheme [Symbol] <%= one_of(Primer::Alpha::Banner::SCHEME_MAPPINGS.keys) %>
       # @param reappear [Boolean] Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(full: false, full_when_narrow: false, dismissible: false, description: nil, icon: nil, scheme: DEFAULT_SCHEME, reappear: false, **system_arguments)

app/components/primer/primer.pcss

@@ -1,5 +1,5 @@
 /* CSS component styles here */
 @import "./alpha/action_list.pcss";
+@import "./alpha/banner.pcss";
 @import './alpha/segmented_control.pcss';
-@import "./beta/banner.pcss";
 @import "./beta/button.pcss";

app/components/primer/primer.ts

@@ -4,8 +4,8 @@ import './alpha/nav_list'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'
+import './alpha/x_banner'
 import './beta/auto_complete/auto_complete'
-import './beta/x_banner'
 import './clipboard_copy'
 import './dropdown'
 import './local_time'

lib/tasks/docs.rake

@@ -44,7 +44,7 @@ namespace :docs do
       Primer::Beta::Avatar,
       Primer::Beta::AvatarStack,
       Primer::Beta::BaseButton,
-      Primer::Beta::Banner,
+      Primer::Alpha::Banner,
       Primer::Beta::Blankslate,
       Primer::Beta::BorderBox,
       Primer::Beta::BorderBox::Header,
@@ -103,7 +103,7 @@ namespace :docs do
       Primer::LocalTime,
       Primer::Alpha::ImageCrop,
       Primer::Beta::AutoComplete,
-      Primer::Beta::Banner,
+      Primer::Alpha::Banner,
       Primer::ClipboardCopy,
       Primer::TabContainerComponent,
       Primer::TimeAgoComponent,

previews/primer/beta/banner_preview.rb → previews/primer/alpha/banner_preview.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  module Beta
+  module Alpha
     # @label Banner
     class BannerPreview < ViewComponent::Preview
       # @label Playground
@@ -14,14 +14,14 @@ class BannerPreview < ViewComponent::Preview
       # @param content text
       # @param description text
       # @param reappear [Boolean]
-      def playground(full: false, full_when_narrow: false, dismissible: false, icon: :people, scheme: Primer::Beta::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner!", description: nil)
+      def playground(full: false, full_when_narrow: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner!", description: nil)
         icon = nil if icon == :none
-        render(Primer::Beta::Banner.new(full: full, full_when_narrow: full_when_narrow, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, description: description, reappear: reappear)) { content }
+        render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, description: description, reappear: reappear)) { content }
       end
 
       # @label Default
       def default
-        render(Primer::Beta::Banner.new) { "This is a banner!" }
+        render(Primer::Alpha::Banner.new) { "This is a banner!" }
       end
 
       # @label With action button
@@ -32,7 +32,7 @@ def default
       # @param scheme [Symbol] select [default, warning, danger, success]
       # @param content text
       # @param reappear [Boolean]
-      def with_action_button(full: false, dismissible: false, icon: :people, scheme: Primer::Beta::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner with an action!")
+      def with_action_button(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner with an action!")
         icon = nil if icon == :none
         render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
       end
@@ -45,7 +45,7 @@ def with_action_button(full: false, dismissible: false, icon: :people, scheme: P
       # @param scheme [Symbol] select [default, warning, danger, success]
       # @param content text
       # @param reappear [Boolean]
-      def with_action_content(full: false, dismissible: false, icon: :people, scheme: Primer::Beta::Banner::DEFAULT_SCHEME, reappear: true, content: "Did you know? Comments can be edited.")
+      def with_action_content(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "Did you know? Comments can be edited.")
         icon = nil if icon == :none
         render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
       end

previews/primer/alpha/banner_preview/with_action_button.html.erb

@@ -0,0 +1,4 @@
+<%= render(Primer::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
+  <% component.with_action_button(size: :medium) { "Take action" } %>
+  <%= content %>
+<% end %>

previews/primer/beta/banner_preview/with_action_content.html.erb → previews/primer/alpha/banner_preview/with_action_content.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::Beta::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
+<%= render(Primer::Alpha::Banner.new(full: full, dismissible: dismissible, icon: icon, scheme: scheme, reappear: reappear)) do |component| %>
   <% component.with_action_content do %>
     <%= render(Primer::Beta::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
   <% end %>

static/audited_at.json

@@ -5,6 +5,7 @@
   "Primer::Alpha::ActionList::Item": "",
   "Primer::Alpha::AutoComplete": "",
   "Primer::Alpha::AutoComplete::Item": "",
+  "Primer::Alpha::Banner": "",
   "Primer::Alpha::ButtonMarketing": "",
   "Primer::Alpha::Dialog": "",
   "Primer::Alpha::Dialog::Body": "",
@@ -33,7 +34,6 @@
   "Primer::Beta::AutoComplete::Item": "",
   "Primer::Beta::Avatar": "",
   "Primer::Beta::AvatarStack": "",
-  "Primer::Beta::Banner": "",
   "Primer::Beta::BaseButton": "",
   "Primer::Beta::Blankslate": "",
   "Primer::Beta::BorderBox": "",

static/constants.json

@@ -72,6 +72,27 @@
   },
   "Primer::Alpha::AutoComplete::Item": {
   },
+  "Primer::Alpha::Banner": {
+    "DEFAULT_ICONS": {
+      "default": "bell",
+      "warning": "alert",
+      "danger": "stop",
+      "success": "check-circle"
+    },
+    "DEFAULT_SCHEME": "default",
+    "LEGACY_SCHEME_MAPPINGS": {
+      "default": "",
+      "warning": "flash-warn",
+      "danger": "flash-error",
+      "success": "flash-success"
+    },
+    "SCHEME_MAPPINGS": {
+      "default": "",
+      "warning": "Banner--warning",
+      "danger": "Banner--error",
+      "success": "Banner--success"
+    }
+  },
   "Primer::Alpha::ButtonMarketing": {
     "DEFAULT_SCHEME": "default",
     "DEFAULT_TAG": "button",
@@ -396,27 +417,6 @@
       "span"
     ]
   },
-  "Primer::Beta::Banner": {
-    "DEFAULT_ICONS": {
-      "default": "bell",
-      "warning": "alert",
-      "danger": "stop",
-      "success": "check-circle"
-    },
-    "DEFAULT_SCHEME": "default",
-    "LEGACY_SCHEME_MAPPINGS": {
-      "default": "",
-      "warning": "flash-warn",
-      "danger": "flash-error",
-      "success": "flash-success"
-    },
-    "SCHEME_MAPPINGS": {
-      "default": "",
-      "warning": "Banner--warning",
-      "danger": "Banner--error",
-      "success": "Banner--success"
-    }
-  },
   "Primer::Beta::BaseButton": {
     "DEFAULT_TAG": "button",
     "DEFAULT_TYPE": "button",

static/statuses.json

@@ -5,6 +5,7 @@
   "Primer::Alpha::ActionList::Item": "alpha",
   "Primer::Alpha::AutoComplete": "deprecated",
   "Primer::Alpha::AutoComplete::Item": "deprecated",
+  "Primer::Alpha::Banner": "beta",
   "Primer::Alpha::ButtonMarketing": "alpha",
   "Primer::Alpha::Dialog": "alpha",
   "Primer::Alpha::Dialog::Body": "alpha",
@@ -33,7 +34,6 @@
   "Primer::Beta::AutoComplete::Item": "beta",
   "Primer::Beta::Avatar": "beta",
   "Primer::Beta::AvatarStack": "beta",
-  "Primer::Beta::Banner": "beta",
   "Primer::Beta::BaseButton": "beta",
   "Primer::Beta::Blankslate": "beta",
   "Primer::Beta::BorderBox": "beta",

test/components/beta/banner_test.rb → test/components/alpha/banner_test.rb

@@ -6,7 +6,7 @@ class PrimerBannerTest < Minitest::Test
   include Primer::ComponentTestHelpers
 
   def test_renders
-    render_inline(Primer::Beta::Banner.new) { "foo" }
+    render_inline(Primer::Alpha::Banner.new) { "foo" }
 
     assert_selector(".Banner")
     assert_selector(".Banner-message", text: "foo")
@@ -20,59 +20,59 @@ def test_renders
   end
 
   def test_includes_legacy_classes
-    render_inline(Primer::Beta::Banner.new) { "foo" }
+    render_inline(Primer::Alpha::Banner.new) { "foo" }
 
     assert_selector(".flash")
   end
 
   def test_renders_danger_scheme
-    render_inline(Primer::Beta::Banner.new(scheme: :danger)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(scheme: :danger)) { "foo" }
 
     assert_selector(".Banner.Banner--error", text: "foo")
     assert_selector(".flash.flash-error", text: "foo") # legacy
   end
 
   def test_renders_warning_scheme
-    render_inline(Primer::Beta::Banner.new(scheme: :warning)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(scheme: :warning)) { "foo" }
 
     assert_selector(".Banner.Banner--warning", text: "foo")
     assert_selector(".flash.flash-warn", text: "foo") # legacy
   end
 
   def test_renders_success_scheme
-    render_inline(Primer::Beta::Banner.new(scheme: :success)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(scheme: :success)) { "foo" }
 
     assert_selector(".Banner.Banner--success", text: "foo")
     assert_selector(".flash.flash-success", text: "foo") # legacy
   end
 
   def test_renders_default_icon
-    render_inline(Primer::Beta::Banner.new) { "foo" }
+    render_inline(Primer::Alpha::Banner.new) { "foo" }
 
     assert_selector(".octicon.octicon-bell")
   end
 
   def test_renders_default_danger_icon
-    render_inline(Primer::Beta::Banner.new(scheme: :danger)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(scheme: :danger)) { "foo" }
 
     assert_selector(".octicon.octicon-stop")
   end
 
   def test_renders_default_warning_icon
-    render_inline(Primer::Beta::Banner.new(scheme: :warning)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(scheme: :warning)) { "foo" }
 
     assert_selector(".octicon.octicon-alert")
   end
 
   def test_renders_default_success_icon
-    render_inline(Primer::Beta::Banner.new(scheme: :success)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(scheme: :success)) { "foo" }
 
     assert_selector(".octicon.octicon-check-circle")
   end
 
   def test_uses_default_if_scheme_does_not_exist
     without_fetch_or_fallback_raises do
-      render_inline(Primer::Beta::Banner.new(scheme: :zombieratsfromouterspace)) { "foo" }
+      render_inline(Primer::Alpha::Banner.new(scheme: :zombieratsfromouterspace)) { "foo" }
 
       assert_selector(".Banner", text: "foo")
       refute_selector(".Banner--error")
@@ -82,40 +82,40 @@ def test_uses_default_if_scheme_does_not_exist
   end
 
   def test_renders_full_width
-    render_inline(Primer::Beta::Banner.new(full: true)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(full: true)) { "foo" }
 
     assert_selector(".Banner.Banner--full", text: "foo")
     assert_selector(".flash.flash-full", text: "foo") # legacy
   end
 
   def test_renders_full_width_when_narrow
-    render_inline(Primer::Beta::Banner.new(full_when_narrow: true)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(full_when_narrow: true)) { "foo" }
 
     assert_selector(".Banner.Banner--full-whenNarrow", text: "foo")
   end
 
   def test_renders_custom_icon
-    render_inline(Primer::Beta::Banner.new(icon: :alert)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(icon: :alert)) { "foo" }
 
     assert_selector(".Banner .octicon.octicon-alert")
   end
 
   def test_renders_dismiss_button
-    render_inline(Primer::Beta::Banner.new(dismissible: true)) { "foo" }
+    render_inline(Primer::Alpha::Banner.new(dismissible: true)) { "foo" }
 
     assert_selector(".Banner .Banner-close")
   end
 
   def test_renders_action_button_slot
-    render_inline(Primer::Beta::Banner.new) do |component|
+    render_inline(Primer::Alpha::Banner.new) do |component|
       component.with_action_button { "submit" }
     end
 
     assert_selector(".Banner .Banner-actions", text: "submit")
   end
 
   def test_renders_arbitrary_action_content
-    render_inline(Primer::Beta::Banner.new) do |component|
+    render_inline(Primer::Alpha::Banner.new) do |component|
       component.with_action_content do
         "<p class='foo'>Custom content</p>".html_safe
       end
@@ -125,6 +125,6 @@ def test_renders_arbitrary_action_content
   end
 
   def test_status
-    assert_component_state(Primer::Beta::Banner, :beta)
+    assert_component_state(Primer::Alpha::Banner, :alpha)
   end
 end

test/components/component_test.rb

@@ -105,7 +105,7 @@ class PrimerComponentTest < Minitest::Test
     [Primer::Alpha::Tooltip, { type: :label, for_id: "some-button", text: "Foo" }],
     [Primer::Alpha::ActionList, { aria: { label: "Nav list" } }],
     [Primer::Alpha::NavList, { aria: { label: "Nav list" } }],
-    [Primer::Beta::Banner, {}]
+    [Primer::Alpha::Banner, {}]
   ].freeze
 
   def test_registered_components