playbook_ui 12.25.0.pre.alpha.PLAY733DetailKit761 → 12.25.0.pre.alpha.PLAY818multilevelrebuild770

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.25.0"
-  VERSION = "12.25.0.pre.alpha.PLAY733DetailKit761"
+  VERSION = "12.25.0.pre.alpha.PLAY818multilevelrebuild770"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.25.0.pre.alpha.PLAY733DetailKit761
+  version: 12.25.0.pre.alpha.PLAY818multilevelrebuild770
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-06-13 00:00:00.000000000 Z
+date: 2023-06-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -823,22 +823,6 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md
 - 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_detail/_detail.scss
-- app/pb_kits/playbook/pb_detail/_detail.tsx
-- app/pb_kits/playbook/pb_detail/_detail_mixins.scss
-- app/pb_kits/playbook/pb_detail/detail.html.erb
-- app/pb_kits/playbook/pb_detail/detail.rb
-- app/pb_kits/playbook/pb_detail/detail.test.jsx
-- app/pb_kits/playbook/pb_detail/docs/_description.md
-- app/pb_kits/playbook/pb_detail/docs/_detail_bolded.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_bolded.jsx
-- app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx
-- app/pb_kits/playbook/pb_detail/docs/_detail_default.md
-- app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx
-- app/pb_kits/playbook/pb_detail/docs/example.yml
-- app/pb_kits/playbook/pb_detail/docs/index.js
 - app/pb_kits/playbook/pb_dialog/_close_icon.tsx
 - app/pb_kits/playbook/pb_dialog/_dialog.scss
 - app/pb_kits/playbook/pb_dialog/_dialog.tsx
@@ -1423,9 +1407,9 @@ files:
 - app/pb_kits/playbook/pb_message/message.html.erb
 - app/pb_kits/playbook/pb_message/message.rb
 - app/pb_kits/playbook/pb_message/message.test.js
+- app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx
 - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
 - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
-- app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
@@ -1434,7 +1418,6 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
 - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
-- app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

data/app/pb_kits/playbook/pb_detail/_detail.scss

@@ -1,44 +0,0 @@
-@import "./detail_mixins";
-@import "../tokens/titles";
-@import "../tokens/typography";
-
-[class^=pb_detail_kit]{
-  @include pb_detail;
-
-  @each $color_name, $color_value in $pb_detail_colors {
-    &[class*=_#{$color_name}] {
-      @include pb_detail($color_value);
-    }
-  }
-
-  @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
-    &[class*=_#{$dark_color_name}][class*=dark]{
-      @include pb_detail($dark_color_value)
-    }
-  }
-
-  // Styles
-  b, strong {
-    @include pb_title_4;
-    color: inherit;
-    font-size: $text_small;
-    font-weight: $bold;
-  }
-
-  a {
-    color: $primary;
-    &:hover {
-      cursor: pointer;
-      color: $text_lt_default;
-    }
-  }
-
-  em {
-    font-weight: $bold;
-  }
-
-  small {
-    font-size: $font_smaller;
-    letter-spacing: $lspace_loose;
-  }
-}

data/app/pb_kits/playbook/pb_detail/_detail.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
-
-type DetailProps = {
-  aria?: { [key: string]: string },
-  children?: React.ReactChild[] | React.ReactChild,
-  className?: string,
-  color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
-  dark?: boolean,
-  data?: { [key: string]: string },
-  id?: string,
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
-  text?: string,
-} & GlobalProps
-
-const Detail = (props: DetailProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    color = 'light',
-    data = {},
-    id = '',
-    tag = 'div',
-    text= ''
-  } = props
-
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
-  const dataProps: {[key: string]: any} = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_detail_kit', color),
-    globalProps(props),
-    className
-  )
-  const Tag: React.ReactElement | any = `${tag}`
-
-  return (
-    <Tag
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {text || children}
-    </Tag>
-  )
-}
-
-export default Detail

data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss

