playbook_ui_docs 13.5.0 → 13.6.0.pre.alpha.play845allkitsbytypes1219

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a52479a874399aede5baaf0aba7761ba2bc5356a4c5b181a86088e7c13ef96f6
4
- data.tar.gz: 48e502ad78059d5db41e0cd873ae0e6f77f92ea560f2e21950f276068f1a6160
3
+ metadata.gz: 567266641023f678303600212e47c79bcc12c110d3ef4788e1b8576a6fc1db21
4
+ data.tar.gz: 9fab8f81b81fae63f6a16c0272c03c0bc54a248a8a14e0c2a6e0e863ebb0ae9d
5
5
  SHA512:
6
- metadata.gz: 62f934b940778238c163fa0cd2586e2afc364a252492cacf13a1bc6a0e6ec2d368b1f8eb145e85eec156b3ea06aa261350fba93b5e7a22bee47bb20c16520a98
7
- data.tar.gz: facc03fa04b8797492b8221b8813924e39886df2c66cb86b2d7126d29fe51b412a7e4c1fb422d6714575ae3eb889ffffd78bc1a290ad594cfb1780e4dd6cbca5
6
+ metadata.gz: cf0345e673b100b108211949ce38a700a9ccd3276f104f95675543b586eed331fade129879c38c532aac25c02142bd579664343be505a283b5d66c6e4d635ee4
7
+ data.tar.gz: e964f648a297663733faa8f817f328567570f7426184a4985531eba406340c7df79a64bb5c5d5d20ba649b6df7b9e55b83cdecd2c8f56c66f33ff8920ab43ae3
@@ -0,0 +1,12 @@
1
+ <% lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!" %>
2
+
3
+ <%= pb_rails("flex", props: { orientation: "column", max_width: "md" }) do %>
4
+ <%= pb_rails("caption", props: { text: "After first row" }) %>
5
+ <%= pb_rails("body", props: { text: lorem, truncate: "1", margin_bottom: "md" }) %>
6
+
7
+ <%= pb_rails("caption", props: { text: "After second row" }) %>
8
+ <%= pb_rails("body", props: { text: lorem, truncate: "2", margin_bottom: "md" }) %>
9
+
10
+ <%= pb_rails("caption", props: { text: "After third row" }) %>
11
+ <%= pb_rails("body", props: { text: lorem, truncate: "3" }) %>
12
+ <% end %>
@@ -0,0 +1,50 @@
1
+ import React from 'react';
2
+
3
+ import Body from '../_body';
4
+ import Caption from '../../pb_caption/_caption'
5
+ import Flex from '../../pb_flex/_flex'
6
+
7
+ const BodyTruncate = (props) => {
8
+ const lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!"
9
+
10
+ return (
11
+ <Flex
12
+ maxWidth="md"
13
+ orientation="column"
14
+ >
15
+ <Caption
16
+ text="After first row"
17
+ {...props}
18
+ />
19
+ <Body
20
+ marginBottom="md"
21
+ text={lorem}
22
+ truncate="1"
23
+ {...props}
24
+ />
25
+
26
+ <Caption
27
+ text="After second row"
28
+ {...props}
29
+ />
30
+ <Body
31
+ marginBottom="md"
32
+ text={lorem}
33
+ truncate="2"
34
+ {...props}
35
+ />
36
+
37
+ <Caption
38
+ text="After third row"
39
+ {...props}
40
+ />
41
+ <Body
42
+ text={lorem}
43
+ truncate="3"
44
+ {...props}
45
+ />
46
+ </Flex>
47
+ )
48
+ }
49
+
50
+ export default BodyTruncate
@@ -0,0 +1,4 @@
1
+ ##### Prop
2
+ `truncate` | **Type**: String | **Values**: "1" | "2" | "3" | "4" | "5"
3
+
4
+ The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -4,8 +4,11 @@ examples:
4
4
  - body_block: Block
5
5
  - body_articles: Best settings for articles
6
6
  - body_styled: Styled tags
