playbook_ui 5.3.0 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -1
  3. data/app/pb_kits/playbook/pb_body/_body.html.erb +1 -0
  4. data/app/pb_kits/playbook/pb_body/_body.jsx +33 -24
  5. data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx +0 -2
  7. data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb +1 -0
  8. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +3 -7
  9. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +2 -1
  10. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +18 -5
  11. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx +17 -0
  12. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +1 -0
  13. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb +1 -0
  15. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +17 -1
  16. data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb +1 -1
  17. data/app/pb_kits/playbook/pb_nav/_item.jsx +20 -10
  18. data/lib/generators/kit/kit_generator.rb +6 -3
  19. data/lib/generators/kit/templates/kit_html.erb.tt +3 -2
  20. data/lib/generators/kit/templates/kit_jsx.erb.tt +38 -10
  21. data/lib/playbook/version.rb +1 -1
  22. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: bd87d19dffeb68dba4372b1282cf12fcb1cace3acda84f7119a902fc205e7e1f
4
- data.tar.gz: e5f41cf298f15483eb5299b27837c83cac6e74e265b446fe6ff819742ff18b48
3
+ metadata.gz: 55fa48f865b6b79cacae36a5e14f509a3cfefca7cb380e586657739f130d5e2d
4
+ data.tar.gz: d7ac2b958cc908d72c50f2ba27068f9d3ca8c4f4dd8caa158adeeba6af7fc46a
5
5
  SHA512:
6
- metadata.gz: e7a8e97e476695635a7ca42bbbd831a20b9ff5e48665a7246b723ef2eacdd418864ba2dcec08b602e7fa35362fccf15685e56d91371442a3149ae2eef6d30615
7
- data.tar.gz: 6d58ee0d87a24bdf4912e774c4f0ea33480be6007ba5ffd8cd6f2145bd4b27bbbf233a5288f691a3635f445944eccd0f4196c098cfd6e24e7396ed0580999ecc
6
+ metadata.gz: 95ed9a7e3a31996a636129fd43ae63c41ab31f7011044588116b364023b326f9eecf33b40aa2fa9ba81ca269b8b29ba5ef51de7d0dbca9bd2f34efeca03b1150
7
+ data.tar.gz: ca78aa387f3d479cd1c1e3ad81f2fc186cb182ab1353376f82baf321aa8afefb001207d1a0669e9bbc18647df210b8fbc48371eca53a6d1295bac6f0b6a351d4
data/app/pb_kits/playbook/_playbook.scss CHANGED
@@ -80,4 +80,4 @@
80
80
  @import 'pb_user_badge/user_badge';
81
81
  @import 'pb_time_stacked/time_stacked';
82
82
  @import 'pb_weekday_stacked/weekday_stacked';
83
- @import './utilities/spacing';
83
+ @import './utilities/spacing';
data/app/pb_kits/playbook/pb_body/_body.html.erb CHANGED
@@ -1,4 +1,5 @@
1
1
  <%= content_tag(object.tag,
2
+ aria: object.aria,
2
3
  id: object.id,
3
4
  data: object.data,
4
5
  class: object.classname) do %>
data/app/pb_kits/playbook/pb_body/_body.jsx CHANGED
@@ -2,50 +2,59 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
6
  import { Highlight } from '../'
6
7
  import { spacing } from '../utilities/spacing.js'
7
8
 
8
9
  type BodyProps = {
10
+ aria?: object,
9
11
  className?: String,
10
12
  children?: Array<React.ReactChild>,
11
- color: 'light' | 'lighter',
13
+ color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
12
14
  dark?: Boolean,
13
- status?: 'negative' | 'positive',
14
- tag: String,
15
- text?: String,
15
+ data?: object,
16
+ highlightedText?: Array<String>,
16
17
  highlighting?: Boolean,
17
- highlightedText?: Array<String>
18
- }
19
-
20
- const bodyCSS = ({
21
- color = '',
22
- dark = false,
23
- status = '',
24
-
25
- }: BodyProps) => {
26
- const colorStyle = color !== '' ? `_${color}` : ''
27
-
28
- const themeStyle = dark === true ? '_dark' : ''
29
-
30
- const statusStyle = status !== '' ? `_${status}` : ''
31
-
32
- return 'pb_body_kit' + colorStyle + themeStyle + statusStyle
18
+ id?: String,
19
+ status?: 'negative' | 'neutral' | 'positive',
20
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
21
+ text?: String,
33
22
  }
