playbook_ui 13.9.0 → 13.10.0.pre.alpha.PLAY978alphatesthighcharts41330

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3913dffced512fb212f3b0a4e1037abbf10a28420af5f13f666b62ac4b4a385d
-  data.tar.gz: c254328bfcb08db335a4c1a376cfbd83fc7f9eb981749a2041f6fd0394ab3a36
+  metadata.gz: b3de1aa401a74afcfd73aa4d706e43aff188f652798c88a019c08b562975cb50
+  data.tar.gz: 956a34d826b14e9cb5693a01f5f342088dcf7d240b6f6a7ce294702ef72bd4a8
 SHA512:
-  metadata.gz: 76ad54d6d06215fcc8ed33cf0186f8c6b23d850b21a2f58e99f5761a8eb33dfb9a8e7280692962134b53a0cb475663eba34fe7029394cdfa9e56b6ea905ddf6c
-  data.tar.gz: e897dae13452e396a6efda42c0d2ddeee117413c7bb9c9778fd781a024302c7946f420631c1cd9d01181ed132dc419a949356cc5a9541b6cc540583f4566134b
+  metadata.gz: dbecf4d81302f39e7d1a43eb0161568ad4953262b203853fc28c56b57dfea73722d0d74d1c6d45c30431683ee91e854085859ea0d77ae041f7c72b882b313ce8
+  data.tar.gz: 9f740e4f03b0ef881c5ba7b046972668019ac01b86ac0d1921db7347cf842ad0601c4f5f9066cfe8e53d53297adc937c4397f6a9df400d73033d7e35c5ab663d

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default_swift.md

