playbook_ui 12.30.1.pre.alpha.PLAY906multilevelselectedidsprop912 → 12.30.1.pre.alpha.hovertesting914

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: 5bb99bff289e00a7d9a4304de6118e54be2349a7d705bd69f07307940b277db5
4
- data.tar.gz: 34b932013c8f26a6c25afe95e725fc4bac6f62b323e49e134ab0020a312107f6
3
+ metadata.gz: e94ee5e2d1744b1c8cb4257f6cbabe864f3cbe7f7a23c89ecbbf704d96e0881c
4
+ data.tar.gz: 63d9209ce6bdced8f6c934971d2b0ca8d8e67a4ca683a289091fdf7c70e894a4
5
5
  SHA512:
6
- metadata.gz: 245aac90b727280ef79d58a04569cc93f559d09b5ad2bd1350260c1eea9c4b02030de75e6ec7ff9a7d6751006c0c32bb7be946bc1ad813032d00a5ced8e240e0
7
- data.tar.gz: af04cb501838d28a314d6de419fd6a5ca7782ce2f0973f80ba24ca048d82fdbad61041c56d43783f38ec1f77a6b7a56fd5b09eff85528ddab775557d6a0f2a9f
6
+ metadata.gz: 405c56bbb3852436d2792bb9b90ecb9dbdc85601201f6fc1e89b7942f1dc0cc822050b0c3bdf2f2ae7966d14c1eeae5330c026c3ebebfcabd537881b2a24342d
7
+ data.tar.gz: 2eac3a3bc6353031c3f242191866eeba63789609ea03d2d3ee199720c6035f1636da744cf3ce0ca3a9e8a34fe602c4b2776613a17853c9921d5bef607ee7e60a
@@ -110,5 +110,7 @@
110
110
  @import './utilities/display';
111
111
  @import './utilities/flexbox';
112
112
  @import './utilities/focus';
113
+ @import './utilities/border_radius';
114
+ @import './utilities/hover';
113
115
 
114
116
  @import 'pb_multi_level_select/multi_level_select';
