primer_view_components 0.0.105 → 0.0.106

data/app/components/primer/beta/x_banner.d.ts

@@ -0,0 +1,11 @@
+export declare class XBannerElement extends HTMLElement {
+    root: HTMLElement;
+    titleText: HTMLElement;
+    dismiss(): void;
+    private shouldReappear;
+}
+declare global {
+    interface Window {
+        XBannerElement: typeof XBannerElement;
+    }
+}

data/app/components/primer/beta/x_banner.js

@@ -0,0 +1,39 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller, target } from '@github/catalyst';
+let XBannerElement = class XBannerElement extends HTMLElement {
+    dismiss() {
+        if (this.shouldReappear()) {
+            this.style.setProperty('visibility', 'hidden');
+            setTimeout(() => {
+                this.style.setProperty('visibility', 'visible');
+            }, 2000);
+            return;
+        }
+        const parentElement = this.parentElement;
+        if (!parentElement)
+            return;
+        parentElement.removeChild(this);
+    }
+    shouldReappear() {
+        return this.root.getAttribute('data-reappear') === 'true';
+    }
+};
+__decorate([
+    target
+], XBannerElement.prototype, "root", void 0);
+__decorate([
+    target
+], XBannerElement.prototype, "titleText", void 0);
+XBannerElement = __decorate([
+    controller
+], XBannerElement);
+export { XBannerElement };
+if (!window.customElements.get('x-banner')) {
+    window.XBannerElement = XBannerElement;
+    window.customElements.define('x-banner', XBannerElement);
+}

data/app/components/primer/beta/x_banner.ts

@@ -0,0 +1,39 @@
+import {controller, target} from '@github/catalyst'
+
+@controller
+export class XBannerElement extends HTMLElement {
+  @target root: HTMLElement
+  @target titleText: HTMLElement
+
+  dismiss() {
+    if (this.shouldReappear()) {
+      this.style.setProperty('visibility', 'hidden')
+
+      setTimeout(() => {
+        this.style.setProperty('visibility', 'visible')
+      }, 2000)
+
+      return
+    }
+
+    const parentElement = this.parentElement
+    if (!parentElement) return
+
+    parentElement.removeChild(this)
+  }
+
+  private shouldReappear(): boolean {
+    return this.root.getAttribute('data-reappear') === 'true'
+  }
+}
+
+declare global {
+  interface Window {
+    XBannerElement: typeof XBannerElement
+  }
+}
+
+if (!window.customElements.get('x-banner')) {
+  window.XBannerElement = XBannerElement
+  window.customElements.define('x-banner', XBannerElement)
+}

data/app/components/primer/primer.d.ts

@@ -5,6 +5,7 @@ import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';
 import './beta/auto_complete/auto_complete';
+import './beta/x_banner';
 import './clipboard_copy';
 import './dropdown';
 import './local_time';

data/app/components/primer/primer.js

@@ -5,6 +5,7 @@ import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';
 import './beta/auto_complete/auto_complete';
+import './beta/x_banner';
 import './clipboard_copy';
 import './dropdown';
 import './local_time';

data/app/components/primer/primer.pcss

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

data/app/components/primer/primer.ts

@@ -5,6 +5,7 @@ import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'
 import './beta/auto_complete/auto_complete'
+import './beta/x_banner'
 import './clipboard_copy'
 import './dropdown'
 import './local_time'

data/lib/primer/view_components/linters/argument_mappers/flash.rb

@@ -7,11 +7,11 @@ module ERBLint
     module ArgumentMappers
       # Maps classes in a flash element to arguments for the Flash component.
       class Flash < Base
-        SCHEME_MAPPINGS = Primer::ViewComponents::Constants.get(
-          component: "Primer::Beta::Flash",
-          constant: "SCHEME_MAPPINGS",
-          symbolize: true
-        ).freeze
+        SCHEME_MAPPINGS = {
+          "flash-success" => ":success",
+          "flash-warn" => ":warning",
+          "flash-error" => ":danger"
+        }.freeze
 
         def classes_to_args(classes)
           classes.each_with_object({ classes: [] }) do |class_name, acc|

data/lib/primer/view_components/linters/migrate_deprecated_flash_arguments.rb

