openproject-primer_view_components 0.6.3

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

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `AvatarStack` to stack multiple avatars together.
+    class AvatarStack < Primer::Component
+      status :beta
+
+      ALIGN_DEFAULT = :left
+      ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+      DEFAULT_TAG = :div
+      TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+      DEFAULT_BODY_TAG = :div
+      BODY_TAG_OPTIONS = [DEFAULT_BODY_TAG, :span].freeze
+      # Required list of stacked avatars.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
+      renders_many :avatars, "Primer::Beta::Avatar"
+
+      # @example Default
+      #   <%= render(Primer::Beta::AvatarStack.new) do |component| %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #   <% end  %>
+      #
+      # @example Align right
+      #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |component| %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #   <% end  %>
+      #
+      # @example With tooltip
+      #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |component| %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #   <% end  %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>
+      # @param align [Symbol] <%= one_of(Primer::Beta::AvatarStack::ALIGN_OPTIONS) %>
+      # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
+      # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
+      #   The default tag is <%= pretty_value(Primer::Beta::AvatarStack::DEFAULT_BODY_TAG) %> but can be changed using `tag:`
+      #   to <%= one_of(Primer::Beta::AvatarStack::BODY_TAG_OPTIONS, lower: true) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+        @system_arguments = system_arguments
+        @tooltipped = tooltipped
+        @body_arguments = body_arguments
+
+        body_tag = @body_arguments[:tag] || DEFAULT_BODY_TAG
+        @body_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, body_tag, DEFAULT_BODY_TAG)
+        @body_arguments[:classes] = class_names(
+          "AvatarStack-body",
+          @body_arguments[:classes]
+        )
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        @system_arguments[:classes] = class_names(
+          "AvatarStack",
+          system_arguments[:classes],
+          "AvatarStack--right" => @align == :right
+        )
+      end
+
+      def body_component
+        if @tooltipped
+          Primer::Tooltip.new(**@body_arguments) # rubocop:disable Primer/ComponentNameMigration
+        else
+          Primer::BaseComponent.new(**@body_arguments)
+        end
+      end
+
+      def before_render
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "AvatarStack--two" => avatars.size == 2,
+          "AvatarStack--three-plus" => avatars.size > 2
+        )
+      end
+
+      def render?
+        avatars.any?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
+    class BaseButton < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :button
+      TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+      DEFAULT_TYPE = :button
+      TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+      attr_reader :disabled
+      alias disabled? disabled
+
+      # @example Block
+      #   <%= render(Primer::Beta::BaseButton.new(block: :true)) { "Block" } %>
+      #   <%= render(Primer::Beta::BaseButton.new(block: :true, scheme: :primary)) { "Primary block" } %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param block [Boolean] Whether button is full-width with `display: block`.
+      # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        tag: DEFAULT_TAG,
+        type: DEFAULT_TYPE,
+        block: false,
+        disabled: false,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+
+        @system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE) if @system_arguments[:tag] == :button
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "btn-block" => block
+        )
+
+        @disabled = disabled
+        return unless @disabled
+
+        @system_arguments[:tag] = :button
+        @system_arguments[:disabled] = ""
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/primer/beta/blankslate.css

@@ -0,0 +1 @@
+.blankslate{padding:var(--base-size-32,2rem);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted))}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}

data/app/components/primer/beta/blankslate.css.json

@@ -0,0 +1,22 @@
+{
+  "name": "beta/blankslate",
+  "selectors": [
+    ".blankslate",
+    ".blankslate p",
+    ".blankslate code",
+    ".blankslate img",
+    ".blankslate-icon",
+    ".blankslate-image",
+    ".blankslate-heading",
+    ".blankslate-action",
+    ".blankslate-action:first-of-type",
+    ".blankslate-action:last-of-type",
+    ".blankslate-capped",
+    ".blankslate-spacious",
+    ".blankslate-narrow",
+    ".blankslate-large img",
+    ".blankslate-large h3",
+    ".blankslate-large p",
+    ".blankslate-clean-background"
+  ]
+}