@@ -0,0 +1,130 @@
1
+ import React from "react"
2
+ import { Button } from "../../"
3
+
4
+ const ButtonHover = (props) => (
5
+ <div>
6
+ <div>
7
+ <Button
8
+ hover={{ background: "info" }}
9
+ marginRight='lg'
10
+ onClick={() => alert("button clicked!")}
11
+ tabIndex={0}
12
+ text='Color 1'
13
+ {...props}
14
+ />{" "}
15
+ <Button
16
+ hover={{ background: "success_subtle" }}
17
+ marginRight='lg'
18
+ onClick={() => alert("button clicked!")}
19
+ tabIndex={0}
20
+ text='Color 2'
21
+ variant='secondary'
22
+ {...props}
23
+ />{" "}
24
+ <Button
25
+ hover={{ background: "warning_subtle" }}
26
+ marginRight='lg'
27
+ onClick={() => alert("button clicked!")}
28
+ tabIndex={0}
29
+ text='Color 3'
30
+ variant='link'
31
+ {...props}
32
+ />
33
+ </div>
34
+ <div>
35
+ <Button
36
+ hover={{ shadow: "deep" }}
37
+ marginRight='lg'
38
+ marginTop='xl'
39
+ onClick={() => alert("button clicked!")}
40
+ tabIndex={0}
41
+ text='Shadow Deep'
42
+ {...props}
43
+ />{" "}
44
+ <Button
45
+ hover={{ shadow: "deeper" }}
46
+ marginRight='lg'
47
+ marginTop='xl'
48
+ onClick={() => alert("button clicked!")}
49
+ tabIndex={0}
50
+ text='Shadow Deeper'
51
+ variant='secondary'
52
+ {...props}
53
+ />{" "}
54
+ <Button
55
+ hover={{ shadow: "deepest" }}
56
+ marginRight='lg'
57
+ marginTop='xl'
58
+ onClick={() => alert("button clicked!")}
59
+ tabIndex={0}
60
+ text='Shadow Deepest'
61
+ variant='link'
62
+ {...props}
63
+ />
64
+ </div>
65
+ <div>
66
+ <Button
67
+ hover={{ scale: "sm" }}
68
+ marginRight='lg'
69
+ marginTop='xl'
70
+ onClick={() => alert("button clicked!")}
71
+ tabIndex={0}
72
+ text='Scale Small'
73
+ {...props}
74
+ />{" "}
75
+ <Button
76
+ hover={{ scale: "md" }}
77
+ marginRight='lg'
78
+ marginTop='xl'
79
+ onClick={() => alert("button clicked!")}
80
+ tabIndex={0}
81
+ text='Scale Medium'
82
+ variant='secondary'
83
+ {...props}
84
+ />{" "}
85
+ <Button
86
+ hover={{ scale: "lg" }}
87
+ marginRight='lg'
88
+ marginTop='xl'
89
+ onClick={() => alert("button clicked!")}
90
+ tabIndex={0}
91
+ text='Scale Large'
92
+ variant='link'
93
+ {...props}
94
+ />
95
+ </div>
96
+ <div>
97
+ <Button
98
+ hover={{ background: "error_subtle", shadow: "deep" }}
99
+ marginRight='lg'
100
+ marginTop='xl'
101
+ onClick={() => alert("button clicked!")}
102
+ tabIndex={0}
103
+ text='Multiple Attributes'
104
+ {...props}
105
+ />{" "}
106
+ <Button
107
+ hover={{ background: "info_subtle", shadow: "deeper" }}
108
+ marginRight='lg'
109
+ marginTop='xl'
110
+ onClick={() => alert("button clicked!")}
111
+ tabIndex={0}
112
+ text='Multiple Attributes'
113
+ variant='secondary'
114
+ {...props}
115
+ />{" "}
116
+ <Button
117
+ hover={{ background: "success_subtle", shadow: "deepest" }}
118
+ marginRight='lg'
119
+ marginTop='xl'
120
+ onClick={() => alert("button clicked!")}
121
+ tabIndex={0}
122
+ text='Multiple Attributes'
123
+ variant='link'
124
+ {...props}
125
+ />
126
+ </div>
127
+ </div>
128
+ )
129
+
130
+ export default ButtonHover
@@ -21,3 +21,4 @@ examples:
21
21
  - button_options: Button Additional Options (onClick)
22
22
  - button_size: Button Size
23
23
  - button_form: Button Form Attribute
24
+ - button_hover: Button Hover
@@ -8,3 +8,4 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
8
8
  export { default as ButtonOptions } from './_button_options.jsx'
9
9
  export { default as ButtonSize } from './_button_size.jsx'
10
10
  export { default as ButtonForm } from './_button_form.jsx'
11
+ export { default as ButtonHover } from './_button_hover.jsx'
@@ -1,43 +1,33 @@
1
- import React from 'react'
1
+ import React from "react"
2
2
 
3
- import Message from '../_message'
4
- import Image from '../../pb_image/_image'
3
+ import Message from "../_message"
4
+ import Image from "../../pb_image/_image"
5
5
 
