playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

data/app/pb_kits/playbook/pb_hashtag/docs/_playground.overrides.json

@@ -0,0 +1,75 @@
+{
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "defaults": {
+    "text": "470297",
+    "type": "project",
+    "url": "https://google.com",
+    "newWindow": false,
+    "dark": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["text", "type"]
+    },
+    {
+      "name": "Link",
+      "props": ["url", "target", "newWindow", "rel"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Project",
+      "props": {
+        "text": "470297",
+        "type": "project",
+        "url": "https://google.com"
+      }
+    },
+    {
+      "name": "Home",
+      "props": {
+        "text": "123456",
+        "type": "home",
+        "url": "https://google.com"
+      }
+    },
+    {
+      "name": "Appointment",
+      "props": {
+        "text": "456789",
+        "type": "appointment",
+        "url": "https://google.com"
+      }
+    },
+    {
+      "name": "Default",
+      "props": {
+        "text": "654321",
+        "type": "default",
+        "url": "https://google.com"
+      }
+    },
+    {
+      "name": "New window",
+      "props": {
+        "text": "Open in a new window",
+        "type": "project",
+        "url": "https://google.com",
+        "target": "_blank"
+      }
+    }
+  ],
+  "conditionals": {
+    "target": { "requires": "url" },
+    "rel": { "requires": "url" }
+  },
+  "hints": {}
+}

data/app/pb_kits/playbook/pb_highlight/docs/_playground.json

@@ -1,10 +1,16 @@
 {
   "template": "<Highlight{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "text": "Use Highlight to call attention to important words in a sentence.",
+    "highlightedText": [
+      "Highlight",
+      "important"
+    ]
+  },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
         "text",
         "highlightedText"
