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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/_button.tsx +6 -6
  3. data/app/pb_kits/playbook/pb_circle_icon_button/{_circle_icon_button.jsx → _circle_icon_button.tsx} +6 -10
  4. data/app/pb_kits/playbook/pb_contact/contact.test.js +45 -1
  5. data/app/pb_kits/playbook/pb_currency/{_currency.jsx → _currency.tsx} +17 -12
  6. data/app/pb_kits/playbook/pb_date/_date.tsx +101 -0
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +10 -9
  8. data/app/pb_kits/playbook/pb_date_time/{_date_time.jsx → _date_time.tsx} +2 -5
  9. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +110 -0
  10. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +32 -14
  14. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +5 -0
  15. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +2 -2
  16. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +22 -4
  17. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +3 -3
  18. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +79 -17
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +55 -93
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +79 -42
  21. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +80 -0
  22. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +10 -1
  23. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb +5 -0
  24. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +26 -0
  25. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md +1 -0
  26. data/app/pb_kits/playbook/pb_hashtag/docs/example.yml +2 -0
  27. data/app/pb_kits/playbook/pb_hashtag/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_hashtag/hashtag.rb +6 -0
  30. data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js +54 -0
  31. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +3 -0
  32. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +2 -1
  33. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb +2 -0
  34. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb +12 -0
  35. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx +23 -0
  36. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md +1 -0
  37. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +3 -0
  38. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  39. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +4 -0
  40. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +2 -1
  41. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb +4 -1
  42. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -0
  43. data/app/pb_kits/playbook/pb_icon_circle/{_icon_circle.jsx → _icon_circle.tsx} +2 -4
  44. data/app/pb_kits/playbook/pb_kit/{dateTime.js → dateTime.ts} +5 -6
  45. data/app/pb_kits/playbook/pb_label_pill/{_label_pill.jsx → _label_pill.tsx} +2 -4
  46. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +1 -1
  48. data/app/pb_kits/playbook/pb_pill/_pill.tsx +1 -1
  49. data/app/pb_kits/playbook/pb_section_separator/{_section_separator.jsx → _section_separator.tsx} +7 -8
  50. data/app/pb_kits/playbook/pb_time/_time.tsx +92 -0
  51. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +1 -1
  57. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  58. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb +37 -0
  59. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.md +1 -0
  60. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  61. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -2
  62. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +10 -2
  63. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +1 -1
  64. data/app/pb_kits/playbook/tokens/_colors.scss +74 -74
  65. data/app/pb_kits/playbook/tokens/_typography.scss +8 -8
  66. data/dist/reset.css +2 -0
  67. data/lib/playbook/version.rb +2 -2
  68. metadata +24 -13
  69. data/app/pb_kits/playbook/pb_date/_date.jsx +0 -138
  70. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +0 -93
  71. data/app/pb_kits/playbook/pb_time/_time.jsx +0 -90
@@ -0,0 +1,26 @@
1
+ import React from 'react'
2
+ import { Hashtag } from '../../'
3
+
4
+ const HashtagLink = (props) => {
5
+ return (
6
+ <div>
7
+ <Hashtag
8
+ text="Open in the same window"
9
+ type="project"
10
+ url="https://google.com"
11
+ {...props}
12
+ />
13
+ <br />
14
+ <br />
15
+ <Hashtag
16
+ newWindow
17
+ text="Open in a new window"
18
+ type="project"
19
+ url="https://google.com"
20
+ {...props}
21
+ />
22
+ </div>
23
+ )
24
+ }
25
+
26
+ export default HashtagLink
@@ -0,0 +1 @@
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)
@@ -2,6 +2,8 @@ examples:
2
2
 
3
3
  rails:
4
4
  - hashtag_default: Hashtag Types
5
+ - hashtag_link: Hashtag Links
5
6
 
6
7
  react:
7
8
  - hashtag_default: Hashtag Types
9
+ - hashtag_link: Hashtag Links
@@ -1 +1,2 @@
1
1
  export { default as HashtagDefault } from './_hashtag_default.jsx'
2
+ export { default as HashtagLink } from './_hashtag_link.jsx'
@@ -3,7 +3,7 @@
3
3
  class: object.classname,
4
4
  data: object.data,
5
5
  id: object.id) do %>
6
- <%= link_to object.url do %>
6
+ <%= link_to object.url, target: object.link_option do %>
7
7
  <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
8
8
  <% end %>
9
9
  <% end %>
