RubyGems - playbook_ui - Versions diffs - 14.14.0.pre.alpha.play1852reacthookformsupportradio6318 → 14.14.0.pre.alpha.play1853typeaheadreacthookform6373 - Mend

playbook_ui 14.14.0.pre.alpha.play1852reacthookformsupportradio6318 → 14.14.0.pre.alpha.play1853typeaheadreacthookform6373

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '08169588154946fcdb034524b646de6a050c504884a381f360f3a5470ea4917d'
-  data.tar.gz: d2794398a68601eeac259328439846e39816d671489e70cf35c9e9cc3669b76e
+  metadata.gz: 22e1a85a49aae5e5698d7b36ac25dbc9ea32083afb4127898317d258a7423803
+  data.tar.gz: ebaf8cf1ec646ec276f040bf37e873b7650f40fe1e1d0726d365b0bb3ef55c0e
 SHA512:
-  metadata.gz: ca7b5000b148f3a0e8beac0926d11b05e36b9cc32cef3ccd72b8c53e04a4bdb6822e957ac82c85d50910dd4240d165c912e2b4eeb09566c8dbae3b70b28320de
-  data.tar.gz: fa1e9d28c2a166f674ac45c0c662262fb86fb69815409769be724bdba9a36b31bf24fe484053f17f97c691f9083759827b054f5a2a6652c7aab72bd8dc1c06f3
+  metadata.gz: 24a940d00c38dae7e50874252433c6571bcb6cc6d9b96f6258251180544834f59c499fecf2cfd63327e6d8442e31c4a9b606ba70bcc5187c1eb4afdeb630de84
+  data.tar.gz: a4b67e9a19b2941265e0921efa1ea9b43870296f43221ebce1259f33f42c31daec950cd01ba26bc7b698599f08a50176eba0a483b61e89bbaafa71ed51eaeac3

data/app/pb_kits/playbook/pb_currency/_currency.tsx CHANGED Viewed

@@ -21,6 +21,7 @@ type CurrencyProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
+  nullDisplay?: string,
   size?: 'sm' | 'md' | 'lg',
   symbol?: string,
   variant?: 'default' | 'light' | 'bold',
@@ -49,6 +50,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     unit,
     className,
     label = '',
+    nullDisplay = '',
     size = 'sm',
     symbol = '$',
     variant = 'default',
@@ -118,44 +120,57 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          <>
-            <div>{handleNegative}{symbol}</div>
-            <div>{getAmount}</div>
-            <div>
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </div>
-          </>
+          nullDisplay && !amount ? (
+            <div>{nullDisplay}</div>
+          ) : (
+            <>
+              <div>{handleNegative}{symbol}</div>
+              <div>{getAmount}</div>
+              <div>
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </div>
+            </>
+          )
         ) : (
-          <>
-            <Body
-                className="dollar_sign"
-                color="light"
-                dark={dark}
-            >
-              {handleNegative}{symbol}
-            </Body>
+          nullDisplay && !amount ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}
                 size={sizes[size]}
-            >
-              {getAmount}
-            </Title>
-            <Body
-                className="unit"
-                color="light"
-                dark={dark}
-            >
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </Body>
-          </>
+          >
+            {nullDisplay}
+          </Title>
+          ) : (
+            <>
+              <Body
+                  className="dollar_sign"
+                  color="light"
+                  dark={dark}
+              >
+                {handleNegative}{symbol}
+              </Body>
+              <Title
+                  className="pb_currency_value"
+                  dark={dark}
+                  size={sizes[size]}
+              >
+                {getAmount}
+              </Title>
+              <Body
+                  className="unit"
+                  color="light"
+                  dark={dark}
+              >
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </Body>
+            </>
+          )
         )}
       </div>
     </div>

data/app/pb_kits/playbook/pb_currency/currency.html.erb CHANGED Viewed

