playbook_ui 11.3.0.pre.alpha2 → 11.4.0.pre.alpha.rubytheme2

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Hashtag } from '../../'
+
+const HashtagLink = (props) => {
+  return (
+    <div>
+      <Hashtag
+          text="Open in the same window"
+          type="project"
+          url="https://google.com"
+          {...props}
+      />
+      <br />
+      <br />
+      <Hashtag
+          newWindow
+          text="Open in a new window"
+          type="project"
+          url="https://google.com"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default HashtagLink

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md

@@ -0,0 +1 @@
+Use the newWindow/new_window prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

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

@@ -2,6 +2,8 @@ examples:
 
   rails:
   - hashtag_default: Hashtag Types
+  - hashtag_link: Hashtag Links
 
   react:
   - hashtag_default: Hashtag Types
+  - hashtag_link: Hashtag Links

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

@@ -1 +1,2 @@
 export { default as HashtagDefault } from './_hashtag_default.jsx'
+export { default as HashtagLink } from './_hashtag_link.jsx'

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -3,7 +3,7 @@
     class: object.classname,
     data: object.data,
     id: object.id) do %>
-  <%= link_to object.url do %>
+  <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -3,6 +3,8 @@
 module Playbook
   module PbHashtag
     class Hashtag < Playbook::KitBase
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
       prop :text
       prop :type, type: Playbook::Props::Enum,
                   values: %w[default project home appointment],
@@ -17,6 +19,10 @@ module Playbook
         type_text + text
       end
 
+      def link_option
+        new_window ? "_blank" : "_self"
+      end
+
     private
 
       def type_text

data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js

@@ -0,0 +1,54 @@
+
+import React from 'react'
+import { render, screen, cleanup } from "../utilities/test-utils";
+
+import { Hashtag } from "..";
+
+
+const testId = "primary-test"
+const text="Open in a new window"
+const type="project"
+const url="https://google.com"
+const typeMap = {
+  home: 'H#',
+  project: 'P#',
+  appointment: 'A#',
+  default: '#',
+}
+
+function HashtagTest(props) {
+    return (
+        <Hashtag
+            data={{ testid: testId }}
+            text={text}
+            type={type}
+            url={url}
+            {...props}
+        />
+    );
+  }
+
+  test("renders the component", () => {
+    render(<HashtagTest/>);
+    const kit = screen.getByTestId("primary-test");
+    expect(kit).toBeInTheDocument();
+    expect(kit).toHaveClass("pb_hashtag_kit");
+
+    cleanup()
+  });
+
+  test("should pass in url property and allow links to open in a new window", () => {
+    const { container } = render(<HashtagTest newWindow />);
+    expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("href", url);
+    expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("target", "_blank");
+
+    cleanup()
+  });
+
+  test("renders the badge kit with appropriate text", () => {
+    const { container } = render(<HashtagTest />);
+    expect(container.getElementsByClassName("pb_badge_kit_primary")[0]).toBeInTheDocument;
+    expect(container.getElementsByClassName("pb_badge_kit_primary")[0]).toHaveTextContent(typeMap[type] + text);
+
+    cleanup()
+  });

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

@@ -20,6 +20,7 @@ type HomeAddressStreetProps = {
   homeId: number,
   houseStyle: string,
   homeUrl: string,
+  newWindow: Boolean,
   state: string,
   zipcode: string,
   territory: string,
@@ -35,6 +36,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
     emphasis = 'street',
     homeId,
     homeUrl,
+    newWindow,
     houseStyle,
     state,
     zipcode,
@@ -106,6 +108,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
         <Hashtag
             classname="home-hashtag"
             dark={dark}
+            newWindow={newWindow}
             text={homeId}
             type="home"
             url={homeUrl || '#'}

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb

@@ -32,7 +32,8 @@
     url: object.home_url || "#",
     type: "home",
     dark: object.dark,
-    classname: "home-hashtag"}) %>
+    classname: "home-hashtag",
+    new_window: object.new_window}) %>
 <% end %>
 
 <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb

@@ -8,6 +8,8 @@ module Playbook
       prop :city_state
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
       prop :territory
       prop :zip
       prop :dark, type: Playbook::Props::Boolean, default: false

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  new_window: true,
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

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

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import HomeAddressStreet from '../_home_address_street'
+
+const HomeAddressStreetLink= (props) => {
+  return (
+    <HomeAddressStreet
+        address="70 Prospect Ave"
+        addressCont="Apt M18"
+        city="West Chester"
+        homeId={8250263}
+        homeUrl="https://powerhrg.com/"
+        houseStyle="Colonial"
+        newWindow
+        state="PA"
+        territory="PHL"
+        zipcode="19382"
+        {...props}
+    />
+  )
+}
+
+export default HomeAddressStreetLink

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

@@ -0,0 +1 @@
+Use the `newWindow` / `new_window` prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

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

@@ -4,8 +4,11 @@ examples:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
+  - home_address_street_link: Link
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
+  - home_address_street_link: Link
+

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

@@ -1,3 +1,4 @@
 export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
+export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -12,6 +12,8 @@ module Playbook
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
       prop :house_style
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
       prop :state
       prop :zipcode
       prop :territory
@@ -53,6 +55,7 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
+          new_window: new_window,
           territory: territory,
           zip: zip,
         }
@@ -66,6 +69,7 @@ module Playbook
           dark: dark,
           home_id: home_id,
           home_url: home_url,
+          new_window: new_window,
           territory: territory,
         }
       end

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb

@@ -22,7 +22,8 @@
     url: object.home_url || "#",
     type: "home",
     dark: object.dark,
-    classname: "home-hashtag"}) %>
+    classname: "home-hashtag",
+    new_window: object.new_window}) %>
 <% end %>
 
 <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb

@@ -8,8 +8,11 @@ module Playbook
       prop :city_state_zip
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
       prop :territory
-      prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
     end
   end
 end

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -16,6 +16,7 @@ export type IconSizes = "lg"
 | "8x"
 | "9x"
 | "10x"