data/app/components/primer/beta/blankslate.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAA4B,CAD5B,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,gDACF,CAEA,iBAGE,6DAAkC,CAClC,yGAA8D,CAC9D,4CAAyC,CAHzC,8CAAuC,CADvC,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,gDAA2B,CAF3B,8CAAyC,CACzC,2CAAqC,CAFrC,4CAIF,CAEA,kBACE,0CACF,CAEA,oBACE,uCACF,CAEA,mBACE,uCASF,CAPE,iCACE,2CACF,CAEA,gCACE,8CACF,CAGF,mBACE,+EACF,CAEA,qBACE,2DACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,qCAIF,CAEA,oBACE,0CACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n  position: relative;\n  padding: var(--base-size-32);\n  text-align: center;\n\n  & p {\n    color: var(--fgColor-muted);\n  }\n\n  & code {\n    padding: 2px 5px 3px;\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  margin-right: var(--control-small-gap);\n  margin-bottom: var(--stack-gap-condensed);\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n}\n\n.blankslate-action {\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  padding: var(--base-size-80) var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  & h3 {\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    font-size: 24px;\n  }\n\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n"]}

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

@@ -0,0 +1,19 @@
+<%= wrapper do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <%= visual %>
+
+    <%= heading %>
+    <%= description %>
+
+    <% if primary_action.present? %>
+      <div class="blankslate-action">
+        <%= primary_action %>
+      </div>
+    <% end %>
+    <% if secondary_action.present? %>
+      <div class="blankslate-action">
+        <%= secondary_action %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/beta/blankslate.pcss

@@ -0,0 +1,90 @@
+/* blankslate */
+
+.blankslate {
+  position: relative;
+  padding: var(--base-size-32);
+  text-align: center;
+
+  & p {
+    color: var(--fgColor-muted);
+  }
+
+  & code {
+    padding: 2px 5px 3px;
+    font-size: var(--text-body-size-medium);
+    background: var(--bgColor-default);
+    border: var(--borderWidth-thin) solid var(--borderColor-muted);
+    border-radius: var(--borderRadius-medium);
+  }
+
+  & img {
+    width: 56px;
+    height: 56px;
+  }
+}
+
+.blankslate-icon {
+  margin-right: var(--control-small-gap);
+  margin-bottom: var(--stack-gap-condensed);
+  margin-left: var(--control-small-gap);
+  color: var(--fgColor-muted);
+}
+
+.blankslate-image {
+  margin-bottom: var(--stack-gap-normal);
+}
+
+.blankslate-heading {
+  margin-bottom: var(--base-size-4);
+}
+
+.blankslate-action {
+  margin-top: var(--stack-gap-normal);
+
+  &:first-of-type {
+    margin-top: var(--stack-gap-spacious);
+  }
+
+  &:last-of-type {
+    margin-bottom: var(--stack-gap-condensed);
+  }
+}
+
+.blankslate-capped {
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
+}
+
+.blankslate-spacious {
+  padding: var(--base-size-80) var(--base-size-40);
+}
+
+.blankslate-narrow {
+  max-width: 485px;
+  margin: 0 auto;
+}
+
+/* was .large-format
+** QUESTION: should we deprecate this? */
+.blankslate-large {
+  & img {
+    width: 80px;
+    height: 80px;
+  }
+
+  & h3 {
+    margin: var(--stack-gap-normal) 0;
+
+    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
+    font-size: 24px;
+  }
+
+  & p {
+    font-size: var(--text-body-size-large);
+  }
+}
+
+/* was .clean-background
+** TO DO: deprecate this and use utility instead */
+.blankslate-clean-background {
+  border: 0;
+}

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

@@ -0,0 +1,238 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
+    #
+    # @accessibility
+    #   - The blankslate uses a semantic heading that must be set at the appropriate level based on the hierarchy of the page.
+    #   - All blankslate visuals have been programmed as decorative images, using `aria-hidden=”true”` and `img alt=””`,  which will hide the visual from screen reader users.
+    #   - The blankslate supports a primary and secondary action. Both actions have been built as semantic links with primary and secondary styling.
+    #   - `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, "Learn more" or "Click here".
+    #   - The blankslate can leverage the spinner component, which will communicate to screen reader users that the content is still loading.
+    class Blankslate < Primer::Component
+      status :beta
+
+      VISUAL_OPTIONS = %i[icon spinner image].freeze
+
+      # Optional visual.
+      #
+      # Use:
+      #
+      # - `visual_icon` for an <%= link_to_component(Primer::Beta::Octicon) %>.
+      # - `visual_image` for an <%= link_to_component(Primer::Alpha::Image) %>.
+      # - `visual_spinner` for a <%= link_to_component(Primer::Beta::Spinner) %>.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :visual, types: {
+        icon: lambda { |**system_arguments|
+          system_arguments[:size] ||= :medium
+          system_arguments[:classes] = class_names("blankslate-icon", system_arguments[:classes])
+
+          Primer::Beta::Octicon.new(**system_arguments)
+        },
+        spinner: lambda { |**system_arguments|
+          system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
+
+          Primer::Beta::Spinner.new(**system_arguments)
+        },
+        image: lambda { |**system_arguments|
+          system_arguments[:size] = "56x56"
+          system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
+
+          Primer::Alpha::Image.new(**system_arguments)
+        }
+      }
+
+      # Required heading.
+      #
+      # @param tag [String]  <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :heading, lambda { |tag:, **system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = tag
+        system_arguments[:classes] = class_names("blankslate-heading", system_arguments[:classes])
+
+        Primer::Beta::Heading.new(**system_arguments)
+      }
+
+      # Optional description.
+      #
+      # - The description should always be informative and actionable.
+      # - Don't use phrases like "You can".
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :description, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :p
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Optional primary action
+      #
+      # The `primary_action` slot renders an anchor link which is visually styled as a button to provide more emphasis to the
+      # Blankslate's primary action.
+      #
+      # @param href [String] URL to be used for the primary action.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :primary_action, lambda { |href:, **system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :a
+        system_arguments[:href] = href
+        system_arguments[:size] = :medium
+        system_arguments[:scheme] ||= :primary
+
+        Primer::Beta::Button.new(**system_arguments)
+      }
+
+      # Optional secondary action
+      #
+      # The `secondary_action` slot renders a normal anchor link, which can be used to redirect the user to additional information
+      # (e.g. Help documentation).
+      #
+      # @param href [String] URL to be used for the secondary action.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :secondary_action, lambda { |href:, **system_arguments|
+        system_arguments[:href] = href
+
+        Primer::Beta::Link.new(**system_arguments)
+      }
+
+      # @example Basic
+      #   <%= render Primer::Beta::Blankslate.new do |component| %>
+      #     <% component.with_heading(tag: :h2).with_content("Title") %>
+      #     <% component.with_description { "Description"} %>
+      #   <% end %>
+      #
+      # @example Icon
+      #   @description
+      #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+      #   @code
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :globe) %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description { "Description"} %>
+      #     <% end %>
+      #
+      # @example Loading
+      #   @description
+      #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
+      #   @code
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_spinner(size: :large) %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description { "Description"} %>
+      #     <% end %>
+      #
+      # @example Using an image
+      #   @description
+      #     Add an `image` to give context that an Octicon couldn't.
+      #   @code
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description { "Description"} %>
+      #     <% end %>
+      #
+      # @example Custom content
+      #   @description
+      #     Pass custom content to `description`.
+      #   @code
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_heading(tag: :h2).with_content("Title") %>
+      #       <% component.with_description do %>
+      #         <em>Your custom content here</em>
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example Primary action
+      #   @description
+      #     Provide a `primary_action` to guide users to take action from the blankslate. The `primary_action` appears below the description and custom content.
+      #   @code
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #       <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
+      #     <% end %>
+      #
+      # @example Secondary action
+      #   @description
+      #     Add an additional `secondary_action` to help users learn more about a feature. See <%= link_to_accessibility %>. `secondary_action` will be shown at the very bottom:
+      #   @code
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #       <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
+      #     <% end %>
+      #
+      # @example Primary and secondary actions
+      #   @description
+      #     `primary_action` and `secondary_action` can also be used together. The `primary_action` will always be rendered before the `secondary_action`:
+      #   @code
+      #     <%= render Primer::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #       <% component.with_primary_action(href: "https://github.com/monalisa/mona/wiki/_new").with_content("Create the first page") %>
+      #       <% component.with_secondary_action(href: "https://docs.github.com/en/github/building-a-strong-community/about-wikis").with_content("Learn more about wikis") %>
+      #     <% end %>
+      #
+      # @example Variations
+      #   @description
+      #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width of `485px`, and `spacious` increases the padding from `32px` to `80px 40px`.
+      #   @code
+      #     <%= render Primer::Beta::Blankslate.new(
+      #       narrow: true,
+      #       spacious: true,
+      #     ) do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #     <% end %>
+      #
+      # @example With border
+      #   @description
+      #     It's possible to add a border around the Blankslate. This will wrap the Blankslate in a BorderBox.
+      #   @code
+      #     <%= render Primer::Beta::Blankslate.new(border: true) do |component| %>
+      #       <% component.with_visual_icon(icon: :book) %>
+      #       <% component.with_heading(tag: :h2).with_content("Welcome to the mona wiki!") %>
+      #       <% component.with_description { "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together."} %>
+      #     <% end %>
+      #
+      # @param narrow [Boolean] Adds a maximum width of `485px` to the Blankslate.
+      # @param spacious [Boolean] Increases the padding from `32px` to `80px 40px`.
+      # @param border [Boolean] Adds a border around the Blankslate.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(narrow: false, spacious: false, border: false, **system_arguments)
+        @border = border
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "blankslate",
+          "blankslate-narrow": narrow,
+          "blankslate-spacious": spacious
+        )
+      end
+
+      def render?
+        heading.present?
+      end
+
+      def wrapper
+        unless @border
+          yield
+          return # returning `yield` caused a double render
+        end
+
+        content_tag(:div, class: "Box") do
+          yield if block_given?
+        end
+      end
+    end
+  end
+end

