playbook_ui 13.7.0 → 13.8.0.pre.alpha.PLAY962SingleSelect1246

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_currency/_currency.scss +35 -15
  3. data/app/pb_kits/playbook/pb_currency/_currency.tsx +44 -42
  4. data/app/pb_kits/playbook/pb_currency/currency.html.erb +11 -5
  5. data/app/pb_kits/playbook/pb_currency/currency.rb +10 -2
  6. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.html.erb +14 -0
  7. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx +30 -0
  8. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md +1 -0
  9. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +2 -1
  10. data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
  11. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +27 -22
  13. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +2 -1
  14. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +234 -109
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +6 -7
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +73 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +87 -0
  19. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -2
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -1
  21. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +7 -0
  22. data/app/pb_kits/playbook/pb_nav/_item.tsx +12 -9
  23. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +23 -1
  24. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -0
  25. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +3 -0
  26. data/app/pb_kits/playbook/pb_nav/item.rb +7 -2
  27. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +9 -9
  28. data/app/pb_kits/playbook/pb_table/table_header.html.erb +10 -2
  29. data/dist/playbook-rails.js +5 -5
  30. data/lib/playbook/version.rb +2 -2
  31. metadata +12 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5dffdd70d846131d41ca730751f18ecbd3d6c3134227d8e49b4c1ba931102b71
4
- data.tar.gz: f07f7e9cdda6731abe606f2852f184249d6f75fa169632475465938d240bd268
3
+ metadata.gz: 91dabc0c37f4b0d7c83e0c9728a4db6d2eb34fe92c387934cab037fd18025e2a
4
+ data.tar.gz: ab8ea303f33c2cc6e47d9af314ccf15e41fad54fdfa1e743a00cd1ec5b3e41f5
5
5
  SHA512:
6
- metadata.gz: d8aa40e8d0cc14a4843042766358101dacf51d3e595f8a3681c3fec77b24b97b5d6e4c01ae5c61b50ddb1b78b23fed71d6fe6a5b2e3b4b4066ad3a36cb444cc0
7
- data.tar.gz: 3bc73db4617eb2169732d48e3bcabf5a59d4300d59d4d9b0419685dff5c4729c0441ffe2a08e625db6de3aa4121c0dfd06faf69d958845f0aec945f8e62bbff4
6
+ metadata.gz: dd3547fb3e5ec0242dd18e1ad45c4bbf075adc932f33befa20f5cb6874b63bd90df323661d58330a55ea0f6e4d03460c9d8ac888c5e887cb28cef8c66f208289
7
+ data.tar.gz: 44206940d57a0f6dd4d875dac195ade688a6aaff286ae489f9e6ee70987355410a8d397d66f3d06237adb5b49df2e9965a72f63c2245ab78c5b94692e8703f81
data/app/pb_kits/playbook/pb_currency/_currency.scss CHANGED
@@ -1,4 +1,3 @@
1
-
2
1
  [class^=pb_currency_kit] {
3
2
  &[class*=_center] {
4
3
  & > [class^=pb_caption],
@@ -21,30 +20,43 @@
21
20
  justify-content: flex-end;
22
21
  }
23
22
  }
