playbook_ui 11.11.0.pre.alpha.renderer1 → 11.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 87186c6f2089fba7fd9caad01934cbe9037ceb88f81bdc1c8562c2925580312c
-  data.tar.gz: ae086a8528f1ed1011116bd40d30ee2b726cb6f06db27f017d6da9417438ddc0
+  metadata.gz: 01a1e3109de5059d750e0f17e5f9ead0781c6b6ad6c3729186b9c31eb3ff9a90
+  data.tar.gz: a6daa201b636522e49e95279007ccded48567c7e1b2c8c4994f595b0b2ff1656
 SHA512:
-  metadata.gz: e3718b986e0d2c1eeecbb0ed3323e921fe0ee307a36e728787ffcc6838ac3d155900546d4f419ffa55e961612a4d2316e49a4d41e1182975201f2f98e104a008
-  data.tar.gz: 83e882bb65924091cc7713e7f78cb18f65d6684367bda59b9550d5827b5393eea81bf5f72bea2a17abf9bfff112cd84fd7306f5645414013aa483c62ac53a356
+  metadata.gz: 3a8decc17e61b0c22c47d0e0248418490270c9c313768b2da5c757e74997646644f089abbc8b696ad61983befb3d1836cf675868b33e6cdc730c2f31e60f6587
+  data.tar.gz: 634d88b0f381e09676cff75ef918f4269dcdb1d0537b95fb02e8142ee7c9dace945a7825f8d6795785ad819a6f115c75f665660a8c5df99bd4e605e5b0611402

data/app/pb_kits/playbook/index.js

@@ -121,4 +121,3 @@ export { default as PbTable } from './pb_table'
 export { default as PbTextarea } from './pb_textarea'
 export { default as PbTooltip } from './pb_tooltip'
 export { default as PbTypeahead } from './pb_typeahead'
-export { default as dialogHelper } from './pb_dialog/dialogHelper'

data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    dark: object.dark) do %>
+  <% if object.children %>
+    <%= pb_rails("dialog/dialog_header", props: { children: object.children }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -68,7 +68,7 @@
 	$opacity_visible: 1;
 	$opacity_hidden: 0;
 
-	// @include pb_card;
+	@include pb_card;
 	background-color: $white;
 	box-shadow: $shadow_deepest;
 	border: 0;
@@ -80,7 +80,6 @@
 	animation-duration: $animation-duration;
 	outline: none;
 	animation-timing-function: $easeInOutQuint;
-	margin: auto;
 	
 	&[class*="_status_size"] {
 		width: $status_size;
@@ -168,27 +167,4 @@
 			} 
 		}
 	}
-
-	.dialog-button-class {
-		background-color: unset;
-		border: none;
-		cursor: pointer;
-	}
-	
-}
-
-.pb_dialog_wrapper_rails {
-	dialog::backdrop {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba($bg_dark, $opacity_4);
-		animation-name: overlayFade;
-		animation-duration: 0.2s;	
-	}
 }

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -2,17 +2,45 @@
 
 module Playbook
   module PbDialog
-    class Dialog < Playbook::KitBase
+    class Dialog
+      include Playbook::Props
+
+      partial "pb_dialog/dialog"
+
+      prop :ref
+      prop :cancel_button
+      prop :closeable, type: Playbook::Props::Boolean, default: true
+      prop :confirm_button
+      prop :oncancel
+      prop :onchange
+      prop :onclose
+      prop :onconfirm
+      prop :opened, type: Playbook::Props::Boolean, default: false
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[sm md lg xl status_size content],
+                  values: %w[sm md lg content],
                   default: "md"
-      prop :title
       prop :text
-      prop :confirm_button
-      prop :cancel_button
+      prop :title
+      prop :trigger
 
-      def classname
-        generate_classname("pb_dialog pb_dialog_#{size}")
+      def dialog_options
+        {
+          id: id,
+          ref: ref,
+          trigger: trigger,
+          className: classname,
+          cancelButton: cancel_button,
+          closeable: closeable,
+          confirmButton: confirm_button,
+          onCancel: oncancel,
+          onChange: onchange,
+          onClose: onclose,
+          onConfirm: onconfirm,
+          opened: opened,
+          size: size,
+          text: text,
+          title: title,
+        }
       end
     end
   end

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -2,11 +2,28 @@
 
 module Playbook
   module PbDialog
-    class DialogHeader < Playbook::KitBase
+    class DialogHeader
+      include Playbook::Props
+
+      partial "pb_dialog/child_kits/dialog_header"
+
+      prop :closeable, type: Playbook::Props::Boolean, default: true
+      prop :padding
+      prop :separator, type: Playbook::Props::Boolean, default: true
+      prop :spacing
+      prop :text
       prop :title
 
-      def classname
-        generate_classname("dialog_header")
+      def dialog_header_options
+        {
+          id: id,
+          closeable: closeable,
+          padding: padding,
+          separator: separator,
+          spacing: spacing,
+          text: text,
+          title: title,
+        }
       end
     end
   end

data/app/pb_kits/playbook/pb_dialog/docs/example.yml

@@ -1,9 +1,6 @@
 examples:
 
   rails:
-  - dialog_default: Simple
-  - dialog_compound_components: Complex
-  - dialog_sizes: Sizes
 
   react:
   - dialog_default: Simple

data/app/pb_kits/playbook/playbook-rails.js

@@ -9,10 +9,6 @@ import './pb_form/pb_form_validation'
 import datePickerHelper from './pb_date_picker/date_picker_helper'
 window.datePickerHelper = datePickerHelper
 