6
6
  const MessageDefault = (props) => {
7
7
  return (
8
8
  <div>
9
9
  <Message
10
- avatarName="Mike Bishop"
11
- avatarStatus="online"
12
- avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
13
- label="Anna Black"
14
- message="How can we assist you today?"
15
- timestamp="20 seconds ago"
10
+ avatarName='Mike Bishop'
11
+ avatarStatus='online'
12
+ avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
13
+ borderRadius='rounded'
14
+ label='Anna Black'
15
+ message='How can we assist you today?'
16
+ timestamp='20 seconds ago'
16
17
  {...props}
17
18
  />
18
19
 
19
20
  <br />
20
21
  <br />
21
-
22
- <Message
23
- alignTimestamp="left"
24
- avatarName="Wade Winningham"
25
- avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
26
- label="Patrick Welch"
27
- message="We will escalate this issue to a Senior Support agent."
28
- timestamp="9 minutes ago"
29
- {...props}
30
- />
31
-
32
22
  <br />
33
23
  <br />
34
24
 
35
25
  <Message
36
- avatarName="Becca Jacobs"
37
- avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
38
- label="Lucille Sanchez"
39
- message="Application for Kate Smith is waiting for your approval"
40
- timestamp="2 days ago"
26
+ avatarName='Becca Jacobs'
27
+ avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
28
+ label='Lucille Sanchez'
29
+ message='Application for Kate Smith is waiting for your approval'
30
+ timestamp='2 days ago'
41
31
  {...props}
42
32
  />
43
33
 
@@ -45,10 +35,10 @@ const MessageDefault = (props) => {
45
35
  <br />
46
36
 
47
37
  <Message
48
- avatarName="Timothy Wenhold"
49
- label="Beverly Reyes"
50
- message="We are so sorry you had a bad experience!"
51
- timestamp="2 days ago"
38
+ avatarName='Timothy Wenhold'
39
+ label='Beverly Reyes'
40
+ message='We are so sorry you had a bad experience!'
41
+ timestamp='2 days ago'
52
42
  {...props}
53
43
  />
54
44
 
@@ -56,24 +46,23 @@ const MessageDefault = (props) => {
56
46
  <br />
57
47
 
58
48
  <Message
59
- label="Keith Craig"
60
- message="Please hold for one moment, I will check with my manager."
61
- timestamp="2 days ago"
49
+ label='Keith Craig'
50
+ message='Please hold for one moment, I will check with my manager.'
51
+ timestamp='2 days ago'
62
52
  {...props}
63
53
  />
64
54
 
65
55
  <br />
66
56
  <br />
67
57
 
68
- <Message
69
- label="Keith Craig"
70
- timestamp="2 days ago"
58
+ <Message label='Keith Craig'
59
+ timestamp='2 days ago'
71
60
  {...props}
72
61
  >
73
62
  <Image
74
- alt="picture of a misty forest"
75
- size="md"
76
- url="https://unsplash.it/500/400/?image=634"
63
+ alt='picture of a misty forest'
64
+ size='md'
65
+ url='https://unsplash.it/500/400/?image=634'
77
66
  />
78
67
  </Message>
79
68
 
@@ -81,18 +70,17 @@ const MessageDefault = (props) => {
81
70
  <br />
82
71
 
83
72
  <Message
84
- label="Keith Craig"
85
- message="Please hold for one moment, I will check with my manager."
86
- timestamp="2 days ago"
73
+ label='Keith Craig'
74
+ message='Please hold for one moment, I will check with my manager.'
75
+ timestamp='2 days ago'
87
76
  {...props}
88
77
  >
89
78
  <Image
90
- alt="picture of a misty forest"
91
- size="md"
92
- url="https://unsplash.it/500/400/?image=634"
79
+ alt='picture of a misty forest'
80
+ size='md'
81
+ url='https://unsplash.it/500/400/?image=634'
93
82
  />
94
83
  </Message>
95
-
96
84
  </div>
97
85
  )
98
86
  }
@@ -0,0 +1,41 @@
1
+ import React from "react"
2
+
3
+ import Message from "../_message"
4
+
5
+ const MessageHover = (props) => {
6
+ return (
7
+ <div>
8
+ <Message
9
+ avatarName='Mike Bishop'
10
+ avatarStatus='online'
11
+ avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
12
+ borderRadius='rounded'
13
+ hover={{ background: "success_subtle" }}
14
+ label='Anna Black'
15
+ message='How can we assist you today?'
16
+ padding="xs"
17
+ {...props}
18
+ />
19
+
20
+ <br />
21
+ <br />
22
+ <br />
23
+
24
+ <Message
25
+ avatarName='Becca Jacobs'
26
+ avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
27
+ borderRadius='rounded'
28
+ hover={{ shadow: "deepest" }}
29
+ label='Lucille Sanchez'
30
+ message='Application for Kate Smith is waiting for your approval'
31
+ padding="xs"
32
+ {...props}
33
+ />
34
+
35
+ <br />
36
+
37
+ </div>
38
+ )
39
+ }
40
+
41
+ export default MessageHover
@@ -8,4 +8,5 @@ examples:
8
8
  react:
9
9
  - message_default: Default
10
10
  - message_timestamp: With Timestamp Hover
11
+ - message_hover: Hover
11
12
 
@@ -1,2 +1,4 @@
1
1
  export { default as MessageDefault } from './_message_default.jsx'
2
2
  export { default as MessageTimestamp } from './_message_timestamp.jsx'
3
+ export { default as MessageHover } from './_message_hover.jsx'
4
+
@@ -28,7 +28,6 @@ type MultiLevelSelectProps = {
28
28
  returnAllSelected?: boolean
29
29
  treeData?: { [key: string]: string }[]
30
30
  onSelect?: (prop: { [key: string]: any }) => void
31
- selectedIds?: string[]
32
31
  } & GlobalProps
33
32
 
34
33
  const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -42,7 +41,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
42
41
  returnAllSelected = false,
43
42
  treeData,
44
43
  onSelect = () => {},
45
- selectedIds
46
44
  } = props
47
45
 
48
46
  const ariaProps = buildAriaProps(aria)
@@ -72,8 +70,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
72
70
 
73
71
 
74
72
  useEffect(() => {
75
- setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
76
- }, [treeData, selectedIds])
73
+ setFormattedData(addCheckedAndParentProperty(treeData))
74
+ }, [treeData])
77
75
 
