yattho_view_components 0.0.1

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

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    TextField = Yattho::FormComponents.from_input(Yattho::Forms::Dsl::TextFieldInput)
+
+    # A text field suitable for use outside a form. For a text field input suitable for use
+    # within an HTML form, see the `Yattho::Forms` namespace.
+    class TextField < Yattho::Component
+      status :alpha
+
+      # @!method initialize
+      #
+      # @example Default
+      #   <%= render(Yattho::Alpha::TextField.new(name: :first_name, label: "First name")) %>
+      #
+      # @example With a clear button
+      #   <%= render(
+      #     Yattho::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       show_clear_button: true
+      #     )
+      #   ) %>
+      #
+      # @example Full width
+      #   <%= render(
+      #     Yattho::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       full_width: true
+      #     )
+      #   ) %>
+      #
+      # @example Disabled
+      #   <%= render(
+      #     Yattho::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       disabled: true
+      #     )
+      #   ) %>
+      #
+      # @example Invalid
+      #   <%= render(
+      #     Yattho::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       invalid: true
+      #     )
+      #   ) %>
+      #
+      # @example With a leading visual
+      #   <%= render(
+      #     Yattho::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       leading_visual: {
+      #         icon: :person
+      #       }
+      #     )
+      #   ) %>
+      #
+      # @example With a caption
+      #   <%= render(
+      #     Yattho::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       caption: "What your friends call you"
+      #     )
+      #   ) %>
+      #
+      # @example With a validation message
+      #   <%= render(
+      #     Yattho::Alpha::TextField.new(
+      #       name: :first_name,
+      #       label: "First name",
+      #       validation_message: "Hmm, that doesn't look right"
+      #     )
+      #   ) %>
+      #
+      # @param name [String] Value for the HTML name attribute.
+      # @param id [String] Value for the HTML id attribute.
+      # @param class [String] A list of CSS classes to add to the input. Exists for compatibility with Rails form builders.
+      # @param classes [String] A list of CSS classes to add to the input. Combined with the `:class` argument.
+      # @param caption [String] Caption text to render below the input.
+      # @param label [String] Label text displayed above the input.
+      # @param visually_hide_label [Boolean] Whether or not to visually hide the label. If `true` the label will be hidden visually but still available to screen readers.
+      # @param size [Symbol] The size of the field. <%= one_of(Yattho::Forms::Dsl::Input::SIZE_OPTIONS) %>
+      # @param show_clear_button [Boolean] Whether or not to include a clear button inside the input that clears the input's contents when clicked.
+      # @param clear_button_id [String] The HTML id attribute of the clear button.
+      # @param full_width [Boolean] Controls whether or not the input takes the full width of its container.
+      # @param disabled [Boolean] Whether or not the input should accept keyboard and mouse input.
+      # @param invalid [Boolean] If `true`, renders the input in a visually invalid state.
+      # @param placeholder [String] Placeholder text.
+      # @param inset [Boolean] If `true`, renders the input in a visually inset state.
+      # @param monospace [Boolean] If `true`, uses a monospace font for the input field.
+      # @param leading_visual [Hash] Renders a leading visual icon before the text field's cursor. The hash will be passed to Yattho's [Octicon component](https://yattho.com/view-components/components/octicon).
+      # @param validation_message [String] A validation message to display beneath the input. Implicitly sets `invalid` to `true`.
+      # @param label_arguments [Hash] System arugments passed to the Rails builder's `#label` method. These arguments will appear as HTML attributes on the `<label>` tag.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      # @param block [Proc] Unused.
+    end
+  end
+end

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