-// Dialog
-import dialogHelper from './pb_dialog/dialogHelper'
-window.dialogHelper = dialogHelper
-
 // Lazy image loading
 import 'lazysizes'
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.11.0"
-  VERSION = "11.11.0.pre.alpha.renderer1"
+  PREVIOUS_VERSION = "11.10.0"
+  VERSION = "11.11.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.11.0.pre.alpha.renderer1
+  version: 11.11.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-08 00:00:00.000000000 Z
+date: 2022-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -808,26 +808,18 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
 - app/pb_kits/playbook/pb_dialog/_close_icon.tsx
+- app/pb_kits/playbook/pb_dialog/_dialog.html.erb
 - app/pb_kits/playbook/pb_dialog/_dialog.scss
 - app/pb_kits/playbook/pb_dialog/_dialog.tsx
 - app/pb_kits/playbook/pb_dialog/_dialog_context.tsx
 - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx
 - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx
 - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx
-- app/pb_kits/playbook/pb_dialog/dialog.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog.rb
 - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
-- app/pb_kits/playbook/pb_dialog/dialogHelper.js
-- app/pb_kits/playbook/pb_dialog/dialog_body.html.erb
-- app/pb_kits/playbook/pb_dialog/dialog_body.rb
-- app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb
-- app/pb_kits/playbook/pb_dialog/dialog_footer.rb
-- app/pb_kits/playbook/pb_dialog/dialog_header.html.erb
 - app/pb_kits/playbook/pb_dialog/dialog_header.rb
-- app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
-- app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
@@ -839,7 +831,6 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
-- app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
@@ -2337,9 +2328,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,22 +0,0 @@
-<div class="pb_dialog_wrapper_rails">
-    <%= content_tag(:dialog,
-        aria: object.aria,
-        data: object.data,
-        id: object.id,
-        class: object.classname) do %>
-            <% if object.title %>
-                <%= pb_rails("dialog/dialog_header", props: {title: object.title, id: object.id }) %>
-            <% end %>
-            <% if object.text %>
-                <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
-            <% end %>
-            <% if object.cancel_button && object.confirm_button %>
-                <%= pb_rails("dialog/dialog_footer", props: {
-                    cancel_button: object.cancel_button, 
-                    confirm_button: object.confirm_button,
-                    id: object.id
-                }) %>
-            <% end %>
-            <%= content %>
-    <% end %>
-</div>

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,16 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-  const openTrigger = document.querySelectorAll('[data-open-dialog]');
-  const closeTrigger = document.querySelectorAll('[data-close-dialog]');
-  openTrigger.forEach((open) => {
-    open.addEventListener("click", () => {
-      var openTriggerData = open.dataset.openDialog
-      document.getElementById(openTriggerData).showModal()
-    });
-  })
-  closeTrigger.forEach((close) => {
-    close.addEventListener("click", () => {
-      var closeTriggerData = close.dataset.closeDialog
-      document.getElementById(closeTriggerData).close()
-    })
-  })
-});

data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria) do %>
-        <%= content.presence || object.text %>
-<% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_body.rb

@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDialog
-    class DialogBody < Playbook::KitBase
-      prop :text
-
-      def classname
-        generate_classname("dialog_body p_sm")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -1,13 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria) do %>
-    <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
-        <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
-            <%= object.confirm_button %>
-        <% end %>
-        <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id}) do %>
-            <%= object.cancel_button %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDialog
-    class DialogFooter < Playbook::KitBase
-      prop :cancel_button
-      prop :confirm_button
-      prop :confirm_button_id
-      prop :cancel_button_id
-
-      def classname
-        generate_classname("dialog_footer")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,13 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria) do %>
-        <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm"}) do %>
-            <%= content.presence || object.title %>
-            
-            <button class="dialog-button-class" data-close-dialog= <%= object.id %> >
-                <%= pb_rails("icon", props:{icon: "times"}) %>
-            </button>
-        <% end %>
-        <%= pb_rails("section_separator") %>
-<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,12 +0,0 @@
-<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
-
-<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg" }) do %>
-    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
-        <%= pb_rails("caption", props: { text: "This is a complex dialog" }) %>
-    <% end %>
-    <%= pb_rails("dialog/dialog_body") do %>
-        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
-    <% end %>
-    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel", confirm_button: "Confirm", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
-<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -1,11 +0,0 @@
-<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
-
-<%= pb_rails("dialog", props: { 
-    id:"dialog-1", 
-    size: "sm", 
-    title: "This is a header", 
-    text: "This is a dialog.", 
-    cancel_button: "Cancel", 
-    confirm_button: "Confirm", 
-    confirm_button_id: "confirm-button-1"
-}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb

@@ -1,29 +0,0 @@
-<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"} }) %>
-<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"} }) %>
-<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"} }) %>
-
-<%= pb_rails("dialog", props: { 
-    id:"dialog-sm", 
-    size: "sm", 
-    title: "This is a header",
-    text: "I am a small dialog",
-    cancel_button: "Cancel", 
-    confirm_button: "Confirm", 
-   }) %>
-
-
-<%= pb_rails("dialog", props: { 
-    id:"dialog-md", 
-    size: "md",
-    title: "This is a header",
-    text: "I am a medium dialog",
-    cancel_button: "Cancel", confirm_button: "Confirm", 
-     })  %>
-     
-<%= pb_rails("dialog", props: { 
-    id:"dialog-lg", size: "lg",
-    title: "This is a header",
-    text: "I am a large dialog",
-    cancel_button: "Cancel", 
-    confirm_button: "Confirm"
-     }) %>