yattho_view_components 0.0.1

data/app/components/yattho/beta/border_box.pcss

@@ -0,0 +1,284 @@
+/* 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-header {
+    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
+  }
+
+  & .Box-body {
+    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
+  }
+
+  & .Box-footer {
+    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
+  }
+
+  & .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-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-title {
+    font-size: var(--yattho-text-title-size-medium, 20px);
+  }
+
+  & .Box-body {
+    padding: var(--yattho-stack-padding-spacious, 24px);
+  }
+
+  & .Box-footer {
+    padding: var(--yattho-stack-padding-spacious, 24px);
+  }
+
+  & .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-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 */
+  &: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);
+
+  &:first-of-type {
+    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
+    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);
+  }
+
+  &: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--unread,
+  /* .unread to be deprecated with .Box-row-unread */
+  &.unread {
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
+  }
+
+  &.navigation-focus {
+    /* Focus styles for when drag icon */
+    & .Box-row--drag-button {
+      color: var(--color-accent-fg);
+      cursor: grab;
+      opacity: 100;
+    }
+
+    /* Grabbing while row is dragged */
+    &.is-dragging .Box-row--drag-button {
+      cursor: grabbing;
+    }
+
+    /* Row dragging styles */
+    &.sortable-chosen {
+      background-color: var(--color-canvas-subtle);
+    }
+
+    /* Makes dragging row background gray */
+    &.sortable-ghost {
+      background-color: var(--color-canvas-subtle);
+
+      /* Hides contents of row while dragging so row looks solid gray */
+      & .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. */
+.Box-row-link {
+  @media (min-width: 768px) {
+    color: var(--color-fg-default);
+    text-decoration: none;
+
+    &: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-header {
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-body {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-row {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .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-row {
+    &:first-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+
+  & .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 */
+.Box-btn-octicon {
+  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
+  &.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.rb

@@ -0,0 +1,147 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # `BorderBox` is a Box component with a border.
+    class BorderBox < Yattho::Component
+      status :beta
+
+      DEFAULT_PADDING = :default
+      PADDING_MAPPINGS = {
+        DEFAULT_PADDING => "",
+        :condensed => "Box--condensed",
+        :spacious => "Box--spacious"
+      }.freeze
+      PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
+
+      DEFAULT_ROW_SCHEME = :default
+      ROW_SCHEME_MAPPINGS = {
+        DEFAULT_ROW_SCHEME => "",
+        :neutral => "Box-row--gray",
+        :info => "Box-row--blue",
+        :warning => "Box-row--yellow"
+      }.freeze
+
+      # Optional Header.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @accessibility
+      # When using header.title, the recommended tag is a heading tag, such as h1, h2, h3, etc.
+      renders_one :header, "Yattho::Beta::BorderBox::Header"
+
+      # Optional Body.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :body, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-body",
+          system_arguments[:classes]
+        )
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      # Optional Footer.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :footer, lambda { |**system_arguments|
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(
+          "Box-footer",
+          system_arguments[:classes]
+        )
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      # Use Rows to add rows with borders and maintain the same padding.
+      #
+      # @param scheme [Symbol] Color scheme. <%= one_of(Yattho::Beta::BorderBox::ROW_SCHEME_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
+        system_arguments[:tag] = :li
+        system_arguments[:classes] = class_names(
+          "Box-row",
+          ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
+          system_arguments[:classes]
+        )
+
+        Yattho::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Header with title, body, rows, and footer
+      #   <%= render(Yattho::Beta::BorderBox.new) do |component| %>
+      #     <% component.with_header do |h| %>
+      #       <% h.title(tag: :h2) do %>
+      #         Header
+      #       <% end %>
+      #     <% end %>
+      #     <% component.with_body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.with_row do %>
+      #       <% if true %>
+      #         Row one
+      #       <% end %>
+      #     <% end %>
+      #     <% component.with_row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.with_footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Padding density
+      #   <%= render(Yattho::Beta::BorderBox.new(padding: :condensed)) do |component| %>
+      #     <% component.with_header do %>
+      #       Header
+      #     <% end %>
+      #     <% component.with_body do %>
+      #       Body
+      #     <% end %>
+      #     <% component.with_row do %>
+      #       Row two
+      #     <% end %>
+      #     <% component.with_footer do %>
+      #       Footer
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Row colors
+      #   <%= render(Yattho::Beta::BorderBox.new) do |component| %>
+      #     <% component.with_row do %>
+      #       Default
+      #     <% end %>
+      #     <% component.with_row(scheme: :neutral) do %>
+      #       Neutral
+      #     <% end %>
+      #     <% component.with_row(scheme: :info) do %>
+      #       Info
+      #     <% end %>
+      #     <% component.with_row(scheme: :warning) do %>
+      #       Warning
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param padding [Symbol] <%= one_of(Yattho::Beta::BorderBox::PADDING_MAPPINGS.keys) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(padding: DEFAULT_PADDING, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          "Box",
+          PADDING_MAPPINGS[fetch_or_fallback(PADDING_MAPPINGS.keys, padding, DEFAULT_PADDING)],
+          system_arguments[:classes]
+        )
+
+        @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
+      end
+
+      def render?
+        rows.any? || header.present? || body.present? || footer.present?
+      end
+    end
+  end
+end

data/app/components/yattho/beta/breadcrumbs.css

@@ -0,0 +1,27 @@
+.breadcrumb-item {
+  display: inline-block;
+  margin-left: -0.35em;
+  white-space: nowrap;
+  list-style: none;
+}
+
+.breadcrumb-item::after {
+    display: inline-block;
+    height: 0.8em;
+    margin: 0 0.5em;
+    content: '';
+    border-right: 0.1em solid var(--color-fg-muted);
+    transform: rotate(15deg);
+  }
+
+.breadcrumb-item:first-child {
+    margin-left: 0;
+  }
+
+.breadcrumb-item-selected::after, .breadcrumb-item[aria-current]:not([aria-current='false'])::after {
+    content: none;
+  }
+
+.breadcrumb-item-selected a {
+  color: var(--color-fg-default);
+}

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

@@ -0,0 +1 @@
+{"name":"beta/breadcrumbs","selectors":[".breadcrumb-item",".breadcrumb-item::after",".breadcrumb-item:first-child",".breadcrumb-item-selected::after"," .breadcrumb-item[aria-current]:not([aria-current='false'])::after",".breadcrumb-item-selected a"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA;EACE,qBAAqB;EACrB,oBAAoB;EACpB,mBAAmB;EACnB,gBAAgB;AAclB;;AAZE;IACE,qBAAqB;IACrB,aAAa;IACb,eAAe;IACf,WAAW;IACX,+CAA+C;IAC/C,wBAAwB;EAC1B;;AAEA;IACE,cAAc;EAChB;;AAKA;IACE,aAAa;EACf;;AAGF;EACE,8BAA8B;AAChC","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  white-space: nowrap;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--color-fg-muted);\n    transform: rotate(15deg);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--color-fg-default);\n}"]}

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

@@ -0,0 +1,8 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <ol>
+    <% items.each_with_index do |item, index| %>
+      <% item.selected = index == items.length - 1 %>
+      <%= item %>
+    <% end %>
+  </ol>
+<% end %>

data/app/components/yattho/beta/breadcrumbs.pcss

@@ -0,0 +1,30 @@
+.breadcrumb-item {
+  display: inline-block;
+  margin-left: -0.35em;
+  white-space: nowrap;
+  list-style: none;
+
+  &::after {
+    display: inline-block;
+    height: 0.8em;
+    margin: 0 0.5em;
+    content: '';
+    border-right: 0.1em solid var(--color-fg-muted);
+    transform: rotate(15deg);
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.breadcrumb-item-selected,
+.breadcrumb-item[aria-current]:not([aria-current='false']) {
+  &::after {
+    content: none;
+  }
+}
+
+.breadcrumb-item-selected a {
+  color: var(--color-fg-default);
+}

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

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `Breadcrumbs` to display page hierarchy.
+    #
+    # #### Known issues
+    #
+    # ##### Responsiveness
+    #
+    # `Breadcrumbs` is not optimized for responsive designs.
+    #
+    # @accessibility
+    #   `Breadcrumbs` renders a list of links within a `nav` element and has an implicit landmark role of `navigation`.
+    #   By default, the component labels the `nav` element with "Breadcrumbs" which helps distinguish the type of navigation.
+    #   Additionally, the component will always render the last link, which should represent the current page, with an `aria-current="page"` attribute.
+    #
+    #   For more information on the breadcrumbs pattern implemented by this component, see [WAI-ARIA 1.1 Breadcrumb](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).
+    class Breadcrumbs < Yattho::Component
+      status :beta
+
+      PADDING_MESSAGE = "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead."
+      FONT_SIZE_MESSAGE = "Breadcrumbs do not support the font_size system argument."
+      ARIA_LABEL = { label: "Breadcrumb" }.freeze
+      ARGS_DENYLIST = {
+        [:p, :pt, :pb, :pr, :pl, :px, :py] => PADDING_MESSAGE,
+        [:font_size] => FONT_SIZE_MESSAGE
+      }.freeze
+
+      # @param href [String] The URL to link to.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, "Item"
+
+      # @example Basic
+      #   <%= render(Yattho::Beta::Breadcrumbs.new) do |component| %>
+      #     <% component.with_item(href: "/") do %>Home<% end %>
+      #     <% component.with_item(href: "/about") do %>About<% end %>
+      #     <% component.with_item(href: "/about/team") do %>Team<% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :nav
+        @system_arguments[:aria] = ARIA_LABEL
+        @system_arguments[:system_arguments_denylist] = ARGS_DENYLIST
+      end
+
+      def render?
+        items.any?
+      end
+
+      # This component is part of `Yattho::Beta::Breadcrumbs` and should not be
+      # used as a standalone component.
+      class Item < Yattho::Component
+        attr_accessor :selected, :href
+
+        def initialize(href:, **system_arguments)
+          @href = href
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @selected = false
+
+          @system_arguments[:tag] = :li
+          @system_arguments[:classes] = "breadcrumb-item #{@system_arguments[:classes]}"
+        end
+
+        def call
+          link_arguments = { href: @href }
+
+          if selected
+            link_arguments[:'aria-current'] = "page"
+            @system_arguments[:classes] = "#{@system_arguments[:classes]} breadcrumb-item-selected"
+          end
+
+          render(Yattho::BaseComponent.new(**@system_arguments)) do
+            render(Yattho::Beta::Link.new(**link_arguments)) { content }
+          end
+        end
+      end
+    end
+  end
+end