playbook_ui 14.15.0.pre.rc.4 → 14.15.0

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -243,7 +243,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        width: $space_lg;
+                        min-width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);
@@ -263,7 +263,7 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                     [class=pb_timeline_item_left_block] {
                         margin-bottom: $space_lg;
-                        width: $space_lg;
+                        min-width: $space_lg;
                     }
                     [class=pb_timeline_item_right_block] {
                         @include flex_wrapper(column);

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

@@ -31,6 +31,38 @@
     @include pb_title_thin;
   }
 
+  &[class*=_display] {
+    font-size: clamp(24px, calc(1.25vw + 5.3vw), 128px);
+  }
+
+  &[class*=_dynamic] {
+    &[class*=_xs] {
+      font-size: min(2vw, 80vw / 16); 
+    }
+  
+    &[class*=_sm] {
+      font-size: min(2.5vw, 96vw / 16); 
+    }
+  
+    &[class*=_md] {
+      font-size: min(4vw, 160vw / 16);
+    }
+  
+    &[class*=_lg] {
+      font-size: min(5vw, 192vw / 16);
+    }
+  
+    &[class*=_xl] {
+      font-size: min(6vw, 224vw / 16);
+    }
+  
+    &[class*=_xxl] {
+      font-size: min(8vw, 256vw / 16);
+    }
+  }
+  
+
+
   @each $size, $size_value in $breakpoints_grid {
     @for $title_size_value from 1 through 4 {
       $min_size: map-get($size_value, "min");

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

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalProps'
 
-type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4"
+type SizeType = 1 | 2 | 3 | 4 | "1" | "2" | "3" | "4" | "display"
 type SizeResponsiveType = {[key: string]: SizeType}
 
 type TitleProps = {
@@ -16,6 +16,7 @@ type TitleProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: SizeType | SizeResponsiveType,
+  displaySize?: null | "xs" | "sm" | "md" | "lg" | "xl" | "xxl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
   text?: string,
   variant?: null | "link",
@@ -32,6 +33,7 @@ const Title = (props: TitleProps): React.ReactElement => {
     htmlOptions = {},
     id,
     size = 3,
+    displaySize = null,
     bold = true,
     tag = 'h3',
     text,
@@ -56,9 +58,16 @@ const Title = (props: TitleProps): React.ReactElement => {
     return css.trim()
   }
 
+  const buildDisplaySize = () => {
+    if (displaySize) {
+      return `pb_title_kit_dynamic_${displaySize}`
+    }
+  }
+
   const classes = classnames(
     buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
     globalProps(props),
+    buildDisplaySize(),
     buildResponsiveSizeCss(),
     className
   )

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

@@ -1,10 +1,9 @@
 <%= pb_rails("title", props: {
+    margin_bottom: "md"
 })  do %>
     Default Title
 <% end %>
 
-<br/>
-
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>

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

@@ -6,10 +6,10 @@ const TitleDefault = (props) => {
   return (
     <div>
       <Title
+          marginBottom='md'
           text="Default Title"
           {...props}
       />
-      <br />
       <Title
           size={1}
           tag="h1"

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

@@ -0,0 +1,7 @@
+<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
+<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
+<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
+<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
+<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
+<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
+<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>

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

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleDisplaySize = (props) => {
+  return (
+    <div>
+      <Title
+          displaySize="xs"
+          tag="h1"
+          text="Display Size xs"
+          {...props}
+      />
+      <Title
+          displaySize="sm"
+          tag="h1"
+          text="Display Size sm"
+          {...props}
+      />
+      <Title
+          displaySize="md"
+          tag="h1"
+          text="Display Size md"
+          {...props}
+      />
+      <Title
+          displaySize="lg"
+          tag="h1"
+          text="Display Size lg"
+          {...props}
+      />
+      <Title
+          displaySize="xl"
+          tag="h1"
+          text="Display Size xl"
+          {...props}
+      />
+      <Title
+          displaySize="xxl"
+          tag="h1"
+          text="Display Size xxl"
+          {...props}
+      />
+      <Title
+          size="display"
+          tag="h1"
+          text="This is a size of display"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleDisplaySize

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

@@ -0,0 +1 @@
+Responsive sizes for large screens and tablets, perfect for digital signage.

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

@@ -5,6 +5,7 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size
 
   react:
   - title_default: Default UI
@@ -12,3 +13,4 @@ examples:
   - title_colors: Colors
   - title_responsive: Responsive
   - title_truncate: Truncate
+  - title_display_size: Display Size

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

@@ -3,3 +3,4 @@ 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'
 export { default as TitleTruncate } from './_title_truncate.jsx'
+export { default as TitleDisplaySize } from './_title_display_size.jsx'

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

@@ -16,12 +16,15 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
+      prop :display_size, type: Playbook::Props::Enum,
+                          values: [nil, "xs", "sm", "md", "lg", "xl", "xxl"],
+                          default: nil
 
       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)
+          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
         end
       end
 
@@ -29,6 +32,12 @@ module Playbook
         bold ? nil : "thin"
       end
 
+      def generate_display_size
+        return "" if display_size.nil?
+
+        " pb_title_kit_dynamic_#{display_size}"
+      end
+
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -25,12 +25,18 @@ type TooltipProps = {
   children: JSX.Element,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
+  height?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   interaction?: boolean,
+  maxHeight?: string,
+  maxWidth?: string,
+  minHeight?: string,
+  minWidth?: string,
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
+  width: string,
   showTooltip?: boolean,
   forceOpenTooltip?: boolean,
 } & GlobalProps
@@ -42,13 +48,19 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     children,
     data = {},
     delay = 0,
+    height,
     htmlOptions = {},
     icon = null,
     interaction = false,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
     showTooltip = true,
+    width,
     zIndex,
     forceOpenTooltip = false,
     ...rest
@@ -115,6 +127,18 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     top: "bottom",
   }[placement.split("-")[0]]
 
+  const tooltipSizing = () => {
+    return Object.assign(
+      {},
+      height ? { height: height } : {},
+      maxHeight ? { maxHeight: maxHeight } : {},
+      maxWidth ? { maxWidth: maxWidth } : {},
+      minHeight ? { minHeight: minHeight } : {},
+      minWidth ? { minWidth: minWidth } : {},
+      width ? { width: width } : {}
+    );
+};
+
   return (
     <>
       <div
@@ -144,6 +168,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
               ref: refs.setFloating,
               role: "tooltip",
               style: {
+                ...tooltipSizing(),
                 position: strategy,
                 top: y ?? 0,
                 left: x ?? 0,

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+
+const TooltipSizing = (props) => {
+
+  return (
+   <Flex
+       flexDirection='row'
+       gap='md'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip
+          height='150px'
+          placement='top'
+          text="I'm 150px high and 100px wide!"
+          width='100px'
+          {...props}
+      >
+        <Button text="Height and Width"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxHeight='100px'
+          placement='top'
+          text="I have a maxHeight of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
+          width='250px'
+          {...props}
+      >
+        <Button text="maxHeight"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxWidth='150px'
+          placement='top'
+          text="I have a maxWidth of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
+          {...props}
+      >
+        <Button text="maxWidth"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          minWidth='300px'
+          placement='top'
+          text="I have a minWidth of 300px!"
+          {...props}
+      >
+        <Button text="minWidth"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxWidth='150px'
+          minHeight='300px'
+          placement='top'
+          text="I have a minHeight of 300px!"
+          {...props}
+      >
+        <Button text="minHeight"/>
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipSizing

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md

@@ -0,0 +1,3 @@
+You can customize the `height` and `width` of the tooltip's popover.
+
+When using `maxHeight`, be sure to set a `width` as well. The text needs to truncate within the `width` prop.

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

@@ -12,7 +12,7 @@ examples:
   - tooltip_default_react: Default
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
+  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
-

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

@@ -1,6 +1,7 @@
 export { default as TooltipDefaultReact } from './_tooltip_default_react'
 export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
+export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -3,7 +3,8 @@ import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
-import { get, isString, uniqueId } from 'lodash'
+import { get, isString, uniqueId } from '../utilities/object'
+
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -8,15 +8,17 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
+  wrapped?: boolean,
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
   removeProps: any,
   selectProps: any,
 }
 
+
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate } = props.selectProps
+  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -52,6 +54,7 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
             truncate={truncate}
+            wrapped={wrapped}
             {...props}
         />
       }
@@ -66,6 +69,7 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
             truncate={truncate}
+            wrapped={wrapped}
             {...props}
         />
       }

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -44,6 +44,8 @@ module Playbook
                       default: false
       prop :validation, type: Playbook::Props::HashProp,
                         default: {}
+      prop :wrapped, type: Playbook::Props::Boolean,
+                     default: false
       prop :clear_on_context_change, type: Playbook::Props::Boolean,
                                      default: true
       prop :options_by_context, type: Playbook::Props::HashProp,
@@ -72,7 +74,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi
+        pills || !is_multi || wrapped
       end
 
       def typeahead_react_options
@@ -94,6 +96,7 @@ module Playbook
           placeholder: placeholder,
           plusIcon: plus_icon,
           truncate: truncate,
+          wrapped: wrapped,
           searchContextSelector: search_context_selector,
           optionsByContext: options_by_context,
           clearOnContextChange: clear_on_context_change,

data/app/pb_kits/playbook/utilities/object.test.js

@@ -0,0 +1,99 @@
+import { isEmpty, get, isString, uniqueId, omitBy } from './object';
+
+describe('Lodash functions', () => {
+  describe('isEmpty', () => {
+    test('returns true for empty objects', () => {
+      expect(isEmpty({})).toBe(true);
+    });
+    test('returns true for empty arrays', () => {
+      expect(isEmpty([])).toBe(true);
+    });
+    test('returns false for non-empty objects', () => {
+      expect(isEmpty({ a: 1 })).toBe(false);
+    });
+    test('returns false for non-empty arrays', () => {
+      expect(isEmpty([1])).toBe(false);
+    });
+    test('returns true for null and undefined', () => {
+      expect(isEmpty(null)).toBe(true);
+      expect(isEmpty(undefined)).toBe(true);
+    });
+    test('returns false for non-object, non-array values', () => {
+      expect(isEmpty("hello")).toBe(false);
+      expect(isEmpty(123)).toBe(false);
+    });
+  });
+
+  describe('get', () => {
+    const obj = { a: { b: { c: 42 } }, arr: [{ x: 1 }, { y: 2 }] };
+
+    test('retrieves nested properties by dot path', () => {
+      expect(get(obj, 'a.b.c')).toBe(42);
+    });
+    test('returns default value if path does not exist', () => {
+      expect(get(obj, 'a.b.d', 'default')).toBe('default');
+    });
+    test('retrieves array values using bracket notation', () => {
+      expect(get(obj, 'arr[1].y')).toBe(2);
+    });
+    test('returns default for non-existent paths', () => {
+      expect(get(obj, 'non.existent.path', null)).toBe(null);
+    });
+  });
+
+  describe('isString', () => {
+    test('returns true for string literal', () => {
+      expect(isString('test')).toBe(true);
+    });
+    test('returns true for String object', () => {
+      expect(isString(new String('test'))).toBe(true);
+    });
+    test('returns false for non-string values', () => {
+      expect(isString(123)).toBe(false);
+      expect(isString(null)).toBe(false);
+      expect(isString({ a: 1 })).toBe(false);
+      expect(isString([ 'a','b','c' ])).toBe(false);
+    });
+  });
+
+  describe('uniqueId', () => {
+    test('generates unique ids without prefix', () => {
+      const id1 = uniqueId();
+      const id2 = uniqueId();
+      expect(id1).not.toBe(id2);
+      expect(Number(id1)).toBeLessThan(Number(id2));
+    });
+    test('generates unique ids with prefix', () => {
+      const id1 = uniqueId('id_');
+      const id2 = uniqueId('id_');
+      const id3 = uniqueId('id_');
+      expect(id1).not.toBe(id2);
+      expect(id1).not.toBe(id3);
+      expect(id2).not.toBe(id3);
+      expect(id1.startsWith('id_')).toBe(true);
+      expect(id2.startsWith('id_')).toBe(true);
+      expect(id3.startsWith('id_')).toBe(true);
+    });
+  });
+
+  describe('omitBy', () => {
+    test('omits keys for which predicate returns true', () => {
+      const obj = { a: 1, b: 2, c: 3 };
+      const isEven = value => value % 2 === 0;
+      const noEvenValues = omitBy(obj, isEven);
+      expect(noEvenValues).toEqual({ a: 1, c: 3 });
+    });
+    test('returns empty object for null input', () => {
+      expect(omitBy(null, () => true)).toEqual({});
+    });
+    test('returns empty object for non-object input', () => {
+      expect(omitBy("string", () => true)).toEqual({});
+    });
+    test('returns original object if predicate returns false for all keys', () => {
+      const obj = { a: 1, b: 2 };
+      const isBiggerThanFive = value => value >= 4;
+      const objWithSmallValues = omitBy(obj, isBiggerThanFive);
+      expect(objWithSmallValues).toEqual(obj);
+    });
+  });
+});

data/app/pb_kits/playbook/utilities/object.ts

@@ -1,3 +1,31 @@
 /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
 
-export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1
+export const isEmpty = (obj: any) => [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;
+
+export const get = <T, R = any>(obj: T, path: string, defaultValue?: R): R | any => {
+  const travel = (regexp: RegExp): any =>
+    String.prototype.split
+      .call(path, regexp)
+      .filter(Boolean)
+      .reduce((res: any, key: string) => (res !== null && res !== undefined ? res[key] : res), obj)
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/)
+  return result === undefined || result === obj ? defaultValue : result
+}
+
+export const isString = (str: unknown): str is string =>
+  str != null && typeof (str as any).valueOf() === "string"
+
+export const uniqueId: (prefix?: string) => string = (() => {
+  let counter = 0
+  return (prefix = '') => `${prefix}${++counter}`
+})()
+
+export const omitBy = (obj: Record<string, any>, predicate: (value: any, key: string) => boolean) => {
+  if (obj === null || typeof obj !== 'object') return {}
+  return Object.keys(obj).reduce((result: Record<string, any>, key: string) => {
+    if (!predicate(obj[key], key)) {
+      result[key] = obj[key];
+    }
+    return result;
+  }, {})
+}