playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.movemarkdown668

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../../utilities/props'
+import { globalProps } from '../../utilities/globalProps'
+
+type DialogBodyProps = {
+  children: React.ReactNode | React.ReactNode[] | string,
+  padding?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
+  className?: string
+} 
+
+// Body component
+const DialogBody = (props: DialogBodyProps) => {
+  const { children, padding = "sm", className } = props
+  const bodyCSS = buildCss("dialog_body")
+  const bodySpacing = globalProps(props, { padding })
+
+  return (
+    <div className={classnames(bodyCSS, bodySpacing, className)}>
+      {children}
+    </div>
+  )
+}
+
+export default DialogBody

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildCss } from '../../utilities/props'
+import { GlobalProps, globalProps } from '../../utilities/globalProps'
+
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+
+type DialogFooterProps = {
+  aria?: {[key: string]: string},
+  children: React.ReactChild[] | React.ReactChild | string,
+  className?: string,
+  data?: {[key: string]: string},
+  id?: string,
+  padding?: string,
+  paddingBottom?: string,
+  paddingX?: string,
+  separator?: boolean,
+  spacing?: "none" | "between" | "around" | "evenly",
+} & GlobalProps
+
+// Footer component
+const DialogFooter = (props: DialogFooterProps) => {
+  const {
+    children,
+    padding = "sm",
+    paddingBottom = "sm",
+    paddingX = "sm",
+    className,
+    spacing = "between",
+    separator = false,
+  } = props
+
+  const footerCSS = buildCss("dialog_footer")
+  const footerSpacing = globalProps(props, { padding, paddingBottom, paddingX })
+
+  return (
+    <>
+      {separator &&
+        <SectionSeparator />
+      }
+      <div className="dialog-pseudo-footer">
+      </div>
+      <Flex
+          className={classnames(footerCSS, footerSpacing, className)}
+          spacing={spacing}
+      >
+        {children}
+      </Flex>
+    </>
+  )
+}
+
+export default DialogFooter

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -0,0 +1,68 @@
+import React, { useContext } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
+
+import { CloseIcon } from '../_close_icon'
+import { DialogContext } from '../_dialog_context'
+import Flex from '../../pb_flex/_flex'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+
+type DialogHeaderProps = {
+  aria?: {[key: string]: string},
+  children: React.ReactNode[] | React.ReactNode | string,
+  className?: string,
+  closeable?: boolean,
+  data?: object,
+  id?: string,
+  padding?: string,
+  separator?: boolean,
+  spacing?: "none" | "between" | "around" | "evenly",
+  text?: string,
+  title?: string,
+} & GlobalProps
+
+const DialogHeader = (props: DialogHeaderProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    padding = "sm",
+    spacing = "between",
+    closeable = true,
+    separator = true,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const api = useContext(DialogContext)
+  const headerCSS = buildCss("dialog_header")
+  const headerSpacing = globalProps(props, { padding })
+
+  /* eslint-disable react/jsx-handler-names */
+
+  return (
+    <div className="dialog_sticky_header">
+      <Flex
+          {...ariaProps}
+          {...dataProps}
+          className={classnames(headerCSS, headerSpacing, className)}
+          spacing={spacing}
+      >
+        {children}
+        {closeable &&
+          <CloseIcon
+            onClose={api.onClose}
+          />
+        }
+        
+      </Flex>
+      {separator &&
+        <SectionSeparator />
+      }
+    </div>
+  )
+}
+
+export default DialogHeader

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -36,10 +36,9 @@
       vertical-align: top;
       width: 0.6em;
       top: 10px;
-      transform: rotate(135deg);
       font-size: 0.5em;
 
-      transform: rotate(-45deg);
+      transform: rotate(45deg);
       top: 12px;
     }
 

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import { findItemById, checkIt, unCheckIt } from "./helper_functions";
+import { findItemById, checkIt, unCheckIt, getParentAndAncestorsIds } from "./helper_functions";
 import MultiSelectHelper from "./_multi_select_helper";
 
 type MultiLevelSelectProps = {
@@ -42,17 +42,31 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedData = formattedData.map((item: any) => {
       if (item.id === currentNode._id) {
         if (currentNode.checked) {
-          checkIt(item, selectedItems, setSelectedItems);
+          checkIt(item, selectedItems, setSelectedItems, false);
         } else {
-          unCheckIt(item, selectedItems, setSelectedItems);
+          unCheckIt(item, selectedItems, setSelectedItems, false);
         }
       } else if (item.children) {
         const foundItem = findItemById(item.children, currentNode._id);
         if (foundItem) {
           if (currentNode.checked) {
-            checkIt(foundItem, selectedItems, setSelectedItems);
+            checkIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+              const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
+              parents.forEach((item:string) => {
+               const ancestor = findItemById(formattedData,item)
+               ancestor.expanded = true
+              });
+             }
           } else {
-            unCheckIt(foundItem, selectedItems, setSelectedItems);
+            unCheckIt(foundItem, selectedItems, setSelectedItems, false);
+            if (currentNode._parent) {
+             const parents = getParentAndAncestorsIds(currentNode._parent, formattedData)
+             parents.forEach((item:string) => {
+              const ancestor = findItemById(formattedData,item)
+              ancestor.expanded = true
+             });
+            }
           }
         }
       }
@@ -92,17 +106,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         treeData={formattedData}
         onChange={(
           // @ts-ignore
-          selectedNodes: { [key: string]: any }[], 
+          selectedNodes: { [key: string]: any }[],
           currentNode: { [key: string]: any }[]
         ) => {
           setCheckedData(currentNode);
           onSelect(currentNode);
+
         }}
         id={id}
         {...props}
       />
     );
-  }, [formattedData]);
+  }, [formattedData])
 
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>

