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

playbook_ui 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275 → 14.14.0.pre.alpha.play1868dependencyremovallodash6286

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

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c6ef102f160200110b47477b34a9a06798b4ef4f1122151a12341775c20c9a5
-  data.tar.gz: 14eb41101975901c5f557d1d8b6721fc9301e9b54a30ec0c335b8717dccbe508
+  metadata.gz: d27a1fb0e1b7ff46b56d6009a0eb62cd2d8fee0a67bcbe52756710ef9aaf5581
+  data.tar.gz: c46d01bb2e6d6b386297b040c132f438da09b14b5582319a07ec6358f758917f
 SHA512:
-  metadata.gz: 301d0b715331e1e388be9b554865dc59f79b88f5ef11f3a7f038554f215c7b72d6541465d027adcf0c8f9a0fea2dd4e9e1e6f608c6b0d9b9f5360fc52a70ffc8
-  data.tar.gz: 6e1bc33d1fbe6b1bebe4b112b42c73107685786fbc7ddd01df4f95fe302d015e1225edcfbe042e2931728dcd655fe97a9d3629417c639392fa3753a7cb533ee6
+  metadata.gz: 7c87e5ec2242eaf97737497152d0494d166282ad0da5dc17e0efd1008e1c698bbeb1389fd96cff40e8b1607caaa92dfdf3a90b9461e9876cf4c79030bd079b2d
+  data.tar.gz: f41cc750d14f6ec823711b0f85c3af3f60ff08f7149de6242969353b0fb2bac27576e03d75e587370d1286f46c2b60b64554cc19aa663a432274ee91c0dd03b3

data/app/pb_kits/playbook/pb_card/_card.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { get } from 'lodash'
+import { get } from '../utilities/object'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

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_filter/Filter/CurrentFilters.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty, map, omitBy } from 'lodash'
+import { isEmpty, map, omitBy } from '../../utilities/object'
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -40,13 +40,13 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                   className="filter"
                   key={`filter-${name}`}
               >
-                { value === true ?
+                { value === true ?
                 <Title
                     dark={dark}
                     size={4}
                     tag="h4"
                     text={name}
-                /> :
+                /> :
                 <div>
                   <Caption
                       dark={dark}
@@ -58,7 +58,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                       tag="h4"
                       text={value}
                   />
-                </div>
+                </div>
                 }
               </div>
             ))}

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty } from 'lodash'
+import { isEmpty } from '../../utilities/object'
 import Flex from '../../pb_flex/_flex'
@@ -46,7 +46,7 @@ const FilterSingle = ({
           paddingRight="lg"
           vertical="center"
       >
-        { children &&
+        { children &&
           <>
             <FiltersPopover
                 dark={dark}

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

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

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx CHANGED Viewed

@@ -10,7 +10,8 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
-import { merge } from 'lodash'
+import { merge} from '../utilities/object'
 type TreemapChartProps = {
   chartData: {
@@ -53,7 +54,7 @@ const TreemapChart = ({
   type = "treemap",
   ...props
 }: TreemapChartProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -62,9 +63,9 @@ const TreemapChart = ({
     dark
       ? Highcharts.setOptions(highchartsDarkTheme)
       : Highcharts.setOptions(highchartsTheme);
-  };
+  };
   treemap(Highcharts)
-  setupTheme();
+  setupTheme();
   const staticOptions = {
     title: {

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

@@ -3,7 +3,8 @@ import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
-import { get, isString, uniqueId } from 'lodash'
+import { get, isString, uniqueId } from '../utilities/object'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'

data/app/pb_kits/playbook/utilities/object.ts CHANGED Viewed

@@ -1,3 +1,84 @@
 /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
-export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1
+export const isEmpty = (obj: any) => [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;
+export const get = <T, R = any>(obj: T, path: string, defaultValue?: R): R | any => {
+  const travel = (regexp: RegExp): any =>
+    String.prototype.split
+      .call(path, regexp)
+      .filter(Boolean)
+      .reduce((res: any, key: string) => (res !== null && res !== undefined ? res[key] : res), obj)
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/)
+  return result === undefined || result === obj ? defaultValue : result
+}
+export const map = <T, U>(
+  collection: T[] | Record<string, T> | null | undefined,
+  iteratee: (value: any, key: string, collection: T[] | Record<string, T>) => U
+): U[] => {
+  if (!collection) return []
+  const coerce = (val: any) => {
+    if (val === true) return val
+    if (
+      typeof val === "number" ||
+      typeof val === "string" ||
+      typeof val === "boolean" ||
+      val === null
+    )
+      return String(val)
+    return val
+  }
+  return Array.isArray(collection)
+    ? collection.map((v, i) => iteratee(coerce(v), String(i), collection))
+    : Object.keys(collection).map(key => iteratee(coerce(collection[key]), key, collection))
+}
+export const isString = (str: unknown): str is string =>
+  str != null && typeof (str as any).valueOf() === "string"
+export const omitBy = <T extends Record<string, any>>(
+  obj: T,
+  predicate: (value: T[keyof T], key: string) => boolean
+): Partial<T> => {
+  if (obj === null || typeof obj !== 'object') return {} as Partial<T>
+  return Object.keys(obj).reduce((result, key) => {
+    const typedKey = key as keyof T
+    if (!predicate(obj[typedKey], key)) {
+      result[typedKey] = obj[typedKey]
+    }
+    return result
+  }, {} as Partial<T>)
+}
+export const uniqueId: (prefix?: string) => string = (() => {
+  let counter = 0
+  return (prefix = '') => `${prefix}${++counter}`
+})()
+type PlainObject = { [key: string]: any }
+const isObject = (item: any): item is PlainObject =>
+  item !== null && typeof item === 'object'
+export const merge = <T extends PlainObject>(
+  target: T,
+  ...sources: PlainObject[]
+): T => {
+  if (!sources.length) return target
+  const source = sources.shift()!
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key: string) => {
+      const typedKey = key as keyof T
+      const srcValue = source[key]
+      if (isObject(srcValue)) {
+        if (!target[typedKey]) {
+          target[typedKey] = (Array.isArray(srcValue) ? [] : {}) as unknown as T[typeof typedKey]
+        }
+        merge(target[typedKey], srcValue)
+      } else {
+        target[typedKey] = srcValue
+      }
+    })
+  }
+  return merge(target, ...sources)
+}