@@ -0,0 +1,140 @@
+# frozen_string_literal: true
+
+require_relative "helpers/rubocop_helpers"
+
+module ERBLint
+  module Linters
+    # Migrates deprecated arguments in Primer::Beta::Flash components to their equivalents.
+    class MigrateDeprecatedFlashArguments < Linter
+      # Taken from https://github.com/rails/rails/blob/main/actionview/lib/action_view/template/handlers/erb/erubi.rb#L45
+      BLOCK_EXPR = /\s*((\s+|\))do|\{)(\s*\|[^|]*\|)?\s*\Z/.freeze
+
+      include ERBLint::LinterRegistry
+      include Helpers::RubocopHelpers
+
+      def run(processed_source)
+        processed_source.ast.descendants(:erb).each do |erb_node|
+          indicator_node, _, code_node = *erb_node
+          code = code_node.children.first
+          ast = erb_ast(maybe_close_block(code))
+          next unless ast
+
+          constructor_arg_hashes = find_new_flash_instances(ast)
+          next if constructor_arg_hashes.empty?
+
+          indicator, = *indicator_node
+          indicator ||= ""
+
+          # +2 to account for the leading "<%" characters
+          code_start_pos = erb_node.location.begin_pos + indicator.size + 2
+
+          constructor_arg_hashes.each do |constructor_arg_hash|
+            spacious_arg = constructor_arg_hash.include?(:spacious)
+            next unless spacious_arg
+
+            orig_loc = code_node.location
+            key_node, value_node = constructor_arg_hash[:spacious]
+
+            new_loc = orig_loc.with(
+              begin_pos: key_node.location.expression.begin_pos + code_start_pos,
+              end_pos: value_node.location.expression.end_pos + code_start_pos
+            )
+
+            if value_node.source == "true"
+              add_offense(
+                new_loc,
+                "The :spacious argument is deprecated. Use `mb: 4` instead.",
+                "mb: 4"
+              )
+            else
+              new_loc = adjust_to_preceding_comma(new_loc)
+
+              add_offense(
+                new_loc,
+                "The :spacious argument is deprecated; `spacious: false` can be removed.",
+                ""
+              )
+            end
+          end
+        end
+      end
+
+      def autocorrect(_, offense)
+        return unless offense.context
+
+        lambda do |corrector|
+          corrector.replace(offense.source_range, offense.context)
+        end
+      end
+
+      private
+
+      def adjust_to_preceding_comma(loc)
+        comma_pos = loc.source_buffer.source.rindex(/\s*,/, loc.begin_pos)
+        return loc unless comma_pos
+
+        loc.with(begin_pos: comma_pos)
+      end
+
+      def find_new_flash_instances(ast)
+        if (instance = find_new_flash_instance(ast))
+          return [instance]
+        end
+
+        ast.each_child_node.flat_map do |child_ast|
+          find_new_flash_instances(child_ast)
+        end
+      end
+
+      def find_new_flash_instance(ast)
+        render_body = unwrap_render(ast)
+        return nil unless render_body
+
+        constructor_args = unwrap_constructor(render_body)
+        return nil unless constructor_args
+
+        arg1, = *render_body
+        return nil unless arg1.type == :const
+        return nil unless arg1.source == "Primer::Beta::Flash"
+
+        parse_args(constructor_args)
+      end
+
+      def parse_args(arg_node)
+        arg_node.children.each_with_object({}) do |child, memo|
+          key_node, value_node = *child.children
+          memo[key_node.source.to_sym] = [key_node, value_node]
+        end
+      end
+
+      def unwrap_render(ast)
+        unwrap_method_call(ast, :render)
+      end
+
+      def unwrap_constructor(ast)
+        unwrap_method_call(ast, :new)
+      end
+
+      def unwrap_method_call(ast, method_name)
+        return nil unless ast
+        return nil unless ast.type == :send
+
+        _, name, body = *ast
+        return nil if name != method_name
+
+        body
+      end
+
+      def maybe_close_block(code)
+        match = code.match(BLOCK_EXPR)
+        return code unless match
+
+        if match.captures[0].strip == "do"
+          "#{code}; end"
+        else
+          "#{code} }"
+        end
+      end
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 105
+      PATCH = 106
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/docs.rake

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

data/previews/primer/beta/banner_preview/with_action_button.html.erb

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

