playbook_ui 10.26.0.pre.rc1 → 10.26.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_background/{_background.jsx → _background.tsx} +20 -13
  4. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb +1 -0
  6. data/app/pb_kits/playbook/pb_card/{_card.jsx → _card.tsx} +24 -22
  7. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx +1 -1
  10. data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_card/docs/_card_selected.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_flex/{_flex.jsx → _flex.tsx} +5 -5
  13. data/app/pb_kits/playbook/pb_highlight/_highlight.tsx +1 -1
  14. data/app/pb_kits/playbook/pb_user/{_user.jsx → _user.tsx} +20 -24
  15. data/app/pb_kits/playbook/tokens/_colors.scss +2 -1
  16. data/app/pb_kits/playbook/utilities/_align_content.scss +10 -29
  17. data/app/pb_kits/playbook/utilities/_align_items.scss +11 -35
  18. data/app/pb_kits/playbook/utilities/_align_self.scss +10 -29
  19. data/app/pb_kits/playbook/utilities/_flex.scss +19 -14
  20. data/app/pb_kits/playbook/utilities/_flex_direction.scss +7 -18
  21. data/app/pb_kits/playbook/utilities/_flex_grow.scss +5 -8
  22. data/app/pb_kits/playbook/utilities/_flex_shrink.scss +5 -8
  23. data/app/pb_kits/playbook/utilities/_flex_wrap.scss +6 -13
  24. data/app/pb_kits/playbook/utilities/_justify_content.scss +10 -23
  25. data/app/pb_kits/playbook/utilities/_justify_self.scss +9 -19
  26. data/app/pb_kits/playbook/utilities/_mixins.scss +26 -0
  27. data/app/pb_kits/playbook/utilities/_order.scss +17 -55
  28. data/app/pb_kits/playbook/utilities/globalProps.ts +125 -111
  29. data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js +37 -0
  30. data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js +36 -0
  31. data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js +37 -0
  32. data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js +38 -0
  33. data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js +64 -0
  34. data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js +37 -0
  35. data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js +35 -0
  36. data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js +35 -0
  37. data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js +37 -0
  38. data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js +37 -0
  39. data/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js +37 -0
  40. data/app/pb_kits/playbook/utilities/test/globalProps/order.test.js +35 -0
  41. data/app/pb_kits/playbook/utilities/test-utils.js +2 -0
  42. data/app/pb_kits/playbook/utilities/text.ts +22 -0
  43. data/dist/reset.css +1 -60
  44. data/lib/playbook/align_content.rb +11 -3
  45. data/lib/playbook/align_items.rb +10 -2
  46. data/lib/playbook/align_self.rb +9 -1
  47. data/lib/playbook/display.rb +1 -3
  48. data/lib/playbook/flex.rb +9 -1
  49. data/lib/playbook/flex_direction.rb +10 -2
  50. data/lib/playbook/flex_grow.rb +9 -1
  51. data/lib/playbook/flex_shrink.rb +9 -1
  52. data/lib/playbook/flex_wrap.rb +10 -2
  53. data/lib/playbook/justify_content.rb +10 -2
  54. data/lib/playbook/justify_self.rb +9 -1
  55. data/lib/playbook/order.rb +10 -2
  56. data/lib/playbook/version.rb +1 -1
  57. metadata +22 -9
  58. data/app/pb_kits/playbook/utilities/text.js +0 -15
