add a component for zen mode button

app/components/primer/open_project/zen_mode_button.html.erb

@@ -0,0 +1,12 @@
+<%= render(Primer::BaseComponent.new(tag: "zen-mode-button", **@system_arguments)) do %>
+  <%= render(
+          Primer::Beta::IconButton.new(
+            scheme: :default,
+            id: 'zenModeButton',
+            icon: 'screen-normal',
+            aria: { label: 'zen mode' },
+            autofocus: true,
+            data: { target: "zen-mode-button.button", action: "click:zen-mode-button#performAction" }
+          )
+        ) %>
+<% end %>

app/components/primer/open_project/zen_mode_button.pcss

@@ -0,0 +1,5 @@
+/* CSS for ZenModeButton  */
+
+.zen-mode-button--active {
+box-shadow: 0 0 3px var(--color-border-default) inset;
+}

app/components/primer/open_project/zen_mode_button.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # Add a general description of component here
+    # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+    # @accessibility Add any accessibility considerations
+    class ZenModeButton < Primer::Component
+      status :open_project
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "zen-mode-button"
+        @system_arguments[:classes] =
+        class_names(
+          @system_arguments[:classes],
+          "zen-mode-button"
+        )
+      end
+    end
+  end
+end

app/components/primer/open_project/zen_mode_button.ts

@@ -0,0 +1,48 @@
+import {attr, controller, target, targets} from '@github/catalyst'
+import screenfull from 'screenfull';
+
+
+@controller
+class ZenModeButtonElement extends HTMLElement {
+  @target button: HTMLElement
+  inZenMode = false;
+  @attr name = 'screen-full';
+
+  private deactivateZenMode():void {
+    this.inZenMode = false;
+    this.button.classList.remove('zen-mode-button--active');
+    this.querySelector('body')?.classList.remove('zen-mode');
+    if (screenfull.isEnabled && screenfull.isFullscreen) {
+      screenfull.exit();
+    }
+  }
+
+  private activateZenMode() {
+    this.inZenMode = true;
+    document.querySelector('body')?.classList.add('zen-mode');
+    this.button.classList.add('zen-mode-button--active');
+    if (screenfull.isEnabled) {
+      screenfull.request();
+    }
+  }
+
+  public performAction() {
+    if (this.inZenMode) {
+      this.deactivateZenMode();
+    } else {
+      this.activateZenMode();
+    }
+  }
+}
+
+declare global {
+  interface Window {
+      ZenModeButtonElement: typeof ZenModeButtonElement
+  }
+}
+
+if (!window.customElements.get('zen-mode-button')) {
+  window.ZenModeButtonElement = ZenModeButtonElement
+  window.customElements.define('zen-mode-button', ZenModeButtonElement)
+}
+

app/components/primer/primer.pcss

@@ -44,3 +44,4 @@
 @import "./open_project/drag_handle.pcss";
 @import "./open_project/border_grid.pcss";
 @import "./open_project/input_group.pcss";
+@import "./open_project/zen_mode_button.pcss";

app/components/primer/primer.ts

@@ -20,3 +20,4 @@ import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'
 import '../../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
+import './open_project/zen_mode_button'

package.json

@@ -52,7 +52,8 @@
     "@github/relative-time-element": "^4.0.0",
     "@github/tab-container-element": "^3.1.2",
     "@oddbird/popover-polyfill": "^0.3.6",
-    "@primer/behaviors": "^1.3.4"
+    "@primer/behaviors": "^1.3.4",
+    "screenfull": "^6.0.2"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",

previews/primer/open_project/zen_mode_button_preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label ZenModeButton
+    class ZenModeButtonPreview < ViewComponent::Preview
+      def playground()
+        render(Primer::OpenProject::ZenModeButton.new())
+      end
+    # @label Default
+      def default()
+        render(Primer::OpenProject::ZenModeButton.new())
+      end
+    end
+  end
+end

static/classes.json

@@ -677,5 +677,8 @@
   ],
   "UnderlineNav-octicon": [
     "Primer::Alpha::UnderlineNav"
+  ],
+  "Zone-mode-button": [
+    "Primer::OpenProject::ZoneModeButton"
   ]
 }

test/components/component_test.rb

@@ -8,6 +8,7 @@ class PrimerComponentTest < Minitest::Test
 
   # Components with any arguments necessary to make them render
   COMPONENTS_WITH_ARGS = [
+    [Primer::OpenProject::ZenModeButton, {}],
     [Primer::OpenProject::InputGroup, {}, proc { |component|
       component.with_text_input(name: "a name", label: "My input group", value: "Copyable value")
       component.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })

test/components/primer/open_project/zen_mode_button_test.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require "components/test_helper"
+
+class PrimerOpenProjectZenModeButtonTest < Minitest::Test
+  include Primer::ComponentTestHelpers
+
+  def test_renders
+    render_inline(Primer::OpenProject::ZenModeButton.new)
+
+    assert_selector(".zen-mode-button .octicon-screen-normal")
+  end
+end

test/system/open_project/zen_mode_button_test.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require "system/test_case"
+
+class IntegrationOpenProjectZenModeButtonTest < System::TestCase
+  def test_renders_component
+    visit_preview(:default)
+
+    assert_selector(".zen-mode-button")
+  end
+end