playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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"
+    }
+  }
 }

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

@@ -5,50 +5,208 @@
     "disabled": false,
     "error": "",
     "hiddenInputs": false,
-    "initialCountry": "",
-    "label": "",
-    "name": "",
+    "initialCountry": "us",
+    "label": "Phone Number",
+    "name": "phone_number",
     "required": false,
     "requiredIndicator": false,
     "value": "",
     "formatAsYouType": false,
     "strictMode": false,
     "countrySearch": false,
-    "showPlaceholder": false
+    "showPlaceholder": false,
+    "id": "phone-number-playground"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Input",
       "props": [
-        "dark",
-        "disabled",
-        "error",
-        "hiddenInputs",
-        "initialCountry",
-        "isValid",
+        "id",
         "label",
         "name",
-        "onChange",
-        "onValidate",
+        "value",
+        "disabled",
+        "onChange"
+      ]
+    },
+    {
+      "name": "Country",
+      "props": [
+        "initialCountry",
+        "preferredCountries",
         "onlyCountries",
         "excludeCountries",
-        "preferredCountries",
+        "countrySearch"
+      ]
+    },
+    {
+      "name": "Validation",
+      "props": [
         "required",
         "requiredIndicator",
-        "value",
+        "error",
+        "strictMode"
+      ]
+    },
+    {
+      "name": "Formatting",
+      "props": [
         "formatAsYouType",
-        "strictMode",
-        "countrySearch",
-        "showPlaceholder"
+        "showPlaceholder",
+        "hiddenInputs"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "id": "phone-number-default",
+        "initialCountry": "us",
+        "label": "Phone Number",
+        "name": "phone_number"
+      }
+    },
+    {
+      "name": "Initial Country",
+      "props": {
+        "id": "phone-number-initial-country",
+        "initialCountry": "br",
+        "label": "Brazil Phone Number",
+        "name": "brazil_phone_number"
+      }
+    },
+    {
+      "name": "Preferred Countries",
+      "props": {
+        "id": "phone-number-preferred",
+        "initialCountry": "us",
+        "label": "Preferred Countries",
+        "name": "preferred_phone_number",
+        "preferredCountries": [
+          "us",
+          "br",
+          "ph",
+          "gb"
+        ]
+      }
+    },
+    {
+      "name": "Only Countries",
+      "props": {
+        "id": "phone-number-only-countries",
+        "initialCountry": "us",
+        "label": "North America",
+        "name": "north_america_phone_number",
+        "onlyCountries": [
+          "us",
+          "ca",
+          "mx"
+        ]
+      }
+    },
+    {
+      "name": "Exclude Countries",
+      "props": {
+        "id": "phone-number-exclude-countries",
+        "excludeCountries": [
+          "cn",
+          "ru"
+        ],
+        "initialCountry": "us",
+        "label": "Filtered Countries",
+        "name": "filtered_phone_number"
+      }
+    },
+    {
+      "name": "Formatted",
+      "props": {
+        "id": "phone-number-formatted",
+        "formatAsYouType": true,
+        "initialCountry": "us",
+        "label": "Formatted Phone Number",
+        "name": "formatted_phone_number",
+        "showPlaceholder": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "id": "phone-number-disabled",
+        "disabled": true,
+        "initialCountry": "us",
+        "label": "Disabled Phone Number",
+        "name": "disabled_phone_number",
+        "value": "2155550100"
+      }
+    },
+    {
+      "name": "Country Search",
+      "props": {
+        "id": "phone-number-country-search",
+        "countrySearch": true,
+        "initialCountry": "us",
+        "label": "Country Search",
+        "name": "country_search_phone_number"
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "required"
+    },
+    "hiddenInputs": {
+      "requires": "name"
+    }
+  },
+  "hints": {
+    "default": {
+      "when": {},
+      "message": "Default shows a phone number input.",
+      "type": "info"
+    },
+    "initial_country": {
+      "presetName": "Initial Country",
+      "message": "initialCountry accepts an ISO 3166-1 alpha-2 country code such as us, br, ph, or gb.",
+      "type": "info"
+    },
+    "preferred_countries": {
+      "presetName": "Preferred Countries",
+      "message": "preferredCountries moves those country codes to the top of the dropdown order.",
+      "type": "info"
+    },
+    "only_countries": {
+      "presetName": "Only Countries",
+      "message": "onlyCountries limits the dropdown to the listed country codes.",
+      "type": "info"
+    },
+    "exclude_countries": {
+      "presetName": "Exclude Countries",
+      "message": "excludeCountries removes the listed country codes from the dropdown.",
+      "type": "info"
+    },
+    "formatted": {
+      "presetName": "Formatted",
+      "message": "formatAsYouType formats the visible value as the user types; showPlaceholder asks intl-tel-input to provide an example number.",
+      "type": "info"
+    },
+    "country_search": {
+      "presetName": "Country Search",
+      "message": "countrySearch allows users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.",
+      "type": "info"
+    }
+  },
+  "customProps": {
+    "id": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ],
+      "default": "phone-number-playground"
+    }
+  },
+  "hiddenProps": [
+    "isValid",
+    "onValidate"
+  ]
 }