playbook_ui 12.25.0 → 12.26.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown813

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Detail } from '../..'
+
+const DetailBold = (props) => (
+  <div>
+    <Detail
+        bold
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="default"
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="lighter"
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="link"
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="error"
+        text="I am a bold detail kit"
+        {...props}
+    />
+
+    <Detail
+        bold
+        color="success"
+        text="I am a bold detail kit"
+        {...props}
+    />
+  </div>
+)
+
+export default DetailBold

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.md

@@ -0,0 +1 @@
+Use the `bold` prop to strongly emphasis your text.

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "default"
+}) %>
+
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "lighter"
+}) %>
+
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "link"
+}) %>
+
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "error"
+}) %>
+
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit",
+  color: "success"
+}) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Detail } from '../..'
+
+const DetailColors = (props) => (
+  <div>
+    <Detail
+        color="default"
+        text="I am a detail kit"
+        {...props}
+    />
+
+    <Detail
+        color="lighter"
+        text="I am a detail kit"
+        {...props}
+    />
+
+    <Detail
+        color="link"
+        text="I am a detail kit"
+        {...props}
+    />
+
+    <Detail
+        color="error"
+        text="I am a detail kit"
+        {...props}
+    />
+
+    <Detail
+        color="success"
+        text="I am a detail kit"
+        {...props}
+    />
+  </div>
+)
+
+export default DetailColors

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.md

@@ -0,0 +1,6 @@
+##### Prop
+This kit uses the `light` color by default, and can be replaced with colors below:
+
+`default` `lighter` `link` `error` `success`
+
+These colors are not for standard usage. You can use the `color` prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it.

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("detail", props: {
+  text: "I am a detail kit"
+}) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Detail } from '../..'
+
+const DetailDefault = (props) => (
+  <div>
+    <Detail
+        text="I am a detail kit"
+        {...props}
+    />
+  </div>
+)
+
+export default DetailDefault

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("detail") do %>
+    <b>This text is using the <%="<b>"%> tag.</b>
+    <br />
+    <br />
+    <strong>This text is using the <%="<strong>"%> tag.</strong>
+    <br />
+    <br />
+    <a>This text is using the <%="<a>"%> tag.</a>
+    <br />
+    <br />
+    <i>This text is using the <%="<i>"%> tag.</i>
+    <br />
+    <br />
+    This <em>word</em> is using an <%="<em>"%> tag.
+    <br />
+    <br />
+    <small>This text is using the <%="<small>"%> tag.</small>
+    <br />
+    <br />
+    <u>This text is using the <%="<u>"%> tag.</u>
+    <br />
+<% end %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Detail } from '../..'
+
+const DetailStyled = (props) => (
+  <>
+    <Detail {...props}>
+      <b>{"This text is using the <b> tag."}</b>
+      <br />
+      <br />
+      <strong>{"This text is using the <strong> tag."}</strong>
+      <br />
+      <br />
+      <a>{"This text is using the <a> tag."}</a>
+      <br />
+      <br />
+      <i>{"This text is using the <i> tag."}</i>
+      <br />
+      <br />
+      {"This "}<em>{"word"}</em>{" is using an <em> tag."}
+      <br />
+      <br />
+      <small>{"This text is using the <small> tag."}</small>
+      <br />
+      <br />
+      <u>{"This text is using the <u> tag."}</u>
+      <br />
+      <br />
+    </Detail>
+  </>
+)
+
+export default DetailStyled

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

@@ -0,0 +1,11 @@
+examples:
+
+  rails:
+  - detail_default: Default
+  - detail_colors: Colors
+  - detail_bold: Bold
+
+  react:
+  - detail_default: Default
+  - detail_colors: Colors
+  - detail_bold: Bold

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

@@ -0,0 +1,4 @@
+export { default as DetailDefault } from './_detail_default.jsx'
+export { default as DetailColors } from './_detail_colors.jsx'
+export { default as DetailStyled } from './_detail_styled.jsx'
+export { default as DetailBold } from './_detail_bold.jsx'

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -1,20 +1,21 @@
 <% example_html = ERB.new(example).result %>
 
 <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
