playbook_ui 10.16.0 → 10.19.0.pre.popover.alpha1

data/app/pb_kits/playbook/pb_popover/index.js

@@ -36,15 +36,14 @@ export default class PbPopover extends PbEnhancedElement {
       }
 
       setTimeout(() => {
-        this.popper.update()
         this.toggleTooltip()
+        this.popper.update()
       }, 0)
     })
   }
 
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target }) => {
-      const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
       const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
@@ -52,21 +51,17 @@ export default class PbPopover extends PbEnhancedElement {
         this.hideTooltip()
         break
       case 'outside':
-        if (isTooltipElement) {
-          this.checkCloseTooltip()
-        } else {
+        if (!isTooltipElement) {
           this.hideTooltip()
         }
         break
       case 'inside':
-        if (isTooltipElement || isTriggerElement) {
+        if (isTooltipElement) {
           this.hideTooltip()
-        } else {
-          this.checkCloseTooltip()
         }
         break
       }
-    }, { once: true })
+    }, { once: true, capture: true })
   }
 
   hideTooltip() {

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -3,7 +3,7 @@
   class: object.classname,
   data: object.data,
   id: object.id) do %>
-  <div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
+  <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>
     </div>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/StringConcatenation
 require "action_view"
 
 module Playbook
@@ -72,3 +73,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/StringConcatenation

data/app/pb_kits/playbook/pb_source/source.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/SingleArgumentDig, Style/HashLikeCase
 module Playbook
   module PbSource
     class Source < Playbook::KitBase
@@ -59,3 +60,5 @@ module Playbook
     end
   end
 end
+
+# rubocop:enable Style/SingleArgumentDig, Style/HashLikeCase

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

@@ -88,6 +88,56 @@
         border-color: $error;
       }
     }
+    .text_input_wrapper_add_on {
+      .add-on {
+        &-right {
+          .add-on-card {
+            border: 1px solid red;
+            border-left: 0;
+          }
+        }
+        &-left {
+          .add-on-card {
+            border: 1px solid red;
+            border-right: 0;
+          }
+        }
+      }
+      .border {
+        &_left {
+          &_on {
+            .card-right-aligned {
+              border-left: 0;
+            }
+          }
+          &_off {
+            .card-right-aligned {
+              border-left: 0;
+            }
+            .text_input {
+              border-right: 0;
+              padding-right: 0;
+            }
+          }
+        }
+        &_right {
+          &_on {
+            .card-left-aligned {
+              border-right: 0;
+            }
+          }
+          &_off {
+            .card-left-aligned {
+              border-right: 0;
+            }
+            .text_input {
+              border-left: 0;
+              padding-left: 0;
+            }
+          }
+        }
+      }
+    }
   }
   &.inline {
     .text_input_wrapper input::placeholder,
@@ -119,7 +169,7 @@
     &-card {
       height: 45px;
       margin: 0;
-      padding: 0 !important;
+      padding: 0;
       align-items: center;
       justify-content: center;
       width: 45px;
@@ -132,15 +182,15 @@
     }
     &-left {
       .text_input {
-        border-top-left-radius: 0 !important;
-        border-bottom-left-radius: 0 !important;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
       }
     }
 
     &-right {
       .text_input{
-        border-top-right-radius: 0 !important;
-        border-bottom-right-radius: 0 !important;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
     }
   }
@@ -148,15 +198,14 @@
     background-color: $focus_input_dark;
     border-width: 0px;
   }
-
   .card-left-aligned {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .card-right-aligned {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
   .border {
@@ -165,8 +214,8 @@
         border-right: 0;
       }
       .text_input {
-        border-left: 0 !important;
-        padding-left: 0 !important;
+        border-left: 0;
+        padding-left: 0;
       }
     }
     &_left_on {
@@ -184,8 +233,8 @@
         border-left: 0;
       }
       .text_input {
-        border-right: 0 !important;
-        padding-right: 0 !important;
+        border-right: 0;
+        padding-right: 0;
       }
     }
   }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -1,2 +1,21 @@
