playbook_ui 12.30.1.pre.alpha.hovertesting914 → 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -2
- data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_button/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_card/_card.scss +3 -0
- data/app/pb_kits/playbook/pb_card/_card.tsx +5 -6
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -3
- data/app/pb_kits/playbook/pb_card/card.rb +0 -96
- data/app/pb_kits/playbook/pb_card/card_body.rb +93 -1
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +11 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +1 -3
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +1 -3
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +1 -3
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +12 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx +2 -2
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +1 -4
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +1 -2
- data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +45 -33
- data/app/pb_kits/playbook/pb_message/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_message/docs/index.js +0 -2
- data/app/pb_kits/playbook/utilities/_colors.scss +0 -3
- data/app/pb_kits/playbook/utilities/globalProps.ts +2 -22
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +1 -1
- metadata +2 -8
- data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx +0 -130
- data/app/pb_kits/playbook/pb_message/docs/_message_hover.jsx +0 -41
- data/app/pb_kits/playbook/tokens/_scale.scss +0 -9
- data/app/pb_kits/playbook/tokens/exports/_scale.scss +0 -13
- data/app/pb_kits/playbook/utilities/_border_radius.scss +0 -31
- data/app/pb_kits/playbook/utilities/_hover.scss +0 -47
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 34a695910f67fbd8f8a01279fe53bcfd4115ca6fc419a2a4f598b48464ade926
|
4
|
+
data.tar.gz: d17f2e8534379076372aa29bcf3daadbb83acc5fc47bb5be5bd3ff31a2541461
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 82adeb777f4240ec21972169b4866a1b857597d02f63c30859b30e3a407abdd62427807e837beef23780136a9002c01513cc6478ca0c023c8fc5c564ea3ac52f
|
7
|
+
data.tar.gz: fdc73b9b2eed6973de5a14011ce0240cf3c84fcff6e9f8e454ceecf15de721a974958d349803d6657302b682cf8ed64ac4a1f87f97971f818c2607a20ce9b012
|
@@ -8,4 +8,3 @@ 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'
|
@@ -3,6 +3,7 @@
|
|
3
3
|
|
4
4
|
[class^=pb_card_kit] {
|
5
5
|
@include pb_card;
|
6
|
+
padding: $space_md;
|
6
7
|
|
7
8
|
&[class*=_selected] {
|
8
9
|
@include pb_card_selected;
|
@@ -25,6 +26,7 @@
|
|
25
26
|
flex-shrink: 0;
|
26
27
|
flex-basis: auto;
|
27
28
|
min-height: 1px;
|
29
|
+
padding: $space_sm;
|
28
30
|
border: 0;
|
29
31
|
border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
|
30
32
|
@each $color_name, $color_value in $pb_card_header_colors {
|
@@ -57,6 +59,7 @@
|
|
57
59
|
flex-basis: auto;
|
58
60
|
min-height: 1px;
|
59
61
|
border: 0;
|
62
|
+
padding: $space_md;
|
60
63
|
}
|
61
64
|
|
62
65
|
&[class*=_highlight] {
|
@@ -42,10 +42,10 @@ type CardBodyProps = {
|
|
42
42
|
|
43
43
|
// Header component
|
44
44
|
const Header = (props: CardHeaderProps) => {
|
45
|
-
const { children, className, headerColor = 'category_1', headerColorStriped = false
|
45
|
+
const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
|
46
46
|
const headerCSS = buildCss('pb_card_header_kit', `${headerColor}`, headerColorStriped ? 'striped' : '')
|
47
47
|
|
48
|
-
const headerSpacing = globalProps(props
|
48
|
+
const headerSpacing = globalProps(props)
|
49
49
|
|
50
50
|
return (
|
51
51
|
<div className={classnames(headerCSS, headerSpacing, className)}>
|
@@ -57,9 +57,9 @@ const Header = (props: CardHeaderProps) => {
|
|
57
57
|
|
58
58
|
// Body component
|
59
59
|
const Body = (props: CardBodyProps) => {
|
60
|
-
const { children,
|
60
|
+
const { children, className } = props
|
61
61
|
const bodyCSS = buildCss('pb_card_body_kit')
|
62
|
-
const bodySpacing = globalProps(props
|
62
|
+
const bodySpacing = globalProps(props)
|
63
63
|
|
64
64
|
return (
|
65
65
|
<div className={classnames(bodyCSS, bodySpacing, className)}>
|
@@ -80,7 +80,6 @@ const Card = (props: CardPropTypes) => {
|
|
80
80
|
highlight = {},
|
81
81
|
selected = false,
|
82
82
|
tag = 'div',
|
83
|
-
padding = 'md',
|
84
83
|
} = props
|
85
84
|
const borderCSS = borderNone == true ? 'border_none' : ''
|
86
85
|
const selectedCSS = selected == true ? 'selected' : 'deselected'
|
@@ -114,7 +113,7 @@ const Card = (props: CardPropTypes) => {
|
|
114
113
|
<Tag
|
115
114
|
{...ariaProps}
|
116
115
|
{...dataProps}
|
117
|
-
className={classnames(cardCss, globalProps(props
|
116
|
+
className={classnames(cardCss, globalProps(props), className)}
|
118
117
|
>
|
119
118
|
{subComponentTags('Header')}
|
120
119
|
{nonHeaderChildren}
|
@@ -4,9 +4,7 @@
|
|
4
4
|
class: object.classname,
|
5
5
|
aria: object.aria,
|
6
6
|
dark: object.dark) do %>
|
7
|
-
|
8
|
-
<%= content %>
|
9
|
-
<% end if content.present? %>
|
7
|
+
<%= content.presence %>
|
10
8
|
<% end %>
|
11
9
|
|
12
10
|
|
@@ -28,102 +28,6 @@ module Playbook
|
|
28
28
|
highlight_color_class)
|
29
29
|
end
|
30
30
|
|
31
|
-
def body_padding
|
32
|
-
if padding.present?
|
33
|
-
""
|
34
|
-
else
|
35
|
-
"p_md"
|
36
|
-
end
|
37
|
-
end
|
38
|
-
|
39
|
-
def body_flex_direction
|
40
|
-
if flex_direction.present?
|
41
|
-
"flex_direction_#{flex_direction}"
|
42
|
-
else
|
43
|
-
""
|
44
|
-
end
|
45
|
-
end
|
46
|
-
|
47
|
-
def body_flex_wrap
|
48
|
-
if flex_wrap.present?
|
49
|
-
"flex_wrap_#{flex_wrap}"
|
50
|
-
else
|
51
|
-
""
|
52
|
-
end
|
53
|
-
end
|
54
|
-
|
55
|
-
def body_justify_content
|
56
|
-
if justify_content.present?
|
57
|
-
"justify_content_#{justify_content}"
|
58
|
-
else
|
59
|
-
""
|
60
|
-
end
|
61
|
-
end
|
62
|
-
|
63
|
-
def body_justify_self
|
64
|
-
if justify_self.present?
|
65
|
-
"justify_self_#{justify_self}"
|
66
|
-
else
|
67
|
-
""
|
68
|
-
end
|
69
|
-
end
|
70
|
-
|
71
|
-
def body_align_items
|
72
|
-
if align_items.present?
|
73
|
-
"align_items_#{align_items}"
|
74
|
-
else
|
75
|
-
""
|
76
|
-
end
|
77
|
-
end
|
78
|
-
|
79
|
-
def body_align_content
|
80
|
-
if align_content.present?
|
81
|
-
"align_content_#{align_content}"
|
82
|
-
else
|
83
|
-
""
|
84
|
-
end
|
85
|
-
end
|
86
|
-
|
87
|
-
def body_align_self
|
88
|
-
if align_self.present?
|
89
|
-
"align_self_#{align_self}"
|
90
|
-
else
|
91
|
-
""
|
92
|
-
end
|
93
|
-
end
|
94
|
-
|
95
|
-
def body_flex
|
96
|
-
if flex.present?
|
97
|
-
"flex_#{flex}"
|
98
|
-
else
|
99
|
-
""
|
100
|
-
end
|
101
|
-
end
|
102
|
-
|
103
|
-
def body_flex_grow
|
104
|
-
if flex_grow.present?
|
105
|
-
"flex_grow_#{flex_grow}"
|
106
|
-
else
|
107
|
-
""
|
108
|
-
end
|
109
|
-
end
|
110
|
-
|
111
|
-
def body_flex_shrink
|
112
|
-
if flex_shrink.present?
|
113
|
-
"flex_shrink_#{flex_shrink}"
|
114
|
-
else
|
115
|
-
""
|
116
|
-
end
|
117
|
-
end
|
118
|
-
|
119
|
-
def body_order
|
120
|
-
if order.present?
|
121
|
-
"order_#{order}"
|
122
|
-
else
|
123
|
-
""
|
124
|
-
end
|
125
|
-
end
|
126
|
-
|
127
31
|
private
|
128
32
|
|
129
33
|
def selected_class
|
@@ -4,7 +4,99 @@ module Playbook
|
|
4
4
|
module PbCard
|
5
5
|
class CardBody < Playbook::KitBase
|
6
6
|
def classname
|
7
|
-
generate_classname("pb_card_body_kit",
|
7
|
+
generate_classname("pb_card_body_kit", flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
|
8
|
+
end
|
9
|
+
|
10
|
+
def body_padding
|
11
|
+
"" if padding.present?
|
12
|
+
end
|
13
|
+
|
14
|
+
def body_flex_direction
|
15
|
+
if flex_direction.present?
|
16
|
+
"flex_direction_#{flex_direction}"
|
17
|
+
else
|
18
|
+
""
|
19
|
+
end
|
20
|
+
end
|
21
|
+
|
22
|
+
def body_flex_wrap
|
23
|
+
if flex_wrap.present?
|
24
|
+
"flex_wrap_#{flex_wrap}"
|
25
|
+
else
|
26
|
+
""
|
27
|
+
end
|
28
|
+
end
|
29
|
+
|
30
|
+
def body_justify_content
|
31
|
+
if justify_content.present?
|
32
|
+
"justify_content_#{justify_content}"
|
33
|
+
else
|
34
|
+
""
|
35
|
+
end
|
36
|
+
end
|
37
|
+
|
38
|
+
def body_justify_self
|
39
|
+
if justify_self.present?
|
40
|
+
"justify_self_#{justify_self}"
|
41
|
+
else
|
42
|
+
""
|
43
|
+
end
|
44
|
+
end
|
45
|
+
|
46
|
+
def body_align_items
|
47
|
+
if align_items.present?
|
48
|
+
"align_items_#{align_items}"
|
49
|
+
else
|
50
|
+
""
|
51
|
+
end
|
52
|
+
end
|
53
|
+
|
54
|
+
def body_align_content
|
55
|
+
if align_content.present?
|
56
|
+
"align_content_#{align_content}"
|
57
|
+
else
|
58
|
+
""
|
59
|
+
end
|
60
|
+
end
|
61
|
+
|
62
|
+
def body_align_self
|
63
|
+
if align_self.present?
|
64
|
+
"align_self_#{align_self}"
|
65
|
+
else
|
66
|
+
""
|
67
|
+
end
|
68
|
+
end
|
69
|
+
|
70
|
+
def body_flex
|
71
|
+
if flex.present?
|
72
|
+
"flex_#{flex}"
|
73
|
+
else
|
74
|
+
""
|
75
|
+
end
|
76
|
+
end
|
77
|
+
|
78
|
+
def body_flex_grow
|
79
|
+
if flex_grow.present?
|
80
|
+
"flex_grow_#{flex_grow}"
|
81
|
+
else
|
82
|
+
""
|
83
|
+
end
|
84
|
+
end
|
85
|
+
|
86
|
+
def body_flex_shrink
|
87
|
+
if flex_shrink.present?
|
88
|
+
"flex_shrink_#{flex_shrink}"
|
89
|
+
else
|
90
|
+
""
|
91
|
+
end
|
92
|
+
end
|
93
|
+
|
94
|
+
def body_order
|
95
|
+
if order.present?
|
96
|
+
"order_#{order}"
|
97
|
+
else
|
98
|
+
""
|
99
|
+
end
|
8
100
|
end
|
9
101
|
end
|
10
102
|
end
|
@@ -1,6 +1,9 @@
|
|
1
1
|
@import "./tokens/colors";
|
2
|
+
@import "./tokens/spacing";
|
2
3
|
|
3
4
|
[class^=pb_collapsible_kit] {
|
5
|
+
padding: $space_md;
|
6
|
+
|
4
7
|
.toggle-content {
|
5
8
|
display: none;
|
6
9
|
height: 0;
|
@@ -18,3 +21,11 @@
|
|
18
21
|
color: $primary
|
19
22
|
}
|
20
23
|
}
|
24
|
+
|
25
|
+
[class^=pb_collapsible_main_kit] {
|
26
|
+
padding: $space_md;
|
27
|
+
}
|
28
|
+
|
29
|
+
[class^=pb_collapsible_content_kit] {
|
30
|
+
padding: $space_md;
|
31
|
+
}
|
@@ -19,7 +19,6 @@ type CollapsibleProps = {
|
|
19
19
|
iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
|
20
20
|
iconSize?: typeof IconSizes
|
21
21
|
id?: string,
|
22
|
-
padding?: string,
|
23
22
|
}
|
24
23
|
|
25
24
|
const useCollapsible = (initial = false) => {
|
@@ -40,7 +39,6 @@ const Collapsible = ({
|
|
40
39
|
iconColor = 'default',
|
41
40
|
iconSize,
|
42
41
|
id,
|
43
|
-
padding = 'md',
|
44
42
|
...props
|
45
43
|
}: CollapsibleProps) => {
|
46
44
|
const [isCollapsed, collapse] = useCollapsible(collapsed)
|
@@ -59,7 +57,7 @@ const Collapsible = ({
|
|
59
57
|
const dataProps = buildDataProps(data)
|
60
58
|
const classes = classnames(
|
61
59
|
buildCss('pb_collapsible_kit'),
|
62
|
-
globalProps(props
|
60
|
+
globalProps(props),
|
63
61
|
className
|
64
62
|
)
|
65
63
|
|
@@ -9,18 +9,16 @@ import CollapsibleContext from '../context'
|
|
9
9
|
export type CollapsibleContentProps = {
|
10
10
|
children?: React.ReactNode[] | React.ReactNode | string,
|
11
11
|
className?: string,
|
12
|
-
padding?: string,
|
13
12
|
}
|
14
13
|
|
15
14
|
const CollapsibleContent = ({
|
16
15
|
children,
|
17
16
|
className,
|
18
|
-
padding = 'md',
|
19
17
|
...props
|
20
18
|
}: CollapsibleContentProps) => {
|
21
19
|
const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
|
22
20
|
const contentCSS = buildCss('pb_collapsible_content_kit')
|
23
|
-
const contentSpacing = globalProps(props
|
21
|
+
const contentSpacing = globalProps(props)
|
24
22
|
|
25
23
|
return (
|
26
24
|
<AnimateHeight
|
@@ -31,7 +31,6 @@ const colorMap = {
|
|
31
31
|
type CollapsibleMainProps = {
|
32
32
|
children: React.ReactNode[] | React.ReactNode,
|
33
33
|
className?: string,
|
34
|
-
padding?: string,
|
35
34
|
cursor?: string,
|
36
35
|
|
37
36
|
}
|
@@ -63,12 +62,11 @@ const CollapsibleMain = ({
|
|
63
62
|
children,
|
64
63
|
className,
|
65
64
|
cursor = 'pointer',
|
66
|
-
padding = 'md',
|
67
65
|
...props
|
68
66
|
}: CollapsibleMainProps): React.ReactElement=> {
|
69
67
|
const context: {[key: string]: IconColors | (() => void)} | boolean = useContext(CollapsibleContext)
|
70
68
|
const mainCSS = buildCss('pb_collapsible_main_kit')
|
71
|
-
const mainSpacing = globalProps(props, { cursor
|
69
|
+
const mainSpacing = globalProps(props, { cursor })
|
72
70
|
|
73
71
|
return (
|
74
72
|
<div className={classnames(mainCSS, className, mainSpacing)}>
|
@@ -263,6 +263,18 @@
|
|
263
263
|
}
|
264
264
|
}
|
265
265
|
|
266
|
+
[class*="dialog_body"] {
|
267
|
+
padding: $space_sm;
|
268
|
+
}
|
269
|
+
|
270
|
+
[class*="dialog_header"] {
|
271
|
+
padding: $space_sm;
|
272
|
+
}
|
273
|
+
|
274
|
+
[class*="dialog_footer"] {
|
275
|
+
padding: $space_sm;
|
276
|
+
}
|
277
|
+
|
266
278
|
//styles specific to rails version of kit
|
267
279
|
// rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
|
268
280
|
.pb_dialog_wrapper_rails {
|
@@ -11,9 +11,9 @@ type DialogBodyProps = {
|
|
11
11
|
|
12
12
|
// Body component
|
13
13
|
const DialogBody = (props: DialogBodyProps) => {
|
14
|
-
const { children,
|
14
|
+
const { children, className } = props
|
15
15
|
const bodyCSS = buildCss("dialog_body")
|
16
|
-
const bodySpacing = globalProps(props
|
16
|
+
const bodySpacing = globalProps(props)
|
17
17
|
|
18
18
|
return (
|
19
19
|
<div className={classnames(bodyCSS, bodySpacing, className)}>
|
@@ -25,16 +25,13 @@ type DialogFooterProps = {
|
|
25
25
|
const DialogFooter = (props: DialogFooterProps) => {
|
26
26
|
const {
|
27
27
|
children,
|
28
|
-
padding = "sm",
|
29
|
-
paddingBottom = "sm",
|
30
|
-
paddingX = "sm",
|
31
28
|
className,
|
32
29
|
spacing = "between",
|
33
30
|
separator = false,
|
34
31
|
} = props
|
35
32
|
|
36
33
|
const footerCSS = buildCss("dialog_footer")
|
37
|
-
const footerSpacing = globalProps(props
|
34
|
+
const footerSpacing = globalProps(props)
|
38
35
|
|
39
36
|
return (
|
40
37
|
<>
|
@@ -28,7 +28,6 @@ const DialogHeader = (props: DialogHeaderProps) => {
|
|
28
28
|
children,
|
29
29
|
className,
|
30
30
|
data = {},
|
31
|
-
padding = "sm",
|
32
31
|
spacing = "between",
|
33
32
|
closeable = true,
|
34
33
|
separator = true,
|
@@ -38,7 +37,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
|
|
38
37
|
const dataProps = buildDataProps(data)
|
39
38
|
const api = useContext(DialogContext)
|
40
39
|
const headerCSS = buildCss("dialog_header")
|
41
|
-
const headerSpacing = globalProps(props
|
40
|
+
const headerSpacing = globalProps(props)
|
42
41
|
|
43
42
|
/* eslint-disable react/jsx-handler-names */
|
44
43
|
|
@@ -1,33 +1,43 @@
|
|
1
|
-
import React from
|
1
|
+
import React from 'react'
|
2
2
|
|
3
|
-
import Message from
|
4
|
-
import Image from
|
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=
|
11
|
-
avatarStatus=
|
12
|
-
avatarUrl=
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
timestamp='20 seconds ago'
|
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"
|
17
16
|
{...props}
|
18
17
|
/>
|
19
18
|
|
20
19
|
<br />
|
21
20
|
<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
|
+
|
22
32
|
<br />
|
23
33
|
<br />
|
24
34
|
|
25
35
|
<Message
|
26
|
-
avatarName=
|
27
|
-
avatarUrl=
|
28
|
-
label=
|
29
|
-
message=
|
30
|
-
timestamp=
|
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"
|
31
41
|
{...props}
|
32
42
|
/>
|
33
43
|
|
@@ -35,10 +45,10 @@ const MessageDefault = (props) => {
|
|
35
45
|
<br />
|
36
46
|
|
37
47
|
<Message
|
38
|
-
avatarName=
|
39
|
-
label=
|
40
|
-
message=
|
41
|
-
timestamp=
|
48
|
+
avatarName="Timothy Wenhold"
|
49
|
+
label="Beverly Reyes"
|
50
|
+
message="We are so sorry you had a bad experience!"
|
51
|
+
timestamp="2 days ago"
|
42
52
|
{...props}
|
43
53
|
/>
|
44
54
|
|
@@ -46,23 +56,24 @@ const MessageDefault = (props) => {
|
|
46
56
|
<br />
|
47
57
|
|
48
58
|
<Message
|
49
|
-
label=
|
50
|
-
message=
|
51
|
-
timestamp=
|
59
|
+
label="Keith Craig"
|
60
|
+
message="Please hold for one moment, I will check with my manager."
|
61
|
+
timestamp="2 days ago"
|
52
62
|
{...props}
|
53
63
|
/>
|
54
64
|
|
55
65
|
<br />
|
56
66
|
<br />
|
57
67
|
|
58
|
-
<Message
|
59
|
-
|
68
|
+
<Message
|
69
|
+
label="Keith Craig"
|
70
|
+
timestamp="2 days ago"
|
60
71
|
{...props}
|
61
72
|
>
|
62
73
|
<Image
|
63
|
-
alt=
|
64
|
-
size=
|
65
|
-
url=
|
74
|
+
alt="picture of a misty forest"
|
75
|
+
size="md"
|
76
|
+
url="https://unsplash.it/500/400/?image=634"
|
66
77
|
/>
|
67
78
|
</Message>
|
68
79
|
|
@@ -70,17 +81,18 @@ const MessageDefault = (props) => {
|
|
70
81
|
<br />
|
71
82
|
|
72
83
|
<Message
|
73
|
-
label=
|
74
|
-
message=
|
75
|
-
timestamp=
|
84
|
+
label="Keith Craig"
|
85
|
+
message="Please hold for one moment, I will check with my manager."
|
86
|
+
timestamp="2 days ago"
|
76
87
|
{...props}
|
77
88
|
>
|
78
89
|
<Image
|
79
|
-
alt=
|
80
|
-
size=
|
81
|
-
url=
|
90
|
+
alt="picture of a misty forest"
|
91
|
+
size="md"
|
92
|
+
url="https://unsplash.it/500/400/?image=634"
|
82
93
|
/>
|
83
94
|
</Message>
|
95
|
+
|
84
96
|
</div>
|
85
97
|
)
|
86
98
|
}
|
@@ -1,7 +1,5 @@
|
|
1
1
|
// Color Helper Utilities
|
2
2
|
|
3
|
-
$transition-speed: 0.2s;
|
4
|
-
|
5
3
|
@function shade($color, $percentage) {
|
6
4
|
@return mix($charcoal, $color, $percentage);
|
7
5
|
}
|
@@ -29,7 +27,6 @@ $transition-speed: 0.2s;
|
|
29
27
|
}
|
30
28
|
}
|
31
29
|
|
32
|
-
|
33
30
|
@mixin text-color($colors-list) {
|
34
31
|
@each $name, $color in $colors-list {
|
35
32
|
.#{$name} {
|