yattho_view_components 0.0.1

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

@@ -0,0 +1,238 @@
+# frozen_string_literal: true
+
+module Yattho
+  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 < Yattho::Component
+      status :beta
+
+      VISUAL_OPTIONS = %i[icon spinner image].freeze
+
+      # Optional visual.
+      #
+      # Use:
+      #
+      # - `visual_icon` for an <%= link_to_component(Yattho::Beta::Octicon) %>.
+      # - `visual_image` for an <%= link_to_component(Yattho::Alpha::Image) %>.
+      # - `visual_spinner` for a <%= link_to_component(Yattho::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])
+
+          Yattho::Beta::Octicon.new(**system_arguments)
+        },
+        spinner: lambda { |**system_arguments|
+          system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
+
+          Yattho::Beta::Spinner.new(**system_arguments)
+        },
+        image: lambda { |**system_arguments|
+          system_arguments[:size] = "56x56"
+          system_arguments[:classes] = class_names("blankslate-image", system_arguments[:classes])
+
+          Yattho::Alpha::Image.new(**system_arguments)
+        }
+      }
+
+      # Required heading.
+      #
+      # @param tag [String]  <%= one_of(Yattho::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])
+
+        Yattho::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
+
+        Yattho::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
+
+        Yattho::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
+
+        Yattho::Beta::Link.new(**system_arguments)
+      }
+
+      # @example Basic
+      #   <%= render Yattho::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://yattho.com/octicons/) documentation to choose an icon.
+      #   @code
+      #     <%= render Yattho::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://yattho.com/view-components/components/spinner) to the blankslate in place of an icon.
+      #   @code
+      #     <%= render Yattho::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 Yattho::Beta::Blankslate.new do |component| %>
+      #       <% component.with_visual_image(src: Yattho::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 Yattho::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 Yattho::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 Yattho::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 Yattho::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 Yattho::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 Yattho::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/yattho/beta/border_box/header.html.erb

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

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

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Yattho
+  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 < Yattho::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(Yattho::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]
+          )
+
+          Yattho::BaseComponent.new(**system_arguments)
+        }
+
+        # @example Default
+        #
+        #   <%= render(Yattho::Beta::BorderBox::Header.new) do %>
+        #     Header
+        #   <% end %>
+        #
+        # @example with title
+        #   <%= render(Yattho::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/yattho/beta/border_box.css

