playbook_ui 11.10.0.pre.alpha.pre.bold1 → 11.11.0.pre.alpha.dialog1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a43eeb1b663289ece01c3728bf0c0d0348b53dcaa3ff791ac1fe255320d6f82
-  data.tar.gz: cf333518cc9c0532f39673f3203331652d592d4bad9b39556c07ffa126aa2a9c
+  metadata.gz: 75154344c3369be789e9fdeb6a2140baecde97c1a8f817008348c5635ce0b8dd
+  data.tar.gz: f9a48fef542601d8a685b3198c2f8bfe3342a47351cbf8c602cfe83917821928
 SHA512:
-  metadata.gz: 9d28385a01e24ac9aca74db35b63c0d4799373a9912f0a42202f3dfa5e67a4a93f1c1299de00a4b545007a8c53a82928f990219b1db1ef25b8ff791a68aae003
-  data.tar.gz: 754c695cdb22bf7dfbf63550804c6f464773df5f33106995dad2266e0dc5c01e2545b88f63a9b909839cdaf5f2b10bbeb6167af180160fc88bef775ba61ba0f6
+  metadata.gz: 6bb37ea63470119137bcb870cf1aa00a35aba2c8d345011ee138f07bf7cd60ebb5007affdb89e81d3b8934fe1e0dc826873300b1f1ee67d27da04b5fcf5ad512
+  data.tar.gz: 1cbc92c01f4028755ceb6b68ea9cdb996d9d1cc6cc48758e5cfd5774c9d1128f4f71b61d5412c44cf18ba7481ee33416a42d87651970f4fd17182981963fdf96

data/app/pb_kits/playbook/index.js

@@ -121,3 +121,4 @@ 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.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,6 +80,7 @@
 	animation-duration: $animation-duration;
 	outline: none;
 	animation-timing-function: $easeInOutQuint;
+	margin: auto;
 	
 	&[class*="_status_size"] {
 		width: $status_size;
@@ -167,4 +168,27 @@
 			} 
 		}
 	}
+
+	.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.html.erb

@@ -0,0 +1,22 @@
+<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/dialog.rb

@@ -2,45 +2,17 @@
 
 module Playbook
   module PbDialog
-    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
+    class Dialog < Playbook::KitBase
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[sm md lg content],
+                  values: %w[sm md lg xl status_size content],
                   default: "md"
-      prop :text
       prop :title
-      prop :trigger
+      prop :text
+      prop :confirm_button
+      prop :cancel_button
 
-      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,
-        }
+      def classname
+        generate_classname("pb_dialog pb_dialog_#{size}")
       end
     end
   end

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,7 @@
+<%= 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

@@ -0,0 +1,13 @@
+# 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

@@ -0,0 +1,13 @@
+<%= 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

@@ -0,0 +1,16 @@
+# 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

@@ -0,0 +1,13 @@
+<%= 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/dialog_header.rb

@@ -2,28 +2,11 @@
 
 module Playbook
   module PbDialog
-    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
+    class DialogHeader < Playbook::KitBase
       prop :title
 
-      def dialog_header_options
-        {
-          id: id,
-          closeable: closeable,
-          padding: padding,
-          separator: separator,
-          spacing: spacing,
-          text: text,
-          title: title,
-        }
+      def classname
+        generate_classname("dialog_header")
       end
     end
   end

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

@@ -0,0 +1,12 @@
+<%= 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

@@ -0,0 +1,11 @@
+<%= 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

