playbook_ui 12.30.0.pre.alpha.PLAY906multilevelselectedidsprop902 → 12.30.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8d8c8cd4aa096608acbf4eed675c36c238baa86d159aaefbc0f757084a5a4a4
-  data.tar.gz: 287dd12a2a579011dd57ae22d51ee874b1d3823647e3d95701a201507afb02e7
+  metadata.gz: d215ecced629f21c640d52daeda126edd0623b0ad55a2f78cd58f52d4dfc613b
+  data.tar.gz: ffc8e4e880ba0869a6c333c0ccea0a2a18cd4191f0209b46648c596f344c6fcd
 SHA512:
-  metadata.gz: 18f3b68f512177e50e2146c9018e52535928c142d69f3e54b2c368d7655d1c638c5432d2e23ade2f4de5c41862a349dbf6b8325cd4d7cd9515ea0ea2b242a6fe
-  data.tar.gz: 2a44c4ecbf272b2ae90b49616048b8bbc6f7f641e0741dbdb26cfc92c5dce5b49724611c4b9aacb7f74017c89d1f891d2d54a148279322b80e54d455cb674738
+  metadata.gz: 9cab339a471129485cdc0a108c27c018c1a2722909eaa0b25481280a4618412062a61f4e97adb6b5fdbba8f30b51085cc31df7edb0e001c0f24888380ec36dd1
+  data.tar.gz: 44bf67969554b8e0018531377fbca883022262b0da0148929f47bacbee1106aaef8a156114d7ab46fab82915d22c9c7ba4d79713742feb195442988fe92b0c2a

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_size_4_link")
+        const activeProp = kit.querySelector(".pb_title_kit_link")
         expect(activeProp).toBeInTheDocument()
     })
 })

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

@@ -28,7 +28,6 @@ type MultiLevelSelectProps = {
   returnAllSelected?: boolean
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
-  selectedIds?: string[]
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -42,7 +41,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     returnAllSelected = false,
     treeData,
     onSelect = () => {},
-    selectedIds
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -72,8 +70,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
 
   useEffect(() => {
-    setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
-  }, [treeData, selectedIds])
+    setFormattedData(addCheckedAndParentProperty(treeData))
+  }, [treeData])
 
   useEffect(() => {
     if (returnAllSelected) {
@@ -162,7 +160,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 }[],
-    selectedIds: string[],
     parent_id: string = null,
     depth: number = 0,
   ) => {
@@ -172,7 +169,6 @@ 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,
       }
@@ -183,7 +179,6 @@ 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,8 +9,6 @@ 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"
@@ -26,7 +24,6 @@ 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,5 +1,6 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import "../tokens/screen_sizes";
 @import './title_mixin';
 
 [class^=pb_title_kit]{
@@ -33,4 +34,21 @@
   &[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,6 +3,9 @@ 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,
@@ -11,7 +14,7 @@ type TitleProps = {
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
   id?: string,
-  size?: 1 | 2| 3| 4 | "1" | "2" | "3" | "4",
+  size?: SizeType | SizeResponsiveType,
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -36,9 +39,25 @@ 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', `size_${size}`, variant, color, getBold),
+    buildCss('pb_title_kit', variant, color, getBold),
     globalProps(props),
+    generateSizeClasses(),
     className
   )
   const Tag: React.ReactElement | any = `${tag}`

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("title", props: { text: "Responsive Title", tag: "h1", size: {xs: 3, sm: 2, md: 1} }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Title from '../_title'
+
+const TitleResponsive = (props) => {
+  return (
+    <>
+      <Title
+          size={{xs: "3", sm: "2", md: "1"}}
+          text="Responsive Title"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TitleResponsive

data/app/pb_kits/playbook/pb_title/docs/_title_responsive.md

@@ -0,0 +1 @@
+The `size` prop supports responsive sizes. To use them, pass an object to the size prop containing your size values relative to responsive break points (show code below). To test this here, resize your browser window to responsively change this Title's size.

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

@@ -3,8 +3,10 @@ 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,3 +1,4 @@
 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,9 +6,7 @@ module Playbook
       prop :color, type: Playbook::Props::Enum,
                    values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
-      prop :size, type: Playbook::Props::Enum,
-                  values: [1, 2, 3, 4],
-                  default: 3
+      prop :size, default: 3
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
@@ -20,12 +18,27 @@ module Playbook
       prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color, is_bold)
+        title_class = generate_classname("pb_title_kit", variant, color, is_bold)
+        title_class + generate_size_classname
       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_size_3_thin')
+  expect(kit).toHaveClass('pb_title_kit_thin')
 })
 
 test('with colors', () => {
@@ -38,5 +38,5 @@ test('with colors', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_success')
+  expect(kit).toHaveClass('pb_title_kit_success')
 })