playbook_ui 14.17.0.pre.alpha.alphaforaudiences7167 → 14.17.0.pre.alpha.play1499backgroundkitoverlay7105

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d4e1505953fc9d8679af10f4517e1db1910b806f2540bcba412afbaca8eb912
-  data.tar.gz: e1ec597e443b273d2037e5e0a572a9ca8f52ce25fb3754ccbc24edebd969377b
+  metadata.gz: b38daf6aad351a9d3b57169619dbba3749175bb2e2aae4f92aeb1368d8cd6cd5
+  data.tar.gz: 6718570cbc87905c88c57df0f1878cabd011e6ddac73d4c522c9ed88f08e537a
 SHA512:
-  metadata.gz: c5e5f58405349fa05f6942b377efee9d7c845c74dfbbe1009fe28e9c50459871f1dcc0e23f9a4bc2e190493ef648fce14e3b06bd0e697fa8a07114c95068c219
-  data.tar.gz: 84723e76ae32724c3926bf9ac0a7b9b048ae640635f982ca9126ae99fdbd97528215d7c7dd563e739d9a3718787a98f31ce31729a725080466de72ffb50cbf61
+  metadata.gz: 8f1df4e4bcd4f2f0dac7285d99a80bd63c0b139db5256d2c8fe7754f78a573a811fa17fd3d8203eff2de08c576070c862add9cf92a3869a63bc178e87abd3a98
+  data.tar.gz: 2a0df11f026f0afe56e42a873105cd71756ea23d7e6bedec727954db2ff20fe7781142226f2415fe1f5d21d38a4c4e1c8fe286bf4a888e2d1f8089a7ba9ac2c7

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -55,4 +55,30 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
       transition: 700ms ease-in;
     }
   }
+
+  &.imageoverlay {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      background-color: inherit;
+    }
+
+    * {
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  @each $key, $value in $opacity {
+    &.imageoverlay[imageoverlay="#{$key}"]::before {
+      opacity: $value;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -25,6 +25,7 @@ type BackgroundProps = {
   backgroundPosition?: ResponsiveProp<string> | string,
   backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   imageUrl?: ResponsiveProp<string> | string,
+  imageOverlay?: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   customColor?: string,
@@ -86,8 +87,9 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     imageUrl = '',
     tag = 'div',
     transition = '',
+    imageOverlay,
   } = props
-  
+
   const [responsiveProps, setResponsiveProps] = useState({
     backgroundSize: getResponsiveValue(backgroundSize),
     backgroundPosition: getResponsiveValue(backgroundPosition),
@@ -132,7 +134,8 @@ const Background = (props: BackgroundProps): React.ReactElement => {
       [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
       [`pb_background_custom_color`]: !!customColor,
     },
-    className
+    className,
+    imageOverlay ? "imageoverlay" : ""
   );
 
   const backgroundStyle = {
@@ -155,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  
+
   return (
     <Tag
         {...ariaProps}
@@ -164,11 +167,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
         alt={alt}
         className={classes}
         id={id}
+        imageOverlay={imageOverlay}
         style={combinedStyles}
     >
       {children}
     </Tag>
-  
+
   )
 }
 

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import Background from "../../pb_background/_background"
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Title from "../../pb_title/_title"
+
+const BackgroundOverlay = (props) => {
+  return (
+    <Background
+        alt="colorful background"
+        className="background lazyload"
+        imageOverlay="opacity_6"
+        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+        {...props}
+        backgroundColor="light"
+      >
+        <Flex
+            orientation="column"
+            vertical="center"
+            {...props}
+        >
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+                {...props}
+            />
+          </FlexItem>
+        </Flex>
+      </Background>
+  )
+}
+
+export default BackgroundOverlay

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md

@@ -0,0 +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`.

data/app/pb_kits/playbook/pb_background/docs/example.yml

@@ -11,6 +11,7 @@ examples:
   - background_size: Size
 
   react:
+  - background_overlay: Overlay
   - background_light: Light
   - background_white: White
   - background_gradient: Gradient

data/app/pb_kits/playbook/pb_background/docs/index.js

@@ -6,3 +6,4 @@ export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
+export { default as BackgroundOverlay } from './_background_overlay.jsx'