data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js ADDED
@@ -0,0 +1,64 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../../test-utils'
3
+
4
+ import Body from '../../../pb_body/_body'
5
+ import { SCREEN_SIZES } from '../../test-utils'
6
+
7
+ const testSubject = 'body'
8
+
9
+ test('Global Props: Returns ordinal suffixed class name', () => {
10
+ for(let x = 0, y = 13; x < y; ++x) {
11
+ const testId = `${testSubject}-${x}`
12
+ render(
13
+ <Body
14
+ data={{ testid: testId }}
15
+ flex={`${x}`}
16
+ text="Hi"
17
+ />
18
+ )
19
+ const kit = screen.getByTestId(testId)
20
+ expect(kit).toHaveClass(`flex_${x}`)
21
+
22
+ SCREEN_SIZES.forEach((size) => {
23
+ const testId = `${testSubject}-${x}-${size}`
24
+ render(
25
+ <Body
26
+ data={{ testid: testId }}
27
+ flex={{ [size]: x }}
28
+ text="Hi"
29
+ />
30
+ )
31
+ const kit = screen.getByTestId(testId)
32
+ expect(kit).toHaveClass(`flex_${size}_${x}`)
33
+ })
34
+ }
35
+ })
36
+
37
+ test('Global Props: returns proper class name', () => {
38
+ const propValues = ["auto", "initial", "none"]
39
+ for(let x = 0, y = propValues.length; x < y; ++x) {
40
+ const testId = `${testSubject}-${propValues[x]}`
41
+ render(
42
+ <Body
43
+ data={{ testid: testId }}
44
+ flex={`${propValues[x]}`}
45
+ text="Hi"
46
+ />
47
+ )
48
+ const kit = screen.getByTestId(testId)
49
+ expect(kit).toHaveClass(`flex_${propValues[x]}`)
50
+
51
+ SCREEN_SIZES.forEach((size) => {
52
+ const testId = `${testSubject}-${propValues[x]}-${size}`
53
+ render(
54
+ <Body
55
+ data={{ testid: testId }}
56
+ flex={{ [size]: propValues[x] }}
57
+ text="Hi"
58
+ />
59
+ )
60
+ const kit = screen.getByTestId(testId)
61
+ expect(kit).toHaveClass(`flex_${size}_${propValues[x]}`)
62
+ })
63
+ }
64
+ })
data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js ADDED
@@ -0,0 +1,37 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../../test-utils'
3
+
4
+ import Body from '../../../pb_body/_body'
5
+ import { camelToSnakeCase } from '../../../utilities/text'
6
+ import { SCREEN_SIZES } from '../../test-utils'
7
+
8
+ const testSubject = 'body'
9
+
10
+ test('Global Props: returns proper class name', () => {
11
+ const propValues = ["row", "column", "columnReverse"]
12
+ for(let x = 0, y = propValues.length; x < y; ++x) {
13
+ const testId = `${testSubject}-${propValues[x]}`
14
+ render(
15
+ <Body
16
+ data={{ testid: testId }}
17
+ flexDirection={`${propValues[x]}`}
18
+ text="Hi"
19
+ />
20
+ )
21
+ const kit = screen.getByTestId(testId)
22
+ expect(kit).toHaveClass(`flex_direction_${camelToSnakeCase(propValues[x])}`)
23
+
24
+ SCREEN_SIZES.forEach((size) => {
25
+ const testId = `${testSubject}-${propValues[x]}-${size}`
26
+ render(
27
+ <Body
28
+ data={{ testid: testId }}
29
+ flexDirection={{ [size]: propValues[x] }}
30
+ text="Hi"
31
+ />
32
+ )
33
+ const kit = screen.getByTestId(testId)
34
+ expect(kit).toHaveClass(`flex_direction_${size}_${camelToSnakeCase(propValues[x])}`)
35
+ })
36
+ }
37
+ })
data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js ADDED
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../../test-utils'
3
+
4
+ import Body from '../../../pb_body/_body'
5
+ import { SCREEN_SIZES } from '../../test-utils'
6
+
7
+ const testSubject = 'body'
8
+
9
+ test('Global Props: Returns ordinal suffixed class name', () => {
10
+ for(let x = 0, y = 2; x < y; ++x) {
11
+ const testId = `${testSubject}-${x}`
12
+ render(
13
+ <Body
14
+ data={{ testid: testId }}
15
+ flexGrow={`${x}`}
16
+ text="Hi"
17
+ />
18
+ )
19
+ const kit = screen.getByTestId(testId)
20
+ expect(kit).toHaveClass(`flex_grow_${x}`)
21
+
22
+ SCREEN_SIZES.forEach((size) => {
23
+ const testId = `${testSubject}-${x}-${size}`
24
+ render(
25
+ <Body
26
+ data={{ testid: testId }}
27
+ flexGrow={{ [size]: x }}
28
+ text="Hi"
29
+ />
30
+ )
31
+ const kit = screen.getByTestId(testId)
32
+ expect(kit).toHaveClass(`flex_grow_${size}_${x}`)
33
+ })
34
+ }
35
+ })
data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js ADDED
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../../test-utils'
3
+
4
+ import Body from '../../../pb_body/_body'
5
+ import { SCREEN_SIZES } from '../../test-utils'
6
+
7
+ const testSubject = 'body'
8
+
9
+ test('Global Props: Returns ordinal suffixed class name', () => {
10
+ for(let x = 0, y = 2; x < y; ++x) {
11
+ const testId = `${testSubject}-${x}`
12
+ render(
13
+ <Body
14
+ data={{ testid: testId }}
15
+ flexShrink={`${x}`}
16
+ text="Hi"
17
+ />
18
+ )
19
+ const kit = screen.getByTestId(testId)
20
+ expect(kit).toHaveClass(`flex_shrink_${x}`)
21
+
22
+ SCREEN_SIZES.forEach((size) => {
23
+ const testId = `${testSubject}-${x}-${size}`
24
+ render(
25
+ <Body
26
+ data={{ testid: testId }}
27
+ flexShrink={{ [size]: x }}
28
+ text="Hi"
29
+ />
30
+ )
31
+ const kit = screen.getByTestId(testId)
32
+ expect(kit).toHaveClass(`flex_shrink_${size}_${x}`)
33
+ })
34
+ }
35
+ })
data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js ADDED
@@ -0,0 +1,37 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../../test-utils'
3
+
4
+ import Body from '../../../pb_body/_body'
5
+ import { camelToSnakeCase } from '../../../utilities/text'
6
+ import { SCREEN_SIZES } from '../../test-utils'
7
+
8
+ const testSubject = 'body'
9
+
10
+ test('Global Props: returns proper class name', () => {
11
+ const propValues = ["wrap", "nowrap", "wrapReverse"]
12
+ for(let x = 0, y = 3; x < y; ++x) {
13
+ const testId = `${testSubject}-${propValues[x]}`
14
+ render(
15
+ <Body
16
+ data={{ testid: testId }}
17
+ flexWrap={`${propValues[x]}`}
18
+ text="Hi"
19
+ />
20
+ )
21
+ const kit = screen.getByTestId(testId)
22
+ expect(kit).toHaveClass(`flex_wrap_${camelToSnakeCase(propValues[x])}`)
23
+
24
+ SCREEN_SIZES.forEach((size) => {
25
+ const testId = `${testSubject}-${propValues[x]}-${size}`
26
+ render(
27
+ <Body
28
+ data={{ testid: testId }}
29
+ flexWrap={{ [size]: propValues[x] }}
30
+ text="Hi"
31
+ />
32
+ )
33
+ const kit = screen.getByTestId(testId)
34
+ expect(kit).toHaveClass(`flex_wrap_${size}_${camelToSnakeCase(propValues[x])}`)
35
+ })
36
+ }
37
+ })
data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js ADDED
@@ -0,0 +1,37 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../../test-utils'
3
+
4
+ import Body from '../../../pb_body/_body'
5
+ import { camelToSnakeCase } from '../../text'
6
+ import { SCREEN_SIZES } from '../../test-utils'
7
+
8
+ const testSubject = 'body'
9
+
10
+ test('Global Props: returns proper class name', () => {
11
+ const propValues = ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
12
+ for(let x = 0, y = propValues.length; x < y; ++x) {
13
+ const testId = `${testSubject}-${propValues[x]}`
14
+ render(
15
+ <Body
16
+ data={{ testid: testId }}
17
+ justifyContent={`${propValues[x]}`}
18
+ text="Hi"
19
+ />
20
+ )
21
+ const kit = screen.getByTestId(testId)
22
+ expect(kit).toHaveClass(`justify_content_${camelToSnakeCase(propValues[x])}`)
23
+
24
+ SCREEN_SIZES.forEach((size) => {
25
+ const testId = `${testSubject}-${propValues[x]}-${size}`
26
+ render(
27
+ <Body
28
+ data={{ testid: testId }}
29
+ justifyContent={{ [size]: propValues[x] }}
30
+ text="Hi"
31
+ />
32
+ )
33
+ const kit = screen.getByTestId(testId)
34
+ expect(kit).toHaveClass(`justify_content_${size}_${camelToSnakeCase(propValues[x])}`)
35
+ })
36
+ }
37
+ })
data/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js ADDED
@@ -0,0 +1,37 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../../test-utils'
3
+
4
+ import Body from '../../../pb_body/_body'
5
+ import { camelToSnakeCase } from '../../text'
6
+ import { SCREEN_SIZES } from '../../test-utils'
7
+
8
+ const testSubject = 'body'
9
+
10
+ test('Global Props: returns proper class name', () => {
11
+ const propValues = ["start", "center", "end", "auto", "stretch"]
12
+ for(let x = 0, y = propValues.length; x < y; ++x) {
13
+ const testId = `${testSubject}-${propValues[x]}`
14
+ render(
15
+ <Body
16
+ data={{ testid: testId }}
17
+ justifySelf={`${propValues[x]}`}
18
+ text="Hi"
19
+ />
20
+ )
21
+ const kit = screen.getByTestId(testId)
22
+ expect(kit).toHaveClass(`justify_self_${camelToSnakeCase(propValues[x])}`)
23
+
24
+ SCREEN_SIZES.forEach((size) => {
25
+ const testId = `${testSubject}-${propValues[x]}-${size}`
26
+ render(
27
+ <Body
28
+ data={{ testid: testId }}
29
+ justifySelf={{ [size]: propValues[x] }}
30
+ text="Hi"
31
+ />
32
+ )
33
+ const kit = screen.getByTestId(testId)
34
+ expect(kit).toHaveClass(`justify_self_${size}_${camelToSnakeCase(propValues[x])}`)
35
+ })
36
+ }
37
+ })
data/app/pb_kits/playbook/utilities/test/globalProps/order.test.js ADDED
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../../test-utils'
3
+
4
+ import Body from '../../../pb_body/_body'
5
+ import { SCREEN_SIZES } from '../../test-utils'
6
+
7
+ const testSubject = 'body'
8
+
9
+ test('Global Props: Returns ordinal suffixed class name', () => {
10
+ for(let x = 1, y = 13; x < y; ++x) {
11
+ const testId = `${testSubject}-${x}`
12
+ render(
13
+ <Body
14
+ data={{ testid: testId }}
15
+ order={`${x}`}
16
+ text="Hi"
17
+ />
18
+ )
19
+ const kit = screen.getByTestId(testId)
20
+ expect(kit).toHaveClass(`flex_order_${x}`)
21
+
22
+ SCREEN_SIZES.forEach((size) => {
23
+ const testId = `${testSubject}-${x}-${size}`
24
+ render(
25
+ <Body
26
+ data={{ testid: testId }}
27
+ order={{ [size]: x }}
28
+ text="Hi"
29
+ />
30
+ )
31
+ const kit = screen.getByTestId(testId)
32
+ expect(kit).toHaveClass(`flex_order_${size}_${x}`)
33
+ })
34
+ }
35
+ })
data/app/pb_kits/playbook/utilities/test-utils.js CHANGED
@@ -27,6 +27,8 @@ const customRender = (ui, options) =>
27
27
  export * from '@testing-library/react'
