playbook_ui 12.24.0.pre.alpha.play833boldoptionfortitle2and3721 → 12.24.0.pre.alpha.play824733

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bd4e3864286b541e0caf3e640c35a8f942dbcb6ab2d7baad716ac5a0e6d3e3ff
-  data.tar.gz: 95157177f65e2b812bcf3cae77037188b8f1020c7662e6d6b1232d792feb7bc1
+  metadata.gz: 8231bb3fbf02190e76cf2763a3d70ee166e665ea67ab0456fb61e90aba95e933
+  data.tar.gz: 71ef01fbd0bb7e37c38958c8b0409d577a682283713c3c7a50aec203b6870423
 SHA512:
-  metadata.gz: b0e07bf633784eb9262db46a90d2c334062e23f6dc30630cca188b3de480e1f28eea51841d0c1347712eda7826e947c3459f7d52b9a39599c4ef530b7eee8d3a
-  data.tar.gz: db69cd005df2c3408d3f3cb72de4d3cb6c2c49ba40b426096cda9763dd157d51a56277d0d11a7ae69b993cceb52011ca9547ab7fe21c6f5be8aeff45592bf3d0
+  metadata.gz: 5ec035a7462706717a83e63a232d4e2cbf761eeb8e89b17466630e1921f01c1aeecd79b6e21f3b2d930a112edab0cf39cbd649ea9ddd3320a8ca9b942a4322ac
+  data.tar.gz: e1966ede2224963aa2c903d23765dae5cb24c0317d3d7bff6f0fd9d211ae1453f48d70ab94cffdf3d04d760274234a61b5fd2d2c1cf838d652bea6e635f059d8

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

@@ -1,12 +1,17 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+
 import intlTelInput from 'intl-tel-input'
 import 'intl-tel-input/build/css/intlTelInput.css'
-import TextInput from '../pb_text_input/_text_input'
 import 'intl-tel-input/build/js/utils.js'
 
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import TextInput from '../pb_text_input/_text_input'
+import { Callback } from '../types'
+import { isEmpty } from '../utilities/object'
+
 declare global {
   interface Window {
     intlTelInputGlobals: any
@@ -19,14 +24,17 @@ type PhoneNumberInputProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   disabled?: boolean,
+  error?: string,
   id?: string,
   initialCountry?: string,
   isValid?: (valid: boolean) => void,
   label?: string,
   name?: string,
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
+  onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
   preferredCountries?: string[],
+  required?: boolean,
   value?: string,
 }
 
@@ -40,10 +48,10 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  let countryData = window.intlTelInputGlobals.getCountryData()
+  const countryData = window.intlTelInputGlobals.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
-    let country = countryData[i]
+    const country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
   }
 }
@@ -71,7 +79,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     onChange = () => {
       void 0
     },
+    onValidate = () => null,
     onlyCountries = [],
+    required = false,
     preferredCountries = [],
     value = "",
   } = props
@@ -87,10 +97,18 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState('')
+  const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
 
+  useEffect(() => {
+    if (error?.length > 0) {
+      onValidate(false)
+    } else {
+      onValidate(true)
+    }
+  }, [error, onValidate])
+
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
 
@@ -137,9 +155,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   // Separating Concerns as React Docs Recommend
   // This also Fixes things for our react_component rendering on the Rails Side
-  useEffect(() => {
-    formatAllCountries()
-  }, [])
+  useEffect(formatAllCountries, [])
 
   useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
@@ -148,14 +164,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       allowDropdown: !disabled,
       initialCountry,
       onlyCountries,
-    }
-    )
+    })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
       validateTooLongNumber(telInputInit)
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
       onChange(phoneNumberData)
+      isValid(telInputInit.isValidNumber())
     })
 
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
@@ -164,24 +180,34 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     setItiInit(telInputInit)
   }, [])
 
+  let textInputProps: {[key: string]: any} = {
+    className: dropDownIsOpen ? 'dropdown_open' : '',
+    dark,
+    "data-phone-number": JSON.stringify(selectedData),
+    disabled,
+    error,
+    id,
+    label,
+    name,
+    onBlur: validateErrors,
+    onChange: handleOnChange,
+    value: inputValue
+  }
+
+  let wrapperProps: Record<string, unknown> = { className: classes }
+
+  if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
+  if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}
+  if (required) textInputProps.required = true
+
   return (
-    <div {...ariaProps} {...dataProps} className={classes}>
+    <div {...wrapperProps}>
       <TextInput
-        className={dropDownIsOpen ? 'dropdown_open' : ''}
-        dark={dark}
-        data-phone-number={JSON.stringify(selectedData)}
-        disabled={disabled}
-        error={error}
-        id={id}
-        label={label}
-        name={name}
-        onBlur={() => validateErrors()}
-        onChange={handleOnChange}
-        ref={inputRef}
-        value={inputValue}
+          ref={inputRef}
+          {...textInputProps}
       />
     </div>
   )
 }
 