@@ -0,0 +1,253 @@
+/* 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);
+}
+
+.ToggleSwitch:hover .ToggleSwitch-knob {
+      background-color: var(--color-btn-hover-bg);
+    }
+
+.ToggleSwitch:active .ToggleSwitch-knob {
+      background-color: var(--color-btn-active-bg);
+    }
+
+.ToggleSwitch--checked .ToggleSwitch-statusOn {
+    height: auto;
+    visibility: visible;
+  }
+
+.ToggleSwitch--checked .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;
+  -webkit-user-select: none;
+          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;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.ToggleSwitch-track:focus,
+  .ToggleSwitch-track:focus-visible {
+    outline-offset: 0;
+  }
+
+@media (pointer: coarse) {
+      .ToggleSwitch-track::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    min-height: 44px;
+    content: "";
+    transform: translateX(-50%) translateY(-50%);
+  }
+  }
+
+@media (prefers-reduced-motion) {
+
+.ToggleSwitch-track {
+    transition: none;
+}
+
+    .ToggleSwitch-track * {
+      transition: none;
+    }
+  }
+
+.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-subtle);
+}
+
+.ToggleSwitch-track[aria-checked='true'][aria-disabled='true']:hover,
+  .ToggleSwitch-track[aria-checked='true'][aria-disabled='true']: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-track[aria-checked='true'][aria-disabled='true']:hover .ToggleSwitch-knob, .ToggleSwitch-track[aria-checked='true'][aria-disabled='true']:active .ToggleSwitch-knob {
+      background-color: var(--color-switch-knob-checked-disabled-bg);
+    }
+
+.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] .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);
+}
+
+.ToggleSwitch-track[aria-checked='true']:hover {
+    background-color: var(--color-switch-track-checked-hover-bg);
+  }
+
+.ToggleSwitch-track[aria-checked='true']:active {
+    background-color: var(--color-switch-track-checked-active-bg);
+  }
+
+.ToggleSwitch-track[aria-checked='true'] .ToggleSwitch-knob {
+    background-color: var(--color-switch-knob-checked-bg);
+    border: 0;
+    transform: translateX(calc(100% + 1px));
+  }
+
+.ToggleSwitch-track[aria-checked='true'] .ToggleSwitch-lineIcon {
+    transform: translateX(0%);
+  }
+
+.ToggleSwitch-track[aria-checked='true'] .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;
+}
+
+.ToggleSwitch-track[aria-disabled='true']:hover .ToggleSwitch-knob, .ToggleSwitch-track[aria-disabled='true']:active .ToggleSwitch-knob {
+      background-color: var(--color-btn-bg);
+    }
+
+.ToggleSwitch-track[aria-disabled='true'] .ToggleSwitch-knob {
+    border-color: var(--color-border-default);
+    box-shadow: none;
+  }
+
+.ToggleSwitch-track[aria-disabled='true'] .ToggleSwitch-knob:hover,
+    .ToggleSwitch-track[aria-disabled='true'] .ToggleSwitch-knob:active {
+      background-color: var(--color-btn-bg);
+    }
+
+.ToggleSwitch-track[aria-disabled='true'] .ToggleSwitch-lineIcon {
+    color: var(--color-fg-subtle);
+  }
+
+.ToggleSwitch-track[aria-disabled='true'] .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) {
+
+.ToggleSwitch-knob {
+    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--small .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--statusAtEnd .ToggleSwitch-status {
+    text-align: left;
+  }

data/app/components/yattho/alpha/toggle_switch.css.json

@@ -0,0 +1 @@
+{"name":"alpha/toggle_switch","selectors":[".ToggleSwitch.ToggleSwitch",".ToggleSwitch",".ToggleSwitch:hover .ToggleSwitch-knob",".ToggleSwitch:active .ToggleSwitch-knob",".ToggleSwitch--checked .ToggleSwitch-statusOn",".ToggleSwitch--checked .ToggleSwitch-statusOff",".ToggleSwitch-track",".ToggleSwitch-track:focus","\n  .ToggleSwitch-track:focus-visible",".ToggleSwitch-track::before",".ToggleSwitch-track *",".ToggleSwitch-track[aria-checked='true'][aria-disabled='true']",".ToggleSwitch-track[aria-checked='true'][aria-disabled='true']:hover","\n  .ToggleSwitch-track[aria-checked='true'][aria-disabled='true']:active",".ToggleSwitch-track[aria-checked='true'][aria-disabled='true']:hover .ToggleSwitch-knob"," .ToggleSwitch-track[aria-checked='true'][aria-disabled='true']:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked='true']",".ToggleSwitch-track[aria-checked='true']:hover",".ToggleSwitch-track[aria-checked='true']:active",".ToggleSwitch-track[aria-checked='true'] .ToggleSwitch-knob",".ToggleSwitch-track[aria-checked='true'] .ToggleSwitch-lineIcon",".ToggleSwitch-track[aria-checked='true'] .ToggleSwitch-circleIcon",".ToggleSwitch-track[aria-disabled='true']",".ToggleSwitch-track[aria-disabled='true']:hover .ToggleSwitch-knob"," .ToggleSwitch-track[aria-disabled='true']:active .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled='true'] .ToggleSwitch-knob",".ToggleSwitch-track[aria-disabled='true'] .ToggleSwitch-knob:hover","\n    .ToggleSwitch-track[aria-disabled='true'] .ToggleSwitch-knob:active",".ToggleSwitch-track[aria-disabled='true'] .ToggleSwitch-lineIcon",".ToggleSwitch-track[aria-disabled='true'] .ToggleSwitch-circleIcon",".ToggleSwitch-icons",".ToggleSwitch-lineIcon",".ToggleSwitch-circleIcon",".ToggleSwitch-knob",".ToggleSwitch-status",".ToggleSwitch-statusIcon",".ToggleSwitch--small .ToggleSwitch-status",".ToggleSwitch--small .ToggleSwitch-track",".ToggleSwitch--disabled .ToggleSwitch-status",".ToggleSwitch-statusOn",".ToggleSwitch-statusOff",".ToggleSwitch--statusAtEnd",".ToggleSwitch--statusAtEnd .ToggleSwitch-status"]}

data/app/components/yattho/alpha/toggle_switch.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;oFACoF;;AACpF;EACE,oBAAoB;AACtB;;AAEA;EACE,mBAAmB;EACnB,oBAAoB;EACpB,yDAAyD;AAa3D;;AAVI;MACE,2CAA2C;IAC7C;;AAIA;MACE,4CAA4C;IAC9C;;AAKF;IACE,YAAY;IACZ,mBAAmB;EACrB;;AAEA;IACE,SAAS;IACT,kBAAkB;EACpB;;AAGF;EACE,kBAAkB;EAClB,cAAc;EACd,gCAAgC;EAChC,+CAA+C;EAC/C,UAAU;EACV,gBAAgB;EAChB,qBAAqB;EACrB,eAAe;EACf,yBAAiB;UAAjB,iBAAiB;EACjB,8CAA8C;EAC9C,kFAAkF;EAClF,qDAAqD;EACrD,yDAAyD;EACzD,yBAAyB;EACzB,mDAAmD;EACnD,wBAAgB;UAAhB,gBAAgB;AAoBlB;;AAlBE;;IAEE,iBAAiB;EACnB;;AAEA;MAEI;IC/DN,mBAAA;IAAA,SAAA;IAAA,UAAA;IAAA,YAAA;IAAA,aAAA;IAAA,iBAAA;IAAA,YAAA;IAAA;ED+DgC;EAE9B;;AAEA;;AA7BF;IA8BI,gBAAgB;AAMpB;;IAJI;MACE,gBAAgB;IAClB;EACF;;AAGF;EACE,4CAA4C;EAC5C,wCAAwC;AAiB1C;;AAfE;;IAEE,4CAA4C;;IAE5C;6CACyC;EAK3C;;AAHE;MACE,8DAA8D;IAChE;;AAGF;IACE,8DAA8D;EAChE;;AAGF;EACE,sDAAsD;EACtD,sDAAsD;AAuBxD;;AArBE;IACE,4DAA4D;EAC9D;;AAEA;IACE,6DAA6D;EAC/D;;AAEA;IACE,qDAAqD;IACrD,SAAS;IACT,uCAAuC;EACzC;;AAEA;IACE,yBAAyB;EAC3B;;AAEA;IACE,2BAA2B;EAC7B;;AAGF;EACE,mBAAmB;EACnB,4CAA4C;EAC5C,wCAAwC;EACxC,yBAAyB;AA0B3B;;AAtBI;MACE,qCAAqC;IACvC;;AAGF;IACE,yCAAyC;IACzC,gBAAgB;EAMlB;;AAJE;;MAEE,qCAAqC;IACvC;;AAGF;IACE,6BAA6B;EAC/B;;AAEA;IACE,6BAA6B;EAC/B;;AAGF;EACE,aAAa;EACb,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,gBAAgB;AAClB;;AAEA;EACE,cAAc;EACd,6BAA6B;EAC7B,yBAAyB;EACzB,8BAA8B;EAC9B,4BAA4B;EAC5B,aAAa;AACf;;AAEA;EACE,cAAc;EACd,8BAA8B;EAC9B,yBAAyB;EACzB,8BAA8B;EAC9B,wBAAwB;EACxB,aAAa;AACf;;AAEA;EACE,kBAAkB;EAClB,SAAS;EACT,YAAY;EACZ,UAAU;EACV,UAAU;EACV,qCAAqC;EACrC,kFAAkF;EAClF,qDAAqD;EACrD,qEAAqE;EACrE,yDAAyD;EACzD,yBAAyB;EACzB,8BAA8B;EAC9B,2BAA2B;AAK7B;;AAHE;;AAfF;IAgBI,gBAAgB;AAEpB;EADE;;AAGF;EACE,kBAAkB;EAClB,oDAAoD;EACpD,gBAAgB;EAChB,8BAA8B;EAC9B,iBAAiB;AACnB;;AAEA;EACE,gCAAgC;EAChC,aAAa;EACb,oBAAoB;AACtB;;AAGE;IACE,mDAAmD;EACrD;;AAEA;IACE,gCAAgC;IAChC,+CAA+C;EACjD;;AAIA;IACE,4BAA4B;EAC9B;;AAGF;EACE,SAAS;EACT,kBAAkB;AACpB;;AAEA;EACE,YAAY;EACZ,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;AAK7B;;AAHE;IACE,gBAAgB;EAClB","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n  display: inline-flex;\n}\n\n.ToggleSwitch {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--yattho-controlStack-medium-gap-condensed, 8px);\n\n  &:hover {\n    & .ToggleSwitch-knob {\n      background-color: var(--color-btn-hover-bg);\n    }\n  }\n\n  &:active {\n    & .ToggleSwitch-knob {\n      background-color: var(--color-btn-active-bg);\n    }\n  }\n}\n\n.ToggleSwitch--checked {\n  & .ToggleSwitch-statusOn {\n    height: auto;\n    visibility: visible;\n  }\n\n  & .ToggleSwitch-statusOff {\n    height: 0;\n    visibility: hidden;\n  }\n}\n\n.ToggleSwitch-track {\n  position: relative;\n  display: block;\n  width: var(--base-size-64, 64px);\n  height: var(--yattho-control-medium-size, 32px);\n  padding: 0;\n  overflow: hidden;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  background-color: var(--color-switch-track-bg);\n  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-switch-track-border);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: background-color, border-color;\n  appearance: none;\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 44px;\n    }\n  }\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n\n    & * {\n      transition: none;\n    }\n  }\n}\n\n.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {\n  background-color: var(--color-canvas-subtle);\n  border-color: var(--color-border-subtle);\n\n  &:hover,\n  &:active {\n    background-color: var(--color-canvas-subtle);\n\n    /* This is the most straightforward way of setting the knob's styles when the\n    ** switch is both checked and disabled. */\n\n    & .ToggleSwitch-knob {\n      background-color: var(--color-switch-knob-checked-disabled-bg);\n    }\n  }\n\n  & .ToggleSwitch-knob {\n    background-color: var(--color-switch-knob-checked-disabled-bg);\n  }\n}\n\n.ToggleSwitch-track[aria-checked='true'] {\n  background-color: var(--color-switch-track-checked-bg);\n  border-color: var(--color-switch-track-checked-border);\n\n  &:hover {\n    background-color: var(--color-switch-track-checked-hover-bg);\n  }\n\n  &:active {\n    background-color: var(--color-switch-track-checked-active-bg);\n  }\n\n  & .ToggleSwitch-knob {\n    background-color: var(--color-switch-knob-checked-bg);\n    border: 0;\n    transform: translateX(calc(100% + 1px));\n  }\n\n  & .ToggleSwitch-lineIcon {\n    transform: translateX(0%);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    transform: translateX(100%);\n  }\n}\n\n.ToggleSwitch-track[aria-disabled='true'] {\n  cursor: not-allowed;\n  background-color: var(--color-canvas-subtle);\n  border-color: var(--color-border-subtle);\n  transition-property: none;\n\n  &:hover,\n  &:active {\n    & .ToggleSwitch-knob {\n      background-color: var(--color-btn-bg);\n    }\n  }\n\n  & .ToggleSwitch-knob {\n    border-color: var(--color-border-default);\n    box-shadow: none;\n\n    &:hover,\n    &:active {\n      background-color: var(--color-btn-bg);\n    }\n  }\n\n  & .ToggleSwitch-lineIcon {\n    color: var(--color-fg-subtle);\n  }\n\n  & .ToggleSwitch-circleIcon {\n    color: var(--color-fg-subtle);\n  }\n}\n\n.ToggleSwitch-icons {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n  line-height: 0;\n  color: var(--color-accent-fg);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(-100%);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n  line-height: 0;\n  color: var(--color-fg-default);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(0);\n  flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  z-index: 1;\n  width: 50%;\n  background-color: var(--color-btn-bg);\n  border: var(--yattho-borderWidth-thin, 1px) solid var(--color-switch-track-border);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);\n  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n  transition-duration: 80ms;\n  transition-property: transform;\n  transform: translateX(-1px);\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.ToggleSwitch-status {\n  position: relative;\n  font-size: var(--yattho-text-body-size-medium, 14px);\n  line-height: 1.5;\n  color: var(--color-fg-default);\n  text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n  width: var(--base-size-16, 16px);\n  display: flex;\n  margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n  & .ToggleSwitch-status {\n    font-size: var(--yattho-text-body-size-small, 12px);\n  }\n\n  & .ToggleSwitch-track {\n    width: var(--base-size-48, 48px);\n    height: var(--yattho-control-xsmall-size, 24px);\n  }\n}\n\n.ToggleSwitch--disabled {\n  & .ToggleSwitch-status {\n    color: var(--color-fg-muted);\n  }\n}\n\n.ToggleSwitch-statusOn {\n  height: 0;\n  visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n  height: auto;\n  visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n  flex-direction: row-reverse;\n\n  & .ToggleSwitch-status {\n    text-align: left;\n  }\n}",null]}

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

