playbook_ui 14.18.0 → 14.19.0.pre.rc.1

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts

@@ -0,0 +1,110 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+
+const lineGraphTheme = {
+  title: {
+    text: "",
+    style: {
+      color: colors.text_lt_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.bold,
+      fontSize: typography.heading_3,
+    },
+  },
+  subtitle: {
+    text: "" ,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    },
+  },
+  chart: {
+    type: "line",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    line: {
+      dataLabels: {
+        enabled: false,
+      },
+    },
+  },
+  credits: { enabled: false },
+  legend: { enabled: false },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_light,
+    tickColor: colors.border_light,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        color: colors.text_lt_default,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.regular,
+        fontSize: typography.heading_4,
+      },
+    },
+  },
+  yAxis: {
+    alternateGridColor: undefined as string | undefined,
+    minorTickInterval: null as number | null,
+    gridLineColor: colors.border_light,
+    minorGridLineColor: colors.border_light,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  },
+}
+
+export default lineGraphTheme;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import Icon from '../../pb_icon/_icon'
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
+    const error = (
+        <>
+            <Icon icon="warning" /> Missing phone number.
+        </>
+    )
+
     return (
         <form
             action=""
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error="Missing phone number."
+                error={error}
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb

@@ -0,0 +1,46 @@
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center",
+    margin_bottom: "md"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "append-to-popover-1"
+    }) %>
+    <%= pb_rails("popover", props: {
+        trigger_element_id: "append-to-popover-1",
+        tooltip_id: "append-to-tooltip-1",
+        offset: true,
+        position: "top",
+        append_to: "parent",
+    }) do %>
+        I'm a popover. I have been appended to my parent element.
+    <% end %>
+<% end %>
+
+<%= pb_rails("flex", props: {
+    dark: true,
+    orientation: "row",
+    vertical: "center"
+    }) do %>
+    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
+    &nbsp;
+    <%= pb_rails("circle_icon_button", props: {
+        variant: "secondary",
+        icon: "info",
+        id: "append-to-popover-2"
+    }) %>
+    <%= pb_rails("popover", props: {
+        trigger_element_id: "append-to-popover-2",
+        tooltip_id: "append-to-tooltip-2",
+        offset: true,
+        position: "top",
+        append_to: ".kit-show-wrapper",
+    }) do %>
+        I'm a popover. I have been appended to the .kit-show-wrapper.
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md

@@ -0,0 +1 @@
+By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -6,6 +6,7 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
+    - popover_append_to: Append To
 
   react:
     - popover_default: Default

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

@@ -13,7 +13,15 @@ export default class PbPopover extends PbEnhancedElement {
   }
 
   moveTooltip() {
-    document.querySelector('body').appendChild(this.tooltip)
+    let container: HTMLElement | null;
+
+    if (this.appendTo === "parent") {
+      container = this.element.parentElement;
+    } else if (this.appendTo) {
+      container = document.querySelector(this.appendTo);
+    }
+
+    (container || document.body).appendChild(this.tooltip);
   }
 
   connect() {
@@ -108,4 +116,8 @@ export default class PbPopover extends PbEnhancedElement {
   get closeOnClick() {
     return this.element.dataset.pbPopoverCloseOnClick
   }
+
+  get appendTo() {
+    return this.element.dataset.pbPopoverAppendTo;
+  }
 }

data/app/pb_kits/playbook/pb_popover/popover.rb

@@ -3,6 +3,7 @@
 module Playbook
   module PbPopover
     class Popover < Playbook::KitBase
+      prop :append_to, type: Playbook::Props::String, default: "body"
       prop :position, type: Playbook::Props::Enum,
                       values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
                       default: "left"
@@ -47,6 +48,7 @@ module Playbook
 
       def data
         Hash(values[:data]).merge(
+          pb_popover_append_to: append_to,
           pb_popover_kit: true,
           pb_popover_position: position,
           pb_popover_trigger_element_id: trigger_element_id,

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Body from '../../pb_body/_body'
 import Select from '../../pb_select/_select'
+import Icon from '../../pb_icon/_icon'
 
 const SelectError = (props) => {
   const options = [
@@ -18,10 +19,14 @@ const SelectError = (props) => {
     },
   ]
 
+  const error = (<>
+    <Icon icon="warning" /> Please make a valid selection
+  </>)
+
   return (
     <div>
       <Select
-          error="Please make a valid selection"
+          error={error}
           label="Favorite Food"
           name="food"
           options={options}
@@ -29,7 +34,7 @@ const SelectError = (props) => {
           {...props}
       />
       <Body
-          error="Please make a valid selection"
+          error={error}
           status="negative"
           {...props}
       />

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

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

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,15 +1,21 @@
 import React, {useState} from 'react'
 import Textarea from '../../pb_textarea/_textarea'
+import Icon from '../../pb_icon/_icon'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')
   const handleChange = (event) => {
     setValue(event.target.value)
   }
+  const error = (
+    <>
+        <Icon icon="warning" /> This field has an error!
+    </>
+  )
   return (
     <div>
       <Textarea
-          error="This field has an error!"
+          error={error}
           label="Label"
           name="comment"
           onChange={(e)=> handleChange(e)}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 
 import Typeahead from '../_typeahead'
+import Icon from '../../pb_icon/_icon'
 
 const options = [
   { label: 'Orange', value: '#FFA500' },
@@ -10,7 +11,10 @@ const options = [
 ]
 
 const TypeaheadErrorState = (props) => {
-  const [errorState, setErrorState] = useState("Please make a valid selection");
+  const error = (<>
+    <Icon icon="warning" /> Please make a valid selection
+  </>)
+  const [errorState, setErrorState] = useState(error);
   const [searchValue, setSearchValue] = useState(null);
   
   const handleOnChange = (value) => setSearchValue(value)
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
       if(searchValue) {
         setErrorState("")
       } else {
-        setErrorState("Please make a valid selection")
+        setErrorState(error)
       }
     }, [searchValue])