yattho_view_components 0.0.1

data/app/components/yattho/tooltip.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Yattho
+  # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
+  class Tooltip < Yattho::Component
+    status :deprecated
+
+    DIRECTION_DEFAULT = :n
+    ALIGN_DEFAULT = :default
+    MULTILINE_DEFAULT = false
+    DELAY_DEFAULT = false
+
+    ALIGN_MAPPING = {
+      ALIGN_DEFAULT => "",
+      :left_1 => "tooltipped-align-left-1",
+      :right_1 => "tooltipped-align-right-1",
+      :left_2 => "tooltipped-align-left-2",
+      :right_2 => "tooltipped-align-right-2"
+    }.freeze
+
+    DIRECTION_OPTIONS = [DIRECTION_DEFAULT] + %i[
+      nw
+      ne
+      w
+      e
+      sw
+      s
+      se
+    ]
+
+    # @example Default
+    #   <div class="pt-5">
+    #     <%= render(Yattho::Tooltip.new(label: "Even bolder")) { "Default Bold Text" } %>
+    #   </div>
+    #
+    # @example Wrapping another component
+    #   <div class="pt-5">
+    #     <%= render(Yattho::Tooltip.new(label: "Even bolder")) do %>
+    #       <%= render(Yattho::ButtonComponent.new) { "Bold Button" } %>
+    #     <% end %>
+    #   </div>
+    #
+    # @example With a direction
+    #   <div class="pt-5">
+    #     <%= render(Yattho::Tooltip.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
+    #   </div>
+    #
+    # @example With an alignment
+    #   <div class="pt-5">
+    #     <%= render(Yattho::Tooltip.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
+    #   </div>
+    #
+    # @example Without a delay
+    #   <div class="pt-5">
+    #     <%= render(Yattho::Tooltip.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
+    #   </div>
+    #
+    # @param label [String] the text to appear in the tooltip
+    # @param direction [String] Direction of the tooltip. <%= one_of(Yattho::Tooltip::DIRECTION_OPTIONS) %>
+    # @param align [String] Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. <%= one_of(Yattho::Tooltip::ALIGN_MAPPING.keys) %>
+    # @param multiline [Boolean] Use this when you have long content
+    # @param no_delay [Boolean] By default the tooltips have a slight delay before appearing. Set true to override this
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(
+      label:,
+      direction: DIRECTION_DEFAULT,
+      align: ALIGN_DEFAULT,
+      multiline: MULTILINE_DEFAULT,
+      no_delay: DELAY_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] ||= :span # rubocop:disable Yattho/NoTagMemoize
+      @system_arguments[:aria] = { label: label }
+      @system_arguments[:skip_aria_label_check] = true
+
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "tooltipped",
+        "tooltipped-#{fetch_or_fallback(DIRECTION_OPTIONS, direction, DIRECTION_DEFAULT)}",
+        ALIGN_MAPPING[fetch_or_fallback(ALIGN_MAPPING.keys, align, ALIGN_DEFAULT)],
+        "tooltipped-no-delay" => fetch_or_fallback_boolean(no_delay, DELAY_DEFAULT),
+        "tooltipped-multiline" => fetch_or_fallback_boolean(multiline, MULTILINE_DEFAULT)
+      )
+    end
+
+    def call
+      render(Yattho::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/yattho/truncate.css

@@ -0,0 +1,30 @@
+/* CSS truncate */
+
+/* css-truncate will shorten text with an ellipsis. */
+
+/* css-truncate-overflow will shorten text with an ellipsis when overflowing */
+
+.css-truncate.css-truncate-overflow,
+  .css-truncate .css-truncate-overflow,
+  .css-truncate.css-truncate-target,
+  .css-truncate .css-truncate-target {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+/* css-truncate-target will shorten text with an ellipsis and a max width */
+
+.css-truncate.css-truncate-target,
+  .css-truncate .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
+    vertical-align: top;
+  }
+
+.css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target,
+  .css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target,
+  .css-truncate.expandable:hover .css-truncate-target,
+  .css-truncate.expandable.css-truncate-target:hover {
+    max-width: 10000px !important;
+  }

data/app/components/yattho/truncate.css.json

@@ -0,0 +1 @@
+{"name":"truncate","selectors":[".css-truncate.css-truncate-overflow","\n  .css-truncate .css-truncate-overflow","\n  .css-truncate.css-truncate-target","\n  .css-truncate .css-truncate-target",".css-truncate.css-truncate-target",".css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target","\n  .css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target","\n  .css-truncate.expandable:hover .css-truncate-target","\n  .css-truncate.expandable.css-truncate-target:hover"]}

data/app/components/yattho/truncate.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["truncate.pcss"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB,qDAAqD;;AAGnD,8EAA8E;;AAC9E;;;;IAIE,gBAAgB;IAChB,uBAAuB;IACvB,mBAAmB;EACrB;;AAEA,2EAA2E;;AAC3E;;IAEE,qBAAqB;IACrB,gBAAgB;IAChB,mBAAmB;EACrB;;AAEA;;;;IAIE,6BAA6B;EAC/B","file":"truncate.css","sourcesContent":["/* CSS truncate */\n\n/* css-truncate will shorten text with an ellipsis. */\n\n.css-truncate {\n  /* css-truncate-overflow will shorten text with an ellipsis when overflowing */\n  &.css-truncate-overflow,\n  & .css-truncate-overflow,\n  &.css-truncate-target,\n  & .css-truncate-target {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* css-truncate-target will shorten text with an ellipsis and a max width */\n  &.css-truncate-target,\n  & .css-truncate-target {\n    display: inline-block;\n    max-width: 125px;\n    vertical-align: top;\n  }\n\n  &.expandable.zeroclipboard-is-hover .css-truncate-target,\n  &.expandable.zeroclipboard-is-hover.css-truncate-target,\n  &.expandable:hover .css-truncate-target,\n  &.expandable:hover.css-truncate-target {\n    max-width: 10000px !important;\n  }\n}"]}

data/app/components/yattho/truncate.pcss

@@ -0,0 +1,30 @@
+/* CSS truncate */
+
+/* css-truncate will shorten text with an ellipsis. */
+
+.css-truncate {
+  /* css-truncate-overflow will shorten text with an ellipsis when overflowing */
+  &.css-truncate-overflow,
+  & .css-truncate-overflow,
+  &.css-truncate-target,
+  & .css-truncate-target {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* css-truncate-target will shorten text with an ellipsis and a max width */
+  &.css-truncate-target,
+  & .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
+    vertical-align: top;
+  }
+
+  &.expandable.zeroclipboard-is-hover .css-truncate-target,
+  &.expandable.zeroclipboard-is-hover.css-truncate-target,
+  &.expandable:hover .css-truncate-target,
+  &.expandable:hover.css-truncate-target {
+    max-width: 10000px !important;
+  }
+}

data/app/components/yattho/truncate.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Yattho
+  # Use `Truncate` to shorten overflowing text with an ellipsis.
+  class Truncate < Yattho::Component
+    status :beta
+
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG, :span, :p, :strong].freeze
+
+    # @example Default
+    #   <div class="col-2">
+    #     <%= render(Yattho::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
+    #   </div>
+    #
+    # @example Inline
+    #   <%= render(Yattho::Truncate.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example Expandable
+    #   <%= render(Yattho::Truncate.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example Custom size
+    #   <%= render(Yattho::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
+    #
+    # @example With HTML content
+    #   <%= render(Yattho::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) do %>
+    #     <span>branch-name-that-is-really-long</span>
+    #   <% end %>
+    #
+    # @param tag [Symbol] <%= one_of(Yattho::Truncate::TAG_OPTIONS) %>
+    # @param inline [Boolean] Whether the element is inline (or inline-block).
+    # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.
+    # @param max_width [Integer] Sets the max-width of the text.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    def initialize(tag: DEFAULT_TAG, inline: false, expandable: false, max_width: nil, **system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "css-truncate",
+        "css-truncate-overflow" => !inline,
+        "css-truncate-target" => inline,
+        "expandable" => inline && expandable
+      )
+      return if max_width.nil?
+
+      @system_arguments[:style] =
+        join_style_arguments(@system_arguments[:style], "max-width: #{max_width}px;")
+    end
+
+    def call
+      render(Yattho::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+import './alpha/dropdown';
+import './alpha/image_crop';
+import './alpha/modal_dialog';
+import './alpha/nav_list';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './local_time';
+import './alpha/tab_container';
+import './time_ago_component';
+import '../../../lib/yattho/forms/yattho_multi_input';
+import '../../../lib/yattho/forms/yattho_text_field';
+import '../../../lib/yattho/forms/toggle_switch_input';

data/app/components/yattho/yattho.js

@@ -0,0 +1,16 @@
+import './alpha/dropdown';
+import './alpha/image_crop';
+import './alpha/modal_dialog';
+import './alpha/nav_list';
+import './alpha/segmented_control';
+import './alpha/toggle_switch';
+import './alpha/tool_tip';
+import './alpha/x_banner';
+import './beta/auto_complete/auto_complete';
+import './beta/clipboard_copy';
+import './local_time';
+import './alpha/tab_container';
+import './time_ago_component';
+import '../../../lib/yattho/forms/yattho_multi_input';
+import '../../../lib/yattho/forms/yattho_text_field';
+import '../../../lib/yattho/forms/toggle_switch_input';

data/app/components/yattho/yattho.pcss

@@ -0,0 +1,37 @@
+/* CSS component styles here */
+
+/* alpha */
+@import "./alpha/action_list.pcss";
+@import "./alpha/auto_complete.pcss";
+@import "./alpha/banner.pcss";
+@import "./alpha/dialog.pcss";
+@import "./alpha/dropdown.pcss";
+@import "./alpha/layout.pcss";
+@import "./alpha/tab_nav.pcss";
+@import "./alpha/text_field.pcss";
+@import "./alpha/button_marketing.pcss";
+@import "./alpha/toggle_switch.pcss";
+@import "./alpha/underline_nav.pcss";
+@import "./alpha/segmented_control.pcss";
+@import "./alpha/menu.pcss";
+
+/* beta */
+@import "./beta/avatar.pcss";
+@import "./beta/avatar_stack.pcss";
+@import "./beta/border_box.pcss";
+@import "./beta/blankslate.pcss";
+@import "./beta/breadcrumbs.pcss";
+@import "./beta/button.pcss";
+@import "./beta/counter.pcss";
+@import "./beta/flash.pcss";
+@import "./beta/label.pcss";
+@import "./beta/link.pcss";
+@import "./beta/popover.pcss";
+@import "./beta/progress_bar.pcss";
+@import "./beta/state.pcss";
+@import "./beta/subhead.pcss";
+@import "./beta/truncate.pcss";
+
+/* to be renamed */
+@import "./beta/timeline_item.pcss";
+@import "./truncate.pcss";

data/app/components/yattho/yattho.ts

@@ -0,0 +1,16 @@
+import './alpha/dropdown'
+import './alpha/image_crop'
+import './alpha/modal_dialog'
+import './alpha/nav_list'
+import './alpha/segmented_control'
+import './alpha/toggle_switch'
+import './alpha/tool_tip'
+import './alpha/x_banner'
+import './beta/auto_complete/auto_complete'
+import './beta/clipboard_copy'
+import './local_time'
+import './alpha/tab_container'
+import './time_ago_component'
+import '../../../lib/yattho/forms/yattho_multi_input'
+import '../../../lib/yattho/forms/yattho_text_field'
+import '../../../lib/yattho/forms/toggle_switch_input'

data/app/forms/after_content_form/after_content.html.erb

@@ -0,0 +1 @@
+<p class="content-after">Hello world</p>

data/app/forms/after_content_form.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class AfterContentForm < ApplicationForm
+  form do |after_content_form|
+    after_content_form.text_field(
+      name: :first_name,
+      label: "First name",
+      required: true,
+      caption: "What you go by."
+    )
+  end
+end

data/app/forms/application_form.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ApplicationForm < Yattho::Forms::Base
+end

data/app/forms/array_check_box_group_form/places_lopez_caption.html.erb

@@ -0,0 +1 @@
+<span>Vacation getaway</span>

data/app/forms/array_check_box_group_form.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ArrayCheckBoxGroupForm < ApplicationForm
+  form do |check_form|
+    # Passing a name: here causes the form to emit all the check boxes with the same name.
+    # In the case below, the name of each will be "places[]". If a box is checked, the
+    # resulting array will contain the corresponding value.
+    check_form.check_box_group(name: "places", label: "Cool places") do |check_group|
+      check_group.check_box(value: "lopez", label: "Lopez Island")
+      check_group.check_box(value: "bellevue", label: "Bellevue", caption: "Beautiful view")
+      check_group.check_box(value: "seattle", label: "Seattle", caption: "The emerald city")
+    end
+  end
+end

data/app/forms/both_types_of_caption_form/first_name_caption.html.erb

@@ -0,0 +1 @@
+I am a caption

data/app/forms/both_types_of_caption_form.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class BothTypesOfCaptionForm < ApplicationForm
+  form do |caption_form|
+    caption_form.text_field(
+      name: :first_name,
+      label: "First name",
+      required: true,
+      caption: "What you go by."
+    )
+  end
+end

data/app/forms/caption_template_form/age_middle_aged_caption.html.erb

@@ -0,0 +1 @@
+<span class="color-fg-danger">No longer a spring chicken.</span>

data/app/forms/caption_template_form/age_young_caption.html.erb

@@ -0,0 +1 @@
+<span class="color-fg-danger">A young thing.</span>

data/app/forms/caption_template_form/cool_caption.html.erb

@@ -0,0 +1 @@
+<span class="color-fg-danger">Check only if you are cool.</span>

data/app/forms/caption_template_form/first_name_caption.html.erb

@@ -0,0 +1 @@
+<span class="color-fg-danger">Be honest!</span>

data/app/forms/caption_template_form.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class CaptionTemplateForm < ApplicationForm
+  form do |name_form|
+    name_form.text_field(
+      name: :first_name,
+      label: "First name",
+      required: true
+    )
+
+    name_form.check_box(
+      name: :cool,
+      label: "Are you cool?"
+    )
+
+    name_form.radio_button_group(name: :age) do |age_radios|
+      age_radios.radio_button(value: "young", label: "10-15")
+      age_radios.radio_button(value: "middle_aged", label: "16-21")
+    end
+  end
+end

data/app/forms/check_box_group_form.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class CheckBoxGroupForm < ApplicationForm
+  form do |check_form|
+    check_form.check_box_group(label: "I like to eat, eat, eat:") do |check_group|
+      check_group.check_box(
+        name: "long_a",
+        label: "Ey-ples and ba-naynays",
+        caption: 'Long "A" sound'
+      )
+
+      check_group.check_box(
+        name: "long_i",
+        label: "Eye-ples and ba-nainais",
+        caption: 'Long "I" sound'
+      )
+
+      check_group.check_box(
+        name: "long_o",
+        value: "long_o",
+        unchecked_value: "not_long_o",
+        label: "Oh-ples and ba-nonos",
+        caption: 'Long "O" sound'
+      )
+    end
+  end
+end

data/app/forms/check_box_with_nested_form.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class CustomCitiesForm < ApplicationForm
+  form do |custom_cities_form|
+    custom_cities_form.text_field(
+      name: :custom_cities,
+      label: "Custom cities",
+      description: "A space-separated list of cities"
+    )
+  end
+end
+
+# :nodoc:
+class CheckBoxWithNestedForm < ApplicationForm
+  form do |check_form|
+    check_form.check_box_group(name: :city_categories) do |check_group|
+      check_group.check_box(
+        value: "capital",
+        label: "Capital",
+        description: "The capital city"
+      )
+      check_group.check_box(
+        value: "populous",
+        label: "Most-populous",
+        description: "The five most-populous cities"
+      )
+      check_group.check_box(
+        value: "custom",
+        label: "Custom",
+        description: "A custom list of cities"
+      ) do |custom_check_box|
+        custom_check_box.nested_form do |builder|
+          CustomCitiesForm.new(builder)
+        end
+      end
+    end
+  end
+end

data/app/forms/composed_form.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ComposedForm < ApplicationForm
+  form do |composed_form|
+    composed_form.fields_for(:first_name) do |builder|
+      FirstNameForm.new(builder)
+    end
+
+    composed_form.fields_for(:last_name) do |builder|
+      LastNameForm.new(builder)
+    end
+  end
+end

data/app/forms/example_toggle_switch_form/example_field_caption.html.erb

@@ -0,0 +1 @@
+My <em>favorite</em> caption.

data/app/forms/example_toggle_switch_form.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ExampleToggleSwitchForm < Yattho::Forms::ToggleSwitchForm
+  def initialize(**system_arguments)
+    super(name: :example_field, label: "Example", caption: "This is an example toggle switch.", **system_arguments)
+  end
+end

data/app/forms/first_name_form.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class FirstNameForm < ApplicationForm
+  form do |first_name_form|
+    first_name_form.text_field(
+      name: :first_name,
+      label: "First name",
+      required: true,
+      caption: "That which we call a rose by any other name would smell as sweet."
+    )
+  end
+end

data/app/forms/horizontal_form.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class HorizontalForm < ApplicationForm
+  form do |my_form|
+    my_form.group(layout: :horizontal) do |name_group|
+      name_group.text_field(
+        name: :first_name,
+        label: "First name",
+        required: true,
+        caption: "What your friends call you."
+      )
+
+      name_group.text_field(
+        name: :last_name,
+        label: "Last name",
+        required: true,
+        caption: "What the principal calls you."
+      )
+    end
+
+    my_form.text_field(
+      name: :dietary_restrictions,
+      label: "Dietary restrictions",
+      caption: "Any allergies?"
+    )
+
+    my_form.check_box(
+      name: :email_notifications,
+      label: "Send me gobs of email!",
+      caption: "Check this if you enjoy getting spam."
+    )
+  end
+end

data/app/forms/immediate_validation_form.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+# :nodoc:
+# :nocov:
+class ImmediateValidationForm < ApplicationForm
+  form do |validation_form|
+    validation_form.text_field(
+      name: :has_error,
+      label: "Will have error",
+      caption: "Every time this checks with the server, it returns an error",
+      auto_check_src: @view_context.example_check_error_path
+    )
+
+    validation_form.text_field(
+      name: :no_error,
+      label: "Will not error",
+      caption: "Will not have an error when it checks the server",
+      auto_check_src: @view_context.example_check_ok_path,
+      validation_message: "This message will go away once you type something"
+    )
+
+    validation_form.text_field(
+      name: :random_error,
+      label: "Random error",
+      caption: "Server checks will randomly respond with errors",
+      auto_check_src: @view_context.example_check_random_path
+    )
+  end
+end

data/app/forms/invalid_form.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class InvalidForm < ApplicationForm
+  form do |my_form|
+    my_form.text_field(
+      name: :first_name,
+      label: "First name",
+      required: true,
+      caption: "That which we call a rose by any other name would smell as sweet."
+    )
+
+    my_form.text_field(
+      name: :last_name,
+      label: "Last name",
+      required: true,
+      caption: "Bueller. Bueller. Bueller.",
+      validation_message: "That doesn't look right"
+    )
+  end
+end

data/app/forms/last_name_form.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class LastNameForm < ApplicationForm
+  form do |last_name_form|
+    last_name_form.text_field(
+      name: :last_name,
+      label: "Last name",
+      required: true,
+      caption: "Bueller. Bueller. Bueller."
+    )
+  end
+end

data/app/forms/multi_input_form.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class MultiInputForm < ApplicationForm
+  form do |my_form|
+    my_form.radio_button_group(name: :country, label: "Country") do |radio_group|
+      radio_group.radio_button(label: "USA", value: "US")
+      radio_group.radio_button(label: "Canada", value: "CA")
+    end
+
+    my_form.multi(name: :region, label: "Region") do |region|
+      region.select_list(name: :states) do |state_list|
+        state_list.option(label: "California", value: "CA")
+        state_list.option(label: "Washington", value: "WA")
+        state_list.option(label: "Oregon", value: "OR")
+      end
+
+      region.select_list(hidden: true, name: :provinces) do |province_list|
+        province_list.option(label: "British Columbia", value: "BC")
+        province_list.option(label: "Alberta", value: "AB")
+        province_list.option(label: "Saskatchewan", value: "SK")
+      end
+    end
+
+    my_form.submit(name: :submit, label: "Submit", scheme: :primary)
+  end
+end