[YNGJ-574] Background Kit - Set Background Size (#1793)

* YNGJ-574 - add background size to background playbook kit * Add import to examples index.js * [YNGJ-574] Background Kit - Set Background Size * add unit test for background size - check css style for background size style * [YNGJ-574 Background Kit - Set Background Size] * add rspec test for new enum * [YNGJ-574] - Background Kit - Set Background Size * remove style from background kits with no image * add background image to kit examples documentation * [YNGJ-574] Background Kit - Set Background Size * fix test by including image in test case * Add each example * Add background-repeat and fix rails background color * Fix spec test Co-authored-by: Stephen <smarshall1980@gmail.com>
powerhome · Mar 28, 2022 · ed00e12 · ed00e12
1 parent ee7956d
commit ed00e12
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 6 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_background/_background.jsx b/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 (

diff --git a/playbook/app/pb_kits/playbook/pb_background/background.html.erb b/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 %>

diff --git a/playbook/app/pb_kits/playbook/pb_background/background.rb b/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

diff --git a/playbook/app/pb_kits/playbook/pb_background/background.test.js b/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')
+})
diff --git a/playbook/app/pb_kits/playbook/pb_background/docs/_background_size.html.erb b/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" }) %>
diff --git a/playbook/app/pb_kits/playbook/pb_background/docs/_background_size.jsx b/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
diff --git a/playbook/app/pb_kits/playbook/pb_background/docs/_background_size.md b/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. 
diff --git a/playbook/app/pb_kits/playbook/pb_background/docs/example.yml b/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
diff --git a/playbook/app/pb_kits/playbook/pb_background/docs/index.js b/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'
diff --git a/playbook/spec/pb_kits/playbook/kits/background_spec.rb b/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