playbook_ui_docs 14.9.0.pre.alpha.play1703errorstatealignment4991 → 14.9.0.pre.alpha.play1703errorstatealignment5060

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: e3d013df89931049751864c07042538ec5d849bb4b5fac4c778c100efed84638
4
- data.tar.gz: 1653f7a8d5e93fe36d83796e8f31871ef626e2b78f79ad844ef84219c5bf1c7c
3
+ metadata.gz: 22a3ee4da00e1fdd3633b3eb41ece4c2f795f076dd012f05e9883e667864e139
4
+ data.tar.gz: 982e423cf5cb3c6f798a1d5957364f9a7705bcc8440f6502abf6b730add37ad1
5
5
  SHA512:
6
- metadata.gz: edb4c6310447878ba6cfea06155928503a609eea554542df4f4a60a8572ba473349eb8b14f492058439dd80750b250a4545b46b882d647cfa43a645e816c1625
7
- data.tar.gz: 06d973c8f94e1fd1e52f9516d6a602dc8e3def23d6a03cdbb4a935de53c5ad5a935f1bcfa08874e0cfd975c6b6302b4b4f31771cd3200651781c9082016a22a4
6
+ metadata.gz: 15150f3a8a9542f4d6093510d03c703b70115a6d2c6f01cee552563bf1c50d0f76cc5e2ec830c3019893870c0ea144341c61d7208fda627dd3fd4d46abf848aa
7
+ data.tar.gz: 9b0a589f06976d149dd7832f61bfceb13c2d4922a32255685b8e8a0dd5bd8163d4ef6f3890f2515aec348fc6f821422aac1a6a87525541dffc73efca586b7e29
@@ -0,0 +1,36 @@
1
+ <% column_definitions = [
2
+ {
3
+ accessor: "year",
4
+ label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
6
+ },
7
+ {
8
+ accessor: "newEnrollments",
9
+ label: "New Enrollments",
10
+ },
11
+ {
12
+ accessor: "scheduledMeetings",
13
+ label: "Scheduled Meetings",
14
+ },
15
+ {
16
+ accessor: "attendanceRate",
17
+ label: "Attendance Rate",
18
+ },
19
+ {
20
+ accessor: "completedClasses",
21
+ label: "Completed Classes",
22
+ },
23
+ {
24
+ accessor: "classCompletionRate",
25
+ label: "Class Completion Rate",
26
+ },
27
+ {
28
+ accessor: "graduatedStudents",
29
+ label: "Graduated Students",
30
+ }
31
+ ] %>
32
+
33
+ <%= pb_rails("advanced_table", props: { id: "collapsible_trail", table_data: @table_data, column_definitions: column_definitions }) do %>
34
+ <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
35
+ <%= pb_rails("advanced_table/table_body", props: { table_data: @table_data, column_definitions: column_definitions, collapsible_trail: false }) %>
36
+ <% end %>
@@ -0,0 +1 @@
1
+ `collapsible_trail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of the rows when subRows are toggled open.
@@ -2,6 +2,7 @@ examples:
2
2
  rails:
3
3
  - advanced_table_beta: Default (Required Props)
4
4
  - advanced_table_beta_subrow_headers: SubRow Headers
5
+ - advanced_table_collapsible_trail_rails: Collapsible Trail
5
6
  - advanced_table_beta_sort: Enable Sorting
6
7
  - advanced_table_custom_cell_rails: Custom Components for Cells
7
8
 
@@ -24,4 +24,20 @@
24
24
  state: "PA",
25
25
  zipcode: "19382",
26
26
  territory: "PHL",
27
- }) %>
27
+ }) %>
28
+
29
+ <br>
30
+ <br>
31
+
32
+ <%= pb_rails("home_address_street", props: {
33
+ address: "70 Prospect Ave",
34
+ address_cont: "Apt M18",
35
+ city: "West Chester",
36
+ emphasis: "none",
37
+ home_id: 8250263,
38
+ home_url: "https://powerhrg.com/",
39
+ house_style: "Colonial",
40
+ state: "PA",
41
+ zipcode: "19382",
42
+ territory: "PHL",
43
+ }) %>
@@ -32,6 +32,21 @@ const HomeAddressStreetEmphasis = (props) => {
32
32
  zipcode="19382"
33
33
  {...props}
34
34
  />
35
+ <br />
36
+ <br />
37
+ <HomeAddressStreet
38
+ address="70 Prospect Ave"
39
+ addressCont="Apt M18"
40
+ city="West Chester"
41
+ emphasis="none"
42
+ homeId="8250263"
43
+ homeUrl="https://powerhrg.com/"
44
+ houseStyle="Colonial"
45
+ state="PA"
46
+ territory="PHL"
47
+ zipcode="19382"
48
+ {...props}
49
+ />
35
50
  </div>
36
51
  )
37
52
  }
@@ -1,2 +1,3 @@
1
1
  Emphasis on street happens by default. (no prop needed)
2
- Emphasis on "city" makes the city emphasized, rather than the street.
2
+ Emphasis on "city" makes the city emphasized, rather than the street.
3
+ Adding "none" to emphasis prop will provide no emphasis.
@@ -0,0 +1,166 @@
1
+ import React from 'react';
2
+ import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
3
+
4
+ const SortingChangeCallback = (sortOptions) => {
5
+ alert(JSON.stringify(sortOptions[0]))
6
+ }
7
+
8
+ const SkeletonLoadingFilter = (props) => {
9
+ const isLoading = true
10
+
11
+ const options = [
12
+ { value: 'USA' },
13
+ { value: 'Canada' },
14
+ { value: 'Brazil' },
15
+ { value: 'Philippines' },
16
+ { value: 'A galaxy far far away, like really far away...' },
17
+ ]
18
+
19
+ return (
20
+ <div>
21
+ <div>
22
+ {isLoading ? (
23
+ <Card
24
+ marginBottom="lg"
25
+ {...props}
26
+ >
27
+ <Flex
28
+ alignItems="center"
29
+ justify="between"
30
+ orientation="row"
31
+ >
32
+ <Flex
33
+ alignItems="center"
34
+ justify="start"
35
+ orientation="row"
36
+ >
37
+ <SkeletonLoading
38
+ borderRadius="rounded"
39
+ height="40px"
40
+ marginRight="sm"
41
+ width="40px"
42
+ {...props}
43
+ />
44
+ <SkeletonLoading
45
+ height="16px"
46
+ marginRight="md"
47
+ width="80px"
48
+ {...props}
49
+ />
50
+ </Flex>
51
+ <Flex
52
+ alignItems="center"
53
+ justify="end"
54
+ orientation="row"
55
+ >
56
+ <SkeletonLoading
57
+ height="18px"
58
+ width="120px"
59
+ {...props}
60
+ />
61
+ </Flex>
62
+ </Flex>
63
+ </Card>
64
+ ) : (
65
+ <Filter
66
+ filters={{ 'Full Name': 'John Wick' }}
67
+ marginBottom="lg"
68
+ minWidth="375px"
69
+ results={546}
70
+ sortOptions={{
71
+ popularity: 'Popularity',
72
+ // eslint-disable-next-line
73
+ manager_title: 'Manager\'s Title',
74
+ // eslint-disable-next-line
75
+ manager_name: 'Manager\'s Name',
76
+ }}
77
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
78
+ >
79
+ {({ closePopover }) => (
80
+ <form>
81
+ <TextInput
82
+ label="Example Text Field"
83
+ placeholder="Enter Text"
84
+ />
85
+ <Select
86
+ blankSelection="Select One..."
87
+ label="Example Collection Select"
88
+ name="Collection Select"
89
+ options={options}
90
+ />
91
+ <Flex spacing="between">
92
+ <Button
93
+ onClick={closePopover}
94
+ text="Filter"
95
+ />
96
+ <Button
97
+ text="Defaults"
98
+ variant="secondary"
99
+ />
100
+ </Flex>
101
+ </form>
102
+ )}
103
+ </Filter>
104
+ )}
105
+ </div>
106
+ <div>
107
+ {isLoading ? (
108
+ <SkeletonLoading
109
+ height="127px"
110
+ marginBottom="lg"
111
+ width="100%"
112
+ {...props}
113
+ />
114
+ ) : (
115
+ <Filter
116
+ double
117
+ filters={{
118
+ 'Full Name': 'John Wick',
119
+ 'City': 'San Francisco',
120
+ }}
121
+ marginBottom="xl"
122
+ minWidth="375px"
123
+ onSortChange={SortingChangeCallback}
124
+ results={1}
125
+ sortOptions={{
126
+ popularity: 'Popularity',
127
+ // eslint-disable-next-line
128
+ manager_title: 'Manager\'s Title',
129
+ // eslint-disable-next-line
130
+ manager_name: 'Manager\'s Name',
131
+ }}
132
+ sortValue={[{ name: 'popularity', dir: 'desc' }]}
133
+ >
134
+ {({ closePopover }) => (
135
+ <form>
136
+ <TextInput
137
+ label="Full Name"
138
+ placeholder="Enter name"
139
+ />
140
+ <Select
141
+ blankSelection="Select One..."
142
+ label="Territory"
143
+ maxWidth="sm"
144
+ name="location"
145
+ options={options}
146
+ />
147
+ <Flex spacing="between">
148
+ <Button
149
+ onClick={closePopover}
150
+ text="Filter"
151
+ />
152
+ <Button
153
+ text="Defaults"
154
+ variant="secondary"
155
+ />
156
+ </Flex>
157
+ </form>
158
+ )}
159
+ </Filter>
160
+ )}
161
+ </div>
162
+ </div>
163
+ )
164
+ }
165
+
166
+ export default SkeletonLoadingFilter;
@@ -20,6 +20,7 @@ const SkeletonLoadingHeightWidth = (props) => (
20
20
  <Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
21
21
  marginBottom="md"
22
22
  padding="none"
23
+ {...props}
23
24
  >
24
25
  <SkeletonLoading
25
26
  borderRadius="md"
@@ -31,6 +32,7 @@ const SkeletonLoadingHeightWidth = (props) => (
31
32
  </Card>
32
33
  <Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
33
34
  padding="none"
35
+ {...props}
34
36
  >
35
37
  <SkeletonLoading
36
38
  borderRadius="md"
@@ -0,0 +1,89 @@
1
+ import React from 'react';
2
+ import { Flex, SkeletonLoading, User } from "playbook-ui";
3
+
4
+ const SkeletonLoadingUser = (props) => {
5
+ const isLoading = true
6
+
7
+ return (
8
+ <div>
9
+ <div>
10
+ {isLoading ? (
11
+ <Flex alignItems="center">
12
+ <SkeletonLoading
13
+ borderRadius="rounded"
14
+ height="38px"
15
+ paddingRight="sm"
16
+ width="38px"
17
+ {...props}
18
+ />
19
+ <SkeletonLoading
20
+ gap="xxs"
21
+ height="18px"
22
+ stack="2"
23
+ width="161px"
24
+ {...props}
25
+ />
26
+ </Flex>
27
+ ) : (
28
+ <User
29
+ align="left"
30
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
31
+ name="Anna Black"
32
+ orientation="horizontal"
33
+ title="Remodeling Consultant"
34
+ {...props}
35
+ />
36
+ )}
37
+ </div>
38
+ <div>
39
+ {isLoading ? (
40
+ <Flex
41
+ alignItems="start"
42
+ paddingTop="md"
43
+ >
44
+ <Flex
45
+ alignItems="center"
46
+ flexDirection="column"
47
+ >
48
+ <SkeletonLoading
49
+ borderRadius="rounded"
50
+ height="80px"
51
+ paddingBottom="xs"
52
+ width="80px"
53
+ {...props}
54
+ />
55
+ <SkeletonLoading
56
+ height="32px"
57
+ paddingBottom="xxs"
58
+ width="144px"
59
+ {...props}
60
+ />
61
+ <SkeletonLoading
62
+ height="21px"
63
+ width="164px"
64
+ {...props}
65
+ />
66
+ </Flex>
67
+ </Flex>
68
+ ) : (
69
+ <Flex
70
+ alignItems="start"
71
+ paddingTop="md"
72
+ >
73
+ <User
74
+ align="center"
75
+ avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
76
+ name="Anna Black"
77
+ orientation="vertical"
78
+ size="lg"
79
+ title="Remodeling Consultant"
80
+ {...props}
81
+ />
82
+ </Flex>
83
+ )}
84
+ </div>
85
+ </div>
86
+ )
87
+ }
88
+
89
+ export default SkeletonLoadingUser;
@@ -10,4 +10,5 @@ examples:
10
10
  - skeleton_loading_layout: Layout
11
11
  - skeleton_loading_border_radius: Border Radius
12
12
  - skeleton_loading_height_width: Height & Width
13
-
13
+ - skeleton_loading_user: User Component Example
14
+ - skeleton_loading_filter: Filter Component Example
@@ -3,3 +3,5 @@ export { default as SkeletonLoadingColor } from './_skeleton_loading_color.jsx'
3
3
  export { default as SkeletonLoadingLayout } from './_skeleton_loading_layout.jsx'
4
4
  export { default as SkeletonLoadingBorderRadius } from './_skeleton_loading_border_radius.jsx'
5
5
  export { default as SkeletonLoadingHeightWidth } from './_skeleton_loading_height_width.jsx'
6
+ export { default as SkeletonLoadingUser } from './_skeleton_loading_user.jsx'
7
+ export { default as SkeletonLoadingFilter } from './_skeleton_loading_filter.jsx'
@@ -55,11 +55,18 @@ const TypeaheadWithHighlight = (props) => {
55
55
  marginRight="sm"
56
56
  name={name}
57
57
  size="sm"
58
+ {...props}
58
59
  />
59
60
  </FlexItem>
60
61
  <FlexItem>
61
- <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
62
- <Body color="light">
62
+ <Title
63
+ size={4}
64
+ {...props}
65
+ >
66
+ <span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
67
+ <Body color="light"
68
+ {...props}
69
+ >
63
70
  <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
64
71
  {territory}
65
72
  </Body>