-  <div class="pb--kit-example">
-    <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
-    <br />
-    <%= example %>
-    <br>
-  </div>
-  
-  <% if (action_name == "kit_show_swift") %>
-    <div class="pb--kit-example-markdown pt_none <%= dark ? "dark" : "" %>">
+  <% unless (action_name == "kit_show_swift") %>
+    <div class="pb--kit-example">
+      <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
+      <br />
+      <%= example %>
+      <br>
+    </div>
+  <% else %>
+    <div class="pb--kit-example-markdown pt_none markdown <%= dark ? "dark" : "" %>">
+      <%= pb_rails("caption", props: { text: example_title, dark: dark, margin_top: "md" }) %>
       <%= render_markdown(description) %>
     </div>
   <% end %>
   <% if show_code %>
-    <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
+    <div class="markdown pb--kit-example-markdown markdown <%= dark ? "dark" : "" %>">
       <%= render_markdown(description) %>
     </div>
     <div id="code-wrapper">
@@ -32,10 +33,10 @@
       </div>
       <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
         <%= pb_rails("section_separator", props: { dark: dark })%>
-        <a href="#" style="padding: 16px 0px 22px 0px;" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
-          <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy" }) %>
+        <a href="#" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
+          <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy", padding_x: "xs" }) %>
         </a>
