primer_view_components 0.0.123 → 0.1.0

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

@@ -40,7 +40,7 @@ module ERBLint
 
         tags.each do |tag|
           next if tag.closing?
-          next unless self.class::TAGS&.include?(tag.name)
+          next if self.class::TAGS&.none?(tag.name)
 
           classes = tag.attributes["class"]&.value&.split(" ") || []
           tag_tree[tag][:offense] = false

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require_relative "base_linter"
+
+# Load all the other linters so we can filter out their restricted
+# CLASSES—they will be responsible for complaining about the use of
+# those HTML classes.
+Dir[File.join(__dir__, "*.rb")].sort.each do |file|
+  require file unless file == __FILE__
+end
+
+module ERBLint
+  module Linters
+    # Counts the number of times a class reserved for ViewComponents is used
+    class DisallowComponentCssCounter < BaseLinter
+      CLASSES = (
+        JSON.parse(
+          File.read(
+            File.join(__dir__, "..", "..", "..", "..", "static", "classes.json")
+          )
+        ) - BaseLinter.subclasses.reduce([]) do |html_classes, klass|
+          html_classes.concat(klass.const_get(:CLASSES))
+        end
+      ).freeze
+
+      TAGS = nil
+      MESSAGE = "Primer ViewComponents defines some HTML classes with associated styles that should not be used outside those components. (These classes might have their styles changed or even disappear in the future.) Instead of using this class directly, please use its component if appropriate or define the styles you need some other way."
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 0
-      PATCH = 123
+      MINOR = 1
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/primer/yard/component_manifest.rb

@@ -63,6 +63,7 @@ module Primer
         Primer::Alpha::TabPanels => { js: true },
         Primer::Alpha::Tooltip => { js: true },
         Primer::Alpha::ToggleSwitch => { js: true },
+        Primer::Alpha::Overlay => { js: true },
 
         # Examples can be seen in the NavList docs
         Primer::Alpha::NavList => { js: true },

data/previews/primer/alpha/overlay_preview/middle_of_page.html.erb

@@ -0,0 +1,17 @@
+<div style="width:100%; height: 400px; display: flex; justify-content: center; align-items: center;">
+  <%= render(Primer::Alpha::Overlay.new(
+    title: title,
+    subtitle: subtitle,
+    role: role,
+    size: size,
+    placement: placement,
+    anchor_align: anchor_align,
+    anchor_side: anchor_side,
+    allow_out_of_bounds: allow_out_of_bounds,
+    visually_hide_title: visually_hide_title,
+  )) do |d| %>
+    <% d.with_header(title: title, size: header_size) %>
+    <% d.with_show_button { button_text } %>
+    <% d.with_body { body_text } %>
+  <% end %>
+</div>

data/previews/primer/alpha/overlay_preview.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Overlay
+    class OverlayPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param role [Symbol] select [dialog, menu]
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param padding [Symbol] select [normal, condensed, none]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_offset [Symbol] select [normal, spacious]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      # @param visually_hide_title [Boolean] toggle
+      #
+      # @param header_size [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def playground(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_offset: :normal, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+        render(Primer::Alpha::Overlay.new(
+                 title: title,
+                 subtitle: subtitle,
+                 role: role,
+                 size: size,
+                 padding: padding,
+                 anchor_align: anchor_align,
+                 anchor_offset: anchor_offset,
+                 anchor_side: anchor_side,
+                 allow_out_of_bounds: allow_out_of_bounds,
+                 visually_hide_title: visually_hide_title,
+               )) do |d|
+          d.with_header(title: title, size: header_size)
+          d.with_show_button { button_text }
+          d.with_body { body_text }
+        end
+      end
+
+      # @label Default
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param role [Symbol] select [dialog, menu]
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param padding [Symbol] select [normal, condensed, none]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      # @param visually_hide_title [Boolean] toggle
+      #
+      # @param header_size [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def default(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+        render(Primer::Alpha::Overlay.new(
+                 title: title,
+                 subtitle: subtitle,
+                 role: role,
+                 size: size,
+                 padding: padding,
+                 anchor_align: anchor_align,
+                 anchor_side: anchor_side,
+                 allow_out_of_bounds: allow_out_of_bounds,
+                 visually_hide_title: visually_hide_title,
+               )) do |d|
+          d.with_header(title: title, size: header_size)
+          d.with_show_button { button_text }
+          d.with_body { body_text }
+        end
+      end
+
+      # @label Middle Of Page
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param role [Symbol] select [dialog, menu]
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      # @param visually_hide_title [Boolean] toggle
+      #
+      # @param header_size [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def middle_of_page(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, placement: :anchored, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               role: role,
+                               size: size,
+                               placement: placement,
+                               anchor_align: anchor_align,
+                               anchor_side: anchor_side,
+                               allow_out_of_bounds: allow_out_of_bounds,
+                               visually_hide_title: visually_hide_title,
+                               header_size: header_size,
+                               button_text: button_text,
+                               body_text: body_text
+                             })
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -2039,6 +2039,104 @@
       }
     ]
   },
