playbook_ui 10.21.0.pre.alpha.jg1 → 10.21.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89c2b4d5b904ea641d5c4e5e1a436bdb70f5b8ad5292d6a9491f66dfba2406f2
-  data.tar.gz: 9246be8a7160010539031d1be35b247d9dc90a7f62f5cdfb7257785fdda564c4
+  metadata.gz: a59d79cb7efc701b2cfcda8f853e5d47f6e7a8bb0c63a26ea1fb1a0d1352d7ef
+  data.tar.gz: 4ce8a5b16f4dd0d58a56793bc8aaf8f7e285104fae767a7e4867853ea6531a5f
 SHA512:
-  metadata.gz: 88d2c607e9942698c68473dbf6c3a468a0db61f4bad82c992497df0784d272936bd038ac11914f3ec07e16523872c592212cee958f007856911d4b31fd11523c
-  data.tar.gz: fb7262bf896606e9f7a4e39673962702a1d187cb19557317f9848cc1e8844b9b29c0aed208c4bc8acceaaf81941b23c03f990d5f917b0398f4104311aa68d281
+  metadata.gz: 36e213335bf164b63b39d2958360e6629c0f16cc07ea01fa2a645f36878fc531c5d4a4e84d8f8aa388c68bb9a92961727399297f45048e9cc7ea5e4d54078b18
+  data.tar.gz: 341993d316fbe3a2cad5b26861ae255128657a13505100aa12b46afd2694aa993fa7210f67faa86b2a2f79b9a8ed999d4786cb7a31512c75080aef5198283d72

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -16,8 +16,8 @@ $avatar-sizes: (
   position: relative;
 
   @each $name, $size in $avatar-sizes {
-    &[class*=_#{$name}],
-    &[class*=_#{$name}_thumb] {
+    &[class*=_size_#{$name}],
+    &[class*=_size_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;

data/app/pb_kits/playbook/pb_avatar/{_avatar.jsx → _avatar.tsx}

@@ -1,8 +1,5 @@
-/* @flow */
-
 import React, { useState } from 'react'
 import classnames from 'classnames'
-import { map } from 'lodash'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -11,9 +8,9 @@ import Image from '../pb_image/_image'
 import OnlineStatus from '../pb_online_status/_online_status'
 
 type AvatarProps = {
-  aria?: object,
+  aria?: {[key: string]: string},
   className?: string,
-  data?: object,
+  data?: {[key: string]: string},
   dark?: boolean,
   id?: string,
   imageAlt?: string,
@@ -23,8 +20,8 @@ type AvatarProps = {
   status: "away" | "offline" | "online",
 }
 
-const firstTwoInitials = (name) =>
-  map(name.split(/\s/), (name) => name[0])
+const firstTwoInitials = (name: string) =>
+  name.split(/\s/).map((name) => name[0])
     .join('')
     .substring(0, 2)
 
@@ -41,10 +38,10 @@ const Avatar = (props: AvatarProps) => {
     status = null,
     dark = false,
   } = props
-  const dataProps = buildDataProps(data)
-  const ariaProps = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_avatar_kit', size),
+    buildCss('pb_avatar_kit', `size_${size}`),
     globalProps(props),
     className
   )
@@ -55,6 +52,8 @@ const Avatar = (props: AvatarProps) => {
   const [error, setError] = useState(false)
   const handleError = () => setError(true)
 
+  const canShowImage = imageUrl && !error
+
   return (
     <div
         {...ariaProps}
@@ -66,21 +65,21 @@ const Avatar = (props: AvatarProps) => {
           className="avatar_wrapper"
           data-initials={initials}
       >
-        <If condition={imageUrl && !error}>
+        { canShowImage && (
           <Image
               alt={imageAlt}
               onError={handleError}
               url={imageUrl}
           />
-        </If>
+        )}
       </div>
-      <If condition={status}>
+      {status && (
         <OnlineStatus
             className={`size_${size}`}
             dark={dark}
             status={status}
         />
-      </If>
+      )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -18,7 +18,7 @@ module Playbook
       end
 
       def classname
-        generate_classname("pb_avatar_kit", size)
+        generate_classname("pb_avatar_kit", "size_#{size}")
       end
 
       def online_status_props

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -22,7 +22,7 @@ test('loads the given image url and name', () => {
   const image    = screen.getByAltText(imageAlt)
   const initials = name.split(/\s/)[0].substr(0, 1) + name.split(/\s/)[1].substr(0, 1)
 
-  expect(kit).toHaveClass('pb_avatar_kit_md')
+  expect(kit).toHaveClass('pb_avatar_kit_size_md')
   expect(kit).toHaveAttribute('data-initials', initials)
   expect(image).toHaveAttribute('data-src', imageUrl)
   expect(image).toHaveAttribute('src', imageUrl)

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -8,7 +8,7 @@ import {
   buildCss,
   buildDataProps,
 } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Icon from '../pb_icon/_icon'

data/app/pb_kits/playbook/pb_background/_background.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type BackgroundProps = {
   alt?: string,

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -3,11 +3,12 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import pbChart from '../plugins/pb_chart'
 
 type BarGraphProps = {
   axisTitle: string,
+  dark?: Boolean,
   xAxisCategories: array,
   yAxisMin: number,
   yAxisMax: number,
@@ -30,6 +31,7 @@ type BarGraphProps = {
 export default class BarGraph extends React.Component<BarGraphProps> {
   static defaultProps = {
     className: 'pb_bar_graph',
+    dark: false,
     type: 'column',
     legend: false,
     toggleLegendClick: true,
@@ -38,6 +40,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
+      dark,
       xAxisCategories,
       yAxisMin,
       yAxisMax,
@@ -56,6 +59,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     new pbChart(`.${className}`, {
       axisTitle: axisTitle,
+      dark,
       chartData: chartData,
       colors: colors,
       id: id,

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -33,6 +33,7 @@ module Playbook
           id: id,
           className: classname,
           chartData: chart_data,
+          dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
           subtitle: subtitle,

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import {
   buildAriaProps,

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import {
   buildAriaProps,

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon.jsx'
 
@@ -22,7 +22,7 @@ type ButtonPropTypes = {
   loading?: boolean,
   newWindow?: boolean,
   onClick?: EventHandler,
-  size: 'large' | 'medium' | 'small',
+  size?: 'sm' | 'md' | 'lg',
   text?: string,
   type: 'inline' | null,
   htmlType: string | 'button',
@@ -36,19 +36,19 @@ const buttonClassName = (props: ButtonPropTypes) => {
     disabled = false,
     fullWidth = false,
     loading = false,
-    size = null,
     type = 'inline',
     variant = 'primary',
+    size = null,
   } = props
 
   let className = 'pb_button_kit'
 
   className += `${variant !== null ? `_${variant}` : ''}`
   className += `${type !== null ? `_${type}` : ''}`
-  className += `${size !== null ? `_${size}` : ''}`
   className += `${fullWidth ? '_block' : ''}`
   className += disabled ? '_disabled' : '_enabled'
   className += loading ? '_loading' : ''
+  className += `${size !== null ? ` size_${size}` : ''}`
 
   return className
 }
@@ -106,6 +106,7 @@ const Button = (props: ButtonPropTypes) => {
           className={css}
           href={link}
           id={id}
+          rel="noreferrer"
           role="link"
           target={newWindow ? '_blank' : null}
       >

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,7 +1,24 @@
 @import "./button_mixins";
 
-[class^=pb_button_kit]{
+$pb_button_sizes: (
+  "sm":   0.75rem,
+  "md":   0.875rem,
+  "lg":   1.125rem,
+);
+
+[class*=pb_button_kit]{
   @include pb_button;
+  // Size =================
+  @each $name, $size in $pb_button_sizes {
+    &[class*=size_#{$name}] {
+      font-size: $size;
+      padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
+    }
+    @if $name == "sm" {
+      min-height: 0;
+    }
+  }
+
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

data/app/pb_kits/playbook/pb_button/button.rb

@@ -18,6 +18,9 @@ module Playbook
       prop :text
       prop :type
       prop :value
+      prop :size, type: Playbook::Props::Enum,
+                  values: ["sm", "md", "lg", nil],
+                  default: nil
 
       def options
         {
@@ -44,12 +47,13 @@ module Playbook
         link ? "a" : "button"
       end
 
-    private
-
       def classname
-        generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        button_class + size_class
       end
 
+    private
+
       def disabled_class
         disabled ? "disabled" : "enabled"
       end
@@ -61,6 +65,10 @@ module Playbook
       def loading_class
         loading ? "loading" : nil
       end
+
+      def size_class
+        size ? " size_#{size}" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -89,3 +89,16 @@ test('click event', async () => {
 
   expect(screen.getByText('clicked button!')).toBeInTheDocument()
 })
+
+test('size prop', () => {
+  render(
+    <Button
+        data={{ testid: 'size-test' }}
+        size="sm"
+    />
+  )
+
+  const kit = screen.getByTestId('size-test')
+
+  expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
+})

data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
+<%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
+<%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Button } from '../../'
+
+const ButtonSize = (props) => (
+  <div>
+    <Button
+        size="sm"
+        text="Button sm size"
+        {...props}
+    />
+    {' '}
+    <Button
+        size="md"
+        text="Button md size"
+        {...props}
+    />
+    {' '}
+    <Button
+        size="lg"
+        text="Button lg size"
+        {...props}
+    />
+  </div>
+)
+
+export default ButtonSize

data/app/pb_kits/playbook/pb_button/docs/_button_size.md

@@ -0,0 +1 @@
+By default button has the `md` size style, even if you don't explicitly pass a size prop.

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

@@ -7,6 +7,7 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
+  - button_size: Button Size
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -15,3 +16,4 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
+  - button_size: Button Size

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

@@ -5,3 +5,4 @@ export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
+export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type ButtonToolbarProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
+import { deprecatedProps, globalProps } from '../utilities/globalProps'
 
 type CaptionProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type CardPropTypes = {
   aria?: object,

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -5,7 +5,7 @@ import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type CheckboxProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -14,6 +14,7 @@ type CircleChartProps = {
   children: Node,
   className?: string,
   colors: array,
+  dark?: Boolean,
   data?: Object,
   dataLabelHtml: string,
   dataLabels: boolean,
@@ -40,6 +41,7 @@ const CircleChart = (props: CircleChartProps) => {
     children,
     className,
     colors = [],
+    dark = false,
     data = {},
     dataLabelHtml = '<div>{point.name}</div>',
     dataLabels = false,
@@ -81,6 +83,7 @@ const CircleChart = (props: CircleChartProps) => {
       borderColor: roundedBorderColor,
       borderWidth: roundedBorderWidth,
       chartData: formattedChartData,
+      dark,
       title,
       type: style,
       showInLegend: legend,

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -69,6 +69,7 @@ module Playbook
           borderColor: rounded_border_color,
           borderWidth: rounded_border_width,
           chartData: chart_data_formatted,
+          dark: dark ? "dark" : "",
           title: title,
           height: height,
           type: chart_type,

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -7,7 +7,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import type { Callback } from '../types'
 
 import { noop } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
 import Icon from '../pb_icon/_icon'

data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import React, { useContext } from 'react'
 import AnimateHeight from 'react-animate-height'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps.js'
+import { globalProps } from '../../utilities/globalProps'
 
 import CollapsibleContext from '../context'
 

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

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -11,6 +11,7 @@ import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
 
 type CurrencyProps = {
+  abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
   amount: string,
   aria?: object,
@@ -34,6 +35,7 @@ const sizes = {
 
 const Currency = (props: CurrencyProps) => {
   const {
+    abbreviate = false,
     align = 'left',
     aria = {},
     amount,
@@ -69,6 +71,24 @@ const Currency = (props: CurrencyProps) => {
     className
   )
 
+  const getFormattedNumber = (input) => new Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(input)
+
+  type AbbrType = 'amount' | 'unit'
+
+  const getAbbreviatedValue = (abbrType: AbbrType) => {
+    const num = `${getFormattedNumber(whole.split(',').join(''))}`,
+      isAmount = abbrType === 'amount',
+      isUnit =  abbrType === 'unit'
+    return isAmount ? num.slice(0, -1) : isUnit ? num.slice(-1) : ''
+  }
+
+  const getAmount = abbreviate ? getAbbreviatedValue('amount') : whole,
+    getAbbreviation = abbreviate ? getAbbreviatedValue('unit') : null,
+    getDecimalValue = abbreviate ? '' : `.${decimal}`
+
   return (
     <div
         {...ariaProps}
@@ -92,7 +112,7 @@ const Currency = (props: CurrencyProps) => {
             dark={dark}
             size={sizes[size]}
         >
-          {`${whole}`}
+          {getAmount}
         </Title>
 
         <Body
@@ -100,10 +120,11 @@ const Currency = (props: CurrencyProps) => {
             color="light"
             dark={dark}
         >
+          {getAbbreviation}
           <If condition={unit}>
             {unit}
             <Else />
-            {`.${decimal}`}
+            {getDecimalValue}
           </If>
         </Body>
       </div>

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

@@ -33,6 +33,9 @@ module Playbook
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
 
+      prop :abbreviate, type: Playbook::Props::Boolean,
+                        default: false
+
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -48,7 +51,7 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: whole_value,
+          text: abbreviate ? abbreviated_value : whole_value,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -84,12 +87,18 @@ module Playbook
         amount.split(".").first.to_s
       end
 
+      def abbreviated_value(index = 0..-2)
+        value = amount.split(".").first.split(",").join("")
+        abbreviated_num = number_to_human(value, units: { thousand: "K", million: "M", billion: "B", trillion: "T" }).gsub(/\s+/, "").to_s
+        abbreviated_num[index]
+      end
+
       def units_element
         _, decimal_part = amount.split(".")
-        if unit.nil?
+        if unit.nil? && abbreviate == false
           decimal_part.nil? ? ".00" : ".#{decimal_part}"
         else
-          unit
+          abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
         end
       end
 

data/app/pb_kits/playbook/pb_currency/currency.test.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Currency from './_currency'
+
+test('abbreviate prop returns proper abbreviated amount', () => {
+  render(
+    <>
+      <Currency
+          abbreviate
+          amount="3200"
+          data={{ testid: 'test-thousands' }}
+      />
+      <Currency
+          abbreviate
+          amount="3,200,000"
+          data={{ testid: 'test-millions' }}
+      />
+      <Currency
+          abbreviate
+          amount="3200000000"
+          data={{ testid: 'test-billions' }}
+      />
+      <Currency
+          abbreviate
+          amount="3,200,000,000,000"
+          data={{ testid: 'test-trillions' }}
+      />
+    </>
+  )
+
+  expect(screen.getByTestId('test-thousands')).toHaveTextContent('$3.2K')
+  expect(screen.getByTestId('test-millions')).toHaveTextContent('$3.2M')
+  expect(screen.getByTestId('test-billions')).toHaveTextContent('$3.2B')
+  expect(screen.getByTestId('test-trillions')).toHaveTextContent('$3.2T')
+})