playbook_ui_docs 14.14.0.pre.alpha.play1852reacthookformsupportradio6318 → 14.14.0.pre.alpha.play1853typeaheadreacthookform6373

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4071d9d47bfa6226f74365c564f070e6329f147e4739c73710e9bb3078acf22a
-  data.tar.gz: eadb0cc748ba73de5c262b8caf6c15cba150c8b4572d58dfe9bcbc2d4c0a020d
+  metadata.gz: 69e167614dc6979147993f0aca179416464a0dcf5041e49f1fb1bba2d850c608
+  data.tar.gz: 5efe6838dc0280186e139e6063666bbe932377f8a4eba745174328a5fd413220
 SHA512:
-  metadata.gz: 1f0f8c531ba88210e337bb874204bc177f5525f177cd555ecfa7a8442356693ba80749c00448e3f82057856b26c737497bf498e7f9bea03eb1d14e5374559b09
-  data.tar.gz: f861f78d5b7278725bd6d91b73ac375a4377c1ac870242c35462c89146c8b7de13365d3a7e7024e5154cb755cf0f1abf1141e773deadea8ab94c756f6bac5cdc
+  metadata.gz: 75dcba3659690199acce6ef5089146adbac805c32a4740f71450fbe859d551bb3c68a42e6a53855e5c5316b7211e31ff1167c686dab773f35e0ac7b3adcb8b9c
+  data.tar.gz: 111c76c52106f396099e90219702955c9046fe4fc17b43b84a7785feaa859e6607a85978d05ca6982900c3fec5be0ca25e6a4a2cded8d43595f6b1325489be1e

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "--",
+    size: "sm"
+}) %>
+
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "$0.00",
+    size: "sm"
+}) %>
+
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    null_display: " ",
+    size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Currency } from 'playbook-ui'
+
+const CurrencyNullDisplay = (props) => {
+  return (
+    <>
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="--"
+          {...props}
+      />
+
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="$0.00"
+          {...props}
+      />
+    
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay=" "
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyNullDisplay

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md

@@ -0,0 +1 @@
+To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md

@@ -0,0 +1 @@
+To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.

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

@@ -10,6 +10,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   
   react:
   - currency_variants: Variants
@@ -21,6 +22,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
 
   swift:
   - currency_size_swift: Size

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

@@ -6,4 +6,5 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'

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

@@ -16,7 +16,6 @@ examples:
   - radio_alignment: Alignment
   - radio_disabled: Disabled
   - radio_custom_children: Custom Children
-  - radio_react_hook: React Hook Form
 
   swift:
   - radio_default_swift: Default
@@ -27,4 +26,4 @@ examples:
   - radio_spacing_swift: Spacing
   - radio_padding_swift: Padding
   - radio_subtitle_swift: Subtitle
-  - radio_props_swift: ""
+  - radio_props_swift: ""

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

@@ -4,4 +4,3 @@ export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
 export { default as RadioDisabled } from './_radio_disabled.jsx'
 export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
-export { default as RadioReactHook } from './_radio_react_hook.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { Typeahead, Title } from 'playbook-ui'
+import { useForm } from 'react-hook-form'
+
+const languages = [
+  { label: 'JavaScript', value: '1995', category: 'Web Development' },
+  { label: 'Python', value: '1991', category: 'General Purpose' },
+  { label: 'Java', value: '1995', category: 'Enterprise' },
+  { label: 'C++', value: '1985', category: 'Systems Programming' },
+  { label: 'Go', value: '2009', category: 'Systems Programming' },
+  { label: 'Rust', value: '2010', category: 'Systems Programming' },
+  { label: 'Swift', value: '2014', category: 'Mobile Development' },
+  { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
+  { label: 'Ruby', value: '1995', category: 'Web Development' },
+  { label: 'PHP', value: '1995', category: 'Web Development' },
+]
+
+const colors = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadReactHook = (props) => {
+  const { register, watch } = useForm()
+
+  const selectedLanguages = watch('languages')
+  const selectedColor = watch('color')
+
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Multi Select Languages"
+          multiKit="language"
+          options={languages}
+          {...props}
+          {...register('languages')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Languages' 
+      />
+      {selectedLanguages && selectedLanguages.map(language => (
+        <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
+      ))}
+
+      <Typeahead
+          label="Colors"
+          marginTop="lg"
+          options={colors}
+          {...props}
+          {...register('color')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Color' 
+      />
+      <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
+    </>
+  )
+}
+
+export default TypeaheadReactHook

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to the Typeahead kit.

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

@@ -15,6 +15,7 @@ examples:
 
   react:
     - typeahead_default: Default
+    - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)

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

@@ -13,3 +13,4 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
 export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
+export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'