Component-Specific CSS Selector Tests

.changeset/rare-birds-heal.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+adding a test suite to show all component-specific selectors are used in previews, and updating various component previews for lookbook

.github/workflows/test.yml

@@ -230,3 +230,25 @@ jobs:
     - name: Failure
       if: ${{ steps.auto-commit.outputs.changes_detected == 'true' || steps.playwright-run.outcome == 'failure' }}
       run: exit 1
+  selectors:
+    name: CSS coverage
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.0'
+          bundler-cache: true
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'npm'
+      - name: NPM Build
+        run: npm ci
+      - name: Build Output Selectors
+        run: script/build-assets
+      - name: Test CSS
+        run: bundle exec rake test:component_css

app/components/primer/alpha/banner.pcss

@@ -66,6 +66,7 @@
     }
   }
 
+  /* is this used anywhere? could not find any use, but unsure */
   & .Banner-close {
     grid-area: close;
     margin-left: var(--primer-controlStack-medium-gap-condensed, 8px);

app/components/primer/alpha/segmented_control.pcss

@@ -114,6 +114,7 @@
     justify-content: center;
   }
 
+  /* is .Button-withTooltip used anywhere? can't find use of it */
   & .Button--iconOnly,
   & .Button-withTooltip {
     width: 100%;

app/components/primer/beta/button.pcss

@@ -52,10 +52,6 @@
     cursor: not-allowed;
     box-shadow: none;
   }
-
-  /* &:focus {
-    @mixin focusOutline;
-  } */
 }
 
 .Button-withTooltip {

app/components/primer/beta/counter.pcss

@@ -17,6 +17,7 @@
     display: none;
   }
 
+  /* Is this selector used? could not find any use of it */
   & .octicon {
     vertical-align: text-top;
     opacity: 0.8;

lib/tasks/test.rake

@@ -27,6 +27,14 @@ namespace :test do
     ]
   end
 
+  Rake::TestTask.new(:component_css) do |t|
+    t.warning = false
+    t.libs << "test"
+    t.test_files = FileList[
+      "test/css/**/*_test.rb"
+    ]
+  end
+
   Rake::TestTask.new(:lib) do |t|
     t.warning = false
     t.libs << "test"

previews/primer/alpha/banner_preview.rb

@@ -21,9 +21,52 @@ def playground(full: false, full_when_narrow: false, dismissible: false, icon: :
 
       # @label Default
       def default
-        render(Primer::Alpha::Banner.new) { "This is a banner!" }
+        render(Primer::Alpha::Banner.new) { "This is a banner." }
       end
 
+      # @!group Schemes
+      #
+      # @label Default scheme
+      def scheme_default
+        render(Primer::Alpha::Banner.new) { "This is a default banner." }
+      end
+
+      # @label Danger
+      def scheme_danger
+        render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" }
+      end
+
+      # @label Success
+      def scheme_success
+        render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" }
+      end
+
+      # @label Warning
+      def scheme_warning
+        render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" }
+      end
+      #
+      # @!endgroup
+
+      # @label Dismissable 
+      def dismissable
+        render(Primer::Alpha::Banner.new(dismissable: true, reappear: true)) { "This is a dismissable banner." }
+      end
+
+      # @!group Full Width
+      #
+      # @label Full width
+      def full_width
+        render(Primer::Alpha::Banner.new(full: true)) { "This is a full width banner." }
+      end
+
+      # @label Full width in Narrow Viewport
+      def full_width_in_narrow_viewport
+        render(Primer::Alpha::Banner.new(full: true, full_when_narrow: true)) { "This is a full width banner in a narrow viewport." }
+      end
+      #
+      # @!endgroup
+
       # @label With action button
       #
       # @param full toggle

previews/primer/alpha/segmented_control_preview.rb

@@ -23,53 +23,139 @@ def playground(full_width: false, hide_labels: false, size: :medium, icon: :none
         end
       end
 
-      # @param full_width [Boolean] toggle
-      # @param size select [small, medium, large]
-      def default(full_width: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, size: size)) do |c|
+      # @label Default
+      def default
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c|
           c.with_item(label: "Preview", selected: true)
           c.with_item(label: "Raw")
           c.with_item(label: "Blame")
         end
       end
 
-      # @param hide_labels [Boolean] toggle
-      # @param size select [small, medium, large]
-      def full_width(hide_labels: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, hide_labels: hide_labels, size: size)) do |c|
-          c.with_item(label: "Preview", icon: (hide_labels ? :zap : nil), selected: true)
-          c.with_item(label: "Raw", icon: (hide_labels ? :zap : nil))
-          c.with_item(label: "Blame", icon: (hide_labels ? :zap : nil))
+      # @!group Full width
+      # @label Size small
+      def full_width_small(hide_labels: false, size: :small)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :small)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
         end
       end
 
