yattho_view_components 0.0.1

data/app/components/yattho/alpha/toggle_switch.pcss

@@ -0,0 +1,250 @@
+/* ToggleSwitch */
+
+/* Catalyst in dotcom applies a display: block to all web component elements. This
+** rule overrides it so the status label and toggle switch are laid out correctly. */
+.ToggleSwitch.ToggleSwitch {
+  display: inline-flex;
+}
+
+.ToggleSwitch {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--yattho-controlStack-medium-gap-condensed, 8px);
+
+  &:hover {
+    & .ToggleSwitch-knob {
+      background-color: var(--color-btn-hover-bg);
+    }
+  }
+
+  &:active {
+    & .ToggleSwitch-knob {
+      background-color: var(--color-btn-active-bg);
+    }
+  }
+}
+
+.ToggleSwitch--checked {
+  & .ToggleSwitch-statusOn {
+    height: auto;
+    visibility: visible;
+  }
+
+  & .ToggleSwitch-statusOff {
+    height: 0;
+    visibility: hidden;
+  }
+}
+
+.ToggleSwitch-track {
+  position: relative;
+  display: block;
+  width: var(--base-size-64, 64px);
+  height: var(--yattho-control-medium-size, 32px);
+  padding: 0;
+  overflow: hidden;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  background-color: var(--color-switch-track-bg);
+  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-switch-track-border);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
+  transition-duration: 80ms;
+  transition-property: background-color, border-color;
+  appearance: none;
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+
+  @media (pointer: coarse) {
+    &::before {
+      @mixin minTouchTarget 44px;
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+
+    & * {
+      transition: none;
+    }
+  }
+}
+
+.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-subtle);
+
+  &:hover,
+  &:active {
+    background-color: var(--color-canvas-subtle);
+
+    /* This is the most straightforward way of setting the knob's styles when the
+    ** switch is both checked and disabled. */
+
+    & .ToggleSwitch-knob {
+      background-color: var(--color-switch-knob-checked-disabled-bg);
+    }
+  }
+
+  & .ToggleSwitch-knob {
+    background-color: var(--color-switch-knob-checked-disabled-bg);
+  }
+}
+
+.ToggleSwitch-track[aria-checked='true'] {
+  background-color: var(--color-switch-track-checked-bg);
+  border-color: var(--color-switch-track-checked-border);
+
+  &:hover {
+    background-color: var(--color-switch-track-checked-hover-bg);
+  }
+
+  &:active {
+    background-color: var(--color-switch-track-checked-active-bg);
+  }
+
+  & .ToggleSwitch-knob {
+    background-color: var(--color-switch-knob-checked-bg);
+    border: 0;
+    transform: translateX(calc(100% + 1px));
+  }
+
+  & .ToggleSwitch-lineIcon {
+    transform: translateX(0%);
+  }
+
+  & .ToggleSwitch-circleIcon {
+    transform: translateX(100%);
+  }
+}
+
+.ToggleSwitch-track[aria-disabled='true'] {
+  cursor: not-allowed;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-subtle);
+  transition-property: none;
+
+  &:hover,
+  &:active {
+    & .ToggleSwitch-knob {
+      background-color: var(--color-btn-bg);
+    }
+  }
+
+  & .ToggleSwitch-knob {
+    border-color: var(--color-border-default);
+    box-shadow: none;
+
+    &:hover,
+    &:active {
+      background-color: var(--color-btn-bg);
+    }
+  }
+
+  & .ToggleSwitch-lineIcon {
+    color: var(--color-fg-subtle);
+  }
+
+  & .ToggleSwitch-circleIcon {
+    color: var(--color-fg-subtle);
+  }
+}
+
+.ToggleSwitch-icons {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.ToggleSwitch-lineIcon {
+  line-height: 0;
+  color: var(--color-accent-fg);
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(-100%);
+  flex: 1 0 50%;
+}
+
+.ToggleSwitch-circleIcon {
+  line-height: 0;
+  color: var(--color-fg-default);
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(0);
+  flex: 1 0 50%;
+}
+
+.ToggleSwitch-knob {
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  z-index: 1;
+  width: 50%;
+  background-color: var(--color-btn-bg);
+  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-switch-track-border);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
+  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
+  transition-duration: 80ms;
+  transition-property: transform;
+  transform: translateX(-1px);
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+}
+
+.ToggleSwitch-status {
+  position: relative;
+  font-size: var(--yattho-text-body-size-medium, 14px);
+  line-height: 1.5;
+  color: var(--color-fg-default);
+  text-align: right;
+}
+
+.ToggleSwitch-statusIcon {
+  width: var(--base-size-16, 16px);
+  display: flex;
+  margin-top: 0.063rem;
+}
+
+.ToggleSwitch--small {
+  & .ToggleSwitch-status {
+    font-size: var(--yattho-text-body-size-small, 12px);
+  }
+
+  & .ToggleSwitch-track {
+    width: var(--base-size-48, 48px);
+    height: var(--yattho-control-xsmall-size, 24px);
+  }
+}
+
+.ToggleSwitch--disabled {
+  & .ToggleSwitch-status {
+    color: var(--color-fg-muted);
+  }
+}
+
+.ToggleSwitch-statusOn {
+  height: 0;
+  visibility: hidden;
+}
+
+.ToggleSwitch-statusOff {
+  height: auto;
+  visibility: visible;
+}
+
+.ToggleSwitch--statusAtEnd {
+  flex-direction: row-reverse;
+
+  & .ToggleSwitch-status {
+    text-align: left;
+  }
+}