-export default PhoneNumberInput
+export default forwardRef(PhoneNumberInput)

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

@@ -0,0 +1,14 @@
+<form id="example-form-validation" action="" method="get">
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
+    <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
+</form>
+
+<% content_for(:pb_js) do %>
+    <%= javascript_tag do %>
+        document.addEventListener('DOMContentLoaded', function () {
+            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+            })
+        })
+    <% end %>
+<% end %>

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

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
+
+const PhoneNumberInputValidation = (props) => {
+    const [formErrors, setFormErrors] = useState("");
+    const [showFormErrors, setShowFormErrors] = useState(false);
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [countryCode, setCountryCode] = useState("af");
+
+    const handleOnValidate = (valid) => {
+        setFormErrors(
+            valid ? "" : "Please correct the fields below and try again."
+        );
+    };
+
+    const handleOnChange = ({ iso2, number }) => {
+        setCountryCode(iso2);
+        setPhoneNumber(number);
+    };
+    
+    const handleOnSubmit = (e) => {
+        if (showFormErrors) e.preventDefault()
+    }
+
+    useEffect(() => {
+        setShowFormErrors(formErrors.length > 0);
+    }, [formErrors]);
+
+    return (
+        <form
+            action=""
+            method="get"
+            onSubmit={handleOnSubmit}
+        >
+            {showFormErrors && (
+                <FixedConfirmationToast
+                    closeable
+                    marginBottom="md"
+                    status="error"
+                    text={formErrors}
+                />
+            )}
+            <PhoneNumberInput
+                error="Missing phone number."
+                id="validation"
+                initialCountry={countryCode}
+                onChange={handleOnChange}
+                onValidate={handleOnValidate}
+                required
+                value={phoneNumber}
+                {...props}
+            />
+            <Button
+                htmlType="submit"
+                text="Save Phone Number"
+            />
+        </form>
+    );
+};
+
+export default PhoneNumberInputValidation;

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

@@ -5,9 +5,11 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation

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

@@ -2,3 +2,4 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
+export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'

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

@@ -5,6 +5,8 @@ module Playbook
     class PhoneNumberInput < Playbook::KitBase
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -15,6 +17,7 @@ module Playbook
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
+      prop :error, type: Playbook::Props::String
       prop :value, type: Playbook::Props::String,
                    default: ""
 
@@ -27,11 +30,13 @@ module Playbook
           id: id,
           dark: dark,
           disabled: disabled,
+          error: error,
           initialCountry: initial_country,
           label: label,
           name: name,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
+          required: required,
           value: value,
         }
       end

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

@@ -1,74 +1,122 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-import PhoneNumberInput from './_phone_number_input'
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+import PhoneNumberInput from "./_phone_number_input";
 
-const testId = "phoneNumberInput"
+const testId = "phoneNumberInput";
 