+| ""
 
 type IconProps = {
   aria?: {[key: string]: string},

data/app/pb_kits/playbook/pb_icon_circle/{_icon_circle.jsx → _icon_circle.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 
 import classnames from 'classnames'
@@ -10,10 +8,10 @@ import { globalProps } from '../utilities/globalProps'
 import Icon from '../pb_icon/_icon'
 
 type IconCircleProps = {
-  aria?: object,
+  aria?: {[key:string]: string},
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: {[key:string]: string},
   icon: string,
   id?: string,
   size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",

data/app/pb_kits/playbook/pb_kit/{dateTime.js → dateTime.ts}

@@ -1,23 +1,22 @@
-/* @flow */
-/*eslint-disable flowtype/space-before-type-colon */
 
-import moment from 'moment'
+import moment, { Moment } from 'moment'
 import 'moment-strftime'
 import 'moment-timezone'
 
 type DateTimeType = {
-  value: String | Date,
-  zone?: String,
+  value: string | Date,
+  zone?: string,
 }
 
 const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
 
 export default class DateTime {
+  value: Moment & any
   constructor({ value, zone = 'America/New_York' }: DateTimeType) {
     this.value = this.convertToTimestampZone(value, zone)
   }
 
-  convertToTimestampZone(value, zone) {
+  convertToTimestampZone(value: string | Date, zone: string) {
     return moment(value).tz(zone)
   }
 

data/app/pb_kits/playbook/pb_label_pill/{_label_pill.jsx → _label_pill.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
@@ -10,9 +8,9 @@ import Pill from '../pb_pill/_pill'
 import Caption from '../pb_caption/_caption'
 
 type LabelPillProps = {
-  aria?: object,
+  aria?: {[key: string]:string},
   className?: string,
-  data?: object,
+  data?: {[key: string]:string},
   id?: string,
   label?: string,
   pillValue?: string,

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime.js'
+import DateTime from '../pb_kit/dateTime'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import DateTime from '../pb_kit/dateTime.js'
+import DateTime from '../pb_kit/dateTime'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 

data/app/pb_kits/playbook/pb_pill/_pill.tsx

@@ -11,7 +11,7 @@ type PillProps = {
   data?: {[key: string]: string},
   id?: string,
   text: string,
-  variant?: "success" | "warning" | "error" | "info" | "neutral",
+  variant?: "success" | "warning" | "error" | "info" | "neutral" | "primary",
   textTransform?: "none" | "lowercase"
 } & GlobalProps
 

data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx}

@@ -1,4 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 
@@ -8,10 +7,10 @@ import { globalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 
 type SectionSeparatorProps = {
-  aria: object,
+  aria: { [key: string]: string; },
   className: string,
   dark?: boolean,
-  data: object,
+  data: { [key: string]: string; },
   id: string,
   orientation?: "horizontal" | "vertical",
   text: string,
@@ -40,13 +39,13 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
         className={classes}
         id={id}
     >
-
-      <If condition={text}>
-        <span>
+      {
+        text && (
+          <span>
           <Caption text={text} />
         </span>
-      </If>
-
+        )
+      }
     </div>
   )
 }

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import classnames from "classnames";
+
+import DateTime from "../pb_kit/dateTime";
+import { buildCss } from "../utilities/props";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+
+import Body from "../pb_body/_body";
+import Caption from "../pb_caption/_caption";
+import Icon from "../pb_icon/_icon";
+
+type TimeProps = {
+  align?: "left" | "center" | "right";
+  className?: string | string[];
+  data?: string;
+  date: string;
+  dark?: boolean;
+  id?: string;
+  showIcon?: boolean;
+  size?: "md" | "sm";
+  showTimezone?: boolean;
+  timeZone?: string;
+} & GlobalProps
+
+const Time = (props: TimeProps) => {
+  const {
+    align,
+    className,
+    date,
+    showIcon,
+    size,
+    timeZone,
+    showTimezone = true,
+  } = props;
+  const classes = classnames(
+    buildCss("pb_time_kit", align, size),
+    globalProps(props),
+    className
+  );
+
+  const dateTimestamp = new DateTime({ value: date, zone: timeZone });
+
+  return (
+    <div className={classes}>
+      {showIcon && (
+        <>
+          <Body color="light" tag="span">
+            <Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
+          </Body>{" "}
+        </>
+      )}
+
+      <time dateTime={date}>
+        <span>
+          {size === "md" ? (
+            <>
+              <Body
+                className="pb_time"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+              />{" "}
+              {showTimezone && (
+                <Body
+                  color="light"
+                  tag="span"
+                  text={dateTimestamp.toTimezone()}
+                />
+              )}
+            </>
+          ) : (
+            <>
+              <Caption
+                color="light"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+              />{" "}
+              {showTimezone && (
+                <Caption
+                  color="light"
+                  tag="span"
+                  text={dateTimestamp.toTimezone()}
+                />
+              )}
+            </>
+          )}
+        </span>
+      </time>
+    </div>
+  );
+};
+
+export default Time;

data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 
 const TimeAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 
 const TimeDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 
 const TimeSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 
 const TimeStamp = (props) => {
   return (

data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Time from '../_time.jsx'
+import Time from '../_time'
 
 const TimeTimezone = (props) => {
   const zones = {

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import DateTime from '../pb_kit/dateTime.js'
+import DateTime from '../pb_kit/dateTime'
 import { buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
 

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -5,7 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
 
 type TitleProps = {
   aria?: {[key: string]: string},
-  children?: React.ReactChild[],
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -0,0 +1,37 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-pills-example1",
+    placeholder: "All Colors",
+    options: options, 
+    label: "Colors",
+    name: :foo,
+    is_multi: false
+  })
+%>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
+    console.log('All options cleared')
+  })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md

@@ -0,0 +1 @@
+Passing `is_multi: false` will allow the user to only select one option from the drop down. Note: this will disable `pills` prop.

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

@@ -3,6 +3,7 @@ examples:
     - typeahead_default: Default
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
+    - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -1,5 +1,5 @@
-<% if object.pills %>
-  <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
+<% if object.is_react? %>
+  <%= react_component('Typeahead', object.typeahead_react_options) %>
 <% else %>
   <%= content_tag(:div,
                 id: object.id,