78
76
  useEffect(() => {
79
77
  if (returnAllSelected) {
@@ -162,7 +160,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
162
160
  //function to map over data and add parent_id + depth property to each item
163
161
  const addCheckedAndParentProperty = (
164
162
  treeData: { [key: string]: any }[],
165
- selectedIds: string[],
166
163
  parent_id: string = null,
167
164
  depth: number = 0,
168
165
  ) => {
@@ -172,7 +169,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
172
169
  return treeData.map((item: { [key: string]: any } | any) => {
173
170
  const newItem = {
174
171
  ...item,
175
- checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
176
172
  parent_id,
177
173
  depth,
178
174
  }
@@ -183,7 +179,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
183
179
  : item.children
184
180
  newItem.children = addCheckedAndParentProperty(
185
181
  children,
186
- selectedIds,
187
182
  newItem.id,
188
183
  depth + 1
189
184
  )
@@ -0,0 +1,9 @@
1
+
2
+ $scale_sm: scale(1.05);
3
+ $scale_md: scale(1.1);
4
+ $scale_lg: scale(1.15);
5
+ $scales: (
6
+ scale_sm: $scale_sm,
7
+ scale_md: $scale_md,
8
+ scale_lg: $scale_lg,
9
+ );
@@ -0,0 +1,13 @@
1
+ @import "../scale";
2
+
3
+ :export {
4
+ @mixin export-hover-scale-classes($scales-list) {
5
+ @each $name, $scale in $scales-list {
6
+ .hover_#{$name}:hover {
7
+ transform: $scale;
8
+ }
9
+ }
10
+ }
11
+
12
+ @include export-hover-scale-classes($scales);
13
+ }
@@ -0,0 +1,31 @@
1
+ @import "../tokens/exports/border_radius";
2
+
3
+ $transition-speed: 0.2s;
4
+
5
+ .border_radius {
6
+ @mixin border-example {
7
+ transition: background-color $transition-speed ease, height $transition-speed ease;
8
+ }
9
+
10
+ &_rounded {
11
+ border-radius: $border_radius_rounded;
12
+ }
13
+ &_xl {
14
+ border-radius: $border_radius_xl;
15
+ }
16
+ &_lg {
17
+ border-radius: $border_radius_lg;
18
+ }
19
+ &_md {
20
+ border-radius: $border_radius_md;
21
+ }
22
+ &_sm {
23
+ border-radius: $border_radius_sm;
24
+ }
25
+ &_xs {
26
+ border-radius: $border_radius_xs;
27
+ }
28
+ &_none {
29
+ border-radius: $border_radius_none;
30
+ }
31
+ }
@@ -1,5 +1,7 @@
1
1
  // Color Helper Utilities
2
2
 
3
+ $transition-speed: 0.2s;
4
+
3
5
  @function shade($color, $percentage) {
4
6
  @return mix($charcoal, $color, $percentage);
5
7
  }
@@ -27,6 +29,7 @@
27
29
  }
28
30
  }
29
31
 
32
+
30
33
  @mixin text-color($colors-list) {
31
34
  @each $name, $color in $colors-list {
32
35
  .#{$name} {
@@ -0,0 +1,47 @@
1
+ @import "../tokens/exports/scale";
2
+
3
+ @mixin hover-color-classes($colors-list) {
4
+ @each $name, $color in $colors-list {
5
+ .bg-hover-#{$name}:hover {
6
+ background-color: $color !important;
7
+ transition: background-color $transition-speed ease;
8
+ }
9
+ }
10
+ }
11
+
12
+ @mixin hover-shadow-classes($shadows-list) {
13
+ @each $name, $shadow in $shadows-list {
14
+ .hover_#{$name}:hover {
15
+ box-shadow: $shadow;
16
+ transition: box-shadow $transition-speed ease;
17
+ }
18
+ }
19
+ }
20
+
21
+ @mixin hover-scale-classes($scales-list) {
22
+ @each $name, $scale in $scales-list {
23
+ .hover_#{$name}:hover {
24
+ transform: $scale;
25
+ transition: transform $transition-speed ease;
26
+ }
27
+ }
28
+ }
29
+
30
+
31
+ @include hover-scale-classes($scales);
32
+ @include hover-shadow-classes($box_shadows);
33
+ @include hover-color-classes($product_colors);
34
+ @include hover-color-classes($status_colors);
35
+ @include hover-color-classes($data_colors);
36
+ @include hover-color-classes($shadow_colors);
37
+ @include hover-color-classes($colors);
38
+ @include hover-color-classes($interface_colors);
39
+ @include hover-color-classes($main_colors);
40
+ @include hover-color-classes($background_colors);
41
+ @include hover-color-classes($card_colors);
42
+ @include hover-color-classes($active_colors);
43
+ @include hover-color-classes($action_colors);
44
+ @include hover-color-classes($hover_colors);
45
+ @include hover-color-classes($border_colors);
46
+ @include hover-color-classes($text_colors);
47
+ @include hover-color-classes($category_colors);
@@ -60,6 +60,11 @@ type FlexWrap = {
60
60
  flexWrap?: "wrap" | "nowrap" | "wrapReverse"
61
61
  }
62
62
 
63
+ type Hover = Shadow & {
64
+ background?: string,
65
+ scale?: "sm" | "md" | "lg"
66
+ }
67
+
63
68
  type JustifyContent = {
64
69
  justifyContent?: Alignment & Space
65
70
  }
@@ -125,7 +130,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
125
130
  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
126
131
  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
127
132
  LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
128
- Position & Shadow & ZIndex
133
+ Position & Shadow & ZIndex & { hover?: string };
129
134
 
130
135
  const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
131
136
  const keys: string[] = Object.keys(prop)
@@ -137,6 +142,16 @@ const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: st
137
142
 
138
143
  // Prop categories
139
144
  const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
145
+
146
+ hoverProps: ({ hover }: { hover?: Hover }) => {
147
+ let css = '';
148
+ if (!hover) return css;
149
+ css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
150
+ css += hover.background ? `bg-hover-${hover.background } ` : '';
151
+ css += hover.scale ? `hover_scale_${hover.scale} ` : '';
152
+ return css;
153
+ },
154
+
140
155
  spacingProps: ({
141
156
  marginRight,
142
157
  marginLeft,
@@ -214,7 +229,11 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
214
229
  });
215
230
  return css.trim();
216
231
  },
217
-
232
+ borderRadiusProps: ({ borderRadius }: BorderRadius) => {
233
+ let css = ''
234
+ css += borderRadius ? `border_radius_${borderRadius} ` : ''
235
+ return css
236
+ },
218
237
  darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
219
238
  numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
220
239
  let css = ''
@@ -369,6 +388,7 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
369
388
  }).filter((value) => value?.length > 0).join(" ")
370
389
  }
371
390
 
391
+
372
392
  export const deprecatedProps = (kit: string, props: string[] = []): void => {
373
393
  if (process.env.NODE_ENV === 'development') {
374
394
  /* eslint no-console: ["error", { allow: ["warn", "error"] }] */