playbook_ui_docs 14.9.0.pre.alpha.play1703errorstatealignment5060 → 14.9.0.pre.alpha.play1742globalheightfixes4766

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 22a3ee4da00e1fdd3633b3eb41ece4c2f795f076dd012f05e9883e667864e139
-  data.tar.gz: 982e423cf5cb3c6f798a1d5957364f9a7705bcc8440f6502abf6b730add37ad1
+  metadata.gz: f8b44727591c2c40121b6460aeafc021e67dfb83c260e07ec49ea58b0f88abe4
+  data.tar.gz: 3b476cd0160b20e5f45077af40f6d6ede94949091c5de4d9ab109a66fb8fb569
 SHA512:
-  metadata.gz: 15150f3a8a9542f4d6093510d03c703b70115a6d2c6f01cee552563bf1c50d0f76cc5e2ec830c3019893870c0ea144341c61d7208fda627dd3fd4d46abf848aa
-  data.tar.gz: 9b0a589f06976d149dd7832f61bfceb13c2d4922a32255685b8e8a0dd5bd8163d4ef6f3890f2515aec348fc6f821422aac1a6a87525541dffc73efca586b7e29
+  metadata.gz: b3da49ee26702d84d078de8530708d006fae89531396c33d5eb0b6b2b6f5bee53a7cfb54b267b07b516e0f8af3a304b8005dd3e57c9daa53c633b0f22655e47a
+  data.tar.gz: d5de0497115e2d36509289d35262e1ef14f0d2e8c8ece8be8e8459e1fce8097338dab81cbee254882931374a8e058fe4c4b1fcb88d0d0562656f98b1a5d53569

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

@@ -2,7 +2,6 @@ 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
 

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_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",
-}) %>
+}) %>

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

@@ -32,21 +32,6 @@ 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,3 +1,2 @@
 Emphasis on street happens by default. (no prop needed)
-Emphasis on "city" makes the city emphasized, rather than the street.
-Adding "none" to emphasis prop will provide no emphasis.
+Emphasis on "city" makes the city emphasized, rather than the street.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -20,7 +20,6 @@ const SkeletonLoadingHeightWidth = (props) => (
     <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         marginBottom="md"
         padding="none" 
-        {...props}
     >
       <SkeletonLoading
           borderRadius="md"
@@ -32,7 +31,6 @@ const SkeletonLoadingHeightWidth = (props) => (
     </Card>
     <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         padding="none"
-        {...props}
     >
       <SkeletonLoading
           borderRadius="md"

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

@@ -10,5 +10,4 @@ examples:
   - skeleton_loading_layout: Layout
   - skeleton_loading_border_radius: Border Radius
   - skeleton_loading_height_width: Height & Width
-  - skeleton_loading_user: User Component Example
-  - skeleton_loading_filter: Filter Component Example
+  

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

@@ -3,5 +3,3 @@ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
 export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
 export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
 export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
-export { default as SkeletonLoadingUser } from './_skeleton_loading_user.jsx'
-export { default as SkeletonLoadingFilter } from './_skeleton_loading_filter.jsx'

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

@@ -55,8 +55,3 @@ examples:
     - table_with_subcomponents: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
-    - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
-    - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
-    - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
-    - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table

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

@@ -26,8 +26,3 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
 export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
-export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
-export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
-export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
-export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
-export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'

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

@@ -16,7 +16,6 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
-  - text_input_mask: Mask
 
   swift:
     - text_input_default_swift: Default

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

@@ -5,4 +5,3 @@ export { default as TextInputDisabled } from './_text_input_disabled.jsx'
 export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
-export { default as TextInputMask } from './_text_input_mask.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -55,18 +55,11 @@ const TypeaheadWithHighlight = (props) => {
               marginRight="sm"
               name={name}
               size="sm"
-              {...props}
           />
         </FlexItem>
         <FlexItem>
-          <Title
-              size={4}
-              {...props}
-          >
-            <span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
-          <Body color="light"
-              {...props}
-          >
+          <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
+          <Body color="light">
             <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
             {territory}
           </Body>