playbook_ui 14.18.0 → 14.19.0.pre.alpha.PLAY21297675

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

@@ -0,0 +1,52 @@
+import React from 'react'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+}, {
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+const baseOptions = {
+  series: data,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+}
+
+const LineGraphPbStyles = () => {
+  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
+
+  return(
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default LineGraphPbStyles

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md

@@ -0,0 +1 @@
+You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

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

@@ -11,6 +11,7 @@ examples:
 
   react:
   - line_graph_default: Default
+  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,3 +4,4 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
+export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

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_message/_message.tsx

@@ -13,6 +13,7 @@ import MessageMention from './_message_mention'
 
 type MessageProps = {
   aria: { [key: string]: string },
+  avatarGrayscale?: boolean,
   avatarName?: string,
   avatarStatus?: "away" | "offline" | "online",
   avatarUrl?: string,
@@ -32,6 +33,7 @@ type MessageProps = {
 const Message = (props: MessageProps) => {
   const {
     aria = {},
+    avatarGrayscale = false,
     avatarName,
     avatarStatus = null,
     avatarUrl,
@@ -71,6 +73,7 @@ const Message = (props: MessageProps) => {
     >
       {shouldDisplayAvatar &&
         <Avatar
+            grayscale={avatarGrayscale}
             imageUrl={avatarUrl}
             name={avatarName}
             size="xs"

data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("message", props: {
+  label: "Mike Bishop",
+  message: "So long, and thanks for all the fish!",
+  timestamp: "3 months ago",
+  avatar_name: "Mike Bishop",
+  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
+  avatar_status: "offline",
+  avatar_grayscale: true,
+}) %>

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

@@ -0,0 +1,21 @@
+import React from "react"
+
+import Message from "../_message"
+
+const MessageGrayscale = (props) => {
+  return (
+    <Message
+        avatarGrayscale
+        avatarName='Mike Bishop'
+        avatarStatus='offline'
+        avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
+        borderRadius='rounded'
+        label='Mike Bishop'
+        message='So long, and thanks for all the fish!'
+        timestamp='3 months ago'
+        {...props}
+    />
+  )
+}
+
+export default MessageGrayscale

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

@@ -5,12 +5,14 @@ examples:
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+  - message_grayscale: Grayscale Avatar
 
   react:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+  - message_grayscale: Grayscale Avatar
 
   swift:
    - message_default_swift: Default

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

@@ -2,3 +2,4 @@ export { default as MessageDefault } from './_message_default.jsx'
 export { default as MessageTimestamp } from './_message_timestamp.jsx'
 export { default as MessageHover } from './_message_hover.jsx'
 export { default as MessageMentions } from './_message_mentions.jsx'
+export { default as MessageGrayscale } from './_message_grayscale.jsx'

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -4,7 +4,8 @@
         name: object.avatar_name,
         size: "xs",
         image_url: object.avatar_url,
-        status: object.avatar_status
+        status: object.avatar_status,
+        grayscale: object.avatar_grayscale
       }) %>
     <% end %>
     <div class="content_wrapper">

data/app/pb_kits/playbook/pb_message/message.rb

@@ -6,6 +6,7 @@ module Playbook
       prop :avatar_name
       prop :avatar_status
       prop :avatar_url
+      prop :avatar_grayscale, type: Playbook::Props::Boolean, default: false
       prop :label
       prop :message
       prop :timestamp

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -78,7 +78,8 @@ $overlay_colors: (
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
-    & [class*="overflow_auto"] {
+    & [class*="overflow_auto"],
+    .overlay_token_container {
       &::-webkit-scrollbar {
         display: none !important;
       }

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
         <Flex
             columnGap="lg"
             orientation="row"
-            ref={ref} 
+            ref={ref}
         >
             {Array.from({ length: 15 }, (_, index) => (
                 <FlexItem key={index}>

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -30,7 +30,7 @@ const OverlayToken = (props: OverlayChildrenProps) => {
         if (container) {
             const { scrollLeft, scrollWidth, clientWidth } = container;
             const atStart = scrollLeft === 0;
-            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1; 
+            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
 
             setIsAtStart(atStart);
             setIsAtEnd(atEnd);
@@ -64,16 +64,17 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     return (
         <>
             <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
-            {dynamic ? 
+            {dynamic ?
                 <div
+                    className="overlay_token_container"
                     ref={scrollContainerRef}
                     style={{
-                        overflowX: 'auto',     
+                        overflowX: 'auto',
                     }}
                 >
                     {children}
                 </div>
-                : 
+                :
                     children
                 }
             {hasSubsequentOverlay &&

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -39,6 +39,9 @@ $flag-min-resolution: 192dpi;
     color: $charcoal;
   }
 
+  .iti__country-list {
+    min-width: $dropdown-min-width;
+  }
   // iti-spacer-horizontal's default is 8px, or $space_xs 
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
@@ -227,6 +230,16 @@ $flag-min-resolution: 192dpi;
     .iti__dropdown-content {
       border-radius: $space_xs; 
       border: 1px solid $border_dark !important;
+      .iti__search-input {
+        background-color: $bg_dark_card;
+        &:hover {
+          background-color: $bg_dark_card;
+        }      
+        &:active,
+        &:focus {
+          background-color: $card_dark;
+        }
+      }
     }
 
     .iti__divider {

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -37,6 +37,7 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
+  countrySearch?: boolean,
 }
 
 enum ValidationError {
@@ -91,6 +92,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
+    countrySearch = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -242,7 +244,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
-      countrySearch: false,
+      countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
       hiddenInput: hiddenInputs ? () => ({

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("phone_number_input", props: {
+    country_search: true, 
+    id: "country-search",
+}) %>
+
+<%= pb_rails("phone_number_input", props: {
+    country_search: true, 
+    id: "country-search-limited",
+    only_countries: ["br", "us", "ph", "gb"],
+}) %>

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import PhoneNumberInput from '../_phone_number_input'
+
+const PhoneNumberInputCountrySearch = (props) => (
+    <>
+        <PhoneNumberInput
+            countrySearch
+            id='country-search'
+            {...props} 
+        />
+        <PhoneNumberInput
+            countrySearch
+            id='country-search-limited'
+            onlyCountries={["br", "us", "ph", "gb"]}
+            {...props} 
+        />
+    </>
+)
+
+export default PhoneNumberInputCountrySearch

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md

@@ -0,0 +1 @@
+Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.

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_phone_number_input/docs/example.yml

@@ -9,6 +9,7 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
+  - phone_number_input_country_search: Country Search
 
   rails:
   - phone_number_input_default: Default
@@ -18,4 +19,5 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
+  - phone_number_input_country_search: Country Search
   

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

@@ -6,3 +6,4 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
+export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -25,6 +25,8 @@ module Playbook
                                 default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
+      prop :country_search, type: Playbook::Props::Boolean,
+                            default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -45,6 +47,7 @@ module Playbook
           preferredCountries: preferred_countries,
           required: required,
           value: value,
+          countrySearch: country_search,
         }
       end
     end

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -139,3 +139,22 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
 
     expect(input.value).toBe("555-555-5555");
 });
+
+test("should pass countrySearch prop to component", () => {
+    window.intlTelInput = jest.fn(() => ({
+      getSelectedCountryData: jest.fn(() => ({})),
+      isValidNumber: jest.fn(() => true),
+      getValidationError: jest.fn(() => 0),
+    }));
+    
+    const props = {
+      id: testId,
+      countrySearch: true,
+      data: { testid: 'phone-input-with-search' }
+    };
+  
+    render(<PhoneNumberInput {...props} />);
+    
+    const wrapper = screen.getByTestId('phone-input-with-search');
+    expect(wrapper).toBeInTheDocument();
+});

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_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -19,7 +19,7 @@ type SectionSeparatorProps = {
   orientation?: "horizontal" | "vertical",
   text?: string,
   variant?: "card" | "background",
-}
+} & GlobalProps
 
 const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const {

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -143,6 +143,16 @@
       select {
         font-size: 12px;
       }
+      .pb_select_kit_wrapper.error {
+        .pb_select_kit_caret {
+          top: 13.7px;
+        }
+      }
+    }
+    .pb_select_kit_wrapper.error {
+      .pb_select_kit_caret {
+        top: 16.2px;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: "Please make a valid selection",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
   label: "Favorite Food",
   name: "food",
   options: [