@@ -1,29 +0,0 @@
-@import "../tokens/colors";
-@import "../tokens/line_height";
-@import "../tokens/typography";
-
-$pb_detail_colors: (
-  light:          $text_lt_light,
-  default:        $text_lt_default,
-  lighter:        $text_lt_lighter,
-  link:           $primary,
-  error:          $error,
-  success:        $text_lt_success_sm,
-);
-
-$pb_dark_detail_colors: (
-  light:          $text_dk_light,
-  default:        $text_dk_default,
-  lighter:        $text_dk_lighter,
-  link:           $primary,
-  error:          $error_dark,
-  success:        $text_dk_success_sm,
-);
-
-@mixin pb_detail($color: $text_lt_light) {
-  line-height: $lh_tight;
-  color: $color;
-  font-size: $text_small;
-  font-weight: $regular;
-  font-family: $font-family-base;
-}

data/app/pb_kits/playbook/pb_detail/detail.html.erb

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

data/app/pb_kits/playbook/pb_detail/detail.rb

@@ -1,23 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDetail
-    class Detail < ::Playbook::KitBase
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[light default lighter link error success],
-                   default: "light"
-      prop :tag, type: Playbook::Props::Enum,
-                 values: %w[h1 h2 h3 h4 h5 h6 p span div],
-                 default: "div"
-      prop :text
-
-      def classname
-        generate_classname("pb_detail_kit", color)
-      end
-
-      def content
-        super.presence || text
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_detail/detail.test.jsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import Detail from './_detail'
-
-test('returns namespaced class name', () => {
-  render(
-    <Detail
-        data={{ testid: 'primary-test' }}
-        text="Test colors"
-    />
-  )
-
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_detail_kit_light')
-})
-
-test('with colors', () => {
-  ['light', 'default', 'lighter', 'link', 'success', 'error'].forEach((color) => {
-    const testId = `colors-test-${color}`
-
-    render(
-      <Detail
-          color={color}
-          data={{ testid: testId }}
-          text="Test colors"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`pb_detail_kit_${color}`)
-  })
-})

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

@@ -1 +0,0 @@
-Used for tables or designs with large amounts of data or text. This kit's font size is smaller than the `Body` kit and larger than the Caption's kit `subcaption` variant.

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

@@ -1,33 +0,0 @@
-<%= pb_rails("detail") do %>
-  <b>I am a bolded detail kit (Default)</b>
-<% end %>
-
-<%= pb_rails("detail", props: {
-  color: "default"
-}) do %>
-  <b>I am a bolded detail kit (Default as a color)</b>
-<% end %>
-
-<%= pb_rails("detail", props: {
-  color: "lighter"
-}) do %>
-  <b>I am a bolded detail kit (lighter)</b>
-<% end %>
-
-<%= pb_rails("detail", props: {
-  color: "link"
-}) do %>
-  <b>I am a bolded detail kit (link)</b>
-<% end %>
-
-<%= pb_rails("detail", props: {
-  color: "error"
-}) do %>
-  <b>I am a bolded detail kit (Error)</b>
-<% end %>
-
-<%= pb_rails("detail", props: {
-  color: "success"
-}) do %>
-  <b>I am a bolded detail kit (Success)</b>
-<% end %>

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

@@ -1,47 +0,0 @@
-import React from 'react'
-import { Detail } from '../..'
-
-const DetailBolded = (props) => (
-  <div>
-    <Detail {...props}>
-      <b>{"I am a bolded detail kit (Default)"}</b>
-    </Detail>
-
-    <Detail
-        color="default"
-        {...props}
-    >
-      <b>{"I am a bolded detail kit (Default as a color)"}</b>
-    </Detail>
-
-    <Detail
-        color="lighter"
-        {...props}
-    >
-      <b>{"I am a bolded detail kit (Lighter)"}</b>
-    </Detail>
-
-    <Detail
-        color="link"
-        {...props}
-    >
-      <b>{"I am a bolded detail kit (Link)"}</b>
-    </Detail>
-
-    <Detail
-        color="error"
-        {...props}
-    >
-      <b>{"I am a bolded detail kit (Error)"}</b>
-    </Detail>
-
-    <Detail
-        color="success"
-        {...props}
-    >
-      <b>{"I am a bolded detail kit (Success)"}</b>
-    </Detail>
-  </div>
-)
-
-export default DetailBolded

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