@@ -3,6 +3,8 @@
3
3
  module Playbook
4
4
  module PbHashtag
5
5
  class Hashtag < Playbook::KitBase
6
+ prop :new_window, type: Playbook::Props::Boolean,
7
+ default: false
6
8
  prop :text
7
9
  prop :type, type: Playbook::Props::Enum,
8
10
  values: %w[default project home appointment],
@@ -17,6 +19,10 @@ module Playbook
17
19
  type_text + text
18
20
  end
19
21
 
22
+ def link_option
23
+ new_window ? "_blank" : "_self"
24
+ end
25
+
20
26
  private
21
27
 
22
28
  def type_text
@@ -0,0 +1,54 @@
1
+
2
+ import React from 'react'
3
+ import { render, screen, cleanup } from "../utilities/test-utils";
4
+
5
+ import { Hashtag } from "..";
6
+
7
+
8
+ const testId = "primary-test"
9
+ const text="Open in a new window"
10
+ const type="project"
11
+ const url="https://google.com"
12
+ const typeMap = {
13
+ home: 'H#',
14
+ project: 'P#',
15
+ appointment: 'A#',
16
+ default: '#',
17
+ }
18
+
19
+ function HashtagTest(props) {
20
+ return (
21
+ <Hashtag
22
+ data={{ testid: testId }}
23
+ text={text}
24
+ type={type}
25
+ url={url}
26
+ {...props}
27
+ />
28
+ );
29
+ }
30
+
31
+ test("renders the component", () => {
32
+ render(<HashtagTest/>);
33
+ const kit = screen.getByTestId("primary-test");
34
+ expect(kit).toBeInTheDocument();
35
+ expect(kit).toHaveClass("pb_hashtag_kit");
36
+
37
+ cleanup()
38
+ });
39
+
40
+ test("should pass in url property and allow links to open in a new window", () => {
41
+ const { container } = render(<HashtagTest newWindow />);
42
+ expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("href", url);
43
+ expect(container.getElementsByClassName("pb_hashtag_kit")[0].firstChild).toHaveAttribute("target", "_blank");
44
+
45
+ cleanup()
46
+ });
47
+
48
+ test("renders the badge kit with appropriate text", () => {
49
+ const { container } = render(<HashtagTest />);
50
+ expect(container.getElementsByClassName("pb_badge_kit_primary")[0]).toBeInTheDocument;
51
+ expect(container.getElementsByClassName("pb_badge_kit_primary")[0]).toHaveTextContent(typeMap[type] + text);
52
+
53
+ cleanup()
54
+ });
@@ -20,6 +20,7 @@ type HomeAddressStreetProps = {
20
20
  homeId: number,
21
21
  houseStyle: string,
22
22
  homeUrl: string,
23
+ newWindow: Boolean,
23
24
  state: string,
24
25
  zipcode: string,
25
26
  territory: string,
@@ -35,6 +36,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
35
36
  emphasis = 'street',
36
37
  homeId,
37
38
  homeUrl,
39
+ newWindow,
38
40
  houseStyle,
39
41
  state,
40
42
  zipcode,
@@ -106,6 +108,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
106
108
  <Hashtag
107
109
  classname="home-hashtag"
108
110
  dark={dark}
111
+ newWindow={newWindow}
109
112
  text={homeId}
110
113
  type="home"
111
114
  url={homeUrl || '#'}
@@ -32,7 +32,8 @@
32
32
  url: object.home_url || "#",
33
33
  type: "home",
34
34
  dark: object.dark,
35
- classname: "home-hashtag"}) %>
35
+ classname: "home-hashtag",
36
+ new_window: object.new_window}) %>
36
37
  <% end %>
37
38
 
38
39
  <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
@@ -8,6 +8,8 @@ module Playbook
8
8
  prop :city_state
9
9
  prop :home_id, type: Playbook::Props::Number
10
10
  prop :home_url
11
+ prop :new_window, type: Playbook::Props::Boolean,
12
+ default: false
11
13
  prop :territory
12
14
  prop :zip
