playbook_ui 10.26.0.pre.rc1 → 10.27.0.pre.lazysizes1
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/pb_background/{_background.jsx → _background.tsx} +20 -13
- data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_card/{_card.jsx → _card.tsx} +24 -22
- data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_selected.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/{_flex.jsx → _flex.tsx} +5 -5
- data/app/pb_kits/playbook/pb_highlight/_highlight.tsx +1 -1
- data/app/pb_kits/playbook/pb_image/_image.scss +9 -4
- data/app/pb_kits/playbook/pb_image/_image.tsx +14 -10
- data/app/pb_kits/playbook/pb_user/{_user.jsx → _user.tsx} +20 -24
- data/app/pb_kits/playbook/playbook-rails.js +1 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +2 -1
- data/app/pb_kits/playbook/utilities/_align_content.scss +10 -29
- data/app/pb_kits/playbook/utilities/_align_items.scss +11 -35
- data/app/pb_kits/playbook/utilities/_align_self.scss +10 -29
- data/app/pb_kits/playbook/utilities/_flex.scss +19 -14
- data/app/pb_kits/playbook/utilities/_flex_direction.scss +7 -18
- data/app/pb_kits/playbook/utilities/_flex_grow.scss +5 -8
- data/app/pb_kits/playbook/utilities/_flex_shrink.scss +5 -8
- data/app/pb_kits/playbook/utilities/_flex_wrap.scss +6 -13
- data/app/pb_kits/playbook/utilities/_justify_content.scss +10 -23
- data/app/pb_kits/playbook/utilities/_justify_self.scss +9 -19
- data/app/pb_kits/playbook/utilities/_mixins.scss +26 -0
- data/app/pb_kits/playbook/utilities/_order.scss +17 -55
- data/app/pb_kits/playbook/utilities/globalProps.ts +125 -111
- data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js +37 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js +36 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js +37 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js +38 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js +64 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js +37 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js +35 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js +35 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js +37 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js +37 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js +37 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/order.test.js +35 -0
- data/app/pb_kits/playbook/utilities/test-utils.js +2 -0
- data/app/pb_kits/playbook/utilities/text.ts +22 -0
- data/lib/playbook/align_content.rb +11 -3
- data/lib/playbook/align_items.rb +10 -2
- data/lib/playbook/align_self.rb +9 -1
- data/lib/playbook/display.rb +1 -3
- data/lib/playbook/flex.rb +9 -1
- data/lib/playbook/flex_direction.rb +10 -2
- data/lib/playbook/flex_grow.rb +9 -1
- data/lib/playbook/flex_shrink.rb +9 -1
- data/lib/playbook/flex_wrap.rb +10 -2
- data/lib/playbook/justify_content.rb +10 -2
- data/lib/playbook/justify_self.rb +9 -1
- data/lib/playbook/order.rb +10 -2
- data/lib/playbook/pb_kit_helper.rb +6 -1
- data/lib/playbook/version.rb +2 -2
- metadata +22 -9
- data/app/pb_kits/playbook/utilities/text.js +0 -15
@@ -0,0 +1,38 @@
|
|
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
|
+
// %w[block inline_block inline flex inline_flex none]
|
11
|
+
test('Global Props: returns proper class name', () => {
|
12
|
+
const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none"]
|
13
|
+
for(let x = 0, y = propValues.length; x < y; ++x) {
|
14
|
+
const testId = `${testSubject}-${propValues[x]}`
|
15
|
+
render(
|
16
|
+
<Body
|
17
|
+
data={{ testid: testId }}
|
18
|
+
display={`${propValues[x]}`}
|
19
|
+
text="Hi"
|
20
|
+
/>
|
21
|
+
)
|
22
|
+
const kit = screen.getByTestId(testId)
|
23
|
+
expect(kit).toHaveClass(`display_${camelToSnakeCase(propValues[x])}`)
|
24
|
+
|
25
|
+
SCREEN_SIZES.forEach((size) => {
|
26
|
+
const testId = `${testSubject}-${propValues[x]}-${size}`
|
27
|
+
render(
|
28
|
+
<Body
|
29
|
+
data={{ testid: testId }}
|
30
|
+
display={{ [size]: propValues[x] }}
|
31
|
+
text="Hi"
|
32
|
+
/>
|
33
|
+
)
|
34
|
+
const kit = screen.getByTestId(testId)
|
35
|
+
expect(kit).toHaveClass(`display_${size}_${camelToSnakeCase(propValues[x])}`)
|
36
|
+
})
|
37
|
+
}
|
38
|
+
})
|
@@ -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
|
+
})
|
@@ -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
|
+
})
|
@@ -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
|
+
})
|
@@ -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
|
+
})
|
@@ -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
|
+
})
|
@@ -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
|
+
})
|
@@ -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
|
+
})
|
@@ -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
|
+
})
|
@@ -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} />)
|
@@ -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
|
+
}
|
@@ -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
|
-
|
15
|
-
|
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
|
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
|
-
|
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[
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
{
|
@@ -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
|
-
|
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
|
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
|
-
|
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
|
-
|
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
|
-
|
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
|
34
|
+
%w[wrap nowrap wrapReverse]
|
27
35
|
end
|
28
36
|
end
|
29
37
|
end
|