playbook_ui 5.3.0 → 5.4.0

Sign up to get free protection for your applications and to get access to all the features.
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