data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts

@@ -19,19 +19,20 @@ export const findItemById = (
 export const checkIt = (
   foundItem: { [key: string]: any },
   selectedItems: any[],
-  setSelectedItems: Function
+  setSelectedItems: Function,
+  expand: boolean
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = true;
-  foundItem.expanded = true;
+  foundItem.expanded = expand;
   selectedItems.push(foundItem);
 
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      checkIt(x, selectedItems, setSelectedItems);
+      checkIt(x, selectedItems, setSelectedItems, expand);
     });
   }
 
@@ -41,20 +42,46 @@ export const checkIt = (
 export const unCheckIt = (
   foundItem: { [key: string]: any },
   selectedItems: any,
-  setSelectedItems: any
+  setSelectedItems: any,
+  expand: boolean
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = false;
+  foundItem.expanded = false;
   const newSelectedItems = selectedItems.filter(
     (item: any) => item.id !== foundItem.id
   );
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      unCheckIt(x, selectedItems, setSelectedItems);
+      unCheckIt(x, selectedItems, setSelectedItems, expand);
     });
   }
   setSelectedItems([...newSelectedItems]);
 };
+
+
+export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
+  for (let i = 0; i < items.length; i++) {
+    const item:any = items[i];
+    if (item.id === itemId) {
+      // item found in current level of items array
+      return [...ancestors, item.id];
+    }
+    if (item.children && item.children.length > 0) {
+      // recursively search through children
+      const foundAncestors = getParentAndAncestorsIds(
+        itemId,
+        item.children,
+        [...ancestors, item.id]
+      );
+      if (foundAncestors) {
+        return foundAncestors;
+      }
+    }
+  }
+  // item not found in this level of items array or its children
+  return null;
+}

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -81,10 +81,11 @@ $pb_selectable_card_border: 2px;
         }
 
         .separator {
-          width: 2px;
-          margin-right: 0px;
           background: $royal;
         }
+        .psuedo_separator {
+          background-color: $royal;
+        }
       }
     }
   }
@@ -125,13 +126,17 @@ $pb_selectable_card_border: 2px;
 
   .separator {
     align-self: stretch;
-    width: 1px;
-    margin-right: 1px;
+    padding-right: 1px;
     margin-top: -1px;
     margin-bottom: -1px;
     background: $border_light;
   }
 
