Merge remote-tracking branch 'origin/main' into progress_bar

primer · Nov 8, 2022 · cb44a7e · cb44a7e
2 parents e127a3f + 1677a6d
commit cb44a7e
Show file tree

Hide file tree

Showing 19 changed files with 130 additions and 125 deletions.
diff --git a/.changeset/fast-spies-fry.md b/.changeset/fast-spies-fry.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Move Banner to alpha namespace
diff --git a/app/components/primer/beta/banner.html.erb → app/components/primer/alpha/banner.html.erb b/app/components/primer/beta/banner.html.erb → app/components/primer/alpha/banner.html.erb
diff --git a/app/components/primer/beta/banner.pcss → app/components/primer/alpha/banner.pcss b/app/components/primer/beta/banner.pcss → app/components/primer/alpha/banner.pcss
diff --git a/app/components/primer/beta/banner.rb → app/components/primer/alpha/banner.rb b/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)

diff --git a/app/components/primer/beta/x_banner.ts → app/components/primer/alpha/x_banner.ts b/app/components/primer/beta/x_banner.ts → app/components/primer/alpha/x_banner.ts
diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss
@@ -1,6 +1,6 @@
 /* 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";
 @import "./beta/progress_bar.pcss";
diff --git a/app/components/primer/primer.ts b/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'

diff --git a/lib/tasks/docs.rake b/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,

diff --git a/previews/primer/beta/banner_preview.rb → previews/primer/alpha/banner_preview.rb b/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

diff --git a/previews/primer/alpha/banner_preview/with_action_button.html.erb b/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 %>
diff --git a/...nner_preview/with_action_content.html.erb → ...nner_preview/with_action_content.html.erb b/...nner_preview/with_action_content.html.erb → ...nner_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 %>

diff --git a/previews/primer/beta/banner_preview/with_action_button.html.erb b/previews/primer/beta/banner_preview/with_action_button.html.erb
diff --git a/static/arguments.json b/static/arguments.json
@@ -205,6 +205,62 @@
       }
     ]
   },
+  {
+    "component": "Banner",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
+    "parameters": [
+      {
+        "name": "full",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the component should take up the full width of the screen."
+      },
+      {
+        "name": "full_when_narrow",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the component should take up the full width of the screen when rendered inside smaller viewports."
+      },
+      {
+        "name": "dismissible",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the component can be dismissed with an \"x\" button."
+      },
+      {
+        "name": "description",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Description text rendered underneath the message."
+      },
+      {
+        "name": "icon",
+        "type": "Symbol",
+        "default": "`nil`",
+        "description": "The name of an [Octicon](https://primer.style/octicons/) icon to use. If no icon is provided, a default one will be chosen based on the scheme."
+      },
+      {
+        "name": "scheme",
+        "type": "Symbol",
+        "default": "`:default`",
+        "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
+      },
+      {
+        "name": "reappear",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "ButtonMarketing",
     "status": "alpha",
@@ -1117,62 +1173,6 @@
       }
     ]
   },
-  {
-    "component": "Banner",
-    "status": "beta",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/banner.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/banner/default/",
-    "parameters": [
-      {
-        "name": "full",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether the component should take up the full width of the screen."
-      },
-      {
-        "name": "full_when_narrow",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether the component should take up the full width of the screen when rendered inside smaller viewports."
-      },
-      {
-        "name": "dismissible",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether the component can be dismissed with an \"x\" button."
-      },
-      {
-        "name": "description",
-        "type": "String",
-        "default": "`nil`",
-        "description": "Description text rendered underneath the message."
-      },
-      {
-        "name": "icon",
-        "type": "Symbol",
-        "default": "`nil`",
-        "description": "The name of an [Octicon](https://primer.style/octicons/) icon to use. If no icon is provided, a default one will be chosen based on the scheme."
-      },
-      {
-        "name": "scheme",
-        "type": "Symbol",
-        "default": "`:default`",
-        "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
-      },
-      {
-        "name": "reappear",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments."
-      },
-      {
-        "name": "system_arguments",
-        "type": "Hash",
-        "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
-      }
-    ]
-  },
   {
     "component": "BaseButton",
     "status": "beta",

diff --git a/static/audited_at.json b/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": "",

diff --git a/static/constants.json b/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",

diff --git a/static/statuses.json b/static/statuses.json
@@ -5,6 +5,7 @@
   "Primer::Alpha::ActionList::Item": "alpha",
   "Primer::Alpha::AutoComplete": "deprecated",
   "Primer::Alpha::AutoComplete::Item": "deprecated",
+  "Primer::Alpha::Banner": "alpha",
   "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",