playbook_ui 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4305 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4380

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 31ad89e3fa840597a7d38316aea7fcdd57bf7c4c1352e762d2845fc689346231
-  data.tar.gz: 519831d474fdc0187abeadbdc328f4653fdaf566195596ca5f5c600be3214d1d
+  metadata.gz: 2150b988f879193d665933bcff4a30e8da5ce3b01d92f9b647521594520306ac
+  data.tar.gz: 7023762038f258f24a3699ad06e2dc2f05c600de89cbce803b569aecb7da9f31
 SHA512:
-  metadata.gz: a0538a8f59b5c77c623501feb8f0b75a5cb39aa3238debd67ca27ec09f3ddbd59bb4562c14fd54edd6bf3fdd3ca86a570ecf4d71a998bcc68e6b7992be2731e7
-  data.tar.gz: 9f7217f4ef982eb0e30e0f96687e8dfd0f281267397698e576d5a3af4462b07c2bab5a11877057936d8f829c3df83e6f6d60ea903ecdf13c416d4d56a552aeb2
+  metadata.gz: d96de439d140f402f0f7d09483ac2278133f633303c5fed4e15c00748ece77053751874cc0b28a29797e4070e34e762ee32c2aa099ff306556be184a69014044
+  data.tar.gz: 17a2d95ea8a35b7dedb4dc48746a82a02abfb93c6211f8caa9bd6716a364c0b443590f0f3be8d1316d93d392b260375d80d0811da8ae2f6d9126b244a8527d47

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -28,8 +28,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
-  border-width: $pb_card_border_width;
-  outline: 1px solid $border_color;
+  border-width: $pb_card_border_width * 2;
 }
 
 @mixin pb_card_selected_dark {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -47,7 +47,7 @@ interface DropdownComponent
     Container: typeof DropdownContainer;
 }
 
-const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props, ref) => {
+let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const {
         aria = {},
         autocomplete = false,
@@ -260,8 +260,7 @@ const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props,
                             <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
-                                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                                        <ForwardedDropdown.Option key={option.id}
+                                        <DropdownOption key={option.id}
                                             option={option}
                                         />
                                     ))}
@@ -281,10 +280,10 @@ const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props,
     )
 }
 
-const ForwardedDropdown = forwardRef(Dropdown) as DropdownComponent;
-ForwardedDropdown.displayName = "Dropdown";
-ForwardedDropdown.Option = DropdownOption;
-ForwardedDropdown.Trigger = DropdownTrigger;
-ForwardedDropdown.Container = DropdownContainer;
+Dropdown = forwardRef(Dropdown) as unknown as DropdownComponent;
+(Dropdown as DropdownComponent).displayName = "Dropdown";
+(Dropdown as DropdownComponent).Option = DropdownOption;
+(Dropdown as DropdownComponent).Trigger = DropdownTrigger;
+(Dropdown as DropdownComponent).Container = DropdownContainer;
 
-export default ForwardedDropdown;
+export default Dropdown;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -142,7 +142,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag {
+    + .pb_form_pill_text, + .pb_form_pill_tag, 
+    + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
+    + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
     }
   }
@@ -169,7 +171,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag {
+      + .pb_form_pill_text, + .pb_form_pill_tag, 
+      + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
+      + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;
       }
     }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
