playbook_ui 12.25.0.pre.alpha.railsmultilevelimprovements776 → 12.25.0.pre.alpha.railsmultilevelimprovements785

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aaefeb2f6dee2aa2ca4a688e1cfb3d4d98892380b6392085bbc1d568d95ba06e
-  data.tar.gz: 8aff944c3691bdbf150827da3bb977f161178a0e5175d51d3699966bb31d799a
+  metadata.gz: dbd58f8ab04fa69f87a55fd4848a36f53ffb67ff249bf9bd8d09b199fb7e51b8
+  data.tar.gz: e3bc97d4d4035db97049bfe7d64424d0887061cba7772db8091a55c884be2ba1
 SHA512:
-  metadata.gz: e83ef28c4e79c7be64c9fe4c1d8f24ef39f7f39facb0de7c578f7774b2b347754f1e17b1b5fd59dfd5946daa4b6d73d0e782cefad19626ce9ef1a4dfe5a27f77
-  data.tar.gz: 040f3d9438b9689d8b616e48bef5bf07d047662afcd0d5f42272b16c05a79dbb3f0f645e78191a0f8c89865923e7df436f27f2fd0013e5d52ea5dd1314140587
+  metadata.gz: e8cf7aeadcc735afeb4697b378ee93d56c2220f26b37c808d106dd432bd5ae5220ba251a400fb551c32ae79b5f351a550e435c320d72367b512abf907eeb3512
+  data.tar.gz: 2a4461c2be7dbcc118fb7bb786ba6970dca3f669bce9256fb4337db9e775ba1c4710340c284742fd3e8218424eaff772b7b99e4b7446ca33d1f45e87ede5539c

data/app/pb_kits/playbook/_playbook.scss

@@ -5,6 +5,7 @@
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';
 @import 'pb_card/card';
+@import 'pb_detail/detail';
 @import 'pb_title/title';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';

data/app/pb_kits/playbook/index.js

@@ -31,6 +31,7 @@ export { default as DateStacked } from './pb_date_stacked/_date_stacked'
 export { default as DateTime } from './pb_date_time/_date_time'
 export { default as DateTimeStacked } from './pb_date_time_stacked/_date_time_stacked'
 export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_stacked'
+export { default as Detail} from './pb_detail/_detail'
 export { default as Dialog } from './pb_dialog/_dialog'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
 export { default as FileUpload } from './pb_file_upload/_file_upload'

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

@@ -0,0 +1,44 @@
+@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
+  &.bold,
+  &.bold.dark,
+  b,
+  strong {
+    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

@@ -0,0 +1,55 @@
+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 },
+  bold?: boolean,
+  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 = {},
+    bold = false,
+    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 isBold = bold ? "bold" : null
+  const classes = classnames(
+    buildCss('pb_detail_kit', color),
+    isBold,
+    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

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

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDetail
+    class Detail < Playbook::KitBase
+      prop :bold, type: Playbook::Props::Boolean,
+                  default: false
+      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) + is_bold
+      end
+
+      def content
+        super.presence || text
+      end
+
+    private
+
+      def is_bold
+        bold ? " bold" : ""
+      end
+    end
+  end
+end

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

@@ -0,0 +1,46 @@
+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 class name"
+    />
+  )
+
+  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}`)
+  })
+})
+
+test('bold font-weight should be 600', () => {
+  render(
+    <Detail
+        bold
+        data={{ testid: 'primary-test' }}
+        text="Test bold prop"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass("bold")
+})

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

@@ -0,0 +1 @@
+Used for tables or designs with large amounts of data or text.

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

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

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_multi_level_select/_helper_functions.tsx

@@ -62,7 +62,7 @@ export const filterFormattedDataById = (
   const matched: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
-      if (item.id.toLowerCase().includes(term.toLowerCase())) {
+      if (item.id.toLowerCase() === (term.toLowerCase())) {
         matched.push(item);
       }
 
@@ -206,7 +206,7 @@ export const removeChildrenIfParentChecked = (
 ) => {
   const childIds = getChildIds(items, defaultReturn);
   const filteredDefaultArray = defaultReturn.filter(
-    (item: { [key: string]: any }) => !childIds.includes(item.id)
+    (item: { [key: string]: any }) => childIds !== item.id
   );
   setDefaultReturn([...filteredDefaultArray, items]);
 };

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

@@ -75,6 +75,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         JSON.stringify(returnAllSelected ? returnedArray : defaultReturn)
       );
     }
+    
+    const updateHiddenInputValue = (value: any) => {
+      console.log("value", value)
+      const hiddenInput = document.querySelector(
+        "input#" + id
+      ) as HTMLInputElement
+      console.log("hiddenInput", hiddenInput)
+      if (hiddenInput) {
+        hiddenInput.value = JSON.stringify(value)
+      }
+    }
+
     updateHiddenInputValue(returnAllSelected ? returnedArray : defaultReturn);
     returnAllSelected
       ? onSelect(returnedArray)
@@ -86,15 +98,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         );
   }, [returnedArray, defaultReturn]);
 
-
-
-  const updateHiddenInputValue = (value: any) => {
-    const hiddenInput = document.querySelector('input#'+id)  as HTMLInputElement;
-    if (hiddenInput) {
-      hiddenInput.value = JSON.stringify(value);
-    }
-  };
-
   useEffect(() => {
     //Create new formattedData array for use
     setFormattedData(addCheckedAndParentProperty(treeData));
@@ -117,7 +120,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     };
   }, []);
 
-
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
@@ -346,7 +348,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       <div ref={dropdownRef} className="wrapper">
         <div className="input_wrapper" onClick={handleInputWrapperClick}>
           <div className="input_inner_container">
-          <input type="hidden" id={id} name={name} value=""  />
+          <input type="hidden" id={id} name={name} value={JSON.stringify(returnAllSelected ? returnedArray : defaultReturn)}  />
             {returnedArray.length !== 0 && returnAllSelected
               ? returnedArray.map((item, index) => (
                   <FormPill

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb

@@ -64,7 +64,6 @@
     ],
   }] %>
 
-
 <%= pb_rails("multi_level_select", props: {
     id: "parent-persistence-multi-level-select",
     tree_data:treeData,

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

@@ -30,6 +30,7 @@ import * as DateStacked from 'pb_date_stacked/docs'
 import * as DateTime from 'pb_date_time/docs'
 import * as DateTimeStacked from 'pb_date_time_stacked/docs'
 import * as DateYearStacked from 'pb_date_year_stacked/docs'
+import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
 import * as FileUpload from 'pb_file_upload/docs'
@@ -130,6 +131,7 @@ WebpackerReact.setup({
   ...DateTime,
   ...DateTimeStacked,
   ...DateYearStacked,
+  ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
   ...FileUpload,

data/dist/menu.yml

@@ -90,6 +90,7 @@ kits:
   - typography:
     - body
     - caption
+    - detail
     - title
   - typography_patterns:
     - contact