playbook_ui 13.33.1 → 13.34.0.pre.alpha.PLAY14143358

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_flex/flex.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_group/form_group.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from "../utilities/test-utils";
 
-import { Button, FormGroup } from "..";
+import { Button, FormGroup } from "playbook-ui";
 
 test("should render a div with a button child", () => {
   const testId = "primary-test"

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -16,9 +16,9 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 $space-sm/3;
+  padding: 0 calc($space-sm/3);
   height: $pb_form_pill_height;
-  border-radius: $pb_form_pill_height/2;
+  border-radius: calc($pb_form_pill_height/2);
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
@@ -52,12 +52,12 @@ $form_pill_colors: (
           color: $text_lt_default;
         }
         padding-left: $space-sm;
-        padding-right: $space-sm/2;
+        padding-right: calc($space-sm/2);
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: $space-sm/4;
-        padding-right: $space-sm/4;
+        padding-left: calc($space-sm/4);
+        padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
         // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
@@ -89,6 +89,10 @@ $form_pill_colors: (
     outline: $primary solid 2px;
     outline-offset: -1px;
   }
+  .pb_form_pill_icon {
+    height: 12px !important;
+    width: 12px !important;
+  }
   &.small {
     height: fit-content;
     height: -moz-fit-content;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -50,4 +50,15 @@ test('displays size variant', () => {
     )
     const kit = screen.getByTestId('formpill')
     expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+});
+
+test('displays icon', () => {
+    render(
+        <FormPill            
+            data={{ testid: testId }}
+            icon={"test"}
+        />
+    )
+    const kit = screen.getByTestId('formpill')
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
 });

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -1,4 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title'
@@ -21,6 +20,7 @@ type FormPillProps = {
   color?: "primary" | "neutral",
   data?: {[key: string]: string},
   tabIndex?: number,
+  icon?: string,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -42,9 +42,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     color = "primary",
     data = {},
     tabIndex,
+    icon = "",
   } = props
+
+  const iconClass = icon ? "_icon" : ""
   const css = classnames(
-    `pb_form_pill_kit_${color}`,
+    `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(props),
     className,
     size === 'small' ? 'small' : null,
@@ -61,29 +64,60 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
         {...dataProps}
         {...htmlProps}
     >
-        {name &&
+      {((name && !icon && !text) || (name && !icon && text)) && (
         <>
-        <Avatar
-            imageUrl={avatarUrl}
-            name={name}
-            size="xs"
-            status={null}
-        />
-        <Title
-            className="pb_form_pill_text"
-            size={4}
-            text={name}
-        />
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
         </>
-        }
-
-      {text &&
+      )}
+      {((name && icon && !text) || (name && icon && text)) && (
+        <>
+          <Avatar
+              imageUrl={avatarUrl}
+              name={name}
+              size="xs"
+              status={null}
+          />
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+          />
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+        </>
+      )}
+      {(!name && icon && text) && (
+        <>
+          <Icon
+              className="pb_form_pill_icon"
+              icon={icon}
+          />
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+          />
+        </>
+      )}
+      {(!name && !icon && text) && (
         <Title
             className="pb_form_pill_tag"
             size={4}
             text={text}
         />
-      }
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("form_pill", props: {
+    icon: "badge-check",
+    text: "icon and tag",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_icon.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import FormPill from '../_form_pill'
+
+const FormPillIcon = (props) => {
+  return (
+    <div>
+      <FormPill
+          icon="badge-check"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="icon and tag"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillIcon

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

@@ -5,10 +5,11 @@ examples:
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
-
+  # - form_pill_icon: Form Pill Icon
 
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
+  # - form_pill_icon: Form Pill Icon

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

@@ -2,4 +2,4 @@ export { default as FormPillUser } from './_form_pill_user.jsx'
 export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
-
+export { default as FormPillIcon } from './_form_pill_icon.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,12 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
-      <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
-        <% elsif object.text.present? %>
-          <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
-            <% end %>
-
-              <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
-                <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
-                  <% end %>
-                    <% end %>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
+    <% if object.icon.present? %>
+      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+    <% end %>
+  <% elsif object.text.present? %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
+      <% end %>
+  <% end %>
+  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
+    <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -15,9 +15,10 @@ module Playbook
                    values: %w[primary neutral],
                    default: "primary"
       prop :tabindex
+      prop :icon
 
       def classname
-        generate_classname("pb_form_pill_kit", color, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
       end
 
       def display_text
@@ -27,6 +28,10 @@ module Playbook
       def size_class
         size == "small" ? " small" : ""
       end
+
+      def icon_class
+        icon ? "icon" : nil
+      end
     end
   end
 end

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

@@ -7,8 +7,8 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import highchartsMore from "highcharts/highcharts-more";
 import solidGauge from "highcharts/modules/solid-gauge";
-import defaultColors from "../tokens/exports/_colors.scss";
-import typography from "../tokens/exports/_typography.scss";
+import defaultColors from "../tokens/exports/_colors.module.scss";
+import typography from "../tokens/exports/_typography.module.scss";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Name', value: 67 },

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

@@ -8,7 +8,7 @@ import {
   SectionSeparator,
   Body,
   Caption,
-} from "../..";
+} from "playbook-ui";
 
 const data = [{ name: "Name", value: 10 }];
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Name', value: 45 },

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Participants', value: 84 },

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Capacity', value: 75 },

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

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Gauge } from '../../'
+import { Button, Gauge } from 'playbook-ui'
 
 const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 
 const data = [{
   name: 'Rating', value: 4.5,

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 
 const data = [
   { name: 'Score', value: 780 },

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 
 const data1 = [
   { name: 'Data Used', value: 32 },

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

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

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

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

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:span,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:span) do %>
   <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js

@@ -2,7 +2,7 @@
 import React from 'react'
 import { render, screen, cleanup } from "../utilities/test-utils";
 
-import { Hashtag } from "..";
+import { Hashtag } from "playbook-ui";
 
 
 const testId = "primary-test"

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:span,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:span) do %>
     <mark>
       <%= content.presence || object.text %>
     </mark>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen, cleanup } from "../utilities/test-utils";
 
-import { HomeAddressStreet } from "..";
+import { HomeAddressStreet } from "playbook-ui";
 
 
 const testId = "primary-test"

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

@@ -1,3 +1,20 @@
+@import "../tokens/colors";
+
+// All the merges below create $icon_colors, a map of all color tokens in colors.scss
+$merge_kits1: map-merge($status_colors, $category_colors);
+$merge_kits2: map-merge($merge_kits1, $product_colors);
+$merge_kits3: map-merge($merge_kits2, $text_colors);
+$icon_colors: map-merge($merge_kits3, $data_colors);
+
+.pb_custom_icon, .pb_icon_kit {
+  @each $color_name, $color_value in $icon_colors {
+    &[class*="#{$color_name}"] {
+      color: $color_value;
+    }
+  }
+}
+
+// Rails custom icon styles
 svg.pb_custom_icon {
   width: 1em;
   fill: currentColor;

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 '../../'
+import { Icon } from 'playbook-ui'
 
 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