playbook_ui 10.13.0 → 10.14.1.pre.alpha2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b3047cdb2a67ca6990ccc8dc3901220bbf71952eb4a044659989b395d11a0fcf
-  data.tar.gz: 4a8e5769ced22883c26502bb7221cca5cf4ce211602f4cd2cca0d515c4d600fd
+  metadata.gz: 289033a3783ec2df05eadf3e37ebbdc51513cb443bfc9c351349683eabf4f921
+  data.tar.gz: 662e3efbd7f8e4f79dfa591312f94dab94087a53b17b72bc222a3d4dee14142f
 SHA512:
-  metadata.gz: bf8d6385463d4837d17f5d113aeb780590cfc2ecb1a8a1c683b383f99dda1beb15a72df3e83e1b757d4ef952d96e1fdb3ac5def2364867a9cbede2c9d8fff07e
-  data.tar.gz: 49243ee6cc2c6daadcdf1969421770c4382e7fc01390c0665cee5b0d40b988a2076d4abfc013bb8140adf089cf466a422faaef99e62b3af20db74882293debd2
+  metadata.gz: 77c23b93648b94eb00c22c8f6cc09271bdffc36119c052aec8e73d562e3470f1aa2732f2de572e2859433877fb6c561f81eb3253849d29bfa6a3d04a7799293d
+  data.tar.gz: 4d6b8d0534a90029125d2adf562097364ce74de7b6178a4fc1e8243187ae808b3d63f33ccd15e3ccaac9099a45bf6d1eae0b80659a8d7a2747029c7b392a17a2

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

@@ -31,6 +31,7 @@ const Background = (props: BackgroundProps) => {
 
   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 = {
@@ -42,19 +43,19 @@ const Background = (props: BackgroundProps) => {
     <>
       <If condition={imageUrl}>
         <Tag
-            className={classes + 'lazyload blur_up'}
             style={backgroundStyle}
             {...ariaProps}
             {...dataProps}
+            className={classes}
             id={id}
         >
           { children }
         </Tag>
         <Else />
         <Tag
-            className={classes}
             {...ariaProps}
             {...dataProps}
+            className={classes}
             id={id}
         >
           { children }

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

@@ -29,7 +29,4 @@ $background_colors: (
     -webkit-filter: blur(0);
     filter: blur(0);
   }
-
-
-
 }

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

@@ -1,3 +1,6 @@
 .pb_bar_graph {
-
+    rect.highcharts-background {
+        fill: #0000 !important;
+    }
 }
+

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb

@@ -0,0 +1,20 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}, {
+    type: 'spline',
+    name: 'Trend Line',
+    data: [1975, 600, 2500, 924, 500],
+    color: '#F9BB00',
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-spline",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    subtitle: 'Source: thesolarfoundation.com',
+    title: 'Bar Graph with Spline',
+    legend: true,
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  type: 'spline',
+  name: 'Trend Line',
+  data: [1975, 600, 2500, 924, 500],
+  color: '#F9BB00',
+}]
+
+const BarGraphSpline = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-spline"
+        legend
+        title="Bar Graph with Spline"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphSpline

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md

@@ -0,0 +1,2 @@
+A spline can be added by including a separate chart data with the `type: 'spline'` attribute.
+A color can also be specified for the spline.

data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml

@@ -5,6 +5,7 @@ examples:
   - bar_graph_legend: Legend
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
+  - bar_graph_spline: Spline
 
 
   react:
@@ -12,4 +13,4 @@ examples:
   - bar_graph_legend: Legend
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
-
+  - bar_graph_spline: Spline

data/app/pb_kits/playbook/pb_bar_graph/docs/index.js

@@ -2,3 +2,4 @@ export { default as BarGraphDefault } from './_bar_graph_default.jsx'
 export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
 export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
 export { default as BarGraphHeight } from './_bar_graph_height.jsx'
+export { default as BarGraphSpline } from './_bar_graph_spline.jsx'

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -8,6 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
   aria?: object,
+  background?: "white" | "dark" | "light" | "windows" | "siding" | "doors" | "solar" | "roofing" | "gutters" | "insulation",
   borderNone?: boolean,
   borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
   children: array<React.ReactNode> | React.ReactNode,