data/app/components/primer/beta/border_box/header.html.erb

@@ -0,0 +1,4 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= title %>
+  <%= content %>
+<% end %>

data/app/components/primer/beta/border_box/header.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    class BorderBox
+      # `BorderBox::Header` is used inside `BorderBox` to render its header slot.
+      #
+      # @accessibility When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
+      class Header < Primer::Component
+        status :beta
+
+        TITLE_TAG_FALLBACK = :h2
+        TITLE_TAG_OPTIONS = [:h1, TITLE_TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
+
+        # Optional Title.
+        #
+        # @param tag [Symbol] <%= one_of(Primer::Beta::BorderBox::Header::TITLE_TAG_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :title, lambda { |tag:, **system_arguments|
+          system_arguments[:tag] = fetch_or_fallback(TITLE_TAG_OPTIONS, tag, TITLE_TAG_FALLBACK)
+          system_arguments[:classes] = class_names(
+            "Box-title",
+            system_arguments[:classes]
+          )
+
+          Primer::BaseComponent.new(**system_arguments)
+        }
+
+        # @example Default
+        #
+        #   <%= render(Primer::Beta::BorderBox::Header.new) do %>
+        #     Header
+        #   <% end %>
+        #
+        # @example with title
+        #   <%= render(Primer::Beta::BorderBox::Header.new) do |h| %>
+        #     <% h.with_title(tag: :h3) do %>I am a title<% end %>
+        #   <% end %>
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(**system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Box-header",
+            system_arguments[:classes]
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/beta/border_box.css

@@ -0,0 +1 @@
+.Box{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--bgColor-muted,var(--color-canvas-subtle));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis,var(--color-accent-fg))}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent,var(--color-accent-fg));cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.Box-header--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box-row--yellow{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle))}.Box-row--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-subtle))}.Box-row--gray{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}

