playbook_ui 10.17.0 → 10.19.0.pre.lightbox

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1e8104e2057e245727105de8a2dc411bb0a82b03e44412429b9335b6493c242
-  data.tar.gz: 0332c556cdb6636b2faac2466ade547b58c38faed3bf08ca682f807acefbd2f7
+  metadata.gz: baa1f6f416384a560ac9d4e03d4aed20b4d01a980f4384c24a29a6a48ee19a60
+  data.tar.gz: 79ba5f8ef47057ac2e187c46676d559c59149afda9ecfb934debaab366104728
 SHA512:
-  metadata.gz: a0e1e774a8e2a0eebea5b07c03713ff74219e8eaa9d2fa6d1937d21192828db996c19ea381cb7a991d678e0dfaefe5ed121e72a20704a4fc386962afffaf5a45
-  data.tar.gz: f4ab414ba1ea7a825432df55853752307b5cba59c133f939f896ba28facf39293b2faa30bb596ea769d9aa442ecfbdda416d597a8a5a168251dacf345abea0ee
+  metadata.gz: edaa286cf749d9fdaa8b3ae854f59bc62681f0baffb90718b335a6774eec4133357f4eb7190b9f4545ec55b6cf41856052a0bc58ccedbd1d7c707b580654095a
+  data.tar.gz: a37e1263c2648e1bb032d49dc971871e7d5df0bd64091d4e61cdaf8e97f5df5915b2c6eb96f9b22508e3b3dc7c609206be70a979ccafd86616fa83b3cb005d38

data/app/pb_kits/playbook/_playbook.scss

@@ -47,6 +47,7 @@
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
+@import 'pb_lightbox/lightbox';
 @import 'pb_line_graph/line_graph';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';
@@ -93,7 +94,10 @@
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
+@import './utilities/cursor';
 @import './utilities/max_width';
 @import './utilities/positioning';
 @import './utilities/number_spacing';
 @import './utilities/shadow';
+@import './utilities/line_height';
+@import './utilities/display';

data/app/pb_kits/playbook/data/menu.yml

@@ -102,3 +102,4 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
+  - lightbox

data/app/pb_kits/playbook/index.js

@@ -4,7 +4,6 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
-export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -55,6 +54,7 @@ export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
+export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Message } from './pb_message/_message'
@@ -101,6 +101,7 @@ export { default as Toggle } from './pb_toggle/_toggle'
 export { default as Typeahead } from './pb_typeahead/_typeahead'
 export { default as User } from './pb_user/_user'
 export { default as UserBadge } from './pb_user_badge/_user_badge'
+export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
 export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
 // ^^^ React Component JSX Imports from the React Kits ^^^
 

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

@@ -1,2 +1,2 @@
 Custom data `colors` allow for color customization to match the needs of business requirements.
-Pass the prop colors and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array.
+Pass the prop colors and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -12,7 +12,7 @@ type BodyProps = {
   aria?: object,
   className?: string,
   children?: array<React.ReactChild>,
-  color?: 'default' | 'light' | 'lighter',
+  color?: 'default' | 'light' | 'lighter' | 'link',
   dark?: boolean,
   data?: object,
   highlightedText?: array<string>,

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -6,6 +6,7 @@ $pb_body_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
   lighter:        $text_lt_lighter,
+  link:           $primary,
 );
 
 $pb_dark_body_colors: (
@@ -63,4 +64,4 @@ $pb_body_status: (
 
 @mixin pb_body_positive {
   @include pb_body($success);
-}
+}

data/app/pb_kits/playbook/pb_body/body.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbBody
     class Body < Playbook::KitBase
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter],
+                   values: %w[default light lighter link],
                    default: "default"
       prop :status, type: Playbook::Props::Enum,
                     values: %w[neutral negative positive],

