playbook_ui 14.9.0.pre.alpha.play1703errorstatealignment4889 → 14.9.0.pre.alpha.play1703errorstatealignment5060

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c76303a7544e38deef03a9ac8c3e287b6013cf828a750766ec788f66e706bbc4
-  data.tar.gz: 98da736fc4c77104393be8ab4f11379e52113aecdc16fcb2ccdb954e4aecc97b
+  metadata.gz: 0cafdaf728f6e7924b815a4a2525dd59cb72dcb4986d8062dbc8df9a56ca3897
+  data.tar.gz: 45233fb274a14a0522f2c8bb7f1d8ce4222e6d7d69298bbf839be73ea1d3de7b
 SHA512:
-  metadata.gz: bbf0e95a2e97295650df84cdd1c87dfdd713eaaf68a6fb21c540dac59fa8084239c288becf3aa0eecb84f0dd6855e6e5440c37e748d0524560a4699f497c20f1
-  data.tar.gz: 49a7797ec7401bd8e09a81b696cc652c1557dda1a514116cd7263842629fc845ff2f8eb19c30c95566eb8838ca1b64be94182491c8e487cb76034e38459554c7
+  metadata.gz: 20668527d152f490902220ba60775ab6479f1cb7dc0a18e33341759c064751eb12d55ee5e17953c0fec90d2e24b2916880110fe89c92df8e1cbb5f98af9f8eba
+  data.tar.gz: 5aeebf46b23221b0cb447ca22b3a197ea38fc7181fd157aa4504490dfef84f4024536d9d10a58f91ed3704754f735b46b0b295ab17d058a2ad7b15b870fb3503

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -3,18 +3,13 @@ import React from "react"
 //CollapsibleTrail component
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
   const style: { [key: string]: string | number } = {
-    position: "absolute",
     left: `${leftOffset}em`,
-    top: 0,
-    bottom: 0,
-    width: "2px",
-    backgroundColor: "#E4E8F0",
   }
 
   return (
     <div 
         className="collapsible-trail" 
-        style={style} 
+        style={style}
     />
   )
 }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -110,6 +110,14 @@
     height: auto;
   }
 
+  .collapsible-trail {
+    background-color: $border_light;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+  }
+
   // Responsive Styles
   @media only screen and (max-width: $screen-xl-min) {  
     &[class*="table-responsive-scroll"] {

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/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
 

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -14,14 +14,16 @@ module Playbook
                                      default: "header"
       prop :subrow_headers, type: Playbook::Props::Array,
                             default: []
+      prop :collapsible_trail, type: Playbook::Props::Boolean,
+                               default: true
 
       def render_row_and_children(row, column_definitions, current_depth, first_parent_child)
         output = ActiveSupport::SafeBuffer.new
         is_first_child_of_subrow = current_depth.positive? && first_parent_child && subrow_headers[current_depth - 1].present?
 
-        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1] }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
+        output << pb_rails("advanced_table/table_subrow_header", props: { row: row, column_definitions: column_definitions, depth: current_depth, subrow_header: subrow_headers[current_depth - 1], collapsible_trail: collapsible_trail }) if is_first_child_of_subrow && enable_toggle_expansion == "all"
 
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: column_definitions, depth: current_depth, collapsible_trail: collapsible_trail })
 
         if row[:children].present?
           output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id.to_s + id }) do

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -2,6 +2,14 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
+                    <% if collapsible_trail && index.zero? %>
+                        <% (1..depth).each do |i| %>
+                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                            <% left_offset = i * 1.0 + additional_offset %>
+                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+                        <% end %>
+                    <% end %>
+
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -9,6 +9,8 @@ module Playbook
                                 default: []
       prop :row
       prop :depth
+      prop :collapsible_trail, type: Playbook::Props::Boolean,
+                               default: true
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb

@@ -6,6 +6,14 @@
         <% object.column_definitions.each_with_index do |column, index| %>
             <%= pb_rails("table/table_cell", props: { tag: "div", classname: object.td_classname}) do %>
                 <%= pb_rails("flex", props:{ align: "center", justify: "start" }) do %>
+                    <% if collapsible_trail && index.zero? %>
+                        <% (1..depth).each do |i| %>
+                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                            <% left_offset = i * 1.0 + additional_offset %>
+                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+                        <% end %>
+                    <% end %>
+
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>

data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.rb

@@ -12,6 +12,8 @@ module Playbook
                                      default: "header"
       prop :subrow_header, type: Playbook::Props::String,
                            default: ""
