RubyGems - playbook_ui_docs - Versions diffs - 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831 → 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836 - Mend

playbook_ui_docs 12.26.1.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown831 → 12.26.1.pre.alpha.PLAY860PhoneNumInputOptions836

Files changed (20) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af65045b9fd6e4b7e3017e555b208a0f00097bc536e3fc96d38330487393f320
-  data.tar.gz: d095e43d6e280baa202a91445a8c9e2d03167cee7f40ed3f91fa57256956eaf0
+  metadata.gz: 562a4a8e640546c3d9926974fcaa55bbf162c8c1d99ee6320b05429d0881573f
+  data.tar.gz: c844f5301619f323c9ff39a8b12cfc2141ec5f45f55bc563b0b57dbd7aa59452
 SHA512:
-  metadata.gz: 506715be37c5d6f1a12bb4a8eac600900bbde3321d6d89aa37a696c21073167d3fbb86cd8c415e6efbb1b885ced1dcb9121dbd2e7257780854d33b71b569be3c
-  data.tar.gz: 56b0a77981d2bba8dc955cc7a52ec2d3bb2beeef28dfb9e8baecce5c4d4b712c0cd4653bdacfcb49ebdb203a26fc6b80792c9eef0c591a244b05d003c3eadd67
+  metadata.gz: '05353187de0c419deddf80f088d7a908d05fab6e1b967ebccb876e27b282859c025258b9e6ecc808b78cd2edcb41e8c31208b09ad41be534d5751a3976cd26c0'
+  data.tar.gz: 4c895b0cd6ba1a6560342578cb2159fe5ed70aee0e7dfa6b36764d7276c8ffca518c28c7422c4278de5fb028a2699d0afe4b6a2afc201881beeb9d66a5e92863

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml CHANGED Viewed

@@ -8,8 +8,6 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
-  - date_picker_quick_pick_rails: Range (Quick Pick)
-  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -35,8 +33,6 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
-  - date_picker_quick_pick_react: Range (Quick Pick)
-  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

data/app/pb_kits/playbook/pb_date_picker/docs/index.js CHANGED Viewed

@@ -19,6 +19,4 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
-export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
-export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+import React, { useEffect, useRef } from 'react'
+import { Body, PhoneNumberInput } from '../..'
+const PhoneNumberInputAccessInputElement = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+    // 2. Add any event listener to ref.current.inputNode() inside a useEffect hook.
+    useEffect(() => {
+        ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
+    })
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <Body text="Click the input field below:" />
+            <PhoneNumberInput
+                id="access-input-element"
+                ref={ref}
+                {...props}
+            />
+        </>
+    )
+}
+export default PhoneNumberInputAccessInputElement

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md ADDED Viewed

@@ -0,0 +1,3 @@
+To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`.
+`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx ADDED Viewed

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react'
+import { Button, PhoneNumberInput } from '../..'
+const PhoneNumberInputClearField = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+    // 2. Use clearField() to clear the field.
+    const handleClick = () => {
+        ref.current.clearField()
+    }
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <PhoneNumberInput
+                id="clear-field"
+                ref={ref}
+                {...props}
+            />
+            <Button
+                onClick={handleClick}
+                text="Clear the Input Field"
+            />
+        </>
+    )
+}
+export default PhoneNumberInputClearField

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md ADDED Viewed

@@ -0,0 +1,3 @@
+To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
+`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.

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

@@ -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 ADDED Viewed

@@ -0,0 +1,60 @@
+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
+                    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 CHANGED Viewed

@@ -5,9 +5,13 @@ 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
+  - phone_number_input_clear_field: Clearing the Input Field
+  - phone_number_input_access_input_element: Accessing the Input Element
   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 CHANGED Viewed

@@ -2,3 +2,6 @@ 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'
+export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
+export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'