playbook_ui_docs 13.25.0 → 13.26.0.pre.alpha.jasoncypretpatch12816

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("loading_inline", props: {
+    text: "Saving"
+}) %> 
+
+<%= pb_rails("loading_inline", props: {
+    align: "center",
+    text: "Saving"
+}) %> 
+
+<%= pb_rails("loading_inline", props: {
+    align: "right",
+    text: "Saving",
+}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import LoadingInline from '../_loading_inline'
+
+const LoadingInlineCustom = (props) => {
+  return (
+    <div>
+      <LoadingInline
+          text=' Saving'
+          {...props}
+      />
+      <LoadingInline
+          align="center"
+          text=' Saving'      
+          {...props}
+      />
+      <LoadingInline
+          align="right"
+          text=' Saving'
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineCustom

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb}

@@ -1,9 +1,9 @@
 <%= pb_rails("loading_inline") %>
 
 <%= pb_rails("loading_inline", props: {
-	align: "center"
+    align: "center"
 }) %>
 
 <%= pb_rails("loading_inline", props: {
-	align: "right"
+    align: "right"
 }) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import LoadingInline from '../_loading_inline'
 
-const LoadingInlineLight = (props) => {
+const LoadingInlineDefault = (props) => {
   return (
     <div>
       <LoadingInline
@@ -20,4 +20,4 @@ const LoadingInlineLight = (props) => {
   )
 }
 
-export default LoadingInlineLight
+export default LoadingInlineDefault

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml

@@ -1,9 +1,11 @@
 examples:
   
   rails:
-  - loading_inline_light: Light
+  - loading_inline_default: Default
+  - loading_inline_custom: Custom Text
 
   
   
   react:
-  - loading_inline_light: Default
+  - loading_inline_default: Default
+  - loading_inline_custom: Custom Text

data/app/pb_kits/playbook/pb_loading_inline/docs/index.js

@@ -1 +1,2 @@
-export { default as LoadingInlineLight } from './_loading_inline_light.jsx'
+export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
+export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("flex") do %>
+ <%= pb_rails("progress_simple", props: { flex: "1", percent: 50 }) %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Flex, ProgressSimple } from '../..'
+
+const ProgressSimpleFlex = () => {
+  return (
+    <Flex>
+      <ProgressSimple
+          align="left"
+          flex="1"
+          percent={68}
+      />
+    </Flex>
+  )
+}
+
+export default ProgressSimpleFlex

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md

@@ -0,0 +1 @@
+When rendering a Progress Simple through within a Flex container, you must pass `flex="1"` to the kit itself so that it fills the available space

data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml

@@ -3,6 +3,7 @@ examples:
   rails:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
+  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted
@@ -12,6 +13,7 @@ examples:
   react:
   - progress_simple_default: Default
   - progress_simple_value: Setting Values
+  - progress_simple_flex: Within a Flex  
   - progress_simple_width: Progress Bar Width
   - progress_simple_variants: Variants
   - progress_simple_muted: Muted

data/app/pb_kits/playbook/pb_progress_simple/docs/index.js

@@ -2,6 +2,7 @@ export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
 export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
 export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
 export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
+export { default as ProgressSimpleFlex } from './_progress_simple_flex.jsx'
 export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
 export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
 

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Flex, Radio } from '../../'
 
-const RadioAlignment = () => {
+const RadioAlignment = (props) => {
   return (
     <Flex>
       <Radio
@@ -11,6 +11,7 @@ const RadioAlignment = () => {
           name="Group2"
           tabIndex={0}
           value="Power"
+          {...props}
       />
       <br />
       <Radio
@@ -20,6 +21,7 @@ const RadioAlignment = () => {
           marginRight="sm"
           name="Group2"
           value="Nitro"
+          {...props}
       />
       <br />
       <Radio
@@ -28,6 +30,7 @@ const RadioAlignment = () => {
           label="Google"
           name="Group2"
           value="Google"
+          {...props}
       />
     </Flex>
   )

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Radio from '../_radio'
 
-const RadioDefault = () => {
+const RadioDefault = (props) => {
   const ref = React.createRef()
 
   return (
@@ -13,6 +13,7 @@ const RadioDefault = () => {
           ref={ref}
           tabIndex={0}
           value="Power"
+          {...props}
       />
       <br />
       <Radio
@@ -20,6 +21,7 @@ const RadioDefault = () => {
           label="Nitro"
           name="Group2"
           value="Nitro"
+          {...props}
       />
       <br />
       <Radio
@@ -27,6 +29,7 @@ const RadioDefault = () => {
           label="Google"
           name="Group2"
           value="Google"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("radio", props: {
+            text: "Disabled unselected",
+            input_options: {
+                tabindex: 0,
+                disabled: true,
+            },
+            margin_bottom: "xs",
+            name: "DisabledGroup",
+            value: "Disabled unselected",
+        }) %>
+    <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("radio", props: {
+            text: "Disabled selected",
+            input_options: {
+                tabindex: 0,
+                disabled: true,
+            },
+            checked: true,
+            name: "DisabledGroup",
+            value: "Disabled selected"
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Radio from '../_radio'
+
+const RadioDisabled = (props) => {
+  const ref = React.createRef()
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+        <Radio 
+            disabled
+            label="Disabled unselected"
+            marginBottom="xs"
+            name="DisabledGroup"
+            ref={ref}
+            tabIndex={0}
+            value="Disabled unselected"
+            {...props}
+        />
+        <Radio
+            checked 
+            disabled
+            label="Disabled selected"
+            name="DisabledGroup"
+            value="Disabled selected"
+            {...props}
+        />
+    </div>
+  )
+}
+export default RadioDisabled

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Radio } from '../..'
 
-const RadioError = () => {
+const RadioError = (props) => {
   return (
     <div>
       <Radio
@@ -9,6 +9,7 @@ const RadioError = () => {
           label="Power"
           name="Group2"
           value="Power"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_radio/docs/example.yml

@@ -6,12 +6,14 @@ examples:
   - radio_error: With Error
   - radio_options: With Options
   - radio_alignment: Alignment
+  - radio_disabled: Disabled
 
   react:
   - radio_default: Default
   - radio_custom: Custom
   - radio_error: With Error
   - radio_alignment: Alignment
+  - radio_disabled: Disabled
 
   swift:
   - radio_default_swift: Default

data/app/pb_kits/playbook/pb_radio/docs/index.js

@@ -2,3 +2,4 @@ export { default as RadioDefault } from './_radio_default.jsx'
 export { default as RadioCustom } from './_radio_custom.jsx'
 export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
+export { default as RadioDisabled } from './_radio_disabled.jsx'

data/dist/app/components/playbook/pb_docs/advanced_table_mock_data.json

@@ -0,0 +1,278 @@
+[
+  {
+    "year": "2021",
+    "quarter": null,
+    "month": null,
+    "day": null,
+    "newEnrollments": "20",
+    "scheduledMeetings": "10",
+    "attendanceRate": "51%",
+    "completedClasses": "3",
+    "classCompletionRate": "33%",
+    "graduatedStudents": "19",
+    "children": [
+      {
+        "year": "2021",
+        "quarter": "Q1",
+        "month": null,
+        "day": null,
+        "newEnrollments": "2",
+        "scheduledMeetings": "35",
+        "attendanceRate": "32%",
+        "completedClasses": "15",
+        "classCompletionRate": "52%",
+        "graduatedStudents": "36",
+        "children": [
+          {
+            "year": "2021",
+            "quarter": "Q1",
+            "month": "January",
+            "day": null,
+            "newEnrollments": "16",
+            "scheduledMeetings": "20",
+            "attendanceRate": "11%",
+            "completedClasses": "13",
+            "classCompletionRate": "47%",
+            "graduatedStudents": "28",
+            "children": [
+              {
+                "year": "2021",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "10",
+                "newEnrollments": "34",
+                "scheduledMeetings": "28",
+                "attendanceRate": "97%",
+                "completedClasses": "20",
+                "classCompletionRate": "15%",
+                "graduatedStudents": "17"
+              },
+              {
+                "year": "2021",
+                "quarter": "Q1",
+                "month": "January",
+                "day": "20",
+                "newEnrollments": "43",
+                "scheduledMeetings": "23",
+                "attendanceRate": "66%",
+                "completedClasses": "26",
+                "classCompletionRate": "47%",
+                "graduatedStudents": "9"
+              }
+            ]
+          },
+          {
+            "year": "2021",
+            "quarter": "Q1",
+            "month": "February",
+            "day": null,
+            "newEnrollments": "20",
+            "scheduledMeetings": "41",
+            "attendanceRate": "95%",
+            "completedClasses": "26",
+            "classCompletionRate": "83%",
+            "graduatedStudents": "43",
+            "children": [
+              {
+                "year": "2021",
+                "quarter": "Q1",
+                "month": "February",
+                "day": "15",
+                "newEnrollments": "19",
+                "scheduledMeetings": "35",
+                "attendanceRate": "69%",
+                "completedClasses": "8",
+                "classCompletionRate": "75%",
+                "graduatedStudents": "23"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "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": "2022",
+                "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/dist/menu.yml

@@ -53,7 +53,7 @@ kits:
         description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. 
         status: "stable"
       - name: "advanced_table"
-        platforms: *react_only
+        platforms: *web
         description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
         status: "stable" 
       - name: "list"