playbook_ui_docs 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb645d343c3580319a82fa836f7e791a083155f956e21b51deda0fce6c46a75c
-  data.tar.gz: 0a1f7014a2432c3eec139d68e3483ff9fa5f8dda4f82367f3f0ae7866e7622f2
+  metadata.gz: f7c66ed8e52fddcdc129f13bada17484e99d4960f7fcc69945ce5b434993bffd
+  data.tar.gz: 2d52ca11b3fd6ed8260d73e1f3c8b09ac71feef593016680d293d594f788dd2f
 SHA512:
-  metadata.gz: 2ffd1e0f5a31b83f2d28a33be23929442de5d5746436eed34ae1b5c0a3fcbebf3949ec0feee2897d98d98218b3a55ddae0e047f222cb23e90e2c22c7150371f4
-  data.tar.gz: 50e814bc1ee604f1134bf7646c397ad95ea04a1ee1896e4dfdfb0423f86a2aced8ee1ce28930c20d5ea1dad80c1db8a69bc969e00f4ffbb4fab1b7dd8662e121
+  metadata.gz: 80c0439c5ad64372cbb1edf660902e66f2a9d09415bfb7457734ba05c0f10848ed08184c634f4d748979525c1c43b4db60c18c2df4b1d7c0f54832c5e5e92937
+  data.tar.gz: ba275df94e320f1ef3aee4a821d549dbe6b9abee3cf99b389a8a448bdd8fed1d345262d1088faf593c8d0868dccb4b1c3102cfb9702163800be5247ee51a357a

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -49,9 +49,11 @@
       label: "Graduated Students",
     }
   ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
 %>
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -36,5 +36,5 @@
 
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "test_table", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md

@@ -1,3 +1,3 @@
 `subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle expansion button will appear in the table header as well as in the subRow headers. If set to "header", the button will only appear in header and NOT in subRow headers. This prop is set to "header" by default.
+`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

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

@@ -2,12 +2,8 @@ examples:
   rails:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
-  - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
-  - advanced_table_column_headers: Multi-Header Columns
-  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-
 
   react:
   - advanced_table_default: Default (Required Props)
@@ -22,7 +18,3 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
-  - advanced_table_pagination: Pagination
-  - advanced_table_pagination_with_props: Pagination Props
-  - advanced_table_column_headers: Multi-Header Columns
-  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)

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

@@ -10,7 +10,3 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
-export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
-export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
-export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx

@@ -1,70 +1,66 @@
 import React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import BarGraph from '../_bar_graph'
-import Icon from '../../pb_icon/_icon'
 
-const chartData = [
-  {
-    name: 'Role',
-    data: [0, 200, 300, 654, 656],
-  },
-  {
-    name: 'Company',
-    data: [150, 524, 320, 440, 500],
-  },
-]
+import BarGraph from '../_bar_graph'
 
-const renderIcon = (iconName, color) => {
-  return ReactDOMServer.renderToStaticMarkup(
-  <Icon
-      color={color}
-      icon={iconName}
-  />)
-};
+const chartData = [{
+  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],
+}]
 
 const barGraphOptions = {
-  yAxis: {
-    tickInterval: 5,
+  subtitle: {
+    text: "Overwritten subtitle",
+    style: {
+      color: "red"
+    }
   },
   xAxis: {
-    categories: ['1', '2', '3', '4', '5'],
-    labels: {
-      useHTML: true,
-      formatter: function () {
-        switch (this.value) {
-          case '1':
-            return `${renderIcon('frown', 'error')}`;
-          case '2':
-            return `${renderIcon('frown', 'warning')}`;
-          case '3':
-            return `${renderIcon('frown-open', 'neutral')}`;
-          case '4':
-            return `${renderIcon('smile', 'category_7')}`;
-          case '5':
-            return `${renderIcon('smile-beam', 'success')}`;
-          default:
-            return ''
-        }
-      },
-      style: {
-        fontSize: '1.4em',
-      },
-      y: 42,
-    },
-  },
-  legend: {
-    itemMarginTop: 62,
-  },
+      labels: {
+          useHTML: true,
+          formatter: function() {
+              switch (this.value) {
+                  case 'Jan':
+                      return `<i class="far fa-apple-whole"></i> ${this.value}`
+                  case 'Feb':
+                      return `<i class="far fa-strawberry"></i> ${this.value}`
+                  case 'Mar':
+                      return `<i class="far fa-lemon"></i> ${this.value}`
+                  case 'Apr':
+                      return `<i class="far fa-pear"></i> ${this.value}`
+                  case 'May':
+                      return `<i class="far fa-peach"></i> ${this.value}`
+                  default:
+                      return ''
+              }
+          }
+      }
+  }
 }
 