+  .psuedo_separator {
+    align-self: stretch;
+    padding-right: 1px;
+  }
+
   &.error {
     > label {
       border-color: $error;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -13,9 +13,9 @@ import {
 
 import Icon from '../pb_icon/_icon'
 import Checkbox from '../pb_checkbox/_checkbox'
-import Card from '../pb_card/_card'
 import Flex from '../pb_flex/_flex'
 import Radio from '../pb_radio/_radio'
+import Card from '../pb_card/_card'
 
 type SelectableCardProps = {
   aria?: { [key: string]: string },
@@ -149,13 +149,15 @@ const SelectableCard = (props: SelectableCardProps) => {
                   </Input>
                 </Flex>
                 <div className="separator" />
-                <Card.Body
+                <div className="psuedo_separator"/>
+                <Card
+                    borderNone
                     dark={dark}
                     padding="sm"
                     status={error ? 'negative' : null}
                 >
                   {text ||props.children}
-                </Card.Body>
+                </Card>
               </Flex>
               :
             text || props.children

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -24,7 +24,8 @@
             <% end %>
           <% end %>
           <div class="separator"></div>
-          <%= pb_rails("card/card_body", props: { padding: "sm", status: object.status }) do %>
+          <div class="psuedo_separator"></div>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

data/app/pb_kits/playbook/pb_table/styles/_alignment.scss

@@ -0,0 +1,32 @@
+[class^=pb_table] {
+    tr {
+        vertical-align: top;
+    }
+
+    // Text Align
+    tr[align=center] th,
+    tr th[align=center] {
+      text-align: center !important;
+    }
+    tr[align=right] th,
+    tr th[align=right] {
+      text-align: right !important;
+    }
+
+    // Column Align
+    tr[shift=up],
+    td[shift=up],
+    th[shift=up] {
+        vertical-align: top;
+      }
+    tr[shift=middle],
+    td[shift=middle],
+    th[shift=middle] {
+      vertical-align: middle;
+    }
+    tr[shift=down],
+    td[shift=down],
+    th[shift=down] {
+      vertical-align: bottom;
+    }
+}

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -0,0 +1,19 @@
+@import "../../tokens/colors";
+
+@import "variables";
+@import "reset";
+@import "structure";
+@import "table-card";
+@import "content";
+@import "headers";
+@import "side_highlight";
+@import "alignment";
+@import "hover";
+@import "single-line";
+@import "table-dark";
+@import "mobile";
+@import "mobile_collapse";
+@import "tablet_collapse";
+@import "desktop_collapse";
+@import "sticky_header";
+@import "vertical_border";

data/app/pb_kits/playbook/pb_table/styles/_content.scss

@@ -0,0 +1,13 @@
+[class^=pb_table] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    tbody {
+      tr {
+        td {
+          font-size: $default-font-size;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -0,0 +1,125 @@
+@import "../../tokens/border_radius";
+@import "../../tokens/positioning";
+@import "../../pb_caption/caption_mixin";
+
+@media only screen and (max-width: $screen-xl-min) {
+  [class^=pb_table] {
+    &.table-sm.table-collapse-lg,
+    &.table-md.table-collapse-lg,
+    &.table-lg.table-collapse-lg {
+      width: 100%;
+      background: none !important;
+
+      thead {
+        tr {
+          left: $offscreen;
+          position: absolute;
+          top: $offscreen;
+
+          th {
+            display: block;
+            visibility: visible;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            display: block;
+            visibility: visible;
+            border-left-width: 1px !important;
+            border-right-width: 1px !important;
+            border-bottom-width: 0 !important;
+            border-color: $border_light !important;
+            min-height: 2.2em;
+            position: relative;
+            text-align:left;
+            white-space: normal;
+            &:before {
+              content: attr(data-title);
+              @include caption;
+              width: 100% !important;
+              white-space: nowrap !important;
+              text-overflow: ellipsis !important;
+              position: relative !important;
+              top: 0 !important;
+              left: 0 !important;
+              height: 100% !important;
+              padding-left: 0 !important;
+              display: block !important;
+            }
+
+            &:first-child {
+              margin-top: $space_md !important;
+              border-top-width: 1px !important;
+              border-top-color: $border_light !important;
+              border-radius: $border_rad_light $border_rad_light 0 0;
+            }
+
+            &:last-child {
+              border-radius: 0 0 $border_rad_light $border_rad_light;
+              border-bottom-width: 1px !important;
+            }
+          }
+
+          &:first-child {
+            td {
+              &:first-child {
+                margin-top: $space-xs !important;
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        background: none !important;
+
+        tbody {
+          tr {
+            td {
+              background: $white !important;
+              border-left-width: 1px !important;
+              border-right-width: 1px !important;
+              border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
+
+              &:first-child {
+                border-radius: $border_rad_light $border_rad_light 0 0 !important;
+              }
+              &:last-child {
+                border-radius: 0 0 $border_rad_light $border_rad_light !important;
+              }
+            }
+          }
+        }
+      }
+      @media (hover:hover) {
+        &:hover {
+          tbody {
+            tr {
+              box-shadow: 0 0 0 $white !important;
+            }
+          }
+        }
+      }
+      // reset the first and last to normalize
+      @each $name, $value in $cell-pad-list {
+        &.#{$name} {
+          tbody {
+            tr {
+              td {
+                &:first-child,
+                &:last-child {
+                  padding: $value $cell-gutter !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -0,0 +1,16 @@
+@import "../../pb_caption/caption_mixin";
+
+[class^=pb_table] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    thead {
+      tr {
+        th {
+          @include caption;
+          border-bottom: 1px solid $border_light;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -0,0 +1,74 @@
+@import "../../tokens/opacity";
+
+$transition-speed: 0.2s;
+
+[class^=pb_table] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    &:not(.no-hover) {
+      border-collapse: collapse;
+      tbody {
+        tr {
+          box-shadow: 0 0 0 $white;
+          transition: box-shadow $transition-speed ease;
+          td {
+            border-top-color: transparent;
+            border-top-width: 0;
+            transition: all $transition-speed ease; 
+          }
+          @media (hover:hover) { 
+            td {
+              position: relative;
+              &:after {
+                transition: background-color $transition-speed ease, height $transition-speed ease;
+                content: "";
+                position: absolute;
+                display: block;
+                top: -1px;
+                left: 0;
+                right: 0;
+                height: 0;
+                background-color: transparent;
+              }
+              &:first-child:after {
+                left: -1px;
+              }
+              &:last-child:after {
+                right: -1px;
+              }
+            }
+            &:hover {
+              box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
+              td {
+                border-color: darken($border_light, 10%);
+                border-top-width: 0;
+                border-top-color: transparent;
+                &:after {
+                  transition: background-color $transition-speed ease, height $transition-speed ease;
+                  background-color: darken($border_light, 10%);
+                  height: 1px;
+                }
+              }
+            }
+          }
+        }
+      }
+      &.table-card {
+        border-collapse: separate;
+        tbody {
+          tr {
+            td {
+              &:first-child {
+                border-left-width: 1px;
+              }
+              &:last-child {
+                border-right-width: 1px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}