playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -4,8 +4,9 @@
   "defaults": {
     "active": false,
     "variant": "default",
-    "label": "Revenue",
-    "value": "1428"
+    "label": "Role",
+    "value": "Administrator, Moderator",
+    "dark": false
   },
   "groups": [
     {
@@ -16,62 +17,78 @@
       ]
     },
     {
-      "name": "Details & appearance",
+      "name": "Details",
       "props": [
         "variant",
         "icon",
         "description",
         "title",
-        "active",
-        "date"
+        "date",
+        "active"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "dark"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Label + value",
+      "name": "Role",
       "props": {
-        "label": "Revenue",
-        "value": "1428",
+        "label": "Role",
+        "value": "Administrator, Moderator",
         "variant": "default"
       }
     },
     {
-      "name": "Amount + unit",
+      "name": "Email",
       "props": {
-        "label": "Balance",
-        "value": "$2,000.00",
+        "label": "Email",
+        "value": "anna.black@powerhrg.com",
         "variant": "default"
       }
     },
     {
-      "name": "Percent",
+      "name": "Long Bio",
       "props": {
-        "label": "Growth",
-        "value": "15%",
+        "label": "Bio",
+        "value": "Proin pulvinar feugiat massa in luctus. Donec urna nulla, elementum sit amet tincidunt nec, mattis nec urna.",
         "variant": "default"
       }
     },
     {
-      "name": "Details row",
+      "name": "Details Row",
       "props": {
         "variant": "details",
-        "label": "Activity",
-        "icon": "dumbbell",
-        "description": "Q1 campaign",
-        "title": "Review budget",
-        "active": true
+        "label": "Project",
+        "icon": "home",
+        "description": "33-12345",
+        "title": "Jefferson-Smith"
       }
     },
     {
-      "name": "Details (inactive)",
+      "name": "Details With Date",
       "props": {
         "variant": "details",
-        "label": "Snapshot",
-        "icon": "clipboard",
-        "description": "Draft",
-        "title": "FY report",
-        "active": false
+        "label": "Project",
+        "icon": "home",
+        "description": "33-12345",
+        "title": "Jefferson-Smith",
+        "date": "2019-11-18T00:00:00.000Z"
+      }
+    },
+    {
+      "name": "Active Details",
+      "props": {
+        "variant": "details",
+        "label": "Chest",
+        "icon": "dumbbell",
+        "description": "6 sets - 8 reps - 40-100 kg",
+        "title": "Bench Press",
+        "active": true
       }
     }
   ],