+      prop :collapsible_trail, type: Playbook::Props::Boolean,
+                               default: true
 
       def classname
         generate_classname("pb_table_tr", "bg-white", subrow_depth_classname, separator: " ")

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_collapsible/_collapsible.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,6 +32,7 @@ type CollapsibleProps = {
   onClick?: ()=> void,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
 }
 
 const Collapsible = ({
@@ -47,8 +48,9 @@ const Collapsible = ({
   onIconClick,
   onClick,
   id,
+  tag = 'div',
   ...props
-}: CollapsibleProps): React.ReactElement => {
+}: CollapsibleProps & GlobalProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
@@ -76,9 +78,12 @@ const Collapsible = ({
     className
   )
   const dynamicInlineProps = globalInlineProps(props)
+
+  const Tag: React.ReactElement | any = `${tag}`;
+
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
-      <div
+      <Tag
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
@@ -96,7 +101,7 @@ const Collapsible = ({
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-      </div>
+      </Tag>
     </CollapsibleContext.Provider>
   )
 }

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useContext, useRef, useEffect } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 import { hideElement, showElement } from '../_helper_functions'
 
 import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps): React.ReactElement => {
+}: CollapsibleContentProps & GlobalProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -3,7 +3,7 @@
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
   className,
   cursor = 'pointer',
   ...props
-}: CollapsibleMainProps): React.ReactElement=> {
+}: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
   const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -287,7 +287,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
               {...ariaProps}
               {...dataProps}
               {...htmlProps}
-              style={dynamicInlineProps}
               className={classnames(drawerClassNames.base, {
               [drawerClassNames.afterOpen]:
                 animationState === "afterOpen",
@@ -296,6 +295,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             })}
               id={id}
               onClick={(e) => e.stopPropagation()}
+              style={dynamicInlineProps}
           >
             {children}
           </div>
@@ -306,7 +306,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classes}
-            style={dynamicInlineProps}
         >
           {isModalVisible && (
             <div
@@ -327,6 +326,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
                     animationState === "beforeClose",
                 })}
                   onClick={(e) => e.stopPropagation()}
+                  style={dynamicInlineProps}
               >
                 {children}
               </div>

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -0,0 +1,57 @@
+@mixin error-state-flex-start-selectors {
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
+  &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
+  &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
+    align-items: flex-start;
+  }
+}
+
+@mixin error-state-center-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
+    align-items: center;
+  }
+}
+
+@mixin error-state-flex-end-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-end;
+  }
+}
+
+@mixin error-state-right-side-select-kit {
+  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
+    align-items: flex-start;
+
+    .pb_select_kit_wrapper {
+      padding-top: $space_md;
+      margin-top: 2px;
+
+      .pb_select_kit_caret {
+        padding-top: $space_md;
+      }
+    }
+
+    .pb_select_kit_wrapper.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+
+      .pb_select_kit_caret {
+        padding-top: $space_xl;
+      }
+    }
+  }
+}
+
+@mixin error-state-left-side-select-kit {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-start;
+
+    .pb_text_input_kit.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,7 +1,10 @@
+@import "../tokens/spacing";
+@import "./error_state_mixin";
+
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: flex-end;
   justify-content: flex-start;
 
   &[class*=_full] {
@@ -12,17 +15,11 @@
     }
   }
 
-  &:has(.pb_text_input_kit):has(.pb_text_input_kit_label){
-    align-items: flex-end;
-  }
-
-  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){
-    align-items: center;
-  }
-
-  &:has(.pb_phone_number_input):has(.pb_text_input_kit.error):has(.pb_text_input_kit_label){
-    align-items: center;
-  }
+@include error-state-flex-start-selectors;
+@include error-state-center-selectors;
+@include error-state-flex-end-selectors;
+@include error-state-left-side-select-kit;
+@include error-state-right-side-select-kit;
 
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -18,7 +18,7 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  emphasis: "street" | "city",
+  emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
   houseStyle: string,
@@ -129,6 +129,22 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
           </div>
         </div>
       }
+      {emphasis == 'none' &&
+        <div>
+          <Body dark={dark}>
+            {joinPresent([titleize(address), houseStyle], ' · ')}
+          </Body>
+          <Body dark={dark}>{titleize(addressCont)}</Body>
+          <div>
+            <Body
+                color="light"
+                dark={dark}
+              >
+            {`${titleize(city)}, ${state} ${zipcode}`}
+          </Body>
+          </div>
+        </div>
+      }
       {homeId &&
         <Hashtag
             classname="home-hashtag"

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>
   )
 }