-const BarGraphCustom = () => (
+const BarGraphCustom = (props) => (
   <div>
     <BarGraph
+        axisTitle="Number of Employees"
         chartData={chartData}
         customOptions={barGraphOptions}
-        id="happiness-dashboard"
-        legend
+        id="bar-custom"
+        subTitle="Subtitle to replace"
         title="Bar Graph with Custom Overrides"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb

@@ -1,42 +1,49 @@
 <% data = [{
-  name: 'Role',
-  data: [0, 200, 300, 654, 656],
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
 }, {
-  name: 'Company',
-  data: [150, 524, 320, 440, 500],
+    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]
 }] %>
 
 <% bar_graph_options = {
-  customOptions: {
-    yAxis: {
-      tickInterval: 5,
-    },
-    xAxis: {
-      categories: [
-        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
-      ],
-      labels: {
-        useHTML: true,
-        sytle: {
-          fontSize: '1.4em',
+    customOptions: {
+        subtitle: {
+            text: "Overwritten subtitle",
+            style: {
+                color: "red"
+            }
         },
-        y: 42,
-      },
-    },
-    legend: {
-      itemMarginTop: 62,
-    },
-  } 
+        xAxis: {
+            categories: [
+                '<i class="far fa-apple-whole"></i> Jan',
+                '<i class="far fa-strawberry"></i> Feb',
+                '<i class="far fa-lemon"></i> Mar',
+                '<i class="far fa-pear"></i> Apr',
+                '<i class="far fa-peach"></i> May'
+            ],
+            labels: {
+                useHTML: true,
+            }
+        }
+    }
 } %>
 
 <%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
     chart_data: data,
     id: "bar-default",
-    legend: true,
+    y_axis_min: 0,
+    subtitle: 'Subtitle to replace',
     title: 'Bar Graph with Custom Overrides',
     custom_options: bar_graph_options
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -13,7 +13,6 @@ const BreadCrumbsDefault = (props) => {
       <Icon
           icon="home"
           size="1x"
-          {...props}
       />
       <BreadCrumbItem
           {...props}
@@ -23,13 +22,11 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Home"
-            {...props}
         />
       </BreadCrumbItem>
       <Icon
           icon="users"
           size="1x"
-          {...props}
       />
       <Link
           {...props}
@@ -39,20 +36,17 @@ const BreadCrumbsDefault = (props) => {
             size="4"
             tag="span"
             text="Users"
-            {...props}
         />
       </Link>
       <Icon
           icon="user"
           size="1x"
-          {...props}
       />
       <Link {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
-            {...props}
         />
       </Link>
     </BreadCrumbs>

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -67,42 +67,4 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
-
-<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success" }) do %>
-    <%= pb_rails("body", props: { text: "Success", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error" }) do %>
-    <%= pb_rails("body", props: { text: "Error", dark: true }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
-    <%= pb_rails("body", props: { text: "Success Subtle" }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
-    <%= pb_rails("body", props: { text: "Error Subtle"}) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -181,96 +181,6 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
-
-            <Title
-                {...props}
-                marginBottom='sm'
-                size={4}
-                tag="h4"
-                text="Status Colors"
-            />
-
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="success"
-                >
-                    <Body
-                        dark
-                        text="Success"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="error"
-                >
-                    <Body
-                        dark
-                        text="Error"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="success_subtle"
-                >
-                    <Body
-                        text="Success Subtle"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="error_subtle"
-                >
-                    <Body
-                        text="Error Subtle"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb

@@ -10,11 +10,3 @@
   link: "https://google.com",
   new_window: true
 }) %>
-<br/>
-<%= pb_rails("circle_icon_button", props: {
-  icon: "info",
-  variant: "secondary",
-  aria: { label: "Link to Playbook in new window" },
-  link: "https://playbook.powerapp.cloud/",
-  target: "child"
-}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -21,15 +21,6 @@ const CircleIconButtonLink = (props) => (
         {...props}
     />
 
-    <br/>
-
-    <CircleIconButton
-        aria={{ label: "Link to Playbook in new window" }}
-        icon="info"
-        link="https://playbook.powerapp.cloud/"
-        target="child"
-        variant="secondary"
-    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -28,9 +28,7 @@ const FileUploadAccept = (props) => {
           {...props}
       />
       <FileUpload
-          accept={{
-            "image/svg+xml": [".svg", ".xml"],
-          }}
+          accept={['image/svg+xml']}
           onFilesAccepted={handleOnFilesAccepted}
           {...props}
       />

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -25,10 +25,7 @@ const FileUploadCustomDescription = (props) => {
           {...props}
       />
       <FileUpload
-          accept={{
-            "application/pdf": [".pdf"],
-            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
-          }}
+          accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
           acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
           onFilesAccepted={handleOnFilesAccepted}
           {...props}

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -18,7 +18,7 @@ const AcceptedFilesList = ({ files }) => (
 const RejectedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
-      <ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
+      <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
     ))}
   </List>
 )

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -17,60 +17,47 @@ const GaugeComplex = (props) => (
       gap="sm"
       padding="xl"
       wrap
-      {...props}
   >
     <FlexItem
         flex={1}
         grow
-        {...props}
     >
       <Card
           maxWidth="xs"
           padding="md"
-          {...props}
       >
         <Title
             paddingBottom="sm"
             size={4}
             text="Abandoned Calls"
-            {...props}
         />
-        <Flex
-            align="stretch"
-            {...props}
-        >
+        <Flex align="stretch">
           <Flex
               marginRight="sm"
               orientation="column"
-              {...props}
           >
             <Body
                 color="light"
                 paddingBottom="sm"
                 text="Total Abandoned"
-                {...props}
             />
             <Flex
                 align="baseline"
                 paddingBottom="xs"
-                {...props}
             >
               <Title
                   size={1}
                   text="39"
-                  {...props}
               />
               <Title
                   color="light"
                   size={3}
                   text="calls"
-                  {...props}
               />
             </Flex>
             <Caption
                 size="xs"
                 text="of 390"
-                {...props}
             />
           </Flex>
 
@@ -78,29 +65,22 @@ const GaugeComplex = (props) => (
               alignSelf="stretch"
               marginRight="sm"
               orientation="vertical"
-              {...props}
           />
 
           <Flex
               orientation="column"
               wrap
-              {...props}
           >
               <Body
                   color="light"
                   text="% Abandoned"
-                  {...props}
-              />
-            <Flex
-                wrap
-                {...props}
-            >
+               />
+            <Flex wrap>
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-                  {...props}
-              >
+              > 
                 <Gauge
                     chartData={data}
                     disableAnimation
@@ -110,7 +90,7 @@ const GaugeComplex = (props) => (
                     {...props}
                 />
                </FlexItem>
-            </Flex>
+            </Flex>  
           </Flex>
         </Flex>
       </Card>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb

@@ -24,20 +24,4 @@
   state: "PA",
   zipcode: "19382",
   territory: "PHL",
-}) %>
-
-<br>
-<br>
-
-<%= pb_rails("home_address_street", props: {
-  address: "70 Prospect Ave",
-  address_cont: "Apt M18",
-  city: "West Chester",
-  emphasis: "none",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  house_style: "Colonial",
-  state: "PA",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>
+}) %>