playbook_ui 10.21.0.pre.alpha.na1 → 10.21.1.pre.alpha1

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_card/card.html.erb

@@ -4,7 +4,7 @@
     class: object.classname,
     aria: object.aria,
     dark: object.dark) do %>
-  <%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
+  <%= pb_rails("card/card_body", props: { padding: object.body_padding, flex_direction: object.body_flex_direction, flex_wrap: object.body_flex_wrap, justify_content: object.body_justify_content, justify_self: object.body_justify_self, align_items: object.body_align_items, align_content: object.body_align_content, align_self: object.body_align_self, flex: object.body_flex, flex_grow: object.body_flex_grow, flex_shrink: object.body_flex_shrink, order: object.body_order }) do %>
     <%= content %>
   <% end if content.present? %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.rb

@@ -36,6 +36,94 @@ module Playbook
         end
       end
 
+      def body_flex_direction
+        if flex_direction.present?
+          "flex_direction_#{flex_direction}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_wrap
+        if flex_wrap.present?
+          "flex_wrap_#{flex_wrap}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_content
+        if justify_content.present?
+          "justify_content_#{justify_content}"
+        else
+          ""
+        end
+      end
+
+      def body_justify_self
+        if justify_self.present?
+          "justify_self_#{justify_self}"
+        else
+          ""
+        end
+      end
+
+      def body_align_items
+        if align_items.present?
+          "align_items_#{align_items}"
+        else
+          ""
+        end
+      end
+
+      def body_align_content
+        if align_content.present?
+          "align_content_#{align_content}"
+        else
+          ""
+        end
+      end
+
+      def body_align_self
+        if align_self.present?
+          "align_self_#{align_self}"
+        else
+          ""
+        end
+      end
+
+      def body_flex
+        if flex.present?
+          "flex_#{flex}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_grow
+        if flex_grow.present?
+          "flex_grow_#{flex_grow}"
+        else
+          ""
+        end
+      end
+
+      def body_flex_shrink
+        if flex_shrink.present?
+          "flex_shrink_#{flex_shrink}"
+        else
+          ""
+        end
+      end
+
+      def body_order
+        if order.present?
+          "order_#{order}"
+        else
+          ""
+        end
+      end
+
     private
 
       def selected_class

data/app/pb_kits/playbook/pb_card/card_body.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbCard
     class CardBody < Playbook::KitBase
       def classname
-        generate_classname("pb_card_body_kit", padding, separator: " ")
+        generate_classname("pb_card_body_kit", padding, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
       end
     end
   end

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')
+})

data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb

