primer_view_components 0.0.123 → 0.1.1

data/app/components/primer/navigation/tab_component.rb

@@ -2,163 +2,9 @@
 
 module Primer
   module Navigation
-    # This component is part of navigation components such as `Primer::Alpha::TabNav`
-    # and `Primer::Alpha::UnderlineNav` and should not be used by itself.
-    #
-    # @accessibility
-    #   `TabComponent` renders the selected anchor tab with `aria-current="page"` by default.
-    #    When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
-    class TabComponent < Primer::Component
-      DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
-      ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
-      # Panel controlled by the Tab. This will not render anything in the tab itself.
-      # It will provide a accessor for the Tab's parent to call and render the panel
-      # content in the appropriate place.
-      # Refer to `UnderlineNav` and `TabNav` implementations for examples.
-      #
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :panel, lambda { |**system_arguments|
-        return unless @with_panel
-
-        deny_tag_argument(**system_arguments)
-        system_arguments[:id] = @panel_id
-        system_arguments[:tag] = :div
-        system_arguments[:role] ||= :tabpanel
-        system_arguments[:tabindex] = 0
-        system_arguments[:hidden] = true unless @selected
-
-        label_present = aria("label", system_arguments) || aria("labelledby", system_arguments)
-        unless label_present
-          if @id.present?
-            system_arguments[:"aria-labelledby"] = @id
-          elsif !Rails.env.production?
-            raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
-          end
-        end
-
-        Primer::BaseComponent.new(**system_arguments)
-      }
-
-      # Icon to be rendered in the Tab left.
-      #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
-      renders_one :icon, lambda { |icon = nil, **system_arguments|
-        system_arguments[:classes] = class_names(
-          @icon_classes,
-          system_arguments[:classes]
-        )
-        Primer::Beta::Octicon.new(icon, **system_arguments)
-      }
-
-      # The Tab's text.
-      #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Text) %>.
-      renders_one :text, Primer::Beta::Text
-
-      # Counter to be rendered in the Tab right.
-      #
-      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
-      renders_one :counter, Primer::Beta::Counter
-
-      attr_reader :selected
-
-      # @example Default
-      #   <%= render(Primer::Navigation::TabComponent.new(selected: true)) do |component| %>
-      #     <% component.with_text { "Selected" } %>
-      #   <% end %>
-      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
-      #     <% component.with_text { "Not selected" } %>
-      #   <% end %>
-      #
-      # @example With icons and counters
-      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
-      #     <% component.with_icon(:star) %>
-      #     <% component.with_text { "Tab" } %>
-      #   <% end %>
-      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
-      #     <% component.with_icon(:star) %>
-      #     <% component.with_text { "Tab" } %>
-      #     <% component.with_counter(count: 10) %>
-      #   <% end %>
-      #   <%= render(Primer::Navigation::TabComponent.new) do |component| %>
-      #     <% component.with_text { "Tab" } %>
-      #     <% component.with_counter(count: 10) %>
-      #   <% end %>
-      #
-      # @example Inside a list
-      #   <%= render(Primer::Navigation::TabComponent.new(list: true)) do |component| %>
-      #     <% component.with_text { "Tab" } %>
-      #   <% end %>
-      #
-      # @example With custom HTML
-      #   <%= render(Primer::Navigation::TabComponent.new) do %>
-      #     <div>
-      #       This is my <strong>custom HTML</strong>
-      #     </div>
-      #   <% end %>
-      #
-      # @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
-      # @param selected [Boolean] Whether the Tab is selected or not.
-      # @param with_panel [Boolean] Whether the Tab has an associated panel.
-      # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
-      # @param icon_classes [Boolean] Classes that must always be applied to icons.
-      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
-      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "", wrapper_arguments: {}, **system_arguments)
-        @selected = selected
-        @icon_classes = icon_classes
-        @list = list
-        @with_panel = with_panel
-
-        @system_arguments = system_arguments
-        @id = @system_arguments[:id]
-        @wrapper_arguments = wrapper_arguments
-
-        if with_panel || @system_arguments[:tag] == :button
-          @system_arguments[:tag] = :button
-          @system_arguments[:type] = :button
-          @system_arguments[:role] = :tab
-          panel_id(panel_id)
-          # https://www.w3.org/TR/wai-aria-practices/#presentation_role
-          @wrapper_arguments[:role] = :presentation
-        else
-          @system_arguments[:tag] = :a
-        end
-
-        @wrapper_arguments[:tag] = :li
-        @wrapper_arguments[:display] ||= :inline_flex
-
-        return unless @selected
-
-        if @system_arguments[:tag] == :a
-          aria_current = aria("current", system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
-          @system_arguments[:"aria-current"] = fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
-        else
-          @system_arguments[:"aria-selected"] = true
-        end
-      end
-
-      def wrapper
-        unless @list
-          yield
-          return # returning `yield` caused a double render
-        end
-
-        render(Primer::BaseComponent.new(**@wrapper_arguments)) do
-          yield if block_given?
-        end
-      end
-
-      private
-
-      def panel_id(panel_id)
-        if panel_id.blank?
-          raise ArgumentError, "`panel_id` is required" unless Rails.env.production?
-        else
-          @panel_id = panel_id
-          @system_arguments[:"aria-controls"] = @panel_id
-        end
-      end
+    # nodoc
+    class TabComponent < Primer::Alpha::Navigation::Tab
+      status :deprecated
     end
   end
 end

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

@@ -1,4 +1,6 @@
+import '@oddbird/popover-polyfill';
 import './alpha/dropdown';
+import './anchored_position';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './alpha/nav_list';

data/app/components/primer/primer.js

@@ -1,4 +1,6 @@
+import '@oddbird/popover-polyfill';
 import './alpha/dropdown';
+import './anchored_position';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './alpha/nav_list';

data/app/components/primer/primer.pcss

@@ -1,3 +1,5 @@
+@import "@oddbird/popover-polyfill/dist/popover.css";
+
 /* CSS component styles here */
 
 /* alpha */
@@ -20,6 +22,7 @@
 @import "./beta/avatar_stack.pcss";
 @import "./beta/border_box.pcss";
 @import "./beta/blankslate.pcss";
+@import "./alpha/overlay.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
 @import "./beta/counter.pcss";

data/app/components/primer/primer.ts

@@ -1,4 +1,6 @@
+import '@oddbird/popover-polyfill'
 import './alpha/dropdown'
+import './anchored_position'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './alpha/nav_list'

data/app/components/primer/truncate.css.json

@@ -9,5 +9,12 @@
     ".css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target",
     ".css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target",
     ".css-truncate.expandable:hover .css-truncate-target"
+  ],
+  "classes": [
+    "css-truncate",
+    "css-truncate-overflow",
+    "css-truncate-target",
+    "expandable",
+    "zeroclipboard-is-hover"
   ]
 }