@@ -108,18 +125,24 @@
     }
   },
   "hints": {
-    "details_variant": {
-      "when": {
-        "variant": "details"
-      },
-      "message": "Details variant shows icon, description, and title/date in a row; the default variant shows label + body value only.",
+    "role": {
+      "presetName": "Role",
+      "message": "Use the label and value props to render a label and value.",
       "type": "info"
     },
-    "active_links": {
-      "when": {
-        "active": true
-      },
-      "message": "When active is true, the title and date use the link title variant.",
+    "details_row": {
+      "presetName": "Details Row",
+      "message": "Use the variant prop to change the style of the label value.",
+      "type": "info"
+    },
+    "details_with_date": {
+      "presetName": "Details With Date",
+      "message": "Use the date prop to pass a date object.",
+      "type": "info"
+    },
+    "active_details": {
+      "presetName": "Active Details",
+      "message": "Use the active prop to change the style of the label value.",
       "type": "info"
     }
   }

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

@@ -1,33 +1,94 @@
 {
   "defaults": {
-    "label": "Revenue",
-    "value": "1428",
-    "variant": "default"
+    "label": "Role",
+    "value": "Administrator, Moderator",
+    "variant": "default",
+    "active": false,
+    "dark": false
   },
   "groups": [
-    { "name": "Content", "props": ["label", "value"] },
-    { "name": "Details & appearance", "props": ["variant", "icon", "description", "title", "active", "date"] }
+    {
+      "name": "Content",
+      "props": [
+        "label",
+        "value"
+      ]
+    },
+    {
+      "name": "Details",
+      "props": [
+        "variant",
+        "icon",
+        "description",
+        "title",
+        "date",
+        "active"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "dark"
+      ]
+    }
   ],
   "presets": [
-    { "name": "Label + value", "props": { "label": "Revenue", "value": "1428", "variant": "default" } },
-    { "name": "Amount + unit", "props": { "label": "Balance", "value": "$2,000.00", "variant": "default" } },
-    { "name": "Percent", "props": { "label": "Growth", "value": "15%", "variant": "default" } },
-    { "name": "Details row", "props": {
-      "variant": "details",
-      "label": "Activity",
-      "icon": "dumbbell",
-      "description": "Q1 campaign",
-      "title": "Review budget",
-      "active": true
-    } },
-    { "name": "Details (inactive)", "props": {
-      "variant": "details",
-      "label": "Snapshot",
-      "icon": "clipboard",
-      "description": "Draft",
-      "title": "FY report",
-      "active": false
-    } }
+    {
+      "name": "Role",
+      "props": {
+        "label": "Role",
+        "value": "Administrator, Moderator",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Email",
+      "props": {
+        "label": "Email",
+        "value": "anna.black@powerhrg.com",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Long Bio",
+      "props": {
+        "label": "Bio",
+        "value": "Proin pulvinar feugiat massa in luctus. Donec urna nulla, elementum sit amet tincidunt nec, mattis nec urna.",
+        "variant": "default"
+      }
+    },
+    {
+      "name": "Details Row",
+      "props": {
+        "variant": "details",
+        "label": "Project",
+        "icon": "home",
+        "description": "33-12345",
+        "title": "Jefferson-Smith"
+      }
+    },
+    {
+      "name": "Details With Date",
+      "props": {
+        "variant": "details",
+        "label": "Project",
+        "icon": "home",
+        "description": "33-12345",
+        "title": "Jefferson-Smith",
+        "date": "2019-11-18T00:00:00.000Z"
+      }
+    },
+    {
+      "name": "Active Details",
+      "props": {
+        "variant": "details",
+        "label": "Chest",
+        "icon": "dumbbell",
+        "description": "6 sets - 8 reps - 40-100 kg",
+        "title": "Bench Press",
+        "active": true
+      }
+    }
   ],
   "conditionals": {
     "icon": { "requires": { "variant": "details" } },
@@ -38,14 +99,24 @@
     "value": { "requires": { "variant": "default" } }
   },
   "hints": {
-    "details_variant": {
-      "when": { "variant": "details" },
-      "message": "Details variant shows icon, description, and title/date in a row; the default variant shows label + body value only.",
+    "role": {
+      "presetName": "Role",
+      "message": "Use the label and value props to render a label and value.",
+      "type": "info"
+    },
+    "details_row": {
+      "presetName": "Details Row",
+      "message": "Use the variant prop to change the style of the label value.",
+      "type": "info"
+    },
+    "details_with_date": {
+      "presetName": "Details With Date",
+      "message": "Use the date prop to pass a date object.",
       "type": "info"
     },
-    "active_links": {
-      "when": { "active": true },
-      "message": "When active is true, the title and date use the link title variant.",
+    "active_details": {
+      "presetName": "Active Details",
+      "message": "Use the active prop to change the style of the label value.",
       "type": "info"
     }
   }

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

@@ -15,26 +15,232 @@
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Layout",
+      "props": [
+        "layout",
+        "responsive"
+      ]
+    },
+    {
+      "name": "Sidebar",
       "props": [
-        "collapse",
-        "dark",
-        "full",
         "position",
-        "responsive",
+        "collapse",
         "size",
+        "full"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
         "variant",
         "transparent",
-        "layout"
+        "dark"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "name": "Sidebar",
+      "structureMode": "sidebar",
+      "props": {
+        "layout": "sidebar",
+        "position": "left",
+        "collapse": "md",
+        "size": "md",
+        "variant": "light"
+      },
+      "children": "<Layout.Side>\n  Side\n</Layout.Side>\n<Layout.Body>\n  Body\n</Layout.Body>"
+    },
+    {
+      "name": "Right Sidebar",
+      "structureMode": "sidebar",
+      "props": {
+        "layout": "sidebar",
+        "position": "right",
+        "collapse": "lg",
+        "size": "sm",
+        "variant": "dark",
+        "dark": true
+      },
+      "children": "<Layout.Side>\n  Side\n</Layout.Side>\n<Layout.Body>\n  Body\n</Layout.Body>"
+    },
+    {
+      "name": "Collection",
+      "structureMode": "collection",
+      "props": {
+        "layout": "collection"
+      },
+      "children": "<Layout.Body>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n</Layout.Body>"
+    },
+    {
+      "name": "Collection Detail",
+      "structureMode": "collection_detail",
+      "props": {
+        "layout": "collection_detail"
+      },
+      "children": "<Card padding=\"none\">\n  <Nav link=\"#\" orientation=\"vertical\" title=\"Menu\">\n    <NavItem link=\"#\" text=\"Overview\" />\n    <NavItem active link=\"#\" text=\"Activity\" />\n    <NavItem link=\"#\" text=\"Files\" />\n  </Nav>\n</Card>\n<Layout.Body>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n</Layout.Body>"
+    },
+    {
+      "name": "Content",
+      "structureMode": "content",
+      "props": {
+        "layout": "content"
+      },
+      "children": "<Layout.Header>\n  <Card padding=\"sm\"><Title size={4} text=\"Header\" /></Card>\n</Layout.Header>\n<Layout.Side>\n  <Card padding=\"sm\"><Body text=\"Supporting navigation or metadata.\" /></Card>\n</Layout.Side>\n<Layout.Body>\n  <Card padding=\"md\"><Title size={3} text=\"Article Content\" /><Body text=\"Main content area with a longer reading surface.\" /></Card>\n</Layout.Body>\n<Layout.Footer>\n  <Card padding=\"sm\"><Body text=\"Footer content\" /></Card>\n</Layout.Footer>"
+    },
+    {
+      "name": "Kanban",
+      "structureMode": "kanban",
+      "props": {
+        "layout": "kanban",
+        "responsive": true
+      },
+      "children": "<Layout.Body>\n  <Caption text=\"Queue\" />\n  <Card padding=\"sm\"><Title size={4} text=\"Design Homepage\" /><Body text=\"Owner: Ada\" /></Card>\n  <Card padding=\"sm\"><Title size={4} text=\"Update Icons\" /><Body text=\"Owner: Grace\" /></Card>\n</Layout.Body>\n<Layout.Body>\n  <Caption text=\"In Progress\" />\n  <Card padding=\"sm\"><Title size={4} text=\"Dashboard Updates\" /><Body text=\"Owner: Katherine\" /></Card>\n</Layout.Body>\n<Layout.Body>\n  <Caption text=\"Done\" />\n  <Card padding=\"sm\"><Title size={4} text=\"QA Review\" /><Body text=\"Owner: Margaret\" /></Card>\n</Layout.Body>"
+    },
+    {
+      "name": "Masonry",
+      "structureMode": "masonry",
+      "props": {
+        "layout": "masonry"
+      },
+      "children": "<Layout.Body>\n  <Layout.Item>\n    <Image url=\"https://unsplash.it/500/400/?image=634\" />\n  </Layout.Item>\n  <Layout.Item size=\"md\">\n    <Image url=\"https://unsplash.it/500/600/?image=635\" />\n  </Layout.Item>\n  <Layout.Item size=\"lg\">\n    <Image url=\"https://unsplash.it/500/700/?image=636\" />\n  </Layout.Item>\n</Layout.Body>"
+    },
+    {
+      "name": "Bracket",
+      "structureMode": "bracket",
+      "props": {
+        "layout": "bracket"
+      },
+      "children": "<Layout.RoundLabel>\n  <Caption text=\"Semifinal\" />\n  <SectionSeparator marginY=\"sm\" />\n</Layout.RoundLabel>\n<Layout.Round>\n  <Layout.Game>\n    <Layout.Participant name=\"Eagles\" points=\"22\" rank=\"#1\" territory=\"PHI\" winner />\n    <Layout.Participant name=\"Packers\" points=\"10\" rank=\"#3\" territory=\"GB\" />\n  </Layout.Game>\n  <Layout.Game>\n    <Layout.Participant name=\"Rams\" points=\"27\" rank=\"#1\" territory=\"LAR\" winner />\n    <Layout.Participant name=\"Vikings\" points=\"9\" rank=\"#2\" territory=\"MIN\" />\n  </Layout.Game>\n</Layout.Round>\n<Layout.RoundLabel>\n  <Caption text=\"Final\" />\n  <SectionSeparator marginY=\"sm\" />\n</Layout.RoundLabel>\n<Layout.Round>\n  <Layout.Game>\n    <Layout.Participant name=\"Eagles\" points=\"24\" rank=\"#1\" self territory=\"PHI\" winner />\n    <Layout.Participant name=\"Rams\" points=\"17\" rank=\"#1\" territory=\"LAR\" />\n  </Layout.Game>\n</Layout.Round>"
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "position": {
+      "requires": {
+        "layout": "sidebar"
+      }
+    },
+    "collapse": {
+      "requires": {
+        "layout": "sidebar"
+      }
+    },
+    "size": {
+      "requires": {
+        "layout": "sidebar"
+      }
+    },
+    "full": {
+      "requires": {
+        "layout": "sidebar"
+      }
+    },
+    "variant": {
+      "requires": {
+        "layout": "sidebar"
+      }
+    },
+    "transparent": {
+      "requires": {
+        "layout": "sidebar"
+      }
+    },
+    "dark": {
+      "requires": {
+        "layout": "sidebar"
+      }
+    },
+    "responsive": {
+      "requires": {
+        "layout": "kanban"
+      }
+    }
+  },
+  "hints": {
+    "sidebar": {
+      "presetName": "Sidebar",
+      "message": "Sidebar uses Layout.Side and Layout.Body, with sidebar controls for position, size, collapse, and variant.",
+      "type": "info"
+    },
+    "right_sidebar": {
+      "presetName": "Right Sidebar",
+      "message": "Right Sidebar moves Layout.Side to the right and uses the dark sidebar variant.",
+      "type": "info"
+    },
+    "collection": {
+      "presetName": "Collection",
+      "message": "Collection arranges repeated cards inside Layout.Body.",
+      "type": "info"
+    },
+    "collection_detail": {
+      "presetName": "Collection Detail",
+      "message": "Collection Detail pairs navigation with a detail body area.",
+      "type": "info"
+    },
+    "content": {
+      "presetName": "Content",
+      "message": "Content shows Header, Side, Body, and Footer regions together.",
+      "type": "info"
+    },
+    "kanban": {
+      "presetName": "Kanban",
+      "message": "Kanban uses multiple Layout.Body columns and enables responsive mode.",
+      "type": "info"
+    },
+    "masonry": {
+      "presetName": "Masonry",
+      "message": "Masonry uses Layout.Item sizes inside Layout.Body.",
+      "type": "info"
+    },
+    "bracket": {
+      "presetName": "Bracket",
+      "message": "Bracket uses Layout.RoundLabel, Layout.Round, Layout.Game, and Layout.Participant.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "sidebar",
+    "modes": {
+      "sidebar": {
+        "label": "Sidebar",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Side>\n  Side\n</Layout.Side>\n<Layout.Body>\n  Body\n</Layout.Body>"
+      },
+      "collection": {
+        "label": "Collection",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Body>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n</Layout.Body>"
+      },
+      "collection_detail": {
+        "label": "Collection detail",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Card padding=\"none\">\n  <Nav link=\"#\" orientation=\"vertical\" title=\"Menu\">\n    <NavItem link=\"#\" text=\"Overview\" />\n    <NavItem active link=\"#\" text=\"Activity\" />\n    <NavItem link=\"#\" text=\"Files\" />\n  </Nav>\n</Card>\n<Layout.Body>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n</Layout.Body>"
+      },
+      "content": {
+        "label": "Content",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Header>\n  <Card padding=\"sm\"><Title size={4} text=\"Header\" /></Card>\n</Layout.Header>\n<Layout.Side>\n  <Card padding=\"sm\"><Body text=\"Supporting navigation or metadata.\" /></Card>\n</Layout.Side>\n<Layout.Body>\n  <Card padding=\"md\"><Title size={3} text=\"Article Content\" /><Body text=\"Main content area with a longer reading surface.\" /></Card>\n</Layout.Body>\n<Layout.Footer>\n  <Card padding=\"sm\"><Body text=\"Footer content\" /></Card>\n</Layout.Footer>"
+      },
+      "kanban": {
+        "label": "Kanban",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Body>\n  <Caption text=\"Queue\" />\n  <Card padding=\"sm\"><Title size={4} text=\"Design Homepage\" /><Body text=\"Owner: Ada\" /></Card>\n  <Card padding=\"sm\"><Title size={4} text=\"Update Icons\" /><Body text=\"Owner: Grace\" /></Card>\n</Layout.Body>\n<Layout.Body>\n  <Caption text=\"In Progress\" />\n  <Card padding=\"sm\"><Title size={4} text=\"Dashboard Updates\" /><Body text=\"Owner: Katherine\" /></Card>\n</Layout.Body>\n<Layout.Body>\n  <Caption text=\"Done\" />\n  <Card padding=\"sm\"><Title size={4} text=\"QA Review\" /><Body text=\"Owner: Margaret\" /></Card>\n</Layout.Body>"
+      },
+      "masonry": {
+        "label": "Masonry",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Body>\n  <Layout.Item>\n    <Image url=\"https://unsplash.it/500/400/?image=634\" />\n  </Layout.Item>\n  <Layout.Item size=\"md\">\n    <Image url=\"https://unsplash.it/500/600/?image=635\" />\n  </Layout.Item>\n  <Layout.Item size=\"lg\">\n    <Image url=\"https://unsplash.it/500/700/?image=636\" />\n  </Layout.Item>\n</Layout.Body>"
+      },
+      "bracket": {
+        "label": "Bracket",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.RoundLabel>\n  <Caption text=\"Semifinal\" />\n  <SectionSeparator marginY=\"sm\" />\n</Layout.RoundLabel>\n<Layout.Round>\n  <Layout.Game>\n    <Layout.Participant name=\"Eagles\" points=\"22\" rank=\"#1\" territory=\"PHI\" winner />\n    <Layout.Participant name=\"Packers\" points=\"10\" rank=\"#3\" territory=\"GB\" />\n  </Layout.Game>\n  <Layout.Game>\n    <Layout.Participant name=\"Rams\" points=\"27\" rank=\"#1\" territory=\"LAR\" winner />\n    <Layout.Participant name=\"Vikings\" points=\"9\" rank=\"#2\" territory=\"MIN\" />\n  </Layout.Game>\n</Layout.Round>\n<Layout.RoundLabel>\n  <Caption text=\"Final\" />\n  <SectionSeparator marginY=\"sm\" />\n</Layout.RoundLabel>\n<Layout.Round>\n  <Layout.Game>\n    <Layout.Participant name=\"Eagles\" points=\"24\" rank=\"#1\" self territory=\"PHI\" winner />\n    <Layout.Participant name=\"Rams\" points=\"17\" rank=\"#1\" territory=\"LAR\" />\n  </Layout.Game>\n</Layout.Round>"
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Layout.Side>\n  Side\n</Layout.Side>\n<Layout.Body>\n  Body\n</Layout.Body>"
+  }
 }