@@ -66,6 +67,7 @@ const Body = (props: CardBodyProps) => {
 const Card = (props: CardPropTypes) => {
   const {
     aria = {},
+    background = 'white',
     borderNone = false,
     borderRadius = 'md',
     children,
@@ -81,6 +83,7 @@ const Card = (props: CardPropTypes) => {
   const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, `border_radius_${borderRadius}`, {
     selected,
     deselected: !selected,
+    [`background_${background}`]: background,
     [`highlight_${highlight.position}`]: highlight.position,
     [`highlight_${highlight.color}`]: highlight.color,
   })

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -19,6 +19,12 @@ $pb_card_padding:(
   lg: $space_lg,
   xl: $space_xl,
 );
+$additional_colors: (
+  "dark": $bg_dark,
+  "light": $bg_light,
+  "white": $white,
+);
+$background_colors: map-merge($product_colors, $additional_colors);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
@@ -35,7 +41,6 @@ $pb_card_padding:(
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: $background;
   background-clip: border-box;
   border-width: $pb_card_border_width;
   border-style: solid;
@@ -45,6 +50,12 @@ $pb_card_padding:(
   transition-duration: $transition_short;
   transition-timing-function: $easeIn;
 
+  @each $name, $color in $background_colors {
+    &[class*=background_#{$name}] {
+      background: $color;
+    }
+  };
+
   @each $name, $shadow in $box_shadows {
     &[class*=_#{$name}] {
       box-shadow: $shadow;

data/app/pb_kits/playbook/pb_card/card.rb

@@ -17,6 +17,9 @@ module Playbook
       prop :border_radius, type: Playbook::Props::Enum,
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
+      prop :background, type: Playbook::Props::Enum,
+                        values: %w[white light dark windows siding doors solar roofing gutters insulation],
+                        default: "white"
 
       def classname
         generate_classname("pb_card_kit",
@@ -24,6 +27,7 @@ module Playbook
                            shadow_class,
                            highlight_position_class,
                            highlight_color_class,
+                           background_class,
                            border_class,
                            border_radius_class)
       end
@@ -54,6 +58,10 @@ module Playbook
         highlight[:color].present? ? "highlight_#{highlight[:color]}" : nil
       end
 
+      def background_class
+        background.present? ? "background_#{background}" : "background_white"
+      end
+
       def border_class
         border_none == true ? "border_none" : nil
       end

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb

@@ -0,0 +1,57 @@
+<%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4 }) %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "dark", dark: true })  do %>
+  <%= pb_rails("body", props: {
+  text: "Dark",
+  color: "lighter"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("card")  do %>
+  <%= pb_rails("body", props: {
+  text: "White"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "light" })  do %>
+  <%= pb_rails("body", props: {
+  text: "Light"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "windows", dark: true })  do %>
+  <%= pb_rails("body", props: {
+  text: "Windows",
+  color: "lighter"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "siding" })  do %>
+  <%= pb_rails("body", props: {
+  text: "Siding"
+}) %>
+<% end %>
+
+<br>
+
+<%= pb_rails("card", props: { background: "doors" })  do %>
+  <%= pb_rails("body", props: {
+  text: "Doors"
+}) %>
+<% end %>
+
+<br>

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import Title from '../../pb_title/_title'
+import { Body } from '../../'
+import Card from '../_card.jsx'
+
+const CardBackground = (props) => {
+  return (
+    <div>
+      <Title
+          {...props}
+          size={4}
+          tag="h4"
+          text="Card Colors"
+      />
+
+      <br />
+
+      <Card
+          background="dark"
+          dark
+          {...props}
+      >
+        <Body
+            color="lighter"
+            text="Dark"
+            {...props}
+        />
+      </Card>
+
+      <br />
+
+      <Card>
+        <Body
+            text="White"
+            {...props}
+        />
+      </Card>
+
+      <br />
+
+      <Card
+          background="light"
+          {...props}
+      >
+        <Body
+            text="Light"
+            {...props}
+        />
+      </Card>
+
+      <br />
+
+      <Title
+          {...props}
+          size={4}
+          tag="h4"
+          text="Product Colors"
+      />
+
+      <br />
+
+      <Card
+          background="windows"
+          {...props}
+      >
+        <Body
+            color="lighter"
+            text="Windows"
+            {...props}
+        />
+      </Card>
+
+      <br />
+
+      <Card
+          background="siding"
+          {...props}
+      >
+        <Body
+            text="Siding"
+            {...props}
+        />
+      </Card>
+
+      <br />
+
+      <Card
+          background="doors"
+          {...props}
+      >
+        <Body
+            text="Doors"
+            {...props}
+        />
+      </Card>
+
+      <br />
+    </div>
+  )
+}
+
+export default CardBackground

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -0,0 +1 @@
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.

data/app/pb_kits/playbook/pb_card/docs/example.yml

@@ -1,6 +1,7 @@
 examples:
   rails:
   - card_light: Default
+  - card_background: Card Backgrounds
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected
@@ -13,6 +14,7 @@ examples:
   - card_border_radius: Border Radius
   react:
   - card_light: Default
+  - card_background: Card Backgrounds
   - card_highlight: Highlight Cards
   - card_header: Header Cards
   - card_selected: Selected

data/app/pb_kits/playbook/pb_card/docs/index.js

@@ -1,4 +1,5 @@
 export { default as CardLight } from './_card_light.jsx'
+export { default as CardBackground } from './_card_background.jsx'
 export { default as CardHighlight } from './_card_highlight.jsx'
 export { default as CardHeader } from './_card_header.jsx'
 export { default as CardSelected } from './_card_selected.jsx'

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -69,7 +69,7 @@ const Flex = (props: FlexProps) => {
           spacingClass,
           gapClass,
           rowGapClass,
-          columnGapClass
+          columnGapClass,
         ),
         globalProps(props),
         className

data/app/pb_kits/playbook/pb_flex/_flex.scss

@@ -10,8 +10,8 @@ $gapSpaces:(
 );
 
 $gapTypes: (
-  gap: gap, 
-  columnGap: column-gap, 
+  gap: gap,
+  columnGap: column-gap,
   rowGap: row-gap
   );
 
@@ -69,6 +69,7 @@ $gapTypes: (
     justify-content: center;
   }
 
+
   // Alignment: Align Items
   &[class*=align_items_left],
   &[class*=align_items_top],
@@ -76,6 +77,7 @@ $gapTypes: (
     align-items: flex-start;
   }
 
+
   &[class*=align_items_right],
   &[class*=align_items_bottom],
   &[class*=align_items_end] {

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -11,20 +11,22 @@ type FlexItemPropTypes = {
   flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
   className: string,
   overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
+  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none' } = props
   const growClass = grow === true ? 'grow' : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
   const overflowClass = overflow ? `overflow_${overflow}` : ''
   const shrinkClass = shrink === true ? 'shrink' : ''
   const fixedStyle =
     fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
+  const orderClass = order !== 'none' ? `order_${order}` : null
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, orderClass, globalProps(props), className)}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.scss

@@ -12,6 +12,15 @@
     flex-shrink: 1;
   }
 
+  //Order Items
+  @for $i from 0 through 12 {
+    &[class*=order_#{$i}]{
+      order: $i;
+    }
+  }
+  &[class*=order_first]{
+    order: -1;
+  }
 
   $overflow_values: auto, hidden, inherit, initial, scroll, visible;
 

data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb

@@ -47,3 +47,16 @@
     <%= pb_rails("flex/flex_item", props: {flex: "2"}) do %>4<% end %>
   <% end %>
 </div>
+
+<br/><br/>
+
+<%= pb_rails("title", props: {size: 4, text: "Order"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: "sm"}) do %>
+    <%= pb_rails("flex/flex_item", props: {order: "4"}) do %>1<% end %>
+    <%= pb_rails("flex/flex_item", props: {order: "2"}) do %>2<% end %>
+    <%= pb_rails("flex/flex_item", props: {order: "1"}) do %>3<% end %>
+    <%= pb_rails("flex/flex_item", props: {order: "3"}) do %>4<% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md

@@ -1,11 +1,12 @@
 ##### Props
 
 *  `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-*  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value 
-*  `grow` | **Type**: Boolean  
-*  `shrink` | **Type**: Boolean 
+*  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
+*  `grow` | **Type**: Boolean
+*  `shrink` | **Type**: Boolean
+*   `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
 
 - Flex is a short hand to set the flex item to take up (x) amount of available space
-- Setting Flex to 1 is equal to setting the grow & shrink prop to true 
+- Setting Flex to 1 is equal to setting the grow & shrink prop to true
 - Setting Flex to 0 is equal to setting the grow & shrink prop to false
 - If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  '../../'
+import { Flex, FlexItem, Title } from  '../..'
 
 const FlexItemExample = (props) => {
   return (
@@ -106,6 +106,32 @@ const FlexItemExample = (props) => {
           </FlexItem>
         </Flex>
       </div>
+
+      <br />
+      <Title
+          size={4}
+          text="Order"
+      />
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap="xs"
+            {...props}
+        >
+          <FlexItem order={4}>
+            {'1'}
+          </FlexItem>
+          <FlexItem order={2}>
+            {'2'}
+          </FlexItem>
+          <FlexItem order={1}>
+            {'3'}
+          </FlexItem>
+          <FlexItem order={3}>
+            {'4'}
+          </FlexItem>
+        </Flex>
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md

@@ -0,0 +1,12 @@
+##### Props
+
+*  `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+*  `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
+*  `grow` | **Type**: Boolean
+*  `shrink` | **Type**: Boolean
+*   `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
+
+- Flex is a short hand to set the flex item to take up (x) amount of available space
+- Setting Flex to 1 is equal to setting the grow & shrink prop to true
+- Setting Flex to 0 is equal to setting the grow & shrink prop to false
+- If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container

data/app/pb_kits/playbook/pb_flex/docs/example.yml

@@ -13,6 +13,7 @@ examples:
 
 
 
+
   react:
   - flex_default: Default
   - flex_inline: Inline

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -15,8 +15,12 @@ module Playbook
                       values: %w[auto hidden inherit initial scroll visible] + [nil],
                       default: nil
 
+      prop :order, type: Playbook::Props::Enum,
+                   values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
+                   default: "none"
+
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class + order_class
       end
 
       def style_value
@@ -48,6 +52,14 @@ module Playbook
           "flex_#{flex}"
         end
       end
+
+      def order_class
+        if order == "none"
+          ""
+        else
+          "order_#{order}"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -8,4 +8,8 @@
     fill: $text_lt_light;
     font: $regular $font_base $font_family_base;
   }
-}
+
+  rect.highcharts-background {
+    fill: #0000 !important;
+  }
+}

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -26,7 +26,7 @@ module Playbook
       end
 
       def city_state
-        [city.titleize, state].join(", ")
+        [city&.titleize, state].join(", ")
       end
 
       def zip

data/app/pb_kits/playbook/pb_line_graph/_line_graph.scss

@@ -0,0 +1,3 @@
+rect.highcharts-background {
+    fill: #0000 !important;
+}

data/app/pb_kits/playbook/tokens/_border_radius.scss

@@ -1,4 +1,3 @@
-@import "../tokens/colors";
 
 // Border Radius
 $border_rad_lightest:     1px;

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "10.12.0"
-  VERSION = "10.13.0"
+  PREVIOUS_VERSION = "10.14.1.pre.alpha1"
+  VERSION = "10.14.1.pre.alpha2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.13.0
+  version: 10.14.1.pre.alpha2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-11-04 00:00:00.000000000 Z
+date: 2021-11-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -95,6 +95,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.15'
+- !ruby/object:Gem::Dependency
+  name: rubocop-performance
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.11.5
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 1.11.5
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -183,36 +197,36 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
 - !ruby/object:Gem::Dependency
   name: rubocop
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.81.0
+        version: 1.20.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.81.0
+        version: 1.20.0
 - !ruby/object:Gem::Dependency
   name: spring
   requirement: !ruby/object:Gem::Requirement
@@ -345,6 +359,9 @@ files:
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_description.md
 - app/pb_kits/playbook/pb_bar_graph/docs/example.yml
 - app/pb_kits/playbook/pb_bar_graph/docs/index.js
@@ -439,6 +456,9 @@ files:
 - app/pb_kits/playbook/pb_card/card_body.rb
 - app/pb_kits/playbook/pb_card/card_header.html.erb
 - app/pb_kits/playbook/pb_card/card_header.rb
+- app/pb_kits/playbook/pb_card/docs/_card_background.html.erb
+- app/pb_kits/playbook/pb_card/docs/_card_background.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_background.md
 - app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_border_none.md
@@ -836,6 +856,7 @@ files:
 - app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_item.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_justify.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx
 - app/pb_kits/playbook/pb_flex/docs/_flex_justify.md
@@ -2051,11 +2072,11 @@ 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.0.3
+rubygems_version: 3.1.6
 signing_key:
 specification_version: 4
 summary: Playbook Design System