data/app/pb_kits/playbook/pb_body/body.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Body from './_body'
+
+test('returns namespaced class name', () => {
+  render(
+    <Body
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_body_kit')
+})
+
+test('with colors', () => {
+  render(
+    <Body
+        color="success"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_body_kit_success')
+})

data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb

@@ -12,6 +12,11 @@
   color: "lighter"
 }) %>
 
+<%= pb_rails("body", props: {
+  text: "I am a body kit (Link)",
+  color: "link"
+}) %>
+
 <%= pb_rails("body", props: {
   text: "I am a body kit (Status: negative)",
   status: "negative"

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -18,6 +18,11 @@ const BodyLight = (props) => {
           text="I am a body kit (Lighter)"
           {...props}
       />
+      <Body
+          color="link"
+          text="I am a body kit (Link)"
+          {...props}
+      />
       <Body
           status="negative"
           text="I am a body kit (Status: negative)"

data/app/pb_kits/playbook/pb_body/docs/_body_light.md

@@ -0,0 +1,6 @@
+##### Prop
+This kit uses `default` color by default, and can be replaced with colors below:
+
+* `light` `lighter` `success` `error` `link`
+
+- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -3,33 +3,33 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
 type CaptionProps = {
   aria?: object,
-  className?: string,
   children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: object,
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",
   text?: string,
   variant?: null | "link",
-  color?: "default" | "link" | "light",
 };
 
 const Caption = (props: CaptionProps) => {
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
-    className,
     children,
+    className,
     color,
     data = {},
     id,
     size = 'md',
     tag = 'div',
     text,
-    variant = null,
   } = props
   const tagOptions = [
     'h1',
@@ -48,7 +48,7 @@ const Caption = (props: CaptionProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_caption_kit', size, variant, color),
+    buildCss('pb_caption_kit', size, color),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -10,26 +10,15 @@
 
   &[class^="pb_caption_kit_xs"] {
     @include caption_xs;
-    &[class*="_link"] {
-      color: $primary;}
   }
 
-  &[class*="light"] {
-    color: $text_lt_light;
-  }
-
-  &[class*="default"] {
-    color: $text_lt_default;
-  }
-
-  &[class*="link"] {
-    color: $primary;
-  }
+  @include pb_caption_kit_colors;
 
-  &[class*="dark"] {
-    @each $dark_color_name, $dark_color_value in $pb_dark_caption_colors {
-      &[class*="_#{$dark_color_name}"][class*="dark"] {
-      @include caption_color($dark_color_value);
+  &.dark {
+    @include caption_dark;
+    @each $name, $color in $pb_dark_caption_colors {
+      &[class*="_#{$name}"] {
+        color: $color;
       }
     }
   }

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -4,13 +4,16 @@
 $pb_caption_colors: (
   default:        $text_lt_default,
   light:          $text_lt_light,
-  link:           $primary-action,
+  link:           $primary,
+  lighter:        $text_lt_lighter,
+  success:        $success,
+  error:          $error,
 );
 
 $pb_dark_caption_colors: (
-  default:        #fff,
+  default:        $text_dk_default,
   light:          $text_dk_light,
-  link:           $primary-action,
+  link:           $primary,
 );
 
 
@@ -39,3 +42,10 @@ $pb_dark_caption_colors: (
 @mixin caption_dark {
   color: $text_dk_light;
 }
+@mixin pb_caption_kit_colors {
+  @each $name, $color in $pb_caption_colors {
+    &[class*="#{$name}"] {
+      color: $color
+    }
+  }
+}

data/app/pb_kits/playbook/pb_caption/caption.rb

@@ -10,16 +10,14 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p span div caption],
                  default: "div"
       prop :text
-      prop :variant, type: Playbook::Props::Enum,
-                     values: [nil, "link"],
-                     default: nil
+      prop :variant, deprecated: true
 
       prop :color, type: Playbook::Props::Enum,
-                   values: [nil, "light", "default", "link"],
+                   values: [nil, "default", "light", "lighter", "success", "error", "link"],
                    default: nil
 
       def classname
-        generate_classname("pb_caption_kit", size, variant, color)
+        generate_classname("pb_caption_kit", size, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_caption/caption.test.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Caption from './_caption'
+
+test('returns namespaced class name', () => {
+  render(
+    <Caption
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_caption_kit_md')
+})
+
+test('with colors', () => {
+  render(
+    <Caption
+        color="success"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_caption_kit_md_success')
+})

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("caption", props: { text: "Test colors" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Caption } from '../../'
+
+const CaptionColors = (props) => {
+  return (
+    <div>
+      <Caption
+          text="Test colors"
+          {...props}
+      />
+      <Caption
+          color="success"
+          text="Test colors"
+          {...props}
+      />
+      <Caption
+          color="link"
+          text="Test colors"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default CaptionColors

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.md

@@ -0,0 +1,6 @@
+##### Prop
+Caption kit will use `light` color by default. Other available colors are: 
+
+* `default` `lighter` `success` `error` `link`
+
+- These colors are not for standard usage. You can use the color prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it

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

@@ -2,9 +2,9 @@ examples:
   rails:
     - caption_light: Default
     - caption_block: Block
-    - caption_example: Color Variations
+    - caption_colors: Colors
 
   react:
     - caption_light: Default
     - caption_block: Block
-    - caption_example: Color Variations
+    - caption_colors: Colors

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

@@ -1,4 +1,3 @@
 export { default as CaptionLight } from './_caption_light.jsx'
-export { default as CaptionVariants } from './_caption_variants.jsx'
+export { default as CaptionColors } from './_caption_colors.jsx'
 export { default as CaptionBlock } from './_caption_block.jsx'
-export { default as CaptionExample } from './_caption_example.jsx'

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

@@ -19,7 +19,7 @@
 
 <br>
 
-<%= pb_rails("card", props: { background: "light"})  do %>
+<%= pb_rails("card", props: { background: "light" })  do %>
   <%= pb_rails("body", props: {
   text: "Light"
 }) %>

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

@@ -1,4 +1,6 @@
-<%= pb_rails("card") do %>
+<%= pb_rails("card", props: { 
+  cursor: "pointer" 
+}) do %>
   Card Content
 <% end %>
 

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

@@ -5,9 +5,16 @@ import Card from '../_card'
 const CardContent = (props) => {
   return (
     <div>
-      <Card {...props}>{'Card content'}</Card>
+      <Card
+          cursor="pointer"
+          {...props}
+      >
+        {'Card content'}
+      </Card>
       <br />
-      <Card {...props}>
+      <Card
+          {...props}
+      >
         {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
 
 Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.`}

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements. 
+Pass the prop `colors` and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -1,3 +1,5 @@
 The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load.  Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.  
 
-If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
+If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
+
+

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -2,10 +2,19 @@ import { ensureAccessible, renderKit } from '../utilities/test-utils'
 import { DateTimeStacked } from '../'
 
 /* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
+const currentDate = new Date()
+
+const datetime = new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
+  monthName = datetime.toLocaleString('en-US', { month: 'short' }),
+  day = datetime.getDate(),
+  fullYear = datetime.getFullYear(),
+  optionalYear = currentDate.getFullYear() !== fullYear ? fullYear : ''
+
+const monthDayYear = `${monthName}${day}${optionalYear}`
 
 const props = {
   data: { testid: 'datetimestacked' },
-  datetime: new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
+  datetime,
 }
 
 test('Kit renders date time', () => {
@@ -19,17 +28,17 @@ it('Should be accessible', async () => {
 
 test('renders time in default timezone', () => {
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(/Mar311:00pEDT/i)
+  expect(kit).toHaveTextContent(`${monthDayYear}1:00pEDT`)
 })
 
 test('renders time in timezone', () => {
   props.timeZone = 'Asia/Tokyo'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(/Mar312:00aJST/i)
+  expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
 })
 
 test('renders time in timezone', () => {
   props.timeZone = 'America/Denver'
   const kit = renderKit(DateTimeStacked, props)
-  expect(kit).toHaveTextContent(/Mar3111:00aMDT/i)
+  expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
 })

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

@@ -25,6 +25,7 @@ type GaugeProps = {
   suffix: string,
   title: string,
   tooltipHtml: string,
+  colors: array,
 }
 
 const Gauge = (props: GaugeProps) => {
@@ -45,6 +46,7 @@ const Gauge = (props: GaugeProps) => {
     suffix = '',
     title = '',
     tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
+    colors = [],
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -76,6 +78,7 @@ const Gauge = (props: GaugeProps) => {
       style: style,
       tooltipHtml: tooltipHtml,
       type: 'gauge',
+      colors: colors,
     })
   }, [])
 

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb

@@ -0,0 +1,12 @@
+<% data = [
+  {
+    name: 'Name',
+    value: 67,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-colors",
+  chart_data: data,
+  colors: ['data-7']
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Name', value: 67 },
+]
+
+const GaugeColors = (props) => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-colors"
+        {...props}
+        colors={['data-7']}
+    />
+  </div>
+)
+
+export default GaugeColors

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+Pass the prop `colors` and use **ONE** desired value `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

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

@@ -9,6 +9,7 @@ examples:
   - gauge_min_max: Min Max Labels
   - gauge_sizing: Sizing
   - gauge_height: Height
+  - gauge_colors: Color Overrides
 
 
   react:
@@ -21,3 +22,4 @@ examples:
   - gauge_sizing: Sizing
   - gauge_height: Height
   - gauge_live_data: Live Data
+  - gauge_colors: Color Overrides

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

@@ -7,3 +7,4 @@ export { default as GaugeSizing } from './_gauge_sizing.jsx'
 export { default as GaugeTitle } from './_gauge_title.jsx'
 export { default as GaugeUnits } from './_gauge_units.jsx'
 export { default as GaugeLiveData } from './_gauge_live_data.jsx'
+export { default as GaugeColors } from './_gauge_colors.jsx'

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -20,6 +20,7 @@ module Playbook
       prop :disable_animation, type: Playbook::Props::Boolean, default: false
       prop :min, type: Playbook::Props::Numeric, default: 0
       prop :max, type: Playbook::Props::Numeric, default: 100
+      prop :colors, type: Playbook::Props::Array, default: []
 
       def chart_data_formatted
         chart_data.map { |hash| hash[:y] = hash.delete :value }
@@ -42,6 +43,7 @@ module Playbook
           style: style,
           tooltipHtml: tooltip_html,
           type: "gauge",
+          colors: colors,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -52,9 +52,9 @@ $pb_icon_circle_sizes: (
   @each $color_name, $color_value in $colors {
     &[class*=_#{$color_name}] {
       color: $color_value;
-      background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
       &.dark {
-        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_5);
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
       }
     }
   }

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb

@@ -5,7 +5,7 @@
 }) %>
 <%= pb_rails("icon_circle", props: {
   icon: "archive",
-  variant: "blue",
+  variant: "orange",
   size: "sm"
 }) %>
 <%= pb_rails("icon_circle", props: {

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx

@@ -15,7 +15,7 @@ const IconCircleColor = (props) => {
       <IconCircle
           icon="rocket"
           size="sm"
-          variant="blue"
+          variant="orange"
           {...props}
       />
       <br />

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md

@@ -0,0 +1 @@
+Customize your icon circle by passing one of our seven base colors to the `variant` prop: `royal` `blue` `orange` `purple` `teal` `red` `yellow` `green`

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -8,7 +8,7 @@ module Playbook
                   values: %w[xs sm md base lg xl],
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green],
+                     values: %w[default royal blue orange purple teal red yellow green],
                      default: "default"
 
       def classname