playbook_ui 10.23.0.pre.cachetest → 10.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d85218c29eb499b6f71d42d3b99307a6f5563671d4af53e4e3ac380779049bd
-  data.tar.gz: a8e220e1252b1b21fa92adbf601532c483164950169f7d6ce79e8d6e1f0e8b1e
+  metadata.gz: 813bd55479e3f61b872582fd3555ef0810a2e1b2e8c37a3b214664721cccb715
+  data.tar.gz: 4a5f12fddfeeefb71326570f2c93e86eb484c114acd0e81f831bfc80b5566d13
 SHA512:
-  metadata.gz: 986b7423cafa276bb7931cec9e32fcb57867f7a303b810babcc9524c0591314da7fcdc52f73c89726115c1543e553eec856b3c2ed73b0af9c53b3cc88ffa0c77
-  data.tar.gz: 0f245ee82c1ba4b42c6daa7a9444d7106f022a1510f6f2b7473430a2cddf6c6981d9a48f17bebc902990dca4829e84ebb5c1389d0436229ca1c7332418d1a370
+  metadata.gz: 4bc3c1d358cc2c4c9e71ae6926827cf25a9895fd62de2db3841f7b1ef58a8c6c1e896991f0c0420cd44828f3812c4e3675539ca4ed318d39b70fefef22d089ab
+  data.tar.gz: b9680edc3f28085f3eae5edcbdb2c3fbc3a8a22b8ad8ec1bb5d9744fcc16b39133abbcfaeafd582f00d4b9505bee699b6941a5514c6b11147c1ede51a4bfa021

data/app/pb_kits/playbook/_playbook.scss

@@ -100,3 +100,4 @@
 @import './utilities/shadow';
 @import './utilities/line_height';
 @import './utilities/display';
+@import './utilities/flexbox';

data/app/pb_kits/playbook/index.js

@@ -118,6 +118,3 @@ export { default as PbTable } from './pb_table'
 export { default as PbTextarea } from './pb_textarea'
 export { default as PbTooltip } from './pb_tooltip'
 export { default as PbTypeahead } from './pb_typeahead'