@@ -1,28 +0,0 @@
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit (Default)"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit (Default as a color)",
-  color: "default"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit (Lighter)",
-  color: "lighter"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit (Link)",
-  color: "link"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit (Error)",
-  color: "error"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit (Success)",
-  color: "success"
-}) %>

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

@@ -1,43 +0,0 @@
-import React from 'react'
-import { Detail } from '../../'
-
-const DetailDefault = (props) => (
-  <div>
-    <Detail
-        text="I am a detail kit (Default)"
-        {...props}
-    />
-
-    <Detail
-        color="default"
-        text="I am a detail kit (Default as a color)"
-        {...props}
-    />
-
-    <Detail
-        color="lighter"
-        text="I am a detail kit (Lighter)"
-        {...props}
-    />
-
-    <Detail
-        color="link"
-        text="I am a detail kit (Link)"
-        {...props}
-    />
-
-    <Detail
-        color="error"
-        text="I am a detail kit (Error)"
-        {...props}
-    />
-
-    <Detail
-        color="success"
-        text="I am a detail kit (Success)"
-        {...props}
-    />
-  </div>
-)
-
-export default DetailDefault

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

@@ -1,6 +0,0 @@
-##### 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_styled.html.erb

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

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

@@ -1,11 +0,0 @@
-examples:
-
-  rails:
-  - detail_default: Variants
-  - detail_styled: Styled
-  - detail_bolded: Bolded
-
-  react:
-  - detail_default: Variants
-  - detail_styled: Styled
-  - detail_bolded: Bolded

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

@@ -1,3 +0,0 @@
-export { default as DetailDefault } from './_detail_default.jsx'
-export { default as DetailStyled } from './_detail_styled.jsx'
-export { default as DetailBolded } from './_detail_bolded.jsx'

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

@@ -1,31 +0,0 @@
-import React from "react"
-import DropdownTreeSelect from "react-dropdown-tree-select"
-import "react-dropdown-tree-select/dist/styles.css"
-
-type HelperProps = {
-  id?: string
-  treeData?: { [key: string]: string }[]
-  treeMode?: boolean
-  onChange?:  any
-
-}
-
-const MultiSelectHelper = (props: HelperProps) => {
-  const { id, treeData, onChange, treeMode } = props
-
-
-  return (
-      <DropdownTreeSelect
-        data={treeData}
-        id={id}
-        keepOpenOnSelect
-        keepTreeOnSearch
-        keepChildrenOnSearch
-        onChange={onChange}
-        texts={{ placeholder: "Select..." }}
-        mode={treeMode ? 'hierarchical' : 'multiSelect'}
-      />
-  )
-}
-
-export default MultiSelectHelper

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

@@ -1,87 +0,0 @@
-export const findItemById = (
-  items: { [key: string]: any }[],
-  id: string
-): any => {
-  for (const item of items) {
-    if (item.id === id) {
-      return item;
-    }
-    if (item.children) {
-      const found = findItemById(item.children, id);
-      if (found) {
-        return found;
-      }
-    }
-  }
-  return null;
-};
-
-export const checkIt = (
-  foundItem: { [key: string]: any },
-  selectedItems: any[],
-  setSelectedItems: Function,
-  expand: boolean
-) => {
-  if (!foundItem) {
-    return;
-  }
-
-  foundItem.checked = true;
-  foundItem.expanded = expand;
-  selectedItems.push(foundItem);
-
-  if (foundItem.children) {
-    foundItem.children.map((x: any) => {
-      checkIt(x, selectedItems, setSelectedItems, expand);
-    });
-  }
-
-  setSelectedItems([...selectedItems]);
-};
-
-export const unCheckIt = (
-  foundItem: { [key: string]: any },
-  selectedItems: 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, 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;
-}