34
23
 
35
24
  const Body = (props: BodyProps) => {
36
25
  const {
26
+ aria = {},
37
27
  className,
38
28
  children,
39
- text,
40
- tag = 'div',
41
- highlightedText,
29
+ color = '',
30
+ dark = false,
31
+ data = {},
32
+ highlightedText = [],
42
33
  highlighting = false,
34
+ id,
35
+ status = '',
36
+ tag = 'div',
37
+ text,
43
38
  } = props
44
39
 
40
+ const ariaProps = buildAriaProps(aria)
41
+ const dataProps = buildDataProps(data)
42
+ const classes = classnames(
43
+ className,
44
+ buildCss('pb_body_kit', color, status, {
45
+ dark: dark,
46
+ }),
47
+ spacing(props)
48
+ )
45
49
  const Tag = `${tag}`
46
50
 
47
51
  return (
48
- <Tag className={classnames(bodyCSS(props), className, spacing(props))}>
52
+ <Tag
53
+ {...ariaProps}
54
+ {...dataProps}
55
+ className={classes}
56
+ id={id}
57
+ >
49
58
  <If condition={highlighting}>
50
59
  <Highlight highlightedText={highlightedText}>{text || children}</Highlight>
51
60
  <Else />
data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <%= pb_rails("body", props: {
2
2
  text: "I am a body kit",
3
- dark: true
3
+ dark: true,
4
4
  }) %>
5
5
 
6
6
  <%= pb_rails("body", props: {
data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx CHANGED
@@ -18,8 +18,6 @@ const BodyDark = () => {
18
18
  dark
19
19
  text="I am a body kit (Lighter)"
20
20
  />
21
- <br />
22
- <br />
23
21
  <Body
24
22
  dark
25
23
  status="negative"
data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb CHANGED
@@ -2,6 +2,7 @@
2
2
  text: "I am a body kit"
3
3
  }) %>
4
4
 
5
+
5
6
  <%= pb_rails("body", props: {
6
7
  text: "I am a body kit (Light)",
7
8
  color: "light"
data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx CHANGED
@@ -4,7 +4,9 @@ import { Body } from '../../'
4
4
  const BodyLight = () => {
5
5
  return (
6
6
  <div>
7
- <Body text="I am a body kit (Default)" />
7
+ <Body
8
+ text="I am a body kit (Default)"
9
+ />
8
10
  <Body
9
11
  color="light"
10
12
  text="I am a body kit (Light)"
@@ -13,8 +15,6 @@ const BodyLight = () => {
13
15
  color="lighter"
14
16
  text="I am a body kit (Lighter)"
15
17
  />
16
- <br />
17
- <br />
18
18
  <Body
19
19
  status="negative"
20
20
  text="I am a body kit (Status: negative)"
@@ -23,10 +23,6 @@ const BodyLight = () => {
23
23
  status="positive"
24
24
  text="I am a body kit (Status: positive)"
25
25
  />
26
- <Body
27
- status="positive"
28
- text="I am a body kit (Status: positive)"
29
- />
30
26
  </div>
31
27
  )
32
28
  }
data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb CHANGED
@@ -1,4 +1,5 @@
1
- <%= content_tag(:label, id: object.id,
1
+ <%= content_tag(:label, aria: object.aria,
2
+ id: object.id,
2
3
  data: object.data,
3
4
  class: object.classname) do %>
4
5
  <% if object.children %>
data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx CHANGED
@@ -3,13 +3,18 @@
3
3
  import React from 'react'
4
4
  import Body from '../pb_body/_body.jsx'
5
5
  import Icon from '../pb_icon/_icon.jsx'
6
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
7
  import classnames from 'classnames'
7
8
  import { spacing } from '../utilities/spacing.js'
8
9
 
9
10
  type CheckboxProps = {
11
+ aria?: object,
10
12
  checked?: Boolean,
13
+ className?: String,
11
14
  dark?: Boolean,
15
+ data?: object,
12
16
  error?: Boolean,
17
+ id?: String,
13
18
  name: String,
14
19
  text: String,
15
20
  value: String,
@@ -19,9 +24,13 @@ type CheckboxProps = {
19
24
 
20
25
  const Checkbox = (props: CheckboxProps) => {
21
26
  const {
27
+ aria = {},
22
28
  checked = false,
29
+ className,
23
30
  dark = false,
31
+ data = {},
24
32
  error = false,
33
+ id,
25
34
  name = '',
26
35
  text = '',
27
36
  value = '',
@@ -29,13 +38,17 @@ const Checkbox = (props: CheckboxProps) => {
29
38
  onChange = () => {},
30
39
  } = props
31
40
 
41
+ const dataProps = buildDataProps(data)
42
+ const ariaProps = buildAriaProps(aria)
43
+ const classes = classnames(buildCss('pb_checkbox_kit',
44
+ { dark: dark, checked: checked, error: error }), className, spacing(props))
45
+
32
46
  return (
33
47
  <label
34
- className={classnames('pb_checkbox_kit' +
35
- (dark === true ? '_dark' : '') +
36
- (error === true ? ' error' : ''), spacing(props))
37
-
38
- }
48
+ {...ariaProps}
49
+ {...dataProps}
50
+ className={classes}
51
+ id={id}
39
52
  >
40
53
  <If condition={children}>
41
54
  {children}
data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react'
2
+ import { Checkbox } from '../../'
3
+
4
+ const CheckboxChecked = () => {
5
+ return (
6
+ <div>
7
+ <Checkbox
8
+ checked
9
+ name="checkbox-name"
10
+ text="Checked Checkbox"
11
+ value="check-box value"
12
+ />
13
+ </div>
14
+ )
15
+ }
16
+
17
+ export default CheckboxChecked
data/app/pb_kits/playbook/pb_checkbox/docs/example.yml CHANGED
@@ -9,6 +9,7 @@ examples:
9
9
 
10
10
  react:
11
11
  - checkbox_default: Default
12
+ - checkbox_checked: Load as checked
12
13
  - checkbox_dark: Dark
13
14
  - checkbox_custom: Custom Checkbox
14
15
  - checkbox_error: Default w/ Error
data/app/pb_kits/playbook/pb_checkbox/docs/index.js CHANGED
@@ -3,3 +3,4 @@ export { default as CheckboxDark } from './_checkbox_dark.jsx'
3
3
  export { default as CheckboxCustom } from './_checkbox_custom.jsx'
4
4
  export { default as CheckboxError } from './_checkbox_error.jsx'
5
5
  export { default as CheckboxDarkError } from './_checkbox_dark_error.jsx'
6
+ export { default as CheckboxChecked } from './_checkbox_checked.jsx'
data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb CHANGED
@@ -1,4 +1,5 @@
1
1
  <%= content_tag(:div,
2
+ aria: object.aria,
2
3
  id: object.id,
3
4
  data: object.data,
4
5
  class: object.classname) do %>
data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
6
  import { Button, Icon } from '../'
6
7
 
7
8
  import type { Callback } from '../types'
@@ -13,8 +14,10 @@ import {
13
14
  import { spacing } from '../utilities/spacing.js'
14
15
 
15
16
  type CircleIconButtonProps = {
17
+ aria?: object,
16
18
  className?: String,
17
19
  dark?: Boolean,
20
+ data?: object,
18
21
  disabled?: Boolean,
19
22
  icon: String,
20
23
  id?: String,
@@ -27,9 +30,13 @@ type CircleIconButtonProps = {
27
30
 
28
31
  const CircleIconButton = (props: CircleIconButtonProps) => {
29
32
  const {
33
+ aria = {},
34
+ className,
30
35
  dark,
36
+ data = {},
31
37
  disabled,
32
38
  icon,
39
+ id,
33
40
  onClick = noop,
34
41
  type,
35
42
  link,
@@ -37,8 +44,17 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
37
44
  variant,
38
45
  } = props
39
46
 
47
+ const ariaProps = buildAriaProps(aria)
48
+ const dataProps = buildDataProps(data)
49
+ const classes = classnames(buildCss('pb_circle_icon_button_kit'), className, spacing(props))
50
+
40
51
  return (
41
- <div className={classnames('pb_circle_icon_button_kit', spacing(props))}>
52
+ <div
53
+ {...ariaProps}
54
+ {...dataProps}
55
+ className={classes}
56
+ id={id}
57
+ >
42
58
  <Button
43
59
  dark={dark}
44
60
  disabled={disabled}
data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb CHANGED
@@ -10,7 +10,7 @@ This an example<%= pb_rails("highlight") do%>Highlight Example<% end %>around.
10
10
  <br>
11
11
  <br>
12
12
  <%= pb_rails("title", props: {text: "Search",size: 4})%>
13
- </br>
13
+ <br>
14
14
  <%= pb_rails("body", props: {text: "hello helpers are great even highlighting this", highlighting: true, highlighted_text: ["hello","great"]})%>
15
15
 
16
16
  <br>
data/app/pb_kits/playbook/pb_nav/_item.jsx CHANGED
@@ -32,21 +32,31 @@ const NavItem = ({
32
32
  onClick={onClick}
33
33
  >
34
34
  <If condition={iconLeft}>
35
- <Icon
36
- className="pb_nav_list_item_icon_left"
37
- fixedWidth
38
- icon={iconLeft}
39
- />
35
+ <div
36
+ className="pb_nav_list_item_icon_section"
37
+ key={iconLeft}
38
+ >
39
+ <Icon
40
+ className="pb_nav_list_item_icon_left"
41
+ fixedWidth
42
+ icon={iconLeft}
43
+ />
44
+ </div>
40
45
  </If>
41
46
  <span className="pb_nav_list_item_text">
42
47
  {text || children}
43
48
  </span>
44
49
  <If condition={iconRight}>
45
- <Icon
46
- className="pb_nav_list_item_icon_right"
47
- fixedWidth
48
- icon={iconRight}
49
- />
50
+ <div
51
+ className="pb_nav_list_item_icon_section"
52
+ key={iconRight}
53
+ >
54
+ <Icon
55
+ className="pb_nav_list_item_icon_right"
56
+ fixedWidth
57
+ icon={iconRight}
58
+ />
59
+ </div>
50
60
  </If>
51
61
  </Tag>
52
62
  </li>
data/lib/generators/kit/kit_generator.rb CHANGED
@@ -13,10 +13,10 @@ class KitGenerator < Rails::Generators::NamedBase
13
13
  @kit_name_underscore = kit_name.parameterize.underscore
14
14
  @kit_name_pascal = kit_name.titleize.gsub(/\s+/, "")
15
15
 
16
- kit_props = options[:props].concat(%w[id:string classname:string data:object])
16
+ kit_props = options[:props].concat(%w[id:string classname:string data:object aria:object])
17
17
  @kit_props = kit_props.map { |hash| [hash.partition(":").first, hash.partition(":").last] }.to_h
18
18
  @kit_props = @kit_props.sort.to_h
19
- @unique_props = @kit_props.symbolize_keys.without(:id, :classname, :data)
19
+ @unique_props = @kit_props.symbolize_keys.without(:id, :classname, :data, :aria)
20
20
 
21
21
  @kit_class_init = []
22
22
  @kit_props.each do |key, _val|
@@ -48,7 +48,7 @@ class KitGenerator < Rails::Generators::NamedBase
48
48
  # Generate SCSS files ==============================
49
49
  template "kit_scss.erb", "#{full_kit_directory}/_#{@kit_name_underscore}.scss"
50
50
  open("app/pb_kits/playbook/_playbook.scss", "a") do |f|
51
- f.puts "@" + "import " + "\'" + "pb_#{@kit_name_underscore}/#{@kit_name_underscore}" + "\';"
51
+ f.puts "\n@" + "import " + "\'" + "pb_#{@kit_name_underscore}/#{@kit_name_underscore}" + "\';"
52
52
  end
53
53
  say_status "complete",
54
54
  "#{@kit_name_capitalize} kit stylesheet successfully created and imported.",
@@ -77,6 +77,9 @@ class KitGenerator < Rails::Generators::NamedBase
77
77
  append_to_file("app/pb_kits/playbook/packs/examples.js") do
78
78
  "import * as #{@kit_name_pascal} from 'pb_#{@kit_name_underscore}/docs'\nWebpackerReact.setup(#{@kit_name_pascal})\n"
79
79
  end
80
+ append_to_file("app/pb_kits/playbook/index.js") do
81
+ "\nexport #{@kit_name_pascal} from 'pb_#{@kit_name_underscore}/_#{@kit_name_underscore}.jsx'"
82
+ end
80
83
 
81
84
  say_status "complete",
82
85
  "#{@kit_name_capitalize} react kit successfully created.",
data/lib/generators/kit/templates/kit_html.erb.tt CHANGED
@@ -1,6 +1,7 @@
1
1
  <%%= content_tag(:div,
2
- id: object.id,
2
+ aria: object.aria,
3
+ class: object.classname,
3
4
  data: object.data,
4
- class: object.classname) do %>
5
+ id: object.id) do %>
5
6
  <span><%= @kit_name_uppercase %> CONTENT</span>
6
7
  <%% end %>
data/lib/generators/kit/templates/kit_jsx.erb.tt CHANGED
@@ -10,6 +10,7 @@ props_types = @kit_props.map do |key, val|
10
10
  prop_type = case val
11
11
  when "enum", "one_of" then "'option_1' | 'option_2'"
12
12
  when "boolean", "bool" then "Boolean"
13
+ when "object", "obj" then "object"
13
14
  else "String"
14
15
  end
15
16
 
@@ -17,24 +18,51 @@ props_types = @kit_props.map do |key, val|
17
18
  end
18
19
  puts props_types.inspect
19
20
 
20
- props_names = @kit_props.map { |key,| key == "classname" ? "className" : key.camelize(:lower) }
21
+ props_names = @kit_props.keys.map do |key|
22
+ case key
23
+ when "classname" || "className"
24
+ "className"
25
+ when "aria"
26
+ "aria = {}"
27
+ when "data"
28
+ "data = {}"
29
+ else
30
+ key
31
+ end
32
+ end
33
+
34
+ %>
21
35
 
22
- props_and_values = props_names.map { |prop| "<p>{`#{prop}: ${#{prop}}`}</p>" }
23
- -%>
24
36
  /* @flow */
25
37
 
26
38
  import React from 'react'
39
+ import classnames from 'classnames'
40
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
41
+ import { spacing } from '../utilities/spacing.js'
27
42
 
28
43
  type <%= type_name %> = {
29
44
  <%= break_lines.call(props_types) %>
30
45
  }
31
46
 
32
- const <%= @kit_name_pascal %> = ({
33
- <%= break_lines.call(props_names) %>
34
- }: <%= type_name %>) => (
35
- <div>
36
- <%= break_lines.call(props_and_values, 4, "") %>
37
- </div>
38
- )
47
+ const <%= @kit_name_pascal %> = (props: <%= type_name %>) => {
48
+ const {
49
+ <%= break_lines.call(props_names) %>
50
+ } = props
51
+
52
+ const ariaProps = buildAriaProps(aria)
53
+ const dataProps = buildDataProps(data)
54
+ const classes = classnames(buildCss('pb_<%= @kit_name_underscore %>'), className, spacing(props))
55
+
56
+ return (
57
+ <div
58
+ {...ariaProps}
59
+ {...dataProps}
60
+ className={classes}
61
+ id={id}
62
+ >
63
+ {className}
64
+ </div>
65
+ )
66
+ }
39
67
 
40
68
  export default <%= @kit_name_pascal %>
data/lib/playbook/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "5.3.0"
4
+ VERSION = "5.4.0"
5
5
  end
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: 5.3.0
4
+ version: 5.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-07-10 00:00:00.000000000 Z
12
+ date: 2020-07-16 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -574,6 +574,7 @@ files:
574
574
  - app/pb_kits/playbook/pb_checkbox/_checkbox.scss
575
575
  - app/pb_kits/playbook/pb_checkbox/checkbox.rb
576
576
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.html.erb
577
+ - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx
577
578
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.html.erb
578
579
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx
579
580
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.html.erb