[YNGJ-574] Background Kit - Set Background Size

playbook/app/pb_kits/playbook/pb_background/_background.jsx

@@ -9,6 +9,8 @@ type BackgroundProps = {
   alt?: string,
   aria?: object,
   backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21',
+  backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
+  backgroundSize?: 'auto' | 'cover' | 'contain',
   children?: array<React.ReactNode> | React.ReactNode,
   className?: string,
   data?: object,
@@ -24,6 +26,8 @@ const Background = (props: BackgroundProps) => {
     alt = '',
     aria = {},
     backgroundColor = 'light',
+    backgroundRepeat = 'initial',
+    backgroundSize = 'cover',
     children,
     className,
     data = {},
@@ -38,9 +42,11 @@ const Background = (props: BackgroundProps) => {
 
   const backgroundStyle = {
     backgroundImage: `url(${imageUrl})`,
-    backgroundSize: 'cover',
+    backgroundRepeat: `${backgroundRepeat}`,
+    backgroundSize: `${backgroundSize}`,
   }
-  const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), `pb_background_color_${backgroundColor}`, className)
+
+  const classes = classnames(buildCss('pb_background_kit'), 'lazyload', transition, globalProps(props), `pb_background_color_${backgroundColor}`, className)
   const Tag = `${tag}`
 
   return (

playbook/app/pb_kits/playbook/pb_background/background.html.erb

@@ -4,7 +4,9 @@
       data: object.data,
       id: object.id,
       class: object.classname,
-      style: "background-image: url('#{object.image_url}');"
+      style: "background-image: url('#{object.image_url}');
+              background-repeat: #{object.background_repeat};
+              background-size: #{object.background_size};"
   ) do %>
     <%= content.presence %>
   <% end %>
@@ -13,7 +15,7 @@
       aria: object.aria,
       data: object.data,
       id: object.id,
-      class: object.classname
+      class: object.classname,
   ) do %>
     <%= content.presence %>
   <% end %>

playbook/app/pb_kits/playbook/pb_background/background.rb

@@ -6,6 +6,24 @@ class Background < Playbook::KitBase
       prop :background_color, type: Playbook::Props::Enum,
                               values: %w[gradient dark light white success warning error info neutral primary category_1 category_2 category_3 category_4 category_5 category_6 category_7 category_8 category_9 category_10 category_11 category_12 category_13 category_14 category_15 category_16 category_17 category_18 category_19 category_20 category_21],
                               default: "light"
+
+      prop :background_repeat, type: Playbook::Props::Enum,
+                               values: %w[
+                                 repeat
+                                 repeat-x
+                                 repeat-y
+                                 no-repeat
+                                 space
+                                 round
+                                 initial
+                                 inherit
+                               ],
+                               default: "initial"
+
+      prop :background_size, type: Playbook::Props::Enum,
+                             values: %w[contain cover auto],
+                             default: "cover"
+
       prop :image_url
 
       prop :tag, type: Playbook::Props::Enum,
@@ -23,7 +41,9 @@ def classname
     private
 
       def image_classname
-        image_url.present? ? "lazyload #{transition}" : "pb_background_color_#{background_color}"
+        background_class = "pb_background_color_#{background_color}"
+        background_class_lazy = image_url.present? ? " lazyload #{transition}" : ""
+        "#{background_class}#{background_class_lazy}"
       end
     end
   end

playbook/app/pb_kits/playbook/pb_background/background.test.js

@@ -20,3 +20,13 @@ test('backgroundColor = category_1', () => {
   const kit = renderKit(Background, props, { backgroundColor: 'category_1' })
   expect(kit).toHaveClass('pb_background_kit pb_background_color_category_1')
 })
+
+test('backgroundRepeat = repeat', () => {
+  const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundRepeat: 'repeat' })
+  expect(kit).toHaveStyle('background-repeat: repeat')
+})
+
+test('backgroundSize = auto', () => {
+  const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundSize: 'auto' })
+  expect(kit).toHaveStyle('background-size: auto')
+})

playbook/app/pb_kits/playbook/pb_background/docs/_background_size.html.erb

@@ -0,0 +1,5 @@
+ <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "auto", padding: "xl" }) %>
+ <br/>
+ <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "cover", padding: "xl" }) %>
+ <br/>
+ <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_repeat: "no-repeat", background_size: "contain", padding: "xl" }) %>

playbook/app/pb_kits/playbook/pb_background/docs/_background_size.jsx

@@ -0,0 +1,36 @@
+import React, { Fragment as F } from 'react'
+import { Background } from '../..'
+
+const BackgroundSize = (props) => (
+  <F>
+    <Background
+        alt="colorful background"
+        backgroundSize="auto"
+        className="background lazyload"
+        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+        padding="xl"
+        {...props}
+    />
+    <br/>
+    <Background
+        alt="colorful background"
+        backgroundSize="cover"
+        className="background lazyload"
+        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+        padding="xl"
+        {...props}
+    />
+    <br/>
+    <Background
+        alt="colorful background"
+        backgroundRepeat="no-repeat"
+        backgroundSize="contain"
+        className="background lazyload"
+        imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
+        padding="xl"
+        {...props}
+    />
+  </F>
+)
+
+export default BackgroundSize

playbook/app/pb_kits/playbook/pb_background/docs/_background_size.md

@@ -0,0 +1,3 @@
+Background size can be passed into the background kit. Values `auto`, `cover`, and `contain` are accepted. 
+
+💡 *Note:* When using `contain` you might not want to have a repeating background as this will not always look pleasant. To prevent this, you may pass `no-repeat` to the `backgroundRepeat` prop. 

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

@@ -7,6 +7,7 @@ examples:
   - background_image: Image
   - background_status: Status
   - background_category: Category
+  - background_size: Size
 
   react:
   - background_light: Light
@@ -15,3 +16,4 @@ examples:
   - background_image: Image
   - background_status: Status
   - background_category: Category
+  - background_size: Size

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

@@ -4,3 +4,4 @@ export { default as BackgroundGradient } from './_background_gradient.jsx'
 export { default as BackgroundImage } from './_background_image.jsx'
 export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
+export { default as BackgroundSize } from './_background_size.jsx'

playbook/spec/pb_kits/playbook/kits/background_spec.rb

@@ -21,14 +21,24 @@
       .with_default(nil)
       .with_values("fade", "blur", "scale", nil)
   }
+  it {
+    is_expected.to define_enum_prop(:background_repeat)
+      .with_default("initial")
+      .with_values("repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round", "initial", "inherit")
+  }
+  it {
+    is_expected.to define_enum_prop(:background_size)
+      .with_default("cover")
+      .with_values("cover", "contain", "auto")
+  }
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
       expect(subject.new({}).classname).to eq "pb_background_kit pb_background_color_light"
       expect(subject.new(background_color: "gradient").classname).to eq "pb_background_kit pb_background_color_gradient"
       expect(subject.new(padding: "xl").classname).to eq "pb_background_kit pb_background_color_light p_xl"
       expect(subject.new(background_color: "success").classname).to eq "pb_background_kit pb_background_color_success"
       expect(subject.new(background_color: "category_1").classname).to eq "pb_background_kit pb_background_color_category_1"
-      expect(subject.new(transition: "fade", image_url: "test.jpeg").classname).to eq "pb_background_kit lazyload fade"
+      expect(subject.new(transition: "fade", image_url: "test.jpeg").classname).to eq "pb_background_kit pb_background_color_light lazyload fade"
     end
   end
 end