data/app/components/yattho/alpha/toggle_switch.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # The ToggleSwitch component is a button that toggles between two boolean states. It is meant to be used for
+    # settings that should cause an immediate update. If configured with a "src" attribute, the component will
+    # make a POST request containing data of the form "value: 0 | 1".
+    class ToggleSwitch < Yattho::Component
+      SIZE_DEFAULT = :medium
+      SIZE_MAPPINGS = {
+        SIZE_DEFAULT => nil,
+        :small => "ToggleSwitch--small"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys.freeze
+
+      STATUS_LABEL_POSITION_DEFAULT = :start
+      STATUS_LABEL_POSITION_MAPPINGS = {
+        STATUS_LABEL_POSITION_DEFAULT => nil,
+        :end => "ToggleSwitch--statusAtEnd"
+      }.freeze
+      STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
+
+      # @example Default
+      #   <%= render(Yattho::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch")) %>
+      #
+      # @example Checked
+      #   <%= render(Yattho::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", checked: true)) %>
+      #
+      # @example Disabled
+      #   <%= render(Yattho::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", enabled: false)) %>
+      #
+      # @example Checked and Disabled
+      #   <%= render(Yattho::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", checked: true, enabled: false)) %>
+      #
+      # @example Small
+      #   <%= render(Yattho::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", size: :small)) %>
+      #
+      # @example With status label positioned at the end
+      #   <%= render(Yattho::Alpha::ToggleSwitch.new(src: "/view-components/rails-app/toggle_switch", status_label_position: :end)) %>
+      #
+      # @param src [String] The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests.
+      # @param csrf_token [String] A CSRF token that will be sent to the server as "authenticity_token" when the toggle switch is toggled. Unused if `src` is `nil`.
+      # @param checked [Boolean] Whether the toggle switch is on or off.
+      # @param enabled [Boolean] Whether or not the toggle switch responds to user input.
+      # @param size [Symbol] What size toggle switch to render. <%= one_of(Yattho::Alpha::ToggleSwitch::STATUS_LABEL_POSITION_OPTIONS) %>
+      # @param status_label_position [Symbol] Which side of the toggle switch to render the status label. <%= one_of(Yattho::Alpha::ToggleSwitch::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src: nil, csrf_token: nil, checked: false, enabled: true, size: SIZE_DEFAULT,
+                     status_label_position: STATUS_LABEL_POSITION_DEFAULT, **system_arguments)
+        @src = src
+        @csrf_token = csrf_token
+        @checked = checked
+        @enabled = enabled
+        @system_arguments = system_arguments
+
+        @size = fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)
+        @status_label_position = fetch_or_fallback(
+          STATUS_LABEL_POSITION_OPTIONS, status_label_position, STATUS_LABEL_POSITION_DEFAULT
+        )
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "ToggleSwitch",
+          on? ? "ToggleSwitch--checked" : nil,
+          enabled? ? nil : "ToggleSwitch--disabled",
+          STATUS_LABEL_POSITION_MAPPINGS[@status_label_position],
+          SIZE_MAPPINGS[@size]
+        )
+
+        @system_arguments[:src] = @src if @src
+
+        return unless @src && @csrf_token
+
+        @system_arguments[:csrf] = @csrf_token
+      end
+
+      def on?
+        @checked
+      end
+
+      def enabled?
+        @enabled
+      end
+
+      def disabled?
+        !enabled?
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/toggle_switch.ts

