playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,34 +1,149 @@
 {
-  "template": "<Passphrase{{props}} />",
+  "template": "<Passphrase\n  onChange={(event) => setInput(event.target.value)}\n  value={input}{{props}}\n/>",
   "propTargets": {},
   "defaults": {
     "confirmation": false,
     "requiredIndicator": false,
-    "showTipsBelow": "always"
+    "showTipsBelow": "always",
+    "inputProps": {
+      "name": "passphrase"
+    },
+    "label": "Passphrase",
+    "tips": [
+      "Use a longer phrase.",
+      "Avoid common words.",
+      "Mix in punctuation or numbers."
+    ],
+    "uncontrolled": false
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "confirmation",
-        "dark",
-        "inputProps",
         "label",
-        "onChange",
-        "requiredIndicator",
-        "showTipsBelow",
         "tips",
-        "uncontrolled",
-        "value"
+        "showTipsBelow"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "confirmation",
+        "requiredIndicator",
+        "uncontrolled"
+      ]
+    },
+    {
+      "name": "Input",
+      "props": [
+        "inputProps"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "label": "Passphrase"
+      }
+    },
+    {
+      "name": "Confirmation",
+      "props": {
+        "confirmation": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "New passphrase",
+        "requiredIndicator": true
+      }
+    },
+    {
+      "name": "With Tips",
+      "props": {
+        "label": "Passphrase with tips",
+        "tips": [
+          "Use a longer phrase.",
+          "Avoid common words.",
+          "Mix in punctuation or numbers."
+        ]
+      }
+    },
+    {
+      "name": "Responsive Tips",
+      "props": {
+        "label": "Responsive tips",
+        "showTipsBelow": "md",
+        "tips": [
+          "Shown below at medium widths.",
+          "Shown in a popover above that breakpoint."
+        ]
+      }
+    },
+    {
+      "name": "Input Props",
+      "props": {
+        "inputProps": {
+          "id": "passphrase-input",
+          "name": "passphrase",
+          "placeholder": "Type a secure passphrase..."
+        },
+        "label": "Custom input props"
+      }
+    },
+    {
+      "name": "Uncontrolled",
+      "props": {
+        "label": "Uncontrolled passphrase",
+        "uncontrolled": true
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
+  "hints": {
+    "controlled": {
+      "when": {},
+      "message": "The playground wraps Passphrase with local state so typing updates value through an inline onChange handler.",
+      "type": "info"
+    },
+    "confirmation": {
+      "presetName": "Confirmation",
+      "message": "confirmation changes the default label to Confirm Passphrase and marks this field as the confirmation input.",
+      "type": "info"
+    },
+    "tips": {
+      "presetName": "With Tips",
+      "message": "tips renders the info icon and displays each string as guidance for the passphrase.",
+      "type": "info"
+    },
+    "responsive_tips": {
+      "presetName": "Responsive Tips",
+      "message": "showTipsBelow controls when tips move below the input instead of appearing in the popover.",
+      "type": "info"
+    },
+    "input_props": {
+      "presetName": "Input Props",
+      "message": "inputProps are passed through to the inner TextInput for id, name, placeholder, disabled, and similar input-level options.",
+      "type": "info"
+    },
+    "uncontrolled": {
+      "presetName": "Uncontrolled",
+      "message": "uncontrolled lets Passphrase manage the typed value internally instead of relying on the value prop.",
+      "type": "info"
+    }
+  },
+  "wrapper": "const PassphrasePlayground = () => {\n  const [input, setInput] = useState('')\n\n  return {{component}}\n}\n\n<PassphrasePlayground />",
+  "externalImports": [
+    "import React, { useState } from 'react'"
+  ],
+  "hiddenProps": [
+    "onChange",
+    "value"
+  ]
 }

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

@@ -0,0 +1,148 @@
+{
+  "template": "<Passphrase\n  onChange={(event) => setInput(event.target.value)}\n  value={input}{{props}}\n/>",
+  "wrapper": "const PassphrasePlayground = () => {\n  const [input, setInput] = useState('')\n\n  return {{component}}\n}\n\n<PassphrasePlayground />",
+  "externalImports": [
+    "import React, { useState } from 'react'"
+  ],
+  "hiddenProps": [
+    "onChange",
+    "value"
+  ],
+  "defaults": {
+    "confirmation": false,
+    "inputProps": {
+      "name": "passphrase"
+    },
+    "label": "Passphrase",
+    "requiredIndicator": false,
+    "showTipsBelow": "always",
+    "tips": [
+      "Use a longer phrase.",
+      "Avoid common words.",
+      "Mix in punctuation or numbers."
+    ],
+    "uncontrolled": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "tips",
+        "showTipsBelow"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
+        "confirmation",
+        "requiredIndicator",
+        "uncontrolled"
+      ]
+    },
+    {
+      "name": "Input",
+      "props": [
+        "inputProps"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "label": "Passphrase"
+      }
+    },
+    {
+      "name": "Confirmation",
+      "props": {
+        "confirmation": true
+      }
+    },
+    {
+      "name": "Required",
+      "props": {
+        "label": "New passphrase",
+        "requiredIndicator": true
+      }
+    },
+    {
+      "name": "With Tips",
+      "props": {
+        "label": "Passphrase with tips",
+        "tips": [
+          "Use a longer phrase.",
+          "Avoid common words.",
+          "Mix in punctuation or numbers."
+        ]
+      }
+    },
+    {
+      "name": "Responsive Tips",
+      "props": {
+        "label": "Responsive tips",
+        "showTipsBelow": "md",
+        "tips": [
+          "Shown below at medium widths.",
+          "Shown in a popover above that breakpoint."
+        ]
+      }
+    },
+    {
+      "name": "Input Props",
+      "props": {
+        "inputProps": {
+          "id": "passphrase-input",
+          "name": "passphrase",
+          "placeholder": "Type a secure passphrase..."
+        },
+        "label": "Custom input props"
+      }
+    },
+    {
+      "name": "Uncontrolled",
+      "props": {
+        "label": "Uncontrolled passphrase",
+        "uncontrolled": true
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
+  "hints": {
+    "controlled": {
+      "when": {},
+      "message": "The playground wraps Passphrase with local state so typing updates value through an inline onChange handler.",
+      "type": "info"
+    },
+    "confirmation": {
+      "presetName": "Confirmation",
+      "message": "confirmation changes the default label to Confirm Passphrase and marks this field as the confirmation input.",
+      "type": "info"
+    },
+    "tips": {
+      "presetName": "With Tips",
+      "message": "tips renders the info icon and displays each string as guidance for the passphrase.",
+      "type": "info"
+    },
+    "responsive_tips": {
+      "presetName": "Responsive Tips",
+      "message": "showTipsBelow controls when tips move below the input instead of appearing in the popover.",
+      "type": "info"
+    },
+    "input_props": {
+      "presetName": "Input Props",
+      "message": "inputProps are passed through to the inner TextInput for id, name, placeholder, disabled, and similar input-level options.",
+      "type": "info"
+    },
+    "uncontrolled": {
+      "presetName": "Uncontrolled",
+      "message": "uncontrolled lets Passphrase manage the typed value internally instead of relying on the value prop.",
+      "type": "info"
+    }
+  }
+}

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

@@ -1,10 +1,85 @@
 {
   "template": "<PbBarGraph{{props}} />",
   "propTargets": {},
-  "defaults": {},
+  "defaults": {
+    "options": {
+      "series": [
+        {
+          "name": "Installation",
+          "data": [
+            1475,
+            200,
+            3000,
+            654,
+            656
+          ]
+        },
+        {
+          "name": "Manufacturing",
+          "data": [
+            4434,
+            524,
+            2320,
+            440,
+            500
+          ]
+        },
+        {
+          "name": "Sales & Distribution",
+          "data": [
+            3387,
+            743,
+            1344,
+            434,
+            440
+          ]
+        },
+        {
+          "name": "Project Development",
+          "data": [
+            3227,
+            878,
+            999,
+            780,
+            1000
+          ]
+        },
+        {
+          "name": "Other",
+          "data": [
+            1111,
+            677,
+            3245,
+            500,
+            200
+          ]
+        }
+      ],
+      "title": {
+        "text": "Solar Employment Growth by Sector, 2010-2016"
+      },
+      "subtitle": {
+        "text": "Source: thesolarfoundation.com"
+      },
+      "xAxis": {
+        "categories": [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May"
+        ]
+      },
+      "yAxis": {
+        "title": {
+          "text": "Number of Employees"
+        }
+      }
+    }
+  },
   "groups": [
     {
-      "name": "Props",
+      "name": "Chart",
       "props": [
         "options"
       ]
@@ -13,9 +88,308 @@
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Installation",
+              "data": [
+                1475,
+                200,
+                3000,
+                654,
+                656
+              ]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [
+                4434,
+                524,
+                2320,
+                440,
+                500
+              ]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [
+                3387,
+                743,
+                1344,
+                434,
+                440
+              ]
+            },
+            {
+              "name": "Project Development",
+              "data": [
+                3227,
+                878,
+                999,
+                780,
+                1000
+              ]
+            },
+            {
+              "name": "Other",
+              "data": [
+                1111,
+                677,
+                3245,
+                500,
+                200
+              ]
+            }
+          ],
+          "title": {
+            "text": "Solar Employment Growth by Sector, 2010-2016"
+          },
+          "subtitle": {
+            "text": "Source: thesolarfoundation.com"
+          },
+          "xAxis": {
+            "categories": [
+              "Jan",
+              "Feb",
+              "Mar",
+              "Apr",
+              "May"
+            ]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          }
+        }
+      }
+    },
+    {
+      "name": "Horizontal",
+      "props": {
+        "options": {
+          "chart": {
+            "type": "bar"
+          },
+          "title": {
+            "text": "Historic World Population by Region",
+            "align": "left"
+          },
+          "subtitle": {
+            "text": "Source: Wikipedia.org",
+            "align": "left"
+          },
+          "xAxis": {
+            "categories": [
+              "Africa",
+              "America",
+              "Asia",
+              "Europe"
+            ],
+            "lineWidth": 0
+          },
+          "yAxis": {
+            "title": {
+              "text": ""
+            }
+          },
+          "tooltip": {
+            "valueSuffix": " millions"
+          },
+          "plotOptions": {
+            "bar": {
+              "dataLabels": {
+                "enabled": true
+              },
+              "groupPadding": 0.1
+            }
+          },
+          "series": [
+            {
+              "name": "Year 1990",
+              "data": [
+                631,
+                727,
+                3202,
+                721
+              ]
+            },
+            {
+              "name": "Year 2000",
+              "data": [
+                814,
+                841,
+                3714,
+                726
+              ]
+            },
+            {
+              "name": "Year 2018",
+              "data": [
+                1276,
+                1007,
+                4561,
+                746
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "Stacked",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Installation",
+              "data": [
+                1475,
+                200,
+                3000,
+                654,
+                656
+              ]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [
+                1270,
+                800,
+                200,
+                454,
+                956
+              ]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [
+                975,
+                1600,
+                1500,
+                924,
+                500
+              ]
+            }
+          ],
+          "title": {
+            "text": "Bar Graph with Stacked Columns"
+          },
+          "xAxis": {
+            "categories": [
+              "Jan",
+              "Feb",
+              "Mar",
+              "Apr",
+              "May"
+            ]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          },
+          "plotOptions": {
+            "column": {
+              "stacking": "normal",
+              "borderWidth": 0
+            }
+          },
+          "legend": {
+            "enabled": true
+          }
+        }
+      }
+    },
+    {
+      "name": "Custom Colors",
+      "props": {
+        "options": {
+          "series": [
+            {
+              "name": "Installation",
+              "data": [
+                1475,
+                200,
+                3000,
+                654,
+                656
+              ]
+            },
+            {
+              "name": "Manufacturing",
+              "data": [
+                4434,
+                524,
+                2320,
+                440,
+                500
+              ]
+            },
+            {
+              "name": "Sales & Distribution",
+              "data": [
+                3387,
+                743,
+                1344,
+                434,
+                440
+              ]
+            }
+          ],
+          "title": {
+            "text": "Bar Graph with Custom Data Colors"
+          },
+          "xAxis": {
+            "categories": [
+              "Jan",
+              "Feb",
+              "Mar",
+              "Apr",
+              "May"
+            ]
+          },
+          "yAxis": {
+            "title": {
+              "text": "Number of Employees"
+            }
+          },
+          "colors": [
+            "#144075",
+            "#005a8b",
+            "#00a4b4",
+            "#f9b115",
+            "#e87511"
+          ]
+        }
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "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"
+    },
+    "horizontal": {
+      "presetName": "Horizontal",
+      "message": "Set options.chart.type to bar for a horizontal bar chart.",
+      "type": "info"
+    },
+    "stacked": {
+      "presetName": "Stacked",
+      "message": "Stacked columns use options.plotOptions.column.stacking with multiple series.",
+      "type": "info"
+    },
+    "colors": {
+      "presetName": "Custom Colors",
+      "message": "Use options.colors to override the Highcharts series color palette.",
+      "type": "info"
+    }
+  },
+  "externalImports": [
+    "import { PbBarGraph } from 'playbook-ui/charts'"
+  ]
 }