playbook_ui 12.30.1.pre.alpha.PLAY802responsivetitlekit909 → 12.30.1.pre.alpha.PLAY906multilevelselectedidsprop916

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 721bb127babde220f239ae7ba3a8fc3bbbff5c8078e6d58ed0fa3cebd33724db
-  data.tar.gz: c896e6c5fae4da4004ef5fa234ae930013d31a68b84f93cb3da36f9e31a1f21c
+  metadata.gz: ae638588fb6c5f4caddfe39199ce1ec6da73b976d14f8881c23f246054124bd7
+  data.tar.gz: 8ca4ea7f743771b0a000be6aa5efc536c65a36d0d62310f84548b7a371897d38
 SHA512:
-  metadata.gz: 65acd0c7af39e80e7157b87e2544216cce50c8ef582a002912d8f56d7a31ce802a543df41d5a31854649bddad6b9bb1def1d3e8eb088866252d4528d9a0926f5
-  data.tar.gz: d124637fac9f1a5601490420173f81909efcd40f3abeea66f9f2bcb7a1ef97f6211108ebf37cfe3974a6e9f1ed8f2c25cbbe5b1756b59a5ac4ff0ea81e50e813
+  metadata.gz: 5899884bd4f18da1c43e8c4e7d296d0a51f60e22e126fbdcf5102f2bea2dad8a0e53303df41ad4007dc697c016c69efd5e97d42d8569fd43fab33de9b6267a0c
+  data.tar.gz: 4ebaf1f49c55fd8308f2bcda3637c999f00cd2a3242c389c54fd60c073bec3d3e9cf623b48c7f002c93f2234ef964ef611e5b48bc25ce09c4b90bbf4231dd7cd

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_multi_level_select/multi_level_select.rb

@@ -9,6 +9,8 @@ module Playbook
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
+      prop :selected_ids, type: Playbook::Props::Array,
+                          default: []
       prop :input_display, type: Playbook::Props::Enum,
                            values: %w[pills none],
                            default: "pills"
@@ -24,6 +26,7 @@ module Playbook
           name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
+          selectedIds: selected_ids,
         }
       end
     end

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,24 +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 isSizeNumberOrString = typeof size === "number" || typeof size === "string"
-
-  const buildResponsiveSizeCss = () => {
-    let css = ''
-    
-    if (!isSizeNumberOrString) {
-      Object.entries(size).forEach((sizeObj) => {
-        css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
-      })
-    }
-
-    return css.trim()
-  }
-
   const classes = classnames(
-    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
-    buildResponsiveSizeCss(),
     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,31 +20,12 @@ module Playbook
       prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        if is_size_responsive
-          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
-        else
-          generate_classname("pb_title_kit", size, variant, color, is_bold)
-        end
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
       end
 
       def is_bold
         bold ? nil : "thin"
       end
-
-      def is_size_responsive
-        try(:size).is_a?(::Hash)
-      end
-
-      def generate_responsive_size_classname
-        css = ""
-        if is_size_responsive
-          size.each do |key, value|
-            css += " pb_title_kit_#{key}_#{value}"
-          end
-        end
-
-        css unless css.blank?
-      end
     end
   end
 end

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

@@ -4,52 +4,39 @@ import { render, screen } from '../utilities/test-utils'
 import Title from './_title'
 
 test('returns namespaced class name', () => {
-    render(
-        <Title
-            data={{ testid: 'primary-test' }}
-            text="Test colors"
-        />
-    )
-
-    const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit_size_3')
+  render(
+    <Title
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
 test('with thin font weight', () => {
-    render(
-        <Title
-            bold={false}
-            data={{ testid: 'primary-test' }}
-            text="Test thin font weight"
-        />
-    )
-
-    const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+  render(
+    <Title
+        bold={false}
+        data={{ testid: 'primary-test' }}
+        text="Test thin font weight"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
 })
 
 test('with colors', () => {
-    render(
-        <Title
-            color="success"
-            data={{ testid: 'primary-test' }}
-            text="Test colors"
-        />
-    )
-
-    const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit_size_3_success')
-})
-
-test('with responsive title', () => {
-    render(
-        <Title
-            data={{ testid: 'primary-test' }}
-            size={{ xs: "3", sm: "2", md: "1" }}
-            text="Responsive Title"
-        />
-    )
-
-    const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit pb_title_kit_xs_3 pb_title_kit_sm_2 pb_title_kit_md_1')
+  render(
+    <Title
+        color="success"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_size_3_success')
 })