-test('should be disabled', () => {
-  const props = {
-    disabled: true,
-    id: testId,
-  }
+test("should be disabled", () => {
+    const props = {
+        disabled: true,
+        id: testId,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByRole("textbox")
-  expect(kit).toBeDisabled()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByRole("textbox");
+    expect(kit).toBeDisabled();
+});
 
-test('should be enabled by default', () => {
-  const props = {
-    id: testId,
-  }
+test("should be enabled by default", () => {
+    const props = {
+        id: testId,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByRole("textbox")
-  expect(kit).not.toBeDisabled()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByRole("textbox");
+    expect(kit).not.toBeDisabled();
+});
 
-test('should have label', () => {
-  const label = 'Phone Number'
-  const props = {
-    id: testId,
-    label,
-  }
+test("should have label", () => {
+    const label = "Phone Number";
+    const props = {
+        id: testId,
+        label,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByText(label)
-  expect(kit).toBeInTheDocument()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByText(label);
+    expect(kit).toBeInTheDocument();
+});
 
-test('should pass data prop', () => {
-  const props = {
-    data: { testid: testId },
-    id: testId,
-  }
+test("should pass data prop", () => {
+    const props = {
+        data: { testid: testId },
+        id: testId,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByTestId(testId);
+    expect(kit).toBeInTheDocument();
+});
+
+test("should pass className prop", () => {
+    const className = "custom-class-name";
+    const props = {
+        className,
+        data: { testid: testId },
+        id: testId,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass(className);
+});
+
+test("should pass value prop", () => {
+    const value = "1234567890";
+    const props = {
+        id: testId,
+        value,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByTestId(testId)
-  expect(kit).toBeInTheDocument()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByRole("textbox");
+    expect(kit).toHaveDisplayValue(value);
+});
 
-test('should pass className prop', () => {
-  const className = 'custom-class-name'
+//TODO: test required field presence
+test("should pass required prop", () => {
+    const props = {
+        id: testId,
+    };
+
+    render(
+        <PhoneNumberInput
+            required
+            {...props}
+        />
+    );
+    const kit = screen.getByRole("textbox");
+    expect(kit).toHaveAttribute("required");
+});
+
+test("should have error attribute when invalid", () => {
   const props = {
-    className,
-    data: { testid: testId },
-    id: testId,
-  }
-
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(className)
-})
-
-test('should pass value prop', () => {
-  const value = '1234567890'
+      id: testId,
+      error: "Something isn't right here."
+  };
+
+  render(
+      <PhoneNumberInput
+          {...props}
+      />
+  );
+  const kit = screen.getByRole("textbox");
+  expect(kit).toHaveAttribute("error");
+});
+
+test("should trigger callback", () => {
+  const handleOnValidate = jest.fn((valid) => valid)
+
   const props = {
-    id: testId,
-    value,
-  }
-
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByRole("textbox")
-  expect(kit).toHaveDisplayValue(value)
-})
+      id: testId,
+      onValidate: handleOnValidate
+  };
+
+  render(
+      <PhoneNumberInput
+          {...props}
+      />
+  );
+
+  expect(handleOnValidate).toBeCalledWith(true)
+});

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

@@ -18,7 +18,6 @@
   &[class*=_3] {
     @include pb_title_3;
     @include title_colors;
-    @include pb_title_bold;
   }
 
   &[class*=_4] {
@@ -30,7 +29,7 @@
     @include pb_title_dark;
   }
 
-  &[class*=thin] {
+  &[class*=_thin] {
     @include pb_title_thin;
   }
 }

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

@@ -21,13 +21,13 @@ const Title = (props: TitleProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
+    bold = true,
     children,
     className,
     color,
     data = {},
     id,
     size = 3,
-    bold = size === 3 ? false : true,
     tag = 'h3',
     text,
     variant = null,
@@ -35,10 +35,9 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
-
   const getBold = bold ? '' : 'thin'
   const classes = classnames(
-    buildCss("pb_title_kit", `size_${size}`, variant, color) + ` ${getBold}`,
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
     className
   )

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

@@ -17,21 +17,14 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: true
-
-      def initialize(props)
-        props[:bold] = [1, 2, 4].include?(props[:size]) unless props.key?(:bold)
-        props[:bold] = false if props[:size].nil? && !props.key?(:bold)
-        super(props)
-      end
-
-      prop :bold, type: Playbook::Props::Boolean
+      prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color) + is_bold
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
       end
 
       def is_bold
-        bold ? "" : " thin"
+        bold ? nil : "thin"
       end
     end
   end

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

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3 thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
 test('with thin font weight', () => {
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3 thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
 })
 
 test('with colors', () => {
@@ -38,5 +38,5 @@ test('with colors', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_success thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3_success')
 })

data/app/pb_kits/playbook/utilities/object.ts

@@ -0,0 +1,3 @@
+/* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
+
+export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1

data/lib/playbook/forms/builder/intl_telephone_field.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Forms
+    class Builder
+      def intl_telephone(name, props: {})
+        props[:name] = name
+        @template.pb_rails("phone_number_input", props: props)
+      end
+    end
+  end
+end

data/lib/playbook/forms/builder.rb

@@ -10,6 +10,7 @@ module Playbook
       require_relative "builder/form_field_builder"
       require_relative "builder/select_field"
       require_relative "builder/typeahead_field"
+      require_relative "builder/intl_telephone_field"
 
       prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.24.0"
-  VERSION = "12.24.0.pre.alpha.play833boldoptionfortitle2and3721"
+  VERSION = "12.24.0.pre.alpha.play824733"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.24.0.pre.alpha.play833boldoptionfortitle2and3721
+  version: 12.24.0.pre.alpha.play824733
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-06-01 00:00:00.000000000 Z
+date: 2023-06-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1607,6 +1607,8 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
 - 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
@@ -2415,6 +2417,7 @@ files:
 - app/pb_kits/playbook/utilities/flexbox_global_props/_justify_self.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
 - app/pb_kits/playbook/utilities/globalProps.ts
+- app/pb_kits/playbook/utilities/object.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
 - app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
@@ -2452,6 +2455,7 @@ files:
 - lib/playbook/forms/builder/collection_select_field.rb
 - lib/playbook/forms/builder/date_picker_field.rb
 - lib/playbook/forms/builder/form_field_builder.rb
+- lib/playbook/forms/builder/intl_telephone_field.rb
 - lib/playbook/forms/builder/select_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
 - lib/playbook/justify_content.rb