playbook_ui 3.3.0 → 3.4.0
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 +1 -0
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/kits/pb_legend.js +4 -0
- data/app/pb_kits/playbook/packs/examples.js +2 -0
- data/app/pb_kits/playbook/packs/kits.js +1 -0
- data/app/pb_kits/playbook/pb_card/card.rb +5 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_shadow.html.erb +0 -12
- data/app/pb_kits/playbook/pb_legend/_legend.html.erb +10 -0
- data/app/pb_kits/playbook/pb_legend/_legend.jsx +47 -0
- data/app/pb_kits/playbook/pb_legend/_legend.scss +24 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_dark.html.erb +5 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_dark.jsx +21 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.html.erb +1 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.jsx +15 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb +5 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx +20 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.html.erb +1 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx +14 -0
- data/app/pb_kits/playbook/pb_legend/docs/example.yml +15 -0
- data/app/pb_kits/playbook/pb_legend/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_legend/legend.rb +30 -0
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +1 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.html.erb +6 -12
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx +1 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_dark.jsx +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +1 -0
- data/app/pb_kits/playbook/pb_select/_select.scss +6 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +11 -2
- data/app/pb_kits/playbook/tokens/_shadows.scss +11 -3
- data/app/views/playbook/pages/utilities.html.slim +1 -2
- data/lib/playbook/version.rb +1 -1
- metadata +17 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d3de5d9a00cdc38a2ec90eb57ad2be970b276298515313d3a6261a5f47a3c0a2
|
4
|
+
data.tar.gz: 91ee6b3c0ed79222fff3e11fc50875422a7c489b55a7ae467843791343b5af6c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f4c3280e29552ec18e6ede2d5f9428e8f4b81f47966d8d00ba9f606a0c3e840d2396dd4cb227db8a3a9b640dff07e730a9ca62fa96d4eda5f9dec6286b523a12
|
7
|
+
data.tar.gz: d746f05ed24a4322458f4f7989efa9ecd6a1021bf050efa3bc98d18e617f5e4cebafabee0052bf7d5152a97a1d94e17253726f86c2315a5dfcba4080b4893336
|
@@ -26,6 +26,7 @@ export Image from './pb_image/_image.jsx'
|
|
26
26
|
export LabelPill from './pb_label_pill/_label_pill.jsx'
|
27
27
|
export LabelValue from './pb_label_value/_label_value.jsx'
|
28
28
|
export Layout from './pb_layout/_layout.jsx'
|
29
|
+
export Legend from './pb_legend/_legend.jsx'
|
29
30
|
export LineGraph from './pb_line_graph/_line_graph.jsx'
|
30
31
|
export List from './pb_list/_list.jsx'
|
31
32
|
export ListItem from './pb_list/_list_item.jsx'
|
@@ -39,6 +39,7 @@ import * as image from 'pb_image/docs'
|
|
39
39
|
import * as LabelPill from 'pb_label_pill/docs'
|
40
40
|
import * as LabelValue from 'pb_label_value/docs'
|
41
41
|
import * as layout from 'pb_layout/docs'
|
42
|
+
import * as Legend from 'pb_legend/docs'
|
42
43
|
import * as LineGraph from 'pb_line_graph/docs'
|
43
44
|
import * as list from 'pb_list/docs'
|
44
45
|
import * as LoadingInline from 'pb_loading_inline/docs'
|
@@ -99,6 +100,7 @@ WebpackerReact.setup(image)
|
|
99
100
|
WebpackerReact.setup(LabelPill)
|
100
101
|
WebpackerReact.setup(LabelValue)
|
101
102
|
WebpackerReact.setup(layout)
|
103
|
+
WebpackerReact.setup(Legend)
|
102
104
|
WebpackerReact.setup(LineGraph)
|
103
105
|
WebpackerReact.setup(list)
|
104
106
|
WebpackerReact.setup(LoadingInline)
|
@@ -25,6 +25,7 @@ import '../kits/pb_image.js'
|
|
25
25
|
import '../kits/pb_label_pill.js'
|
26
26
|
import '../kits/pb_label_value.js'
|
27
27
|
import '../kits/pb_layout.js'
|
28
|
+
import '../kits/pb_legend.js'
|
28
29
|
import '../kits/pb_line_graph.js'
|
29
30
|
import '../kits/pb_loading_inline.js'
|
30
31
|
import '../kits/pb_message.js'
|
@@ -1,5 +1,10 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
# DEPRECATION NOTICE - DO NOT USE Shadow Shallow and Shadow Default!
|
4
|
+
# Shadow Options: Shallow and Default targed to be removed in release v4.0.0.
|
5
|
+
# [https://github.com/powerhome/playbook/issues/550]
|
6
|
+
# END DEPRECATION NOTICE
|
7
|
+
|
3
8
|
module Playbook
|
4
9
|
module PbCard
|
5
10
|
class Card
|
@@ -4,18 +4,6 @@
|
|
4
4
|
|
5
5
|
<br>
|
6
6
|
|
7
|
-
<%= pb_rails("card", props: {shadow: "shallow"}) do %>
|
8
|
-
Card content
|
9
|
-
<% end %>
|
10
|
-
|
11
|
-
<br>
|
12
|
-
|
13
|
-
<%= pb_rails("card", props: {shadow: "default"}) do %>
|
14
|
-
Card content
|
15
|
-
<% end %>
|
16
|
-
|
17
|
-
<br>
|
18
|
-
|
19
7
|
<%= pb_rails("card", props: {shadow: "deep"}) do %>
|
20
8
|
Card content
|
21
9
|
<% end %>
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%= content_tag(:div, object.text,
|
2
|
+
id: object.id,
|
3
|
+
data: object.data,
|
4
|
+
class: object.classname) do %>
|
5
|
+
<%= pb_rails("body", props: {color: object.body_color}) do %>
|
6
|
+
<span class="pb_legend_indicator_circle"></span>
|
7
|
+
<%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
|
8
|
+
<%= object.text %>
|
9
|
+
<% end %>
|
10
|
+
<% end %>
|
@@ -0,0 +1,47 @@
|
|
1
|
+
/* @flow */
|
2
|
+
|
3
|
+
import React from 'react'
|
4
|
+
import { buildCss } from '../utilities/props'
|
5
|
+
|
6
|
+
import {
|
7
|
+
Body,
|
8
|
+
Title,
|
9
|
+
} from '../'
|
10
|
+
|
11
|
+
type LegendProps = {
|
12
|
+
color?: 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7',
|
13
|
+
dark?: Boolean,
|
14
|
+
prefixText?: String,
|
15
|
+
text: String,
|
16
|
+
}
|
17
|
+
|
18
|
+
const Legend = ({
|
19
|
+
color = 'data_1',
|
20
|
+
dark = false,
|
21
|
+
prefixText,
|
22
|
+
text,
|
23
|
+
}: LegendProps) => {
|
24
|
+
const darkClass = dark ? 'dark' : 'light'
|
25
|
+
const bodyCSS = buildCss('pb_legend_kit', color, darkClass)
|
26
|
+
|
27
|
+
return (
|
28
|
+
<div className={bodyCSS}>
|
29
|
+
<Body
|
30
|
+
color={dark ? 'lighter' : 'light'}
|
31
|
+
>
|
32
|
+
<span className="pb_legend_indicator_circle" />
|
33
|
+
<If condition={prefixText}>
|
34
|
+
<Title
|
35
|
+
dark={dark}
|
36
|
+
size={4}
|
37
|
+
tag="span"
|
38
|
+
text={` ${prefixText} `}
|
39
|
+
/>
|
40
|
+
</If>
|
41
|
+
{` ${text} `}
|
42
|
+
</Body>
|
43
|
+
</div>
|
44
|
+
)
|
45
|
+
}
|
46
|
+
|
47
|
+
export default Legend
|
@@ -0,0 +1,24 @@
|
|
1
|
+
@import "../tokens/colors";
|
2
|
+
@import "../pb_body/body";
|
3
|
+
|
4
|
+
@mixin pb_button($color: $primary) {
|
5
|
+
display: inline-block;
|
6
|
+
width: 10px;
|
7
|
+
height: 10px;
|
8
|
+
border-radius: 5px;
|
9
|
+
background: $color;
|
10
|
+
}
|
11
|
+
|
12
|
+
@mixin indicator-colors($colors-list) {
|
13
|
+
@each $name, $color in $colors-list {
|
14
|
+
&[class*=#{$name}] {
|
15
|
+
.pb_legend_indicator_circle {
|
16
|
+
@include pb_button($color);
|
17
|
+
}
|
18
|
+
}
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
[class^=pb_legend_kit] {
|
23
|
+
@include indicator-colors($data_colors)
|
24
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Legend } from '../../'
|
3
|
+
|
4
|
+
const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']
|
5
|
+
|
6
|
+
const LegendDark = () => (
|
7
|
+
<div>
|
8
|
+
{
|
9
|
+
products.map((product, i) => (
|
10
|
+
<Legend
|
11
|
+
color={`data_${i + 1}`}
|
12
|
+
dark
|
13
|
+
key={`legend_${i + 1}`}
|
14
|
+
text={product}
|
15
|
+
/>
|
16
|
+
))
|
17
|
+
}
|
18
|
+
</div>
|
19
|
+
)
|
20
|
+
|
21
|
+
export default LegendDark
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("legend", props: { dark: true, color: "data_3", prefix_text: "10", text: "Windows" }) %>
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Legend } from '../../'
|
3
|
+
|
4
|
+
const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']
|
5
|
+
|
6
|
+
const LegendDefault = () => (
|
7
|
+
<div>
|
8
|
+
{
|
9
|
+
products.map((product, i) => (
|
10
|
+
<Legend
|
11
|
+
color={`data_${i + 1}`}
|
12
|
+
key={`legend_${i + 1}`}
|
13
|
+
text={product}
|
14
|
+
/>
|
15
|
+
))
|
16
|
+
}
|
17
|
+
</div>
|
18
|
+
)
|
19
|
+
|
20
|
+
export default LegendDefault
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("legend", props: { color: "data_3", prefix_text: "10", text: "Windows" }) %>
|
@@ -0,0 +1,15 @@
|
|
1
|
+
examples:
|
2
|
+
|
3
|
+
rails:
|
4
|
+
- legend_default: Default
|
5
|
+
- legend_prefix: With Prefix Text
|
6
|
+
- legend_dark: Dark Mode
|
7
|
+
- legend_dark_prefix: Dark Mode with Prefix Text
|
8
|
+
|
9
|
+
|
10
|
+
react:
|
11
|
+
- legend_default: Default
|
12
|
+
- legend_prefix: With Prefix Text
|
13
|
+
- legend_dark: Dark Mode
|
14
|
+
- legend_dark_prefix: Dark Mode with Prefix Text
|
15
|
+
|
@@ -0,0 +1,30 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbLegend
|
5
|
+
class Legend
|
6
|
+
include Playbook::Props
|
7
|
+
|
8
|
+
partial "pb_legend/legend"
|
9
|
+
|
10
|
+
prop :color, type: Playbook::Props::Enum,
|
11
|
+
values: (1..7).map { |n| "data_#{n}" },
|
12
|
+
default: "data_1"
|
13
|
+
|
14
|
+
prop :dark, type: Playbook::Props::Boolean,
|
15
|
+
default: false
|
16
|
+
|
17
|
+
prop :prefix_text
|
18
|
+
|
19
|
+
prop :text, required: true
|
20
|
+
|
21
|
+
def body_color
|
22
|
+
dark ? "lighter" : "light"
|
23
|
+
end
|
24
|
+
|
25
|
+
def classname
|
26
|
+
generate_classname("pb_legend_kit", color, dark ? "dark" : "light")
|
27
|
+
end
|
28
|
+
end
|
29
|
+
end
|
30
|
+
end
|
@@ -1,27 +1,21 @@
|
|
1
1
|
<%= pb_rails("radio", props: {
|
2
|
-
text: "Power"
|
3
|
-
name: "group 1",
|
4
|
-
value: "Power"
|
2
|
+
text: "Power"
|
5
3
|
}) do %>
|
6
|
-
<input type="radio"
|
4
|
+
<input type="radio" name="group 3" value="power" >
|
7
5
|
<% end %>
|
8
6
|
|
9
7
|
<br>
|
10
8
|
|
11
9
|
<%= pb_rails("radio", props: {
|
12
|
-
text: "Nitro"
|
13
|
-
name: "group 1",
|
14
|
-
value: "Power"
|
10
|
+
text: "Nitro"
|
15
11
|
}) do %>
|
16
|
-
<input type="radio"
|
12
|
+
<input type="radio" name="group 3" value="nitro" checked>
|
17
13
|
<% end %>
|
18
14
|
|
19
15
|
<br>
|
20
16
|
|
21
17
|
<%= pb_rails("radio", props: {
|
22
|
-
text: "Google"
|
23
|
-
name: "group 1",
|
24
|
-
value: "Google"
|
18
|
+
text: "Google"
|
25
19
|
}) do %>
|
26
|
-
<input type="radio"
|
20
|
+
<input type="radio"name="group 3" value="google">
|
27
21
|
<% end %>
|
@@ -9,7 +9,6 @@ const RadioCustom = () => {
|
|
9
9
|
label="Custom Power"
|
10
10
|
>
|
11
11
|
<input
|
12
|
-
defaultChecked
|
13
12
|
name="custom"
|
14
13
|
type="radio"
|
15
14
|
value="power"
|
@@ -21,6 +20,7 @@ const RadioCustom = () => {
|
|
21
20
|
label="Custom Nitro"
|
22
21
|
>
|
23
22
|
<input
|
23
|
+
checked
|
24
24
|
name="custom"
|
25
25
|
type="radio"
|
26
26
|
value="nitro"
|
@@ -16,6 +16,11 @@
|
|
16
16
|
&:disabled ~ .pb_select_kit_caret {
|
17
17
|
opacity: 0.5;
|
18
18
|
}
|
19
|
+
color: transparent !important;
|
20
|
+
text-shadow: 0 0 0 $text_lt_default !important;
|
21
|
+
}
|
22
|
+
option {
|
23
|
+
color: $text_lt_default;
|
19
24
|
}
|
20
25
|
.pb_select_kit_label {
|
21
26
|
margin-bottom: $space_xs;
|
@@ -33,6 +38,7 @@
|
|
33
38
|
color: $text_lt_default;
|
34
39
|
font-size: ($font_large + 3);
|
35
40
|
transform: translateY(-50%);
|
41
|
+
pointer-events: none;
|
36
42
|
}
|
37
43
|
&[class*=_dark] {
|
38
44
|
select {
|
@@ -103,8 +103,17 @@ $border_colors: (
|
|
103
103
|
);
|
104
104
|
|
105
105
|
// Shadow colors ----------------------
|
106
|
-
$shadow_light: rgba(
|
107
|
-
|
106
|
+
$shadow_light: rgba(#3C6AAC, $opacity_2);
|
107
|
+
|
108
|
+
/*
|
109
|
+
DEPRECATED - DO NOT USE!
|
110
|
+
This targed to be removed in release v4.0.0.
|
111
|
+
[https://github.com/powerhome/playbook/issues/550]
|
112
|
+
*/
|
113
|
+
$shadow_dark: rgba(#3C6AAC, $opacity_2);
|
114
|
+
|
115
|
+
/* END DEPRECATION */
|
116
|
+
|
108
117
|
$shadow_colors: (
|
109
118
|
shadow_light: $shadow_light,
|
110
119
|
shadow_dark: $shadow_dark
|
@@ -2,11 +2,19 @@
|
|
2
2
|
@import "opacity";
|
3
3
|
|
4
4
|
$shadow_none: 0 0 0 0 transparent;
|
5
|
+
|
6
|
+
/*
|
7
|
+
DEPRECATED - DO NOT USE!
|
8
|
+
This targed to be removed in release v4.0.0.
|
9
|
+
[https://github.com/powerhome/playbook/issues/550]
|
10
|
+
*/
|
5
11
|
$shadow_shallow: 0 1px 1px 0 $shadow_light;
|
6
12
|
$shadow_default: 0 1px 5px 0 $shadow_light;
|
7
|
-
|
8
|
-
|
9
|
-
$
|
13
|
+
/* END DEPRECATED */
|
14
|
+
|
15
|
+
$shadow_deep: 0 4px 10px 0 rgba($shadow_light, 0.16);
|
16
|
+
$shadow_deeper: 0 12px 28px 0 rgba($shadow_light, 0.18);
|
17
|
+
$shadow_deepest: 0 30px 38px 4px $shadow_light, 0 2px 14px 4px rgba($shadow_light, 0.1);
|
10
18
|
$box_shadows: (
|
11
19
|
shadow_none: $shadow_none,
|
12
20
|
shadow_shallow: $shadow_shallow,
|
@@ -74,8 +74,7 @@ br
|
|
74
74
|
// Shadow --------------------------
|
75
75
|
= render :partial => "playbook/pages/utilities/pb_doc_color",
|
76
76
|
locals:{ title: "Shadow",
|
77
|
-
colors: [{name: "Shadow Light", variable: "shadow_light"}
|
78
|
-
{name: "Shadow Dark", variable: "shadow_dark", dark: true}]}
|
77
|
+
colors: [{name: "Shadow Light", variable: "shadow_light"}]}
|
79
78
|
|
80
79
|
// Products ------------------------
|
81
80
|
= render :partial => "playbook/pages/utilities/pb_doc_color",
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 3.
|
4
|
+
version: 3.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2020-01-
|
12
|
+
date: 2020-01-09 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -426,6 +426,7 @@ files:
|
|
426
426
|
- app/pb_kits/playbook/kits/pb_label_pill.js
|
427
427
|
- app/pb_kits/playbook/kits/pb_label_value.js
|
428
428
|
- app/pb_kits/playbook/kits/pb_layout.js
|
429
|
+
- app/pb_kits/playbook/kits/pb_legend.js
|
429
430
|
- app/pb_kits/playbook/kits/pb_line_graph.js
|
430
431
|
- app/pb_kits/playbook/kits/pb_list.js
|
431
432
|
- app/pb_kits/playbook/kits/pb_loading_inline.js
|
@@ -820,6 +821,20 @@ files:
|
|
820
821
|
- app/pb_kits/playbook/pb_layout/docs/index.js
|
821
822
|
- app/pb_kits/playbook/pb_layout/layout.rb
|
822
823
|
- app/pb_kits/playbook/pb_layout/sidebar.rb
|
824
|
+
- app/pb_kits/playbook/pb_legend/_legend.html.erb
|
825
|
+
- app/pb_kits/playbook/pb_legend/_legend.jsx
|
826
|
+
- app/pb_kits/playbook/pb_legend/_legend.scss
|
827
|
+
- app/pb_kits/playbook/pb_legend/docs/_legend_dark.html.erb
|
828
|
+
- app/pb_kits/playbook/pb_legend/docs/_legend_dark.jsx
|
829
|
+
- app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.html.erb
|
830
|
+
- app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.jsx
|
831
|
+
- app/pb_kits/playbook/pb_legend/docs/_legend_default.html.erb
|
832
|
+
- app/pb_kits/playbook/pb_legend/docs/_legend_default.jsx
|
833
|
+
- app/pb_kits/playbook/pb_legend/docs/_legend_prefix.html.erb
|
834
|
+
- app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx
|
835
|
+
- app/pb_kits/playbook/pb_legend/docs/example.yml
|
836
|
+
- app/pb_kits/playbook/pb_legend/docs/index.js
|
837
|
+
- app/pb_kits/playbook/pb_legend/legend.rb
|
823
838
|
- app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb
|
824
839
|
- app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
|
825
840
|
- app/pb_kits/playbook/pb_line_graph/_line_graph.scss
|