playbook_ui 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6311

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c6ef102f160200110b47477b34a9a06798b4ef4f1122151a12341775c20c9a5
-  data.tar.gz: 14eb41101975901c5f557d1d8b6721fc9301e9b54a30ec0c335b8717dccbe508
+  metadata.gz: 17fca453caefd685c9ed41cdcc066aa79f6623d5bf4c9a8601a1e9f95ab47c26
+  data.tar.gz: 2ed3fe8635e74c438de05d9c2d9c18d371d5e91abc0f43564f110cbc6ccaa381
 SHA512:
-  metadata.gz: 301d0b715331e1e388be9b554865dc59f79b88f5ef11f3a7f038554f215c7b72d6541465d027adcf0c8f9a0fea2dd4e9e1e6f608c6b0d9b9f5360fc52a70ffc8
-  data.tar.gz: 6e1bc33d1fbe6b1bebe4b112b42c73107685786fbc7ddd01df4f95fe302d015e1225edcfbe042e2931728dcd655fe97a9d3629417c639392fa3753a7cb533ee6
+  metadata.gz: c9da096a667206278c2029e809abad8cc4bd1e0923310d335532b8c8cfd267957bc77be6d1e3afffef2eb03d64ed1fb953cc5ebbff7e6f8e17336d85a5949d08
+  data.tar.gz: 55c2c623531974e1bab492e272b3fa1cfa9996d3ab5efcb65d34ba0a0037d6e86d0576ea1376eeef937d4047f6adc92abb6194ce1ff0edd16e6c3db05d11f027

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

@@ -120,7 +120,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
-  
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
           nullDisplay && !amount ? (
@@ -175,7 +174,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         )}
       </div>
     </div>
-  );
+  )
 }
 
 export default Currency

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

@@ -11,7 +11,7 @@
       <% end %>
     <% else %>
      <% if object.null_display && object.amount.blank? %>
-        <%= pb_rails("title", props: {text: object.null_display}) %>
+        <%= pb_rails("title", props: object.title_props) %>
       <% else %>
         <%= pb_rails("body", props: object.currency_wrapper_props) do %>
           <%= object.negative_sign %><%= object.symbol %>

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

@@ -68,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,
         }
@@ -148,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

@@ -3,6 +3,7 @@
     label: "Nil",
     margin_bottom: "md",
     null_display: "--",
+    size: "sm"
 }) %>
 
 <%= pb_rails("currency", props: {
@@ -10,11 +11,12 @@
     label: "Nil",
     margin_bottom: "md",
     null_display: "$0.00",
+    size: "sm"
 }) %>
 
 <%= pb_rails("currency", props: {
     amount: "",
     label: "Nil",
-    margin_bottom: "md",
     null_display: " ",
+    size: "sm"
 }) %>

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

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

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

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

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

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

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

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

@@ -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_tooltip/index.js

@@ -152,4 +152,4 @@ export default class PbTooltip extends PbEnhancedElement {
   get triggerMethod() {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
-}
+}