23
+
24
24
  [class^=pb_currency_wrapper] {
25
25
  display: flex;
26
26
  align-items: baseline;
27
27
 
28
- &[class*=_deemphasized] [class^=pb_body_kit][class*=_light] {
29
- color: $text_lt_default;
30
- }
28
+ &[class*=_deemphasized] {
29
+ [class^=pb_body_kit], [class^=pb_body_kit] {
30
+ &:not([class*=dark]) {
31
+ color: $text_lt_default;
32
+ }
33
+ }
31
34
 
32
- &[class*=_deemphasized] [class^=pb_title_kit][class*=_4] {
33
- font-weight: $regular;
34
- }
35
+ [class^=pb_body_kit][class*=_light] {
36
+ font-weight: $regular;
37
+ }
35
38
 
36
- &[class*=_light] [class^=pb_body_kit][class*=_light] {
37
- color: $text_lt_light;
39
+ [class^=pb_title_kit] {
40
+ font-weight: $lighter;
41
+ }
38
42
  }
39
43
 
40
- &[class*=_light] [class^=pb_title_kit][class*=_4] {
41
- color: $text_lt_light;
42
- font-weight: $regular;
44
+ &[class*=_light] {
45
+ [class^=pb_body_kit], [class^=pb_title_kit] {
46
+ color: $text_lt_light;
47
+ font-weight: $regular;
48
+ }
49
+
50
+ [class^=pb_title_kit].dark {
51
+ color: $text_dk_light;
52
+ }
43
53
  }
44
54
 
45
- &[class*=_bold] [class^=pb_body_kit][class*=_light] {
46
- color: $text_lt_default;
47
- font-weight: $bolder;
55
+ &[class*=_bold] {
56
+ [class^=pb_body_kit], [class^=_light]{
57
+ color: $text_lt_default;
58
+ font-weight: $bolder;
59
+ }
48
60
  }
49
61
 
50
62
  & > [class*=dollar_sign] {
@@ -57,6 +69,14 @@
57
69
  }
58
70
  }
59
71
 
72
+ &[class*=_sm] {
73
+ [class^=pb_currency_wrapper][class*=_deemphasized] {
74
+ [class^=pb_title_kit] {
75
+ font-weight: $regular;
76
+ }
77
+ }
78
+ }
79
+
60
80
  &[class*=_lg] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
61
81
  line-height: .9;
62
82
  padding-left: $space_xs - 7px;
data/app/pb_kits/playbook/pb_currency/_currency.tsx CHANGED
@@ -24,6 +24,7 @@ type CurrencyProps = {
24
24
  symbol?: string,
25
25
  variant?: 'default' | 'light' | 'bold',
26
26
  unit?: string,
27
+ unstyled?: boolean,
27
28
  }
28
29
 
29
30
  const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -49,17 +50,16 @@ const Currency = (props: CurrencyProps) => {
49
50
  symbol = '$',
50
51
  variant = 'default',
51
52
  dark = false,
53
+ unstyled = false,
52
54
  } = props
53
55
 
54
56
  const emphasizedClass = emphasized ? '' : '_deemphasized'
55
57
 
56
58
  let variantClass
57
- if (size === 'sm') {
58
- if (variant === 'light') {
59
- variantClass = '_light'
60
- } else if (variant === 'bold') {
61
- variantClass = '_bold'
62
- }
59
+ if (variant === 'light') {
60
+ variantClass = '_light'
61
+ } else if (variant === 'bold') {
62
+ variantClass = '_bold'
63
63
  }
64
64
 
65
65
  const [whole, decimal = '00'] = amount.split('.')
@@ -99,44 +99,46 @@ const Currency = (props: CurrencyProps) => {
99
99
  className={classes}
100
100
  id={id}
101
101
  >
102
- <Caption>{label}</Caption>
102
+ <Caption dark={dark}>{label}</Caption>
103
103
 
104
104
  <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
105
- <Body
106
- className="dollar_sign"
107
- color="light"
108
- dark={dark}
109
- >
110
- {symbol}
111
- </Body>
112
-
113
- <Title
114
- className="pb_currency_value"
115
- dark={dark}
116
- size={sizes[size]}
117
- >
118
- {getAmount}
119
- </Title>
120
-
121
- <Body
122
- className="unit"
123
- color="light"
124
- dark={dark}
125
- >
126
- {getAbbreviation}
127
- {
128
- unit ? (
129
- <>
130
- {unit}
131
- </>
132
- ) : (
133
- <>
134
- {getDecimalValue}
135
- </>
136
- )
137
- }
138
-
139
- </Body>
105
+ {unstyled ? (
106
+ <>
107
+ <div>{symbol}</div>
108
+ <div>{getAmount}</div>
109
+ <div>
110
+ {getAbbreviation}
111
+ {unit ? unit : getDecimalValue}
112
+ </div>
113
+ </>
114
+ ) : (
115
+ <>
116
+ <Body
117
+ className="dollar_sign"
118
+ color="light"
119
+ dark={dark}
120
+ >
121
+ {symbol}
122
+ </Body>
123
+
124
+ <Title
125
+ className="pb_currency_value"
126
+ dark={dark}
127
+ size={sizes[size]}
128
+ >
129
+ {getAmount}
130
+ </Title>
131
+
132
+ <Body
133
+ className="unit"
134
+ color="light"
135
+ dark={dark}
136
+ >
137
+ {getAbbreviation}
138
+ {unit ? unit : getDecimalValue}
139
+ </Body>
140
+ </>
141
+ )}
140
142
  </div>
141
143
  </div>
142
144
  )
data/app/pb_kits/playbook/pb_currency/currency.html.erb CHANGED
@@ -3,13 +3,19 @@
3
3
  id: object.id,
4
4
  data: object.data,
5
5
  class: object.classname) do %>
6
- <%= pb_rails("caption", props: { text: object.label }) %>
6
+ <%= pb_rails("caption", props: object.caption_props) %>
7
7
 
8
8
  <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
9
- <%= pb_rails("body", props: object.currency_wrapper_props) do %>
10
- <%= object.symbol %>
9
+ <% if object.unstyled %>
10
+ <div><%= object.symbol %></div>
11
+ <div><%= object.title_props[:text] %></div>
12
+ <div><%= object.body_props[:text] %></div>
13
+ <% else %>
14
+ <%= pb_rails("body", props: object.currency_wrapper_props) do %>
15
+ <%= object.symbol %>
16
+ <% end %>
17
+ <%= pb_rails("title", props: object.title_props) %>
18
+ <%= pb_rails("body", props: object.body_props) %>
11
19
  <% end %>
12
- <%= pb_rails("title", props: object.title_props) %>
13
- <%= pb_rails("body", props: object.body_props) %>
14
20
  </div>
15
21
  <% end %>
data/app/pb_kits/playbook/pb_currency/currency.rb CHANGED
@@ -40,6 +40,9 @@ module Playbook
40
40
  values: %w[default matching],
41
41
  default: "default"
42
42
 
43
+ prop :unstyled, type: Playbook::Props::Boolean,
44
+ default: false
45
+
43
46
  def classname
44
47
  generate_classname("pb_currency_kit", align, size, dark_class)
45
48
  end
@@ -52,6 +55,13 @@ module Playbook
52
55
  }
53
56
  end
54
57
 
58
+ def caption_props
59
+ {
60
+ text: label,
61
+ dark: dark,
62
+ }
63
+ end
64
+
55
65
  def title_props
56
66
  {
57
67
  size: size_value,
@@ -75,8 +85,6 @@ module Playbook
75
85
  end
76
86
 
77
87
  def variant_class
78
- return unless size == "sm"
79
-
80
88
  case variant
81
89
  when "light"
82
90
  "_light"
data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.html.erb ADDED
@@ -0,0 +1,14 @@
1
+ <%= pb_rails("currency", props: {
2
+ amount: "2,000.50",
3
+ label: "Basic unstyled example",
4
+ margin_bottom: "md",
5
+ unstyled: true
6
+ }) %>
7
+
8
+ <%= pb_rails("title", props: { size: 1 }) do %>
9
+ <%= pb_rails("currency", props: {
10
+ amount: "2,000.50",
11
+ label: "Example with wrapping typography kit",
12
+ unstyled: true
13
+ }) %>
14
+ <% end %>
data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx ADDED
@@ -0,0 +1,30 @@
1
+ import React from 'react'
2
+ import { Currency, Title } from '../..'
3
+
4
+ const CurrencyUnstyled = (props) => {
5
+ return (
6
+ <>
7
+ <Currency
8
+ amount="2,000.50"
9
+ label="Basic unstyled example"
10
+ marginBottom="md"
11
+ unstyled
12
+ {...props}
13
+ />
14
+
15
+ <Title
16
+ size={1}
17
+ {...props}
18
+ >
19
+ <Currency
20
+ amount="2,000.50"
21
+ label="Example with wrapping typography kit"
22
+ unstyled
23
+ {...props}
24
+ />
25
+ </Title>
26
+ </>
27
+ )
28
+ }
29
+
30
+ export default CurrencyUnstyled
data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.md ADDED
@@ -0,0 +1 @@
1
+ For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Currency` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Currency` kit to inherit any of our typography styles.
data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb CHANGED
@@ -13,12 +13,13 @@
13
13
  size: "sm",
14
14
  symbol: "€",
15
15
  variant: "light",
16
+ emphasized: false,
16
17
  }) %>
17
18
 
18
19
  <%= pb_rails("currency", props: {
19
20
  amount: "45",
20
21
  label: "Bold",
21
- size: "lg",
22
+ size: "sm",
22
23
  unit: "/mo",
23
24
  variant: "bold",
24
25
  }) %>
data/app/pb_kits/playbook/pb_currency/docs/example.yml CHANGED
@@ -7,6 +7,7 @@ examples:
7
7
  - currency_no_symbol: No Symbol
8
8
  - currency_abbreviated: Abbreviate Larger Amounts
9
9
  - currency_matching_decimals: Matching Decimals
10
+ - currency_unstyled: Unstyled
10
11
 
11
12
  react:
12
13
  - currency_variants: Variants
@@ -15,3 +16,4 @@ examples:
15
16
  - currency_no_symbol: No Symbol
16
17
  - currency_abbreviated: Abbreviate Larger Amounts
17
18
  - currency_matching_decimals: Matching Decimals
19
+ - currency_unstyled: Unstyled
data/app/pb_kits/playbook/pb_currency/docs/index.js CHANGED
@@ -4,3 +4,4 @@ export { default as CurrencyAlignment } from './_currency_alignment.jsx'
4
4
  export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
5
5
  export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
6
6
  export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
7
+ export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx CHANGED
@@ -1,22 +1,9 @@
1
- //function to retrieve all ancestors of unchecked item and set checked to false
2
- export const getAncestorsOfUnchecked = (
3
- data: { [key: string]: any }[],
4
- item: { [key: string]: any }
5
- ) => {
6
- if (item.parent_id) {
7
- const ancestor = filterFormattedDataById(data, item.parent_id);
8
- ancestor[0].checked = false;
9
- ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
10
- }
11
- return data;
12
- };
13
-
14
- //function is going over formattedData and returning all objects that match the
15
- //id of the clicked item from the dropdown
1
+ // Function is going over formattedData and returning all objects that match the
2
+ // ID of the clicked item from the dropdown
16
3
  export const filterFormattedDataById = (
17
4
  formattedData: { [key: string]: any }[],
18
5
  id: string
19
- ) => {
6
+ ): { [key: string]: any }[] => {
20
7
  const matched: { [key: string]: any }[] = [];
21
8
  const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
22
9
  for (const item of data) {
@@ -38,7 +25,7 @@ export const filterFormattedDataById = (
38
25
  export const findByFilter = (
39
26
  formattedData: { [key: string]: any }[],
40
27
  searchTerm: string
41
- ) => {
28
+ ): { [key: string]: any }[] => {
42
29
  const matchedItems: { [key: string]: any }[] = [];
43
30
  const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
44
31
  for (const item of data) {
@@ -56,7 +43,20 @@ export const findByFilter = (
56
43
  return matchedItems;
57
44
  };
58
45
 
59
- //function to get all items with checked = true
46
+ // Function to retrieve all ancestors of unchecked item and set checked to false
47
+ export const getAncestorsOfUnchecked = (
48
+ data: { [key: string]: any }[],
49
+ item: { [key: string]: any }
50
+ ): { [key: string]: any }[] => {
51
+ if (item.parent_id) {
52
+ const ancestor = filterFormattedDataById(data, item.parent_id);
53
+ ancestor[0].checked = false;
54
+ ancestor[0].parent_id && getAncestorsOfUnchecked(data, ancestor[0]);
55
+ }
56
+ return data;
57
+ };
58
+
59
+ // Function to get all items with checked = true
60
60
  export const getCheckedItems = (
61
61
  data: { [key: string]: any }[]
62
62
  ): { [key: string]: any }[] => {
@@ -76,7 +76,9 @@ export const getCheckedItems = (
76
76
  return checkedItems;
77
77
  };
78
78
 
79
- export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
79
+ export const getDefaultCheckedItems = (
80
+ treeData: { [key: string]: any }[]
81
+ ): { [key: string]: any }[] => {
80
82
  const checkedDefault: { [key: string]: any }[] = [];
81
83
 
82
84
  const traverseTree = (items: { [key: string]: any }[]) => {
@@ -118,7 +120,7 @@ export const getDefaultCheckedItems = (treeData: { [key: string]: any }[]) => {
118
120
  export const recursiveCheckParent = (
119
121
  item: { [key: string]: any },
120
122
  data: any
121
- ) => {
123
+ ): any => {
122
124
  if (item.parent_id !== null) {
123
125
  const parent = filterFormattedDataById(data, item.parent_id);
124
126
  const allChildrenChecked = parent[0].children.every(
@@ -135,8 +137,11 @@ export const recursiveCheckParent = (
135
137
  return data;
136
138
  };
137
139
 
138
- export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
139
- let expandedItems: any[] = [];
140
+ export const getExpandedItems = (
141
+ treeData: { [key: string]: string }[],
142
+ selectedIds: string[]
143
+ ): any[] => {
144
+ const expandedItems: any[] = [];
140
145
 
141
146
  const traverse = (items: string | any[], ancestors: any[] = []) => {
142
147
  for (let i = 0; i < items.length; i++) {
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss CHANGED
@@ -30,10 +30,11 @@
30
30
  align-items: center;
31
31
  justify-content: space-between;
32
32
  .input_inner_container {
33
- max-width: 90%;
33
+ width: 100%;
34
34
  }
35
35
 
36
36
  input {
37
+ width: 100%;
37
38
  border: none;
38
39
  font-family: $font_family_base;
39
40
  font-size: $font_base;