playbook_ui_docs 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756 → 12.24.0.pre.alpha.play824745

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d6225c80e9ea2e1261123264578e16b2447f1be58186099f52c6a45a656d55c4
-  data.tar.gz: a4703e71bbac0e4689611a54777cceddefd5737297d267572062ce60ea498384
+  metadata.gz: 52a2c02ada7d89a73e58cbedaef142d4907534b3085b51b8726f07e1c0d4f1a5
+  data.tar.gz: 9e2066b01463934124325e98d6d967aeaccfdb3fe49598433221b651d8ca8cf9
 SHA512:
-  metadata.gz: eae58736f2a0c22060768c6144d9615376e7f6f8a319c2bc4d371ed5109ccc2d5babba4bb5b4fa1a5feb7285ec758ef99d69b19a689baa112de7d5a3329f95a4
-  data.tar.gz: 3d8d644d3e1abbd3e518a6ad0eab22c81e3907d32eaa2db8241752d4b911d548b45acf556f325bbe33f467ccefd07d21035fbbd05f41c098c87da42cac2081d2
+  metadata.gz: 6c7aa25bdd4d98e3cf2678be00e1ef1d3db37f16dc633da4a2633ecf53f8eb02f283bc43cad97f48aa5f8a65504b9712a28c620fa4511d3a908e09a226ad3dbe
+  data.tar.gz: a580dcb426e190b669306cb04493575861f23109ff6dea2d1eeb761ae198b544b9833fb8b4dac79299a026913a831c5cdaaa3bafe5b627d77047100b617ebaab

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

@@ -1,14 +1,14 @@
 examples:
-
+  
   rails:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
-  - date_unstyled: Unstyled
-
+  
+  
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
-  - date_unstyled: Unstyled
+  

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

@@ -1,4 +1,3 @@
 export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
-export { default as DateUnstyled } from './_date_unstyled.jsx'

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

@@ -8,7 +8,6 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
-  - date_picker_quick_pick: Range (Quick Pick)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -34,7 +33,6 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
-  - date_picker_quick_pick: Range (Quick Pick)
   - 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

@@ -19,5 +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 DatePickerQuickPick } from './_date_picker_quick_pick'
-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_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,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

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

@@ -6,7 +6,6 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
-  - time_unstyled: Unstyled
 
   react:
   - time_default: Default
@@ -14,4 +13,3 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
-  - time_unstyled: Unstyled

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

@@ -3,4 +3,3 @@ export { default as TimeSizes } from './_time_sizes.jsx'
 export { default as TimeTimestamp } from './_time_timestamp.jsx'
 export { default as TimeAlign } from './_time_align.jsx'
 export { default as TimeTimezone } from './_time_timezone.jsx'
-export { default as TimeUnstyled } from './_time_unstyled.jsx'