playbook_ui 14.10.0.pre.rc.5 → 14.10.0.pre.rc.7

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: 3b8dedac180b9f17d02b95f3274695b9e4142c478f59a44904bbeb40372c9c3c
4
- data.tar.gz: 34625e6eb95af864904e189c5934a018eb647c249b0b8d8557dd721eca8392eb
3
+ metadata.gz: cbb802e05ad2909b93637f3b007ff3275bbacf8689a724d833cec25a7bb944c3
4
+ data.tar.gz: 220c4a45fa26245b08cd4e2cf9591963289f314073e5db610ed17c43fa6c7ac7
5
5
  SHA512:
6
- metadata.gz: eb4a2da7e1753b42395b26569fe7b2d5cc0cada66c688f6501dd9ec7e979583c76eca2336385bbc1873013403d64a4453270f66b1eae3decd019045cf391d841
7
- data.tar.gz: ee136f4fb4edc82438d5fd253154269b244c7b7f0cd7ab40bcdbbee3501d1f74edf28c01505f54cca4f205ead23901ac6cc1f77e42c01b726774d3ad2f85eb20
6
+ metadata.gz: 6f0aa1ac07de6546300157042684e5fb30568fae189deb27149656e8c64983276782484bf0c8e00aa26215c582ed425d34feab45af4935c8c55df9acc3bbaa6a
7
+ data.tar.gz: f1a5ecf6863314b071050db05f20edae6fcb5cc79c3bf9c13f2624f5b40a1dd43f88fcaf46e945d95326f3bfbf0a090456f2c1873312f8f02ace71fbd8fdda94
@@ -1,24 +1,25 @@
1
1
  @import "./body_mixins";
2
2
  @import "../tokens/titles";
3
3
 
