playbook_ui 10.23.0 → 10.24.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6798a70ed76fb5f5a6e1b65a7906c237fed66449377b09cdd42ed93133fd9148
-  data.tar.gz: 4cff4b45c818dc8844e10a4ffa3a2708a4041d1277af4a2adb473138661a95c1
+  metadata.gz: 7f4374b7e5a9315ae7f5479fb8e038d9251e5a511a7c00e1fc07a9d5d1d13a7c
+  data.tar.gz: 0141b7bdf697c479e377fe946236d5b65f650d56539c4876edeb9b3040b68e59
 SHA512:
-  metadata.gz: b4b508b9345c83fd51fb058bd42de424ffbe05df3ec05ca043e1803a434b1955648b3591e83b9a5894065e5138f4ac4d136d23471f3f26794a2625f80533df26
-  data.tar.gz: 0a3f4fa1c1fa89edbd972f83ef5c3379212dd17fb4dc4233af400068724b9a6c0cb3b27100818989b48cc70fab6b9a6e556f3694087b75be9b037e498e7a6e22
+  metadata.gz: 70364bfc49cefada0602994da9c85905cc069e6f755a795334ffeef956e1cc4de202a19c7b6fda9bddc5c40af34acfb876d8ae3fbaf09dfef329340a1fd7a9f5
+  data.tar.gz: f45b9c5683f223b95743c144156ab4ec51f72c56e1a7a3e5e22e32bcdebec0b490244a664aef0e6df190873fd5623fd9fd7dc99824f43383a7ed5bc31a64b25d

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

@@ -9,8 +9,11 @@ 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,
@@ -24,8 +27,11 @@ const Background = (props: BackgroundProps) => {
     alt = '',
     aria = {},
     backgroundColor = 'light',
+    backgroundRepeat = 'initial',
+    backgroundSize = 'cover',
     children,
     className,
+    customColor,
     data = {},
     id,
     imageUrl = '',
@@ -38,9 +44,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 getBackgroundColor = customColor ? 'pb_background_custom_color' : `pb_background_color_${backgroundColor}`
+  const classes = classnames(buildCss('pb_background_kit'), 'lazyload', transition, globalProps(props), getBackgroundColor, className)
   const Tag = `${tag}`
 
   return (
@@ -62,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

@@ -29,7 +29,7 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
       transition: opacity 400ms ease-in;
     }
   }
-  
+
   &.blur {
     filter: blur(5px);
     &.lazyloaded {
@@ -38,7 +38,7 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
       transition: filter 400ms ease-in;
     }
   }
-  
+
   &.scale {
     opacity: 0;
     transform: scale(0.9);

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,6 +6,24 @@ 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,
@@ -16,14 +34,24 @@ module Playbook
                         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, separator: " ")
       end
 
+      def custom_background_color
+        "background-color: #{custom_color};"
+      end
+
     private
 
       def image_classname
-        image_url.present? ? "lazyload #{transition}" : "pb_background_color_#{background_color}"
+        class_buffer = []
+        class_buffer << "pb_background_custom_color" if custom_color.present?
+        class_buffer << "pb_background_color_#{background_color}" unless custom_color.present?
+        class_buffer << " lazyload #{transition}" if image_url.present?
       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('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')