+import Tooltip from '../pb_tooltip/_tooltip'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
@@ -62,6 +63,30 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
+  const renderTitle = (content: string, className: string) => {
+    const titleComponent = (
+      <Title
+          className={className}
+          size={4}
+          text={content}
+          truncate={props.truncate}
+      />
+    )
+    if (props.truncate) {
+      return (
+        <Tooltip
+            interaction
+            placement="top"
+            position="fixed"
+            text={content}
+        >
+          {titleComponent}
+        </Tooltip>
+      )
+    }
+    return titleComponent
+  }
+
   return (
     <div className={css}
         id={id}
@@ -77,12 +102,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          <Title
-              className="pb_form_pill_text"
-              size={4}
-              text={name}
-              truncate={props.truncate}
-          />
+          {renderTitle(name, "pb_form_pill_text")}
         </>
       )}
       {((name && icon && !text) || (name && icon && text)) && (
@@ -93,12 +113,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          <Title
-              className="pb_form_pill_text"
-              size={4}
-              text={name}
-              truncate={props.truncate}
-          />
+          {renderTitle(name, "pb_form_pill_text")}
           <Icon
               className="pb_form_pill_icon"
               color={color}
@@ -113,22 +128,10 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               color={color}
               icon={icon}
           />
-          <Title
-              className="pb_form_pill_tag"
-              size={4}
-              text={text}
-              truncate={props.truncate}
-          />
+          {renderTitle(text, "pb_form_pill_tag")}
         </>
       )}
-      {(!name && !icon && text) && (
-        <Title
-            className="pb_form_pill_tag"
-            size={4}
-            text={text}
-            truncate={props.truncate}
-        />
-      )}
+      {(!name && !icon && text) && renderTitle(text, "pb_form_pill_tag")}
       <div
           className="pb_form_pill_close"
           onClick={onClick}
@@ -143,4 +146,5 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     </div>
   )
 }
+
 export default FormPill

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -13,7 +13,30 @@
     id: "typeahead-form-pill",
     is_multi: true,
     options: names,
-    label: "Names",
+    label: "Truncation Within Typeahead",
     pills: true,
     truncate: 1,
 }) %>