@@ -0,0 +1,27 @@
+<%= pb_rails("currency", props: {
+  abbreviate: true,
+  amount: "2,200.50",
+  label: "Thousands (with Unit)",
+  margin_bottom: "md",
+  unit: "/mo",
+}) %>
+
+<%= pb_rails("currency", props: {
+  abbreviate: true,
+  amount: "3424123",
+  label: "Millions",
+  margin_bottom: "md",
+}) %>
+
+<%= pb_rails("currency", props: {
+  abbreviate: true,
+  amount: "45,300,000,000",
+  label: "Billions",
+  margin_bottom: "md",
+}) %>
+
+<%= pb_rails("currency", props: {
+  abbreviate: true,
+  amount: "983,200,000,000,000",
+  label: "Trillions",
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+import Currency from '../_currency'
+
+const CurrencyAbbreviated = (props) => {
+  return (
+    <>
+      <Currency
+          abbreviate
+          amount="2,500"
+          label="Thousands (with Unit)"
+          marginBottom="md"
+          size="md"
+          unit="/mo"
+          {...props}
+      />
+      <Currency
+          abbreviate
+          amount="45300000"
+          label="Millions"
+          marginBottom="md"
+          size="md"
+          {...props}
+      />
+      <Currency
+          abbreviate
+          amount="6,700,000,000"
+          label="Billions"
+          marginBottom="md"
+          size="md"
+          {...props}
+      />
+      <Currency
+          abbreviate
+          amount="9,900,000,000,000"
+          label="Trillions"
+          size="md"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyAbbreviated

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -18,7 +18,7 @@
 <%= pb_rails("currency", props: {
   amount: "45",
   label: "Bold",
-  size: "sm",
+  size: "lg",
   unit: "/mo",
   variant: "bold",
 }) %>

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

@@ -5,9 +5,11 @@ examples:
   - currency_size: Size
   - currency_alignment: Alignment
   - currency_no_symbol: No Symbol
+  - currency_abbreviated: Abbreviate Larger Amounts
 
   react:
   - currency_variants: Variants
   - currency_size: Size
   - currency_alignment: Alignment
   - currency_no_symbol: No Symbol
+  - currency_abbreviated: Abbreviate Larger Amounts

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

@@ -2,3 +2,4 @@ export { default as CurrencyVariants } from './_currency_variants.jsx'
 export { default as CurrencySize } from './_currency_size.jsx'
 export { default as CurrencyAlignment } from './_currency_alignment.jsx'
 export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
+export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js

@@ -0,0 +1,215 @@
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
+
+import Highcharts from 'highcharts'
+
+const highchartsDarkTheme = {
+  lang: {
+    thousandsSep: ',',
+  },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+  chart: {
+    borderWidth: 0,
+    borderRadius: 0,
+    plotBackgroundColor: null,
+    plotShadow: false,
+    plotBorderWidth: 0,
+  },
+  title: {
+    style: {
+      color: colors.text_dk_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.regular,
+      fontSize: typography.heading_3,
+    },
+  },
+  subtitle: {
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    },
+  },
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_dark,
+    tickColor: colors.border_dark,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_dk_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        color: colors.text_dk_default,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.regular,
+        fontSize: typography.heading_4,
+      },
+    },
+  },
+  yAxis: {
+    alternateGridColor: null,
+    minorTickInterval: null,
+    gridLineColor: colors.border_dark,
+    minorGridLineColor: colors.border_dark,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_dk_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_dk_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  },
+  legend: {
+    layout: 'horizontal',
+    align: 'center',
+    verticalAlign: 'bottom',
+    itemStyle: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+    itemHoverStyle: {
+      color: colors.text_dk_default,
+    },
+    itemHiddenStyle: {
+      color: colors.text_dk_lighter,
+    },
+  },
+  labels: {
+    style: {
+      color: colors.primary,
+    },
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.card_light],
+        [1, colors.card_light],
+      ],
+    },
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  // specific to gauge
+  // unfilled gauge color
+  pane: {
+    background: {
+      borderColor: colors.border_dark,
+    },
+  },
+
+  plotOptions: {
+    series: {
+      type: 'area',
+      nullColor: colors.text_dk_lighter,
+      fillColor: {
+        linearGradient: {
+          x1: 0,
+          y1: 0,
+          x2: 0,
+          y2: 1,
+        },
+        stops: [
+          [0, Highcharts.getOptions().colors[0]],
+          [1, 'white'],
+        ],
+      },
+      threshold: null,
+    },
+
+    // GAUGE STYLES
+    solidgauge: {
+      borderColor: colors.primary,
+      borderWidth: 20,
+      radius: 90,
+      innerRadius: '90%',
+      dataLabels: {
+        borderWidth: 0,
+        color: colors.text_dk_default,
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.regular,
+          fontSize: typography.heading_2,
+        },
+        y: -26,
+      },
+    },
+
+    // PIE STYLES
+    pie: {
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+      ],
+      dataLabels: {
+        style: {
+          fontFamily: typography.font_family_base,
+          fontSize: typography.text_smaller,
+          color: colors.text_dk_light,
+          fontWeight: typography.regular,
+        },
+      },
+    },
+
+    // LINE CHART STYLES
+    line: {
+      dataLabels: {
+        color: colors.text_dk_light,
+      },
+      marker: {
+        lineColor: colors.border_dark,
+      },
+      area: {
+        shadow: false,
+        states: {
+          hover: {
+            lineWidth: 1,
+          },
+        },
+        threshold: null,
+      },
+    },
+  },
+}
+
+export { highchartsDarkTheme }

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.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'
 
 import Body from '../pb_body/_body'
 import StatChange from '../pb_stat_change/_stat_change'

data/app/pb_kits/playbook/pb_dialog/_dialog.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import Modal from 'react-modal'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
 import DialogHeader  from './child_kits/_dialog_header'

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps.js'
+import { globalProps } from '../../utilities/globalProps'
 
 // Body component
 const DialogBody = (props: DialogBodyProps) => {