playbook_ui 10.17.0 → 10.19.0.pre.lightbox
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 +4 -0
- data/app/pb_kits/playbook/data/menu.yml +1 -0
- data/app/pb_kits/playbook/index.js +2 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md +1 -1
- data/app/pb_kits/playbook/pb_body/_body.jsx +1 -1
- data/app/pb_kits/playbook/pb_body/_body_mixins.scss +2 -1
- data/app/pb_kits/playbook/pb_body/body.rb +1 -1
- data/app/pb_kits/playbook/pb_body/body.test.js +29 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb +5 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +5 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_light.md +6 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +6 -6
- data/app/pb_kits/playbook/pb_caption/_caption.scss +6 -17
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +13 -3
- data/app/pb_kits/playbook/pb_caption/caption.rb +3 -5
- data/app/pb_kits/playbook/pb_caption/caption.test.js +29 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb +3 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx +25 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.md +6 -0
- data/app/pb_kits/playbook/pb_caption/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_caption/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_content.html.erb +3 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx +9 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +3 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +13 -4
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +3 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb +12 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +19 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +2 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +2 -2
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
- data/app/pb_kits/playbook/pb_image/_image.jsx +4 -1
- data/app/pb_kits/playbook/pb_image/_image.scss +24 -8
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb +54 -0
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx +77 -0
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.md +1 -0
- data/app/pb_kits/playbook/pb_image/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_image/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_image/image.html.erb +1 -1
- data/app/pb_kits/playbook/pb_image/image.rb +8 -1
- data/app/pb_kits/playbook/pb_image/image.test.js +9 -4
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.jsx +53 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.jsx +54 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.jsx +39 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.jsx +82 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.jsx +54 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/styles.scss +110 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/useSlides.js +66 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/useUnscrollableBody.js +11 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.jsx +81 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +65 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +65 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_lightbox/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useToggler.js +10 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js +21 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.js +25 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +92 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +30 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md +1 -1
- data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +22 -0
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +17 -1
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +9 -2
- data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_bold_horizontal_nav.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_bold_vertical_nav.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_subtle_nav.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_nav/nav.rb +1 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +3 -0
- data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +1 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +62 -13
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +21 -2
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +12 -3
- data/app/pb_kits/playbook/pb_title/_title.jsx +6 -4
- data/app/pb_kits/playbook/pb_title/_title.scss +5 -5
- data/app/pb_kits/playbook/pb_title/_title_mixin.scss +17 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb +4 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_colors.md +6 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb +4 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_light.md +3 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_title/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_title/title.html.erb +3 -2
- data/app/pb_kits/playbook/pb_title/title.rb +5 -4
- data/app/pb_kits/playbook/pb_title/title.test.js +29 -0
- data/app/pb_kits/playbook/playbook-doc.js +2 -0
- data/app/pb_kits/playbook/plugins/pb_chart.js +13 -22
- data/app/pb_kits/playbook/tokens/_colors.scss +3 -1
- data/app/pb_kits/playbook/utilities/_cursor.scss +3 -0
- data/app/pb_kits/playbook/utilities/_display.scss +23 -0
- data/app/pb_kits/playbook/utilities/_line_height.scss +11 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +19 -1
- data/lib/playbook/classnames.rb +3 -0
- data/lib/playbook/cursor.rb +29 -0
- data/lib/playbook/display.rb +29 -0
- data/lib/playbook/engine.rb +0 -1
- data/lib/playbook/kit_base.rb +6 -0
- data/lib/playbook/line_height.rb +29 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +2 -0
- metadata +55 -15
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.html.erb +0 -3
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.jsx +0 -27
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.md +0 -1
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb +0 -1
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx +0 -17
- data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.md +0 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.html.erb +0 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx +0 -19
- data/app/pb_kits/playbook/pb_title/docs/_title_variants.md +0 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: baa1f6f416384a560ac9d4e03d4aed20b4d01a980f4384c24a29a6a48ee19a60
|
4
|
+
data.tar.gz: 79ba5f8ef47057ac2e187c46676d559c59149afda9ecfb934debaab366104728
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: edaa286cf749d9fdaa8b3ae854f59bc62681f0baffb90718b335a6774eec4133357f4eb7190b9f4545ec55b6cf41856052a0bc58ccedbd1d7c707b580654095a
|
7
|
+
data.tar.gz: a37e1263c2648e1bb032d49dc971871e7d5df0bd64091d4e61cdaf8e97f5df5915b2c6eb96f9b22508e3b3dc7c609206be70a979ccafd86616fa83b3cb005d38
|
@@ -47,6 +47,7 @@
|
|
47
47
|
@import 'pb_label_value/label_value';
|
48
48
|
@import 'pb_layout/layout';
|
49
49
|
@import 'pb_legend/legend';
|
50
|
+
@import 'pb_lightbox/lightbox';
|
50
51
|
@import 'pb_line_graph/line_graph';
|
51
52
|
@import 'pb_list/list';
|
52
53
|
@import 'pb_loading_inline/loading_inline';
|
@@ -93,7 +94,10 @@
|
|
93
94
|
@import 'pb_walkthrough/walkthrough';
|
94
95
|
@import 'pb_weekday_stacked/weekday_stacked';
|
95
96
|
@import './utilities/spacing';
|
97
|
+
@import './utilities/cursor';
|
96
98
|
@import './utilities/max_width';
|
97
99
|
@import './utilities/positioning';
|
98
100
|
@import './utilities/number_spacing';
|
99
101
|
@import './utilities/shadow';
|
102
|
+
@import './utilities/line_height';
|
103
|
+
@import './utilities/display';
|
@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
|
|
4
4
|
import 'lazysizes'
|
5
5
|
|
6
6
|
// vvv React Component JSX Imports from the React Kits vvv
|
7
|
-
export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
|
8
7
|
export { default as Avatar } from './pb_avatar/_avatar'
|
9
8
|
export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
|
10
9
|
export { default as Background } from './pb_background/_background'
|
@@ -55,6 +54,7 @@ export { default as Layout } from './pb_layout/_layout'
|
|
55
54
|
export { default as Legend } from './pb_legend/_legend'
|
56
55
|
export { default as LineGraph } from './pb_line_graph/_line_graph'
|
57
56
|
export { default as List } from './pb_list/_list'
|
57
|
+
export { default as Lightbox } from './pb_lightbox/_lightbox'
|
58
58
|
export { default as ListItem } from './pb_list/_list_item'
|
59
59
|
export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
|
60
60
|
export { default as Message } from './pb_message/_message'
|
@@ -101,6 +101,7 @@ export { default as Toggle } from './pb_toggle/_toggle'
|
|
101
101
|
export { default as Typeahead } from './pb_typeahead/_typeahead'
|
102
102
|
export { default as User } from './pb_user/_user'
|
103
103
|
export { default as UserBadge } from './pb_user_badge/_user_badge'
|
104
|
+
export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
|
104
105
|
export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
|
105
106
|
// ^^^ React Component JSX Imports from the React Kits ^^^
|
106
107
|
|
@@ -1,2 +1,2 @@
|
|
1
1
|
Custom data `colors` allow for color customization to match the needs of business requirements.
|
2
|
-
Pass the prop colors and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array.
|
2
|
+
Pass the prop colors and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`
|
@@ -12,7 +12,7 @@ type BodyProps = {
|
|
12
12
|
aria?: object,
|
13
13
|
className?: string,
|
14
14
|
children?: array<React.ReactChild>,
|
15
|
-
color?: 'default' | 'light' | 'lighter',
|
15
|
+
color?: 'default' | 'light' | 'lighter' | 'link',
|
16
16
|
dark?: boolean,
|
17
17
|
data?: object,
|
18
18
|
highlightedText?: array<string>,
|
@@ -6,6 +6,7 @@ $pb_body_colors: (
|
|
6
6
|
default: $text_lt_default,
|
7
7
|
light: $text_lt_light,
|
8
8
|
lighter: $text_lt_lighter,
|
9
|
+
link: $primary,
|
9
10
|
);
|
10
11
|
|
11
12
|
$pb_dark_body_colors: (
|
@@ -63,4 +64,4 @@ $pb_body_status: (
|
|
63
64
|
|
64
65
|
@mixin pb_body_positive {
|
65
66
|
@include pb_body($success);
|
66
|
-
}
|
67
|
+
}
|
@@ -4,7 +4,7 @@ module Playbook
|
|
4
4
|
module PbBody
|
5
5
|
class Body < Playbook::KitBase
|
6
6
|
prop :color, type: Playbook::Props::Enum,
|
7
|
-
values: %w[default light lighter],
|
7
|
+
values: %w[default light lighter link],
|
8
8
|
default: "default"
|
9
9
|
prop :status, type: Playbook::Props::Enum,
|
10
10
|
values: %w[neutral negative positive],
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import Body from './_body'
|
5
|
+
|
6
|
+
test('returns namespaced class name', () => {
|
7
|
+
render(
|
8
|
+
<Body
|
9
|
+
data={{ testid: 'primary-test' }}
|
10
|
+
text="Test colors"
|
11
|
+
/>
|
12
|
+
)
|
13
|
+
|
14
|
+
const kit = screen.getByTestId('primary-test')
|
15
|
+
expect(kit).toHaveClass('pb_body_kit')
|
16
|
+
})
|
17
|
+
|
18
|
+
test('with colors', () => {
|
19
|
+
render(
|
20
|
+
<Body
|
21
|
+
color="success"
|
22
|
+
data={{ testid: 'primary-test' }}
|
23
|
+
text="Test colors"
|
24
|
+
/>
|
25
|
+
)
|
26
|
+
|
27
|
+
const kit = screen.getByTestId('primary-test')
|
28
|
+
expect(kit).toHaveClass('pb_body_kit_success')
|
29
|
+
})
|
@@ -0,0 +1,6 @@
|
|
1
|
+
##### Prop
|
2
|
+
This kit uses `default` color by default, and can be replaced with colors below:
|
3
|
+
|
4
|
+
* `light` `lighter` `success` `error` `link`
|
5
|
+
|
6
|
+
- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
|
@@ -3,33 +3,33 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
-
import { globalProps } from '../utilities/globalProps.js'
|
6
|
+
import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
|
7
7
|
|
8
8
|
type CaptionProps = {
|
9
9
|
aria?: object,
|
10
|
-
className?: string,
|
11
10
|
children: array<React.ReactNode> | React.ReactNode,
|
11
|
+
className?: string,
|
12
|
+
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
12
13
|
data?: object,
|
13
14
|
id?: string,
|
14
15
|
size?: "xs" | "sm" | "md" | "lg" | "xl",
|
15
16
|
tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
|
16
17
|
text?: string,
|
17
18
|
variant?: null | "link",
|
18
|
-
color?: "default" | "link" | "light",
|
19
19
|
};
|
20
20
|
|
21
21
|
const Caption = (props: CaptionProps) => {
|
22
|
+
if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
|
22
23
|
const {
|
23
24
|
aria = {},
|
24
|
-
className,
|
25
25
|
children,
|
26
|
+
className,
|
26
27
|
color,
|
27
28
|
data = {},
|
28
29
|
id,
|
29
30
|
size = 'md',
|
30
31
|
tag = 'div',
|
31
32
|
text,
|
32
|
-
variant = null,
|
33
33
|
} = props
|
34
34
|
const tagOptions = [
|
35
35
|
'h1',
|
@@ -48,7 +48,7 @@ const Caption = (props: CaptionProps) => {
|
|
48
48
|
const ariaProps = buildAriaProps(aria)
|
49
49
|
const dataProps = buildDataProps(data)
|
50
50
|
const css = classnames(
|
51
|
-
buildCss('pb_caption_kit', size,
|
51
|
+
buildCss('pb_caption_kit', size, color),
|
52
52
|
globalProps(props),
|
53
53
|
className,
|
54
54
|
)
|
@@ -10,26 +10,15 @@
|
|
10
10
|
|
11
11
|
&[class^="pb_caption_kit_xs"] {
|
12
12
|
@include caption_xs;
|
13
|
-
&[class*="_link"] {
|
14
|
-
color: $primary;}
|
15
13
|
}
|
16
14
|
|
17
|
-
|
18
|
-
color: $text_lt_light;
|
19
|
-
}
|
20
|
-
|
21
|
-
&[class*="default"] {
|
22
|
-
color: $text_lt_default;
|
23
|
-
}
|
24
|
-
|
25
|
-
&[class*="link"] {
|
26
|
-
color: $primary;
|
27
|
-
}
|
15
|
+
@include pb_caption_kit_colors;
|
28
16
|
|
29
|
-
|
30
|
-
@
|
31
|
-
|
32
|
-
|
17
|
+
&.dark {
|
18
|
+
@include caption_dark;
|
19
|
+
@each $name, $color in $pb_dark_caption_colors {
|
20
|
+
&[class*="_#{$name}"] {
|
21
|
+
color: $color;
|
33
22
|
}
|
34
23
|
}
|
35
24
|
}
|
@@ -4,13 +4,16 @@
|
|
4
4
|
$pb_caption_colors: (
|
5
5
|
default: $text_lt_default,
|
6
6
|
light: $text_lt_light,
|
7
|
-
link: $primary
|
7
|
+
link: $primary,
|
8
|
+
lighter: $text_lt_lighter,
|
9
|
+
success: $success,
|
10
|
+
error: $error,
|
8
11
|
);
|
9
12
|
|
10
13
|
$pb_dark_caption_colors: (
|
11
|
-
default:
|
14
|
+
default: $text_dk_default,
|
12
15
|
light: $text_dk_light,
|
13
|
-
link: $primary
|
16
|
+
link: $primary,
|
14
17
|
);
|
15
18
|
|
16
19
|
|
@@ -39,3 +42,10 @@ $pb_dark_caption_colors: (
|
|
39
42
|
@mixin caption_dark {
|
40
43
|
color: $text_dk_light;
|
41
44
|
}
|
45
|
+
@mixin pb_caption_kit_colors {
|
46
|
+
@each $name, $color in $pb_caption_colors {
|
47
|
+
&[class*="#{$name}"] {
|
48
|
+
color: $color
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
@@ -10,16 +10,14 @@ module Playbook
|
|
10
10
|
values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
|
11
11
|
default: "div"
|
12
12
|
prop :text
|
13
|
-
prop :variant,
|
14
|
-
values: [nil, "link"],
|
15
|
-
default: nil
|
13
|
+
prop :variant, deprecated: true
|
16
14
|
|
17
15
|
prop :color, type: Playbook::Props::Enum,
|
18
|
-
values: [nil, "light", "
|
16
|
+
values: [nil, "default", "light", "lighter", "success", "error", "link"],
|
19
17
|
default: nil
|
20
18
|
|
21
19
|
def classname
|
22
|
-
generate_classname("pb_caption_kit", size,
|
20
|
+
generate_classname("pb_caption_kit", size, color)
|
23
21
|
end
|
24
22
|
end
|
25
23
|
end
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import Caption from './_caption'
|
5
|
+
|
6
|
+
test('returns namespaced class name', () => {
|
7
|
+
render(
|
8
|
+
<Caption
|
9
|
+
data={{ testid: 'primary-test' }}
|
10
|
+
text="Test colors"
|
11
|
+
/>
|
12
|
+
)
|
13
|
+
|
14
|
+
const kit = screen.getByTestId('primary-test')
|
15
|
+
expect(kit).toHaveClass('pb_caption_kit_md')
|
16
|
+
})
|
17
|
+
|
18
|
+
test('with colors', () => {
|
19
|
+
render(
|
20
|
+
<Caption
|
21
|
+
color="success"
|
22
|
+
data={{ testid: 'primary-test' }}
|
23
|
+
text="Test colors"
|
24
|
+
/>
|
25
|
+
)
|
26
|
+
|
27
|
+
const kit = screen.getByTestId('primary-test')
|
28
|
+
expect(kit).toHaveClass('pb_caption_kit_md_success')
|
29
|
+
})
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Caption } from '../../'
|
3
|
+
|
4
|
+
const CaptionColors = (props) => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Caption
|
8
|
+
text="Test colors"
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
<Caption
|
12
|
+
color="success"
|
13
|
+
text="Test colors"
|
14
|
+
{...props}
|
15
|
+
/>
|
16
|
+
<Caption
|
17
|
+
color="link"
|
18
|
+
text="Test colors"
|
19
|
+
{...props}
|
20
|
+
/>
|
21
|
+
</div>
|
22
|
+
)
|
23
|
+
}
|
24
|
+
|
25
|
+
export default CaptionColors
|
@@ -0,0 +1,6 @@
|
|
1
|
+
##### Prop
|
2
|
+
Caption kit will use `light` color by default. Other available colors are:
|
3
|
+
|
4
|
+
* `default` `lighter` `success` `error` `link`
|
5
|
+
|
6
|
+
- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it
|
@@ -2,9 +2,9 @@ examples:
|
|
2
2
|
rails:
|
3
3
|
- caption_light: Default
|
4
4
|
- caption_block: Block
|
5
|
-
-
|
5
|
+
- caption_colors: Colors
|
6
6
|
|
7
7
|
react:
|
8
8
|
- caption_light: Default
|
9
9
|
- caption_block: Block
|
10
|
-
-
|
10
|
+
- caption_colors: Colors
|
@@ -1,4 +1,3 @@
|
|
1
1
|
export { default as CaptionLight } from './_caption_light.jsx'
|
2
|
-
export { default as
|
2
|
+
export { default as CaptionColors } from './_caption_colors.jsx'
|
3
3
|
export { default as CaptionBlock } from './_caption_block.jsx'
|
4
|
-
export { default as CaptionExample } from './_caption_example.jsx'
|
@@ -5,9 +5,16 @@ import Card from '../_card'
|
|
5
5
|
const CardContent = (props) => {
|
6
6
|
return (
|
7
7
|
<div>
|
8
|
-
<Card
|
8
|
+
<Card
|
9
|
+
cursor="pointer"
|
10
|
+
{...props}
|
11
|
+
>
|
12
|
+
{'Card content'}
|
13
|
+
</Card>
|
9
14
|
<br />
|
10
|
-
<Card
|
15
|
+
<Card
|
16
|
+
{...props}
|
17
|
+
>
|
11
18
|
{`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
|
12
19
|
|
13
20
|
Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.`}
|
@@ -1,3 +1,5 @@
|
|
1
1
|
The `defaultDate`/`default_date` prop has a null or empty string value by default. You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load. Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.
|
2
2
|
|
3
|
-
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
|
3
|
+
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
|
4
|
+
|
5
|
+
|
@@ -2,10 +2,19 @@ import { ensureAccessible, renderKit } from '../utilities/test-utils'
|
|
2
2
|
import { DateTimeStacked } from '../'
|
3
3
|
|
4
4
|
/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
|
5
|
+
const currentDate = new Date()
|
6
|
+
|
7
|
+
const datetime = new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
|
8
|
+
monthName = datetime.toLocaleString('en-US', { month: 'short' }),
|
9
|
+
day = datetime.getDate(),
|
10
|
+
fullYear = datetime.getFullYear(),
|
11
|
+
optionalYear = currentDate.getFullYear() !== fullYear ? fullYear : ''
|
12
|
+
|
13
|
+
const monthDayYear = `${monthName}${day}${optionalYear}`
|
5
14
|
|
6
15
|
const props = {
|
7
16
|
data: { testid: 'datetimestacked' },
|
8
|
-
datetime
|
17
|
+
datetime,
|
9
18
|
}
|
10
19
|
|
11
20
|
test('Kit renders date time', () => {
|
@@ -19,17 +28,17 @@ it('Should be accessible', async () => {
|
|
19
28
|
|
20
29
|
test('renders time in default timezone', () => {
|
21
30
|
const kit = renderKit(DateTimeStacked, props)
|
22
|
-
expect(kit).toHaveTextContent(
|
31
|
+
expect(kit).toHaveTextContent(`${monthDayYear}1:00pEDT`)
|
23
32
|
})
|
24
33
|
|
25
34
|
test('renders time in timezone', () => {
|
26
35
|
props.timeZone = 'Asia/Tokyo'
|
27
36
|
const kit = renderKit(DateTimeStacked, props)
|
28
|
-
expect(kit).toHaveTextContent(
|
37
|
+
expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
|
29
38
|
})
|
30
39
|
|
31
40
|
test('renders time in timezone', () => {
|
32
41
|
props.timeZone = 'America/Denver'
|
33
42
|
const kit = renderKit(DateTimeStacked, props)
|
34
|
-
expect(kit).toHaveTextContent(
|
43
|
+
expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
|
35
44
|
})
|
@@ -25,6 +25,7 @@ type GaugeProps = {
|
|
25
25
|
suffix: string,
|
26
26
|
title: string,
|
27
27
|
tooltipHtml: string,
|
28
|
+
colors: array,
|
28
29
|
}
|
29
30
|
|
30
31
|
const Gauge = (props: GaugeProps) => {
|
@@ -45,6 +46,7 @@ const Gauge = (props: GaugeProps) => {
|
|
45
46
|
suffix = '',
|
46
47
|
title = '',
|
47
48
|
tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
|
49
|
+
colors = [],
|
48
50
|
} = props
|
49
51
|
|
50
52
|
const ariaProps = buildAriaProps(aria)
|
@@ -76,6 +78,7 @@ const Gauge = (props: GaugeProps) => {
|
|
76
78
|
style: style,
|
77
79
|
tooltipHtml: tooltipHtml,
|
78
80
|
type: 'gauge',
|
81
|
+
colors: colors,
|
79
82
|
})
|
80
83
|
}, [])
|
81
84
|
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Gauge } from '../../'
|
3
|
+
|
4
|
+
const data = [
|
5
|
+
{ name: 'Name', value: 67 },
|
6
|
+
]
|
7
|
+
|
8
|
+
const GaugeColors = (props) => (
|
9
|
+
<div>
|
10
|
+
<Gauge
|
11
|
+
chartData={data}
|
12
|
+
id="gauge-colors"
|
13
|
+
{...props}
|
14
|
+
colors={['data-7']}
|
15
|
+
/>
|
16
|
+
</div>
|
17
|
+
)
|
18
|
+
|
19
|
+
export default GaugeColors
|
@@ -9,6 +9,7 @@ examples:
|
|
9
9
|
- gauge_min_max: Min Max Labels
|
10
10
|
- gauge_sizing: Sizing
|
11
11
|
- gauge_height: Height
|
12
|
+
- gauge_colors: Color Overrides
|
12
13
|
|
13
14
|
|
14
15
|
react:
|
@@ -21,3 +22,4 @@ examples:
|
|
21
22
|
- gauge_sizing: Sizing
|
22
23
|
- gauge_height: Height
|
23
24
|
- gauge_live_data: Live Data
|
25
|
+
- gauge_colors: Color Overrides
|
@@ -7,3 +7,4 @@ export { default as GaugeSizing } from './_gauge_sizing.jsx'
|
|
7
7
|
export { default as GaugeTitle } from './_gauge_title.jsx'
|
8
8
|
export { default as GaugeUnits } from './_gauge_units.jsx'
|
9
9
|
export { default as GaugeLiveData } from './_gauge_live_data.jsx'
|
10
|
+
export { default as GaugeColors } from './_gauge_colors.jsx'
|
@@ -20,6 +20,7 @@ module Playbook
|
|
20
20
|
prop :disable_animation, type: Playbook::Props::Boolean, default: false
|
21
21
|
prop :min, type: Playbook::Props::Numeric, default: 0
|
22
22
|
prop :max, type: Playbook::Props::Numeric, default: 100
|
23
|
+
prop :colors, type: Playbook::Props::Array, default: []
|
23
24
|
|
24
25
|
def chart_data_formatted
|
25
26
|
chart_data.map { |hash| hash[:y] = hash.delete :value }
|
@@ -42,6 +43,7 @@ module Playbook
|
|
42
43
|
style: style,
|
43
44
|
tooltipHtml: tooltip_html,
|
44
45
|
type: "gauge",
|
46
|
+
colors: colors,
|
45
47
|
}.to_json.html_safe
|
46
48
|
end
|
47
49
|
|
@@ -52,9 +52,9 @@ $pb_icon_circle_sizes: (
|
|
52
52
|
@each $color_name, $color_value in $colors {
|
53
53
|
&[class*=_#{$color_name}] {
|
54
54
|
color: $color_value;
|
55
|
-
background: rgba(mix($bg_dark, $color_value, 10%), $
|
55
|
+
background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
|
56
56
|
&.dark {
|
57
|
-
background: rgba(mix($bg_dark, $color_value, 10%), $
|
57
|
+
background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
|
58
58
|
}
|
59
59
|
}
|
60
60
|
}
|
@@ -0,0 +1 @@
|
|
1
|
+
Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`
|
@@ -8,7 +8,7 @@ module Playbook
|
|
8
8
|
values: %w[xs sm md base lg xl],
|
9
9
|
default: "md"
|
10
10
|
prop :variant, type: Playbook::Props::Enum,
|
11
|
-
values: %w[default royal blue purple teal red yellow green],
|
11
|
+
values: %w[default royal blue orange purple teal red yellow green],
|
12
12
|
default: "default"
|
13
13
|
|
14
14
|
def classname
|