4
- [class^=pb_body_kit]{
4
+ [class^="pb_body_kit"] {
5
5
  @include pb_body($text_lt_default);
6
6
  @each $color_name, $color_value in $pb_body_colors {
7
7
  &[class*=_#{"" + $color_name}] {
8
8
  @include pb_body($color_value);
9
9
  }
10
10
  @each $status_name, $status_value in $pb_body_status {
11
- &[class*=_default_#{$status_name}] {
11
+ &[class*="_default_#{$status_name}"] {
12
12
  @include pb_body($status_value);
13
13
  }
14
14
  }
15
15
  }
16
- @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
17
- &[class*=_#{$dark_color_name}][class*=dark]{
16
+ @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
17
+ &[class*="_#{$dark_color_name}"][class*="dark"] {
18
18
  @include pb_body($dark_color_value);
19
19
  }
20
20
  }
21
- b, strong {
21
+ b,
22
+ strong {
22
23
  font-weight: $bold;
23
24
  }
24
25
 
@@ -29,7 +30,8 @@
29
30
  }
30
31
  }
31
32
 
32
- em, i {
33
+ em,
34
+ i {
33
35
  font-style: italic;
34
36
  }
35
37
 
@@ -39,26 +41,25 @@
39
41
  }
40
42
 
41
43
  @each $status_name, $status_value in $pb_body_status {
42
- &[class*=#{$status_name}] {
44
+ &[class*="#{$status_name}"] {
43
45
  @include pb_body($status_value);
44
46
  }
45
47
  }
46
48
 
47
- &[class*=dark] {
49
+ &[class*="dark"] {
48
50
  a {
49
51
  color: $active_dark;
50
52
  }
51
53
  @include pb_body_dark();
52
- @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
53
- &[class*=_#{$dark_color_name}][class*=dark]{
54
+ @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
55
+ &[class*="_#{$dark_color_name}"][class*="dark"] {
54
56
  @include pb_body($dark_color_value);
55
57
  }
56
58
  }
57
- @each $status_name, $status_value in $pb_body_status {
58
- &[class*=_#{$status_name}] {
59
+ @each $status_name, $status_value in $pb_dark_body_status {
60
+ &[class*="_#{$status_name}"] {
59
61
  @include pb_body($status_value);
60
62
  }
61
63
  }
62
64
  }
63
-
64
65
  }
@@ -3,29 +3,35 @@
3
3
  @import "../tokens/typography";
4
4
 
5
5
  $pb_body_colors: (
6
- default: $text_lt_default,
7
- light: $text_lt_light,
8
- lighter: $text_lt_lighter,
9
- link: $primary,
10
- error: $error,
11
- success: $text_lt_success_sm,
6
+ default: $text_lt_default,
7
+ light: $text_lt_light,
8
+ lighter: $text_lt_lighter,
9
+ link: $primary,
10
+ error: $error,
11
+ success: $text_lt_success_sm,
12
12
  );
13
13
 
14
14
  $pb_dark_body_colors: (
15
- default: $text_dk_default,
16
- light: $text_dk_light,
17
- lighter: $text_dk_lighter,
18
- link: $active_dark,
19
- error: $error,
20
- success: $text_dk_success_sm,
15
+ default: $text_dk_default,
16
+ light: $text_dk_light,
17
+ lighter: $text_dk_lighter,
18
+ link: $active_dark,
19
+ error: $error,
20
+ success: $text_dk_success_sm,
21
21
  );
22
22
 
23
23
  // Order is important here!
24
24
  $pb_body_status: (
25
- default: $text_lt_default,
26
- negative: $error,
27
- dark_error: $error_dark_body,
28
- positive: $text_lt_success_sm,
25
+ default: $text_lt_default,
26
+ negative: $error,
27
+ dark_error: $error_dark_body,
28
+ positive: $text_lt_success_sm,
29
+ );
30
+
31
+ $pb_dark_body_status: (
32
+ default: $text_dk_default,
33
+ negative: $error_dark,
34
+ positive: $text_dk_success_sm,
29
35
  );
30
36
 
31
37
  @mixin pb_body($color: $text_lt_default) {
@@ -13,6 +13,7 @@ const BreadCrumbsDefault = (props) => {
13
13
  <Icon
14
14
  icon="home"
15
15
  size="1x"
16
+ {...props}
16
17
  />
17
18
  <BreadCrumbItem
18
19
  {...props}
@@ -22,11 +23,13 @@ const BreadCrumbsDefault = (props) => {
22
23
  size="4"
23
24
  tag="span"
24
25
  text="Home"
26
+ {...props}
25
27
  />
26
28
  </BreadCrumbItem>
27
29
  <Icon
28
30
  icon="users"
29
31
  size="1x"
32
+ {...props}
30
33
  />
31
34
  <Link
32
35
  {...props}
@@ -36,17 +39,20 @@ const BreadCrumbsDefault = (props) => {
36
39
  size="4"
37
40
  tag="span"
38
41
  text="Users"
42
+ {...props}
39
43
  />
40
44
  </Link>
41
45
  <Icon
42
46
  icon="user"
43
47
  size="1x"
48
+ {...props}
44
49
  />
45
50
  <Link {...props}>
46
51
  <Title
47
52
  size="4"
48
53
  tag="span"
49
54
  text="User"
55
+ {...props}
50
56
  />
51
57
  </Link>
52
58
  </BreadCrumbs>
@@ -13,9 +13,10 @@ $pb_caption_colors: (
13
13
  $pb_dark_caption_colors: (
14
14
  default: $text_dk_default,
15
15
  light: $text_dk_light,
16
+ lighter: $text_dk_lighter,
16
17
  link: $active_dark,
17
18
  success: $text_dk_success_sm,
18
- error: $error,
19
+ error: $error_dark,
19
20
  );
20
21
 
21
22
 
@@ -1,40 +1,46 @@
1
- import React from 'react'
2
- import classnames from 'classnames'
1
+ import React from "react"
2
+ import classnames from "classnames"
3
3
 
4
- import { buildCss, buildHtmlProps } from '../utilities/props'
5
- import { globalProps } from '../utilities/globalProps'
4
+ import { buildCss, buildHtmlProps } from "../utilities/props"
5
+ import { globalProps } from "../utilities/globalProps"
6
6
 
7
- import Body from '../pb_body/_body'
8
- import Icon from '../pb_icon/_icon'
7
+ import Body from "../pb_body/_body"
8
+ import Icon from "../pb_icon/_icon"
9
9
 
10
- const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
11
- increase: 'positive',
12
- decrease: 'negative',
13
- neutral: 'neutral',
10
+ const statusMap: {
11
+ neutral: "neutral"
12
+ decrease: "negative"
13
+ increase: "positive"
14
+ } = {
15
+ increase: "positive",
16
+ decrease: "negative",
17
+ neutral: "neutral",
14
18
  }
15
19
 
16
20
  const iconMap = {
17
- increase: 'arrow-up',
18
- decrease: 'arrow-down',
21
+ increase: "arrow-up",
22
+ decrease: "arrow-down",
19
23
  }
20
24
 
21
25
  type StatChangeProps = {
22
- change?: 'increase' | 'decrease' | 'neutral',
23
- className?: string,
24
- icon?: string,
25
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
26
- id?: string,
27
- value?: string | number,
26
+ change?: "increase" | "decrease" | "neutral"
27
+ className?: string
28
+ dark?: boolean
29
+ icon?: string
30
+ id?: string
31
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
32
+ value?: string | number
28
33
  }
29
34
 
30
35
  const StatChange = (props: StatChangeProps): React.ReactElement => {
31
- const {
32
- change = 'neutral',
33
- className,
36
+ const {
37
+ change = "neutral",
38
+ className,
39
+ dark = false,
34
40
  htmlOptions = {},
35
- icon,
36
- id,
37
- value
41
+ icon,
42
+ id,
43
+ value,
38
44
  } = props
39
45
 
40
46
  const status = statusMap[change as keyof typeof statusMap]
@@ -47,30 +53,32 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
47
53
 
48
54
  return (
49
55
  <>
50
- {value &&
56
+ {value && (
51
57
  <div
52
58
  className={classnames(
53
- buildCss('pb_stat_change_kit', status),
54
- globalProps(props),
55
- className
56
- )}
59
+ buildCss("pb_stat_change_kit", status),
60
+ globalProps(props),
61
+ className
62
+ )}
57
63
  id={id}
58
64
  {...htmlProps}
59
65
  >
60
- <Body status={status}>
61
- {returnedIcon &&
66
+ <Body dark={dark}
67
+ status={status}
68
+ >
69
+ {" "}
70
+ {returnedIcon && (
62
71
  <>
63
- <Icon
72
+ <Icon dark={dark}
64
73
  fixed_width
65
74
  icon={returnedIcon}
66
- />
67
- {' '}
75
+ />{" "}
68
76
  </>
69
- }
77
+ )}
70
78
  {`${value}%`}
71
79
  </Body>
72
80
  </div>
73
- }
81
+ )}
74
82
  </>
75
83
  )
76
84
  }
@@ -1,6 +1,6 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("body", props: { status: object.status }) do %>
3
- <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
4
- <%= "#{object.value}%" if object.value %>
5
- <% end %>
2
+ <%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
3
+ <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
4
+ <%= "#{object.value}%" if object.value %>
5
+ <% end %>
6
6
  <% end %>
@@ -49,10 +49,11 @@
49
49
  }
50
50
 
51
51
  &.dark {
52
- @include pb_title_dark;
53
- }
54
-
55
- &.dark[class*=_link] {
56
- @include pb_title_dark_link;
52
+ @include title_dark;
53
+ @each $name, $color in $pb_dark_title_colors {
54
+ &[class*="_#{$name}"] {
55
+ color: $color;
56
+ }
57
+ }
57
58
  }
58
59
  }
@@ -9,6 +9,15 @@ $pb_title_colors: (
9
9
  link: $primary
10
10
  );
11
11
 
12
+ $pb_dark_title_colors: (
13
+ default: $text_dk_default,
14
+ light: $text_dk_light,
15
+ lighter: $text_dk_lighter,
16
+ success: $success,
17
+ error: $error_dark,
18
+ link: $active_dark
19
+ );
20
+
12
21
  @mixin title_colors {
13
22
  @each $name, $color in $pb_title_colors {
14
23
  &[class*=_#{$name}] {
@@ -16,3 +25,7 @@ $pb_title_colors: (
16
25
  }
17
26
  }
18
27
  }
28
+
29
+ @mixin title_dark {
30
+ color: $text_dk_default;
31
+ }
@@ -33,14 +33,6 @@
33
33
  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
34
34
  }
35
35
 
36
- @mixin pb_title_dark {
37
- color: $text_dk_default;
38
- }
39
-
40
- @mixin pb_title_dark_link {
41
- color: $active_dark;
42
- }
43
-
44
36
  @mixin pb_title_bold {
45
37
  font-weight: $bolder;
46
38
  }