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

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_section_separator/docs/example.yml

@@ -6,7 +6,6 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
-  - section_separator_color: Color
 
   react:
   - section_separator_line: Line Separator
@@ -14,7 +13,6 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
-  - section_separator_color: Color
 
   swift:
   - section_separator_line_swift: Line Separator

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

@@ -3,4 +3,3 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
 export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
 export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
-export { default as SectionSeparatorColor } from './_section_separator_color.jsx'

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("skeleton_loading") %>
+<%= pb_rails("skeleton_loading") %>

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

@@ -17,12 +17,9 @@ const SkeletonLoadingHeightWidth = (props) => (
         width="50px"
         {...props}
     />
-    <Card 
-        height='200px' 
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         marginBottom="md"
         padding="none" 
-        width='100%'
-        {...props}
     >
       <SkeletonLoading
           borderRadius="md"
@@ -32,11 +29,8 @@ const SkeletonLoadingHeightWidth = (props) => (
           {...props}
       />
     </Card>
-    <Card 
-        height='200px'
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
         padding="none"
-        width='100%'
-        {...props}
     >
       <SkeletonLoading
           borderRadius="md"

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

@@ -1,13 +1,8 @@
 examples:
   
   rails:
-  - skeleton_loading_default: Default
-  - skeleton_loading_color: Color
-  - 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
+  # - skeleton_loading_default: Default
+  
   
   react:
   - skeleton_loading_default: Default
@@ -15,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/_table_sticky_left_columns.jsx

@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
         <Table
             responsive="scroll"
             size="md"
-            stickyLeftColumn={["1", "2", "3"]}
+            stickyLeftcolumn={["1", "2", "3"]}
         >
             <thead>
                 <tr>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md

@@ -1,5 +1,2 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

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

@@ -4,7 +4,6 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
-    - table_sticky_left_columns: Sticky Left Column
     - table_header: Table Header
     - table_alignment_row_rails: Row Alignment
     - table_alignment_column_rails: Cell Alignment
@@ -34,9 +33,6 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
-    - table_sticky_left_columns: Sticky Left Column
-    - table_sticky_right_columns: Sticky Right Column
-    - table_sticky_columns: Sticky Left and Right Columns
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift
@@ -59,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,10 +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 TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
-export { default as TableStickyColumns } from './_table_sticky_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_timeline/docs/_timeline_with_gap.html.erb

@@ -1,6 +1,6 @@
 <%= pb_rails("flex", props: { justify: "evenly" }) do %>
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "xs"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "xs"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -23,7 +23,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "sm"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "sm"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -46,7 +46,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "md"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "md"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -69,7 +69,7 @@
     <% end %>
 
     <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("timeline", props: {orientation: "vertical", item_gap: "lg"}) do %>
+        <%= pb_rails("timeline", props: {orientation: "vertical", gap: "lg"}) do %>
             <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal"}) do %>
                 <%= pb_rails("body", props: {
                     text: "Conversation started",
@@ -91,3 +91,4 @@
         <% end %>
     <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.jsx

@@ -10,7 +10,7 @@ const TimelineWithGap = (props) => (
     <Flex justify="evenly">
     <FlexItem>
         <Timeline
-            itemGap="xs"
+            gap="xs"
             orientation="vertical"
         >
           <Timeline.Item
@@ -51,7 +51,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="sm"
+            gap="sm"
             orientation="vertical"
         >
           <Timeline.Item
@@ -92,7 +92,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="md"
+            gap="md"
             orientation="vertical"
         >
           <Timeline.Item
@@ -134,7 +134,7 @@ const TimelineWithGap = (props) => (
       </FlexItem>
       <FlexItem>
         <Timeline
-            itemGap="lg"
+            gap="lg"
             orientation="vertical"
         >
           <Timeline.Item

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_gap.md

@@ -1 +1 @@
-Use the optional `itemGap` prop to render the timeline kit with adjusted spacing between nodes. The `itemGap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.
+Use the optional `gap` prop to render the timeline kit with adjusted spacing between nodes. The `gap` prop will only work when utilized with a vertical timeline. Horizontal timelines will show no difference in spacing.

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>