+})
+
+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;`)
+})

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_bread_crumbs/_bread_crumb_item.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, domSafeProps } from '../utilities/globalProps'
 
 import {
   buildAriaProps,
@@ -43,7 +43,7 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
     >
       <Component
           className="pb_bread_crumb_item"
-          {...rest}
+          {...domSafeProps(rest)}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb

@@ -13,12 +13,24 @@ module Playbook
                         default: {}
 
       def formatted_stat_value
-        { **stat_value, value: stat_value[:value].to_i }
+        { **stat_value, value: sanitized_stat_value }
       end
 
       def classname
         generate_classname("pb_dashboard_value_kit", align)
       end
+
+      # rubocop:disable Lint/FloatComparison
+      # Comparing the value coerced to a float versus an integer is the point of this methodd
+      def sanitized_stat_value
+        value = stat_value[:value]
+        if value.is_a?(::String)
+          value.to_f == value.to_i ? value.to_i : value.to_f
+        else
+          value
+        end
+      end
+      # rubocop:enable Lint/FloatComparison
     end
   end
 end

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.html.erb

@@ -1,21 +1,28 @@
 <%= pb_rails("dashboard_value", props: {
   stat_label: "Decreased Value",
-  stat_value: {value: 1428, unit: "appts"},
-  stat_change: {change: "decrease", value: 26.1}
+  stat_value: { value: 1428, unit: "appts" },
+  stat_change: { change: "decrease", value: 26.1 }
 }) %>
 
 <br><br>
 
 <%= pb_rails("dashboard_value", props: {
   stat_label: "Increased Value",
-  stat_value: {value: 938, unit: "homes"},
-  stat_change: {change: "increase", value: 56.1}
+  stat_value: { value: 938, unit: "homes" },
+  stat_change: { change: "increase", value: 56.1 }
 }) %>
 
 <br><br>
 
 <%= pb_rails("dashboard_value", props: {
   stat_label: "Neutral Value",
-  stat_value: {value: 261, unit: "windows"},
-  stat_change: {value: 86}
+  stat_value: { value: 261, unit: "windows" },
+  stat_change: { value: 86 }
+}) %>
+
+<br><br>
+
+<%= pb_rails("dashboard_value", props: {
+  stat_label: "Pitch Rate",
+  stat_value: { value: 90.9, unit: "%" }
 }) %>

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -31,6 +31,15 @@ const DashboardValueDefault = (props) => {
           statValue={{ value: '261', unit: 'windows' }}
           {...props}
       />
+
+      <br />
+      <br />
+
+      <DashboardValue
+          statLabel="Pitch Rate"
+          statValue={{ value: '90.9', unit: '%' }}
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -8,7 +8,7 @@
 
 
 
-// Dialog Animations 
+// Dialog Animations
 
 @keyframes modalFadeIn {
 	from {
@@ -72,7 +72,7 @@
 	border: 0;
 	max-height: calc(100vh - #{$gutter * 2});
 	max-width: calc(100vw - #{$gutter * 2});
-	overflow: scroll;
+	overflow: auto;
 	animation-name: modalFadeIn;
 	animation-duration: $animation-duration;
 	outline: none;
@@ -131,4 +131,4 @@
 			opacity: $opacity_hidden;
 		}
 	}
-}
+}

data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx

@@ -184,7 +184,6 @@ const Passphrase = (props: PassphraseProps) => {
           />
           <span
               className="show-passphrase-icon"
-              dark={dark}
               onClick={toggleShowPassphrase}
           >
             <Body

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
 
 import Body from '../pb_body/_body'
@@ -112,7 +112,7 @@ const Select = ({
           {children}
           <Else />
           <select
-              {...props}
+              {...domSafeProps(props)}
               disabled={disabled}
               id={name}
               multiple={multiple}

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb

@@ -1 +1,3 @@
 <%= pb_rails("stat_value", props: { value: 1048 }) %>
+
+<%= pb_rails("stat_value", props: { value: 10.48 }) %>

data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx

@@ -12,7 +12,7 @@ const StatValueDefault = (props) => {
       <br />
       <br />
       <StatValue
-          value={0}
+          value={10.48}
           {...props}
       />
     </>

data/app/pb_kits/playbook/pb_stat_value/stat_value.rb

@@ -4,10 +4,10 @@ module Playbook
   module PbStatValue
     class StatValue < Playbook::KitBase
       prop :unit
-      prop :value, type: Playbook::Props::Number
+      prop :value, type: Playbook::Props::Numeric
 
       def formatted_value
-        number_with_delimiter(value, delimiter: ",")
+        number_with_delimiter(value, delimiter: ",", separator: ".")
       end
 
       def classname

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -2,7 +2,7 @@
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, domSafeProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 import Flex from '../pb_flex/_flex'
@@ -37,10 +37,11 @@ type TextInputProps = {
 
 const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
   const {
+    addOn = { icon: null, alignment: 'right', border: true },
     aria = {},
     className,
-    data = {},
     dark = false,
+    data = {},
     disabled,
     error,
     id,
@@ -53,7 +54,6 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     type = 'text',
     value = '',
     children = null,
-    addOn = { icon: null, alignment: 'right', border: true },
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -85,10 +85,11 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
   )
   const textInput = (
     <input
-        {...props}
+        {...domSafeProps(props)}
         className="text_input"
         disabled={disabled}
         id={id}
+        key={id}
         name={name}
         onChange={onChange}
         placeholder={placeholder}
@@ -107,21 +108,25 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
           vertical="center"
       >
         <If condition={addOnAlignment == 'left'}>
-          <Card
-              className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
-              dark={dark}
-          >
-            {addOnIcon}
-          </Card>
-          {textInput}
-          <Else />
-          {textInput}
-          <Card
-              className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
-              dark={dark}
-          >
-            {addOnIcon}
-          </Card>
+          <>
+            <Card
+                className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
+                dark={dark}
+            >
+              {addOnIcon}
+            </Card>
+            {textInput}
+          </>
+        <Else />
+          <>
+            {textInput}
+            <Card
+                className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
+                dark={dark}
+            >
+              {addOnIcon}
+            </Card>
+          </>
         </If>
       </Flex>
     </React.Fragment>

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -1,3 +1,5 @@
+import { omit } from 'lodash'
+
 type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
 type None = "none"
 
@@ -272,3 +274,24 @@ export const deprecatedProps = (kit: string, props: string[] = []): void => {
     })
   }
 }
+
+export const domSafeProps = (props: {[key: string]: string}): {[key: string]: string} => {
+  const notSafeProps = [
+    'marginRight',
+    'marginLeft',
+    'marginTop',
+    'marginBottom',
+    'marginX',
+    'marginY',
+    'margin',
+    'paddingRight',
+    'paddingLeft',
+    'paddingTop',
+    'paddingBottom',
+    'paddingX',
+    'paddingY',
+    'padding',
+    'dark',
+  ]
+  return omit(props, notSafeProps)
+}

data/dist/reset.css

@@ -1,2 +1,61 @@
-*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
+/* CLEAN UP AND REMOVE */
+/* Headings */
+/* Standard Font Weights */
+/* Non_Standard Font Weights */
+/*=====================================
+Base colors should not be documented.
+Only document color use.
+
+Colors -----------------------------*/
+/* Specialty Gradient -----------------*/
+/* Interface colors -------------------*/
+/* Main colors ------------------------*/
+/*=====================================
+
+Background colors ------------------*/
+/* Card colors ------------------*/
+/* Active colors ----------------------*/
+/* Hover colors -----------------------*/
+/* Focus colors -----------------------*/
+/* Border colors ----------------------*/
+/* Shadow colors ----------------------*/
+/* Text colors ------------------------*/
+/* Data colors ------------------------*/
+/* Status colors ----------------------*/
+/* Link colors ------------------------*/
+/* Product colors ---------------------*/
+/* Category colors ---------------------*/
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  *:before, *:after {
+    box-sizing: border-box; }
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden; }
+
+body {
+  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #F3F7FB;
+  height: 100%;
+  letter-spacing: 0;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: #242B42;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; }
+
+a {
+  text-decoration: none;
+  color: #0056CF; }
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.22.1"
-  VERSION = "10.23.0"
+  PREVIOUS_VERSION = "10.23.0"
+  VERSION = "10.24.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.23.0
+  version: 10.24.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-03-16 00:00:00.000000000 Z
+date: 2022-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -333,6 +333,9 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_size.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_size.md
 - app/pb_kits/playbook/pb_background/docs/_background_status.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_status.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_status.md
@@ -2163,9 +2166,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.6
 signing_key: