yattho_view_components 0.0.1

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

@@ -0,0 +1,344 @@
+/* CSS for Button  */
+
+/* temporary, pre primitives release */
+:root {
+  --yattho-duration-fast: 80ms;
+  --yattho-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+/* base button */
+.Button {
+  position: relative;
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-medium, 500);
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: var(--yattho-borderWidth-thin, 1px) solid;
+  border-color: transparent;
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  color: var(--color-btn-text);
+  transition: var(--yattho-duration-fast) var(--yattho-easing-easeInOut);
+  transition-property: color, fill, background-color, border-color;
+  text-align: center;
+  height: var(--yattho-control-medium-size, 32px);
+  padding: 0 var(--yattho-control-medium-paddingInline-normal, 12px);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--yattho-control-medium-gap, 8px);
+  min-width: max-content;
+
+  /* mobile friendly sizing */
+  @media (pointer: coarse) {
+    &::before {
+      @mixin minTouchTarget 48px, 48px;
+    }
+  }
+
+  /* base states */
+
+  &:hover {
+    transition-duration: var(--yattho-duration-fast);
+  }
+
+  &:active {
+    transition: none;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+}
+
+.Button-withTooltip {
+  position: relative;
+  display: inline-block;
+}
+
+a.Button,
+summary.Button {
+  display: inline-flex;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+/* wrap grid content to allow trailingAction to lock-right */
+.Button-content {
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: 'leadingVisual text trailingVisual';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+  align-items: center;
+  place-content: center;
+
+  /* padding-bottom: 1px; optical alignment for firefox */
+
+  & > :not(:last-child) {
+    margin-right: var(--yattho-control-medium-gap, 8px);
+  }
+}
+
+/* center child elements for fullWidth */
+.Button-content--alignStart {
+  justify-content: start;
+}
+
+/* button child elements */
+
+/* align svg */
+.Button-visual {
+  display: flex;
+  pointer-events: none; /* allow click handler to work, avoiding visuals */
+
+  & .Counter {
+    color: inherit;
+    background-color: var(--color-btn-counter-bg);
+  }
+}
+
+.Button-label {
+  grid-area: text;
+  white-space: nowrap;
+  line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
+
+.Button-trailingAction {
+  margin-right: calc(var(--base-size-4, 4px) * -1);
+}
+
+/* sizes */
+
+.Button--small {
+  font-size: var(--yattho-text-body-size-small, 12px);
+  height: var(--yattho-control-small-size, 28px);
+  padding: 0 var(--yattho-control-small-paddingInline-condensed, 8px);
+  gap: var(--yattho-control-small-gap, 4px);
+
+  & .Button-label {
+    line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));
+  }
+
+  & .Button-content {
+    & > :not(:last-child) {
+      margin-right: var(--yattho-control-small-gap, 4px);
+    }
+  }
+}
+
+.Button--large {
+  height: var(--yattho-control-large-size, 40px);
+  padding: 0 var(--yattho-control-large-paddingInline-spacious, 16px);
+  gap: var(--yattho-control-large-gap, 8px);
+
+  & .Button-label {
+    line-height: var(--yattho-text-body-lineHeight-large, calc(48 / 32));
+  }
+
+  & .Button-content {
+    & > :not(:last-child) {
+      margin-right: var(--yattho-control-large-gap, 8px);
+    }
+  }
+}
+
+.Button--fullWidth {
+  width: 100%;
+}
+
+/* variants */
+
+/* primary */
+.Button--primary {
+  color: var(--color-btn-primary-text);
+  fill: var(--color-btn-primary-icon);
+  background-color: var(--color-btn-primary-bg);
+  border-color: var(--color-btn-primary-border);
+  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+
+  &:hover:not(:disabled) {
+    background-color: var(--color-btn-primary-hover-bg);
+    border-color: var(--color-btn-primary-hover-border);
+  }
+
+  /* fallback :focus state */
+  &:focus {
+    @mixin focusOutlineOnEmphasis;
+
+    /* remove fallback :focus if :focus-visible is supported */
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* default focus state */
+  &:focus-visible {
+    @mixin focusOutlineOnEmphasis;
+  }
+
+  &:active:not(:disabled),
+  &[aria-pressed='true'] {
+    background-color: var(--color-btn-primary-selected-bg);
+    box-shadow: var(--color-btn-primary-selected-shadow);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-primary-disabled-text);
+    background-color: var(--color-btn-primary-disabled-bg);
+    border-color: var(--color-btn-primary-disabled-border);
+    fill: var(--color-btn-primary-disabled-text);
+  }
+}
+
+/* default (secondary) */
+.Button--secondary {
+  color: var(--color-btn-text);
+  fill: var(--color-fg-muted); /* help this */
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+
+  &:hover:not(:disabled) {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--color-btn-active-bg);
+    border-color: var(--color-btn-active-border);
+  }
+
+  &[aria-pressed='true'] {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-yattho-shadow-inset);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-yattho-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-yattho-fg-disabled);
+  }
+}
+
+.Button--invisible {
+  color: var(--color-btn-text);
+
+  &:hover:not(:disabled) {
+    background-color: var(--color-action-list-item-default-hover-bg);
+  }
+
+  &[aria-pressed='true'],
+  &:active:not(:disabled) {
+    background-color: var(--color-action-list-item-default-active-bg);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-yattho-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-yattho-fg-disabled);
+  }
+
+  /* if button has no visuals, use link blue for text */
+  &.Button--invisible-noVisuals .Button-label {
+    color: var(--color-accent-fg);
+  }
+
+  & .Button-visual {
+    color: var(--color-fg-muted);
+  }
+}
+
+.Button--link {
+  color: var(--color-accent-fg);
+  fill: var(--color-accent-fg);
+  display: inline-block;
+  font-size: inherit;
+  border: none;
+  height: unset;
+  padding: 0;
+
+  &:hover:not(:disabled) {
+    text-decoration: underline;
+  }
+
+  &:focus-visible, &:focus {
+    outline-offset: 2px;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-yattho-fg-disabled);
+    background-color: transparent;
+    border-color: transparent;
+    fill: var(--color-yattho-fg-disabled);
+  }
+}
+
+/* danger */
+.Button--danger {
+  color: var(--color-btn-danger-text);
+  fill: var(--color-btn-danger-icon);
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+
+  &:hover:not(:disabled) {
+    color: var(--color-btn-danger-hover-text);
+    fill: var(--color-btn-danger-hover-text);
+    background-color: var(--color-btn-danger-hover-bg);
+    border-color: var(--color-btn-danger-hover-border);
+    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+  }
+
+  &:active:not(:disabled),
+  &[aria-pressed='true'] {
+    color: var(--color-btn-danger-selected-text);
+    fill: var(--color-btn-danger-selected-text);
+    background-color: var(--color-btn-danger-selected-bg);
+    border-color: var(--color-btn-danger-selected-border);
+    box-shadow: var(--color-btn-danger-selected-shadow);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-danger-disabled-text);
+    fill: var(--color-btn-danger-disabled-text);
+    background-color: var(--color-btn-danger-disabled-bg);
+    border-color: var(--color-btn-border);
+  }
+}
+
+
+.Button--iconOnly {
+  display: grid;
+  place-content: center;
+  padding: unset;
+  width: var(--yattho-control-medium-size, 32px);
+
+  &.Button--small {
+    width: var(--yattho-control-small-size, 28px);
+  }
+
+  &.Button--large {
+    width: var(--yattho-control-large-size, 40px);
+  }
+}

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

@@ -0,0 +1,198 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+    class Button < Yattho::Component
+      status :beta
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :primary => "Button--primary",
+        :secondary => "Button--secondary",
+        :default => "Button--secondary",
+        :danger => "Button--danger",
+        :invisible => "Button--invisible",
+        :link => "Button--link"
+      }.freeze
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => "Button--small",
+        :medium => "Button--medium",
+        :large => "Button--large",
+        DEFAULT_SIZE => "Button--medium"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_ALIGN_CONTENT = :center
+      ALIGN_CONTENT_MAPPINGS = {
+        :start => "Button-content--alignStart",
+        :center => "",
+        DEFAULT_ALIGN_CONTENT => ""
+      }.freeze
+      ALIGN_CONTENT_OPTIONS = ALIGN_CONTENT_MAPPINGS.keys
+
+      # Leading visuals appear to the left of the button text.
+      #
+      # Use:
+      #
+      # - `leading_visual_icon` for a <%= link_to_component(Yattho::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Yattho::Beta::Octicon) %>.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments|
+          Yattho::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
+      # Trailing visuals appear to the right of the button text.
+      #
+      # Use:
+      #
+      # - `trailing_visual_counter` for a <%= link_to_component(Yattho::Beta::Counter) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Yattho::Beta::Counter) %>.
+      renders_one :trailing_visual, types: {
+        icon: Yattho::Beta::Octicon,
+        label: Yattho::Beta::Label,
+        counter: Yattho::Beta::Counter
+      }
+
+      # Trailing action appears to the right of the trailing visual.
+      #
+      # Use:
+      #
+      # - `trailing_action_icon` for a <%= link_to_component(Yattho::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Yattho::Beta::Octicon) %>.
+      renders_one :trailing_action, types: {
+        icon: Yattho::Beta::Octicon
+      }
+
+      # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
+      # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
+      # Consult the <%= link_to_component(Yattho::Alpha::Tooltip) %> documentation for more information.
+      #
+      # @param type [Symbol] (:description) <%= one_of(Yattho::Alpha::Tooltip::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Yattho::Alpha::Tooltip) %>.
+      renders_one :tooltip, lambda { |**system_arguments|
+        raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
+
+        system_arguments[:for_id] = @id
+        system_arguments[:type] ||= :description
+
+        Yattho::Alpha::Tooltip.new(**system_arguments)
+      }
+
+      # @example Schemes
+      #   <%= render(Yattho::Beta::Button.new) { "Default" } %>
+      #   <%= render(Yattho::Beta::Button.new(scheme: :primary)) { "Primary" } %>
+      #   <%= render(Yattho::Beta::Button.new(scheme: :danger)) { "Danger" } %>
+      #   <%= render(Yattho::Beta::Button.new(scheme: :invisible)) { "Invisible" } %>
+      #
+      # @example Sizes
+      #   <%= render(Yattho::Beta::Button.new(size: :small)) { "Small" } %>
+      #   <%= render(Yattho::Beta::Button.new(size: :medium)) { "Medium" } %>
+      #
+      # @example Full width
+      #   <%= render(Yattho::Beta::Button.new(block: :true)) { "Full width" } %>
+      #   <%= render(Yattho::Beta::Button.new(block: :true, scheme: :primary)) { "Primary full width" } %>
+      #
+      # @example With leading visual
+      #   <%= render(Yattho::Beta::Button.new) do |component| %>
+      #     <% component.with_leading_visual_icon(icon: :star) %>
+      #     Button
+      #   <% end %>
+      #
+      # @example With trailing visual
+      #   <%= render(Yattho::Beta::Button.new) do |component| %>
+      #     <% component.with_trailing_visual_counter(count: 15) %>
+      #     Button
+      #   <% end %>
+      #
+      # @example With leading and trailing visuals
+      #   <%= render(Yattho::Beta::Button.new) do |component| %>
+      #     <% component.with_leading_visual_icon(icon: :star) %>
+      #     <% component.with_trailing_visual_counter(count: 15) %>
+      #     Button
+      #   <% end %>
+      #
+      # @example With tooltip
+      #   @description
+      #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Yattho::Alpha::Tooltip) %> documentation for more information.
+      #   @code
+      #     <%= render(Yattho::Beta::Button.new(id: "button-with-tooltip")) do |component| %>
+      #       <% component.with_tooltip(text: "Tooltip text") %>
+      #       Button
+      #     <% end %>
+      #
+      # @param scheme [Symbol] <%= one_of(Yattho::Beta::Button::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Yattho::Beta::Button::SIZE_OPTIONS) %>
+      # @param block [Boolean] Whether button is full-width with `display: block`.
+      # @param align_content [Symbol] <%= one_of(Yattho::Beta::Button::ALIGN_CONTENT_OPTIONS) %>
+      # @param tag [Symbol] (Yattho::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Yattho::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] (Yattho::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Yattho::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        scheme: DEFAULT_SCHEME,
+        size: DEFAULT_SIZE,
+        block: false,
+        align_content: DEFAULT_ALIGN_CONTENT,
+        **system_arguments
+      )
+        @scheme = scheme
+
+        @system_arguments = system_arguments
+
+        @id = @system_arguments[:id]
+
+        if !Rails.env.production? && @system_arguments[:variant].present?
+          raise ArgumentError,
+                "The `variant:` argument is no longer supported on Yattho::Beta::Button. Consider `scheme:` or `size:`."
+        end
+        if !Rails.env.production? && @system_arguments[:dropdown].present?
+          raise ArgumentError,
+                "The `dropdown:` argument is no longer supported on Yattho::Beta::Button. Use the `trailing_action` slot instead."
+        end
+
+        @align_content_classes = class_names(
+          "Button-content",
+          ALIGN_CONTENT_MAPPINGS[fetch_or_fallback(ALIGN_CONTENT_OPTIONS, align_content, DEFAULT_ALIGN_CONTENT)]
+        )
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
+          "Button",
+          "Button--fullWidth" => block
+        )
+      end
+
+      private
+
+      def before_render
+        return unless @scheme == :invisible && !trailing_visual && !leading_visual && !trailing_action
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Button--invisible-noVisuals"
+        )
+      end
+
+      def trimmed_content
+        return if content.blank?
+
+        trimmed_content = content.strip
+
+        return trimmed_content unless content.html_safe?
+
+        # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+        trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <% buttons.each do |button| %>
+    <%= button %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `ButtonGroup` to render a series of buttons.
+    class ButtonGroup < Yattho::Component
+      status :beta
+
+      # Required list of buttons to be rendered.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Yattho::ButtonComponent) %> except for `size` and `group_item`.
+      renders_many :buttons, lambda { |**kwargs|
+        kwargs[:group_item] = true
+        kwargs[:size] = @size
+
+        # rubocop:disable Yattho/ComponentNameMigration
+        Yattho::ButtonComponent.new(**kwargs)
+        # rubocop:enable Yattho/ComponentNameMigration
+      }
+
+      # @example Default
+      #
+      #   <%= render(Yattho::Beta::ButtonGroup.new) do |component| %>
+      #     <% component.with_button { "Default" } %>
+      #     <% component.with_button(scheme: :primary) { "Primary" } %>
+      #     <% component.with_button(scheme: :danger) { "Danger" } %>
+      #     <% component.with_button(scheme: :outline) { "Outline" } %>
+      #     <% component.with_button(classes: "custom-class") { "Custom class" } %>
+      #   <% end %>
+      #
+      # @example Sizes
+      #
+      #   <%= render(Yattho::Beta::ButtonGroup.new(size: :small)) do |component| %>
+      #     <% component.with_button { "Default" } %>
+      #     <% component.with_button(scheme: :primary) { "Primary" } %>
+      #     <% component.with_button(scheme: :danger) { "Danger" } %>
+      #     <% component.with_button(scheme: :outline) { "Outline" } %>
+      #   <% end %>
+      #
+      # @param variant [Symbol] DEPRECATED. <%= one_of(Yattho::ButtonComponent::SIZE_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Yattho::ButtonComponent::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(variant: nil, size: Yattho::ButtonComponent::DEFAULT_SIZE, **system_arguments)
+        @size = variant || size
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+
+        @system_arguments[:classes] = class_names(
+          "BtnGroup",
+          system_arguments[:classes]
+        )
+      end
+
+      def render?
+        buttons.any?
+      end
+    end
+  end
+end

data/app/components/yattho/beta/clipboard_copy.d.ts

@@ -0,0 +1 @@
+import '@github/clipboard-copy-element';

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

@@ -0,0 +1,8 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <% if content.present? %>
+    <%= content %>
+  <% else %>
+    <%= render Yattho::Beta::Octicon.new(:copy) %>
+    <%= render Yattho::Beta::Octicon.new(:check, color: :success, style: "display: none;") %>
+  <% end %>
+<% end %>

data/app/components/yattho/beta/clipboard_copy.js

@@ -0,0 +1,43 @@
+import '@github/clipboard-copy-element';
+const CLIPBOARD_COPY_TIMER_DURATION = 2000;
+function showSVG(svg) {
+    svg.style.display = 'inline-block';
+}
+function hideSVG(svg) {
+    svg.style.display = 'none';
+}
+// Toggle a copy button.
+function showCopy(button) {
+    const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
+    if (!copyIcon || !checkIcon)
+        return;
+    showSVG(copyIcon);
+    hideSVG(checkIcon);
+}
+// Toggle a copy button.
+function showCheck(button) {
+    const [copyIcon, checkIcon] = button.querySelectorAll('.octicon');
+    if (!copyIcon || !checkIcon)
+        return;
+    hideSVG(copyIcon);
+    showSVG(checkIcon);
+}
+const clipboardCopyElementTimers = new WeakMap();
+document.addEventListener('clipboard-copy', ({ target }) => {
+    if (!(target instanceof HTMLElement))
+        return;
+    if (!target.hasAttribute('data-view-component'))
+        return;
+    const currentTimeout = clipboardCopyElementTimers.get(target);
+    if (currentTimeout) {
+        clearTimeout(currentTimeout);
+        clipboardCopyElementTimers.delete(target);
+    }
+    else {
+        showCheck(target);
+    }
+    clipboardCopyElementTimers.set(target, setTimeout(() => {
+        showCopy(target);
+        clipboardCopyElementTimers.delete(target);
+    }, CLIPBOARD_COPY_TIMER_DURATION));
+});