@@ -1,17 +1,24 @@
 <%= pb_content_tag do %>
   <%= pb_rails("caption", props: object.caption_props) %>
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <div><%= object.negative_sign %><%= object.symbol %></div>
-      <div><%= object.title_props[:text] %></div>
-      <div><%= object.body_props[:text] %></div>
+      <% if object.null_display && object.amount.blank? %>
+        <div><%= object.null_display %></div>
+      <% else %>
+        <div><%= object.negative_sign %><%= object.symbol %></div>
+        <div><%= object.title_props[:text] %></div>
+        <div><%= object.body_props[:text] %></div>
+      <% end %>
     <% else %>
-      <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-        <%= object.negative_sign %><%= object.symbol %>
+     <% if object.null_display && object.amount.blank? %>
+        <%= pb_rails("title", props: object.title_props) %>
+      <% else %>
+        <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+          <%= object.negative_sign %><%= object.symbol %>
+        <% end %>
+          <%= pb_rails("title", props: object.title_props) %>
+          <%= pb_rails("body", props: object.body_props) %>
       <% end %>
-      <%= pb_rails("title", props: object.title_props) %>
-      <%= pb_rails("body", props: object.body_props) %>
     <% end %>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_currency/currency.rb CHANGED Viewed

@@ -46,6 +46,9 @@ module Playbook
       prop :comma_separator, type: Playbook::Props::Boolean,
                              default: false
+      prop :null_display, type: Playbook::Props::String,
+                          required: false
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -65,10 +68,20 @@ module Playbook
         }
       end
+      def title_text
+        if null_display
+          null_display
+        elsif swap_negative
+          absolute_amount(abbr_or_format_amount)
+        else
+          abbr_or_format_amount
+        end
+      end
       def title_props
         {
           size: size_value,
-          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
+          text: title_text,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -145,8 +158,10 @@ module Playbook
           1
         when "md"
           3
-        else
+        when "sm"
           4
+        else
+          3
         end
       end

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

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

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

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

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

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

@@ -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/_radio.tsx CHANGED Viewed

@@ -1,4 +1,6 @@
-import React, { useRef, forwardRef } from 'react'
+/*eslint-disable react/no-multi-comp */
+import React, { forwardRef, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
@@ -8,7 +10,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 type RadioProps = {
   aria?: { [key: string]: string },
   alignment?: string,
-  checked?: boolean, // removed default assignment here
+  checked?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
   customChildren?: boolean,
   className?: string,
@@ -22,10 +24,10 @@ type RadioProps = {
   name?: string,
   value?: string,
   text?: string,
-  onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
+  onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
 } & GlobalProps
-const Radio = forwardRef<HTMLInputElement, RadioProps>(({
+const Radio = ({
   aria = {},
   alignment,
   children,
@@ -41,123 +43,110 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   name = 'radio_name',
   text = 'Radio Text',
   value = 'radio_text',
-  checked,
   onChange = () => { void 0 },
   ...props
-}, ref) => {
-  const internalRef = useRef<HTMLInputElement>(null)
-  const setRefs = (el: HTMLInputElement) => {
-    internalRef.current = el
-    if (typeof ref === 'function') {
-      ref(el)
-    } else if (ref) {
-      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
-    }
-  }
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+}: RadioProps, ref: any) => {
+  const radioRef = useRef(null);
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_radio_kit', alignment),
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  )
+  );
   const classesCustom = classnames(
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  )
-  const checkedProps = checked !== undefined ? { checked } : {}
+  );
-  const displayRadio = (inputProps: any) => {
-    if (children && customChildren === false)
-      return children
+  const displayRadio = (props: RadioProps & any) => {
+    if (children && customChildren == false)
+      return (children)
     else
-      return (
-        <input
-            {...checkedProps}
-            disabled={disabled}
-            id={id}
-            name={name}
-            onChange={onChange}
-            ref={setRefs}
-            type="radio"
-            value={value}
-            {...inputProps}
-        />
-      )
-  }
+    return (
+    <input
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={onChange}
+        ref={ref}
+        text={text}
+        type="radio"
+        value={value}
+        {...props}
+    />
+  )}
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
     if (event) {
-      const target = event.target as HTMLElement
+      const target = event.target as HTMLElement;
       if (
         target.id === 'pb-radio-children-wrapper' ||
         target.closest('#pb-radio-children-wrapper')
       ) {
-        internalRef.current?.click()
+        radioRef.current?.click();
       }
     }
-  }
+  };
-  return customChildren ? (
-    <Flex
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        align="center"
-        className={classesCustom}
-        cursor="pointer"
-        htmlFor={id}
-        htmlOptions={{
-          onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-            handleContainerClick(event)
-          }) as unknown as () => void
-        }}
-        id="radio-container"
-    >
-      <label className={buildCss('pb_radio_kit', alignment)}>
+  return (
+    customChildren ? (
+      <Flex
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          align='center'
+          className={classesCustom}
+          cursor='pointer'
+          htmlFor={id}
+          htmlOptions={{
+            onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+              handleContainerClick(event);
+            }) as unknown as () => void
+          }}
+          id="radio-container"
+      >
+        <label className={buildCss('pb_radio_kit', alignment)}>
         <input