13
15
  prop :dark, type: Playbook::Props::Boolean, default: false
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("home_address_street", props: {
2
+ address: "70 Prospect Ave",
3
+ address_cont: "Apt M18",
4
+ city: "West Chester",
5
+ home_id: 8250263,
6
+ home_url: "https://powerhrg.com/",
7
+ house_style: "Colonial",
8
+ new_window: true,
9
+ state: "PA",
10
+ zipcode: "19382",
11
+ territory: "PHL",
12
+ }) %>
@@ -0,0 +1,23 @@
1
+ import React from 'react'
2
+
3
+ import HomeAddressStreet from '../_home_address_street'
4
+
5
+ const HomeAddressStreetLink= (props) => {
6
+ return (
7
+ <HomeAddressStreet
8
+ address="70 Prospect Ave"
9
+ addressCont="Apt M18"
10
+ city="West Chester"
11
+ homeId={8250263}
12
+ homeUrl="https://powerhrg.com/"
13
+ houseStyle="Colonial"
14
+ newWindow
15
+ state="PA"
16
+ territory="PHL"
17
+ zipcode="19382"
18
+ {...props}
19
+ />
20
+ )
21
+ }
22
+
23
+ export default HomeAddressStreetLink
@@ -0,0 +1 @@
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)
@@ -4,8 +4,11 @@ examples:
4
4
  - home_address_street_default: Default
5
5
  - home_address_street_emphasis: Emphasis
6
6
  - home_address_street_modified: Modified
7
+ - home_address_street_link: Link
7
8
 
8
9
  react:
9
10
  - home_address_street_default: Default
10
11
  - home_address_street_emphasis: Emphasis
11
12
  - home_address_street_modified: Modified
13
+ - home_address_street_link: Link
14
+
@@ -1,3 +1,4 @@
1
1
  export { default as HomeAddressStreetDefault } from './_home_address_street_default.jsx'
2
2
  export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
3
3
  export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
4
+ export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
@@ -12,6 +12,8 @@ module Playbook
12
12
  prop :home_id, type: Playbook::Props::Number
13
13
  prop :home_url
14
14
  prop :house_style
15
+ prop :new_window, type: Playbook::Props::Boolean,
16
+ default: false
15
17
  prop :state
16
18
  prop :zipcode
17
19
  prop :territory
@@ -53,6 +55,7 @@ module Playbook
53
55
  dark: dark,
54
56
  home_id: home_id,
55
57
  home_url: home_url,
58
+ new_window: new_window,
56
59
  territory: territory,
57
60
  zip: zip,
58
61
  }
@@ -66,6 +69,7 @@ module Playbook
66
69
  dark: dark,
67
70
  home_id: home_id,
68
71
  home_url: home_url,
72
+ new_window: new_window,
69
73
  territory: territory,
70
74
  }
71
75
  end
@@ -22,7 +22,8 @@
22
22
  url: object.home_url || "#",
23
23
  type: "home",
24
24
  dark: object.dark,
25
- classname: "home-hashtag"}) %>
25
+ classname: "home-hashtag",
26
+ new_window: object.new_window}) %>
26
27
  <% end %>
27
28
 
28
29
  <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
@@ -8,8 +8,11 @@ module Playbook
8
8
  prop :city_state_zip
9
9
  prop :home_id, type: Playbook::Props::Number
10
10
  prop :home_url
11
+ prop :new_window, type: Playbook::Props::Boolean,
12
+ default: false
11
13
  prop :territory
12
- prop :dark, type: Playbook::Props::Boolean, default: false
14
+ prop :dark, type: Playbook::Props::Boolean,
15
+ default: false
13
16
  end
14
17
  end
15
18
  end
@@ -16,6 +16,7 @@ export type IconSizes = "lg"
16
16
  | "8x"
17
17
  | "9x"
18
18
  | "10x"
19
+ | ""
19
20
 