+  {
+    "component": "Overlay",
+    "status": "alpha",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/overlay.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/overlay/default/",
+    "parameters": [
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "The id of the Overlay."
+      },
+      {
+        "name": "title",
+        "type": "String",
+        "default": "N/A",
+        "description": "Describes the content of the Overlay."
+      },
+      {
+        "name": "subtitle",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Provides dditional context for the Overlay, also setting the `aria-describedby` attribute."
+      },
+      {
+        "name": "popover",
+        "type": "Symbol",
+        "default": "`:auto`",
+        "description": "The popover behaviour. One of `:auto` or `:manual`."
+      },
+      {
+        "name": "popover",
+        "type": "Symbol",
+        "default": "`:auto`",
+        "description": "The popover behaviour. One of `:auto` or `:manual`."
+      },
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:auto`",
+        "description": "The size of the Overlay. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
+      },
+      {
+        "name": "padding",
+        "type": "Symbol",
+        "default": "`:normal`",
+        "description": "The padding given to the Overlay body. One of `:condensed`, `:none`, or `:normal`."
+      },
+      {
+        "name": "anchor",
+        "type": "String",
+        "default": "`nil`",
+        "description": "An ID of the element to anchor onto. Defaults to the `show_button`."
+      },
+      {
+        "name": "anchor_align",
+        "type": "Symbol",
+        "default": "`:start`",
+        "description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
+      },
+      {
+        "name": "anchor_side",
+        "type": "Symbol",
+        "default": "`:outside_bottom`",
+        "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
+      },
+      {
+        "name": "anchor_offset",
+        "type": "Symbol",
+        "default": "`:normal`",
+        "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
+      },
+      {
+        "name": "allow_out_of_bounds",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Allow the Overlay to overflow its container."
+      },
+      {
+        "name": "visually_hide_title",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "If true will hide the heading title, while still making it available to Screen Readers."
+      },
+      {
+        "name": "role",
+        "type": "String",
+        "default": "N/A",
+        "description": "The ARIA role. One of `:dialog` or `:menu`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "NavList",
     "status": "alpha",
@@ -2249,6 +2347,12 @@
         "default": "`nil`",
         "description": "CSS classes that will be added to the label."
       },
+      {
+        "name": "label_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "[System arguments](/system-arguments) used to construct the label."
+      },
       {
         "name": "content_arguments",
         "type": "Hash",

data/static/audited_at.json

@@ -31,6 +31,10 @@
   "Primer::Alpha::NavList::Item": "",
   "Primer::Alpha::NavList::Section": "",
   "Primer::Alpha::OcticonSymbols": "",
+  "Primer::Alpha::Overlay": "",
+  "Primer::Alpha::Overlay::Body": "",
+  "Primer::Alpha::Overlay::Footer": "",
+  "Primer::Alpha::Overlay::Header": "",
   "Primer::Alpha::RadioButton": "",
   "Primer::Alpha::RadioButtonGroup": "",
   "Primer::Alpha::SegmentedControl": "2023-02-01",

data/static/classes.json

@@ -0,0 +1,311 @@
+[
+  "ActionList--subGroup",
+  "ActionList-sectionDivider",
+  "ActionList-sectionDivider--filled",
+  "ActionList-sectionDivider-title",
+  "ActionListContent",
+  "ActionListContent--blockDescription",
+  "ActionListContent--hasActiveSubItem",
+  "ActionListContent--sizeLarge",
+  "ActionListContent--sizeXLarge",
+  "ActionListContent--visual16",
+  "ActionListContent--visual20",
+  "ActionListContent--visual24",
+  "ActionListItem",
+  "ActionListItem--danger",
+  "ActionListItem--hasSubItem",
+  "ActionListItem--navActive",
+  "ActionListItem--subItem",
+  "ActionListItem--trailingActionHover",
+  "ActionListItem--withActions",
+  "ActionListItem-action",
+  "ActionListItem-action--leading",
+  "ActionListItem-action--trailing",
+  "ActionListItem-collapseIcon",
+  "ActionListItem-description",
+  "ActionListItem-descriptionWrap",
+  "ActionListItem-descriptionWrap--inline",
+  "ActionListItem-label",
+  "ActionListItem-label--truncate",
+  "ActionListItem-multiSelectCheckmark",
+  "ActionListItem-multiSelectIcon",
+  "ActionListItem-multiSelectIconRect",
+  "ActionListItem-singleSelectCheckmark",
+  "ActionListItem-trailingAction",
+  "ActionListItem-visual",
+  "ActionListItem-visual--leading",
+  "ActionListItem-visual--trailing",
+  "ActionListWrap",
+  "ActionListWrap--divided",
+  "ActionListWrap--inset",
+  "AvatarStack",
+  "AvatarStack--right",
+  "AvatarStack--three-plus",
+  "AvatarStack--two",
+  "AvatarStack-body",
+  "Banner",
+  "Banner--error",
+  "Banner--full",
+  "Banner--full-whenNarrow",
+  "Banner--success",
+  "Banner--warning",
+  "Banner-actions",
+  "Banner-close",
+  "Banner-message",
+  "Banner-title",
+  "Banner-visual",
+  "Box",
+  "Box--blue",
+  "Box--condensed",
+  "Box--danger",
+  "Box--scrollable",
+  "Box--spacious",
+  "Box-body",
+  "Box-btn-octicon",
+  "Box-footer",
+  "Box-header",
+  "Box-header--blue",
+  "Box-row",
+  "Box-row--blue",
+  "Box-row--drag-button",
+  "Box-row--drag-hide",
+  "Box-row--focus-blue",
+  "Box-row--focus-gray",
+  "Box-row--gray",
+  "Box-row--hover-blue",
+  "Box-row--hover-gray",
+  "Box-row--unread",
+  "Box-row--yellow",
+  "Box-row-link",
+  "Box-title",
+  "Button",
+  "Button--danger",
+  "Button--fullWidth",
+  "Button--iconOnly",
+  "Button--invisible",
+  "Button--invisible-noVisuals",
+  "Button--large",
+  "Button--link",
+  "Button--medium",
+  "Button--primary",
+  "Button--secondary",
+  "Button--small",
+  "Button-content",
+  "Button-content--alignStart",
+  "Button-label",
+  "Button-leadingVisual",
+  "Button-trailingAction",
+  "Button-trailingVisual",
+  "Button-visual",
+  "Button-withTooltip",
+  "Counter",
+  "Counter--primary",
+  "Counter--secondary",
+  "FormControl",
+  "FormControl--fullWidth",
+  "FormControl-caption",
+  "FormControl-check-group-wrap",
+  "FormControl-checkbox",
+  "FormControl-checkbox-labelWrap",
+  "FormControl-checkbox-wrap",
+  "FormControl-error",
+  "FormControl-horizontalGroup",
+  "FormControl-inlineValidation",
+  "FormControl-input",
+  "FormControl-input-leadingVisual",
+  "FormControl-input-leadingVisualWrap",
+  "FormControl-input-trailingAction",
+  "FormControl-input-trailingAction--divider",
+  "FormControl-input-wrap",
+  "FormControl-input-wrap--leadingVisual",
+  "FormControl-input-wrap--trailingAction",
+  "FormControl-input-wrap-trailingAction--divider",
+  "FormControl-inset",
+  "FormControl-label",
+  "FormControl-large",
+  "FormControl-medium",
+  "FormControl-monospace",
+  "FormControl-radio",
+  "FormControl-radio-group-wrap",
+  "FormControl-radio-labelWrap",
+  "FormControl-radio-wrap",
+  "FormControl-select",
+  "FormControl-select-wrap",
+  "FormControl-small",
+  "FormControl-spacingWrapper",
+  "FormControl-success",
+  "FormControl-textarea",
+  "FormControl-toggleSwitchInput",
+  "FormControl-warning",
+  "Label",
+  "Label--accent",
+  "Label--attention",
+  "Label--closed",
+  "Label--danger",
+  "Label--done",
+  "Label--info",
+  "Label--inline",
+  "Label--large",
+  "Label--open",
+  "Label--primary",
+  "Label--secondary",
+  "Label--severe",
+  "Label--sponsors",
+  "Label--success",
+  "Label--warning",
+  "Layout",
+  "Layout--divided",
+  "Layout--flowRow-until-lg",
+  "Layout--flowRow-until-md",
+  "Layout--gutter-condensed",
+  "Layout--gutter-none",
+  "Layout--gutter-spacious",
+  "Layout--sidebar-narrow",
+  "Layout--sidebar-wide",
+  "Layout--sidebarPosition-end",
+  "Layout--sidebarPosition-flowRow-end",
+  "Layout--sidebarPosition-flowRow-none",
+  "Layout--sidebarPosition-flowRow-start",
+  "Layout--sidebarPosition-start",
+  "Layout-divider",
+  "Layout-divider--flowRow-hidden",
+  "Layout-divider--flowRow-shallow",
+  "Layout-main",
+  "Layout-main-centered-lg",
+  "Layout-main-centered-md",
+  "Layout-main-centered-xl",
+  "Layout-sidebar",
+  "Link",
+  "Link--muted",
+  "Link--onHover",
+  "Link--primary",
+  "Link--secondary",
+  "Overlay",
+  "Overlay--height-auto",
+  "Overlay--height-large",
+  "Overlay--height-medium",
+  "Overlay--height-small",
+  "Overlay--height-xlarge",
+  "Overlay--height-xsmall",
+  "Overlay--hidden",
+  "Overlay--motion-scaleFade",
+  "Overlay--size-auto",
+  "Overlay--size-full",
+  "Overlay--size-large",
+  "Overlay--size-medium",
+  "Overlay--size-medium-portrait",
+  "Overlay--size-small",
+  "Overlay--size-small-portrait",
+  "Overlay--size-xlarge",
+  "Overlay--size-xsmall",
+  "Overlay--visibilityHidden",
+  "Overlay--width-auto",
+  "Overlay--width-large",
+  "Overlay--width-medium",
+  "Overlay--width-small",
+  "Overlay--width-xlarge",
+  "Overlay--width-xxlarge",
+  "Overlay-actionWrap",
+  "Overlay-backdrop--anchor",
+  "Overlay-backdrop--anchor-whenNarrow",
+  "Overlay-backdrop--center",
+  "Overlay-backdrop--center-whenNarrow",
+  "Overlay-backdrop--full",
+  "Overlay-backdrop--full-whenNarrow",
+  "Overlay-backdrop--placement-bottom",
+  "Overlay-backdrop--placement-bottom-whenNarrow",
+  "Overlay-backdrop--placement-left",
+  "Overlay-backdrop--placement-left-whenNarrow",
+  "Overlay-backdrop--placement-right",
+  "Overlay-backdrop--placement-right-whenNarrow",
+  "Overlay-backdrop--placement-top",
+  "Overlay-backdrop--placement-top-whenNarrow",
+  "Overlay-backdrop--side",
+  "Overlay-backdrop--side-whenNarrow",
+  "Overlay-body",
+  "Overlay-body--paddingCondensed",
+  "Overlay-body--paddingNone",
+  "Overlay-closeButton",
+  "Overlay-description",
+  "Overlay-footer",
+  "Overlay-footer--alignCenter",
+  "Overlay-footer--alignEnd",
+  "Overlay-footer--alignStart",
+  "Overlay-footer--divided",
+  "Overlay-form",
+  "Overlay-header",
+  "Overlay-header--divided",
+  "Overlay-header--large",
+  "Overlay-headerContentWrap",
+  "Overlay-title",
+  "Overlay-titleWrap",
+  "Overlay-whenNarrow",
+  "Popover",
+  "Popover-message",
+  "Popover-message--bottom",
+  "Popover-message--bottom-left",
+  "Popover-message--bottom-right",
+  "Popover-message--large",
+  "Popover-message--left",
+  "Popover-message--left-bottom",
+  "Popover-message--left-top",
+  "Popover-message--no-caret",
+  "Popover-message--right",
+  "Popover-message--right-bottom",
+  "Popover-message--right-top",
+  "Popover-message--top-left",
+  "Popover-message--top-right",
+  "Progress",
+  "Progress--large",
+  "Progress--small",
+  "Progress-item",
+  "SegmentedControl",
+  "SegmentedControl--fullWidth",
+  "SegmentedControl-item",
+  "SegmentedControl-item--selected",
+  "State",
+  "State--closed",
+  "State--draft",
+  "State--merged",
+  "State--open",
+  "State--small",
+  "Subhead",
+  "Subhead--spacious",
+  "Subhead-actions",
+  "Subhead-description",
+  "Subhead-heading",
+  "Subhead-heading--danger",
+  "TimelineItem",
+  "TimelineItem--condensed",
+  "TimelineItem-avatar",
+  "TimelineItem-badge",
+  "TimelineItem-badge--success",
+  "TimelineItem-body",
+  "TimelineItem-break",
+  "ToggleSwitch",
+  "ToggleSwitch--checked",
+  "ToggleSwitch--disabled",
+  "ToggleSwitch--small",
+  "ToggleSwitch--statusAtEnd",
+  "ToggleSwitch-circleIcon",
+  "ToggleSwitch-icons",
+  "ToggleSwitch-knob",
+  "ToggleSwitch-lineIcon",
+  "ToggleSwitch-status",
+  "ToggleSwitch-statusIcon",
+  "ToggleSwitch-statusOff",
+  "ToggleSwitch-statusOn",
+  "ToggleSwitch-track",
+  "Truncate",
+  "Truncate-text",
+  "Truncate-text--expandable",
+  "Truncate-text--primary",
+  "UnderlineNav",
+  "UnderlineNav--full",
+  "UnderlineNav--right",
+  "UnderlineNav-actions",
+  "UnderlineNav-body",
+  "UnderlineNav-container",
+  "UnderlineNav-item",
+  "UnderlineNav-octicon"
+]