playbook_ui 11.6.0.pre.alpha.fontawesome → 11.6.0.pre.alpha.momenttz1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +13 -0
  3. data/app/pb_kits/playbook/pb_button/_button.tsx +2 -7
  4. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +0 -7
  5. data/app/pb_kits/playbook/pb_button/button.html.erb +0 -11
  6. data/app/pb_kits/playbook/pb_button/button.rb +0 -3
  7. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +9 -12
  9. data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -2
  10. data/app/pb_kits/playbook/pb_button/docs/index.js +0 -1
  11. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -2
  12. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +0 -2
  13. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +0 -2
  14. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  15. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +0 -1
  16. data/app/pb_kits/playbook/pb_filter/docs/example.yml +0 -2
  17. data/app/pb_kits/playbook/pb_filter/docs/index.js +0 -1
  18. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  19. data/app/pb_kits/playbook/pb_filter/filter.rb +0 -3
  20. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +127 -0
  21. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  23. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.tsx → _icon_stat_value.jsx} +4 -2
  24. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.tsx → _icon_value.jsx} +4 -2
  25. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +155 -0
  26. data/app/pb_kits/playbook/pb_layout/layout.test.js +2 -1
  27. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  28. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -0
  29. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  30. data/fonts/fontawesome-min.js +2 -3
  31. data/fonts/regular-min.js +2 -3
  32. data/lib/playbook/version.rb +2 -2
  33. metadata +7 -20
  34. data/app/pb_kits/playbook/pb_badge/badge.test.js +0 -80
  35. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +0 -1
  36. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +0 -2
  37. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +0 -23
  38. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +0 -1
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +0 -34
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +0 -66
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +0 -4
  42. data/app/pb_kits/playbook/pb_filter/filter.test.js +0 -76
  43. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +0 -129
  44. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +0 -60
  45. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +0 -154
  46. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +0 -77
  47. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +0 -123
  48. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +0 -109
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 969af3cbd82555c227fdd686b32216d573dff90e2a70584d5ca9920ed1742730
4
- data.tar.gz: bec73672d2fcdce37bc59cc51297e5050929f2bb5b0a0b880229d11a677d693d
3
+ metadata.gz: dce47bdd8dc6eb56fb1ef76d6a4c63c3ffba568073e4932b3038044191318ad0
4
+ data.tar.gz: 9b166c6bf7cf068229f4832d386f640149dd5313cd6d0fd8c7ccbe7daf43b9ea
5
5
  SHA512:
6
- metadata.gz: cc23bb0fc2b71efdfe96582b6242cab6fc36ff2de008987851808b3c04a1c3693bd21d6f0ae7a08acf83d94a4a65feafbdce306f0ac7a2bc466eceaeeb10aa80
7
- data.tar.gz: d85a76cf8802b4fae921d05bd680dfddd1878bb1886d89d09ef2c77dae955eea84782450fad57f7c7ef9c3036d45ae53f92d8e067a503012cf48bc7f33452a68
6
+ metadata.gz: 2f1c8927c6aecd81a6fa5c1f3a6612716d03151aa9fe10e9d1ec7c6d8cb3ab2e7038037059961f38e90028d24dd96f45882ff46bc30a19f82b2cbccb445e2b09
7
+ data.tar.gz: 2259f92edc03f958d5f6e8f007dbadb736d7b66105920ab4d18ce8993cde5c933e67a71e44124f3bcc229a9f12179d97ebc8f27bcc9da3da865d7fe0e3878935
@@ -104,3 +104,16 @@ kits:
104
104
  - title_detail
105
105
  - user_badge
106
106
  - walkthrough