@@ -0,0 +1,29 @@
+declare class ToggleSwitchElement extends HTMLElement {
+    switch: HTMLElement;
+    loadingSpinner: HTMLElement;
+    errorIcon: HTMLElement;
+    get src(): string | null;
+    get csrf(): string | null;
+    get csrfField(): string;
+    isRemote(): boolean;
+    toggle(): void;
+    turnOn(): void;
+    turnOff(): void;
+    isOn(): boolean;
+    isOff(): boolean;
+    isDisabled(): boolean;
+    disable(): void;
+    enable(): void;
+    private performToggle;
+    private setLoadingState;
+    private setSuccessState;
+    private setErrorState;
+    private setFinishedState;
+    private submitForm;
+}
+declare global {
+    interface Window {
+        ToggleSwitchElement: typeof ToggleSwitchElement;
+    }
+}
+export {};

data/app/components/yattho/alpha/toggle_switch.html.erb

@@ -0,0 +1,43 @@
+<%= render(Yattho::BaseComponent.new(tag: "toggle-switch", **@system_arguments)) do %>
+  <span class="ToggleSwitch-statusIcon">
+    <%= render(Yattho::Beta::Octicon.new(size: :small, color: :danger, icon: :alert, hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
+    <%= render(Yattho::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
+  </span>
+  <%= render(Yattho::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %>
+    <%= render(Yattho::Box.new(classes: "ToggleSwitch-statusOn").with_content("On")) %>
+    <%= render(Yattho::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>
+  <% end %>
+  <%= render(Yattho::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", role: "switch", data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, aria: { checked: on?, disabled: disabled?, label: "Switch" })) do %>
+    <%= render(Yattho::Box.new(classes: "ToggleSwitch-icons", aria: { hidden: true })) do %>
+      <%= render(Yattho::Box.new(classes: "ToggleSwitch-lineIcon")) do %>
+        <%= render(Yattho::BaseComponent.new(
+          tag: :svg,
+          width: @size == :small ? 12 : 16,
+          height: @size == :small ? 12 : 16,
+          viewBox: "0 0 16 16",
+          fill: "currentColor",
+          xmlns: "http://www.w3.org/2000/svg",
+          aria: { hidden: true },
+          focusable: false
+        )) do %>
+          <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
+        <% end %>
+      <% end %>
+      <%= render(Yattho::Box.new(classes: "ToggleSwitch-circleIcon")) do %>
+        <%= render(Yattho::BaseComponent.new(
+          tag: :svg,
+          width: @size == :small ? 12 : 16,
+          height: @size == :small ? 12 : 16,
+          viewBox: "0 0 16 16",
+          fill: "currentColor",
+          xmlns: "http://www.w3.org/2000/svg",
+          aria: { hidden: true },
+          focusable: false
+        )) do %>
+          <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= render(Yattho::Box.new(classes: "ToggleSwitch-knob")) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,156 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller, target } from '@github/catalyst';
+import { debounce } from '@github/mini-throttle/decorators';
+let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
+    get src() {
+        const src = this.getAttribute('src');
+        if (!src)
+            return null;
+        const link = this.ownerDocument.createElement('a');
+        link.href = src;
+        return link.href;
+    }
+    get csrf() {
+        const csrfElement = this.querySelector('[data-csrf]');
+        return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
+    }
+    get csrfField() {
+        // the authenticity token is passed into the element and is not generated in js land
+        return this.getAttribute('csrf-field') || 'authenticity_token';
+    }
+    isRemote() {
+        return this.src != null;
+    }
+    toggle() {
+        if (this.isDisabled()) {
+            return;
+        }
+        if (this.isRemote()) {
+            this.setLoadingState();
+            this.submitForm();
+        }
+        else {
+            this.performToggle();
+        }
+    }
+    turnOn() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-checked', 'true');
+        this.classList.add('ToggleSwitch--checked');
+    }
+    turnOff() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-checked', 'false');
+        this.classList.remove('ToggleSwitch--checked');
+    }
+    isOn() {
+        return this.switch.getAttribute('aria-checked') === 'true';
+    }
+    isOff() {
+        return !this.isOn();
+    }
+    isDisabled() {
+        return this.switch.getAttribute('aria-disabled') === 'true';
+    }
+    disable() {
+        this.switch.setAttribute('aria-disabled', 'true');
+    }
+    enable() {
+        this.switch.setAttribute('aria-disabled', 'false');
+    }
+    performToggle() {
+        if (this.isOn()) {
+            this.turnOff();
+        }
+        else {
+            this.turnOn();
+        }
+    }
+    setLoadingState() {
+        this.disable();
+        this.errorIcon.setAttribute('hidden', 'hidden');
+        this.loadingSpinner.removeAttribute('hidden');
+    }
+    setSuccessState() {
+        const event = new CustomEvent('toggleSwitchSuccess', { bubbles: true });
+        this.dispatchEvent(event);
+        this.setFinishedState(false);
+    }
+    setErrorState(message) {
+        const event = new CustomEvent('toggleSwitchError', { bubbles: true, detail: message });
+        this.dispatchEvent(event);
+        this.setFinishedState(true);
+    }
+    setFinishedState(error) {
+        if (error) {
+            this.errorIcon.removeAttribute('hidden');
+        }
+        this.loadingSpinner.setAttribute('hidden', 'hidden');
+        this.enable();
+    }
+    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.');
+            }
+        }
+    }
+};
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "switch", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "loadingSpinner", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "errorIcon", void 0);
+__decorate([
+    debounce(300)
+], ToggleSwitchElement.prototype, "submitForm", null);
+ToggleSwitchElement = __decorate([
+    controller
+], ToggleSwitchElement);
+if (!window.customElements.get('toggle-switch')) {
+    window.ToggleSwitchElement = ToggleSwitchElement;
+    window.customElements.define('toggle-switch', ToggleSwitchElement);
+}