@@ -0,0 +1,12 @@
+![avatar-default](https://github.com/powerhome/playbook/assets/92755007/b1bed6d5-56b4-40e2-96c3-6090642fc89f)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBAvatar(image: Image("andrew", bundle: .module), size: .xxSmall, status: .online)
+  PBAvatar(image: Image("andrew", bundle: .module), size: .xSmall, status: .away)
+  PBAvatar(image: Image("andrew", bundle: .module), size: .small, status: .online)
+  PBAvatar(image: Image("andrew", bundle: .module), size: .medium, status: .away)
+  PBAvatar(image: Image("andrew", bundle: .module), size: .large, status: .online)
+  PBAvatar(image: Image("andrew", bundle: .module), size: .xLarge, status: .offline)
+ }
+```

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram_swift.md

@@ -0,0 +1,12 @@
+![avatar-monogram](https://github.com/powerhome/playbook/assets/92755007/c7fd747d-46a9-4da0-8d89-dfa3647ea572)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBAvatar(name: "Tim Wenhold", size: .xxSmall, status: .online)
+  PBAvatar(name: "Tim Wenhold", size: .xSmall, status: .away)
+  PBAvatar(name: "Tim Wenhold", size: .small, status: .online)
+  PBAvatar(name: "Tim Wenhold", size: .medium, status: .away)
+  PBAvatar(name: "Tim Wenhold", size: .large, status: .online)
+  PBAvatar(name: "Tim", size: .xLarge, status: .offline)
+ }
+```

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Image** | `Image` | Sets the Avatar image |  |  |
+| **Name** | `String` | Used to display user's initails when image is blank |  |  |
+| **Size** | `Size` | Adjusts the Avatar image size | `.medium` | `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+| **Status** | `PresenceStatus` | Sets user's activity status |  | `away` `offline` `online` |
+| **Wrapped** | `Bool` | Displays the wrapped variant | `false` | `true` `false` | 

data/app/pb_kits/playbook/pb_avatar/docs/_footer.md

@@ -1,3 +1,3 @@
 ### Things to Avoid
 
-Avoid using Avatar with the user's name right next to it or under it. Use User kit instead. Do not use this kit for images that are not profile pictures.
+Avoid using Avatar with the user's name right next to it or under it. Use User kit instead. Do not use this kit for images that are not profile pictures .

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

@@ -10,4 +10,6 @@ examples:
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
   swift:
-    - avatar_swift: Default
+    - avatar_default_swift: Default
+    - avatar_monogram_swift: Monogram
+    - avatar_props_swift: ""

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
@@ -6,7 +6,7 @@ import { GlobalProps, globalProps } from '../utilities/globalProps'
 type BackgroundProps = {
   alt?: string,
   aria?: {[key: string]: string},
-  backgroundColor?: 'gradient' |
+  backgroundColor?: ResponsiveProp<string> | 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
   'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' |
   'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' |
@@ -15,20 +15,53 @@ type BackgroundProps = {
   'card_light' | 'card_dark' | 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7' | 'data_8' |
   'border_light' | 'border_dark' | 'success_secondary' | 'error_secondary' | 'info_secondary' | 'warning_secondary' |
   'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle',
-  backgroundPosition?: string,
-  backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
-  backgroundSize?: 'auto' | 'cover' | 'contain',
+  backgroundSize?: ResponsiveProp<string> | 'auto' | 'cover' | 'contain',
+  backgroundPosition?: ResponsiveProp<string> | string,
+  backgroundRepeat?: ResponsiveProp<string> | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
+  imageUrl?: ResponsiveProp<string> | string,
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   customColor?: string,
   data?: {[key: string]: string},
   id?: string,
-  imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
   transition?: 'fade' | 'blur' | 'scale',
 } & GlobalProps
 
+type ResponsiveProp<T> = T | {
+  xs?: T,
+  sm?: T,
+  md?: T,
+  lg?: T,
+  xl?: T,
+  default?: T
+};
+
+const breakpoints: {[key: string]: string} = {
+  xs: '(max-width: 575px)',
+  sm: '(min-width: 576px) and (max-width: 767px)',
+  md: '(min-width: 768px) and (max-width: 991px)',
+  lg: '(min-width: 992px) and (max-width: 1199px)',
+  xl: '(min-width: 1200px)',
+};
+
+const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T> | undefined): T => {
+  if (typeof prop === 'string') {
+    return prop;
+  }
+
+  // Check for breakpoints
+  for (const [bp, value] of Object.entries(prop || {})) {
+    if (bp !== 'default' && window.matchMedia(breakpoints[bp]).matches) {
+      return value as T;
+    }
+  }
+
+  // Return the default value if provided, otherwise undefined
+  return prop?.default || undefined;
+};
+
 const Background = (props: BackgroundProps) => {
   const {
     alt = '',
@@ -46,60 +79,78 @@ const Background = (props: BackgroundProps) => {
     tag = 'div',
     transition = '',
   } = props
+  
+  const [responsiveProps, setResponsiveProps] = useState({
+    backgroundSize: getResponsiveValue(backgroundSize),
+    backgroundPosition: getResponsiveValue(backgroundPosition),
+    backgroundRepeat: getResponsiveValue(backgroundRepeat),
+    backgroundColor: getResponsiveValue(backgroundColor),
+    imageUrl: getResponsiveValue(imageUrl),
+  });
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+  // Update responsive values on window resize.
+  useEffect(() => {
+    const updateResponsiveProps = () => {
+      setResponsiveProps({
+        backgroundSize: getResponsiveValue(props.backgroundSize),
+        backgroundPosition: getResponsiveValue(props.backgroundPosition),
+        backgroundRepeat: getResponsiveValue(props.backgroundRepeat),
+        backgroundColor: getResponsiveValue(props.backgroundColor),
+        imageUrl: getResponsiveValue(props.imageUrl),
+      });
+    };
+    window.addEventListener('resize', updateResponsiveProps);
+    return () => window.removeEventListener('resize', updateResponsiveProps);
+  }, [props]);
 
-  const backgroundStyle = {
-    backgroundImage: `url(${imageUrl})`,
-    backgroundRepeat: `${backgroundRepeat}`,
-    backgroundSize: `${backgroundSize}`,
-    backgroundPosition: backgroundPosition
-  }
-
-  const backgroundPositionStyle = {
-    backgroundColor: customColor? customColor: null,
-    backgroundPosition: `${backgroundPosition}`
-  }
 
-  const getBackgroundColor = customColor ? 'pb_background_custom_color' : `pb_background_color_${backgroundColor}`
-  const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), getBackgroundColor, className)
+  // Extract currently applicable responsive values.
+  const {
+    backgroundColor: resBackgroundColor,
+    backgroundPosition: resBackgroundPosition,
+    backgroundRepeat: resBackgroundRepeat,
+    backgroundSize: resBackgroundSize,
+    imageUrl: resImageUrl,
+  } = responsiveProps;
 
+  // Build CSS classes and styles using responsive values.
+  const classes = classnames(
+    buildCss('pb_background_kit'),
+    'lazyload',
+    globalProps(props),
+    transition,
+    {
+      [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
+      [`pb_background_custom_color`]: !!customColor,
+    },
+    className
+  );
 
-  const Tag: React.ReactElement | any = `${tag}`
+  const backgroundStyle = {
+    backgroundImage: resImageUrl ? `url(${resImageUrl})` : undefined,
+    backgroundRepeat: resBackgroundRepeat || undefined,
+    backgroundSize: resBackgroundSize || undefined,
+    backgroundPosition: resBackgroundPosition || undefined,
+    backgroundColor: customColor || undefined,
+  };
 
-  const displayReturn = () => {
-    if (imageUrl)
-      return (
-        <Tag
-            alt={alt}
-            style={backgroundStyle}
-            {...ariaProps}
-            {...dataProps}
-            className={classes}
-            id={id}
-        >
-          { children }
-        </Tag>
-      )
-    else
-      return (
-        <Tag
-            {...ariaProps}
-            {...dataProps}
-            className={classes}
-            id={id}
-            style={backgroundPositionStyle}
-        >
-          { children }
-        </Tag>
-      )
-  }
+  const Tag: React.ReactElement | any = `${tag}`;
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
 
+ 
   return (
-    <>
-      { displayReturn() }
-    </>
+    <Tag
+      alt={alt}
+      style={backgroundStyle}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+    >
+      {children}
+    </Tag>
+  
   )
 }
 

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors_swift.md

@@ -1,4 +1,4 @@
-![badge-colors](https://github.com/powerhome/playbook/assets/92755007/52ce34ef-eb0d-48c0-9232-89edfff60cef)
+![badge-colors](https://github.com/powerhome/playbook/assets/92755007/79c1d61c-0411-4ee3-ab4f-927df2fad422)
 
 ```swift
 HStack {

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -40,11 +40,11 @@ $pb_button_sizes: (
     border-radius: $border_radius_rounded;
     border: 1px solid $border_light;
     color: $text_lt_light;
-    padding: ($space_xxs - 2) $space_xs;
+    padding: ($space_xxs - 3) $space_xs;
     min-height: $space_md + 4;
 
     .pb_icon_kit_emoji, .pb_icon_kit {
-      font-size: $font_base;
+      font-size: $font_small;
     }
     &:hover {
       background-color: $bg_light;

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

@@ -1,22 +1,9 @@
-//function to retrieve all ancestors of unchecked item and set checked to false
-export const getAncestorsOfUnchecked = (
-  data: { [key: string]: any }[],
-  item: { [key: string]: any }
-) => {
-  if (item.parent_id) {
-    const ancestor = filterFormattedDataById(data, item.parent_id);
-    ancestor[0].checked = false;
-    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
-  }
-  return data;
-};
-
-//function is going over formattedData and returning all objects that match the
-//id of the clicked item from the dropdown
+// Function is going over formattedData and returning all objects that match the
+// ID of the clicked item from the dropdown
 export const filterFormattedDataById = (
   formattedData: { [key: string]: any }[],
   id: string
-) => {
+): { [key: string]: any }[] => {
   const matched: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -38,7 +25,7 @@ export const filterFormattedDataById = (
 export const findByFilter = (
   formattedData: { [key: string]: any }[],
   searchTerm: string
-) => {
+): { [key: string]: any }[] => {
   const matchedItems: { [key: string]: any }[] = [];
   const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
     for (const item of data) {
@@ -56,7 +43,20 @@ export const findByFilter = (
   return matchedItems;
 };
 
-//function to get all items with checked = true
+// Function to retrieve all ancestors of unchecked item and set checked to false
+export const getAncestorsOfUnchecked = (
+  data: { [key: string]: any }[],
+  item: { [key: string]: any }
+): { [key: string]: any }[] => {
+  if (item.parent_id) {
+    const ancestor = filterFormattedDataById(data, item.parent_id);
+    ancestor[0].checked = false;
+    ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
+  }
+  return data;
+};
+
+// Function to get all items with checked = true
 export const getCheckedItems = (
   data: { [key: string]: any }[]
 ): { [key: string]: any }[] => {
@@ -76,7 +76,9 @@ export const getCheckedItems = (
   return checkedItems;
 };
 
-export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
+export const getDefaultCheckedItems = (
+  treeData: { [key: string]: any }[]
+): { [key: string]: any }[] => {
   const checkedDefault: { [key: string]: any }[] = [];
 
   const traverseTree = (items: { [key: string]: any }[]) => {
@@ -118,7 +120,7 @@ export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
 export const recursiveCheckParent = (
   item: { [key: string]: any },
   data: any
-) => {
+): any => {
   if (item.parent_id !== null) {
     const parent = filterFormattedDataById(data, item.parent_id);
     const allChildrenChecked = parent[0].children.every(
@@ -135,8 +137,11 @@ export const recursiveCheckParent = (
   return data;
 };
 
-export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
-  let expandedItems: any[] = [];
+export const getExpandedItems = (
+  treeData: { [key: string]: string }[],
+  selectedIds: string[]
+): any[] => {
+  const expandedItems: any[] = [];
 
   const traverse = (items: string | any[], ancestors: any[] = []) => {
     for (let i = 0; i < items.length; i++) {

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

@@ -30,10 +30,11 @@
       align-items: center;
       justify-content: space-between;
       .input_inner_container {
-        max-width: 90%;
+        width: 100%;
       }
 
       input {
+        width: 100%;
         border: none;
         font-family: $font_family_base;
         font-size: $font_base;