playbook_ui 12.30.0.pre.alpha.PLAY906multilevelselectedidsprop902 → 12.30.1.pre.alpha.PLAY802responsivetitlekit909

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8d8c8cd4aa096608acbf4eed675c36c238baa86d159aaefbc0f757084a5a4a4
-  data.tar.gz: 287dd12a2a579011dd57ae22d51ee874b1d3823647e3d95701a201507afb02e7
+  metadata.gz: 721bb127babde220f239ae7ba3a8fc3bbbff5c8078e6d58ed0fa3cebd33724db
+  data.tar.gz: c896e6c5fae4da4004ef5fa234ae930013d31a68b84f93cb3da36f9e31a1f21c
 SHA512:
-  metadata.gz: 18f3b68f512177e50e2146c9018e52535928c142d69f3e54b2c368d7655d1c638c5432d2e23ade2f4de5c41862a349dbf6b8325cd4d7cd9515ea0ea2b242a6fe
-  data.tar.gz: 2a44c4ecbf272b2ae90b49616048b8bbc6f7f641e0741dbdb26cfc92c5dce5b49724611c4b9aacb7f74017c89d1f891d2d54a148279322b80e54d455cb674738
+  metadata.gz: 65acd0c7af39e80e7157b87e2544216cce50c8ef582a002912d8f56d7a31ce802a543df41d5a31854649bddad6b9bb1def1d3e8eb088866252d4528d9a0926f5
+  data.tar.gz: d124637fac9f1a5601490420173f81909efcd40f3abeea66f9f2bcb7a1ef97f6211108ebf37cfe3974a6e9f1ed8f2c25cbbe5b1756b59a5ac4ff0ea81e50e813

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,24 @@ 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', `size_${size}`, variant, color, getBold),
+    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
+    buildResponsiveSizeCss(),
     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,31 @@ module Playbook
       prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color, is_bold)
+        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
       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,39 +4,52 @@ 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')
+    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')
 })