data/previews/primer/beta/banner_preview/with_action_content.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::Beta::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 %>
+  <%= content %>
+<% end %>

data/previews/primer/beta/banner_preview.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Banner
+    class BannerPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param full toggle
+      # @param full_when_narrow toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @param scheme [Symbol] select [default, warning, danger, success]
+      # @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)
+        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 }
+      end
+
+      # @label Default
+      def default
+        render(Primer::Beta::Banner.new) { "This is a banner!" }
+      end
+
+      # @label With action button
+      #
+      # @param full toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @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!")
+        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
+
+      # @label With action content
+      #
+      # @param full toggle
+      # @param dismissible toggle
+      # @param icon [Symbol] octicon
+      # @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.")
+        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
+    end
+  end
+end

data/static/arguments.json

@@ -1117,6 +1117,62 @@
       }
     ]
   },
+  {
+    "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",

data/static/audited_at.json

@@ -33,6 +33,7 @@
   "Primer::Beta::AutoComplete::Item": "",
   "Primer::Beta::Avatar": "",
   "Primer::Beta::AvatarStack": "",
+  "Primer::Beta::Banner": "",
   "Primer::Beta::BaseButton": "",
   "Primer::Beta::Blankslate": "",
   "Primer::Beta::BorderBox": "",

data/static/constants.json

@@ -396,6 +396,21 @@
       "span"
     ]
   },
+  "Primer::Beta::Banner": {
+    "DEFAULT_ICONS": {
+      "default": "bell",
+      "warning": "alert",
+      "danger": "stop",
+      "success": "check-circle"
+    },
+    "DEFAULT_SCHEME": "default",
+    "SCHEME_MAPPINGS": {
+      "default": "",
+      "warning": "Banner--warning",
+      "danger": "Banner--error",
+      "success": "Banner--success"
+    }
+  },
   "Primer::Beta::BaseButton": {
     "DEFAULT_TAG": "button",
     "DEFAULT_TYPE": "button",

data/static/statuses.json

@@ -33,6 +33,7 @@
   "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",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.105
+  version: 0.0.106
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-10-24 00:00:00.000000000 Z
+date: 2022-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -491,6 +491,11 @@ files:
 - app/components/primer/beta/avatar.rb
 - app/components/primer/beta/avatar_stack.html.erb
 - app/components/primer/beta/avatar_stack.rb
+- app/components/primer/beta/banner.css
+- app/components/primer/beta/banner.css.map
+- app/components/primer/beta/banner.html.erb
+- app/components/primer/beta/banner.pcss
+- app/components/primer/beta/banner.rb
 - app/components/primer/beta/base_button.rb
 - app/components/primer/beta/blankslate.html.erb
 - app/components/primer/beta/blankslate.rb
@@ -521,6 +526,9 @@ files:
 - app/components/primer/beta/text.rb
 - app/components/primer/beta/truncate.html.erb
 - app/components/primer/beta/truncate.rb
+- app/components/primer/beta/x_banner.d.ts
+- app/components/primer/beta/x_banner.js
+- app/components/primer/beta/x_banner.ts
 - app/components/primer/blankslate_component.html.erb
 - app/components/primer/blankslate_component.rb
 - app/components/primer/box.rb
@@ -729,6 +737,7 @@ files:
 - lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb
 - lib/primer/view_components/linters/helpers/rubocop_helpers.rb
 - lib/primer/view_components/linters/label_component_migration_counter.rb
+- lib/primer/view_components/linters/migrate_deprecated_flash_arguments.rb
 - lib/primer/view_components/linters/subhead_component_migration_counter.rb
 - lib/primer/view_components/linters/super_in_component_templates.rb
 - lib/primer/view_components/linters/tag_tree_helpers.rb
@@ -792,6 +801,9 @@ files:
 - previews/primer/beta/auto_complete_preview/with_submit_button.html.erb
 - previews/primer/beta/avatar_preview.rb
 - previews/primer/beta/avatar_stack_preview.rb
+- previews/primer/beta/banner_preview.rb
+- previews/primer/beta/banner_preview/with_action_button.html.erb
+- previews/primer/beta/banner_preview/with_action_content.html.erb
 - previews/primer/beta/base_button_preview.rb
 - previews/primer/beta/blankslate_preview.rb
 - previews/primer/beta/border_box_preview.rb