20
21
  type IconProps = {
21
22
  aria?: {[key: string]: string},
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
 
5
3
  import classnames from 'classnames'
@@ -10,10 +8,10 @@ import { globalProps } from '../utilities/globalProps'
10
8
  import Icon from '../pb_icon/_icon'
11
9
 
12
10
  type IconCircleProps = {
13
- aria?: object,
11
+ aria?: {[key:string]: string},
14
12
  className?: string,
15
13
  dark?: boolean,
16
- data?: object,
14
+ data?: {[key:string]: string},
17
15
  icon: string,
18
16
  id?: string,
19
17
  size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",
@@ -1,23 +1,22 @@
1
- /* @flow */
2
- /*eslint-disable flowtype/space-before-type-colon */
3
1
 
4
- import moment from 'moment'
2
+ import moment, { Moment } from 'moment'
5
3
  import 'moment-strftime'
6
4
  import 'moment-timezone'
7
5
 
8
6
  type DateTimeType = {
9
- value: String | Date,
10
- zone?: String,
7
+ value: string | Date,
8
+ zone?: string,
11
9
  }
12
10
 
13
11
  const ABBR_DAYS = ['SU', 'M', 'T', 'W', 'TH', 'F', 'S']
14
12
 
15
13
  export default class DateTime {
14
+ value: Moment & any
16
15
  constructor({ value, zone = 'America/New_York' }: DateTimeType) {
17
16
  this.value = this.convertToTimestampZone(value, zone)
18
17
  }
19
18
 
20
- convertToTimestampZone(value, zone) {
19
+ convertToTimestampZone(value: string | Date, zone: string) {
21
20
  return moment(value).tz(zone)
22
21
  }
23
22
 
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
  import { globalProps } from '../utilities/globalProps'
@@ -10,9 +8,9 @@ import Pill from '../pb_pill/_pill'
10
8
  import Caption from '../pb_caption/_caption'
11
9
 
12
10
  type LabelPillProps = {
13
- aria?: object,
11
+ aria?: {[key: string]:string},
14
12
  className?: string,
15
- data?: object,
13
+ data?: {[key: string]:string},
16
14
  id?: string,
17
15
  label?: string,
18
16
  pillValue?: string,
@@ -2,7 +2,7 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
- import DateTime from '../pb_kit/dateTime.js'
5
+ import DateTime from '../pb_kit/dateTime'
6
6
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
7
7
  import { globalProps } from '../utilities/globalProps'
8
8
 
@@ -3,7 +3,7 @@
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
5
 
6
- import DateTime from '../pb_kit/dateTime.js'
6
+ import DateTime from '../pb_kit/dateTime'
7
7
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
8
  import { globalProps } from '../utilities/globalProps'
9
9
 
@@ -11,7 +11,7 @@ type PillProps = {
11
11
  data?: {[key: string]: string},
12
12
  id?: string,
13
13
  text: string,
14
- variant?: "success" | "warning" | "error" | "info" | "neutral",
14
+ variant?: "success" | "warning" | "error" | "info" | "neutral" | "primary",
15
15
  textTransform?: "none" | "lowercase"
16
16
  } & GlobalProps
17
17
 
@@ -1,4 +1,3 @@
1
- /* @flow */
2
1
  import React from 'react'
3
2
  import classnames from 'classnames'
4
3
 
@@ -8,10 +7,10 @@ import { globalProps } from '../utilities/globalProps'
8
7
  import Caption from '../pb_caption/_caption'
9
8
 
10
9
  type SectionSeparatorProps = {
11
- aria: object,
10
+ aria: { [key: string]: string; },
12
11
  className: string,
13
12
  dark?: boolean,
14
- data: object,
13
+ data: { [key: string]: string; },
15
14
  id: string,
16
15
  orientation?: "horizontal" | "vertical",
17
16
  text: string,
@@ -40,13 +39,13 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
40
39
  className={classes}
41
40
  id={id}
42
41
  >
43
-
44
- <If condition={text}>
45
- <span>
42
+ {
43
+ text && (
44
+ <span>
46
45
  <Caption text={text} />
47
46
  </span>
48
- </If>
49
-
47
+ )
48
+ }
50
49
  </div>
51
50
  )
52
51
  }
@@ -0,0 +1,92 @@
1
+ import React from "react";
2
+ import classnames from "classnames";
3
+
4
+ import DateTime from "../pb_kit/dateTime";
5
+ import { buildCss } from "../utilities/props";
6
+ import { globalProps, GlobalProps } from "../utilities/globalProps";
7
+
8
+ import Body from "../pb_body/_body";
9
+ import Caption from "../pb_caption/_caption";
10
+ import Icon from "../pb_icon/_icon";
11
+
12
+ type TimeProps = {
13
+ align?: "left" | "center" | "right";
14
+ className?: string | string[];
15
+ data?: string;
16
+ date: string;
17
+ dark?: boolean;
18
+ id?: string;
19
+ showIcon?: boolean;
20
+ size?: "md" | "sm";
21
+ showTimezone?: boolean;
22
+ timeZone?: string;
23
+ } & GlobalProps
24
+
25
+ const Time = (props: TimeProps) => {
26
+ const {
27
+ align,
28
+ className,
29
+ date,
30
+ showIcon,
31
+ size,
32
+ timeZone,
33
+ showTimezone = true,
34
+ } = props;
35
+ const classes = classnames(
36
+ buildCss("pb_time_kit", align, size),
37
+ globalProps(props),
38
+ className
39
+ );
40
+
41
+ const dateTimestamp = new DateTime({ value: date, zone: timeZone });
42
+
43
+ return (
44
+ <div className={classes}>
45
+ {showIcon && (
46
+ <>
47
+ <Body color="light" tag="span">
48
+ <Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
49
+ </Body>{" "}
50
+ </>
51
+ )}
52
+
53
+ <time dateTime={date}>
54
+ <span>
55
+ {size === "md" ? (
56
+ <>
57
+ <Body
58
+ className="pb_time"
59
+ tag="span"
60
+ text={dateTimestamp.toTimeWithMeridian()}
61
+ />{" "}
62
+ {showTimezone && (
63
+ <Body
64
+ color="light"
65
+ tag="span"
66
+ text={dateTimestamp.toTimezone()}
67
+ />
68
+ )}
69
+ </>
70
+ ) : (
71
+ <>
72
+ <Caption
73
+ color="light"
74
+ tag="span"
75
+ text={dateTimestamp.toTimeWithMeridian()}
76
+ />{" "}
77
+ {showTimezone && (
78
+ <Caption
79
+ color="light"
80
+ tag="span"
81
+ text={dateTimestamp.toTimezone()}
82
+ />
83
+ )}
84
+ </>
85
+ )}
86
+ </span>
87
+ </time>
88
+ </div>
89
+ );
90
+ };
91
+
92
+ export default Time;
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeAlign = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React, { Fragment } from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeSizes = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeStamp = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import Time from '../_time.jsx'
2
+ import Time from '../_time'
3
3
 
4
4
  const TimeTimezone = (props) => {
5
5
  const zones = {
@@ -3,7 +3,7 @@
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
5
 
6
- import DateTime from '../pb_kit/dateTime.js'
6
+ import DateTime from '../pb_kit/dateTime'
7
7
  import { buildCss, buildDataProps } from '../utilities/props'
8
8
  import { deprecatedProps, globalProps } from '../utilities/globalProps'
9
9
 
@@ -5,7 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
5
5
 
6
6
  type TitleProps = {
7
7
  aria?: {[key: string]: string},
8
- children?: React.ReactChild[],
8
+ children?: React.ReactChild[] | React.ReactChild,
9
9
  className?: string,
10
10
  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
11
11
  data?: {[key: string]: string},
@@ -0,0 +1,37 @@
1
+ <%
2
+ options = [
3
+ { label: 'Windows', value: '#FFA500' },
4
+ { label: 'Siding', value: '#FF0000' },
5
+ { label: 'Doors', value: '#00FF00' },
6
+ { label: 'Roofs', value: '#0000FF' },
7
+ ]
8
+ %>
9
+
10
+ <%= pb_rails("typeahead", props: {
11
+ id: "typeahead-pills-example1",
12
+ placeholder: "All Colors",
13
+ options: options,
14
+ label: "Colors",
15
+ name: :foo,
16
+ is_multi: false
17
+ })
18
+ %>
19
+
20
+ <!-- This section is an example of the available JavaScript event hooks -->
21
+ <%= javascript_tag defer: "defer" do %>
22
+ document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
23
+ console.log('Option selected')
24
+ console.dir(event.detail)
25
+ })
26
+ document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
27
+ console.log('Option removed')
28
+ console.dir(event.detail)
29
+ })
30
+ document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
31
+ console.log('All options cleared')
32
+ })
33
+
34
+ document.querySelector('#clear-pills').addEventListener('click', function() {
35
+ document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
36
+ })
37
+ <% end %>
@@ -0,0 +1 @@
1
+ Passing `is_multi: false` will allow the user to only select one option from the drop down. Note: this will disable `pills` prop.
@@ -3,6 +3,7 @@ examples:
3
3
  - typeahead_default: Default
4
4
  - typeahead_with_context: With Context
5
5
  - typeahead_with_pills: With Pills
6
+ - typeahead_without_pills: Without Pills (Single Select)
6
7
  - typeahead_with_pills_async: With Pills (Async Data)
7
8
  - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
8
9
  - typeahead_inline: Inline
@@ -1,5 +1,5 @@
1
- <% if object.pills %>
2
- <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
1
+ <% if object.is_react? %>
2
+ <%= react_component('Typeahead', object.typeahead_react_options) %>
3
3
  <% else %>
4
4
  <%= content_tag(:div,
5
5
  id: object.id,