+
+<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
+<%= pb_rails("card", props: { max_width: "xs" })  do %>
+  <%= pb_rails("form_pill", props: {
+      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      tabindex: 0,
+      truncate: 1,
+      id: "truncation-1"
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      icon: "badge-check",
+      text: "icon and a very long tag to show truncation",
+      tabindex: 0,
+      truncate: 1,
+      id: "truncation-2"
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      text: "form pill long tag no tooltip show truncation",
+      tabindex: 0,
+      truncate: 1,
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
       <Typeahead
           htmlOptions={{ style: { maxWidth: "240px" }}}
           isMulti
-          label="Names"
+          label="Truncation Within Typeahead"
           options={names}
           truncate={1}
           {...props}
       />
+      <Caption text="Form Pill Truncation"/>
+      <Card maxWidth="xs">
+        <FormPill
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
+            onClick={() => alert('Click!')}
+            tabIndex={0}
+            truncate={1}
+        />
+        <FormPill
+            icon="badge-check"
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="icon and a very long tag to show truncation"
+            truncate={1}
+        />
+        <FormPill
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="form pill with a very long tag to show truncation"
+            truncate={1}
+        />
+      </Card>
     </>
   )
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -0,0 +1,3 @@
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+
+__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -0,0 +1 @@
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,19 +1,57 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
-    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+    <% if object.truncate %>
+      <div>
+        <%= pb_rails("title", props: { 
+          classname: "pb_form_pill_text truncate_#{object.truncate}",
+          id: object.id,
+          size: 4, 
+          text: object.name,
+        }) %>
+        <% if object.id.present? %>
+          <%= pb_rails("tooltip", props: {
+            position: "top",
+            tooltip_id: "tooltip-#{object.id}",
+            trigger_element_selector: "##{object.id}"
+          }) do %>
+            <%= object.name %>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <%= pb_rails("title", props: { classname: "pb_form_pill_text", id: object.id, size: 4, text: object.name }) %>
+    <% end %>
     <% if object.icon.present? %>
       <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
-      <% if object.icon.present? %>
-        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
-      <% end %>
-      <% if object.text.present? %>
-        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-      <% end %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+    <% end %>
+    <% if object.truncate %>
+      <div>
+        <%= pb_rails("title", props: { 
+          classname: "pb_form_pill_tag truncate_#{object.truncate}",
+          id: object.id,
+          size: 4, 
+          text: object.text,
+        }) %>
+        <% if object.id.present? %>
+          <%= pb_rails("tooltip", props: {
+            position: "top",
+            tooltip_id: "tooltip-#{object.id}",
+            trigger_element_selector: "##{object.id}"
+          }) do %>
+            <%= object.text %>
+          <% end %>
+        <% end %>
+      </div>
+    <% else %>
+      <%= pb_rails("title", props: { classname: "pb_form_pill_tag", id: object.id, size: 4, text: object.text, }) %>
+    <% end %>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
     <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -10,6 +10,24 @@
 $pb_selectable_card_indicator_size: 22px;
 $pb_selectable_card_border: 2px;
 
+$pb_selectable_space_classes: (
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+$pb_selectable_paddings: (
+  p: "padding",
+  pr: "padding-right",
+  pl: "padding-left",
+  pt: "padding-top",
+  pb: "padding-bottom",
+  px: ("padding-left", "padding-right"),
+  py: ("padding-top", "padding-bottom")
+);
+
 [class^=pb_selectable_card_kit] {
   display: block;
   margin-bottom: 0;
@@ -28,7 +46,6 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -74,6 +91,7 @@ $pb_selectable_card_border: 2px;
 
         position: relative;
         @include pb_card_selected;
+        padding: calc(#{$space_sm} - 1px);
         transition-property: none;
         transition-duration: 0s;
 
@@ -88,6 +106,54 @@ $pb_selectable_card_border: 2px;
           background-color: $royal;
         }
       }
+
+      // Selected card has 1px more border
+      // Remove 1px so content does not "jump"
+      @each $position_name,
+      $position in $pb_selectable_paddings {
+        @each $space_name,
+        $space in $pb_selectable_space_classes {
+          ~ label.#{$position_name}_#{$space_name} {
+            @if type-of($position)=="list" {
+              @each $coordinate in $position {
+                #{$coordinate}: calc(#{$space} - 1px) !important;
+              }
+            }
+
+            @else {
+              #{$position}: calc(#{$space} - 1px) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.display_input {
+    input[type="checkbox"],
+    input[type="radio"] {
+      &:checked {
+        ~label {
+          border-width: $pb_card_border_width;
+          outline: 1px solid $primary;
+        }
+
+      }
+    }
+
+    > label {
+      outline: 1px solid transparent;
+      padding: $space_sm;
+    }
+
+    &.dark {
+      input[type="checkbox"],
+      input[type="radio"] {
+        &:checked ~ label {
+          border-width: $pb_card_border_width;
+          outline: 1px solid $primary;
+        }
+      }
     }
   }
 

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -67,6 +67,7 @@ const SelectableCard = (props: SelectableCardProps) => {
       'disabled': disabled,
       'enabled': !disabled,
     }),
+  variant === 'displayInput' ? 'display_input' : '',
   { error },
   dark ? 'dark' : '',
   className

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -25,7 +25,7 @@
           <% end %>
           <div class="separator"></div>
           <div class="psuedo_separator"></div>
-          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true }) do %>
+          <%= pb_rails("card", props: { padding: "sm", status: object.status, border_none: true, dark: object.dark }) do %>
             <% if content.nil? %>
               <%= pb_rails("body", props: { text: object.text }) %>
             <% else %>

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb

@@ -25,7 +25,7 @@ module Playbook
 
       def classname
         [
-          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class),
+          generate_classname_without_spacing("pb_selectable_card_kit", checked_class, enable_disabled_class) + display_input_class,
           error_class,
           dark_props,
         ].compact.join(" ")
@@ -79,6 +79,10 @@ module Playbook
       def error_class
         error ? "error" : nil
       end