@@ -0,0 +1,173 @@
+import {controller, target} from '@github/catalyst'
+import {debounce} from '@github/mini-throttle/decorators'
+
+@controller
+class ToggleSwitchElement extends HTMLElement {
+  @target switch: HTMLElement
+  @target loadingSpinner: HTMLElement
+  @target errorIcon: HTMLElement
+
+  get src(): string | null {
+    const src = this.getAttribute('src')
+    if (!src) return null
+
+    const link = this.ownerDocument.createElement('a')
+    link.href = src
+    return link.href
+  }
+
+  get csrf(): string | null {
+    const csrfElement = this.querySelector('[data-csrf]')
+    return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null
+  }
+
+  get csrfField(): string {
+    // the authenticity token is passed into the element and is not generated in js land
+
+    return this.getAttribute('csrf-field') || 'authenticity_token'
+  }
+
+  isRemote(): boolean {
+    return this.src != null
+  }
+
+  toggle() {
+    if (this.isDisabled()) {
+      return
+    }
+
+    if (this.isRemote()) {
+      this.setLoadingState()
+      this.submitForm()
+    } else {
+      this.performToggle()
+    }
+  }
+
+  turnOn(): void {
+    if (this.isDisabled()) {
+      return
+    }
+
+    this.switch.setAttribute('aria-checked', 'true')
+    this.classList.add('ToggleSwitch--checked')
+  }
+
+  turnOff(): void {
+    if (this.isDisabled()) {
+      return
+    }
+
+    this.switch.setAttribute('aria-checked', 'false')
+    this.classList.remove('ToggleSwitch--checked')
+  }
+
+  isOn(): boolean {
+    return this.switch.getAttribute('aria-checked') === 'true'
+  }
+
+  isOff(): boolean {
+    return !this.isOn()
+  }
+
+  isDisabled(): boolean {
+    return this.switch.getAttribute('aria-disabled') === 'true'
+  }
+
+  disable(): void {
+    this.switch.setAttribute('aria-disabled', 'true')
+  }
+
+  enable(): void {
+    this.switch.setAttribute('aria-disabled', 'false')
+  }
+
+  private performToggle(): void {
+    if (this.isOn()) {
+      this.turnOff()
+    } else {
+      this.turnOn()
+    }
+  }
+
+  private setLoadingState(): void {
+    this.disable()
+    this.errorIcon.setAttribute('hidden', 'hidden')
+    this.loadingSpinner.removeAttribute('hidden')
+  }
+
+  private setSuccessState(): void {
+    const event = new CustomEvent('toggleSwitchSuccess', {bubbles: true})
+    this.dispatchEvent(event)
+
+    this.setFinishedState(false)
+  }
+
+  private setErrorState(message: string): void {
+    const event = new CustomEvent('toggleSwitchError', {bubbles: true, detail: message})
+    this.dispatchEvent(event)
+
+    this.setFinishedState(true)
+  }
+
+  private setFinishedState(error: boolean): void {
+    if (error) {
+      this.errorIcon.removeAttribute('hidden')
+    }
+
+    this.loadingSpinner.setAttribute('hidden', 'hidden')
+    this.enable()
+  }
+
+  @debounce(300)
+  private async submitForm() {
+    const body = new FormData()
+
+    if (this.csrf) {
+      body.append(this.csrfField, this.csrf)
+    }
+
+    body.append('value', this.isOn() ? '0' : '1')
+
+    try {
+      if (!this.src) throw new Error('invalid src')
+
+      let response
+
+      try {
+        response = await fetch(this.src, {
+          credentials: 'same-origin',
+          method: 'POST',
+          headers: {
+            'Requested-With': 'XMLHttpRequest'
+          },
+          body
+        })
+      } catch (error) {
+        throw new Error('A network error occurred, please try again.')
+      }
+
+      if (response.ok) {
+        this.setSuccessState()
+        this.performToggle()
+      } else {
+        throw new Error(await response.text())
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        this.setErrorState(error.message || 'An error occurred, please try again.')
+      }
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ToggleSwitchElement: typeof ToggleSwitchElement
+  }
+}
+
+if (!window.customElements.get('toggle-switch')) {
+  window.ToggleSwitchElement = ToggleSwitchElement
+  window.customElements.define('toggle-switch', ToggleSwitchElement)
+}

data/app/components/yattho/alpha/tool_tip.d.ts

@@ -0,0 +1,25 @@
+type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw';
+declare class ToolTipElement extends HTMLElement {
+    #private;
+    styles(): string;
+    get htmlFor(): string;
+    set htmlFor(value: string);
+    get type(): 'description' | 'label';
+    set type(value: 'description' | 'label');
+    get direction(): Direction;
+    set direction(value: Direction);
+    get control(): HTMLElement | null;
+    set hiddenFromView(value: true | false);
+    get hiddenFromView(): true | false;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string): void;
+}
+declare global {
+    interface Window {
+        ToolTipElement: typeof ToolTipElement;
+    }
+}
+export {};