data/app/components/primer/beta/border_box.css.json

@@ -0,0 +1,54 @@
+{
+  "name": "beta/border_box",
+  "selectors": [
+    ".Box",
+    ".Box--condensed",
+    ".Box--condensed .Box-body",
+    ".Box--condensed .Box-footer",
+    ".Box--condensed .Box-header",
+    ".Box--condensed .Box-btn-octicon.btn-octicon",
+    ".Box--condensed .Box-row",
+    ".Box--spacious .Box-header",
+    ".Box--spacious .Box-title",
+    ".Box--spacious .Box-body",
+    ".Box--spacious .Box-btn-octicon.btn-octicon",
+    ".Box--spacious .Box-footer",
+    ".Box--spacious .Box-row",
+    ".Box-header",
+    ".Box-title",
+    ".Box-body",
+    ".Box-body:last-of-type",
+    ".Box-row",
+    ".Box-row:first-of-type",
+    ".Box-row:last-of-type",
+    ".Box-row.Box-row--unread",
+    ".Box-row.unread",
+    ".Box-row.navigation-focus .Box-row--drag-button",
+    ".Box-row.navigation-focus.is-dragging .Box-row--drag-button",
+    ".Box-row.navigation-focus.sortable-chosen",
+    ".Box-row.navigation-focus.sortable-ghost",
+    ".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",
+    ".Box-row--focus-gray.navigation-focus",
+    ".Box-row--focus-blue.navigation-focus",
+    ".Box-row--hover-gray:hover",
+    ".Box-row--hover-blue:hover",
+    ".Box-row-link",
+    ".Box-row-link:hover",
+    ".Box-row--drag-button",
+    ".Box-footer",
+    ".Box--scrollable",
+    ".Box--blue",
+    ".Box--blue .Box-header",
+    ".Box--blue .Box-body",
+    ".Box--blue .Box-footer",
+    ".Box--blue .Box-row",
+    ".Box--danger",
+    ".Box--danger .Box-body:last-of-type",
+    ".Box--danger .Box-row:first-of-type",
+    ".Box-header--blue",
+    ".Box-row--yellow",
+    ".Box-row--blue",
+    ".Box-row--gray",
+    ".Box-btn-octicon.btn-octicon"
+  ]
+}