playbook_ui 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5757 → 14.12.0.pre.alpha.PBNTR779railsdraggablecrosscontainer5863

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3bfceeec2adea47118fa2a3acf7aecbf348904d2a528f4e719c9a22d8f9b8a6
-  data.tar.gz: 37458e396425f1bfa04703d660edce42a72dcd58c437e092523a68fdaecd5f98
+  metadata.gz: 765d089ccf2865b636f00f2731f259d3251554090ba8cf345d1b96c887af523a
+  data.tar.gz: d2027d84bedb2da3000a272b5c85e8c108dbf4fac0c612653a8ce7f943924f51
 SHA512:
-  metadata.gz: 32df6a28facf75ad16cf95583c52074264996698be73b9f8c7945dbdbf568698a5ca0ad4d00c824bc3d76f4ddf48ab626c381678ffbdd6369ede46c850fd388e
-  data.tar.gz: 91c257b95405e4cf87af9305db3dc68e535bcf759f3549b67461f3dd0f383a5ee719dfcb7b78772d7e1f02189a26bfc30dee8be12ac4fd3c8e243573e4ba04c5
+  metadata.gz: 5927b36c0974b0d951da24d21a0afbae2f1e4949ec0e73e299491f7bb33e378b6be3eb573c0e090edc94efb924753b9117a310d12c6ff43da62c79cd21edbc17
+  data.tar.gz: 123324d5d23872521397b16043be4df25028beb28731e8cf7e2a79ff4c49058aa4a902a1908677d0533163256ea5860861d2cdb629971be3599a61b55192c95d

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -89,7 +89,6 @@
     }
   }
 
-
   .table-header-cells-active:first-child {
     color: $primary !important;
   }
@@ -179,7 +178,7 @@
   }
 
   // Responsive Styles
