playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_inline_loading.json

@@ -0,0 +1,199 @@
+[
+  {
+    "year": "2021",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "20",
+    "scheduledMeetings": "10",
+    "attendanceRate": "51%",
+    "completedClasses": "3",
+    "classCompletionRate": "33%",
+    "graduatedStudents": "19",
+    "children": []
+  },
+  {
+    "year": "2022",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "25",
+    "scheduledMeetings": "17",
+    "attendanceRate": "75%",
+    "completedClasses": "5",
+    "classCompletionRate": "45%",
+    "graduatedStudents": "32",
+    "children": [
+      {
+        "year": "2022",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2022",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "15",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2022",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "25",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2022",
+            "quarter": "Q1",
+            "month": "May",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2011",
+                "quarter": "Q1",
+                "month": "May",
+                "day": "2",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "year": "2023",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "10",
+    "scheduledMeetings": "15",
+    "attendanceRate": "65%",
+    "completedClasses": "4",
+    "classCompletionRate": "49%",
+    "graduatedStudents": "29",
+    "children": [
+      {
+        "year": "2023",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2023",
+            "quarter": "Q1",
+            "month": "March",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2023",
+                "quarter": "Q1",
+                "month": "March",
+                "day": "10",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2023",
+                "quarter": "Q1",
+                "month": "March",
+                "day": "11",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2023",
+            "quarter": "Q1",
+            "month": "April",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2023",
+                "quarter": "Q1",
+                "month": "April",
+                "day": "15",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]

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

@@ -0,0 +1,136 @@
+{
+  "template": "<Avatar{{props}} />",
+  "propTargets": {},
+  "defaults": {
+    "grayscale": false,
+    "imageAlt": "",
+    "name": "",
+    "size": "md",
+    "componentOverlay": {
+      "component": "badge",
+      "placement": "top-right",
+      "text": "12",
+      "variant": "error"
+    }
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "name",
+        "imageUrl",
+        "imageAlt"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "size",
+        "grayscale",
+        "status"
+      ]
+    },
+    {
+      "name": "Overlay",
+      "props": [
+        "componentOverlay"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "size": "md",
+        "name": "Jane Doe",
+        "imageUrl": "https://randomuser.me/api/portraits/women/44.jpg"
+      }
+    },
+    {
+      "name": "Small",
+      "props": {
+        "size": "sm",
+        "name": "Alex Kim",
+        "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg"
+      }
+    },
+    {
+      "name": "Initials only",
+      "props": {
+        "size": "md",
+        "name": "Jordan Lee"
+      }
+    },
+    {
+      "name": "Online status",
+      "props": {
+        "size": "md",
+        "name": "Jordan Lee",
+        "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg",
+        "status": "online"
+      }
+    },
+    {
+      "name": "Status + Small",
+      "props": {
+        "size": "sm",
+        "name": "Jordan Lee",
+        "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg",
+        "status": "away"
+      }
+    },
+    {
+      "name": "Initials + online",
+      "props": {
+        "size": "md",
+        "name": "Morgan Blake",
+        "status": "online"
+      }
+    },
+    {
+      "name": "Grayscale photo",
+      "props": {
+        "size": "md",
+        "name": "Photo user",
+        "imageUrl": "https://randomuser.me/api/portraits/women/68.jpg",
+        "grayscale": true
+      }
+    },
+    {
+      "name": "Component overlay",
+      "props": {
+        "size": "lg",
+        "name": "Jordan Lee",
+        "imageUrl": "https://randomuser.me/api/portraits/women/68.jpg",
+        "componentOverlay": {
+          "component": "badge",
+          "placement": "top-right",
+          "text": "12",
+          "variant": "error"
+        }
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "status_indicator": {
+      "when": {
+        "status": "online"
+      },
+      "message": "Status shows a dot when name or image is set; it does not appear when using component overlay mode.",
+      "type": "info"
+    },
+    "image_fallback": {
+      "when": {
+        "imageUrl": "https://unsplash.it/200/200"
+      },
+      "message": "If the image fails to load, initials from name are shown instead.",
+      "type": "info"
+    },
+    "component_overlay_info": {
+      "presetName": "Component overlay",
+      "message": "Use componentOverlay to add a badge or icon to the avatar. Click 'component overlay' to see an example.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+{
+  "defaults": {
+    "componentOverlay": {
+      "component": "badge",
+      "placement": "top-right",
+      "text": "12",
+      "variant": "error"
+    }
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["name", "imageUrl", "imageAlt"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["size", "grayscale", "status"]
+    },
+    {
+      "name": "Overlay",
+      "props": ["componentOverlay"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": { "size": "md", "name": "Jane Doe", "imageUrl": "https://randomuser.me/api/portraits/women/44.jpg" }
+    },
+    {
+      "name": "Small",
+      "props": { "size": "sm", "name": "Alex Kim", "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg" }
+    },
+    {
+      "name": "Initials only",
+      "props": {
+        "size": "md",
+        "name": "Jordan Lee"
+      }
+    },
+    {
+      "name": "Online status",
+      "props": { "size": "md", "name": "Jordan Lee", "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg", "status": "online" }
+    },
+    {
+      "name": "Status + Small",
+      "props": { "size": "sm", "name": "Jordan Lee", "imageUrl": "https://randomuser.me/api/portraits/men/32.jpg", "status": "away" }
+    },
+    {
+      "name": "Initials + online",
+      "props": { "size": "md", "name": "Morgan Blake", "status": "online" }
+    },
+    {
+      "name": "Grayscale photo",
+      "props": {
+        "size": "md",
+        "name": "Photo user",
+        "imageUrl": "https://randomuser.me/api/portraits/women/68.jpg",
+        "grayscale": true
+      }
+    },
+    {
+      "name": "Component overlay",
+      "props": {
+        "size": "lg",
+        "name": "Jordan Lee",
+        "imageUrl": "https://randomuser.me/api/portraits/women/68.jpg",
+        "componentOverlay": {
+          "component": "badge",
+          "placement": "top-right",
+          "text": "12",
+          "variant": "error"
+        }
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "status_indicator": {
+      "when": { "status": "online" },
+      "message": "Status shows a dot when name or image is set; it does not appear when using component overlay mode.",
+      "type": "info"
+    },
+    "image_fallback": {
+      "when": { "imageUrl": "https://unsplash.it/200/200" },
+      "message": "If the image fails to load, initials from name are shown instead.",
+      "type": "info"
+    },
+    "component_overlay_info": {
+      "presetName": "Component overlay",
+      "message": "Use componentOverlay to add a badge or icon to the avatar. Click 'component overlay' to see an example.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,107 @@
+{
+  "template": "<Background{{props}}>{{children}}</Background>",
+  "propTargets": {},
+  "defaults": {
+    "backgroundColor": "light",
+    "backgroundSize": "cover",
+    "backgroundRepeat": "initial",
+    "tag": "div"
+  },
+  "children": {
+    "editable": true,
+    "default": "Content on background"
+  },
+  "groups": [
+    {
+      "name": "Color",
+      "props": [
+        "backgroundColor",
+        "customColor"
+      ]
+    },
+    {
+      "name": "Image",
+      "props": [
+        "imageUrl",
+        "alt",
+        "imageOverlay"
+      ]
+    },
+    {
+      "name": "Image layout",
+      "props": [
+        "backgroundSize",
+        "backgroundPosition",
+        "backgroundRepeat"
+      ]
+    },
+    {
+      "name": "Other",
+      "props": [
+        "tag",
+        "transition"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Light",
+      "props": {
+        "backgroundColor": "light",
+        "padding": "md"
+      },
+      "children": "Default light background"
+    },
+    {
+      "name": "White",
+      "props": {
+        "backgroundColor": "white",
+        "padding": "md"
+      },
+      "children": "White surface"
+    },
+    {
+      "name": "Dark",
+      "props": {
+        "backgroundColor": "dark",
+        "padding": "md"
+      },
+      "children": "<Body text=\"Dark surface\" dark />"
+    },
+    {
+      "name": "Background Image",
+      "props": {
+        "imageUrl": "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
+        "padding": "md",
+        "transition": "fade"
+      },
+      "children": "<Body text=\"Background Image\" />"
+    }
+  ],
+  "conditionals": {
+    "alt": {
+      "requires": "imageUrl"
+    },
+    "imageOverlay": {
+      "requires": "imageUrl"
+    },
+    "backgroundSize": {
+      "requires": "imageUrl"
+    },
+    "backgroundPosition": {
+      "requires": "imageUrl"
+    },
+    "backgroundRepeat": {
+      "requires": "imageUrl"
+    }
+  },
+  "hints": {
+    "image_colors": {
+      "when": {
+        "imageUrl": true
+      },
+      "message": "With an image URL set, backgroundColor still applies behind or as tint depending on overlay and size.",
+      "type": "info"
+    }
+  }
+}

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

@@ -0,0 +1,72 @@
+{
+  "children": {
+    "default": "Content on background"
+  },
+  "groups": [
+    {
+      "name": "Color",
+      "props": ["backgroundColor", "customColor"]
+    },
+    {
+      "name": "Image",
+      "props": ["imageUrl", "alt", "imageOverlay"]
+    },
+    {
+      "name": "Image layout",
+      "props": ["backgroundSize", "backgroundPosition", "backgroundRepeat"]
+    },
+    {
+      "name": "Other",
+      "props": ["tag", "transition"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Light",
+      "props": {
+        "backgroundColor": "light",
+        "padding": "md"
+      },
+      "children": "Default light background"
+    },
+    {
+      "name": "White",
+      "props": {
+        "backgroundColor": "white",
+        "padding": "md"
+      },
+      "children": "White surface"
+    },
+    {
+      "name": "Dark",
+      "props": {
+        "backgroundColor": "dark",
+        "padding": "md"
+      },
+      "children": "<Body text=\"Dark surface\" dark />"
+    },
+    {
+      "name": "Background Image",
+      "props": {
+        "imageUrl":"https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
+        "padding": "md",
+        "transition": "fade"
+      },
+      "children": "<Body text=\"Background Image\" />"
+    }
+  ],
+  "conditionals": {
+    "alt": { "requires": "imageUrl" },
+    "imageOverlay": { "requires": "imageUrl" },
+    "backgroundSize": { "requires": "imageUrl" },
+    "backgroundPosition": { "requires": "imageUrl" },
+    "backgroundRepeat": { "requires": "imageUrl" }
+  },
+  "hints": {
+    "image_colors": {
+      "when": { "imageUrl": true },
+      "message": "With an image URL set, backgroundColor still applies behind or as tint depending on overlay and size.",
+      "type": "info"
+    }
+  }
+}