-      # @param full_width [Boolean] toggle
-      # @param size select [small, medium, large]
-      def icons_and_text(full_width: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, size: size)) do |c|
+      # @label Size medium
+      def full_width_medium(hide_labels: false, size: :medium)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :medium)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
+        end
+      end
+
+      # @label Size large
+      def full_width_large(hide_labels: false, size: :large)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, size: :large)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons and text
+      # @label Size small
+      def icons_and_text_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |c|
           c.with_item(label: "Preview", icon: :eye, selected: true)
           c.with_item(label: "Raw", icon: :"file-code")
           c.with_item(label: "Blame", icon: :people)
         end
       end
 
-      # @param full_width [Boolean] toggle
-      # @param size select [small, medium, large]
-      def icons_only(full_width: false, size: :medium)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: true, size: size)) do |c|
+      # @label Size medium
+      def icons_and_text_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      def icons_and_text_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+      # @!endgroup
+
+      # @!group Icons only
+      # @label Size small
+      def icon_only_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size medium
+      def icon_only_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Size large
+      def icon_only_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size small
+      def icon_only_full_width_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size medium
+      def icon_only_full_width_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |c|
+          c.with_item(label: "Preview", icon: :eye, selected: true)
+          c.with_item(label: "Raw", icon: :"file-code")
+          c.with_item(label: "Blame", icon: :people)
+        end
+      end
+
+      # @label Full width, size large
+      def icon_only_full_width_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |c|
           c.with_item(label: "Preview", icon: :eye, selected: true)
           c.with_item(label: "Raw", icon: :"file-code")
           c.with_item(label: "Blame", icon: :people)
         end
       end
+      # @!endgroup
 
-      def with_links_as_tags
+      # NOTE: this preview uses a group to force it's display below the other groups
+      # @!group With link as tag
+      def with_link_as_tag
         render(Primer::Alpha::SegmentedControl.new) do |c|
           c.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
           c.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
           c.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
         end
       end
+      # @!endgroup
     end
   end
 end

previews/primer/beta/counter_preview.rb

@@ -16,20 +16,67 @@ def playground(count: 1_000, limit: nil, round: false, hide_if_zero: false, sche
       end
 
       # @label Default Options
-      #
-      # @param count number
-      # @param limit number
-      # @param hide_if_zero toggle
-      # @param round toggle
-      # @param scheme [Symbol] select [[Default, default], [Primary, primary], [Secondary, secondary]]]
-      def default(count: 1_000, limit: nil, round: false, hide_if_zero: false, scheme: :default)
-        render(Primer::Beta::Counter.new(count: count, round: round, limit: limit, hide_if_zero: hide_if_zero, scheme: scheme))
+      def default
+        render(Primer::Beta::Counter.new(count: 1_000))
       end
 
       # @label With Text
       def with_text
         render(Primer::Beta::Counter.new(text: "∞"))
       end
+
+      # @!group Color Schemes
+      #
+      # @label Default
+      def color_scheme_default
+        render(Primer::Beta::Counter.new(count: 1_000))
+      end
+
+      # @label Primary
+      def color_scheme_primary
+        render(Primer::Beta::Counter.new(count: 1_000, scheme: :primary))
+      end
+
+      # @label Secondary
+      def color_scheme_secondary
+        render(Primer::Beta::Counter.new(count: 1_000, scheme: :secondary))
+      end
+      #
+      # @!endgroup
+
+      # @!group Rounded Number
+      #
+      # @label Default (No Rounding)
+      def rounding_default
+        render(Primer::Beta::Counter.new(count: 1_234))
+      end
+
+      # @label Rounded Above 1,000
+      def rounding_above_1000
+        render(Primer::Beta::Counter.new(count: 1_234, round: true))
+      end
+
+      # @label Rounded Below 1,000
+      def rounding_below_1000
+        render(Primer::Beta::Counter.new(count: 999, round: true))
+      end
+
+      # @label Rounded Large Numbers w/ Default Limit
+      def rounding_large_number
+        render(Primer::Beta::Counter.new(count: 4_567_890, round: true))
+      end
+
+      # @label Rounded Large Numbers, Less Than Custom Limit
+      def rounding_large_number_less_than_custom_limit
+        render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000_000, round: true))
+      end
+
+      # @label Rounded Large Numbers, Greater Than Custom Limit
+      def rounding_large_number_greater_than_custom_limit
+        render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000, round: true))
+      end
+      #
+      # @!endgroup
     end
   end
 end