@@ -0,0 +1,279 @@
+/* BorderBox */
+
+/* TODO: Rename to BorderBox to match YVC */
+
+.Box {
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--yattho-borderWidth-thin, 1px);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+}
+
+/* Box padding density options */
+
+.Box--condensed {
+  line-height: 1.25;
+}
+
+.Box--condensed .Box-header {
+    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
+  }
+
+.Box--condensed .Box-body {
+    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
+  }
+
+.Box--condensed .Box-footer {
+    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
+  }
+
+.Box--condensed .Box-btn-octicon.btn-octicon {
+      padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+      margin: calc(var(--yattho-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);
+      line-height: 1.25;
+    }
+
+.Box--condensed .Box-row {
+    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
+  }
+
+.Box--spacious .Box-header {
+    padding: var(--yattho-stack-padding-spacious, 24px);
+    line-height: 1.25;
+  }
+
+.Box--spacious .Box-title {
+    font-size: var(--yattho-text-title-size-medium, 20px);
+  }
+
+.Box--spacious .Box-body {
+    padding: var(--yattho-stack-padding-spacious, 24px);
+  }
+
+.Box--spacious .Box-footer {
+    padding: var(--yattho-stack-padding-spacious, 24px);
+  }
+
+.Box--spacious .Box-btn-octicon.btn-octicon {
+      padding: var(--yattho-stack-padding-spacious, 24px);
+      margin: calc(var(--yattho-stack-gap-spacious, 24px) * -1) calc(var(--yattho-stack-gap-spacious, 24px) * -1);
+    }
+
+.Box--spacious .Box-row {
+    padding: var(--yattho-stack-padding-spacious, 24px);
+  }
+
+.Box-header {
+  padding: var(--yattho-stack-padding-normal, 16px);
+  margin: calc(var(--yattho-borderWidth-thin, 1px) * -1) calc(var(--yattho-borderWidth-thin, 1px) * -1) 0;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--yattho-borderWidth-thin, 1px);
+  border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
+  border-top-right-radius: var(--yattho-borderRadius-medium, 6px);
+}
+
+.Box-title {
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.Box-body {
+  padding: var(--yattho-stack-padding-normal, 16px);
+  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);
+
+  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
+}
+
+.Box-body:last-of-type {
+    margin-bottom: calc(var(--yattho-borderWidth-thin, 1px) * -1);
+    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);
+  }
+
+/* Box rows */
+
+.Box-row {
+  padding: var(--yattho-stack-padding-normal, 16px);
+  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1);
+  list-style-type: none; /* To account for applying Box component to a list */
+  border-top-color: var(--color-border-muted);
+  border-top-style: solid;
+  border-top-width: var(--yattho-borderWidth-thin, 1px);
+}
+
+.Box-row:first-of-type {
+    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
+    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);
+  }
+
+.Box-row:last-of-type {
+    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);
+  }
+
+/* Adds a blue vertical line to the left of the row
+  ** For indicating a row item is unread */
+
+.Box-row.Box-row--unread,
+  
+  .Box-row.unread {
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
+  }
+
+/* Focus styles for when drag icon */
+
+.Box-row.navigation-focus .Box-row--drag-button {
+      color: var(--color-accent-fg);
+      cursor: grab;
+      opacity: 100;
+    }
+
+/* Grabbing while row is dragged */
+
+.Box-row.navigation-focus.is-dragging .Box-row--drag-button {
+      cursor: grabbing;
+    }
+
+/* Row dragging styles */
+
+.Box-row.navigation-focus.sortable-chosen {
+      background-color: var(--color-canvas-subtle);
+    }
+
+/* Makes dragging row background gray */
+
+.Box-row.navigation-focus.sortable-ghost {
+      background-color: var(--color-canvas-subtle);
+
+      /* Hides contents of row while dragging so row looks solid gray */
+    }
+
+.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide {
+        opacity: 0;
+      }
+
+.Box-row--focus-gray.navigation-focus {
+    background-color: var(--color-canvas-subtle);
+  }
+
+.Box-row--focus-blue.navigation-focus {
+    background-color: var(--color-accent-subtle);
+  }
+
+.Box-row--hover-gray:hover {
+    background-color: var(--color-canvas-subtle);
+  }
+
+.Box-row--hover-blue:hover {
+    background-color: var(--color-accent-subtle);
+  }
+
+/* Optional link style
+** Makes links on mobile blue since they don't have hover state,
+** and links are dark-gray with blue hover on desktop. */
+
+@media (min-width: 768px) {
+
+.Box-row-link {
+    color: var(--color-fg-default);
+    text-decoration: none;
+}
+
+    .Box-row-link:hover {
+      color: var(--color-accent-fg);
+      text-decoration: none;
+    }
+  }
+
+/* Optional drag icon styles for reordering items
+** Focus styles included in .Box-row above */
+
+.Box-row--drag-button {
+  opacity: 0;
+}
+
+.Box-footer {
+  padding: var(--yattho-stack-padding-normal, 16px);
+  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
+  border-top-color: var(--color-border-default);
+  border-top-style: solid;
+  border-top-width: var(--yattho-borderWidth-thin, 1px);
+  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);
+}
+
+/* Option for a box with scrolling content */
+
+.Box--scrollable {
+  max-height: 324px;
+  overflow: scroll;
+}
+
+/* Box themes */
+
+.Box--blue {
+  border-color: var(--color-accent-muted);
+}
+
+.Box--blue .Box-header {
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
+  }
+
+.Box--blue .Box-body {
+    border-color: var(--color-accent-muted);
+  }
+
+.Box--blue .Box-row {
+    border-color: var(--color-accent-muted);
+  }
+
+.Box--blue .Box-footer {
+    border-color: var(--color-accent-muted);
+  }
+
+/* Applies and red border to the outside of the box,
+** but not to the border separating rows. */
+
+.Box--danger {
+  border-color: var(--color-danger-emphasis);
+}
+
+.Box--danger .Box-row:first-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+
+.Box--danger .Box-body:last-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+
+.Box-header--blue {
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent-muted);
+}
+
+/* Box row highlight themes */
+
+.Box-row--yellow {
+  background-color: var(--color-attention-subtle);
+}
+
+.Box-row--blue {
+  background-color: var(--color-accent-subtle);
+}
+
+.Box-row--gray {
+  background-color: var(--color-canvas-subtle);
+}
+
+/* Box with btn-octicon */
+
+/* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
+
+.Box-btn-octicon.btn-octicon {
+    padding: var(--yattho-control-medium-paddingInline-spacious, 16px) var(--yattho-control-medium-paddingInline-spacious, 16px);
+    margin: calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);
+    line-height: 1.5; /* override btn-octicon line-height */
+  }

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