+
+      def display_input_class
+        variant == "display_input" ? " display_input" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from "../utilities/globalProps";
+import { globalProps, GlobalProps } from "../utilities/globalProps"
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 
+import TimelineLabel from './subcomponents/Label'
+import TimelineStep from './subcomponents/Step'
+import TimelineDetail from './subcomponents/Detail'
+
 type ItemProps = {
   className?: string,
   children?: React.ReactNode[] | React.ReactNode,
@@ -17,6 +20,13 @@ type ItemProps = {
   lineStyle?: 'solid' | 'dotted',
 } & GlobalProps
 
+function isElementOfType<P>(
+  element: React.ReactNode,
+  component: React.ComponentType<P>
+): element is React.ReactElement<P> {
+  return React.isValidElement<P>(element) && element.type === component
+}
+
 const TimelineItem = ({
   className,
   children,
@@ -31,31 +41,57 @@ const TimelineItem = ({
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+  const childrenArray = React.Children.toArray(children)
+
+  const labelChild = childrenArray.find(
+    (child): child is React.ReactElement => isElementOfType(child, TimelineLabel)
+  )
+
+  const stepChild = childrenArray.find(
+    (child): child is React.ReactElement => isElementOfType(child, TimelineStep)
+  )
+
+  const detailChild = childrenArray.find(
+    (child): child is React.ReactElement => isElementOfType(child, TimelineDetail)
+  )
+
+  const otherChildren = childrenArray.filter(
+    (child) =>
+      !isElementOfType(child, TimelineLabel) &&
+      !isElementOfType(child, TimelineStep) &&
+      !isElementOfType(child, TimelineDetail)
+  )
+
   return (
-    <div 
+    <div
         {...htmlProps}
         className={classnames(timelineItemCss, globalProps(props), className)}
     >
-      <div className="pb_timeline_item_left_block">
-        {date &&
-          <DateStacked
-              align="center"
-              date={date}
-              size="sm"
-          />
-        }
-      </div>
-      <div className="pb_timeline_item_step">
-        <IconCircle
-            icon={icon}
-            size="xs"
-            variant={iconColor}
-        />
-        <div className="pb_timeline_item_connector" />
-      </div>
-      <div className="pb_timeline_item_right_block">
-        {children}
-      </div>
+        {labelChild || (
+          <div className="pb_timeline_item_left_block">
+            {date && (
+              <DateStacked
+                  align="center"
+                  date={date}
+                  size="sm"
+              />
+            )}
+          </div>
+        )}
+        {stepChild || (
+          <div className="pb_timeline_item_step">
+            <IconCircle icon={icon}
+                size="xs"
+                variant={iconColor}
+            />
+            <div className="pb_timeline_item_connector" />
+          </div>
+        )}
+        {detailChild || (
+          <div className="pb_timeline_item_right_block">
+           { otherChildren }
+          </div>
+        )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -5,6 +5,11 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import TimelineItem from './_item'
+import {
+  TimelineStep,
+  TimelineLabel,
+  TimelineDetail,
+} from './subcomponents'
 
 type TimelineProps = {
   aria?: { [key: string]: string },
@@ -47,5 +52,8 @@ const Timeline = ({
 }
 
 Timeline.Item = TimelineItem
+Timeline.Step = TimelineStep
+Timeline.Label = TimelineLabel
+Timeline.Detail = TimelineDetail
 
 export default Timeline

data/app/pb_kits/playbook/pb_timeline/detail.html.erb

@@ -0,0 +1,3 @@
+<%= pb_content_tag do %>
+  <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/detail.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTimeline
+    class Detail < Playbook::KitBase
+      def classname
+        generate_classname("pb_timeline_item_right_block")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb

@@ -0,0 +1,43 @@
+<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+
+      <% item.label do %>
+        <%= pb_rails("timeline/label") do %>
+          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
+        <% end %>
+      <% end %>
+    
+      <% item.step do %>
+        <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
+      <% end %>
+    
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Jackson Heights",
+          detail: "37-27 74th Street"
+        }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
+
+      <% item.step do %>
+        <%= pb_rails("timeline/step") do %>
+          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
+        <% end %>
+      <% end %>
+    
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Greenpoint",
+          detail: "81 Gate St Brooklyn"
+        }) %>
+      <% end %>
+    <% end %>
+
+    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
+      <%= pb_rails("title_detail", props: {
+          title: "Society Hill",
+          detail: "72 E St Astoria"
+      }) %>
+    <% end %>
+<% end %>