-  @media only screen and (max-width: $screen-xl-min) {  
+  @media only screen and (max-width: $screen-xl-min) {
     &[class*="advanced-table-responsive-scroll"] {
       border-radius: 4px;
       box-shadow: 1px 0 0 0px $border_light,
@@ -215,7 +214,7 @@
       .bg-white td:first-child {
           background-color: $white;
       }
-      
+
     }
   }
   @media only screen and (min-width: $screen-xl-min) {
@@ -306,4 +305,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -133,15 +133,18 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     if (!elements.length) return;
 
     const isVisible = elements[0].classList.contains("is-visible");
-    if (isVisible) {
-      this.hideElement(elements);
-      this.displayDownArrow();
-    } else {
-      this.showElement(elements);
-      this.displayUpArrow();
+
+    isVisible ? this.hideElement(elements) : this.showElement(elements);
+    isVisible ? this.displayDownArrow() : this.displayUpArrow();
+
+    const row = this.element.closest("tr");
+    if (row) {
+      row.classList.toggle("bg-silver", !isVisible);
+      row.classList.toggle("bg-white", isVisible);
     }
   }
 
+
   displayDownArrow() {
     this.element.querySelector(DOWN_ARROW_SELECTOR).style.display =
       "inline-block";

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -14,10 +14,13 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= "#{object.id}_#{object.row.object_id}" %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
-                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                                </button>
+                              <button
+                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                class="gray-icon expand-toggle-icon"
+                                data-advanced-table="true">
+                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                              </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
                                 <% if column[:custom_renderer].present? %>
@@ -42,4 +45,4 @@
                 <% end %>
             <% end %>
         <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -27,6 +27,9 @@ $avatar-sizes: (
       flex-basis: $size;
 
       & > [class^=pb_flex_kit] {
+        [class^=pb_card_kit] {
+          padding: 2px;
+        }
         [class^=pb_card_kit].overlay_bottom_center,
         [class^=pb_card_kit].overlay_top_center {
           left: 50%;
@@ -52,6 +55,10 @@ $avatar-sizes: (
         flex-grow: 0;
         flex-basis: $size;
 
+        .dark & {
+          background: $text_dk_light;
+        }
+
         &::before {
           content: attr(data-initials);
           width: 100%;
@@ -78,9 +85,11 @@ $avatar-sizes: (
       }
     }
   }
+
   &.dark {
     [class^=pb_card_kit] {
       position: absolute;
+      padding: 2px;
     }
   }
 }

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -23,8 +23,8 @@ export type AvatarProps = {
     variant?: string,
     icon?: string
   },
-  data?: {[key: string]: string},
   dark?: boolean,
+  data?: {[key: string]: string},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   imageAlt?: string,
@@ -71,13 +71,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
 
   const canShowImage = imageUrl && !error
 
-  const onlineStatusSize = 
+  const onlineStatusSize =
     ['xxs', 'xs'].includes(size) ? 'sm' :
       ['sm', 'md'].includes(size) ? 'md' :
         ['lg', 'xl'].includes(size) ? 'lg' :
           'sm';
 
-  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ? 
+  const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
     {
       top: { inset: true, value: "0" },
       right: { inset: false, value: "xxs" }
@@ -96,10 +96,10 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         id={id}
     >
       {componentOverlay ? (
-        <Flex display="display_inline_block" 
+        <Flex display="display_inline_block"
             position="relative"
         >
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (
@@ -115,12 +115,14 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
              <Card
                  borderNone
                  borderRadius="rounded"
+                 dark={dark}
                  padding="none"
                  position="absolute"
                  {...getPlacementProps(componentOverlay.placement, size)}
              >
-    
+
             <Badge
+                dark={dark}
                 rounded
                 text={componentOverlay.text}
                 variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
@@ -131,11 +133,13 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
             <Card
                 borderNone
                 borderRadius="rounded"
+                dark={dark}
                 htmlOptions={{style: {padding:"2px"}}}
                 position="absolute"
                 {...getPlacementProps(componentOverlay.placement, size)}
             >
               <IconCircle
+                  dark={dark}
                   icon={componentOverlay.icon}
                   size="xxs"
                   variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
@@ -145,7 +149,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         </Flex>
       ) : (
         <>
-          <div className="avatar_wrapper" 
+          <div className="avatar_wrapper"
               data-initials={initials}
           >
             {canShowImage && (

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -1,22 +1,22 @@
 
 <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
   <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
-    <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+    <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
       <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
         <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
       <% end %>
-      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
+      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, position: "absolute" }.merge(specific_placement_style)) do %>
         
-        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
+        <%= pb_rails("icon_circle", props: { dark: object.dark, size: "xxs", icon: object.component_overlay[:icon], variant: object.component_overlay[:variant] }) %>
       <% end %>  
   <% end %>
   <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
-  <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
+  <%= pb_rails("flex", props: { display: "display_inline_block", position: "relative" }) do %>
     <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
       <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
     <% end %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
-    <%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", dark: object.dark, padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
+    <%= pb_rails("badge", props: { dark: object.dark, rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
     <% end %>
     <% end %>
   <% else %>
@@ -26,4 +26,3 @@
     <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
   <% end %>
 <% end %>
-

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,18 +1,19 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarBadgeComponentOverlay = () => {
+const AvatarBadgeComponentOverlay = (props) => {
     return (
         <div>
             <Avatar
                 componentOverlay={{
                     component: "badge",
                     placement: "bottom-right",
-                    text: "12"
+                    text: "12",
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="sm"
+                {...props}
             />
 
             <Avatar
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="md"
+                {...props}
+
             />
 
             <Avatar
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="lg"
+                {...props}
+
             />
 
             <Avatar
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-            /> 
+                {...props}
+            />
         </div>
     )
 }

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarCircleIconComponentOverlay = () => {
+const AvatarCircleIconComponentOverlay = (props) => {
     return (
         <div>
         <Avatar
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="sm"
+            {...props}
         />
 
         <Avatar
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="md"
+            {...props}
         />
 
         <Avatar
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="lg"
+            {...props}
         />
 
         <Avatar
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="xl"
-        /> 
+            {...props}
+        />
     </div>
     )
 }

data/app/pb_kits/playbook/pb_button/button.rb

@@ -65,7 +65,7 @@ module Playbook
       end
 
       def tag
-        link ? "a" : "button"
+        link && !disabled ? "a" : "button"
       end
 
       def valid_emoji(icon)

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -14,6 +14,7 @@ type PbDateProps = {
   alignment?: "left" | "center" | "right";
   aria?: { [key: string]: string };
   className?: string;
+  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -29,6 +30,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
     aria = {},
     alignment = "left",
     className,
+    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -56,7 +58,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
   );
 
   return (
-    <div 
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -93,7 +95,9 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
           </>
         : size == "md" || size == "lg"
           ? (
-            <Title size={4}
+            <Title
+                dark={dark}
+                size={4}
                 tag="h4"
             >
               {showIcon && (
@@ -127,6 +131,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
               <>
                 {showIcon && (
                   <Caption className="pb_icon_kit_container"
+                      dark={dark}
                       tag="span"
                   >
                     <Icon fixedWidth
@@ -138,15 +143,20 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
 
                 {showDayOfWeek && (
                   <>
-                    <Caption tag="div">{weekday}</Caption>
+                    <Caption dark={dark}
+                        tag="div">
+                        {weekday}
+                    </Caption>
                     <Caption color="light"
+                        dark={dark}
                         tag="div"
                         text=" • "
                     />
                   </>
                 )}
 
-                <Caption tag="span">
+                <Caption dark={dark}
+                    tag="span">
                   {month} {day}
                   {currentYear != year && <>{`, ${year}`}</>}
                 </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -18,7 +18,7 @@ const DateDefault = (props) => {
             value={"2012-08-03"}
             {...props}
         />
-        <Caption>{"(Hyphenated Date)"}</Caption>
+        <Caption {...props}>{"(Hyphenated Date)"}</Caption>
       </div>
 
       <br />
@@ -56,6 +56,7 @@ const DateDefault = (props) => {
         <Title
             size={4}
             text={"(Hyphenated Date)"}
+            {...props}
         />
       </div>
 

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -4,7 +4,8 @@ import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (
     <>
-      <Caption size="xs"
+      <Caption {...props}
+          size="xs"
           text="Basic unstyled example"
       />
       <FormattedDate
@@ -15,10 +16,14 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption size="xs"
+      <Caption {...props}
+
+          size="xs"
           text="Example with wrapping typography kit"
       />
-      <Title size={1}>
+      <Title {...props}
+          size={1}
+      >
         <FormattedDate
             unstyled
             value={new Date('25 Dec 1995')}
@@ -28,10 +33,13 @@ const DateUnstyled = (props) => {
 
       <br />
 
-      <Caption size="xs"
+      <Caption {...props}
+          size="xs"
           text="Example with icon + subcaption"
       />
-      <Caption size="xs">
+      <Caption {...props}
+          size="xs"
+      >
         <FormattedDate
             showDayOfWeek
             showIcon

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb

@@ -0,0 +1,193 @@
+<% content_for :helper_methods do %>
+  <% def badge_properties(container)
+    case container
+    when "To Do"
+      { text: "queue", variant: "warning" }
+    when "In Progress"
+      { text: "progress", variant: "primary" }
+    else
+      { text: "done", variant: "success" }
+    end
+  end %>
+<% end %>
+
+<% containers = [
+  "To Do",
+  "In Progress",
+  "Done"
+] %>
+
+<% items_data = [
+  {
+    id: "11",
+    container: "To Do",
+    title: "Task 1",
+    description: "Bug fixes",
+    assignee_name: "Terry Miles",
+    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
+  },
+  {
+    id: "12",
+    container: "To Do",
+    title: "Task 2",
+    description: "Documentation",
+    assignee_name: "Sophia Miles",
+    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
+  },
+  {
+    id: "13",
+    container: "In Progress",
+    title: "Task 3",
+    description: "Add a variant",
+    assignee_name: "Alice Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
+  },
+  {
+    id: "14",
+    container: "To Do",
+    title: "Task 4",
+    description: "Add jest tests",
+    assignee_name: "Mike James",
+    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
+  },
+  {
+    id: "15",
+    container: "Done",
+    title: "Task 5",
+    description: "Alpha testing",
+    assignee_name: "James Guy",
+    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
+  },
+  {
+    id: "16",
+    container: "In Progress",
+    title: "Task 6",
+    description: "Release",
+    assignee_name: "Sally Jones",
+    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
+  },
+] %>
+
+<%= pb_rails("draggable", props: { initial_items: items_data }) do %>
+  <%= pb_rails("flex", props: { justify_content: "center" }) do %>
+    <% containers.each do |container| %>
+        <%= pb_rails("draggable/draggable_container", props: {
+            container: container,
+            width: "xs",
+            height: "xs",
+            padding: "sm",
+            data: { container: container }
+        }) do %>
+            <%= pb_rails("caption", props: { text_align: "center" }) do %><%= container %><% end %>
+            <%= pb_rails("flex", props: {align_items: "stretch", orientation: "column"}) do %>
+                <% items_data.select { |item| item[:container] == container }.each do |item| %>
+                    <%= pb_rails("draggable/draggable_item", props: {
+                        container: container,
+                        drag_id: item[:id]
+                    }) do %>
+                        <%= pb_rails("card", props: { margin_bottom: "sm", padding: "sm"}) do %>
+                            <%= pb_rails("flex", props: { justify: "between" }) do %>
+                                <%= pb_rails("flex/flex_item") do %>
+                                    <%= pb_rails("flex") do %>
+                                        <%= pb_rails("avatar", props: {
+                                            image_url: item[:assignee_img],
+                                            name: item[:assignee_name],
+                                            size: "xxs"
+                                        }) %>
+                                        <%= pb_rails("title", props: {
+                                            padding_left: "xs",
+                                            size: 4,
+                                            text: item[:title]
+                                        }) %>
+                                    <% end %>
+                                <% end %>
+                                <%= pb_rails("badge", props: {
+                                    margin_left: "sm",
+                                    rounded: true,
+                                    text: badge_properties(container)[:text],
+                                    variant: badge_properties(container)[:variant],
+                                      data: {
+                                        pb_status_badge: true,
+                                        pb_tag_type: "badge"
+                                      }
+                                }) %>
+                            <% end %>
+                            <%= pb_rails("body", props: { padding_top: "xs", text: item[:description] }) %>
+                        <% end %>
+                    <% end %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script>
+  const initBadgeUpdates = function() {
+    const updateBadge = function(container) {
+      switch (container) {
+        case 'To Do':
+          return { text: 'queue', variant: 'warning' };
+        case 'In Progress':
+          return { text: 'progress', variant: 'primary' };
+        case 'Done':
+          return { text: 'done', variant: 'success' };
+        default:
+          return { text: 'queue', variant: 'warning' };
+      }
+    };
+
+    let draggedElement = null;
+    let startContainer = null;
+
+    document.querySelectorAll('.pb_draggable_item').forEach(function(item) {
+      item.addEventListener('dragstart', function(event) {
+        draggedElement = event.target;
+        startContainer = draggedElement.closest('.pb_draggable_container');
+      });
+    });
+
+    document.querySelectorAll('.pb_draggable_container').forEach(function(container) {
+      container.addEventListener('drop', function(event) {
+        event.preventDefault();
+
+        if (draggedElement) {
+          setTimeout(function() {
+            const currentContainer = container;
+
+            if (currentContainer && startContainer && currentContainer !== startContainer) {
+              const containerData = currentContainer.getAttribute('data-container');
+              const badge = draggedElement.querySelector('[data-pb-status-badge]');
+
+              if (badge && containerData) {
+                const newProperties = updateBadge(containerData);
+                const span = badge.querySelector('span');
+
+                if (span) {
+                  span.textContent = newProperties.text;
+                }
+
+                badge.classList.forEach(function(className) {
+                  if (className.includes('pb_badge_kit_') || className === 'ml_sm') {
+                    badge.classList.remove(className);
+                  }
+                });
+
+                badge.className = `pb_badge_kit_${newProperties.variant}_rounded ml_sm`;
+              }
+            }
+
+            draggedElement = null;
+            startContainer = null;
+          }, 50);
+        }
+      });
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initBadgeUpdates);
+  } else {
+    initBadgeUpdates();
+  }
+</script>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md

@@ -0,0 +1 @@
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.