@@ -0,0 +1 @@
+{"name":"beta/border_box","selectors":[".Box",".Box--condensed",".Box--condensed .Box-header",".Box--condensed .Box-body",".Box--condensed .Box-footer",".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-footer",".Box--spacious .Box-btn-octicon.btn-octicon",".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","\n  \n  .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-row",".Box--blue .Box-footer",".Box--danger",".Box--danger .Box-row:first-of-type",".Box--danger .Box-body:last-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"]}

data/app/components/yattho/beta/border_box.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAAA,cAAc;;AAEd,2CAA2C;;AAC3C;EACE,6CAA6C;EAC7C,yCAAyC;EACzC,mBAAmB;EACnB,iDAAiD;EACjD,qDAAqD;AACvD;;AAEA,gCAAgC;;AAChC;EACE,iBAAiB;AAyBnB;;AAvBE;IACE,4FAA4F;EAC9F;;AAEA;IACE,4FAA4F;EAC9F;;AAEA;IACE,4FAA4F;EAC9F;;AAGE;MACE,4HAA4H;MAC5H,sIAAsI;MACtI,iBAAiB;IACnB;;AAGF;IACE,4FAA4F;EAC9F;;AAIA;IACE,mDAAmD;IACnD,iBAAiB;EACnB;;AAEA;IACE,qDAAqD;EACvD;;AAEA;IACE,mDAAmD;EACrD;;AAEA;IACE,mDAAmD;EACrD;;AAGE;MACE,mDAAmD;MACnD,2GAA2G;IAC7G;;AAGF;IACE,mDAAmD;EACrD;;AAGF;EACE,iDAAiD;EACjD,uGAAuG;EACvG,4CAA4C;EAC5C,yCAAyC;EACzC,mBAAmB;EACnB,iDAAiD;EACjD,8DAA8D;EAC9D,+DAA+D;AACjE;;AAEA;EACE,oDAAoD;EACpD,kDAAkD;AACpD;;AAEA;EACE,iDAAiD;EACjD,oFAAoF;;EAEpF,kFAAkF;AAMpF;;AALE;IACE,6DAA6D;IAC7D,kEAAkE;IAClE,iEAAiE;EACnE;;AAGF,aAAa;;AACb;EACE,iDAAiD;EACjD,0DAA0D;EAC1D,qBAAqB,EAAE,oDAAoD;EAC3E,2CAA2C;EAC3C,uBAAuB;EACvB,qDAAqD;AAgDvD;;AA9CE;IACE,8DAA8D;IAC9D,+DAA+D;EACjE;;AAEA;IACE,kEAAkE;IAClE,iEAAiE;EACnE;;AAEA;0CACwC;;AACxC;;;IAGE,sDAAsD;EACxD;;AAGE,oCAAoC;;AACpC;MACE,6BAA6B;MAC7B,YAAY;MACZ,YAAY;IACd;;AAEA,kCAAkC;;AAClC;MACE,gBAAgB;IAClB;;AAEA,wBAAwB;;AACxB;MACE,4CAA4C;IAC9C;;AAEA,uCAAuC;;AACvC;MACE,4CAA4C;;MAE5C,iEAAiE;IAInE;;AAHE;QACE,UAAU;MACZ;;AAMJ;IACE,4CAA4C;EAC9C;;AAIA;IACE,4CAA4C;EAC9C;;AAIA;IACE,4CAA4C;EAC9C;;AAIA;IACE,4CAA4C;EAC9C;;AAGF;;wDAEwD;;AAEtD;;AADF;IAEI,8BAA8B;IAC9B,qBAAqB;AAOzB;;IALI;MACE,6BAA6B;MAC7B,qBAAqB;IACvB;EACF;;AAGF;4CAC4C;;AAC5C;EACE,UAAU;AACZ;;AAEA;EACE,iDAAiD;EACjD,0DAA0D,EAAE,oDAAoD;EAChH,6CAA6C;EAC7C,uBAAuB;EACvB,qDAAqD;EACrD,gGAAgG;AAClG;;AAEA,4CAA4C;;AAC5C;EACE,iBAAiB;EACjB,gBAAgB;AAClB;;AAEA,eAAe;;AAEf;EACE,uCAAuC;AAkBzC;;AAhBE;IACE,4CAA4C;IAC5C,uCAAuC;EACzC;;AAEA;IACE,uCAAuC;EACzC;;AAEA;IACE,uCAAuC;EACzC;;AAEA;IACE,uCAAuC;EACzC;;AAGF;2CAC2C;;AAC3C;EACE,0CAA0C;AAa5C;;AAVI;MACE,0CAA0C;IAC5C;;AAIA;MACE,0CAA0C;IAC5C;;AAIJ;EACE,4CAA4C;EAC5C,uCAAuC;AACzC;;AAEA,6BAA6B;;AAE7B;EACE,+CAA+C;AACjD;;AAEA;EACE,4CAA4C;AAC9C;;AAEA;EACE,4CAA4C;AAC9C;;AAEA,yBAAyB;;AAEvB,0FAA0F;;AAC1F;IACE,4HAA4H;IAC5H,qIAAqI;IACrI,gBAAgB,EAAE,qCAAqC;EACzD","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match YVC */\n.Box {\n  background-color: var(--color-canvas-default);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--yattho-borderWidth-thin, 1px);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n\n  & .Box-body {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n\n  & .Box-footer {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n      margin: calc(var(--yattho-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--yattho-text-title-size-medium, 20px);\n  }\n\n  & .Box-body {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n  }\n\n  & .Box-footer {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--yattho-stack-padding-spacious, 24px);\n      margin: calc(var(--yattho-stack-gap-spacious, 24px) * -1) calc(var(--yattho-stack-gap-spacious, 24px) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--yattho-stack-padding-spacious, 24px);\n  }\n}\n\n.Box-header {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  margin: calc(var(--yattho-borderWidth-thin, 1px) * -1) calc(var(--yattho-borderWidth-thin, 1px) * -1) 0;\n  background-color: var(--color-canvas-subtle);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--yattho-borderWidth-thin, 1px);\n  border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n  border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n}\n\n.Box-title {\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-semibold, 600);\n}\n\n.Box-body {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--yattho-borderWidth-thin, 1px) * -1);\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--color-border-muted);\n  border-top-style: solid;\n  border-top-width: var(--yattho-borderWidth-thin, 1px);\n\n  &:first-of-type {\n    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);\n    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--color-accent-fg);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--color-canvas-subtle);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--color-canvas-subtle);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--color-fg-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--color-accent-fg);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--yattho-stack-padding-normal, 16px);\n  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--color-border-default);\n  border-top-style: solid;\n  border-top-width: var(--yattho-borderWidth-thin, 1px);\n  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--color-accent-muted);\n\n  & .Box-header {\n    background-color: var(--color-accent-subtle);\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--color-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--color-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--color-accent-subtle);\n  border-color: var(--color-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--color-attention-subtle);\n}\n\n.Box-row--blue {\n  background-color: var(--color-accent-subtle);\n}\n\n.Box-row--gray {\n  background-color: var(--color-canvas-subtle);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--yattho-control-medium-paddingInline-spacious, 16px) var(--yattho-control-medium-paddingInline-spacious, 16px);\n    margin: calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);\n    line-height: 1.5; /* override btn-octicon line-height */\n  }\n}"]}

data/app/components/yattho/beta/border_box.html.erb

@@ -0,0 +1,12 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <%= header %>
+  <%= body %>
+  <% if rows.any? %>
+    <ul>
+      <% rows.each do |row| %>
+        <%= row %>
+      <% end %>
+    </ul>
+  <% end %>
+  <%= footer %>
+<% end %>