-            {...checkedProps}
             disabled={disabled}
             id={id}
             name={name}
             onChange={onChange}
-            ref={setRefs}
+            ref={radioRef}
             type="radio"
             value={value}
             {...props}
         />
+          <span className="pb_radio_button" />
+        </label>
+        <div id="pb-radio-children-wrapper"> {children} </div>
+      </Flex>
+    ) : (
+        <label
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            htmlFor={id}
+        >
+        <>{displayRadio(props)}</>
         <span className="pb_radio_button" />
+        <Body
+            dark={dark}
+            status={error ? 'negative' : null}
+            text={label}
+            variant={null}
+        />
       </label>
-      <div id="pb-radio-children-wrapper"> {children} </div>
-    </Flex>
-  ) : (
-    <label
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        htmlFor={id}
-    >
-      {displayRadio(props)}
-      <span className="pb_radio_button" />
-      <Body
-          dark={dark}
-          status={error ? 'negative' : null}
-          text={label}
-          variant={null}
-      />
-    </label>
-  )
-})
+    )
+  );
+};
-Radio.displayName = "Radio"
-export default Radio
+export default forwardRef(Radio);

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

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

@@ -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_radio/radio.test.js CHANGED Viewed

@@ -86,19 +86,3 @@ test('has disabled attribute', () => {
   expect(input).toHaveAttribute('disabled')
 })
-test('has ref in the input element', () => {
-  const ref = React.createRef()
-    render(
-      <Radio
-          data={{ testid: testId }}
-          name="Radio-name"
-          ref={ref}
-          text="Radio"
-          value="radio value"
-      />
-  )
-  expect(ref.current).not.toBeNull()
-  expect(ref.current?.tagName).toBe('INPUT')
-})

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
@@ -47,6 +47,7 @@ type TypeaheadProps = {
   name?: string,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
+  onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
 } & GlobalProps
 export type SelectValueType = {
@@ -66,8 +67,7 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-const Typeahead = ({
+const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   async,
   className,
   components = {},
@@ -78,9 +78,11 @@ const Typeahead = ({
   getOptionValue,
   htmlOptions = {},
   id,
+  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
+  onChange = () => { void 0 },
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -122,6 +124,8 @@ const Typeahead = ({
   )
   const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
+    onChange({ target: { name: name, value: _data } } as unknown as React.ChangeEvent<HTMLInputElement>)
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -165,10 +169,11 @@ const Typeahead = ({
       />
     </div>
   )
-}
+})
 Object.keys(kitComponents).forEach((k) => {
   (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
 })
+Typeahead.displayName = 'Typeahead'
 export default Typeahead

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

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

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