-
-// eslint-disable-next-line no-console
-console.log('CACHE BUSTED')

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -16,8 +16,8 @@ $avatar-sizes: (
   position: relative;
 
   @each $name, $size in $avatar-sizes {
-    &[class*=_#{$name}],
-    &[class*=_#{$name}_thumb] {
+    &[class*=_size_#{$name}],
+    &[class*=_size_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;

data/app/pb_kits/playbook/pb_avatar/{_avatar.jsx → _avatar.tsx}

@@ -1,8 +1,5 @@
-/* @flow */
-
 import React, { useState } from 'react'
 import classnames from 'classnames'
-import { map } from 'lodash'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -11,9 +8,9 @@ import Image from '../pb_image/_image'
 import OnlineStatus from '../pb_online_status/_online_status'
 
 type AvatarProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
-  data?: object,
+  data?: {[key: string]: string},
   dark?: boolean,
   id?: string,
   imageAlt?: string,
@@ -23,8 +20,8 @@ type AvatarProps = {
   status: "away" | "offline" | "online",
 }
 
-const firstTwoInitials = (name) =>
-  map(name.split(/\s/), (name) => name[0])
+const firstTwoInitials = (name: string) =>
+  name.split(/\s/).map((name) => name[0])
     .join('')
     .substring(0, 2)
 
@@ -41,10 +38,10 @@ const Avatar = (props: AvatarProps) => {
     status = null,
     dark = false,
   } = props
-  const dataProps = buildDataProps(data)
-  const ariaProps = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_avatar_kit', size),
+    buildCss('pb_avatar_kit', `size_${size}`),
     globalProps(props),
     className
   )
@@ -55,6 +52,8 @@ const Avatar = (props: AvatarProps) => {
   const [error, setError] = useState(false)
   const handleError = () => setError(true)
 
+  const canShowImage = imageUrl && !error
+
   return (
     <div
         {...ariaProps}
@@ -66,21 +65,21 @@ const Avatar = (props: AvatarProps) => {
           className="avatar_wrapper"
           data-initials={initials}
       >
-        <If condition={imageUrl && !error}>
+        { canShowImage && (
           <Image
               alt={imageAlt}
               onError={handleError}
               url={imageUrl}
           />
-        </If>
+        )}
       </div>
-      <If condition={status}>
+      {status && (
         <OnlineStatus
             className={`size_${size}`}
             dark={dark}
             status={status}
         />
-      </If>
+      )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -18,7 +18,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_avatar_kit", size)
+        generate_classname("pb_avatar_kit", "size_#{size}")
       end
 
       def online_status_props

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -22,7 +22,7 @@ test('loads the given image url and name', () => {
   const image    = screen.getByAltText(imageAlt)
   const initials = name.split(/\s/)[0].substr(0, 1) + name.split(/\s/)[1].substr(0, 1)
 
-  expect(kit).toHaveClass('pb_avatar_kit_md')
+  expect(kit).toHaveClass('pb_avatar_kit_size_md')
   expect(kit).toHaveAttribute('data-initials', initials)
   expect(image).toHaveAttribute('data-src', imageUrl)
   expect(image).toHaveAttribute('src', imageUrl)

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -8,7 +8,7 @@ import {
   buildCss,
   buildDataProps,
 } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Icon from '../pb_icon/_icon'

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

@@ -3,46 +3,59 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 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,
+  customColor?: string,
   data?: object,
   id?: string,
   imageUrl?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+  transition?: 'fade' | 'blur' | 'scale',
 }
 
 const Background = (props: BackgroundProps) => {
   const {
+    alt = '',
     aria = {},
     backgroundColor = 'light',
+    backgroundRepeat = 'initial',
+    backgroundSize = 'cover',
     children,
     className,
+    customColor,
     data = {},
     id,
     imageUrl = '',
     tag = 'div',
+    transition = '',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(buildCss('pb_background_kit'), globalProps(props), `pb_background_color_${backgroundColor}`, className)
-  const Tag = `${tag}`
   const backgroundStyle = {
     backgroundImage: `url(${imageUrl})`,
-    backgroundSize: 'cover',
+    backgroundRepeat: `${backgroundRepeat}`,
+    backgroundSize: `${backgroundSize}`,
   }
+  const getBackgroundColor = customColor ? 'pb_background_custom_color' : `pb_background_color_${backgroundColor}`
+  const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), getBackgroundColor, className)
+  const Tag = `${tag}`
 
   return (
     <>
       <If condition={imageUrl}>
         <Tag
+            alt={alt}
             style={backgroundStyle}
             {...ariaProps}
             {...dataProps}
@@ -57,6 +70,7 @@ const Background = (props: BackgroundProps) => {
             {...dataProps}
             className={classes}
             id={id}
+            style={customColor ? { backgroundColor: customColor } : null}
         >
           { children }
         </Tag>

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

@@ -22,14 +22,30 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
     }
   };
 
-  .blur_up {
-    -webkit-filter: blur(6px);
-    filter: blur(6px);
-    transition: filter 550ms, -webkit-filter 550ms;
+  &.fade {
+    opacity: 0;
+    &.lazyloaded {
+      opacity: 1;
+      transition: opacity 400ms ease-in;
+    }
   }
 
-  .blur_up.lazyloaded {
-    -webkit-filter: blur(0);
-    filter: blur(0);
+  &.blur {
+    filter: blur(5px);
+    &.lazyloaded {
+      -webkit-filter: blur(0);
+      filter: blur(0);
+      transition: filter 400ms ease-in;
+    }
+  }
+
+  &.scale {
+    opacity: 0;
+    transform: scale(0.9);
+    &.lazyloaded {
+      opacity: 1;
+      transform: scale(1);
+      transition: 700ms ease-in;
+    }
   }
 }

data/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,8 @@
       aria: object.aria,
       data: object.data,
       id: object.id,
-      class: object.classname
+      class: object.classname,
+      style: object.custom_background_color
   ) do %>
     <%= content.presence %>
   <% end %>

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

@@ -6,24 +6,51 @@ module Playbook
       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,
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "div"
 
+      prop :transition, type: Playbook::Props::Enum,
+                        values: ["blur", "fade", "scale", nil],
+                        default: nil
+
+      prop :custom_color, type: Playbook::Props::String,
+                          default: nil
+
       def classname
-        generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
+        generate_classname("pb_background_kit", image_classname, separator: " ")
+      end
+
+      def custom_background_color
+        "background-color: #{custom_color};"
       end
 
     private
 
       def image_classname
-        image_url.present? ? "lazyload blur_up" : ""
-      end
-
-      def background_color_classname
-        !image_url.present? ? "pb_background_color_#{background_color}" : ""
+        background_class = custom_color.present? ? "pb_background_custom_color" : "pb_background_color_#{background_color}"
+        background_class_lazy = image_url.present? ? " lazyload #{transition}" : ""
+        "#{background_class}#{background_class_lazy}"
       end
     end
   end

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

@@ -20,3 +20,20 @@ test('backgroundColor = category_1', () => {
   const kit = renderKit(Background, props, { backgroundColor: 'category_1' })
   expect(kit).toHaveClass('pb_background_kit pb_background_color_category_1')
 })
+
+test('customColor prop styles background color with a hex value', () => {
+  const kit = renderKit(Background, props, { customColor: '#1d99a8' })
+
+  expect(kit).toHaveClass('pb_background_kit pb_background_custom_color')
+  expect(kit).toHaveStyle(`background-color: #1d99a8;`)
+})
+
+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')
+})

data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb

@@ -1,5 +1,5 @@
-<%= pb_rails("background", props: { image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
-  <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+<%= 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", padding: "lg" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "center", orientation: "column", margin_bottom: "xl" }) do %>
     <%= pb_rails("flex/flex_item") do %>
       <%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%>
     <% end %>
@@ -11,3 +11,51 @@
     <% end %>
   <% end %>
 <% end %>
+
+
+<%= pb_rails("flex", props: { margin_top: "lg" }) do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
+    <%= pb_rails("select", props: {
+    id: "transition-dropdown",
+    label: "",
+    blank_selection: "Select a Transition...",
+    options: [
+        {
+          value: 'fade',
+        },
+        {
+          value: 'blur',
+        },
+        {
+          value: 'scale',
+        },
+    ]
+    }) %>
+  <% end %>
+<% end %> 
+
+<script>
+    window.addEventListener('DOMContentLoaded', () => {
+        const transitionDropdown = document.querySelector("#transition-dropdown")
+        var option = ''
+
+        transitionDropdown.addEventListener('change', function() {
+          if (this.value === '') {
+            (transitionDropdown).className = (transitionDropdown).className + ' _disabled'
+          } else {
+            (transitionDropdown).removeAttribute("disabled");
+            (transitionDropdown).className = (transitionDropdown)
+            option = this.value
+          }
+        });
+
+        const updateTransition = (transition) => {
+          const imageTransition = document.querySelector('.background-image')
+            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
+            imageTransition.classList.add(transition, "lazyload")   
+        } 
+        (transitionDropdown).addEventListener('change', function() {
+          updateTransition(option)
+        })
+    });
+</script>

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

@@ -1,36 +1,79 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Background } from '../..'
-import { Card, Flex, FlexItem, Title } from '../..'
+import { Card, Flex, FlexItem, Select, Title } from '../..'
 
-const BackgroundImage = (props) => (
-  <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
-    <Flex
-        orientation="column"
-        vertical="center"
-        {...props}
-    >
-      <FlexItem>
-        <Title
-            dark
-            padding="lg"
-            size={1}
-            text="Background Kit Image"
-            {...props}
-        />
-      </FlexItem>
-      <FlexItem
-          padding="lg"
+const BackgroundImage = (props) => {
+  const [transition, setTransition] = useState('')
+
+  const handleTransition = ({ target }) => {
+    setTransition(target.value)
+  }
+
+  const options = [
+    {
+      value: 'fade',
+    },
+    {
+      value: 'blur',
+    },
+    {
+      value: 'scale',
+    },
+  ]
+
+  return (
+    <>
+      <Background
+          alt="colorful background"
+          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"
+          transition={transition}
           {...props}
       >
-        <Card
-            shadow="deepest"
+        <Flex
+            orientation="column"
+            vertical="center"
             {...props}
         >
-          {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
-        </Card>
-      </FlexItem>
-    </Flex>
-  </Background>
-)
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+                {...props}
+            />
+          </FlexItem>
+          <FlexItem
+              padding="lg"
+              {...props}
+          >
+            <Card
+                shadow="deepest"
+                {...props}
+            >
+              {
+                'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'
+              }
+            </Card>
+          </FlexItem>
+        </Flex>
+      </Background>
+      <Flex marginTop="xl">
+        <FlexItem fixedSize="250px">
+          <Select
+              blankSelection="Select a Transition..."
+              label=""
+              name="dropdown"
+              onChange={handleTransition}
+              options={options}
+              transition={transition}
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+    </>
+  )
+}
 
 export default BackgroundImage

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

@@ -0,0 +1 @@
+To add a lazyload on the background image simply use the `transition` prop and one of the three string options `"fade"`, `"blur"`, or `"scale"`.

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
 
-<% end %>
+<% end %>

data/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" }) %>

data/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

data/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. 

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

@@ -1 +1,3 @@
-The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.
+The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.
+
+The `custom_color` prop allows you to pass a hex value (ex. "#e43718") in place of `background_color`. It is not case sensitive, but needs to start with `#`. This prop exists primarily for use in microsites and very specific situations. Avoid using unless absolutely necessary to maintain continuity.

data/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

data/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'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -3,11 +3,12 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import pbChart from '../plugins/pb_chart'
 
 type BarGraphProps = {
   axisTitle: string,
+  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -30,6 +31,7 @@ type BarGraphProps = {
 export default class BarGraph extends React.Component<BarGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
+    dark: false,
     type: 'column',
     legend: false,
     toggleLegendClick: true,
@@ -38,6 +40,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
+      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -56,6 +59,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     new pbChart(`.${className}`, {
       axisTitle: axisTitle,
+      dark,
       chartData: chartData,
       colors: colors,
       id: id,