playbook_ui_docs 14.17.0.pre.alpha.alphaforaudiences7167 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +36 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/dist/playbook-doc.js +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: af5e37118bfaa250a35fdaeef4817a90fb42db96d8debc605b8364a1e41ab4ca
|
|
4
|
+
data.tar.gz: 3eecd1e3420428880fa7bf6b3e11dc0586f4f2ac4927cb48a9e6d2de40928572
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1a04137b86fecb5b9bbcd11631b75169f0e9504c898fc6fa2d40826f585fcbe097203bb7adb882173991e63db1f40e6fb569ad5692220d11c522bceed46b977f
|
|
7
|
+
data.tar.gz: fb11a5ffe5893efa559fea19d526e96f175525e130f06fec55c3216359faa8f7add8701f07f776d0869364e330004b412c1742da50157143bc58c451040491c7
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Background from "../../pb_background/_background"
|
|
3
|
+
import Flex from "../../pb_flex/_flex"
|
|
4
|
+
import FlexItem from "../../pb_flex/_flex_item"
|
|
5
|
+
import Title from "../../pb_title/_title"
|
|
6
|
+
|
|
7
|
+
const BackgroundOverlay = (props) => {
|
|
8
|
+
return (
|
|
9
|
+
<Background
|
|
10
|
+
alt="colorful background"
|
|
11
|
+
className="background lazyload"
|
|
12
|
+
imageOverlay="opacity_6"
|
|
13
|
+
imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
|
|
14
|
+
{...props}
|
|
15
|
+
backgroundColor="light"
|
|
16
|
+
>
|
|
17
|
+
<Flex
|
|
18
|
+
orientation="column"
|
|
19
|
+
vertical="center"
|
|
20
|
+
{...props}
|
|
21
|
+
>
|
|
22
|
+
<FlexItem>
|
|
23
|
+
<Title
|
|
24
|
+
dark
|
|
25
|
+
padding="lg"
|
|
26
|
+
size={1}
|
|
27
|
+
text="Background Kit Image"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
</FlexItem>
|
|
31
|
+
</Flex>
|
|
32
|
+
</Background>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export default BackgroundOverlay
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.
|
|
@@ -6,3 +6,4 @@ export { default as BackgroundStatus } from './_background_status.jsx'
|
|
|
6
6
|
export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
|
|
7
7
|
export { default as BackgroundCategory } from './_background_category.jsx'
|
|
8
8
|
export { default as BackgroundSize } from './_background_size.jsx'
|
|
9
|
+
export { default as BackgroundOverlay } from './_background_overlay.jsx'
|