katalyst-kpop 3.0.0.beta.8 → 3.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c29776e86c6d5f591b5f5398987da2487a6d8eba09f44da2988852c4b594502b
-  data.tar.gz: '004809bbf80602c942b5d4074062d5793c3f210f07f1d1a97a844e544ef60038'
+  metadata.gz: 56bf54429bfb238e72687e0672f8ec6b677c092d1940a593100c3f1afe3676dd
+  data.tar.gz: b64fbdc1cd8e6b5798db53ff13808022dbae2cfa0cd8a682d199efb895934638
 SHA512:
-  metadata.gz: c4d2466c600eb9c88e68556d08aac862b102052675fa8cdad68aac0033356a52669b0e02f2238b6affff871d98d3410efe22c39bc0bcaeb09a9ae619d728026d
-  data.tar.gz: 613392880bd2d59e6610213cec65b4746766c5c8fa6409ec2dca8e9add724a0423f0abdc5c607fe492465409ab79451558d50a44534ce131345e28d39c5811c5
+  metadata.gz: bd797cb4d09e3f8539962e2acd3b4bbb928d9613f3b43b16ef0f457b2318ba345fe087e5af562898025bf744d6a5bd10698ffcf57debca463cbf05702bede267
+  data.tar.gz: 3a6a920b59893419b34ba6bdeff80fc0e976dbb5f91c5bcd3f7f601d31e09b1e04b732cccbe4c41199aed4f0cb439101a530b0ff86c881e3dbfcb96f6bcb04a1

data/app/assets/stylesheets/katalyst/kpop/_frame.scss

@@ -24,7 +24,6 @@
 
   position: relative;
   display: grid;
-  overflow: hidden;
   margin: 0 auto;
 
   --min-width: #{$min-width};

data/app/assets/stylesheets/katalyst/kpop/_modal.scss

@@ -10,69 +10,76 @@
   grid-template-rows: auto auto 1fr auto;
 
   background-color: white;
-  border: 1px solid black;
   border-radius: $border-radius;
   overflow: hidden;
   max-height: var(--max-height);
-}
+  box-shadow: rgb(0 0 0 / 25%) 0 1px 2px, rgb(0 0 0 / 31%) 0 0 5px;
 