@@ -0,0 +1,29 @@
+<%= 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"
+     }) %>

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

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

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -6,19 +6,16 @@
   &[class*=_1] {
     @include pb_title_1;
     @include title_colors;
-    @include pb_title_bold;
   }
 
   &[class*=_2] {
     @include pb_title_2;
     @include title_colors;
-    @include pb_title_bold;
   }
 
   &[class*=_3] {
     @include pb_title_3;
     @include title_colors;
-    @include pb_title_bold;
   }
 
   &[class*=_4] {
@@ -29,8 +26,4 @@
   &.dark {
     @include pb_title_dark;
   }
-
-  &[class*=_thin] {
-    @include pb_title_thin;
-  }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -5,7 +5,6 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
 
 type TitleProps = {
   aria?: {[key: string]: string},
-  bold?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
@@ -21,7 +20,6 @@ const Title = (props: TitleProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
-    bold = true,
     children,
     className,
     color,
@@ -35,9 +33,8 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
-  const getBold = bold ? '' : 'thin'
   const classes = classnames(
-    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
+    buildCss('pb_title_kit', `size_${size}`, variant, color),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_title/docs/{_title_default.html.erb → _title_light.html.erb}

@@ -5,7 +5,7 @@
 
 <br/>
 
-<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %> 
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>

data/app/pb_kits/playbook/pb_title/docs/{_title_default.jsx → _title_light.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Title from '../_title'
 
-const TitleDefault = (props) => {
+const TitleLight = (props) => {
   return (
     <div>
       <Title
@@ -38,4 +38,4 @@ const TitleDefault = (props) => {
   )
 }
 
-export default TitleDefault
+export default TitleLight

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

@@ -1,10 +1,8 @@
 examples:
   rails:
-  - title_default: Default UI
-  - title_light_weight: Light Weight UI
+  - title_light: Light UI
   - title_colors: Colors
 
   react:
-  - title_default: Default UI
-  - title_light_weight: Light Weight UI
+  - title_light: Light UI
   - title_colors: Colors

data/app/pb_kits/playbook/pb_title/docs/index.js

@@ -1,3 +1,2 @@
-export { default as TitleDefault } from './_title_default.jsx'
-export { default as TitleLightWeight } from './_title_light_weight.jsx'
+export { default as TitleLight } from './_title_light.jsx'
 export { default as TitleColors } from './_title_colors.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -17,14 +17,9 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: true
-      prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color, is_bold)
-      end
-
-      def is_bold
-        bold ? nil : "thin"
+        generate_classname("pb_title_kit", size, variant, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -15,19 +15,6 @@ test('returns namespaced class name', () => {
   expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
-test('with thin font weight', () => {
-  render(
-    <Title
-        bold={false}
-        data={{ testid: 'primary-test' }}
-        text="Test thin font weight"
-    />
-  )
-
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
-})
-
 test('with colors', () => {
   render(
     <Title

data/app/pb_kits/playbook/pb_user/_user.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -21,6 +20,7 @@ type UserProps = {
   name?: string,
   orientation?: "horiztonal" | "vertical",
   size?: "sm" | "md" | "lg",
+  subtitle?: string | Array<Node> | Node,
   territory?: string,
   title?: string,
 } & GlobalProps
@@ -38,6 +38,7 @@ const User = (props: UserProps) => {
     name,
     orientation = 'horizontal',
     size = 'sm',
+    subtitle,
     territory = '',
     title = '',
   } = props
@@ -81,6 +82,19 @@ const User = (props: UserProps) => {
         >
           {territory === '' ? title : `${territory} • ${title}`}
         </Body>
+        { typeof(subtitle) === 'string' &&
+          <Body
+              color="light"
+              dark={dark}
+              text={subtitle}
+              variant={null}
+          />
+        }
+        { typeof(subtitle) !== 'string' &&
+          <>
+            {subtitle}
+          </>
+        }
       </div>
     </div>
   )

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb

@@ -0,0 +1,36 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) do %>
+    <%= pb_rails("flex", props: { align: "center" }) do %>
+      <%= pb_rails("icon", props: { icon: "users" }) %>
+      <%= pb_rails("caption", props: { padding_left: "xs", text: "Admin" }) %>
+    <% end %>
+  <% end %>
+
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+  }) do %>
+    <%= pb_rails("contact", props: {
+      contact_type: "cell",
+      contact_value: "349-185-9988"
+    }) %>
+    <%= pb_rails("contact", props: {
+      contact_value: 5555555555
+    }) %>
+    <%= pb_rails("contact", props: {
+      contact_type: "email",
+      contact_value: "email@example.com"
+    }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md

@@ -0,0 +1 @@
+The kit accepts block content and whatever is passed as block content will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -0,0 +1,56 @@
+import React from "react"
+import { Caption, Contact, Flex, Icon, User } from "../.."
+
+const MentorSubtitle = (
+  <Flex>
+    <Icon icon="users" />
+    <Caption
+        paddingLeft="xs"
+        text="Admin"
+    />
+  </Flex>
+)
+
+const ContactSubtitle = (
+  <>
+    <Contact
+        contactType="cell"
+        contactValue="349-185-9988"
+    />
+    <Contact
+        contactValue="5555555555"
+    />
+    <Contact
+        contactType="email"
+        contactValue="email@example.com"
+    />
+  </>
+)
+
+const UserBlockContentSubtitleReact = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle={MentorSubtitle}
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle={ContactSubtitle}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserBlockContentSubtitleReact

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md

@@ -0,0 +1 @@
+The `subtitle` prop accepts strings as well as nodes. Whatever node is passed will display in the subtitle section.

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb

@@ -0,0 +1,23 @@
+<div class="pb--doc-demo-row">
+  <%= pb_rails("user", props: {
+    align: "center",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "vertical",
+    size: "md",
+    subtitle: "User ID: 12345",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+
+  <%= pb_rails("user", props: {
+    align: "left",
+    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+    name: "Anna Black",
+    orientation: "horizontal",
+    size: "md",
+    subtitle: "User ID: 12345",
+    territory: "PHL",
+    title: "Remodeling Consultant"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { User } from "../../"
+
+const UserSubtitle = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <User
+          align="center"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="vertical"
+          size="lg"
+          subtitle="User ID: 12345"
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+
+      <User
+          align="left"
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          orientation="horizontal"
+          subtitle="User ID: 12345"
+          territory="PHL"
+          title="Remodeling Consultant"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default UserSubtitle

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

@@ -6,9 +6,8 @@ examples:
   - user_text_only: Text Only
   - user_size: Horizontal Size
   - user_vertical_size: Vertical Size
-
-
-
+  - user_subtitle: Subtitle
+  - user_block_content_subtitle_rails: Block Content Subtitle
 
   react:
   - user_default: Default
@@ -16,3 +15,5 @@ examples:
   - user_text_only: Text Only
   - user_size: Horizontal Size
   - user_vertical_size: Vertical Size
+  - user_subtitle: Subtitle
+  - user_block_content_subtitle_react: Block Content Subtitle

data/app/pb_kits/playbook/pb_user/docs/index.js

@@ -3,3 +3,5 @@ export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'
 export { default as UserVerticalSize } from './_user_vertical_size.jsx'
+export { default as UserSubtitle } from './_user_subtitle.jsx'
+export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -10,13 +10,21 @@
       image_url: object.avatar_url
     }) %>
   <% end %>
-  <%= content_tag(:div,
-      class: "content_wrapper") do %>
+  <%= content_tag(:div, class: "content_wrapper") do %>
     <%= pb_rails("title", props: { text: object.name, size: object.title_size, dark: object.dark }) %>
     <%= pb_rails("body", props: {
       text: "#{object.details}",
       dark: object.dark,
       color: "light"
     }) %>
+    <% if content %>
+      <%= content.presence %>
+    <% else %>
+      <%= pb_rails("body", props: {
+        text: "#{object.subtitle}",
+        dark: object.dark,
+        color: "light"
+      }) %>
+    <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_user/user.rb

@@ -16,6 +16,7 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg md sm],
                   default: "sm"
+      prop :subtitle
       prop :title
       prop :territory
 

data/app/pb_kits/playbook/pb_user/user.test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import User from './_user'
+import Caption from "../pb_caption/_caption"
+
+test('subtitle prop adds subtitle text', () => {
+  render(
+    <User
+        data={{ testid: 'test-subtitle' }}
+        subtitle='test subtitle'
+    />
+  )
+
+  expect(screen.getByTestId('test-subtitle')).toHaveTextContent('test subtitle')
+})
+
+test('subtitle prop accepts a node', () => {
+  const TestCaption = <Caption text='test caption' />
+
+  render(
+    <User
+        data={{ testid: 'test-subtitle-block' }}
+        subtitle={TestCaption}
+    />
+  )
+
+  expect(screen.getByTestId('test-subtitle-block')).toHaveTextContent('test caption')
+})

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

@@ -9,6 +9,10 @@ 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/app/pb_kits/playbook/tokens/_titles.scss

@@ -31,19 +31,8 @@
 
 @mixin pb_title_4 {
   @include pb_title($heading_4, $bolder);
-  letter-spacing: -0.03em !important;
 }
 
 @mixin pb_title_dark {
   color: $text_dk_default;
 }
-
-@mixin pb_title_bold {
-  font-weight: $bolder;
-  letter-spacing: 0em;
-}
-
-@mixin pb_title_thin {
-  font-weight: $lighter;
-  letter-spacing: $lspace_tight;
-}

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.10.0.pre.alpha.pre.bold1
+  version: 11.11.0.pre.alpha.dialog1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-27 00:00:00.000000000 Z
+date: 2022-11-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -808,18 +808,26 @@ 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
@@ -831,6 +839,7 @@ 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
@@ -1995,12 +2004,9 @@ files:
 - app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
 - app/pb_kits/playbook/pb_title/docs/_title_colors.jsx
 - app/pb_kits/playbook/pb_title/docs/_title_colors.md
-- app/pb_kits/playbook/pb_title/docs/_title_default.html.erb
-- app/pb_kits/playbook/pb_title/docs/_title_default.jsx
-- app/pb_kits/playbook/pb_title/docs/_title_default.md
-- app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb
-- app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx
-- app/pb_kits/playbook/pb_title/docs/_title_light_weight.md
+- app/pb_kits/playbook/pb_title/docs/_title_light.html.erb
+- app/pb_kits/playbook/pb_title/docs/_title_light.jsx
+- app/pb_kits/playbook/pb_title/docs/_title_light.md
 - app/pb_kits/playbook/pb_title/docs/example.yml
 - app/pb_kits/playbook/pb_title/docs/index.js
 - app/pb_kits/playbook/pb_title/title.html.erb
@@ -2133,10 +2139,16 @@ files:
 - app/pb_kits/playbook/pb_user/_user.tsx
 - app/pb_kits/playbook/pb_user/docs/_description.md
 - app/pb_kits/playbook/pb_user/docs/_footer.md
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_rails.md
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx
+- app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.md
 - app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_default.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_size.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_size.jsx
+- app/pb_kits/playbook/pb_user/docs/_user_subtitle.html.erb
+- app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_text_only.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_vertical_size.html.erb
@@ -2147,6 +2159,7 @@ files:
 - app/pb_kits/playbook/pb_user/docs/index.js
 - app/pb_kits/playbook/pb_user/user.html.erb
 - app/pb_kits/playbook/pb_user/user.rb
+- app/pb_kits/playbook/pb_user/user.test.js
 - app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
 - app/pb_kits/playbook/pb_user_badge/_user_badge.scss
 - app/pb_kits/playbook/pb_user_badge/badges/million-dollar.svg

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

@@ -1,10 +0,0 @@
-<%= 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_title/docs/_title_light_weight.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, bold: false }) %>
-<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>
-<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -1,33 +0,0 @@
-import React from 'react'
-
-import Title from '../_title'
-
-const TitleLightWeight = (props) => {
-  return (
-    <div>
-      <Title
-          bold={false}
-          size={3}
-          tag="h3"
-          text="Title 3"
-          {...props}
-      />
-      <Title
-          bold={false}
-          size={2}
-          tag="h2"
-          text="Title 2"
-          {...props}
-      />
-      <Title
-          bold={false}
-          size={1}
-          tag="h1"
-          text="Title 1"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default TitleLightWeight

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -1,3 +0,0 @@
-##### Prop
-Title kit will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
-Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.