playbook_ui 13.33.1.pre.alpha.PLAY14143336 → 13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -23,6 +23,7 @@ type IconProps = {
   aria?: {[key: string]: string},
   border?: string,
   className?: string,
+  color?: string,
   customIcon?: {[key: string] :SVGElement},
   data?: {[key: string]: string},
   fixedWidth?: boolean,
@@ -121,6 +122,7 @@ const Icon = (props: IconProps) => {
     aria = {},
     border = false,
     className,
+    color,
     customIcon,
     data = {},
     fixedWidth = true,
@@ -169,6 +171,7 @@ const Icon = (props: IconProps) => {
     (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
     (iconElement || customIcon) ? 'pb_custom_icon' : fontStyle,
     iconElement ? 'svg-inline--fa' : '',
+    color ? `color_${color}` : '',
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx

@@ -0,0 +1,34 @@
+import React from "react"
+import Icon from "../_icon"
+
+const IconDefault = (props) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column"}}>
+      <Icon
+          color="primary"
+          fixedWidth
+          icon="user"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="data_4"
+          fixedWidth
+          icon="recycle"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="product_5_background"
+          fixedWidth
+          icon="product-roofing"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconDefault

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -0,0 +1 @@
+Pass any text, status, data, product, or category Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon } from 'playbook-ui'
+import { Icon } from '../../'
 
 const config = {
   icon: (

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

@@ -9,6 +9,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_color: Icon Color
 
   react:
   - icon_default: Icon Default
@@ -20,6 +21,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_color: Icon Color
 
   swift:
   - icon_default_swift: Icon Default

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

@@ -7,3 +7,4 @@ export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
 export { default as IconFaKit} from './_icon_fa_kit.jsx'
+export { default as IconColor } from './_icon_color.jsx'

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -36,6 +36,7 @@ module Playbook
                         default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
+      prop :color, type: Playbook::Props::String
 
       def valid_emoji?
         emoji_regex = /\p{Emoji}/
@@ -45,6 +46,7 @@ module Playbook
       def classname
         generate_classname(
           "pb_icon_kit",
+          color_class,
           font_style_class,
           icon_class,
           border_class,
@@ -65,6 +67,7 @@ module Playbook
         generate_classname(
           "pb_icon_kit",
           border_class,
+          color_class,
           fixed_width_class,
           flip_class,
           inverse_class,
@@ -104,7 +107,8 @@ module Playbook
         svg["aria"] = object.aria
         svg["height"] = "auto"
         svg["width"] = "auto"
-        doc.at_css("path")["fill"] = "currentColor"
+        fill_color = object.color || "currentColor"
+        doc.at_css("path")["fill"] = fill_color
         raw doc
       end
 
@@ -200,6 +204,10 @@ module Playbook
         class_name = is_svg? ? "spin" : "fa-spin"
         spin ? class_name : nil
       end
+
+      def color_class
+        color ? "color_#{color}" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -12,7 +12,7 @@ describe("Icon Kit", () => {
                 data={{ testid: testId }}
                 fixedWidth
                 icon="user"
-      />
+            />
         )
 
         const kit = screen.getByTestId(testId)
@@ -27,7 +27,7 @@ describe("Icon Kit", () => {
                 fixedWidth
                 icon="user"
                 rotation={rotateProp}
-      />
+            />
         )
 
         const kit = screen.getByTestId(testId)
@@ -44,7 +44,7 @@ describe("Icon Kit", () => {
                 fixedWidth
                 flip="horizontal"
                 icon="user"
-      />
+            />
         )
 
         const kit = screen.getByTestId(testId)
@@ -59,7 +59,7 @@ describe("Icon Kit", () => {
                 fixedWidth
                 icon="spinner"
                 spin
-      />
+            />
         )
 
         const kit = screen.getByTestId(testId)
@@ -73,7 +73,7 @@ describe("Icon Kit", () => {
                 fixedWidth
                 icon="arrow-left"
                 pull="left"
-      />
+            />
         )
 
         const kit = screen.getByTestId(testId)
@@ -87,7 +87,7 @@ describe("Icon Kit", () => {
                 fixedWidth
                 icon="arrow-left"
                 pull="left"
-      />
+            />
         )
 
         const kit = screen.getByTestId(testId)
@@ -101,7 +101,7 @@ describe("Icon Kit", () => {
                 data={{ testid: testId }}
                 fixedWidth
                 icon="user"
-      />
+            />
         )
 
         const kit = screen.getByTestId(testId)
@@ -128,7 +128,7 @@ describe("Icon Kit", () => {
                     data={{ testid: testId }}
                     icon="user"
                     size={sizeProp}
-          />
+                />
             )
     
             const kit = screen.getByTestId(testId)
@@ -145,11 +145,24 @@ describe("Icon Kit", () => {
                 fixedWidth
                 fontStyle="fas"
                 icon="user"
-      />
+            />
         )
 
         const kit = screen.getByTestId(testId)
         expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
     })
 
+    test("renders with color prop", () => {
+        render(
+            <Icon
+                color="primary"
+                data={{ testid: testId }}
+                icon="user"
+            />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("color_primary")
+    })
+
 })

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

@@ -54,7 +54,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: calc($size/2);
+      border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
       font-size: $size * 0.38;
@@ -68,7 +68,7 @@ $pb_icon_circle_sizes: (
   }
 
   @each $color_name, $color_value in $colors {
-    &[class*=_#{"" + $color_name}] {
+    &[class*=_#{$color_name}] {
       color: $color_value;
       background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
       &.dark {

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconCircle } from 'playbook-ui'
+import { IconCircle } from '../..'
 
 const IconCircleSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -50,15 +50,4 @@
       margin-right: $space-sm;
     }
   }
-  [class^=pb_title_kit_1] + [class^=pb_body_kit] {
-    font-size: 36px;
-  }
-
-  [class^=pb_title_kit_2] + [class^=pb_body_kit] {
-    font-size: 24px
-  }
-
-  [class^=pb_title_kit_3] + [class^=pb_body_kit] {
-    font-size: 20px;
-  }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from 'playbook-ui'
+import { IconStatValue } from '../../'
 
 const IconStatValueColor = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from 'playbook-ui'
+import { IconStatValue } from '../../'
 
 const IconStatValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from 'playbook-ui'
+import { IconStatValue } from '../../'
 
 const IconStatValueSizes = (props) => {
   return (

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconStatValue } from 'playbook-ui'
+import { IconStatValue } from '../../'
 
 const IconStatValueVertical = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -2,6 +2,6 @@
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: calc($space-xs/1.5);
+    margin-bottom: $space-xs/1.5;
   }
 }

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LabelValue } from 'playbook-ui'
+import { LabelValue } from '../../'
 
 const LabelValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LabelValue } from 'playbook-ui'
+import { LabelValue } from '../../'
 
 const LabelValueDetails = (props) => {
   return (

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, LabelValue, Title } from 'playbook-ui'
+import { Flex, LabelValue, Title } from '../../'
 
 const LabelValueDetailsExamples = (props) => {
   return (

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { render, cleanup } from "../utilities/test-utils"
-import { Layout, Card } from "playbook-ui"
+import { Layout, Card } from ".."
 
 function LayoutTest(props) {
   return (

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Legend } from 'playbook-ui'
+import { Legend } from '../..'
 
 const LegendColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Legend } from 'playbook-ui'
+import { Legend } from '../..'
 
 const LegendCustomColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Legend } from 'playbook-ui'
+import { Legend } from '../..'
 
 const LegendPrefix = (props) => (
   <div>

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import { noop } from 'lodash'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -1,3 +1,5 @@
+/* @flow */
+
 import { noop } from 'lodash'
 import React, { useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/no-multi-comp */
+/* @flow */
 import React, { useContext } from "react";
 import classnames from "classnames";
 import {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from 'playbook-ui'
+import { Flex, Image } from '../../'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCompoundComponent = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
+import { Flex, Image, Button, Body, FlexItem } from '../../'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCurrentPhoto = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from "react";
-import { Flex, Image, Title, Pill } from "playbook-ui";
+import { Flex, Image, Title, Pill } from "../../";
 import Lightbox from "../_lightbox.tsx";
 
 const LightboxCustomHeader = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from 'playbook-ui'
+import { Flex, Image } from '../../'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxDefault = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from 'playbook-ui'
+import { Flex, Image } from '../../'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxMultiple = (props) => {

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cleanup, fireEvent, render, screen } from '../utilities/test-utils'
 
-import { Lightbox } from 'playbook-ui'
+import { Lightbox } from '../'
 
 const testId = 'customId',
   kitClass = 'pb_lightbox_kit',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph } from 'playbook-ui'
+import { LineGraph } from '../..'
 
 const data = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph } from 'playbook-ui'
+import { LineGraph } from '../..'
 
 const data = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph, Title } from 'playbook-ui'
+import { LineGraph, Title } from '../..'
 
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js

@@ -1,5 +1,5 @@
 import { commonSettings } from '../pb_dashboard/commonSettings.js'
-import typography from '../tokens/exports/_typography.module.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 const markerStyles = (highchart) => {
   highchart.plotOptions.line.marker.enabled = true

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme } from 'playbook-ui'
+import { Map, mapTheme } from '../../'
 import maplibregl from 'maplibre-gl'
 
 const MapDefault = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme, MapCustomButton } from 'playbook-ui'
+import { Map, mapTheme, MapCustomButton } from '../..'
 import maplibregl from 'maplibre-gl'
 
 const MapWithCustomButton = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme } from 'playbook-ui'
+import { Map, mapTheme } from '../../'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 

data/app/pb_kits/playbook/pb_map/map.test.jsx

@@ -1,6 +1,6 @@
 import { renderKit } from '../utilities/test-utils'
 
-import { Map } from 'playbook-ui'
+import { Map } from '../'
 
 /* See these resources for more testing info:
   - https://github.com/testing-library/jest-dom#usage for useage and examples

data/app/pb_kits/playbook/pb_map/pbMapTheme.ts

@@ -1,4 +1,4 @@
-import colors from '../tokens/exports/_colors.module.scss'
+import colors from '../tokens/exports/_colors.scss'
 
 const mapTheme = {
     marker : colors.primary_action,

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -17,7 +17,7 @@
     }
 
     .message_text {
-      margin: 0 0 calc($space-xs/2);
+      margin: 0 0 $space-xs/2;
     }
 
     .message_title {

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Message } from 'playbook-ui'
+import { Message } from '../../'
 
 const MessageTimestamp = (props) => {
   return (

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { MultiLevelSelect } from 'playbook-ui'
+import { MultiLevelSelect } from '../'
 
 const treeData = {
   label: 'search me',

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -18,7 +18,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     justify-content: center;
     width: $pb_multiple_users_size;
     height: $pb_multiple_users_size;
-    border-radius: calc($pb_multiple_users_size/2) + 2;
+    border-radius: ($pb_multiple_users_size/2) + 2;
     background: tint($primary, 90%);
     border: $pb_multiple_users_border_size solid $white;
     color: $primary;

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { MultipleUsers } from 'playbook-ui'
+import { MultipleUsers } from '../../'
 
 const MultipleUsersDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { MultipleUsers } from 'playbook-ui'
+import { MultipleUsers } from '../../'
 
 const MultipleUsersReverse = (props) => {
   return (

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, MultipleUsers } from 'playbook-ui'
+import { Body, MultipleUsers } from '../../'
 
 const MultipleUsersSize = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Nav, NavItem } from 'playbook-ui'
+import { Nav, NavItem } from '../..'
 
 const CollapsibleNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Nav, NavItem, useCollapsible } from "playbook-ui"
+import { Nav, NavItem, useCollapsible } from "../.."
 
 const CollapsibleNavCustom = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Nav, NavItem } from 'playbook-ui'
+import { Nav, NavItem } from '../..'
 
 const CollapsibleNavItemSpacing = (props) => {
   return (