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

playbook_ui 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275 → 14.14.0.pre.alpha.play1852reacthookformsupportradio6318

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 (32) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c6ef102f160200110b47477b34a9a06798b4ef4f1122151a12341775c20c9a5
-  data.tar.gz: 14eb41101975901c5f557d1d8b6721fc9301e9b54a30ec0c335b8717dccbe508
+  metadata.gz: '08169588154946fcdb034524b646de6a050c504884a381f360f3a5470ea4917d'
+  data.tar.gz: d2794398a68601eeac259328439846e39816d671489e70cf35c9e9cc3669b76e
 SHA512:
-  metadata.gz: 301d0b715331e1e388be9b554865dc59f79b88f5ef11f3a7f038554f215c7b72d6541465d027adcf0c8f9a0fea2dd4e9e1e6f608c6b0d9b9f5360fc52a70ffc8
-  data.tar.gz: 6e1bc33d1fbe6b1bebe4b112b42c73107685786fbc7ddd01df4f95fe302d015e1225edcfbe042e2931728dcd655fe97a9d3629417c639392fa3753a7cb533ee6
+  metadata.gz: ca7b5000b148f3a0e8beac0926d11b05e36b9cc32cef3ccd72b8c53e04a4bdb6822e957ac82c85d50910dd4240d165c912e2b4eeb09566c8dbae3b70b28320de
+  data.tar.gz: fa1e9d28c2a166f674ac45c0c662262fb86fb69815409769be724bdba9a36b31bf24fe484053f17f97c691f9083759827b054f5a2a6652c7aab72bd8dc1c06f3

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

@@ -21,7 +21,6 @@ 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',
@@ -50,7 +49,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     unit,
     className,
     label = '',
-    nullDisplay = '',
     size = 'sm',
     symbol = '$',
     variant = 'default',
@@ -120,62 +118,48 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          nullDisplay && !amount ? (
-            <div>{nullDisplay}</div>
-          ) : (
-            <>
-              <div>{handleNegative}{symbol}</div>
-              <div>{getAmount}</div>
-              <div>
-                {getAbbreviation}
-                {unit ? unit : getDecimalValue}
-              </div>
-            </>
-          )
+          <>
+            <div>{handleNegative}{symbol}</div>
+            <div>{getAmount}</div>
+            <div>
+              {getAbbreviation}
+              {unit ? unit : getDecimalValue}
+            </div>
+          </>
         ) : (
-          nullDisplay && !amount ? (
+          <>
+            <Body
+                className="dollar_sign"
+                color="light"
+                dark={dark}
+            >
+              {handleNegative}{symbol}
+            </Body>
             <Title
                 className="pb_currency_value"
                 dark={dark}
                 size={sizes[size]}
-          >
-            {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>
-            </>
-          )
+            >
+              {getAmount}
+            </Title>
+            <Body
+                className="unit"
+                color="light"
+                dark={dark}
+            >
+              {getAbbreviation}
+              {unit ? unit : getDecimalValue}
+            </Body>
+          </>
         )}
       </div>
     </div>
-  );
+  )
 }
 export default Currency

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

@@ -1,24 +1,17 @@
 <%= 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 %>
-      <% 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 %>
+      <div><%= object.negative_sign %><%= object.symbol %></div>
+      <div><%= object.title_props[:text] %></div>
+      <div><%= object.body_props[:text] %></div>
     <% else %>
-     <% if object.null_display && object.amount.blank? %>
-        <%= pb_rails("title", props: {text: object.null_display}) %>
-      <% 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) %>
+      <%= 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 %>
   </div>
 <% end %>

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

@@ -46,9 +46,6 @@ 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

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

@@ -10,7 +10,6 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
-  - currency_null_display: Null Display
   react:
   - currency_variants: Variants
@@ -22,7 +21,6 @@ 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,5 +6,4 @@ 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 CurrencyNullDisplay } from './_currency_null_display.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Button from '../pb_button/_button'
+import Icon from '../pb_icon/_icon'
+import { IconSizes } from "../pb_icon/_icon"
+type IconButtonProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  htmlType?: 'submit' | 'reset' | 'button' | undefined,
+  icon?: string,
+  id?: string,
+  link?: string,
+  newWindow?: boolean,
+  size?: IconSizes,
+  target?: string,
+  variant?: 'default' | 'link',
+}
+const IconButton = (props: IconButtonProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    htmlType = 'button',
+    icon = 'bars',
+    id,
+    link,
+    newWindow = false,
+    size = "2x",
+    target,
+    variant = "default",
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_icon_button_kit', variant), globalProps(props), className)
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Button
+          borderRadius="lg"
+          htmlType={htmlType}
+          link={link}
+          newWindow={newWindow}
+          target={target}
+      >
+        <Icon
+            className="icon_button_icon"
+            fixedWidth
+            icon={icon}
+            paddingX="xxs"
+            paddingY="xs"
+            size={size}
+        />
+      </Button>
+    </div>
+  )
+}
+export default IconButton

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react'
+import { IconButton } from 'playbook-ui'
+const IconButtonDefault = (props) => (
+  <div>
+    <IconButton
+        {...props}
+    />
+    <IconButton
+        {...props}
+        marginTop="md"
+        variant="link"
+    />
+  </div>
+)
+export default IconButtonDefault

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx ADDED Viewed

