playbook_ui 12.30.1.pre.alpha.PLAY802responsivetitlekit909 → 12.30.1.pre.alpha.PLAY906multilevelselectedidsprop912

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 721bb127babde220f239ae7ba3a8fc3bbbff5c8078e6d58ed0fa3cebd33724db
-  data.tar.gz: c896e6c5fae4da4004ef5fa234ae930013d31a68b84f93cb3da36f9e31a1f21c
+  metadata.gz: 5bb99bff289e00a7d9a4304de6118e54be2349a7d705bd69f07307940b277db5
+  data.tar.gz: 34b932013c8f26a6c25afe95e725fc4bac6f62b323e49e134ab0020a312107f6
 SHA512:
-  metadata.gz: 65acd0c7af39e80e7157b87e2544216cce50c8ef582a002912d8f56d7a31ce802a543df41d5a31854649bddad6b9bb1def1d3e8eb088866252d4528d9a0926f5
-  data.tar.gz: d124637fac9f1a5601490420173f81909efcd40f3abeea66f9f2bcb7a1ef97f6211108ebf37cfe3974a6e9f1ed8f2c25cbbe5b1756b59a5ac4ff0ea81e50e813
+  metadata.gz: 245aac90b727280ef79d58a04569cc93f559d09b5ad2bd1350260c1eea9c4b02030de75e6ec7ff9a7d6751006c0c32bb7be946bc1ad813032d00a5ced8e240e0
+  data.tar.gz: af04cb501838d28a314d6de419fd6a5ca7782ce2f0973f80ba24ca048d82fdbad61041c56d43783f38ec1f77a6b7a56fd5b09eff85528ddab775557d6a0f2a9f

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,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')
 })