-.kpop-title-bar {
-  grid-area: title-bar;
-  display: flex;
-  background: $title-background-color;
-  color: $title-text-color;
+  .kpop-title-bar {
+    grid-area: title-bar;
+    display: grid;
+    grid-template-areas: "close title empty";
+    grid-template-columns: 3.5rem auto 3.5rem;
+    border-bottom: 1px solid $keyline-color;
+    min-height: 3.5rem;
+    align-items: center;
+  }
 
-  .kpop-title {
+  .kpop-header {
+    grid-area: header;
+  }
+
+  .kpop-content {
+    grid-area: content;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+
+  .kpop-footer {
+    grid-area: footer;
+    border-top: 1px solid $keyline-color;
     padding: $default-padding;
-    flex-grow: 1;
+  }
+
+  .kpop-title {
+    grid-area: title;
+    font-weight: bold;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 3.5rem;
   }
 
   .kpop-close {
+    grid-area: close;
+    text-align: center;
     background: none;
     border: none;
-    color: $title-text-color;
-    cursor: pointer;
     display: block;
     font-size: 2rem;
-    font-weight: bold;
-    padding: 0 0.75rem;
+    font-weight: 300;
     text-decoration: none;
+    line-height: 3.5rem;
   }
-}
-
-.kpop-header {
-  grid-area: header;
-}
-
-.kpop-content {
-  grid-area: content;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-}
 
-.kpop-footer {
-  grid-area: footer;
-  background: white;
-  border-top: 1px solid black;
-  padding: $default-padding;
-}
-
-.kpop-buttons {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: space-between;
-}
-
-.kpop-modal.iframe {
-  .kpop-content {
-    overflow: unset;
+  .button-set {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: flex-end;
   }
 
-  iframe {
-    height: var(--max-height);
-    width: var(--max-width);
-    flex-grow: 1;
-    overflow: scroll;
+  &.iframe {
+    .kpop-content {
+      overflow: unset;
+    }
+
+    iframe {
+      height: var(--max-height);
+      width: var(--max-width);
+      flex-grow: 1;
+      overflow: scroll;
+    }
   }
 }

data/app/assets/stylesheets/katalyst/kpop/_variables.scss

@@ -17,9 +17,8 @@ $mobile-height: 400px !default;
 
 // modal variables
 $border-radius: 0.5rem !default;
-$title-background-color: #344055 !default;
-$title-text-color: white !default;
 $default-padding: 1rem 1.5rem !default;
+$keyline-color: #e0e0e0 !default;
 
 // scrim variables
 $scrim-background: rgba(0, 0, 0, 0.6) !default;

data/app/components/kpop/frame_component.rb

@@ -2,7 +2,7 @@
 
 module Kpop
   class FrameComponent < ViewComponent::Base
-    include HasHtmlAttributes
+    include Katalyst::HtmlAttributes
     include Turbo::FramesHelper
 
     attr_reader :id

data/app/components/kpop/modal/footer_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Kpop
+  module Modal
+    class FooterComponent < ViewComponent::Base
+      include Katalyst::HtmlAttributes
+
+      def call
+        tag.div(content, **html_attributes)
+      end
+
+      def inspect
+        "#<#{self.class.name}>"
+      end
+
+      def default_html_attributes
+        { class: "kpop-footer" }
+      end
+    end
+  end
+end

data/app/components/kpop/modal/header_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Kpop
+  module Modal
+    class HeaderComponent < ViewComponent::Base
+      include Katalyst::HtmlAttributes
+
+      def call
+        tag.div(content, **html_attributes)
+      end
+
+      def inspect
+        "#<#{self.class.name}>"
+      end
+
+      def default_html_attributes
+        { class: "kpop-header" }
+      end
+    end
+  end
+end

data/app/components/kpop/modal/title_component.rb

@@ -3,7 +3,7 @@
 module Kpop
   module Modal
     class TitleComponent < ViewComponent::Base
-      include HasHtmlAttributes
+      include Katalyst::HtmlAttributes
 
       def initialize(title: nil, captive: false, **)
         super

data/app/components/kpop/modal_component.html.erb

@@ -1,8 +1,6 @@
 <%= tag.div(**html_attributes) do %>
   <%= title if title? %>
   <%= header if header? %>
-  <div class="kpop-content">
-    <%= content %>
-  </div>
+  <%= tag.div(content, **content_attributes) %>
   <%= footer if footer? %>
 <% end %>

data/app/components/kpop/modal_component.rb

@@ -2,14 +2,18 @@
 
 module Kpop
   class ModalComponent < ViewComponent::Base
-    include HasHtmlAttributes
+    include Katalyst::HtmlAttributes
 
     renders_one :title, "Kpop::Modal::TitleComponent"
-    renders_one :header
-    renders_one :footer
+    renders_one :header, "Kpop::Modal::HeaderComponent"
+    renders_one :footer, "Kpop::Modal::FooterComponent"
 
-    def initialize(title:, captive: false, fallback_location: nil, layout: nil, **)
-      super
+    define_html_attribute_methods :content_attributes
+
+    def initialize(title:, fallback_location: nil, layout: nil, captive: false, **html_attributes)
+      self.content_attributes = html_attributes.delete(:content) if html_attributes.key?(:content)
+
+      super(**html_attributes)
 
       @fallback_location = fallback_location
       @layout            = layout
@@ -18,6 +22,10 @@ module Kpop
       with_title(title:, captive:) if title.present?
     end
 
+    def with_footer_buttons(**, &)
+      with_footer(class: "button-set", **, &)
+    end
+
     def inspect
       "#<#{self.class.name} title: #{title.inspect}>"
     end
@@ -35,5 +43,9 @@ module Kpop
         },
       }
     end
+
+    def default_content_attributes
+      { class: "kpop-content" }
+    end
   end
 end

data/lib/katalyst/kpop.rb

@@ -1,11 +1,10 @@
 # frozen_string_literal: true
 
-require "html_attributes_utils"
+require "katalyst/html_attributes"
 require "view_component"
 
 require "katalyst/kpop/engine"
 require "katalyst/kpop/turbo"
-require "katalyst/kpop/version"
 
 module Katalyst
   module Kpop

metadata

@@ -1,17 +1,17 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-kpop
 version: !ruby/object:Gem::Version
-  version: 3.0.0.beta.8
+  version: 3.0.1
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-01 00:00:00.000000000 Z
+date: 2023-12-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: html-attributes-utils
+  name: katalyst-html-attributes
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -72,9 +72,10 @@ files:
 - app/assets/stylesheets/katalyst/kpop/_scrim.scss
 - app/assets/stylesheets/katalyst/kpop/_side_panel.scss
 - app/assets/stylesheets/katalyst/kpop/_variables.scss
-- app/components/concerns/kpop/has_html_attributes.rb
 - app/components/kpop/frame_component.html.erb
 - app/components/kpop/frame_component.rb
+- app/components/kpop/modal/footer_component.rb
+- app/components/kpop/modal/header_component.rb
 - app/components/kpop/modal/title_component.html.erb
 - app/components/kpop/modal/title_component.rb
 - app/components/kpop/modal_component.html.erb
@@ -110,7 +111,6 @@ files:
 - lib/katalyst/kpop/matchers/title_finder.rb
 - lib/katalyst/kpop/matchers/title_matcher.rb
 - lib/katalyst/kpop/turbo.rb
-- lib/katalyst/kpop/version.rb
 homepage: https://github.com/katalyst/kpop
 licenses:
 - MIT
@@ -127,9 +127,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '3.2'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.4.20
 signing_key:

data/app/components/concerns/kpop/has_html_attributes.rb

@@ -1,78 +0,0 @@
-# frozen_string_literal: true
-
-require "html_attributes_utils"
-
-module Kpop
-  # Adds HTML attributes to a component.
-  # Accepts HTML attributes from the constructor or via `html_attributes=`.
-  # These are merged with the default attributes defined in the component.
-  # Adds support for custom html attributes for other tags, e.g.:
-  #   define_html_attribute_methods :table_attributes, default: {}
-  #   tag.table(**table_attributes)
-  module HasHtmlAttributes
-    extend ActiveSupport::Concern
-
-    using HTMLAttributesUtils
-
-    MERGEABLE_ATTRIBUTES = [
-      *HTMLAttributesUtils::DEFAULT_MERGEABLE_ATTRIBUTES,
-      %i[data controller],
-      %i[data action],
-    ].freeze
-
-    FLATTENABLE_ATTRIBUTES = [
-      %i[data controller],
-      %i[data action],
-    ].freeze
-
-    refine NilClass do
-      def flatten_html(*)
-        self
-      end
-    end
-
-    refine Hash do
-      def merge_html(attributes)
-        result = deep_merge_html_attributes(attributes, mergeable_attributes: MERGEABLE_ATTRIBUTES)
-        FLATTENABLE_ATTRIBUTES.each_with_object(result) do |path, flattened|
-          flattened.flatten_html(*path)
-        end
-      end
-
-      def flatten_html(key, *path)
-        if path.empty?
-          self[key] = self[key].join(" ") if self[key].is_a?(Array)
-        else
-          self[key].flatten_html(*path)
-        end
-      end
-    end
-
-    class_methods do
-      using HasHtmlAttributes
-
-      def define_html_attribute_methods(name, default: {})
-        define_method("default_#{name}") { default }
-        private("default_#{name}")
-
-        define_method(name) do
-          send("default_#{name}").merge_html(instance_variable_get("@#{name}") || {})
-        end
-
-        define_method("#{name}=") do |options|
-          instance_variable_set("@#{name}", options.slice(:id, :aria, :class, :data).merge(options.fetch(:html, {})))
-        end
-      end
-    end
-
-    included do
-      define_html_attribute_methods :html_attributes, default: {}
-    end
-
-    def initialize(**options)
-      super(**options.except(:id, :aria, :class, :data, :html))
-
-      self.html_attributes = options
-    end
-  end
-end

data/lib/katalyst/kpop/version.rb

@@ -1,7 +0,0 @@
-# frozen_string_literal: true
-
-module Katalyst
-  module Kpop
-    VERSION = "3.0.0.beta.8"
-  end
-end