katalyst-kpop 3.0.0.beta.8 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c29776e86c6d5f591b5f5398987da2487a6d8eba09f44da2988852c4b594502b
-  data.tar.gz: '004809bbf80602c942b5d4074062d5793c3f210f07f1d1a97a844e544ef60038'
+  metadata.gz: a962b5da6d47aaad35256ab66cb90fcb20cf42fee35e566f19393d9a6a02ec63
+  data.tar.gz: d50849e4da9a51e547c46c861c844375f4aef5ee4c6df75e52e557cf553dac9f
 SHA512:
-  metadata.gz: c4d2466c600eb9c88e68556d08aac862b102052675fa8cdad68aac0033356a52669b0e02f2238b6affff871d98d3410efe22c39bc0bcaeb09a9ae619d728026d
-  data.tar.gz: 613392880bd2d59e6610213cec65b4746766c5c8fa6409ec2dca8e9add724a0423f0abdc5c607fe492465409ab79451558d50a44534ce131345e28d39c5811c5
+  metadata.gz: 4ff935cebd1a45f2ac6018eea1d180662eb1e53e517a42dfa94b843fde883846c499834ccafd417ec0e1386a4bf5fd37e2b8b04e0689e746b045d046bc17a312
+  data.tar.gz: e572c8b98ed9325592ec15f5780ff024e3a0623f3e20620d06045b4b9223953467451ebe94a7f36223c517061efad67e792b729817abd82c0c1fdd2a882165ec

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/modal/footer_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Kpop
+  module Modal
+    class FooterComponent < ViewComponent::Base
+      include HasHtmlAttributes
+
+      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 HasHtmlAttributes
+
+      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_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

@@ -5,11 +5,15 @@ module Kpop
     include HasHtmlAttributes
 
     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/version.rb

@@ -2,6 +2,6 @@
 
 module Katalyst
   module Kpop
-    VERSION = "3.0.0.beta.8"
+    VERSION = "3.0.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-kpop
 version: !ruby/object:Gem::Version
-  version: 3.0.0.beta.8
+  version: 3.0.0
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-01 00:00:00.000000000 Z
+date: 2023-11-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: html-attributes-utils
@@ -75,6 +75,8 @@ files:
 - 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
@@ -127,9 +129,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: