playbook_ui 12.30.0 → 12.30.1.pre.alpha.PLAY906multilevelselectedidsprop912

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d215ecced629f21c640d52daeda126edd0623b0ad55a2f78cd58f52d4dfc613b
-  data.tar.gz: ffc8e4e880ba0869a6c333c0ccea0a2a18cd4191f0209b46648c596f344c6fcd
+  metadata.gz: 5bb99bff289e00a7d9a4304de6118e54be2349a7d705bd69f07307940b277db5
+  data.tar.gz: 34b932013c8f26a6c25afe95e725fc4bac6f62b323e49e134ab0020a312107f6
 SHA512:
-  metadata.gz: 9cab339a471129485cdc0a108c27c018c1a2722909eaa0b25481280a4618412062a61f4e97adb6b5fdbba8f30b51085cc31df7edb0e001c0f24888380ec36dd1
-  data.tar.gz: 44bf67969554b8e0018531377fbca883022262b0da0148929f47bacbee1106aaef8a156114d7ab46fab82915d22c9c7ba4d79713742feb195442988fe92b0c2a
+  metadata.gz: 245aac90b727280ef79d58a04569cc93f559d09b5ad2bd1350260c1eea9c4b02030de75e6ec7ff9a7d6751006c0c32bb7be946bc1ad813032d00a5ced8e240e0
+  data.tar.gz: af04cb501838d28a314d6de419fd6a5ca7782ce2f0973f80ba24ca048d82fdbad61041c56d43783f38ec1f77a6b7a56fd5b09eff85528ddab775557d6a0f2a9f

data/app/pb_kits/playbook/pb_label_value/label_value.test.js

@@ -103,7 +103,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const activeProp = kit.querySelector(".pb_title_kit_link")
+        const activeProp = kit.querySelector(".pb_title_kit_size_4_link")
         expect(activeProp).toBeInTheDocument()
     })
 })

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

@@ -28,6 +28,7 @@ type MultiLevelSelectProps = {
   returnAllSelected?: boolean
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
+  selectedIds?: string[]
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -41,6 +42,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     returnAllSelected = false,
     treeData,
     onSelect = () => {},
+    selectedIds
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -70,8 +72,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
 
   useEffect(() => {
-    setFormattedData(addCheckedAndParentProperty(treeData))
-  }, [treeData])
+    setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
+  }, [treeData, selectedIds])
 
   useEffect(() => {
     if (returnAllSelected) {
@@ -160,6 +162,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
+    selectedIds: string[],
     parent_id: string = null,
     depth: number = 0,
   ) => {
@@ -169,6 +172,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
+        checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
         parent_id,
         depth,
       }
@@ -179,6 +183,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
             : item.children
         newItem.children = addCheckedAndParentProperty(
           children,
+          selectedIds,
           newItem.id,
           depth + 1
         )

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,6 +1,5 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
-@import "../tokens/screen_sizes";
 @import './title_mixin';
 
 [class^=pb_title_kit]{
@@ -34,21 +33,4 @@
   &[class*=_thin] {
     @include pb_title_thin;
   }
-
-  @each $size, $size_value in $breakpoints_grid {
-    @each $title_size_value in [1, 2, 3, 4] {
-        $min_size: map-get($size_value, "min");
-        $max_size: map-get($size_value, "max");
-        &[class*=_#{$size}_#{$title_size_value}] {
-          @include break_on($min_size, $max_size) {
-            @if $title_size_value == 1 { @include pb_title_1; }
-            @else if $title_size_value == 2 { @include pb_title_2; }
-            @else if $title_size_value == 3 { @include pb_title_3; }
-            @else if $title_size_value == 4 { @include pb_title_4; }
-            @include title_colors;
-            @if $title_size_value != 4 { @include pb_title_bold; }
-          }
-        }
-    }
-  }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -3,9 +3,6 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
-type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
-type SizeResponsiveType = {[key: string]: SizeType}
-
 type TitleProps = {
   aria?: {[key: string]: string},
   bold?: boolean,
@@ -14,7 +11,7 @@ type TitleProps = {
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
   id?: string,
-  size?: SizeType | SizeResponsiveType,
+  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -39,25 +36,9 @@ const Title = (props: TitleProps): React.ReactElement => {
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const getBold = bold ? '' : 'thin'
-
-  const generateSizeClasses = () => {
-    let css = ''
-    
-    if (typeof size == "number" || typeof size == "string") {
-      css += `pb_title_kit_size_${size} `
-    } else {
-      Object.entries(size).forEach((sizeObj) => {
-        css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
-      })
-    }
-
-    return css.trim()
-  }
-
   const classes = classnames(
-    buildCss('pb_title_kit', variant, color, getBold),
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
-    generateSizeClasses(),
     className
   )
   const Tag: React.ReactElement | any = `${tag}`

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

@@ -3,10 +3,8 @@ examples:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
-  - title_responsive: Responsive
 
   react:
   - title_default: Default UI
   - title_light_weight: Light Weight UI
   - title_colors: Colors
-  - title_responsive: Responsive

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

@@ -1,4 +1,3 @@
 export { default as TitleDefault } from './_title_default.jsx'
 export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
-export { default as TitleResponsive } from './_title_responsive.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -6,7 +6,9 @@ module Playbook
       prop :color, type: Playbook::Props::Enum,
                    values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
-      prop :size, default: 3
+      prop :size, type: Playbook::Props::Enum,
+                  values: [1, 2, 3, 4],
+                  default: 3
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
@@ -18,27 +20,12 @@ module Playbook
       prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        title_class = generate_classname("pb_title_kit", variant, color, is_bold)
-        title_class + generate_size_classname
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
       end
 
       def is_bold
         bold ? nil : "thin"
       end
-
-      def generate_size_classname
-        responsive = try(:size).is_a?(::Hash)
-        css = ""
-        if responsive
-          size.each do |key, value|
-            css += " pb_title_kit_#{key}_#{value}"
-          end
-        else
-          css += " pb_title_kit_size_#{size}"
-        end
-
-        css unless css.blank?
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -25,7 +25,7 @@ test('with thin font weight', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
 })
 
 test('with colors', () => {
@@ -38,5 +38,5 @@ test('with colors', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_success')
+  expect(kit).toHaveClass('pb_title_kit_size_3_success')
 })