28
28
  export { customRender as render }
29
29
 
30
+ export const SCREEN_SIZES = ["xs", "sm", "md", "lg", "xl"]
31
+
30
32
  export const renderKit = (Kit, props = {}, newProps = {}) => {
31
33
  const kitProps = { ...props, ...newProps }
32
34
  render(<Kit {...kitProps} />)
data/app/pb_kits/playbook/utilities/text.ts ADDED
@@ -0,0 +1,22 @@
1
+ import { filter, isEmpty } from 'lodash'
2
+
3
+ const titleizedWord = (word: string): string => (
4
+ word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
5
+ )
6
+
7
+ export const titleize = (sentence: string): string => (
8
+ isEmpty(sentence) ? sentence : sentence.split(' ').map(titleizedWord).join(' ')
9
+ )
10
+
11
+ const notEmpty = (value: string | Record<string, unknown>): boolean => !isEmpty(value)
12
+
13
+ export const joinPresent = (array: [], separator: string): string => (
14
+ filter(array, notEmpty).join(separator)
15
+ )
16
+
17
+ export const camelToSnakeCase = (word: string): string => {
18
+ return word.split(/([A-Z])/g).map((w, i) => {
19
+ const prefix = i > 0 ? '_' : ''
20
+ return w === w.toLowerCase() ? w : prefix + w.toLowerCase()
21
+ }).join("")
22
+ }
data/dist/reset.css CHANGED
@@ -1,61 +1,2 @@
1
- /* CLEAN UP AND REMOVE */
2
- /* Headings */
3
- /* Standard Font Weights */
4
- /* Non_Standard Font Weights */
5
- /*=====================================
6
- Base colors should not be documented.
7
- Only document color use.
8
-
9
- Colors -----------------------------*/
10
- /* Specialty Gradient -----------------*/
11
- /* Interface colors -------------------*/
12
- /* Main colors ------------------------*/
13
- /*=====================================
14
-
15
- Background colors ------------------*/
16
- /* Card colors ------------------*/
17
- /* Active colors ----------------------*/
18
- /* Hover colors -----------------------*/
19
- /* Focus colors -----------------------*/
20
- /* Border colors ----------------------*/
21
- /* Shadow colors ----------------------*/
22
- /* Text colors ------------------------*/
23
- /* Data colors ------------------------*/
24
- /* Status colors ----------------------*/
25
- /* Link colors ------------------------*/
26
- /* Product colors ---------------------*/
27
- /* Category colors ---------------------*/
28
- * {
29
- box-sizing: border-box;
30
- margin: 0;
31
- padding: 0; }
32
- *:before, *:after {
33
- box-sizing: border-box; }
34
-
35
- html {
36
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
37
- height: 100vh;
38
- overflow-x: hidden; }
39
-
40
- body {
41
- font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
42
- font-size: 16px;
43
- line-height: 1.5;
44
- background-color: #F3F7FB;
45
- height: 100%;
46
- letter-spacing: 0;
47
- font-weight: 400;
48
- font-style: normal;
49
- text-rendering: optimizeLegibility;
50
- -moz-font-feature-settings: "liga" on;
51
- color: #242B42;
52
- margin: 0 !important;
53
- padding: 0 !important;
54
- box-sizing: border-box;
55
- min-height: 100vh;
56
- padding: 50px; }
57
-
58
- a {
59
- text-decoration: none;
60
- color: #0056CF; }
1
+ *{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
61
2
 
data/lib/playbook/align_content.rb CHANGED
@@ -6,15 +6,23 @@ module Playbook
6
6
  base.prop :align_content
7
7
  end
8
8
 
9
+ # rubocop:disable Style/IfInsideElse
9
10
  def align_content_props
10
11
  selected_props = align_content_options.keys.select { |sk| try(sk) }
11
12
  return nil unless selected_props.present?
12
13
 
13
14
  selected_props.map do |k|
14
- align_content_value = send(k)
15
- "align_content_#{align_content_value}" if align_content_values.include? align_content_value
15
+ align_content = send(k)
16
+ if align_content.is_a?(Hash)
17
+ align_content.map do |media_size, align_value|
18
+ "align_content_#{media_size}_#{align_value.underscore}" if align_content_values.include? align_value
19
+ end
20
+ else
21
+ "align_content_#{align_content.underscore}" if align_content_values.include? align_content
22
+ end
16
23
  end.compact.join(" ")
17
24
  end
25
+ # rubocop:enable Style/IfInsideElse
18
26
 
19
27
  def align_content_options
20
28
  {
@@ -23,7 +31,7 @@ module Playbook
23
31
  end
24
32
 
25
33
  def align_content_values
26
- %w[start end center space_between space_around space_evenly]
34
+ %w[start end center spaceBetween spaceAround spaceEvenly]
27
35
  end
28
36
  end
29
37
  end
data/lib/playbook/align_items.rb CHANGED
@@ -6,15 +6,23 @@ module Playbook
6
6
  base.prop :align_items
7
7
  end
8
8
 
9
+ # rubocop:disable Style/IfInsideElse
9
10
  def align_items_props
10
11
  selected_props = align_items_options.keys.select { |sk| try(sk) }
11
12
  return nil unless selected_props.present?
12
13
 
13
14
  selected_props.map do |k|
14
15
  align_items_value = send(k)
15
- "align_items_#{align_items_value}" if align_items_values.include? align_items_value
16
+ if align_items_value.is_a?(Hash)
17
+ align_items_value.map do |media_size, align_value|
18
+ "align_items_#{media_size}_#{align_value.underscore}" if align_items_values.include? align_value.to_s
19
+ end
20
+ else
21
+ "align_items_#{align_items_value.underscore}" if align_items_values.include? align_items_value
22
+ end
16
23
  end.compact.join(" ")
17
24
  end
25
+ # rubocop:enable Style/IfInsideElse
18
26
 
19
27
  def align_items_options
20
28
  {
@@ -23,7 +31,7 @@ module Playbook
23
31
  end
24
32
 
25
33
  def align_items_values
26
- %w[flex_start flex_end start end center baseline stretch]
34
+ %w[flexStart flexEnd start end center baseline stretch]
27
35
  end
28
36
  end
29
37
  end
data/lib/playbook/align_self.rb CHANGED
@@ -6,14 +6,22 @@ module Playbook
6
6
  base.prop :align_self
7
7
  end
8
8
 
9
+ # rubocop:disable Style/IfInsideElse
9
10
  def align_self_props
10
11
  selected_props = align_self_options.keys.select { |sk| try(sk) }
11
12
  return nil unless selected_props.present?
12
13
 
13
14
  selected_props.map do |k|
14
15
  align_self_value = send(k)
15
- "align_self_#{align_self_value}" if align_self_values.include? align_self_value
16
+ if align_self_value.is_a?(Hash)
17
+ align_self_value.map do |media_size, align_value|
18
+ "align_self_#{media_size}_#{align_value}" if align_self_values.include? align_value
19
+ end
20
+ else
21
+ "align_self_#{align_self_value}" if align_self_values.include? align_self_value
22
+ end
16
23
  end.compact.join(" ")
24
+ # rubocop:enable Style/IfInsideElse
17
25
  end
18
26
 
19
27
  def align_self_options
data/lib/playbook/display.rb CHANGED
@@ -15,13 +15,11 @@ module Playbook
15
15
  display_value.each do |key, value|
16
16
  css += "display_#{key}_#{value} " if display_size_values.include?(key.to_s) && display_values.include?(value.to_s)
17
17
  end
18
- elsif display_value.is_a?(String)
18
+ else
19
19
  selected_props.each do |k|
20
20
  display_value = send(k)
21
21
  css += "display_#{display_value}" if display_values.include? display_value
22
22
  end
23
- else
24
- ""
25
23
  end
26
24
  css unless css.blank?
27
25
  end
data/lib/playbook/flex.rb CHANGED
@@ -6,15 +6,23 @@ module Playbook
6
6
  base.prop :flex
7
7
  end
8
8
 
9
+ # rubocop:disable Style/IfInsideElse
9
10
  def flex_props
10
11
  selected_props = flex_options.keys.select { |sk| try(sk) }
11
12
  return nil unless selected_props.present?
12
13
 
13
14
  selected_props.map do |k|
14
15
  flex_value = send(k)
15
- "flex_#{flex_value}" if flex_values.include? flex_value
16
+ if flex_value.is_a?(Hash)
17
+ flex_value.map do |media_size, value|
18
+ "flex_#{media_size}_#{value}" if flex_values.include? value.to_s
19
+ end
20
+ else
21
+ "flex_#{flex_value}" if flex_values.include? flex_value.to_s
22
+ end
16
23
  end.compact.join(" ")
17
24
  end
25
+ # rubocop:enable Style/IfInsideElse
18
26
 
19
27
  def flex_options
20
28
  {
data/lib/playbook/flex_direction.rb CHANGED
@@ -6,15 +6,23 @@ module Playbook
6
6
  base.prop :flex_direction
7
7
  end
8
8
 
9
+ # rubocop:disable Style/IfInsideElse
9
10
  def flex_direction_props
10
11
  selected_props = flex_direction_options.keys.select { |sk| try(sk) }
11
12
  return nil unless selected_props.present?
12
13
 
13
14
  selected_props.map do |k|
14
15
  flex_direction_value = send(k)
15
- "flex_direction_#{flex_direction_value}" if flex_direction_values.include? flex_direction_value
16
+ if flex_direction_value.is_a?(Hash)
17
+ flex_direction_value.map do |media_size, flex_value|
18
+ "flex_direction_#{media_size}_#{flex_value.underscore}" if flex_direction_values.include? flex_value
19
+ end
20
+ else
21
+ "flex_direction_#{flex_direction_value.underscore}" if flex_direction_values.include? flex_direction_value
22
+ end
16
23
  end.compact.join(" ")
17
24
  end
25
+ # rubocop:enable Style/IfInsideElse
18
26
 
19
27
  def flex_direction_options
20
28
  {
@@ -23,7 +31,7 @@ module Playbook
23
31
  end
24
32
 
25
33
  def flex_direction_values
26
- %w[row column row_reverse column_reverse]
34
+ %w[row column rowReverse columnReverse]
27
35
  end
28
36
  end
29
37
  end
data/lib/playbook/flex_grow.rb CHANGED
@@ -6,15 +6,23 @@ module Playbook
6
6
  base.prop :flex_grow
7
7
  end
8
8
 
9
+ # rubocop:disable Style/IfInsideElse
9
10
  def flex_grow_props
10
11
  selected_props = flex_grow_options.keys.select { |sk| try(sk) }
11
12
  return nil unless selected_props.present?
12
13
 
13
14
  selected_props.map do |k|
14
15
  flex_grow_value = send(k)
15
- "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value
16
+ if flex_grow_value.is_a?(Hash)
17
+ flex_grow_value.map do |media_size, grow_value|
18
+ "flex_grow_#{media_size}_#{grow_value}" if flex_grow_values.include? grow_value.to_s
19
+ end
20
+ else
21
+ "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value.to_s
22
+ end
16
23
  end.compact.join(" ")
17
24
  end
25
+ # rubocop:enable Style/IfInsideElse
18
26
 
19
27
  def flex_grow_options
20
28
  {
data/lib/playbook/flex_shrink.rb CHANGED
@@ -6,15 +6,23 @@ module Playbook
6
6
  base.prop :flex_shrink
7
7
  end
8
8
 
9
+ # rubocop:disable Style/IfInsideElse
9
10
  def flex_shrink_props
10
11
  selected_props = flex_shrink_options.keys.select { |sk| try(sk) }
11
12
  return nil unless selected_props.present?
12
13
 
13
14
  selected_props.map do |k|
14
15
  flex_shrink_value = send(k)
15
- "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value
16
+ if flex_shrink_value.is_a?(Hash)
17
+ flex_shrink_value.map do |media_size, shrink_value|
18
+ "flex_shrink_#{media_size}_#{shrink_value}" if flex_shrink_values.include? shrink_value.to_s
19
+ end
20
+ else
21
+ "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value.to_s
22
+ end
16
23
  end.compact.join(" ")
17
24
  end
25
+ # rubocop:enable Style/IfInsideElse
18
26
 
19
27
  def flex_shrink_options
20
28
  {
data/lib/playbook/flex_wrap.rb CHANGED
@@ -6,15 +6,23 @@ module Playbook
6
6
  base.prop :flex_wrap
7
7
  end
8
8
 
9
+ # rubocop:disable Style/IfInsideElse
9
10
  def flex_wrap_props
10
11
  selected_props = flex_wrap_options.keys.select { |sk| try(sk) }
11
12
  return nil unless selected_props.present?
12
13
 
13
14
  selected_props.map do |k|
14
15
  flex_wrap_value = send(k)
15
- "flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
16
+ if flex_wrap_value.is_a?(Hash)
17
+ flex_wrap_value.map do |media_size, wrap_value|
18
+ "flex_wrap_#{media_size}_#{wrap_value.underscore}" if flex_wrap_values.include? wrap_value
19
+ end
20
+ else
21
+ "flex_wrap_#{flex_wrap_value}" if flex_wrap_values.include? flex_wrap_value
22
+ end
16
23
  end.compact.join(" ")
17
24
  end
25
+ # rubocop:enable Style/IfInsideElse
18
26
 
19
27
  def flex_wrap_options
20
28
  {
@@ -23,7 +31,7 @@ module Playbook
23
31
  end
24
32
 
25
33
  def flex_wrap_values
26
- %w[wrap nowrap wrap_reverse]
34
+ %w[wrap nowrap wrapReverse]
27
35
  end
28
36
  end
29
37
  end