primer_view_components 0.0.94 → 0.0.95

data/app/components/primer/alpha/dialog.rb

@@ -105,10 +105,10 @@ module Primer
       #     <% end %>
       # @param id [String] The id of the dialog.
       # @param title [String] Describes the content of the dialog.
-      # @param subtitle [String] Provides dditional context for the dialog, also setting the `aria-describedby` attribute.
+      # @param subtitle [String] Provides additional context for the dialog, also setting the `aria-describedby` attribute.
       # @param size [Symbol] The size of the dialog. <%= one_of(Primer::Alpha::Dialog::SIZE_OPTIONS) %>
-      # @param position [Symbol] The size of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %>
-      # @param position_narrow [Symbol] The size of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>
+      # @param position [Symbol] The position of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %>
+      # @param position_narrow [Symbol] The position of the dialog when narrow. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>
       # @param visually_hide_title [Boolean] If true will hide the heading title, while still making it available to Screen Readers.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(

data/app/components/primer/alpha/toggle_switch.js

@@ -102,6 +102,9 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
             const response = await fetch(this.src, {
                 credentials: 'same-origin',
                 method: 'POST',
+                headers: {
+                    'Requested-With': 'XMLHttpRequest'
+                },
                 body
             });
             if (response.ok) {

data/app/components/primer/alpha/toggle_switch.ts

@@ -124,6 +124,9 @@ export class ToggleSwitchElement extends HTMLElement {
       const response = await fetch(this.src, {
         credentials: 'same-origin',
         method: 'POST',
+        headers: {
+          'Requested-With': 'XMLHttpRequest'
+        },
         body
       })
       if (response.ok) {

data/app/components/primer/alpha/tool_tip.js

@@ -247,7 +247,12 @@ class ToolTipElement extends HTMLElement {
             if (this.type === 'label') {
                 let labelledBy = this.control.getAttribute('aria-labelledby');
                 if (labelledBy) {
-                    labelledBy = `${labelledBy} ${this.id}`;
+                    if (!labelledBy.split(' ').includes(this.id)) {
+                        labelledBy = `${labelledBy} ${this.id}`;
+                    }
+                    else {
+                        labelledBy = `${labelledBy}`;
+                    }
                 }
                 else {
                     labelledBy = this.id;
@@ -258,7 +263,17 @@ class ToolTipElement extends HTMLElement {
             }
             else {
                 let describedBy = this.control.getAttribute('aria-describedby');
-                describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id);
+                if (describedBy) {
+                    if (!describedBy.split(' ').includes(this.id)) {
+                        describedBy = `${describedBy} ${this.id}`;
+                    }
+                    else {
+                        describedBy = `${describedBy}`;
+                    }
+                }
+                else {
+                    describedBy = this.id;
+                }
                 this.control.setAttribute('aria-describedby', describedBy);
             }
         }

data/app/components/primer/alpha/tool_tip.ts

@@ -264,7 +264,11 @@ class ToolTipElement extends HTMLElement {
       if (this.type === 'label') {
         let labelledBy = this.control.getAttribute('aria-labelledby')
         if (labelledBy) {
-          labelledBy = `${labelledBy} ${this.id}`
+          if (!labelledBy.split(' ').includes(this.id)) {
+            labelledBy = `${labelledBy} ${this.id}`
+          } else {
+            labelledBy = `${labelledBy}`
+          }
         } else {
           labelledBy = this.id
         }
@@ -274,7 +278,15 @@ class ToolTipElement extends HTMLElement {
         this.setAttribute('aria-hidden', 'true')
       } else {
         let describedBy = this.control.getAttribute('aria-describedby')
-        describedBy ? (describedBy = `${describedBy} ${this.id}`) : (describedBy = this.id)
+        if (describedBy) {
+          if (!describedBy.split(' ').includes(this.id)) {
+            describedBy = `${describedBy} ${this.id}`
+          } else {
+            describedBy = `${describedBy}`
+          }
+        } else {
+          describedBy = this.id
+        }
         this.control.setAttribute('aria-describedby', describedBy)
       }
     } else if (name === 'data-direction') {

data/app/components/primer/beta/icon_button.html.erb

@@ -1,4 +1,4 @@
-<%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip") do %>
+<%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip", **@wrapper_arguments) do %>
   <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
     <%= render Primer::OcticonComponent.new(icon: @icon, classes: "Button-visual") %>
   <% end -%>

data/app/components/primer/beta/icon_button.rb

@@ -47,17 +47,19 @@ module Primer
       #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
       #
       # @param icon [String] Name of <%= link_to_octicons %> to use.
+      # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::IconButton::SCHEME_OPTIONS) %>
       # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
-      # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-      # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+      # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
       # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
       # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
       # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(icon:, scheme: DEFAULT_SCHEME, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+      def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
         @icon = icon
 
+        @wrapper_arguments = wrapper_arguments
         @system_arguments = system_arguments
         @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
 

data/app/components/primer/button_component.rb

@@ -3,7 +3,7 @@
 module Primer
   # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
   class ButtonComponent < Primer::Component
-    status :beta
+    status :deprecated
 
     DEFAULT_SCHEME = :default
     LINK_SCHEME = :link

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

@@ -0,0 +1,14 @@
+export declare class ActionBarElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    menuItems: HTMLElement[];
+    itemContainer: HTMLElement;
+    moreMenu: HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        ActionBarElement: typeof ActionBarElement;
+    }
+}

data/app/components/primer/experimental/action_bar.js

@@ -0,0 +1,141 @@
+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;
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _ActionBarElement_instances, _ActionBarElement_observer, _ActionBarElement_initialBarWidth, _ActionBarElement_previousBarWidth, _ActionBarElement_itemGap, _ActionBarElement_focusController, _ActionBarElement_focusSettings, _ActionBarElement_availableSpace, _ActionBarElement_shrinking, _ActionBarElement_growing;
+import { controller, targets, target } from '@github/catalyst';
+import { focusZone, FocusKeys } from '@primer/behaviors';
+let ActionBarElement = class ActionBarElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ActionBarElement_instances.add(this);
+        _ActionBarElement_observer.set(this, void 0);
+        _ActionBarElement_initialBarWidth.set(this, void 0);
+        _ActionBarElement_previousBarWidth.set(this, void 0);
+        _ActionBarElement_itemGap.set(this, void 0);
+        _ActionBarElement_focusController.set(this, void 0);
+        _ActionBarElement_focusSettings.set(this, {
+            bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
+        });
+    }
+    connectedCallback() {
+        var _a, _b, _c;
+        __classPrivateFieldSet(this, _ActionBarElement_initialBarWidth, this.offsetWidth, "f");
+        __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, this.offsetWidth, "f");
+        __classPrivateFieldSet(this, _ActionBarElement_itemGap, parseInt((_a = window.getComputedStyle(this.itemContainer)) === null || _a === void 0 ? void 0 : _a.columnGap, 10) || 0, "f");
+        // Calculate the width of all the items before hiding anything
+        for (const item of this.items) {
+            const width = item.getBoundingClientRect().width;
+            const marginLeft = parseInt((_b = window.getComputedStyle(item)) === null || _b === void 0 ? void 0 : _b.marginLeft, 10);
+            const marginRight = parseInt((_c = window.getComputedStyle(item)) === null || _c === void 0 ? void 0 : _c.marginRight, 10);
+            item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`);
+        }
+        __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+        this.style.maxWidth = `${this.itemContainer.offsetWidth}px`;
+        // Calculate visible items on page load until there is enough space
+        // to show all items or the first item is hidden
+        while (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5 && !this.items[0].hidden) {
+            __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
+        }
+        this.style.overflow = 'visible';
+        __classPrivateFieldSet(this, _ActionBarElement_observer, new ResizeObserver(entries => {
+            for (const entry of entries) {
+                // Only recalculate if the bar width changed
+                if (__classPrivateFieldGet(this, _ActionBarElement_initialBarWidth, "f") !== entry.contentRect.width) {
+                    if (entry.contentRect.width < __classPrivateFieldGet(this, _ActionBarElement_previousBarWidth, "f")) {
+                        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_shrinking).call(this);
+                    }
+                    else {
+                        __classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_growing).call(this);
+                    }
+                    __classPrivateFieldSet(this, _ActionBarElement_previousBarWidth, entry.contentRect.width, "f");
+                }
+            }
+        }), "f");
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").observe(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldGet(this, _ActionBarElement_observer, "f").unobserve(this);
+    }
+};
+_ActionBarElement_observer = new WeakMap(), _ActionBarElement_initialBarWidth = new WeakMap(), _ActionBarElement_previousBarWidth = new WeakMap(), _ActionBarElement_itemGap = new WeakMap(), _ActionBarElement_focusController = new WeakMap(), _ActionBarElement_focusSettings = new WeakMap(), _ActionBarElement_instances = new WeakSet(), _ActionBarElement_availableSpace = function _ActionBarElement_availableSpace() {
+    // Get the offset of the item container from the container edge
+    return this.offsetWidth - this.itemContainer.offsetWidth;
+}, _ActionBarElement_shrinking = function _ActionBarElement_shrinking() {
+    var _a;
+    if (this.items[0].hidden) {
+        return;
+    }
+    const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
+    if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) < this.moreMenu.offsetWidth + gapSpace) {
+        const visibleItems = this.items.filter(item => !item.hidden);
+        const hiddenMenuItems = this.menuItems.filter(item => item.hidden);
+        visibleItems[visibleItems.length - 1].hidden = true;
+        hiddenMenuItems[hiddenMenuItems.length - 1].hidden = false;
+        if (this.moreMenu.hidden) {
+            this.moreMenu.hidden = false;
+        }
+        // Reset focus controller
+        (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+    }
+}, _ActionBarElement_growing = function _ActionBarElement_growing() {
+    var _a;
+    if (this.moreMenu.hidden) {
+        return;
+    }
+    const gapSpace = __classPrivateFieldGet(this, _ActionBarElement_itemGap, "f") * 0.5;
+    const hiddenItems = this.items.filter(item => item.hidden);
+    if (hiddenItems.length === 0) {
+        return;
+    }
+    const hiddenItemWidth = Number(hiddenItems[0].getAttribute('data-offset-width'));
+    if (__classPrivateFieldGet(this, _ActionBarElement_instances, "m", _ActionBarElement_availableSpace).call(this) >= this.moreMenu.offsetWidth + hiddenItemWidth + gapSpace) {
+        const visibleMenuItems = this.menuItems.filter(item => !item.hidden);
+        hiddenItems[0].hidden = false;
+        visibleMenuItems[0].hidden = true;
+        if (hiddenItems.length === 2) {
+            hiddenItems[1].hidden = false;
+            visibleMenuItems[1].hidden = true;
+        }
+        // If there was only one item left, hide the more menu
+        if (hiddenItems.length <= 2) {
+            this.moreMenu.hidden = true;
+        }
+        // Reset focus controller
+        (_a = __classPrivateFieldGet(this, _ActionBarElement_focusController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+        __classPrivateFieldSet(this, _ActionBarElement_focusController, focusZone(this, __classPrivateFieldGet(this, _ActionBarElement_focusSettings, "f")), "f");
+    }
+};
+__decorate([
+    targets
+], ActionBarElement.prototype, "items", void 0);
+__decorate([
+    targets
+], ActionBarElement.prototype, "menuItems", void 0);
+__decorate([
+    target
+], ActionBarElement.prototype, "itemContainer", void 0);
+__decorate([
+    target
+], ActionBarElement.prototype, "moreMenu", void 0);
+ActionBarElement = __decorate([
+    controller
+], ActionBarElement);
+export { ActionBarElement };
+window.ActionBarElement = ActionBarElement;

data/app/components/primer/icon_button.rb

@@ -12,7 +12,7 @@ module Primer
   #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
   #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
   class IconButton < Primer::Component
-    status :beta
+    status :deprecated
 
     DEFAULT_SCHEME = :default
     SCHEME_MAPPINGS = {

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -33,7 +33,7 @@ module Primer
 
         given_value
       else
-        if fallback_raises && ENV["RAILS_ENV"] != "production" && ENV["STORYBOOK"] != "true"
+        if fallback_raises && ENV["RAILS_ENV"] != "production"
           raise InvalidValueError, <<~MSG
             fetch_or_fallback was called with an invalid value.
 

data/lib/primer/deprecations.rb

@@ -7,10 +7,9 @@ module Primer
     DEPRECATED_COMPONENTS = {
       "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
       "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
-      "Primer::BaseButton" => "Primer::Beta::BaseButton",
       "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",
       "Primer::BoxComponent" => "Primer::Box",
-      "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
+      "Primer::ButtonComponent" => "Primer::Beta::Button",
       "Primer::CloseButton" => "Primer::Beta::CloseButton",
       "Primer::CounterComponent" => "Primer::Beta::Counter",
       "Primer::DetailsComponent" => "Primer::Beta::Details",
@@ -19,6 +18,7 @@ module Primer
       "Primer::FlexItemComponent" => nil,
       "Primer::HeadingComponent" => "Primer::Beta::Heading",
       "Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
+      "Primer::IconButton" => "Primer::Beta::IconButton",
       "Primer::Tooltip" => "Primer::Alpha::Tooltip"
     }.freeze
 

data/lib/primer/forms/builder.rb

@@ -14,8 +14,8 @@ module Primer
         super(*args, classify(options), &block)
       end
 
-      def check_box(*args, **options, &block)
-        super(*args, classify(options), &block)
+      def check_box(method, options = {}, checked_value = 1, unchecked_value = 0, &block)
+        super(method, classify(options), checked_value, unchecked_value, &block)
       end
 
       def radio_button(*args, **options, &block)

data/lib/primer/forms/check_box.html.erb

@@ -1,5 +1,9 @@
 <div class="FormControl-checkbox-wrap">
-  <%= builder.check_box(@input.name, **@input.input_arguments) %>
+  <% if @input.scheme == :array %>
+    <%= builder.check_box(@input.name, @input.input_arguments, checked_value, nil) %>
+  <% else %>
+    <%= builder.check_box(@input.name, @input.input_arguments) %>
+  <% end %>
   <span class="FormControl-checkbox-labelWrap">
     <%= builder.label(@input.name, **@input.label_arguments) do %>
       <%= @input.label %>

data/lib/primer/forms/check_box.rb

@@ -10,6 +10,17 @@ module Primer
         @input = input
         @input.add_label_classes("FormControl-label")
         @input.add_input_classes("FormControl-checkbox")
+
+        return unless @input.scheme == :array
+
+        @input.input_arguments[:multiple] = true
+        @input.label_arguments[:value] = checked_value
+      end
+
+      private
+
+      def checked_value
+        @input.value || "1"
       end
     end
   end

data/lib/primer/forms/dsl/check_box_group_input.rb

@@ -7,7 +7,8 @@ module Primer
       class CheckBoxGroupInput < Input
         attr_reader :label, :check_boxes
 
-        def initialize(label: nil, **system_arguments)
+        def initialize(name: nil, label: nil, **system_arguments)
+          @name = name
           @label = label
           @check_boxes = []
 
@@ -31,9 +32,21 @@ module Primer
         end
 
         def check_box(**system_arguments)
-          @check_boxes << CheckBoxInput.new(
-            builder: @builder, form: @form, **system_arguments
-          )
+          args = {
+            name: @name,
+            **system_arguments,
+            builder: @builder,
+            form: @form,
+            scheme: scheme
+          }
+
+          @check_boxes << CheckBoxInput.new(**args)
+        end
+
+        private
+
+        def scheme
+          @name ? :array : :boolean
         end
       end
     end

data/lib/primer/forms/dsl/check_box_input.rb

@@ -5,11 +5,20 @@ module Primer
     module Dsl
       # :nodoc:
       class CheckBoxInput < Input
-        attr_reader :name, :label
+        DEFAULT_SCHEME = :boolean
+        SCHEMES = [DEFAULT_SCHEME, :array].freeze
+
+        attr_reader :name, :label, :value, :scheme
+
+        def initialize(name:, label:, value: nil, scheme: DEFAULT_SCHEME, **system_arguments)
+          raise ArgumentError, "Check box scheme must be one of #{SCHEMES.join(', ')}" unless SCHEMES.include?(scheme)
+
+          raise ArgumentError, "Check box needs an explicit value if scheme is array" if scheme == :array && value.nil?
 
-        def initialize(name:, label:, **system_arguments)
           @name = name
           @label = label
+          @value = value
+          @scheme = scheme
 
           super(**system_arguments)
         end
@@ -21,6 +30,16 @@ module Primer
         def type
           :check_box
         end
+
+        private
+
+        def caption_template_name
+          @caption_template_name ||= if @scheme == :array
+                                       :"#{name}_#{value}"
+                                     else
+                                       name.to_sym
+                                     end
+        end
       end
     end
   end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 94
+      PATCH = 95
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/tasks/coverage.rake

@@ -5,7 +5,7 @@ namespace :coverage do
     require "simplecov"
     require "simplecov-console"
 
-    SimpleCov.minimum_coverage 100
+    SimpleCov.minimum_coverage 99
 
     SimpleCov.collate Dir["simplecov-resultset-*/.resultset.json"], "rails" do
       formatter SimpleCov::Formatter::Console

data/lib/tasks/docs.rake

@@ -131,7 +131,7 @@ namespace :docs do
         f.puts("componentId: #{data[:component_id]}")
         f.puts("status: #{data[:status]}")
         f.puts("source: #{data[:source]}")
-        f.puts("storybook: #{data[:storybook]}")
+        f.puts("lookbook: #{data[:lookbook]}") if preview_exists?(component)
         f.puts("---")
         f.puts
         f.puts("import Example from '#{data[:example_path]}'")
@@ -276,8 +276,8 @@ namespace :docs do
       raise
     end
 
-    File.open("static/arguments.yml", "w") do |f|
-      f.puts YAML.dump(args_for_components)
+    File.open("static/arguments.json", "w") do |f|
+      f.puts JSON.pretty_generate(args_for_components)
     end
 
     # Build system arguments docs from BaseComponent
@@ -371,27 +371,25 @@ namespace :docs do
 
       yard_example_tags = initialize_method.tags(:example)
 
-      path = Pathname.new("test/previews/primer/docs/#{short_name.underscore}_preview.rb")
+      path = Pathname.new("test/previews/docs/#{short_name.underscore}_preview.rb")
       path.dirname.mkdir unless path.dirname.exist?
 
       File.open(path, "w") do |f|
-        f.puts("module Primer")
-        f.puts("  module Docs")
-        f.puts("    class #{short_name}Preview < ViewComponent::Preview")
+        f.puts("module Docs")
+        f.puts("  class #{short_name}Preview < ViewComponent::Preview")
 
         yard_example_tags.each_with_index do |tag, index|
           name, _, code = parse_example_tag(tag)
           method_name = name.split("|").first.downcase.parameterize.underscore
-          f.puts("      def #{method_name}; end")
+          f.puts("    def #{method_name}; end")
           f.puts unless index == yard_example_tags.size - 1
-          path = Pathname.new("test/previews/primer/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
+          path = Pathname.new("test/previews/docs/#{short_name.underscore}_preview/#{method_name}.html.erb")
           path.dirname.mkdir unless path.dirname.exist?
           File.open(path, "w") do |view_file|
             view_file.puts(code.to_s)
           end
         end
 
-        f.puts("    end")
         f.puts("  end")
         f.puts("end")
       end
@@ -399,7 +397,7 @@ namespace :docs do
   end
 
   def generate_yard_registry
-    ENV["SKIP_STORYBOOK_PRELOAD"] = "1"
+    ENV["RAILS_ENV"] = "test"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
     require "primer/view_components"
     require "yard/docs_helper"
@@ -465,7 +463,7 @@ namespace :docs do
       component_id: short_name.underscore,
       status: status.capitalize,
       source: source_url(component),
-      storybook: storybook_url(component),
+      lookbook: lookbook_url(component),
       path: "docs/content/components/#{status_path}#{short_name.downcase}.md",
       example_path: example_path(component),
       require_js_path: require_js_path(component)
@@ -478,10 +476,16 @@ namespace :docs do
     "https://github.com/primer/view_components/tree/main/app/components/#{path}.rb"
   end
 
-  def storybook_url(component)
-    path = component.name.split("::").map { |n| n.underscore.dasherize }.join("-")
+  def lookbook_url(component)
+    path = component.name.underscore.gsub("_component", "")
 
-    "https://primer.style/view-components/stories/?path=/story/#{path}"
+    "https://primer.style/view-components/lookbook/inspect/#{path}/default/"
+  end
+
+  def preview_exists?(component)
+    path = component.name.underscore
+
+    File.exist?("test/previews/#{path}_preview.rb")
   end
 
   def example_path(component)

data/lib/tasks/static.rake

@@ -2,7 +2,7 @@
 
 namespace :static do
   task :dump do
-    ENV["SKIP_STORYBOOK_PRELOAD"] = "1"
+    ENV["RAILS_ENV"] = "test"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
     require "primer/view_components"
     # Loads all components for `.descendants` to work properly

data/lib/tasks/test.rake

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+require "rake/testtask"
+
+namespace :test do
+  desc "Run all tests"
+  task all: [:fast, :system]
+
+  Rake::TestTask.new(:single) do |t|
+    ENV["TZ"] = "Asia/Taipei"
+
+    t.libs << "test"
+    t.libs << "lib"
+    t.test_files = FileList[ENV["TESTS"]]
+  end
+
+  Rake::TestTask.new(:fast) do |t|
+    ENV["TZ"] = "Asia/Taipei"
+
+    t.libs << "test"
+    t.libs << "lib"
+    t.test_files = FileList[
+      "test/components/**/*_test.rb",
+      "test/lib/**/*_test.rb",
+      "test/primer/**/*_test.rb",
+      "test/linters/**/*_test.rb",
+      "test/rubocop/**/*_test.rb"
+    ]
+  end
+
+  Rake::TestTask.new(:system) do |t|
+    ENV["TZ"] = "Asia/Taipei"
+
+    t.libs << "test"
+    t.libs << "lib"
+    t.test_files = FileList["test/system/**/*_test.rb", "test/previews/**/*_test.rb"]
+  end
+
+  Rake::TestTask.new(:bench) do |t|
+    t.libs << "test"
+    t.test_files = FileList["test/benchmarks/**/bench_*.rb"]
+    t.verbose = true
+  end
+end
+
+task :test do
+  if ENV["TESTS"]
+    Rake::Task["test:single"].invoke
+  else
+    Rake::Task["test:all"].invoke
+  end
+end
+
+task bench: "test:bench"

data/lib/tasks/utilities.rake

@@ -4,6 +4,7 @@ namespace :utilities do
   task :build do
     require "yaml"
     require "json"
+    ENV["RAILS_ENV"] = "test"
     require File.expand_path("./../../demo/config/environment.rb", __dir__)
     require "primer/classify/utilities"