@@ -0,0 +1,61 @@
+import React from 'react'
+import { IconButton, Flex } from 'playbook-ui'
+const IconButtonSizes = (props) => (
+  <div>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="lg"
+      />
+      <span>Large</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="sm"
+      />
+      <span>Small</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="xs"
+      />
+      <span>XSmall</span>
+    </Flex>
+    <Flex
+        align="center"
+        marginTop="md"
+    >
+      <IconButton
+          {...props}
+          size="1x"
+      />
+      <span>1x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="2x"
+      />
+      <span>2x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="3x"
+      />
+      <span>3x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="4x"
+      />
+      <span>4x</span>
+    </Flex>
+  </div>
+)
+export default IconButtonSizes

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

@@ -3,3 +3,7 @@ examples:
   rails:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
+  react:
+  - icon_button_default: Default
+  - icon_button_sizes: Sizes

data/app/pb_kits/playbook/pb_icon_button/docs/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as IconButtonDefault } from './_icon_button_default.jsx'
2	+ export { default as IconButtonSizes } from './_icon_button_sizes.jsx'

data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx ADDED Viewed

@@ -0,0 +1,39 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+import { IconButton } from 'playbook-ui'
+const props = {
+  data: { testid: 'default', icon: 'plus' }
+}
+test('default test', () => {
+  const kit = renderKit(IconButton, props)
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_icon_button_kit_default')
+  const iconElement = kit.querySelector('.icon_button_icon')
+  expect(iconElement).toBeInTheDocument()
+})
+it("should be accessible", async () => {
+  ensureAccessible(IconButton, props)
+})
+test('passes link variant prop', () => {
+  const kit = renderKit(IconButton, { ...props, variant: "link" })
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_icon_button_kit_link')
+})
+test('should set button type to "submit" when htmlType prop is passed', () => {
+  const kit = renderKit(IconButton, { ...props, htmlType: 'submit' })
+  const buttonElement = kit.querySelector('button')
+  expect(buttonElement).toHaveAttribute('type', 'submit')
+})
+test('passes custom classname', () => {
+  const kit = renderKit(IconButton, { ...props, className: "extra_class" })
+  expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_icon_button_kit_default extra_class')
+})

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb CHANGED Viewed

@@ -1,6 +1,6 @@
 <%= pb_content_tag(:li) do %>
-  <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
-    <div class="circle">
+  <div class="box" style="max-width: min-content;">
+    <div class="circle" id="<%= object.tooltip_trigger_class %>" >
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
     </div>
     <% if object.tooltip.present? %>

data/app/pb_kits/playbook/pb_radio/_radio.tsx CHANGED Viewed

@@ -1,6 +1,4 @@
-/*eslint-disable react/no-multi-comp */
-import React, { forwardRef, useRef } from 'react'
+import React, { useRef, forwardRef } from 'react'
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
@@ -10,7 +8,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 type RadioProps = {
   aria?: { [key: string]: string },
   alignment?: string,
-  checked?: boolean,
+  checked?: boolean, // removed default assignment here
   children?: React.ReactChild[] | React.ReactChild,
   customChildren?: boolean,
   className?: string,
@@ -24,10 +22,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 = ({
+const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   aria = {},
   alignment,
   children,
@@ -43,110 +41,123 @@ const Radio = ({
   name = 'radio_name',
   text = 'Radio Text',
   value = 'radio_text',
+  checked,
   onChange = () => { void 0 },
   ...props
-}: RadioProps, ref: any) => {
-  const radioRef = useRef(null);
+}, 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)
-  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 = (props: RadioProps & any) => {
-    if (children && customChildren == false)
-      return (children)
+  const displayRadio = (inputProps: any) => {
+    if (children && customChildren === false)
+      return children
     else
-    return (
-    <input
-        disabled={disabled}
-        id={id}
-        name={name}
-        onChange={onChange}
-        ref={ref}
-        text={text}
-        type="radio"
-        value={value}
-        {...props}
-    />
-  )}
+      return (
+        <input
+            {...checkedProps}
+            disabled={disabled}
+            id={id}
+            name={name}
+            onChange={onChange}
+            ref={setRefs}
+            type="radio"
+            value={value}
+            {...inputProps}
+        />
+      )
+  }
   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')
       ) {
-        radioRef.current?.click();
+        internalRef.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={radioRef}
+            ref={setRefs}
             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>
+  )
+})
-export default forwardRef(Radio);
+Radio.displayName = "Radio"
+export default Radio