-<%= pb_rails("text_input", props: { error: "Please enter a valid email address", label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
-<%= pb_rails("text_input", props: { label: "Confirm Email Address", type: "email", placeholder: "Confirm email address" }) %>
+<%= pb_rails("text_input", props: {
+  add_on: {
+    alignment: "left",
+    border: true,
+    icon: "user"
+  },
+  error: "Please enter a valid email address",
+  label: "Email Address",
+  placeholder: "Enter email address",
+  type: "email"
+}) %>
+<%= pb_rails("text_input", props: {
+  add_on: {
+    alignment: "left",
+    border: true,
+    icon: "user"
+  },
+  label: "Confirm Email Address",
+  placeholder: "Confirm email address",
+  type: "email"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
-import {
-  TextInput,
-} from '../..'
+
+import TextInput from '../_text_input'
 
 const TextInputError = (props) => {
   const [email, setEmail] = useState('')
@@ -12,6 +11,7 @@ const TextInputError = (props) => {
   return (
     <div>
       <TextInput
+          addOn={{ icon: 'user', alignment: 'left', border: true }}
           error="Please enter a valid email address"
           label="Email Address"
           onChange={handleUpdateEmail}
@@ -20,6 +20,15 @@ const TextInputError = (props) => {
           value={email}
           {...props}
       />
+      <TextInput
+          addOn={{ icon: 'user', alignment: 'left', border: true }}
+          label="Confirm Email Address"
+          onChange={handleUpdateEmail}
+          placeholder="Confirm email address"
+          type="email"
+          value={email}
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# rubocop:disable Style/SingleArgumentDig
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
@@ -86,3 +87,4 @@ module Playbook
     end
   end
 end
+# rubocop:enable Style/SingleArgumentDig

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -3,12 +3,13 @@
 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 TitleProps = {
   aria?: object,
   children?: array<React.ReactNode> | React.ReactNode,
   className?: string,
+  color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: object,
   id?: string,
   size?: 1 | 2 | 3 | 4,
@@ -18,24 +19,25 @@ type TitleProps = {
 }
 
 const Title = (props: TitleProps) => {
+  if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
     children,
     className,
+    color,
     data = {},
     id,
     size = 3,
     tag = 'h3',
     text,
-    variant = null,
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss('pb_title_kit', size, variant),
+    buildCss('pb_title_kit', size, color),
     globalProps(props),
-    className
+    className,
   )
   const Tag = `${tag}`
 

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,26 +1,26 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import './title_mixin';
 
 [class^=pb_title_kit]{
   &[class*=_1] {
     @include pb_title_1;
+    @include title_colors;
   }
 
   &[class*=_2] {
     @include pb_title_2;
+    @include title_colors;
   }
 
   &[class*=_3] {
     @include pb_title_3;
+    @include title_colors;
   }
 
   &[class*=_4] {
     @include pb_title_4;
-
-    &[class*=_link]  {
-      color: $primary;
-    }
-
+    @include title_colors;
   }
 
   &.dark {

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -1 +1,18 @@
 @import "../tokens/titles";
+
+$pb_title_colors: (
+  default: $text_lt_default,
+  light: $text_lt_light,
+  lighter: $text_lt_lighter,
+  success: $success,
+  error: $error,
+  link: $primary
+);
+
+@mixin title_colors {
+  @each $name, $color in $pb_title_colors {
+    &[class*=_#{$name}] {
+      color: $color
+    }
+  }
+}

data/app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("title", props: { text: "Default Color", tag: "h1", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "link" }) %> 
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "success" }) %>
+<%= pb_rails("title", props: { text: "Title Color", tag: "h1", size: 3, color: "error" }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_colors.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleColors = (props) => {
+  return (
+    <div>
+      <Title
+          text="Default Color"
+          {...props}
+      />
+      <Title
+          color="link"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+      <Title
+          color="success"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+      <Title
+          color="error"
+          size={3}
+          tag="h1"
+          text="Title Color"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleColors

data/app/pb_kits/playbook/pb_title/docs/_title_colors.md

@@ -0,0 +1,6 @@
+##### Prop
+Title kit will use `default` color by default. Other available colors are:
+
+*`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_title/docs/_title_light.html.erb

@@ -1,4 +1,7 @@
-<%= pb_rails("title", props: { text: "Default Title" }) %>
+<%= pb_rails("title", props: {
+})  do %>
+    Default Title
+<% end %>
 
 <br/>
 

data/app/pb_kits/playbook/pb_title/docs/_title_light.md

@@ -0,0 +1,3 @@
+##### Prop
+Title kit will use `h3` tag by default, and `size 3` as well. 
+Size and tag props are not in correlation with each other, meaning any size can be used along with any tag.

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

@@ -1,8 +1,8 @@
 examples:
   rails:
   - title_light: Light UI
-  - title_variants: Variants
+  - title_colors: Colors
 
   react:
   - title_light: Light UI
-  - title_variants: Variants
+  - title_colors: Colors

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

@@ -1,2 +1,2 @@
 export { default as TitleLight } from './_title_light.jsx'
-export { default as TitleVariants } from './_title_variants.jsx'
+export { default as TitleColors } from './_title_colors.jsx'

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,5 +1,7 @@
-<%= content_tag(object.tag, object.text,
+<%= content_tag(object.tag,
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) %>
+    class: object.classname) do %>
+        <%= content.presence || object.text %>
+<% end %>

data/app/pb_kits/playbook/pb_title/title.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbTitle
     class Title < Playbook::KitBase
+      prop :color, type: Playbook::Props::Enum,
+                   values: [nil, "default", "light", "lighter", "success", "error", "link"],
+                   default: nil
       prop :size, type: Playbook::Props::Enum,
                   values: [1, 2, 3, 4],
                   default: 3
@@ -10,12 +13,10 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "h3"
       prop :text
-      prop :variant, type: Playbook::Props::Enum,
-                     values: [nil, "link"],
-                     default: nil
+      prop :variant, deprecated: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant)
+        generate_classname("pb_title_kit", size, color)
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

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

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -10,25 +10,14 @@ import solidGauge from 'highcharts/modules/solid-gauge'
 pie(Highcharts)
 
 // Map Data Color String Props to our SCSS Variables
+
 const mapColors = (array) => {
+  const regex = /(data)\-[1-8]/ //eslint-disable-line
+
   const newArray = array.map((item) => {
-    return item == 'data-1'
-      ? `${colors.data_1}`
-      : item == 'data-2'
-        ? `${colors.data_2}`
-        : item == 'data-3'
-          ? `${colors.data_3}`
-          : item == 'data-4'
-            ? `${colors.data_4}`
-            : item == 'data-5'
-              ? `${colors.data_5}`
-              : item == 'data-6'
-                ? `${colors.data_6}`
-                : item == 'data-7'
-                  ? `${colors.data_7}`
-                  : item == 'data-8'
-                    ? `${colors.data_8}`
-                    : ''
+    return regex.test(item)
+      ? `${colors[`data_${item[item.length - 1]}`]}`
+      : item
   })
   return newArray
 }
@@ -72,13 +61,13 @@ class pbChart {
     if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
       this.setupPieChart(options)
     } else if (this.options.type == 'gauge') {
-      this.setupGauge()
+      this.setupGauge(options)
     } else {
-      this.setupChart()
+      this.setupChart(options)
     }
   }
 
-  setupGauge() {
+  setupGauge(options) {
     highchartsMore(Highcharts)
     solidGauge(Highcharts)
     Highcharts.setOptions(highchartsTheme)
@@ -128,19 +117,21 @@ class pbChart {
         pointFormat: this.defaults.tooltipHtml,
         followPointer: true,
       },
+      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
       plotOptions: {
         series: {
           animation: !this.defaults.disableAnimation,
         },
         solidgauge: {
+          borderColor: options.colors !== undefined && options.colors.length === 1 ? mapColors(options.colors).join() : highchartsTheme.colors[0],
           dataLabels: {
             format: `<span class="prefix">${this.defaults.prefix}</span>` +
             '<span class="fix">{y:,f}</span>' +
             `<span class="suffix">${this.defaults.suffix}</span>`,
-          },
-        },
+          }        },
       },
-    })
+    },
+    )
     document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
     if (document.querySelector('.prefix')) {
       document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
@@ -195,7 +186,7 @@ class pbChart {
     })
   }
 
-  setupChart() {
+  setupChart(options) {
     Highcharts.setOptions(highchartsTheme)
 
     const configOptions = {
@@ -222,6 +213,7 @@ class pbChart {
       legend: {
         enabled: this.defaults.legend,
       },
+      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
       plotOptions: {
         series: {
           pointStart: this.defaults.pointStart,

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

@@ -12,6 +12,7 @@ $red:                 #FF2229;
 $yellow:              #F9BB00;
 $green:               #00CA74;
 $orange:              #FD804C;
+$default:             #93a8b8;
 $colors: (
   royal:              $royal,
   purple:             $purple,
@@ -19,7 +20,8 @@ $colors: (
   red:                $red,
   yellow:             $yellow,
   green:              $green,
-  orange:             $orange
+  orange:             $orange,
+  default:            $default,
 );
 
 /* Specialty Gradient -----------------*/

data/app/pb_kits/playbook/utilities/_cursor.scss

@@ -0,0 +1,3 @@
+.cursor_pointer {
+  cursor: pointer;
+}

data/app/pb_kits/playbook/utilities/_display.scss

@@ -0,0 +1,23 @@
+.display_block {
+    display: block;
+}
+
+.display_inline_block {
+    display: inline-block;
+}
+
+.display_inline {
+    display: inline;
+}
+
+.display_flex {
+    display: flex;
+}
+
+.display_inline_flex {
+    display: inline-flex;
+}
+
+.display_hidden {
+    display: none;
+}

data/app/pb_kits/playbook/utilities/_line_height.scss

@@ -0,0 +1,11 @@
+@import "../tokens/exports/line_height";
+
+@mixin line-height-classes($line-height-list) {
+  @each $name, $line-height in $line-height-list {
+    [class*=pb_] .line_height_#{$name} {
+      line-height: $line-height;
+    }
+  }
+}
+@include line-height-classes($line_height);
+