data/app/lib/primer/css/layout.css.json

@@ -312,5 +312,268 @@
     ".Stack--dir-inline-whenWide>.Stack-item>.Stack-divider",
     ".Stack-item--expand-whenWide",
     ".Stack-item--keepSize-whenWide"
+  ],
+  "classes": [
+    "AppFrame",
+    "AppFrame-a11yNav",
+    "AppFrame-a11yLink",
+    "AppFrame-main",
+    "AppFrame-header-wrapper",
+    "AppFrame-header",
+    "AppFrame-subheader",
+    "AppFrame-body",
+    "AppFrame-footer",
+    "container-sm",
+    "container-md",
+    "container-lg",
+    "container-xl",
+    "col-1",
+    "col-2",
+    "col-3",
+    "col-4",
+    "col-5",
+    "col-6",
+    "col-7",
+    "col-8",
+    "col-9",
+    "col-10",
+    "col-11",
+    "col-12",
+    "col-sm-1",
+    "col-sm-2",
+    "col-sm-3",
+    "col-sm-4",
+    "col-sm-5",
+    "col-sm-6",
+    "col-sm-7",
+    "col-sm-8",
+    "col-sm-9",
+    "col-sm-10",
+    "col-sm-11",
+    "col-sm-12",
+    "col-md-1",
+    "col-md-2",
+    "col-md-3",
+    "col-md-4",
+    "col-md-5",
+    "col-md-6",
+    "col-md-7",
+    "col-md-8",
+    "col-md-9",
+    "col-md-10",
+    "col-md-11",
+    "col-md-12",
+    "col-lg-1",
+    "col-lg-2",
+    "col-lg-3",
+    "col-lg-4",
+    "col-lg-5",
+    "col-lg-6",
+    "col-lg-7",
+    "col-lg-8",
+    "col-lg-9",
+    "col-lg-10",
+    "col-lg-11",
+    "col-lg-12",
+    "col-xl-1",
+    "col-xl-2",
+    "col-xl-3",
+    "col-xl-4",
+    "col-xl-5",
+    "col-xl-6",
+    "col-xl-7",
+    "col-xl-8",
+    "col-xl-9",
+    "col-xl-10",
+    "col-xl-11",
+    "col-xl-12",
+    "gutter",
+    "col-",
+    "gutter-condensed",
+    "gutter-spacious",
+    "gutter-sm",
+    "gutter-sm-condensed",
+    "gutter-sm-spacious",
+    "gutter-md",
+    "gutter-md-condensed",
+    "gutter-md-spacious",
+    "gutter-lg",
+    "gutter-lg-condensed",
+    "gutter-lg-spacious",
+    "gutter-xl",
+    "gutter-xl-condensed",
+    "gutter-xl-spacious",
+    "offset-1",
+    "offset-2",
+    "offset-3",
+    "offset-4",
+    "offset-5",
+    "offset-6",
+    "offset-7",
+    "offset-8",
+    "offset-9",
+    "offset-10",
+    "offset-11",
+    "offset-sm-1",
+    "offset-sm-2",
+    "offset-sm-3",
+    "offset-sm-4",
+    "offset-sm-5",
+    "offset-sm-6",
+    "offset-sm-7",
+    "offset-sm-8",
+    "offset-sm-9",
+    "offset-sm-10",
+    "offset-sm-11",
+    "offset-md-1",
+    "offset-md-2",
+    "offset-md-3",
+    "offset-md-4",
+    "offset-md-5",
+    "offset-md-6",
+    "offset-md-7",
+    "offset-md-8",
+    "offset-md-9",
+    "offset-md-10",
+    "offset-md-11",
+    "offset-lg-1",
+    "offset-lg-2",
+    "offset-lg-3",
+    "offset-lg-4",
+    "offset-lg-5",
+    "offset-lg-6",
+    "offset-lg-7",
+    "offset-lg-8",
+    "offset-lg-9",
+    "offset-lg-10",
+    "offset-lg-11",
+    "offset-xl-1",
+    "offset-xl-2",
+    "offset-xl-3",
+    "offset-xl-4",
+    "offset-xl-5",
+    "offset-xl-6",
+    "offset-xl-7",
+    "offset-xl-8",
+    "offset-xl-9",
+    "offset-xl-10",
+    "offset-xl-11",
+    "PageLayout",
+    "PageLayout--panePos-start",
+    "PageLayout--panePos-end",
+    "PageLayout-header--hasDivider",
+    "PageLayout-footer--hasDivider",
+    "PageLayout--hasPaneDivider",
+    "PageLayout-pane",
+    "PageLayout-content",
+    "PageLayout-pane--sticky",
+    "PageLayout-content-centered-",
+    "container-",
+    "PageLayout-content-centered-sm",
+    "PageLayout-content-centered-md",
+    "PageLayout-content-centered-lg",
+    "PageLayout-content-centered-xl",
+    "PageLayout--paneWidth-narrow",
+    "PageLayout--paneWidth-wide",
+    "PageLayout--responsive-stackRegions",
+    "PageLayout--responsive-panePos-start",
+    "PageLayout--responsive-separateRegions",
+    "PageLayout--responsive-primary-content",
+    "PageLayout--responsive-primary-pane",
+    "PageLayout-region--dividerNarrow-line-before",
+    "PageLayout-region--dividerNarrow-line-after",
+    "PageLayout-region--dividerNarrow-filled-before",
+    "PageLayout-region--dividerNarrow-filled-after",
+    "PageLayout-wrapper",
+    "PageLayout-columns",
+    "PageLayout--outerSpacing-normal",
+    "PageLayout--outerSpacing-condensed",
+    "PageLayout--innerSpacing-normal",
+    "PageLayout--innerSpacing-condensed",
+    "PageLayout--columnGap-normal",
+    "PageLayout--columnGap-condensed",
+    "PageLayout--columnGap-none",
+    "PageLayout--rowGap-normal",
+    "PageLayout--rowGap-none",
+    "PageLayout--rowGap-condensed",
+    "PageLayout-header",
+    "PageLayout-footer",
+    "Stack",
+    "Stack-divider",
+    "Stack-item",
+    "Stack--dir-inline-whenNarrow",
+    "Stack--dir-block-whenNarrow",
+    "Stack--gap-none-whenNarrow",
+    "Stack--gap-condensed-whenNarrow",
+    "Stack--gap-normal-whenNarrow",
+    "Stack--align-start-whenNarrow",
+    "Stack--align-center-whenNarrow",
+    "Stack--align-end-whenNarrow",
+    "Stack--align-baseline-whenNarrow",
+    "Stack--alignWrap-start-whenNarrow",
+    "Stack--alignWrap-center-whenNarrow",
+    "Stack--alignWrap-end-whenNarrow",
+    "Stack--alignWrap-distribute-whenNarrow",
+    "Stack--alignWrap-distributeEvenly-whenNarrow",
+    "Stack--spread-start-whenNarrow",
+    "Stack--spread-center-whenNarrow",
+    "Stack--spread-end-whenNarrow",
+    "Stack--spread-distribute-whenNarrow",
+    "Stack--spread-distributeEvenly-whenNarrow",
+    "Stack--wrap-whenNarrow",
+    "Stack--nowrap-whenNarrow",
+    "Stack--showDividers-whenNarrow",
+    "Stack-item--expand-whenNarrow",
+    "Stack-item--keepSize-whenNarrow",
+    "Stack--dir-inline-whenRegular",
+    "Stack--dir-block-whenRegular",
+    "Stack--gap-none-whenRegular",
+    "Stack--gap-condensed-whenRegular",
+    "Stack--gap-normal-whenRegular",
+    "Stack--gap-spacious-whenRegular",
+    "Stack--align-start-whenRegular",
+    "Stack--align-center-whenRegular",
+    "Stack--align-end-whenRegular",
+    "Stack--align-baseline-whenRegular",
+    "Stack--alignWrap-start-whenRegular",
+    "Stack--alignWrap-center-whenRegular",
+    "Stack--alignWrap-end-whenRegular",
+    "Stack--alignWrap-distribute-whenRegular",
+    "Stack--alignWrap-distributeEvenly-whenRegular",
+    "Stack--spread-start-whenRegular",
+    "Stack--spread-center-whenRegular",
+    "Stack--spread-end-whenRegular",
+    "Stack--spread-distribute-whenRegular",
+    "Stack--spread-distributeEvenly-whenRegular",
+    "Stack--wrap-whenRegular",
+    "Stack--nowrap-whenRegular",
+    "Stack--showDividers-whenRegular",
+    "Stack-item--expand-whenRegular",
+    "Stack-item--keepSize-whenRegular",
+    "Stack--dir-inline-whenWide",
+    "Stack--dir-block-whenWide",
+    "Stack--gap-none-whenWide",
+    "Stack--gap-condensed-whenWide",
+    "Stack--gap-normal-whenWide",
+    "Stack--gap-spacious-whenWide",
+    "Stack--align-start-whenWide",
+    "Stack--align-center-whenWide",
+    "Stack--align-end-whenWide",
+    "Stack--align-baseline-whenWide",
+    "Stack--alignWrap-start-whenWide",
+    "Stack--alignWrap-center-whenWide",
+    "Stack--alignWrap-end-whenWide",
+    "Stack--alignWrap-distribute-whenWide",
+    "Stack--alignWrap-distributeEvenly-whenWide",
+    "Stack--spread-start-whenWide",
+    "Stack--spread-center-whenWide",
+    "Stack--spread-end-whenWide",
+    "Stack--spread-distribute-whenWide",
+    "Stack--spread-distributeEvenly-whenWide",
+    "Stack--wrap-whenWide",
+    "Stack--nowrap-whenWide",
+    "Stack--showDividers-whenWide",
+    "Stack-item--expand-whenWide",
+    "Stack-item--keepSize-whenWide"
   ]
 }