7
+ - body_truncate: Truncate
8
+
7
9
  react:
8
10
  - body_light: Default
9
11
  - body_block: Block
10
12
  - body_articles: Best settings for articles
11
13
  - body_styled: Styled tags
14
+ - body_truncate: Truncate
@@ -2,3 +2,4 @@ export { default as BodyLight } from './_body_light.jsx'
2
2
  export { default as BodyBlock } from './_body_block.jsx'
3
3
  export { default as BodyStyled } from './_body_styled.jsx'
4
4
  export { default as BodyArticles } from './_body_articles.jsx'
5
+ export { default as BodyTruncate } from './_body_truncate.jsx'
@@ -2,27 +2,31 @@
2
2
  <thead>
3
3
  <tr>
4
4
  <%= pb_rails("table/table_header", props: {
5
- id: "name",
6
- colspan: 2,
5
+ text: "Territory",
6
+ id: "territory",
7
7
  sort_menu: [
8
- { item: "Name", link: "?q[sorts]=name+desc", active: false, direction: "desc" },
9
- { item: "Name", link: "?q[sorts]=name+asc", active: true, direction: "asc" },
8
+ { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
9
+ { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
10
10
  ],
11
11
  }) %>
12
12
  <%= pb_rails("table/table_header", props: {
13
- text: "Age",
14
- id: "age",
13
+ id: "name",
14
+ text: "Full Name",
15
+ colspan: 2,
15
16
  sort_menu: [
16
- { item: "Age", link: "?q[sorts]=age+desc", active: false, direction: "desc" },
17
- { item: "Age", link: "?q[sorts]=age+asc", active: false, direction: "asc" },
17
+ { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
18
+ { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
19
+ { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
20
+ { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
18
21
  ],
19
22
  }) %>
20
23
  <%= pb_rails("table/table_header", props: {
21
- text: "Territory",
22
- id: "territory",
24
+ text: "Age",
25
+ id: "age",
26
+ sort_dropdown: true,
23
27
  sort_menu: [
24
- { item: "Territory", link: "?q[sorts]=territory+desc", active: false, direction: "desc" },
25
- { item: "Territory", link: "?q[sorts]=territory+asc", active: false, direction: "asc" },
28
+ { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
29
+ { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
26
30
  ],
27
31
  }) %>
28
32
  <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
@@ -30,25 +34,25 @@
30
34
  </thead>
31
35
  <tbody>
32
36
  <tr>
33
- <td>Name 1</td>
34
- <td>Name 2</td>
35
- <td>Value 3</td>
36
- <td>Value 4</td>
37
- <td>Value 5</td>
37
+ <td>Ter 1</td>
38
+ <td>First Name 1</td>
39
+ <td>Last Name 1</td>
40
+ <td>Age 1</td>
41
+ <td>Job 1</td>
38
42
  </tr>
39
43
  <tr>
40
- <td>Name 1</td>
41
- <td>Name 2</td>
42
- <td>Value 3</td>
43
- <td>Value 4</td>
44
- <td>Value 5</td>
44
+ <td>Ter 2</td>
45
+ <td>First Name 2</td>
46
+ <td>Last Name 2</td>
47
+ <td>Age 2</td>
48
+ <td>Job 2</td>
45
49
  </tr>
46
50
  <tr>
47
- <td>Name 1</td>
48
- <td>Name 2</td>
49
- <td>Value 3</td>
50
- <td>Value 4</td>
51
- <td>Value 5</td>
51
+ <td>Ter 3</td>
52
+ <td>First Name 3</td>
53
+ <td>Last Name 3</td>
54
+ <td>Age 3</td>
55
+ <td>Job 3</td>
52
56
  </tr>
53
57
  </tbody>
54
58
  <% end %>
@@ -1 +1,8 @@
1
- A kit that produces a `<th>` tag. You can also use the `sort_menu` prop to make the header a sortable link, just like <a href="https://playbook.powerapp.cloud/kits/filter#sort-only" target="_blank">our filter kit.</a>
1
+ The `table_header` subcomponent creates `<th>` elements and optionally accepts:
2
+
3
+ * `colspan` (number) for setting column span
4
+ * `sort_menu` accepts sort options as an array of `item` objects.
5
+ presence of `sort_menu` enables the sort link within the header
6
+ * `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
7
+ * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
8
+ * `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
@@ -0,0 +1,12 @@
1
+ <% lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!" %>
2
+
3
+ <%= pb_rails("flex", props: { orientation: "column", max_width: "md" }) do %>
4
+ <%= pb_rails("caption", props: { text: "After first row" }) %>
5
+ <%= pb_rails("title", props: { text: lorem, truncate: "1", size: 4, margin_bottom: "md" }) %>
6
+
7
+ <%= pb_rails("caption", props: { text: "After second row" }) %>
8
+ <%= pb_rails("title", props: { text: lorem, truncate: "2", size: 4, margin_bottom: "md" }) %>
9
+
10
+ <%= pb_rails("caption", props: { text: "After third row" }) %>
11
+ <%= pb_rails("title", props: { text: lorem, truncate: "3", size: 4 }) %>
12
+ <% end %>
@@ -0,0 +1,53 @@
1
+ import React from 'react';
2
+
3
+ import Title from '../_title';
4
+ import Caption from '../../pb_caption/_caption'
5
+ import Flex from '../../pb_flex/_flex'
6
+
7
+ const TitleTruncate = (props) => {
8
+ const lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!"
9
+
10
+ return (
11
+ <Flex
12
+ maxWidth="md"
13
+ orientation="column"
14
+ >
15
+ <Caption
16
+ text="After first row"
17
+ {...props}
18
+ />
19
+ <Title
20
+ marginBottom="md"
21
+ size={4}
22
+ text={lorem}
23
+ truncate="1"
24
+ {...props}
25
+ />
26
+
27
+ <Caption
28
+ text="After second row"
29
+ {...props}
30
+ />
31
+ <Title
32
+ marginBottom="md"
33
+ size={4}
34
+ text={lorem}
35
+ truncate="2"
36
+ {...props}
37
+ />
38
+
39
+ <Caption
40
+ text="After third row"
41
+ {...props}
42
+ />
43
+ <Title
44
+ size={4}
45
+ text={lorem}
46
+ truncate="3"
47
+ {...props}
48
+ />
49
+ </Flex>
50
+ )
51
+ }
52
+
53
+ export default TitleTruncate
@@ -0,0 +1,4 @@
1
+ ##### Prop
2
+ `truncate` | **Type**: String | **Values**: "1" | "2" | "3" | "4" | "5"
3
+
4
+ The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -4,9 +4,11 @@ examples:
4
4
  - title_light_weight: Light Weight UI
5
5
  - title_colors: Colors
6
6
  - title_responsive: Responsive
7
+ - title_truncate: Truncate
7
8
 
8
9
  react:
9
10
  - title_default: Default UI
10
11
  - title_light_weight: Light Weight UI
11
12
  - title_colors: Colors
12
13
  - title_responsive: Responsive
14
+ - title_truncate: Truncate
@@ -2,3 +2,4 @@ export { default as TitleDefault } from './_title_default.jsx'
2
2
  export { default as TitleLightWeight } from './_title_light_weight.jsx'
3
3
  export { default as TitleColors } from './_title_colors.jsx'
4
4
  export { default as TitleResponsive } from './_title_responsive.jsx'
5
+ export { default as TitleTruncate } from './_title_truncate.jsx'
data/dist/menu.yml CHANGED
@@ -1,111 +1,236 @@
1
1
  kits:
2
- - avatars:
3
- - avatar
4
- - avatar_action_button
5
- - multiple_users
6
- - multiple_users_stacked
7
- - user
8
- - background
9
- - bread_crumbs
10
- - buttons:
11
- - button
12
- - button_toolbar
13
- - circle_icon_button
14
- - card
15
- - collapsible
16
- - charts_and_graphs:
17
- - bar_graph
18
- - circle_chart
19
- - distribution_bar
20
- - gauge
21
- - legend
22
- - line_graph
23
- - treemap_chart
24
- - dialog
25
- - filter
26
- - fixed_confirmation_toast
27
- - forms:
28
- - checkbox
29
- - date_picker
30
- - file_upload
31
- - form
32
- - form_group
33
- - form_pill
34
- - multi_level_select
35
- - passphrase
36
- - phone_number_input
37
- - radio
38
- - rich_text_editor
39
- - select
40
- - selectable_card
41
- - selectable_card_icon
42
- - selectable_icon
43
- - selectable_list
44
- - text_input
45
- - textarea
46
- - toggle
47
- - typeahead
48
- - highlight
49
- - icon
50
- - icon_circle
51
- - icon_stat_value
52
- - icon_value
53
- - image
54
- - layouts:
55
- - flex
56
- - layout
57
- - lightbox
58
- - list
59
- - loading_inline
60
- - map
61
- - nav
62
- - tags:
63
- - badge
64
- - hashtag
65
- - pill
66
- - pagination
67
- - popover
68
- - progress:
69
- - progress_pills
70
- - progress_simple
71
- - progress_step
72
- - section_separator
73
- - star_rating
74
- - table
75
- - timeline
76
- - time_and_date:
77
- - date
78
- - date_range_inline
79
- - date_range_stacked
80
- - date_stacked
81
- - date_time
82
- - date_time_stacked
83
- - date_year_stacked
84
- - time
85
- - time_range_inline
86
- - time_stacked
87
- - timestamp
88
- - weekday_stacked
89
- - tooltip
90
- - typography:
91
- - body
92
- - caption
93
- - detail
94
- - title
95
- - typography_patterns:
96
- - contact
97
- - currency
98
- - dashboard_value
99
- - home_address_street
100
- - label_pill
101
- - label_value
102
- - message
103
- - person
104
- - person_contact
105
- - source
106
- - stat_change
107
- - stat_value
108
- - title_count
109
- - title_detail
110
- - user_badge
111
- - walkthrough
2
+ rails:
3
+ - avatars:
4
+ - avatar
5
+ - avatar_action_button
6
+ - multiple_users
7
+ - multiple_users_stacked
8
+ - user
9
+ - background
10
+ - bread_crumbs
11
+ - buttons:
12
+ - button
13
+ - button_toolbar
14
+ - circle_icon_button
15
+ - card
16
+ - collapsible
17
+ - charts_and_graphs:
18
+ - bar_graph
19
+ - circle_chart
20
+ - distribution_bar
21
+ - gauge
22
+ - legend
23
+ - line_graph
24
+ - treemap_chart
25
+ - dialog
26
+ - filter
27
+ - fixed_confirmation_toast
28
+ - forms:
29
+ - checkbox
30
+ - date_picker
31
+ - file_upload
32
+ - form
33
+ - form_group
34
+ - form_pill
35
+ - multi_level_select
36
+ - passphrase
37
+ - phone_number_input
38
+ - radio
39
+ - rich_text_editor
40
+ - select
41
+ - selectable_card
42
+ - selectable_card_icon
43
+ - selectable_icon
44
+ - selectable_list
45
+ - text_input
46
+ - textarea
47
+ - toggle
48
+ - typeahead
49
+ - highlight
50
+ - icon
51
+ - icon_circle
52
+ - icon_stat_value
53
+ - icon_value
54
+ - image
55
+ - layouts:
56
+ - flex
57
+ - layout
58
+ - list
59
+ - loading_inline
60
+ - nav
61
+ - tags:
62
+ - badge
63
+ - hashtag
64
+ - pill
65
+ - pagination
66
+ - popover
67
+ - progress:
68
+ - progress_pills
69
+ - progress_simple
70
+ - progress_step
71
+ - section_separator
72
+ - star_rating
73
+ - table
74
+ - timeline
75
+ - time_and_date:
76
+ - date
77
+ - date_range_inline
78
+ - date_range_stacked
79
+ - date_stacked
80
+ - date_time
81
+ - date_time_stacked
82
+ - date_year_stacked
83
+ - time
84
+ - time_range_inline
85
+ - time_stacked
86
+ - timestamp
87
+ - weekday_stacked
88
+ - tooltip
89
+ - typography:
90
+ - body
91
+ - caption
92
+ - detail
93
+ - title
94
+ - typography_patterns:
95
+ - contact
96
+ - currency
97
+ - dashboard_value
98
+ - home_address_street
99
+ - label_pill
100
+ - label_value
101
+ - message
102
+ - person
103
+ - person_contact
104
+ - source
105
+ - stat_change
106
+ - stat_value
107
+ - title_count
108
+ - title_detail
109
+ - user_badge
110
+
111
+ react:
112
+ - avatars:
113
+ - avatar
114
+ - avatar_action_button
115
+ - multiple_users
116
+ - multiple_users_stacked
117
+ - user
118
+ - background
119
+ - bread_crumbs
120
+ - buttons:
121
+ - button
122
+ - button_toolbar
123
+ - circle_icon_button
124
+ - card
125
+ - collapsible
126
+ - charts_and_graphs:
127
+ - bar_graph
128
+ - circle_chart
129
+ - distribution_bar
130
+ - gauge
131
+ - legend
132
+ - line_graph
133
+ - treemap_chart
134
+ - dialog
135
+ - filter
136
+ - fixed_confirmation_toast
137
+ - forms:
138
+ - checkbox
139
+ - date_picker
140
+ - file_upload
141
+ - form_group
142
+ - form_pill
143
+ - multi_level_select
144
+ - passphrase
145
+ - phone_number_input
146
+ - radio
147
+ - rich_text_editor
148
+ - select
149
+ - selectable_card
150
+ - selectable_card_icon
151
+ - selectable_icon
152
+ - selectable_list
153
+ - text_input
154
+ - textarea
155
+ - toggle
156
+ - typeahead
157
+ - highlight
158
+ - icon
159
+ - icon_circle
160
+ - icon_stat_value
161
+ - icon_value
162
+ - image
163
+ - layouts:
164
+ - flex
165
+ - layout
166
+ - lightbox
167
+ - list
168
+ - loading_inline
169
+ - map
170
+ - nav
171
+ - tags:
172
+ - badge
173
+ - hashtag
174
+ - pill
175
+ - popover
176
+ - progress:
177
+ - progress_pills
178
+ - progress_simple
179
+ - progress_step
180
+ - section_separator
181
+ - star_rating
182
+ - table
183
+ - timeline
184
+ - time_and_date:
185
+ - date
186
+ - date_range_inline
187
+ - date_range_stacked
188
+ - date_stacked
189
+ - date_time
190
+ - date_time_stacked
191
+ - date_year_stacked
192
+ - time
193
+ - time_range_inline
194
+ - time_stacked
195
+ - timestamp
196
+ - weekday_stacked
197
+ - tooltip
198
+ - typography:
199
+ - body
200
+ - caption
201
+ - detail
202
+ - title
203
+ - typography_patterns:
204
+ - contact
205
+ - currency
206
+ - dashboard_value
207
+ - home_address_street
208
+ - label_pill
209
+ - label_value
210
+ - message
211
+ - person
212
+ - person_contact
213
+ - source
214
+ - stat_change
215
+ - stat_value
216
+ - title_count
217
+ - title_detail
218
+ - user_badge
219
+ - walkthrough
220
+
221
+ swift:
222
+ - avatars:
223
+ - avatar
224
+ - buttons:
225
+ - charts_and_graphs:
226
+ - forms:
227
+ - radio
228
+ - layouts:
229
+ - tags:
230
+ - badge
231
+ - pill
232
+ - progress:
233
+ - time_and_date:
234
+ - timestamp
235
+ - typography:
236
+ - typography_patterns: