playbook_ui_docs 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4903 → 14.9.0.pre.alpha.PBNTR767advancedtablemultiheadercolumns5136

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d89be2e46880a0bd6bd99ce03a2fb6baa3fea37fb275283324e23142551760f
-  data.tar.gz: 6cc164200a0849d2f7aa5a84c312947bf1d4993cc9febc24b955c6451047fc33
+  metadata.gz: ca443eb2f2a5daaf8274f75d385c8fd5d378ebcd1e53dd12631f5f662c624553
+  data.tar.gz: 7ba2fae136d0d6faf392863f932a8044c2b8c87b98f651213d6b00242266e610
 SHA512:
-  metadata.gz: be6e3c2708e52c342aecda25bbaeeff278df38123d3aa7d275f5025b16eb00d8df65fe049cb42eb7e772e32c800270d8fcfe60da1aa44356a93f658c57905e89
-  data.tar.gz: aa5704f6b6aaa580825f4008b7d733c4656303a721771d671f6d7abbc587bc71948fdd8da77a38970e13be27f964235f02b939dc203d31321f3be566dcd3fd6b
+  metadata.gz: 4e3733de60a629cf01e60f9e28c5bc640ea20ab636fc2f76f8e7a19d5146da48a3d6fcd2b60631f9fbf6aeb6b3aaa946e9cdd2bc41d5e56844658bc2bb1755c3
+  data.tar.gz: 422c9539eb3d7509c7e77dd4fbd4cfee13ad39c760151b87010afb28ddc9bc9f8af181a078aa5baf0a4c80883efb0cc2d291ede37118c04c28a64be55c030ce2

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

@@ -0,0 +1,36 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "collapsible_trail", 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: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
+<% end %>

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

@@ -0,0 +1 @@
+`collapsible_trail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx

@@ -0,0 +1,60 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeaders = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+  
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeaders

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

@@ -0,0 +1 @@
+Use a nested `columns` array in your columnDefinitions to create multiple header rows. Any column with `columns` is treated as a grouped header, and its child columns are displayed beneath it.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { AdvancedTable } from "playbook-ui";
+import MOCK_DATA from "./advanced_table_mock_data.json";
+
+const AdvancedTableColumnHeadersMultiple = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  );
+};
+
+export default AdvancedTableColumnHeadersMultiple;

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

@@ -0,0 +1 @@
+Multiple levels of column headers can also be rendered as seen here.

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

@@ -2,6 +2,7 @@ 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
 
@@ -20,3 +21,5 @@ examples:
   - 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

@@ -12,3 +12,5 @@ export { default as AdvancedTableResponsive } from './_advanced_table_responsive
 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,66 +1,70 @@
 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],
+  },
+]
 
-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 renderIcon = (iconName, color) => {
+  return ReactDOMServer.renderToStaticMarkup(
+  <Icon
+      color={color}
+      icon={iconName}
+  />)
+};
 
 const barGraphOptions = {
-  subtitle: {
-    text: "Overwritten subtitle",
-    style: {
-      color: "red"
-    }
+  yAxis: {
+    tickInterval: 5,
   },
   xAxis: {
-      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 ''
-              }
-          }
-      }
-  }
+    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,
+  },
 }
 
-const BarGraphCustom = (props) => (
+const BarGraphCustom = () => (
   <div>
     <BarGraph
-        axisTitle="Number of Employees"
         chartData={chartData}
         customOptions={barGraphOptions}
-        id="bar-custom"
-        subTitle="Subtitle to replace"
+        id="happiness-dashboard"
+        legend
         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,49 +1,42 @@
 <% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
+  name: 'Role',
+  data: [0, 200, 300, 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]
+  name: 'Company',
+  data: [150, 524, 320, 440, 500],
 }] %>
 
 <% bar_graph_options = {
-    customOptions: {
-        subtitle: {
-            text: "Overwritten subtitle",
-            style: {
-                color: "red"
-            }
+  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',
         },
-        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,
-            }
-        }
-    }
+        y: 42,
+      },
+    },
+    legend: {
+      itemMarginTop: 62,
+    },
+  } 
 } %>
 
 <%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
     chart_data: data,
     id: "bar-default",
-    y_axis_min: 0,
-    subtitle: 'Subtitle to replace',
+    legend: true,
     title: 'Bar Graph with Custom Overrides',
     custom_options: bar_graph_options
-}) %>
+}) %>

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

@@ -67,4 +67,24 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% 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 %>

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

@@ -181,6 +181,56 @@ 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>
         </>
     )
 }

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

@@ -1 +1 @@
-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>.
+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>.

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

@@ -17,47 +17,60 @@ 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">
+        <Flex
+            align="stretch"
+            {...props}
+        >
           <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>
 
@@ -65,22 +78,29 @@ const GaugeComplex = (props) => (
               alignSelf="stretch"
               marginRight="sm"
               orientation="vertical"
+              {...props}
           />
 
           <Flex
               orientation="column"
               wrap
+              {...props}
           >
               <Body
                   color="light"
                   text="% Abandoned"
-               />
-            <Flex wrap>
+                  {...props}
+              />
+            <Flex
+                wrap
+                {...props}
+            >
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-              > 
+                  {...props}
+              >
                 <Gauge
                     chartData={data}
                     disableAnimation
@@ -90,7 +110,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,4 +24,20 @@
   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",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx

@@ -32,6 +32,21 @@ const HomeAddressStreetEmphasis = (props) => {
           zipcode="19382"
           {...props}
       />
+      <br />
+      <br />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          addressCont="Apt M18"
+          city="West Chester"
+          emphasis="none"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md

@@ -1,2 +1,3 @@
 Emphasis on street happens by default. (no prop needed)
-Emphasis on "city" makes the city emphasized, rather than the street.
+Emphasis on "city" makes the city emphasized, rather than the street.
+Adding "none" to emphasis prop will provide no emphasis.