Add background-repeat and fix rails background color

powerhome · Mar 22, 2022 · 4a86814 · 4a86814
1 parent 55c42ed
commit 4a86814
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 7 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,7 @@ 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,
@@ -25,6 +26,7 @@ const Background = (props: BackgroundProps) => {
     alt = '',
     aria = {},
     backgroundColor = 'light',
+    backgroundRepeat = 'initial',
     backgroundSize = 'cover',
     children,
     className,
@@ -40,10 +42,11 @@ const Background = (props: BackgroundProps) => {
 
   const backgroundStyle = {
     backgroundImage: `url(${imageUrl})`,
+    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
@@ -5,6 +5,7 @@
       id: object.id,
       class: object.classname,
       style: "background-image: url('#{object.image_url}');
+              background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};"
   ) do %>
     <%= content.presence %>

diff --git a/playbook/app/pb_kits/playbook/pb_background/background.rb b/playbook/app/pb_kits/playbook/pb_background/background.rb
@@ -7,6 +7,19 @@ class Background < Playbook::KitBase
                               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"
@@ -28,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
@@ -21,6 +21,11 @@ test('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
@@ -1,5 +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: "contain", padding: "xl" }) %>
+ <%= 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_size: "cover", padding: "xl" }) %>
+ <%= 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
@@ -14,7 +14,7 @@ const BackgroundSize = (props) => (
     <br/>
     <Background
         alt="colorful background"
-        backgroundSize="contain"
+        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"
@@ -23,7 +23,8 @@ const BackgroundSize = (props) => (
     <br/>
     <Background
         alt="colorful background"
-        backgroundSize="cover"
+        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"

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
@@ -1 +1 @@
-Background size can be passed into the background kit. Values `auto`, `contain`, `cover` are accepted.
+Background size can be passed into the background kit. Values `auto`, `cover`, and `contain` are accepted.
diff --git a/playbook/spec/pb_kits/playbook/kits/background_spec.rb b/playbook/spec/pb_kits/playbook/kits/background_spec.rb
@@ -21,6 +21,11 @@
       .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")