@@ -14,9 +20,74 @@
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "text": "Use Highlight to call attention to important words in a sentence.",
+        "highlightedText": [
+          "Highlight",
+          "important"
+        ]
+      }
+    },
+    {
+      "name": "Multiple Words",
+      "props": {
+        "text": "Search results can highlight owner, address, and status matches at the same time.",
+        "highlightedText": [
+          "owner",
+          "address",
+          "status"
+        ]
+      }
+    },
+    {
+      "name": "Phrase Match",
+      "props": {
+        "text": "The highlight kit can match a complete phrase inside longer text.",
+        "highlightedText": [
+          "complete phrase"
+        ]
+      }
+    },
+    {
+      "name": "Repeated Term",
+      "props": {
+        "text": "Highlight repeats highlight matches wherever highlight appears.",
+        "highlightedText": [
+          "highlight"
+        ]
+      }
+    },
+    {
+      "name": "No Match",
+      "props": {
+        "text": "This sentence renders without any highlighted text.",
+        "highlightedText": [
+          "missing"
+        ]
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Highlight uses the text prop as the source string and highlightedText as the list of search terms.",
+      "type": "info"
+    },
+    "multiple_words": {
+      "presetName": "Multiple Words",
+      "message": "Pass multiple strings in highlightedText to mark more than one term.",
+      "type": "info"
+    },
+    "phrase_match": {
+      "presetName": "Phrase Match",
+      "message": "A highlightedText entry can be a full phrase, not only a single word.",
+      "type": "info"
+    },
+    "no_match": {
+      "presetName": "No Match",
+      "message": "When no highlightedText entry matches, Highlight renders the original text without a mark.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_highlight/docs/_playground.overrides.json

@@ -0,0 +1,75 @@
+{
+  "defaults": {
+    "text": "Use Highlight to call attention to important words in a sentence.",
+    "highlightedText": ["Highlight", "important"]
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "highlightedText"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "text": "Use Highlight to call attention to important words in a sentence.",
+        "highlightedText": ["Highlight", "important"]
+      }
+    },
+    {
+      "name": "Multiple Words",
+      "props": {
+        "text": "Search results can highlight owner, address, and status matches at the same time.",
+        "highlightedText": ["owner", "address", "status"]
+      }
+    },
+    {
+      "name": "Phrase Match",
+      "props": {
+        "text": "The highlight kit can match a complete phrase inside longer text.",
+        "highlightedText": ["complete phrase"]
+      }
+    },
+    {
+      "name": "Repeated Term",
+      "props": {
+        "text": "Highlight repeats highlight matches wherever highlight appears.",
+        "highlightedText": ["highlight"]
+      }
+    },
+    {
+      "name": "No Match",
+      "props": {
+        "text": "This sentence renders without any highlighted text.",
+        "highlightedText": ["missing"]
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Highlight uses the text prop as the source string and highlightedText as the list of search terms.",
+      "type": "info"
+    },
+    "multiple_words": {
+      "presetName": "Multiple Words",
+      "message": "Pass multiple strings in highlightedText to mark more than one term.",
+      "type": "info"
+    },
+    "phrase_match": {
+      "presetName": "Phrase Match",
+      "message": "A highlightedText entry can be a full phrase, not only a single word.",
+      "type": "info"
+    },
+    "no_match": {
+      "presetName": "No Match",
+      "message": "When no highlightedText entry matches, Highlight renders the original text without a mark.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_home_address_street/docs/_playground.json

@@ -4,35 +4,161 @@
   "defaults": {
     "preserveCase": false,
     "emphasis": "street",
-    "newWindow": false
+    "newWindow": false,
+    "address": "70 Prospect Ave",
+    "addressCont": "Apt M18",
+    "city": "West Chester",
+    "state": "PA",
+    "zipcode": "19382",
+    "territory": "PHL",
+    "houseStyle": "Colonial",
+    "homeId": "8250263",
+    "homeUrl": "https://powerhrg.com/"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Address",
       "props": [
         "address",
         "addressCont",
         "city",
-        "dark",
-        "preserveCase",
-        "emphasis",
-        "homeId",
+        "state",
+        "zipcode",
+        "territory",
         "houseStyle",
+        "homeId"
+      ]
+    },
+    {
+      "name": "Display",
+      "props": [
+        "emphasis",
+        "preserveCase"
+      ]
+    },
+    {
+      "name": "Link",
+      "props": [
         "homeUrl",
         "target",
-        "newWindow",
-        "state",
-        "zipcode",
-        "territory"
+        "newWindow"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Default",
+      "name": "Street Emphasis",
+      "props": {
+        "address": "70 Prospect Ave",
+        "addressCont": "Apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "emphasis": "street"
+      }
+    },
+    {
+      "name": "City Emphasis",
+      "props": {
+        "address": "70 Prospect Ave",
+        "addressCont": "Apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "emphasis": "city"
+      }
+    },
+    {
+      "name": "No Emphasis",
+      "props": {
+        "address": "70 Prospect Ave",
+        "addressCont": "Apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "emphasis": "none"
+      }
+    },
+    {
+      "name": "Linked Home",
+      "props": {
+        "address": "70 Prospect Ave",
+        "addressCont": "Apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "target": "_blank",
+        "emphasis": "street"
+      }
+    },
+    {
+      "name": "Preserve Case",
+      "props": {
+        "address": "70 prospect AVE",
+        "addressCont": "apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "preserveCase": true,
+        "emphasis": "street"
+      }
+    },
+    {
+      "name": "Empty Fallback",
       "props": {}
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "street_emphasis": {
+      "presetName": "Street Emphasis",
+      "message": "Street Emphasis makes the street line the primary title and renders city/state details below.",
+      "type": "info"
+    },
+    "city_emphasis": {
+      "presetName": "City Emphasis",
+      "message": "City Emphasis shifts the visual title treatment to the city/state line.",
+      "type": "info"
+    },
+    "no_emphasis": {
+      "presetName": "No Emphasis",
+      "message": "No Emphasis keeps the address compact by rendering all address lines as body text.",
+      "type": "info"
+    },
+    "linked_home": {
+      "presetName": "Linked Home",
+      "message": "When homeId is present, the kit renders it as a home hashtag and uses homeUrl as the link target.",
+      "type": "info"
+    },
+    "preserve_case": {
+      "presetName": "Preserve Case",
+      "message": "preserveCase keeps the street address casing exactly as provided instead of titleizing it.",
+      "type": "info"
+    },
+    "empty_fallback": {
+      "presetName": "Empty Fallback",
+      "message": "When every address field is blank, HomeAddressStreet renders an em dash fallback.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_home_address_street/docs/_playground.overrides.json

@@ -0,0 +1,162 @@
+{
+  "defaults": {
+    "address": "70 Prospect Ave",
+    "addressCont": "Apt M18",
+    "city": "West Chester",
+    "state": "PA",
+    "zipcode": "19382",
+    "territory": "PHL",
+    "houseStyle": "Colonial",
+    "homeId": "8250263",
+    "homeUrl": "https://powerhrg.com/",
+    "emphasis": "street",
+    "preserveCase": false,
+    "newWindow": false
+  },
+  "groups": [
+    {
+      "name": "Address",
+      "props": [
+        "address",
+        "addressCont",
+        "city",
+        "state",
+        "zipcode",
+        "territory",
+        "houseStyle",
+        "homeId"
+      ]
+    },
+    {
+      "name": "Display",
+      "props": [
+        "emphasis",
+        "preserveCase"
+      ]
+    },
+    {
+      "name": "Link",
+      "props": [
+        "homeUrl",
+        "target",
+        "newWindow"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Street Emphasis",
+      "props": {
+        "address": "70 Prospect Ave",
+        "addressCont": "Apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "emphasis": "street"
+      }
+    },
+    {
+      "name": "City Emphasis",
+      "props": {
+        "address": "70 Prospect Ave",
+        "addressCont": "Apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "emphasis": "city"
+      }
+    },
+    {
+      "name": "No Emphasis",
+      "props": {
+        "address": "70 Prospect Ave",
+        "addressCont": "Apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "emphasis": "none"
+      }
+    },
+    {
+      "name": "Linked Home",
+      "props": {
+        "address": "70 Prospect Ave",
+        "addressCont": "Apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "target": "_blank",
+        "emphasis": "street"
+      }
+    },
+    {
+      "name": "Preserve Case",
+      "props": {
+        "address": "70 prospect AVE",
+        "addressCont": "apt M18",
+        "city": "West Chester",
+        "state": "PA",
+        "zipcode": "19382",
+        "territory": "PHL",
+        "houseStyle": "Colonial",
+        "homeId": "8250263",
+        "homeUrl": "https://powerhrg.com/",
+        "preserveCase": true,
+        "emphasis": "street"
+      }
+    },
+    {
+      "name": "Empty Fallback",
+      "props": {}
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "street_emphasis": {
+      "presetName": "Street Emphasis",
+      "message": "Street Emphasis makes the street line the primary title and renders city/state details below.",
+      "type": "info"
+    },
+    "city_emphasis": {
+      "presetName": "City Emphasis",
+      "message": "City Emphasis shifts the visual title treatment to the city/state line.",
+      "type": "info"
+    },
+    "no_emphasis": {
+      "presetName": "No Emphasis",
+      "message": "No Emphasis keeps the address compact by rendering all address lines as body text.",
+      "type": "info"
+    },
+    "linked_home": {
+      "presetName": "Linked Home",
+      "message": "When homeId is present, the kit renders it as a home hashtag and uses homeUrl as the link target.",
+      "type": "info"
+    },
+    "preserve_case": {
+      "presetName": "Preserve Case",
+      "message": "preserveCase keeps the street address casing exactly as provided instead of titleizing it.",
+      "type": "info"
+    },
+    "empty_fallback": {
+      "presetName": "Empty Fallback",
+      "message": "When every address field is blank, HomeAddressStreet renders an em dash fallback.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -1,6 +1,7 @@
 import React, { ReactSVGElement } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import type { BorderPropValue } from '../utilities/globalProps'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
 
@@ -19,9 +20,10 @@ export type IconSizes = "lg"
 | "10x"
 | ""
 
-type IconProps = {
+type IconOwnProps = {
   aria?: { [key: string]: string | boolean }
-  border?: string,
+  /** `true` = Font Awesome `fa-border`. Strings = global border utility classes. */
+  border?: boolean | BorderPropValue,
   className?: string,
   color?: string,
   customIcon?: {[key: string] :SVGElement},
@@ -40,7 +42,9 @@ type IconProps = {
   fontStyle?: 'far' | 'fas' | 'fab' | 'fak',
   spin?: boolean,
   tabIndex?: number,
-} & GlobalProps
+}
+
+type IconProps = IconOwnProps & Omit<GlobalProps, 'border'>
 
 const flipMap = {
   fa: {
@@ -121,7 +125,7 @@ declare global {
 const Icon = (props: IconProps) => {
   const {
     aria = {},
-    border = false,
+    border: borderProp = false,
     className,
     color,
     customIcon,
@@ -142,10 +146,17 @@ const Icon = (props: IconProps) => {
     tabIndex,
   } = props
 
+  const faBorder = borderProp === true
+  const globalPropsForCss = (
+    typeof borderProp === 'boolean'
+      ? { ...props, border: undefined }
+      : props
+  ) as GlobalProps
+
   let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
 
-  const faClasses = {
-    'fa-border': border,
+  const faClasses: Record<string, unknown> = {
+    'fa-border': faBorder,
     'fa-fw': fixedWidth,
     'fa-inverse': inverse,
     'fa-li': listItem,
@@ -174,7 +185,7 @@ const Icon = (props: IconProps) => {
     (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
     iconElement ? 'svg-inline--fa' : '',
     color ? `color_${color}` : '',
-    globalProps(props),
+    globalProps(globalPropsForCss),
     className
   )
 
@@ -184,7 +195,7 @@ const Icon = (props: IconProps) => {
     rotation ? rotateMap[isFA ? 'fa' : 'svg'][rotation] : null,
     spin ? spinMap[isFA ? 'fa' : 'svg'] : null,
     size ? sizeMap[isFA ? 'fa' : 'svg'][size] : null,
-    border ? isFA ? 'fa-border' : 'svg_border' : null,
+    faBorder ? isFA ? 'fa-border' : 'svg_border' : null,
     fixedWidth ? isFA ? 'fa-fw' : 'svg_fw' : null,
     inverse ? isFA ? 'fa-inverse' : 'svg_inverse' : null,
     listItem ? isFA ? 'fa-li' : 'svg_li' : null,
@@ -193,8 +204,8 @@ const Icon = (props: IconProps) => {
   classes += ` ${transformClasses}`
 
   if (isFA) {
-    const faClassList = {
-      'fa-border': border,
+    const faClassList: Record<string, unknown> = {
+      'fa-border': faBorder,
       'fa-inverse': inverse,
       'fa-li': listItem,
       [`fa-${size}`]: size,
@@ -206,7 +217,7 @@ const Icon = (props: IconProps) => {
 
   const classesEmoji = classnames(
     'pb_icon_kit_emoji',
-    globalProps(props),
+    globalProps(globalPropsForCss),
     className
   )
 

data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx

@@ -5,7 +5,7 @@ const IconDefault = (props) => {
   return (
     <div>
       <Icon
-          fixedWidth
+          fixedWidth 
           icon="user"
           {...props}
       />