playbook_ui 12.4.0 → 12.5.0.pre.alpha.filter1

data/app/pb_kits/playbook/pb_passphrase/{_passphrase.jsx → _passphrase.tsx}

@@ -15,7 +15,7 @@ import PbReactPopover from '../pb_popover/_popover'
 import TextInput from '../pb_text_input/_text_input'
 
 type PassphraseProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   confirmation?: boolean,
   className?: string,
   data?: object,
@@ -23,7 +23,7 @@ type PassphraseProps = {
   id?: string,
   inputProps?: {},
   label?: string,
-  onChange: (String) => void,
+  onChange: (inputValue: String) => void,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
@@ -40,7 +40,7 @@ const Passphrase = (props: PassphraseProps) => {
     id,
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
-    onChange = () => {},
+    onChange = () => { },
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -62,11 +62,11 @@ const Passphrase = (props: PassphraseProps) => {
   )
 
   const toggleShowPopover = () => setShowPopover(!showPopover)
-  const handleShouldClosePopover = (shouldClosePopover) => {
+  const handleShouldClosePopover = (shouldClosePopover: boolean) => {
     setShowPopover(!shouldClosePopover)
   }
 
-  const toggleShowPassphrase = (e) => {
+  const toggleShowPassphrase = (e: React.MouseEvent<HTMLElement>) => {
     e.preventDefault()
     setShowPassphrase(!showPassphrase)
   }
@@ -86,54 +86,54 @@ const Passphrase = (props: PassphraseProps) => {
 
   const popoverReference = (
     <CircleIconButton
-        className={tipClass}
-        dark={dark}
-        icon="info-circle"
-        onClick={toggleShowPopover}
-        variant="link"
+      className={tipClass}
+      dark={dark}
+      icon="info-circle"
+      onClick={toggleShowPopover}
+      variant="link"
     />
   )
 
   return (
-    <div 
-        {...ariaProps} 
-        {...dataProps} 
-        className={classes} 
-        id={id}
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       <label>
         <Flex align="baseline">
-          <Caption 
-              className="passphrase-label" 
-              text={label} 
+          <Caption
+            className="passphrase-label"
+            text={label}
           />
-          <If condition={tips.length > 0 && !confirmation}>
+          {tips.length > 0 && !confirmation &&
             <PbReactPopover
-                className="passphrase-tips"
-                closeOnClick="outside"
-                placement="right"
-                reference={popoverReference}
-                shouldClosePopover={handleShouldClosePopover}
-                show={showPopover}
+              className="passphrase-tips"
+              closeOnClick="outside"
+              placement="right"
+              reference={popoverReference}
+              shouldClosePopover={handleShouldClosePopover}
+              show={showPopover}
             >
-              <Flex 
-                  align="center" 
-                  orientation="column"
+              <Flex
+                align="center"
+                orientation="column"
               >
-                <Caption 
-                    marginBottom="xs" 
-                    text="Tips for a good passphrase" 
+                <Caption
+                  marginBottom="xs"
+                  text="Tips for a good passphrase"
                 />
                 <div>
                   {tips.map((tip, i) => (
-                    <Caption 
-                        key={i} 
-                        marginBottom="xs" 
-                        size="xs"
+                    <Caption
+                      key={i}
+                      marginBottom="xs"
+                      size="xs"
                     >
-                      <Icon 
-                          icon="shield-check" 
-                          marginRight="xs" 
+                      <Icon
+                        icon="shield-check"
+                        marginRight="xs"
                       />
                       {tip}
                     </Caption>
@@ -141,34 +141,34 @@ const Passphrase = (props: PassphraseProps) => {
                 </div>
               </Flex>
             </PbReactPopover>
-          </If>
+          }
         </Flex>
         <div className="passphrase-text-input-wrapper">
           <TextInput
-              className="passphrase-text-input"
-              dark={dark}
-              marginBottom="xs"
-              onChange={handleChange}
-              placeholder="Enter a passphrase..."
-              type={showPassphrase ? "text" : "password"}
-              value={displayValue}
-              {...inputProps}
+            className="passphrase-text-input"
+            dark={dark}
+            marginBottom="xs"
+            onChange={handleChange}
+            placeholder="Enter a passphrase..."
+            type={showPassphrase ? "text" : "password"}
+            value={displayValue}
+            {...inputProps}
           />
-          <span 
-              className="show-passphrase-icon" 
-              onClick={toggleShowPassphrase}
+          <span
+            className="show-passphrase-icon"
+            onClick={toggleShowPassphrase}
           >
             <Body
-                className={showPassphrase ? "hide-icon" : ""}
-                color="light"
-                dark={dark}
+              className={showPassphrase ? "hide-icon" : ""}
+              color="light"
+              dark={dark}
             >
               <Icon icon="eye-slash" />
             </Body>
             <Body
-                className={showPassphrase ? "" : "hide-icon"}
-                color="light"
-                dark={dark}
+              className={showPassphrase ? "" : "hide-icon"}
+              color="light"
+              dark={dark}
             >
               <Icon icon="eye" />
             </Body>

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

@@ -0,0 +1,3 @@
+<%= pb_rails("phone_number_input", props: {
+    id: "hello"
+}) %>

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

@@ -5,3 +5,6 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
+
+  rails:
+  - phone_number_input_default: Default

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb

@@ -0,0 +1,15 @@
+<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
+
+<script>
+  const formatToGlobalCountryName = () => {
+    return countryName.split('(')[0].trim()
+  }
+  
+  const formatAllCountries = () => {
+    let countryData = window.intlTelInputGlobals.getCountryData()
+    for (let i = 0; i < countryData.length; i++) {
+      let country = countryData[i]
+      country.name = formatToGlobalCountryName(country.name)
+    }
+  }
+  </script>

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPhoneNumberInput
+    class PhoneNumberInput < Playbook::KitBase
+      prop :disabled, type: Playbook::Props::Boolean,
+                      default: false
+      prop :initial_country, type: Playbook::Props::String,
+                             default: ""
+      prop :is_valid
+      prop :label, type: Playbook::Props::String,
+                   default: ""
+      prop :name, type: Playbook::Props::String,
+                  default: ""
+      prop :onchange
+      prop :only_countries, type: Playbook::Props::Array,
+                            default: []
+      prop :preferred_countries, type: Playbook::Props::Array,
+                                 default: []
+      prop :value, type: Playbook::Props::String,
+                   default: ""
+
+      def classname
+        generate_classname("pb_phone_number_input")
+      end
+
+      def phone_number_input_options
+        {
+          id: id,
+          disabled: disabled,
+          initialCountry: initial_country,
+          isValid: is_valid,
+          label: label,
+          name: name,
+          onChange: onchange,
+          onlyCountries: only_countries,
+          preferredCountries: preferred_countries,
+          value: value,
+        }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
-
 import {
   Popper,
   Manager as PopperManager,
@@ -23,14 +22,14 @@ type PbPopoverProps = {
   aria?: { [key: string]: string };
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
-  data?: object;
+  data?: { [key: string]: string },
   id?: string;
   offset?: boolean;
   reference: PopperReference & any;
   show?: boolean;
-  shouldClosePopover?: (arg0: boolean) => boolean | boolean;
-} & GlobalProps &
-  PopperProps<any>;
+  shouldClosePopover?: (arg0: boolean) => void;
+} & GlobalProps & Omit<PopperProps<any>, 'children'>
+& { children?: React.ReactChild[] | React.ReactChild }
 
 // Prop enabled default modifiers here
 // https://popper.js.org/docs/v2/modifiers
@@ -100,31 +99,31 @@ const Popover = (props: PbPopoverProps) => {
 
   return (
     <Popper
-      modifiers={popoverModifiers({ modifiers, offset })}
-      placement={placement}
-      referenceElement={referenceElement}
+        modifiers={popoverModifiers({ modifiers, offset })}
+        placement={placement}
+        referenceElement={referenceElement}
     >
       {({ placement, ref, style }) => {
         return (
           <div
-            {...ariaProps}
-            {...dataProps}
-            className={classes}
-            data-placement={placement}
-            id={id}
-            ref={ref}
-            style={Object.assign({}, style, zIndexStyle)}
+              {...ariaProps}
+              {...dataProps}
+              className={classes}
+              data-placement={placement}
+              id={id}
+              ref={ref}
+              style={Object.assign({}, style, zIndexStyle)}
           >
             <div
-              className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
+                className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
             >
               <div
-                className={classnames(
-                  "pb_popover_body",
-                  popoverSpacing,
-                  overflowHandling
-                )}
-                style={widthHeightStyles()}
+                  className={classnames(
+                    "pb_popover_body",
+                    popoverSpacing,
+                    overflowHandling
+                  )}
+                  style={widthHeightStyles()}
               >
                 {children}
               </div>
@@ -192,17 +191,17 @@ const PbReactPopover = (props: PbPopoverProps) => {
 
   const popoverComponent = (
     <Popover
-      className={className}
-      maxHeight={maxHeight}
-      maxWidth={maxWidth}
-      minHeight={minHeight}
-      minWidth={minWidth}
-      modifiers={modifiers}
-      offset={offset}
-      placement={placement}
-      referenceElement={referenceElement}
-      zIndex={zIndex}
-      {...props}
+        className={className}
+        maxHeight={maxHeight}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        minWidth={minWidth}
+        modifiers={modifiers}
+        offset={offset}
+        placement={placement}
+        referenceElement={referenceElement}
+        zIndex={zIndex}
+        {...props}
     >
       {children}
     </Popover>
@@ -214,7 +213,9 @@ const PbReactPopover = (props: PbPopoverProps) => {
         {reference && !referenceElement && (
           <PopperReference>
             {({ ref }) => (
-              <span className="pb_popover_reference_wrapper" ref={ref}>
+              <span
+                  className="pb_popover_reference_wrapper"
+                  ref={ref}>
                 <reference.type {...reference.props} />
               </span>
             )}
@@ -236,4 +237,4 @@ const PbReactPopover = (props: PbPopoverProps) => {
   );
 };
 
-export default PbReactPopover;
+export default PbReactPopover;

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -8,7 +8,7 @@
       background-color: $bg_light;
     }
     &[class*=checked_item] {
-      background-color: $bg_light;
+      background-color: $active_light;
     }
   }
   [class^=pb_radio_kit] {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -183,6 +183,10 @@
   }
  
   .typeahead-kit-select__menu {
+    .typeahead-kit-select__menu-list {
+      padding: 0;
+    }
+
     .typeahead-kit-select__option {
       &.typeahead-kit-select__option--is-focused {
         background-color: $hover_light;

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -17,6 +17,7 @@ import Passphrase from './pb_passphrase/_passphrase'
 import RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
 import TreemapChart from './pb_treemap_chart/_treemap_chart'
 import Typeahead from './pb_typeahead/_typeahead'
+import PhoneNumberInput from './pb_phone_number_input/_phone_number_input'
 
 WebpackerReact.registerComponents({
   BarGraph,
@@ -33,6 +34,7 @@ WebpackerReact.registerComponents({
   TreemapChart,
   Typeahead,
   Gauge,
+  PhoneNumberInput
 })
 
 ujs.setup(

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.3.1"
-  VERSION = "12.4.0"
+  PREVIOUS_VERSION = "12.5.0.pre.alpha.filter1"
+  VERSION = "12.5.0.pre.alpha.filter1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.4.0
+  version: 12.5.0.pre.alpha.filter1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-20 00:00:00.000000000 Z
+date: 2023-02-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -910,16 +910,16 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
 - app/pb_kits/playbook/pb_file_upload/fileupload.test.js
-- app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx
-- app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx
-- app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx
-- app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx
-- app/pb_kits/playbook/pb_filter/Filter/index.jsx
-- app/pb_kits/playbook/pb_filter/_filter.jsx
+- app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
+- app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
+- app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
+- app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx
+- app/pb_kits/playbook/pb_filter/Filter/index.tsx
 - app/pb_kits/playbook/pb_filter/_filter.scss
+- app/pb_kits/playbook/pb_filter/_filter.tsx
 - app/pb_kits/playbook/pb_filter/docs/_description.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
@@ -1379,8 +1379,8 @@ files:
 - app/pb_kits/playbook/pb_list/item.rb
 - app/pb_kits/playbook/pb_list/list.html.erb
 - app/pb_kits/playbook/pb_list/list.rb
-- app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx
 - app/pb_kits/playbook/pb_loading_inline/_loading_inline.scss
+- app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx
 - app/pb_kits/playbook/pb_loading_inline/docs/_description.md
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.html.erb
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.jsx
@@ -1388,6 +1388,7 @@ files:
 - app/pb_kits/playbook/pb_loading_inline/docs/index.js
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
+- app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js
 - app/pb_kits/playbook/pb_logistic/_logistic.jsx
 - app/pb_kits/playbook/pb_map/_map.scss
 - app/pb_kits/playbook/pb_map/_map.tsx
@@ -1398,8 +1399,9 @@ files:
 - app/pb_kits/playbook/pb_map/docs/example.yml
 - app/pb_kits/playbook/pb_map/docs/index.js
 - app/pb_kits/playbook/pb_map/map.test.jsx
-- app/pb_kits/playbook/pb_message/_message.jsx
+- app/pb_kits/playbook/pb_map/pbMapTheme.ts
 - app/pb_kits/playbook/pb_message/_message.scss
+- app/pb_kits/playbook/pb_message/_message.tsx
 - app/pb_kits/playbook/pb_message/_message_mixins.scss
 - app/pb_kits/playbook/pb_message/docs/_description.md
 - app/pb_kits/playbook/pb_message/docs/_footer.md
@@ -1412,6 +1414,7 @@ files:
 - app/pb_kits/playbook/pb_message/docs/index.js
 - app/pb_kits/playbook/pb_message/message.html.erb
 - app/pb_kits/playbook/pb_message/message.rb
+- app/pb_kits/playbook/pb_message/message.test.js
 - app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx
 - app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss
 - app/pb_kits/playbook/pb_multiple_users/docs/_description.md
@@ -1496,8 +1499,8 @@ files:
 - app/pb_kits/playbook/pb_pagination/docs/example.yml
 - app/pb_kits/playbook/pb_pagination/pagination.html.erb
 - app/pb_kits/playbook/pb_pagination/pagination.rb
-- app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
 - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
+- app/pb_kits/playbook/pb_passphrase/_passphrase.tsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md
@@ -1555,6 +1558,7 @@ files:
 - app/pb_kits/playbook/pb_person_contact/person_contact.rb
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss
 - app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
@@ -1565,6 +1569,8 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
 - app/pb_kits/playbook/pb_phone_number_input/docs/index.js
+- app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
+- app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb
 - app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js
 - app/pb_kits/playbook/pb_phone_number_input/types.d.ts
 - app/pb_kits/playbook/pb_pill/_pill.scss
@@ -2422,9 +2428,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx

@@ -1,76 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { isEmpty, map, omitBy } from 'lodash'
-
-import Body from '../../pb_body/_body'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-
-export type FilterDescription = {
-  [key: string]: ?string | boolean,
-}
-
-export type CurrentFiltersProps = {
-  dark: boolean,
-  filters: FilterDescription,
-}
-
-const hiddenFilters = (value) => isEmpty(value) && value !== true
-
-const CurrentFilters = ({ dark, filters }: CurrentFiltersProps) => {
-  const displayableFilters = omitBy(filters, hiddenFilters)
-
-  return (
-    <div className="maskContainer">
-      <If condition={isEmpty(filters)}>
-        <div className="filters">
-          <Body
-              color="light"
-              paddingLeft="xs"
-              size={4}
-              tag="h4"
-              text="No Filter Selected"
-          />
-        </div>
-      </If>
-      <If condition={!isEmpty(filters)}>
-        <div className="filters">
-          <div className="left_gradient" />
-          {map(displayableFilters, (value, name) => (
-            <div
-                className="filter"
-                key={`filter-${name}`}
-            >
-              <Choose>
-                <When condition={value === true}>
-                  <Title
-                      dark={dark}
-                      size={4}
-                      tag="h4"
-                      text={name}
-                  />
-                </When>
-                <Otherwise>
-                  <Caption
-                      dark={dark}
-                      text={name}
-                  />
-                  <Title
-                      dark={dark}
-                      size={4}
-                      tag="h4"
-                      text={value}
-                  />
-                </Otherwise>
-              </Choose>
-            </div>
-          ))}
-          <div className="right_gradient" />
-        </div>
-      </If>
-    </div>
-  )
-}
-
-export default CurrentFilters

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx

@@ -1,37 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Icon from '../pb_icon/_icon'
-type LoadingInlineProps = {
-  align?: "left" | "center" | "right",
-  className?: string,
-  dark?: boolean,
-  data?: string,
-  id?: string,
-}
-
-const LoadingInline = (props: LoadingInlineProps) => {
-  const { align = 'left' } = props
-  return (
-    <div
-        className={classnames(`pb_loading_inline_kit_${align}`, globalProps(props))}
-    >
-      <Body color="light">
-        <Icon
-            aria={{ label: 'loading icon' }}
-            fixedWidth
-            icon="spinner"
-            pulse
-        />
-        {' Loading'}
-      </Body>
-    </div>
-  )
-}
-
-export default LoadingInline