107
+ visual_guidelines:
108
+ - colors
109
+ - max_width
110
+ - number_spacing
111
+ - positioning
112
+ - line_height
113
+ - spacing
114
+ - border_radius
115
+ - typography
116
+ - shadows
117
+ - display
118
+ - cursor
119
+ - flex_box
@@ -17,7 +17,6 @@ type ButtonPropTypes = {
17
17
  form?: string,
18
18
  fullWidth?: boolean,
19
19
  icon?: string,
20
- iconRight?: boolean,
21
20
  id?: string,
22
21
  link?: string,
23
22
  loading?: boolean,
@@ -62,7 +61,6 @@ const Button = (props: ButtonPropTypes) => {
62
61
  data = {},
63
62
  disabled,
64
63
  icon = null,
65
- iconRight = false,
66
64
  id,
67
65
  loading = false,
68
66
  onClick,
@@ -93,13 +91,10 @@ const Button = (props: ButtonPropTypes) => {
93
91
 
94
92
  const content = (
95
93
  <span className="pb_button_content">
96
- {icon && !iconRight && (
97
- <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
94
+ {icon && (
95
+ <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
98
96
  )}
99
97
  <span>{text || children}</span>
100
- {icon && iconRight && (
101
- <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
102
- )}
103
98
  </span>
104
99
  )
105
100
 
@@ -55,13 +55,6 @@ $pb_button_border_width: 0px;
55
55
  visibility: visible;
56
56
  }
57
57
 
58
- .button_with_icon {
59
- margin-right: $space_xs;
60
- }
61
- .button_with_icon_right {
62
- margin-left: $space_xs;
63
- }
64
-
65
58
  &:hover, &:focus {
66
59
  outline: none;
67
60
 
@@ -1,16 +1,5 @@
1
1
  <%= content_tag(object.tag,
2
2
  object.tag == "button" ? object.options : object.link_options) do %>
3
- <% if object.icon && !object.icon_right %>
4
- <span>
5
- <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs" }) %>
6
- </span>
7
- <% end %>
8
3
  <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
9
4
  <span class="pb_button_content"><%= content.presence || object.text %></span>
10
- <% if object.icon && object.icon_right %>
11
- <span>
12
- <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs" }) %>
13
- </span>
14
- <% end %>
15
-
16
5
  <% end %>
@@ -7,9 +7,6 @@ module Playbook
7
7
  default: false
8
8
  prop :full_width, type: Playbook::Props::Boolean,
9
9
  default: false
10
- prop :icon
11
- prop :icon_right, type: Playbook::Props::Boolean,
12
- default: false
13
10
  prop :link
14
11
  prop :loading, type: Playbook::Props::Boolean,
15
12
  default: false
@@ -1,4 +1,4 @@
1
1
  <%= pb_rails("button") do %>
2
- <%= pb_rails("pill", props: { text:"5", fixed_width: true, margin_right: "xs", variant:"info" }) %>
2
+ <%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %>
3
3
  <span>Button with Block Content</span>
4
4
  <% end %>
@@ -1,18 +1,15 @@
1
- import React from "react";
2
- import { Button, Pill } from "../../";
1
+ import React from 'react'
2
+ import { Button } from '../../'
3
3
 
4
4
  const ButtonBlockContent = (props) => (
5
5
  <div>
6
- <Button fixedWidth
6
+ <Button
7
+ fixedWidth
8
+ icon="users"
9
+ text="Button with Block Content"
7
10
  {...props}
8
- >
9
- <Pill marginRight="xs"
10
- text="5"
11
- variant="info"
12
- />
13
- <span>Button with Block Content</span>
14
- </Button>
11
+ />
15
12
  </div>
16
- );
13
+ )
17
14
 
18
- export default ButtonBlockContent;
15
+ export default ButtonBlockContent
@@ -5,7 +5,6 @@ examples:
5
5
  - button_link: Button Links
6
6
  - button_loading: Button Loading
7
7
  - button_block_content: Button Block Content
8
- - button_icon_options: Button Icon Options
9
8
  - button_accessibility: Button Accessibility Options
10
9
  - button_options: Button Additional Options
11
10
  - button_size: Button Size
@@ -16,7 +15,6 @@ examples:
16
15
  - button_link: Button Links
17
16
  - button_loading: Button Loading
18
17
  - button_block_content: Button Block Content
19
- - button_icon_options: Button Icon Options
20
18
  - button_accessibility: Button Accessibility Options
21
19
  - button_options: Button Additional Options (onClick)
22
20
  - button_size: Button Size
@@ -3,7 +3,6 @@ export { default as ButtonFullWidth } from './_button_full_width.jsx'
3
3
  export { default as ButtonLink } from './_button_link.jsx'
4
4
  export { default as ButtonLoading } from './_button_loading.jsx'
5
5
  export { default as ButtonBlockContent } from './_button_block_content.jsx'
6
- export { default as ButtonIconOptions } from './_button_icon_options.jsx'
7
6
  export { default as ButtonAccessibility } from './_button_accessibility.jsx'
8
7
  export { default as ButtonOptions } from './_button_options.jsx'
9
8
  export { default as ButtonSize } from './_button_size.jsx'
@@ -46,8 +46,7 @@ module Playbook
46
46
  prop :plugins, type: Playbook::Props::Boolean,
47
47
  default: false,
48
48
  deprecated: true
49
- prop :position, type: Playbook::Props::String,
50
- default: "auto"
49
+ prop :position, type: Playbook::Props::String
51
50
  prop :position_element, type: Playbook::Props::String
52
51
  prop :scroll_container, type: Playbook::Props::String
53
52
  prop :selection_type, type: Playbook::Props::Enum,
@@ -33,7 +33,6 @@ const FilterDouble = ({
33
33
  children,
34
34
  dark,
35
35
  minWidth,
36
- placement,
37
36
  ...bgProps
38
37
  }: FilterDoubleProps) => (
39
38
  <FilterBackground
@@ -47,7 +46,6 @@ const FilterDouble = ({
47
46
  <FiltersPopover
48
47
  dark={dark}
49
48
  minWidth={minWidth}
50
- placement={placement}
51
49
  >
52
50
  {children}
53
51
  </FiltersPopover>
@@ -33,7 +33,6 @@ const FilterSingle = ({
33
33
  children,
34
34
  dark,
35
35
  minWidth,
36
- placement,
37
36
  ...bgProps
38
37
  }: FilterSingleProps) => {
39
38
  return (
@@ -50,7 +49,6 @@ const FilterSingle = ({
50
49
  <FiltersPopover
51
50
  dark={dark}
52
51
  minWidth={minWidth}
53
- placement={placement}
54
52
  >
55
53
  {children}
56
54
  </FiltersPopover>
@@ -6,7 +6,7 @@ import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
6
6
  import PbReactPopover from '../../pb_popover/_popover'
7
7
 
8
8
  const FiltersPopoverProps = { children: Node }
9
- const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
9
+ const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
10
10
  const [hide, updateHide] = useState(true)
11
11
  const toggle = () => updateHide(!hide)
12
12
 
@@ -25,7 +25,7 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
25
25
  <PbReactPopover
26
26
  closeOnClick="outside"
27
27
  minWidth={minWidth}
28
- placement={placement}
28
+ placement="bottom"
29
29
  reference={filterButton}
30
30
  shouldClosePopover={updateHide}
31
31
  show={!hide}
@@ -2,7 +2,6 @@
2
2
  pb_rails("filter", props: {
3
3
  min_width: "600px",
4
4
  id: "25",
5
- position: "top",
6
5
  filters: [
7
6
  { name: "name", value: "John Wick" },
8
7
  { name: "city", value: "San Francisco"}
@@ -8,7 +8,6 @@ examples:
8
8
  - filter_only: Filter Only
9
9
  - sort_only: Sort Only
10
10
  - filter_min_width: Min Width for Popover Inside of Filter
11
- - filter_placement: Filter Placement
12
11
 
13
12
  react:
14
13
  - filter_default: Default
@@ -19,4 +18,3 @@ examples:
19
18
  - sort_only: Sort Only
20
19
  - filter_min_width: Min Width for Popover Inside of Filter
21
20
  - filter_close_popover: Close Popover
22
- - filter_placement: Filter Placement
@@ -6,4 +6,3 @@ export { default as FilterOnly } from './_filter_only.jsx'
6
6
  export { default as SortOnly } from './_sort_only.jsx'
7
7
  export { default as FilterMinWidth } from './_filter_min_width.jsx'
8
8
  export { default as FilterClosePopover } from './_filter_close_popover.jsx'
9
- export { default as FilterPlacement } from './_filter_placement.jsx'
@@ -69,13 +69,13 @@
69
69
  <% end %>
70
70
 
71
71
  <% if object.template != "sort_only"%>
72
- <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
72
+ <%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
73
73
  <%= content %>
74
74
  <% end %>
75
75
  <%end%>
76
76
 
77
77
  <% if object.template != "filter_only"%>
78
- <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: object.placement , padding: 'none'}) do %>
78
+ <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom', padding: 'none'}) do %>
79
79
  <%= pb_rails("list") do %>
80
80
  <% object.sort_menu.each do |item| %>
81
81
  <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>
@@ -11,9 +11,6 @@ module Playbook
11
11
  default: "default"
12
12
  prop :background, type: Playbook::Props::Boolean, default: true
13
13
  prop :min_width, default: "auto"
14
- prop :placement, type: Playbook::Props::Enum,
15
- values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
16
- default: "bottom-start"
17
14
 
18
15
  def classname
19
16
  generate_classname("pb_filter_kit")
@@ -0,0 +1,127 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import classnames from 'classnames'
5
+
6
+ import { joinPresent, titleize } from '../utilities/text'
7
+ import { globalProps } from '../utilities/globalProps'
8
+
9
+ import Body from '../pb_body/_body'
10
+ import Hashtag from '../pb_hashtag/_hashtag'
11
+ import Title from '../pb_title/_title'
12
+
13
+ type HomeAddressStreetProps = {
14
+ address: string,
15
+ addressCont: string,
16
+ city: string,
17
+ className?: string,
18
+ dark?: boolean,
19
+ emphasis: "street" | "city",
20
+ homeId: number,
21
+ houseStyle: string,
22
+ homeUrl: string,
23
+ newWindow: Boolean,
24
+ state: string,
25
+ zipcode: string,
26
+ territory: string,
27
+ }
28
+
29
+ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
30
+ const {
31
+ address,
32
+ addressCont,
33
+ city,
34
+ className,
35
+ dark = false,
36
+ emphasis = 'street',
37
+ homeId,
38
+ homeUrl,
39
+ newWindow,
40
+ houseStyle,
41
+ state,
42
+ zipcode,
43
+ territory,
44
+ } = props
45
+
46
+ const classes = (className, dark) =>
47
+ classnames(
48
+ {
49
+ 'pb_home_address_street': !dark,
50
+ 'pb_home_address_street_dark': dark,
51
+ },
52
+ globalProps(props),
53
+ className
54
+ )
55
+ return (
56
+ <div className={classes(className, dark)}>
57
+ {
58
+ <Choose>
59
+ <When condition={emphasis == 'street'}>
60
+ <div>
61
+ <Title
62
+ className="pb_home_address_street_address"
63
+ dark={dark}
64
+ size={4}
65
+ >
66
+ {joinPresent([titleize(address), houseStyle], ' · ')}
67
+ </Title>
68
+ <Title
69
+ className="pb_home_address_street_address"
70
+ dark={dark}
71
+ size={4}
72
+ >
73
+ {titleize(addressCont)}
74
+ </Title>
75
+ <Body color="light">
76
+ {`${titleize(city)}, ${state} ${zipcode}`}
77
+ </Body>
78
+ </div>
79
+ </When>
80
+ <When condition={emphasis == 'city'}>
81
+ <div>
82
+ <Body color="light">
83
+ {joinPresent([titleize(address), houseStyle], ' · ')}
84
+ </Body>
85
+ <Body color="light">{titleize(addressCont)}</Body>
86
+ <div>
87
+ <Title
88
+ className="pb_home_address_street_address"
89
+ dark={dark}
90
+ size={4}
91
+ tag="span"
92
+ >
93
+ {`${titleize(city)}, ${state}`}
94
+ </Title>
95
+ <Body
96
+ color="light"
97
+ tag="span"
98
+ >
99
+ {` ${zipcode}`}
100
+ </Body>
101
+ </div>
102
+ </div>
103
+ </When>
104
+ </Choose>
105
+ }
106
+
107
+ <If condition={homeId}>
108
+ <Hashtag
109
+ classname="home-hashtag"
110
+ dark={dark}
111
+ newWindow={newWindow}
112
+ text={homeId}
113
+ type="home"
114
+ url={homeUrl || '#'}
115
+ />
116
+ </If>
117
+ <Body
118
+ color="light"
119
+ tag="span"
120
+ >
121
+ <small>{territory}</small>
122
+ </Body>
123
+ </div>
124
+ )
125
+ }
126
+
127
+ export default HomeAddressStreet
@@ -8,7 +8,7 @@ const HomeAddressStreetDefault = (props) => {
8
8
  address="70 Prospect Ave"
9
9
  addressCont="Apt M18"
10
10
  city="West Chester"
11
- homeId="8250263"
11
+ homeId={8250263}
12
12
  homeUrl="https://powerhrg.com/"
13
13
  houseStyle="Colonial"
14
14
  state="PA"
@@ -9,7 +9,7 @@ const HomeAddressStreetEmphasis = (props) => {
9
9
  address="70 Prospect Ave"
10
10
  addressCont="Apt M18"
11
11
  city="West Chester"
12
- homeId="8250263"
12
+ homeId={8250263}
13
13
  homeUrl="https://powerhrg.com/"
14
14
  houseStyle="Colonial"
15
15
  state="PA"
@@ -24,7 +24,7 @@ const HomeAddressStreetEmphasis = (props) => {
24
24
  addressCont="Apt M18"
25
25
  city="West Chester"
26
26
  emphasis="city"
27
- homeId="8250263"
27
+ homeId={8250263}
28
28
  homeUrl="https://powerhrg.com/"
29
29
  houseStyle="Colonial"
30
30
  state="PA"
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import classnames from 'classnames'
3
5
 
@@ -11,7 +13,7 @@ import IconCircle from '../pb_icon_circle/_icon_circle'
11
13
  import Title from '../pb_title/_title'
12
14
 
13
15
  type IconStatValueProps = {
14
- aria?: { [key: string]: string },
16
+ aria?: object,
15
17
  className?: string,
16
18
  data?: object,
17
19
  icon: string,
@@ -51,7 +53,7 @@ const IconStatValue = (props: IconStatValueProps) => {
51
53
  buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
52
54
  className
53
55
  )
54
- const titleSize = function(size: "sm" | "md" | "lg") {
56
+ const titleSize = function(size) {
55
57
  if (size == 'lg') {
56
58
  return (
57
59
  <Title
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import classnames from 'classnames'
3
5
 
@@ -9,12 +11,12 @@ import Icon from '../pb_icon/_icon'
9
11
 
10
12
  type IconValueProps = {
11
13
  align?: "left" | "center" | "right",
12
- aria?: { [key: string]: string; },
14
+ aria?: object,
13
15
  className?: string,
14
16
  dark?: boolean,
15
17
  data?: object,
16
18
  icon: string,
17
- id?: string,
19
+ id?: number,
18
20
  text: string,
19
21
  }
20
22
 
@@ -0,0 +1,155 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import classnames from 'classnames'
5
+ import DateTime from '../pb_kit/dateTime'
6
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
7
+ import { globalProps } from '../utilities/globalProps'
8
+
9
+ import Body from '../pb_body/_body'
10
+ import Caption from '../pb_caption/_caption'
11
+ import Flex from '../pb_flex/_flex'
12
+ import Icon from '../pb_icon/_icon'
13
+ import Title from '../pb_title/_title'
14
+
15
+ type LabelValueProps = {
16
+ active?: boolean,
17
+ aria?: object,
18
+ className?: string,
19
+ dark?: boolean,
20
+ data?: object,
21
+ date?: date,
22
+ id?: string,
23
+ label: string,
24
+ value?: string,
25
+ variant?: "default" | "details",
26
+ icon?: string,
27
+ description?: string,
28
+ title?: string,
29
+ }
30
+
31
+ const dateString = (value: DateTime) => {
32
+ const month = value.toMonthNum()
33
+ const day = value.toDay()
34
+
35
+ return ` · ${month}/${day}`
36
+ }
37
+
38
+ const LabelValue = (props: LabelValueProps) => {
39
+ const {
40
+ active = false,
41
+ aria = {},
42
+ className,
43
+ dark = false,
44
+ data = {},
45
+ date,
46
+ description,
47
+ icon,
48
+ id,
49
+ label,
50
+ title,
51
+ value,
52
+ variant = 'default',
53
+ } = props
54
+
55
+ const ariaProps = buildAriaProps(aria)
56
+ const dataProps = buildDataProps(data)
57
+ const formattedDate = new DateTime({ value: date })
58
+ const variantClass = variant === 'details' ? 'details' : ''
59
+ const classes = classnames(buildCss('pb_label_value_kit', variantClass), globalProps(props), className)
60
+
61
+ return (
62
+ <div
63
+ {...ariaProps}
64
+ {...dataProps}
65
+ className={classes}
66
+ description={description}
67
+ icon={icon}
68
+ id={id}
69
+ title={title}
70
+ >
71
+ <Caption
72
+ dark={dark}
73
+ text={label}
74
+ />
75
+ <If condition={variant === 'details'}>
76
+ <Flex
77
+ inline
78
+ vertical="center"
79
+ >
80
+ <If condition={icon}>
81
+ <Body
82
+ color="light"
83
+ dark={dark}
84
+ marginRight="xs"
85
+ >
86
+ <Icon
87
+ dark={dark}
88
+ fixedWidth
89
+ icon={icon}
90
+ />
91
+ </Body>
92
+ </If>
93
+ <If condition={description}>
94
+ <Body
95
+ color="light"
96
+ dark={dark}
97
+ marginRight="xs"
98
+ text={description}
99
+ />
100
+ </If>
101
+ <Choose>
102
+ <When condition={active === true}>
103
+ <Flex
104
+ inline
105
+ vertical="center"
106
+ >
107
+ <If condition={title}>
108
+ <Title
109
+ dark={dark}
110
+ size={4}
111
+ text={title}
112
+ variant="link"
113
+ />
114
+ </If>
115
+ <If condition={date}>
116
+ <Title
117
+ dark={dark}
118
+ marginLeft="xs"
119
+ size={4}
120
+ text={' ' + dateString(formattedDate)}
121
+ variant="link"
122
+ />
123
+ </If>
124
+ </Flex>
125
+ </When>
126
+ <Otherwise>
127
+ <If condition={title}>
128
+ <Title
129
+ dark={dark}
130
+ size={4}
131
+ text={title}
132
+ />
133
+ </If>
134
+ <If condition={date}>
135
+ <Title
136
+ dark={dark}
137
+ marginLeft="xs"
138
+ size={4}
139
+ text={' ' + dateString(formattedDate)}
140
+ />
141
+ </If>
142
+ </Otherwise>
143
+ </Choose>
144
+ </Flex>
145
+ <Else />
146
+ <Body
147
+ dark={dark}
148
+ text={value}
149
+ />
150
+ </If>
151
+ </div>
152
+ )
153
+ }
154
+
155
+ export default LabelValue
@@ -82,7 +82,7 @@ test("render all layout variants", () => {
82
82
  ]
83
83
 
84
84
  testValues.forEach(({ layout, expected }) => {
85
- const { getByTestId } = render(
85
+ const { getByTestId, container } = render(
86
86
  <Layout data={{ testid: `test-${layout}` }}
87
87
  layout={layout}>
88
88
  <Layout.Body>
@@ -90,6 +90,7 @@ test("render all layout variants", () => {
90
90
  </Layout.Body>
91
91
  </Layout>
92
92
  )
93
+ console.log(container)
93
94
 
94
95
  expect(getByTestId(`test-${layout}`)).toHaveClass(expected)
95
96
  cleanup()
@@ -4,7 +4,7 @@ module Playbook
4
4
  module PbPopover
5
5
  class Popover < Playbook::KitBase
6
6
  prop :position, type: Playbook::Props::Enum,
7
- values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
7
+ values: %w[top bottom left right],
8
8
  default: "left"
9
9
  prop :trigger_element_id
10
10
  prop :tooltip_id