playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,212 @@
+{
+  "template": "<PbLineGraph{{props}} />",
+  "externalImports": [
+    "import { PbLineGraph } from 'playbook-ui/charts'"
+  ],
+  "defaults": {
+    "options": {
+      "series": [
+        {
+          "name": "Installation",
+          "data": [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+        },
+        {
+          "name": "Manufacturing",
+          "data": [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+        },
+        {
+          "name": "Sales & Distribution",
+          "data": [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+        },
+        {
+          "name": "Project Development",
+          "data": [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
+        },
+        {
+          "name": "Other",
+          "data": [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+        }
+      ],
+      "title": {
+        "text": "Solar Employment Growth by Sector, 2010-2016"
+      },
+      "subtitle": {
+        "text": "Source: thesolarfoundation.com"
+      },
+      "xAxis": {
+        "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
+      },
+      "yAxis": {
+        "title": {
+          "text": "Number of Employees"
+        }
+      }
+    }
+  },
+  "groups": [
+    {
+      "name": "Chart",
+      "props": ["options"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Installation",
+              "data": [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+            },
+            {
+              "name": "Project Development",
+              "data": [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
+            },
+            {
+              "name": "Other",
+              "data": [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+            }
+          ],
+          "title": {
+            "text": "Solar Employment Growth by Sector, 2010-2016"
+          },
+          "subtitle": {
+            "text": "Source: thesolarfoundation.com"
+          },
+          "xAxis": {
+            "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "Legend",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Number of Installations",
+              "data": [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+            }
+          ],
+          "title": {
+            "text": "Line Graph with Legend"
+          },
+          "xAxis": {
+            "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
+          },
+          "yAxis": {
+            "min": 0,
+            "title": {
+              "text": "Number of Employees"
+            }
+          },
+          "legend": {
+            "enabled": true
+          }
+        }
+      }
+    },
+    {
+      "name": "Custom Colors",
+      "props": {
+        "options": {
+          "title": {
+            "text": "Line Graph with Custom Data Colors"
+          },
+          "xAxis": {
+            "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
+          },
+          "yAxis": {
+            "min": 0,
+            "title": {
+              "text": "Number of Employees"
+            }
+          },
+          "series": [
+            {
+              "name": "Installation",
+              "data": [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387]
+            }
+          ],
+          "colors": ["#144075", "#005a8b", "#f9b115"]
+        }
+      }
+    },
+    {
+      "name": "Tall",
+      "props": {
+        "options": {
+          "chart": {
+            "height": 500
+          },
+          "series": [
+            {
+              "name": "Installation",
+              "data": [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+            }
+          ],
+          "title": {
+            "text": "Line Graph with Custom Height"
+          },
+          "xAxis": {
+            "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          }
+        }
+      }
+    }
+  ],
+  "hints": {
+    "charts_import": {
+      "when": {},
+      "message": "Highcharts kits are imported from playbook-ui/charts so apps can load the chart bundle only when needed.",
+      "type": "info"
+    },
+    "legend": {
+      "presetName": "Legend",
+      "message": "Line graph legends are controlled through options.legend.enabled.",
+      "type": "info"
+    },
+    "colors": {
+      "presetName": "Custom Colors",
+      "message": "Use options.colors to override the Highcharts series color palette.",
+      "type": "info"
+    },
+    "tall": {
+      "presetName": "Tall",
+      "message": "Set options.chart.height when a line graph needs more vertical space.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_pb_line_graph/kit.schema.json

@@ -8,7 +8,7 @@
   ],
   "props": {
     "options": {
-      "type": "Record<string, unknown>",
+      "type": "GenericObject",
       "platforms": [
         "react",
         "rails"

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

@@ -2,8 +2,8 @@
   "template": "<Person{{props}} />",
   "propTargets": {},
   "defaults": {
-    "firstName": "Anna",
-    "lastName": "Black"
+    "firstName": "Kyle",
+    "lastName": "Fadigan"
   },
   "groups": [
     {
@@ -16,27 +16,43 @@
   ],
   "presets": [
     {
-      "name": "Full name",
+      "name": "Full Name",
       "props": {
-        "firstName": "Anna",
-        "lastName": "Black"
+        "firstName": "Kyle",
+        "lastName": "Fadigan"
       }
     },
     {
-      "name": "First name only",
+      "name": "First Name Only",
       "props": {
-        "firstName": "Anna",
+        "firstName": "Kyle",
         "lastName": ""
       }
     },
     {
-      "name": "Hyphenated last name",
+      "name": "Last Name Only",
       "props": {
-        "firstName": "Anna",
-        "lastName": "Black-Smith"
+        "firstName": "",
+        "lastName": "Fadigan"
       }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "full_name": {
+      "presetName": "Full Name",
+      "message": "Person joins firstName and lastName into the display name.",
+      "type": "info"
+    },
+    "first_name_only": {
+      "presetName": "First Name Only",
+      "message": "If lastName is blank, Person renders the available firstName without extra spacing.",
+      "type": "info"
+    },
+    "last_name_only": {
+      "presetName": "Last Name Only",
+      "message": "If firstName is blank, Person renders the available lastName without extra spacing.",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,7 +1,7 @@
 {
   "defaults": {
-    "firstName": "Anna",
-    "lastName": "Black"
+    "firstName": "Kyle",
+    "lastName": "Fadigan"
   },
   "groups": [
     {
@@ -11,18 +11,43 @@
   ],
   "presets": [
     {
-      "name": "Full name",
-      "props": { "firstName": "Anna", "lastName": "Black" }
+      "name": "Full Name",
+      "props": {
+        "firstName": "Kyle",
+        "lastName": "Fadigan"
+      }
     },
     {
-      "name": "First name only",
-      "props": { "firstName": "Anna", "lastName": "" }
+      "name": "First Name Only",
+      "props": {
+        "firstName": "Kyle",
+        "lastName": ""
+      }
     },
     {
-      "name": "Hyphenated last name",
-      "props": { "firstName": "Anna", "lastName": "Black-Smith" }
+      "name": "Last Name Only",
+      "props": {
+        "firstName": "",
+        "lastName": "Fadigan"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "full_name": {
+      "presetName": "Full Name",
+      "message": "Person joins firstName and lastName into the display name.",
+      "type": "info"
+    },
+    "first_name_only": {
+      "presetName": "First Name Only",
+      "message": "If lastName is blank, Person renders the available firstName without extra spacing.",
+      "type": "info"
+    },
+    "last_name_only": {
+      "presetName": "Last Name Only",
+      "message": "If firstName is blank, Person renders the available lastName without extra spacing.",
+      "type": "info"
+    }
+  }
 }

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

@@ -2,53 +2,82 @@
   "template": "<PersonContact{{props}} />",
   "propTargets": {},
   "defaults": {
-    "firstName": "Anna",
-    "lastName": "Black",
+    "firstName": "Pauline",
+    "lastName": "Smith",
     "contacts": [
       {
         "contactType": "email",
-        "contactValue": "anna.black@example.com",
-        "contactDetail": "work"
+        "contactValue": "email@example.com"
+      },
+      {
+        "contactValue": "5555555555"
       },
       {
         "contactType": "work",
-        "contactValue": "2155550100",
-        "contactDetail": "ext. 42"
+        "contactValue": "3245627482"
       }
     ]
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Person",
       "props": [
         "firstName",
-        "lastName",
+        "lastName"
+      ]
+    },
+    {
+      "name": "Contacts",
+      "props": [
         "contacts"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Email & phone",
+      "name": "Email and Phone",
       "props": {
-        "firstName": "Anna",
-        "lastName": "Black",
+        "firstName": "Pauline",
+        "lastName": "Smith",
         "contacts": [
           {
             "contactType": "email",
-            "contactValue": "anna.black@example.com",
-            "contactDetail": "work"
+            "contactValue": "email@example.com"
           },
           {
-            "contactType": "cell",
-            "contactValue": "2155550199",
-            "contactDetail": "mobile"
+            "contactValue": "5555555555"
+          },
+          {
+            "contactType": "work",
+            "contactValue": "3245627482"
           }
         ]
       }
     },
     {
-      "name": "Email only",
+      "name": "With Detail",
+      "props": {
+        "firstName": "Harvey",
+        "lastName": "Walters",
+        "contacts": [
+          {
+            "contactType": "email",
+            "contactValue": "email@example.com"
+          },
+          {
+            "contactValue": "5555555555",
+            "contactDetail": "Home"
+          },
+          {
+            "contactType": "work",
+            "contactValue": "3245627482",
+            "contactDetail": "Work"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Email Only",
       "props": {
         "firstName": "Anna",
         "lastName": "Black",
@@ -61,7 +90,7 @@
       }
     },
     {
-      "name": "Work & home",
+      "name": "Work and Home",
       "props": {
         "firstName": "Anna",
         "lastName": "Black",
@@ -69,11 +98,12 @@
           {
             "contactType": "work",
             "contactValue": "2155550100",
-            "contactDetail": "desk"
+            "contactDetail": "Desk"
           },
           {
             "contactType": "home",
-            "contactValue": "2155550188"
+            "contactValue": "2155550188",
+            "contactDetail": "Home"
           }
         ]
       }
@@ -94,5 +124,26 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "contacts_shape": {
+      "when": {},
+      "message": "contacts is an array of contact objects. Use contactType, contactValue, and optional contactDetail for each row.",
+      "type": "info"
+    },
+    "with_detail": {
+      "presetName": "With Detail",
+      "message": "contactDetail adds the secondary label next to the contact value.",
+      "type": "info"
+    },
+    "email_only": {
+      "presetName": "Email Only",
+      "message": "PersonContact can render a single contact item when only one method is available.",
+      "type": "info"
+    },
+    "international": {
+      "presetName": "International",
+      "message": "Use contactType international when the value already includes an international dialing prefix.",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,48 +1,76 @@
 {
   "defaults": {
-    "firstName": "Anna",
-    "lastName": "Black",
+    "firstName": "Pauline",
+    "lastName": "Smith",
     "contacts": [
       {
         "contactType": "email",
-        "contactValue": "anna.black@example.com",
-        "contactDetail": "work"
+        "contactValue": "email@example.com"
+      },
+      {
+        "contactValue": "5555555555"
       },
       {
         "contactType": "work",
-        "contactValue": "2155550100",
-        "contactDetail": "ext. 42"
+        "contactValue": "3245627482"
       }
     ]
   },
   "groups": [
     {
-      "name": "Content",
-      "props": ["firstName", "lastName", "contacts"]
+      "name": "Person",
+      "props": ["firstName", "lastName"]
+    },
+    {
+      "name": "Contacts",
+      "props": ["contacts"]
     }
   ],
   "presets": [
     {
-      "name": "Email & phone",
+      "name": "Email and Phone",
       "props": {
-        "firstName": "Anna",
-        "lastName": "Black",
+        "firstName": "Pauline",
+        "lastName": "Smith",
         "contacts": [
           {
             "contactType": "email",
-            "contactValue": "anna.black@example.com",
-            "contactDetail": "work"
+            "contactValue": "email@example.com"
+          },
+          {
+            "contactValue": "5555555555"
           },
           {
-            "contactType": "cell",
-            "contactValue": "2155550199",
-            "contactDetail": "mobile"
+            "contactType": "work",
+            "contactValue": "3245627482"
           }
         ]
       }
     },
     {
-      "name": "Email only",
+      "name": "With Detail",
+      "props": {
+        "firstName": "Harvey",
+        "lastName": "Walters",
+        "contacts": [
+          {
+            "contactType": "email",
+            "contactValue": "email@example.com"
+          },
+          {
+            "contactValue": "5555555555",
+            "contactDetail": "Home"
+          },
+          {
+            "contactType": "work",
+            "contactValue": "3245627482",
+            "contactDetail": "Work"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Email Only",
       "props": {
         "firstName": "Anna",
         "lastName": "Black",
@@ -55,7 +83,7 @@
       }
     },
     {
-      "name": "Work & home",
+      "name": "Work and Home",
       "props": {
         "firstName": "Anna",
         "lastName": "Black",
@@ -63,11 +91,12 @@
           {
             "contactType": "work",
             "contactValue": "2155550100",
-            "contactDetail": "desk"
+            "contactDetail": "Desk"
           },
           {
             "contactType": "home",
-            "contactValue": "2155550188"
+            "contactValue": "2155550188",
+            "contactDetail": "Home"
           }
         ]
       }
@@ -88,5 +117,26 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "contacts_shape": {
+      "when": {},
+      "message": "contacts is an array of contact objects. Use contactType, contactValue, and optional contactDetail for each row.",
+      "type": "info"
+    },
+    "with_detail": {
+      "presetName": "With Detail",
+      "message": "contactDetail adds the secondary label next to the contact value.",
+      "type": "info"
+    },
+    "email_only": {
+      "presetName": "Email Only",
+      "message": "PersonContact can render a single contact item when only one method is available.",
+      "type": "info"
+    },
+    "international": {
+      "presetName": "International",
+      "message": "Use contactType international when the value already includes an international dialing prefix.",
+      "type": "info"
+    }
+  }
 }