-        <pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
+        <pre class="highlight"><%= raw render_code(source, highlighter) %></pre>
       </div>
         <%= pb_rails("popover", props: {
           trigger_element_id: "copy-button-#{example_key}",

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -10,7 +10,7 @@ type FormPillProps = {
   className?: string,
   id?: string,
   text: string,
-  name: string,
+  name?: string,
   onClick?: React.MouseEventHandler<HTMLSpanElement>,
   avatar?: boolean,
   avatarUrl?: string,
@@ -25,6 +25,7 @@ type FormPillProps = {
 const FormPill = (props: FormPillProps) => {
   const {
     className,
+    id,
     text,
     name,
     onClick = () => {},
@@ -41,7 +42,7 @@ const FormPill = (props: FormPillProps) => {
     textTransform,
   )
   return (
-    <div className={css}>
+    <div className={css} id={id}>
         {name &&
         <>
         <Avatar

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

@@ -0,0 +1,212 @@
+//function for unchecking items in formattedData
+export const unCheckIt = (
+  formattedData: { [key: string]: any }[],
+  id: string
+) => {
+  formattedData.map((item: { [key: string]: any }) => {
+    if (item.id === id && item.checked) {
+      item.checked = false;
+    }
+    if (item.children && item.children.length > 0) {
+      unCheckIt(item.children, id);
+    }
+    return item;
+  });
+};
+
+//function to retrieve all ancestors of unchecked item and set checked to false
+export const getAncestorsOfUnchecked = (
+  formattedData: { [key: string]: any }[],
+  item: { [key: string]: any }
+) => {
+  if (item.parent_id) {
+    const ancestors = filterFormattedDataById(formattedData, item.parent_id);
+    ancestors[0].checked = false;
+
+    if (ancestors[0].parent_id) {
+      getAncestorsOfUnchecked(formattedData, ancestors[0]);
+    }
+  }
+};
+
+//recursively check all child and grandchild items if parent checked
+export const checkedRecursive = (item: { [key: string]: any }) => {
+  if (!item.checked) {
+    item.checked = true;
+  }
+  if (item.children && item.children.length > 0) {
+    item.children.forEach((childItem: { [key: string]: any }) => {
+      checkedRecursive(childItem);
+    });
+  }
+};
+
+//recursively uncheck all child and grandchild items if parent unchecked
+export const unCheckedRecursive = (item: { [key: string]: any }) => {
+  if (item.checked) {
+    item.checked = false;
+  }
+  if (item.children && item.children.length > 0) {
+    item.children.forEach((childItem: { [key: string]: any }) => {
+      unCheckedRecursive(childItem);
+    });
+  }
+};
+
+//function is going over formattedData and returning all objects that match the
+//id of the clicked item from the dropdown
+export const filterFormattedDataById = (
+  formattedData: { [key: string]: any }[],
+  id: string
+) => {
+  const matched: { [key: string]: any }[] = [];
+  const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
+    for (const item of data) {
+      if (item.id.toLowerCase() === (term.toLowerCase())) {
+        matched.push(item);
+      }
+
+      if (item.children && item.children.length > 0) {
+        recursiveSearch(item.children, term);
+      }
+    }
+  };
+
+  recursiveSearch(formattedData, id);
+  return matched;
+};
+
+export const findByFilter = (
+  formattedData: { [key: string]: any }[],
+  searchTerm: string
+) => {
+  const matchedItems: { [key: string]: any }[] = [];
+  const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
+    for (const item of data) {
+      if (item.label.toLowerCase().includes(term.toLowerCase())) {
+        matchedItems.push(item);
+      }
+
+      if (item.children) {
+        recursiveSearch(item.children, term);
+      }
+    }
+  };
+
+  recursiveSearch(formattedData, searchTerm);
+  return matchedItems;
+};
+
+//function to get all items with checked = true
+export const getCheckedItems = (
+  data: { [key: string]: any }[]
+): { [key: string]: any }[] => {
+  const checkedItems: { [key: string]: any }[] = [];
+  if (!Array.isArray(data)) {
+    return;
+  }
+  data.forEach((item: { [key: string]: any }) => {
+    if (item.checked) {
+      checkedItems.push(item);
+    }
+    if (item.children && item.children.length > 0) {
+      const childCheckedItems = getCheckedItems(item.children);
+      checkedItems.push(...childCheckedItems);
+    }
+  });
+  return checkedItems;
+};
+
+export const getChildIds = (
+  item: { [key: string]: any },
+  defaultArray: { [key: string]: any }[]
+) => {
+  let childIds: string[] = [];
+  item.children.forEach((child: { [key: string]: any }) => {
+    childIds.push(child.id);
+    if (child.children && child.children.length > 0) {
+      const childChildIds = getChildIds(child, defaultArray);
+      childIds.push(...childChildIds);
+    }
+  });
+  return childIds;
+};
+
+export const updateReturnItems = (newChecked: { [key: string]: any }[]) => {
+  const updatedCheckedItems: { [key: string]: any }[] = [];
+  for (const item of newChecked) {
+    if (item.children && item.children.length > 0) {
+      const allChildrenChecked = item.children.every(
+        (child: { [key: string]: any }) => child.checked
+      );
+      if (allChildrenChecked) {
+        updatedCheckedItems.push(item);
+      }
+    }
+    const childItem = updatedCheckedItems.some((x) => x.id === item?.parent_id);
+    if (!childItem) {
+      updatedCheckedItems.push(item);
+    }
+  }
+  const filteredReturn = updatedCheckedItems.filter((item) => {
+    return !updatedCheckedItems.find(
+      (otherItem) => otherItem.id === item.parent_id
+    );
+  });
+  return filteredReturn;
+};
+
+export const recursiveReturnOnlyParent = (
+  items: { [key: string]: any },
+  formattedData: { [key: string]: any }[],
+  defaultReturn: { [key: string]: any }[],
+  setDefaultReturn: any
+) => {
+  const parent = filterFormattedDataById(formattedData, items.parent_id);
+  const allChildrenChecked = parent[0].children.every(
+    (child: { [key: string]: any }) => child.checked
+  );
+  if (allChildrenChecked) {
+    // Only return the parent and remove its children from defaultReturn
+    parent[0].checked = true;
+    const filteredDefaultReturn = defaultReturn.filter((item) => {
+      // Remove children of the specific parent
+      if (
+        parent[0].children.find(
+          (child: { [key: string]: any }) => child.id === item.id
+        )
+      ) {
+        return false;
+      }
+    });
+    setDefaultReturn([...filteredDefaultReturn, parent[0]]);
+    // Check if the parent has a parent and its children are all checked
+    const parentHasParent = parent[0].parent_id !== null;
+    if (parentHasParent) {
+      recursiveReturnOnlyParent(
+        parent[0],
+        formattedData,
+        filteredDefaultReturn,
+        setDefaultReturn
+      );
+    }
+  } else {
+    const checkedChildren = parent[0].children.filter(
+      (child: { [key: string]: any }) => child.checked
+    );
+    const updatedDefaultReturn = [...defaultReturn, ...checkedChildren];
+    setDefaultReturn(updatedDefaultReturn);
+  }
+};
+
+export const removeChildrenIfParentChecked = (
+  items: { [key: string]: any },
+  defaultReturn: { [key: string]: any }[],
+  setDefaultReturn: any
+) => {
+  const childIds = getChildIds(items, defaultReturn);
+  const filteredDefaultArray = defaultReturn.filter(
+    (item: { [key: string]: any }) => childIds !== item.id
+  );
+  setDefaultReturn([...filteredDefaultArray, items]);
+};

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

@@ -5,123 +5,83 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 @import "../tokens/line_height";
+@import "../tokens/positioning";
 
 .pb_multi_level_select {
   font-family: $font-family-base;
 
-  .search {
-    font-family: $font-family-base;
-  }
+  .wrapper {
+    position: relative;
 
-  .dropdown {
-    width: 100%;
-    .search {
-      border-bottom: none;
+    .toggle_icon {
+      visibility: hidden;
+      .pb_button_content {
+        visibility: hidden !important;
+      }
     }
 
-    .toggle {
-      padding: 0px $space_xs + 1;
-    }
-    .node.tree {
+    .input_wrapper {
+      background-color: $white;
+      cursor: pointer;
+      padding: $space_xs + 4 $space_sm;
+      border: 1px solid #e4e8f0;
+      border-radius: $border_rad_heavier;
       display: flex;
       align-items: center;
-    }
-
-    .node-label {
-      line-height: $lh_tight;
-      color: $text_lt_default;
-      font-size: $text_default;
-      font-weight: $regular;
-      font-family: $font-family-base;
-    }
-
-    .checkbox-item {
-      height: $space_sm;
-      width: $space_sm;
-    }
-
-    .toggle.expanded:after {
-      border-style: solid;
-      border-width: 0.1em 0.1em 0 0;
-      content: "";
-      display: inline-block;
-      height: 0.8em;
-      position: relative;
-      vertical-align: top;
-      width: 0.8em;
-      top: 7px;
-      transform: rotate(135deg);
-      font-size: 0.5em;
-    }
-    .toggle.expanded:hover {
-      background-color: rgba(0, 86, 207, 0.1);
-      border-radius: $border_radius_rounded;
-      &::after {
-        color: $primary;
+      justify-content: space-between;
+      .input_inner_container {
+        max-width: 90%;
       }
-    }
-    .toggle.collapsed:after {
-      border-style: solid;
-      border-width: 0.1em 0.1em 0 0;
-      content: "";
-      display: inline-block;
-      height: 0.8em;
-      right: 0.1em;
-      position: relative;
-      vertical-align: top;
-      width: 0.8em;
-      top: 7px;
-      font-size: 0.5em;
-      transform: rotate(45deg);
-      top: 9px;
-    }
 
-    .toggle.collapsed:hover {
-      background-color: rgba(0, 86, 207, 0.1);
-      border-radius: $border_radius_rounded;
-      &::after {
-        color: $primary;
+      input {
+        border: none;
+        font-family: $font_family_base;
+        padding: $space_xs;
+        &:focus {
+          outline: none;
+        }
       }
     }
+  }
+  .dropdown_menu {
+    position: absolute;
+    z-index: $z_1;
+    width: 100%;
+    background-color: $white;
+    padding: $space_sm $space_sm $space_sm 0;
+    border-radius: $border_rad_heavier;
+    border: 1px solid #e4e8f0;
+    max-height: 600px;
+    overflow: auto;
 
-    .tag {
-      height: fit-content;
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      padding: $space_xxs $space_xxs $space_xxs $space_xs;
-      border-radius: $border_radius_xl + 2;
-      background-color: rgba($primary, 0.1);
-      color: $primary;
-      border: none;
-      font-size: $font_smaller;
-      font-weight: $bolder;
+    ul {
+      padding: 0px !important;
+    }
 
-      .tag-remove {
-        color: $primary;
-        padding-left: $space_xs;
-        padding-right: $space_xxs;
+    .dropdown_item {
+      list-style: none;
+      padding-left: 20px;
+      .dropdown_item_checkbox_row {
+        display: flex;
+        align-items: center;
+        .pb_checkbox_kit {
+          align-items: center;
+        }
+        .pb_button_kit_link_inline_enabled {
+          color: $charcoal;
+          &:hover {
+            color: $primary;
+          }
+        }
       }
     }
   }
-  .react-dropdown-tree-select .dropdown .dropdown-trigger {
-    width: 100%;
-    @include pb_textarea_light;
-  }
-  .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.bottom:after {
-    content: none;
-  }
-  .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.top:after {
-    content: none;
-  }
 
-  .react-dropdown-tree-select .dropdown .dropdown-content {
-    width: 100%;
-    border: 1px solid $border_light;
-    border-radius: $border_rad_heavier;
-    box-shadow: $shadow_deeper;
+  .close {
+    display: none;
   }
-  .node.leaf.collapsed {
-    display: block !important;
+
+  .open {
+    display: block;
   }
 }