playbook_ui 10.23.0.pre.cachetest → 10.24.0

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_dashboard_value/dashboard_value.rb

@@ -13,12 +13,24 @@ module Playbook
                         default: {}
 
       def formatted_stat_value
-        { **stat_value, value: stat_value[:value].to_i }
+        { **stat_value, value: sanitized_stat_value }
       end
 
       def classname
         generate_classname("pb_dashboard_value_kit", align)
       end
+
+      # rubocop:disable Lint/FloatComparison
+      # Comparing the value coerced to a float versus an integer is the point of this methodd
+      def sanitized_stat_value
+        value = stat_value[:value]
+        if value.is_a?(::String)
+          value.to_f == value.to_i ? value.to_i : value.to_f
+        else
+          value
+        end
+      end
+      # rubocop:enable Lint/FloatComparison
     end
   end
 end

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.html.erb

@@ -1,21 +1,28 @@
 <%= pb_rails("dashboard_value", props: {
   stat_label: "Decreased Value",
-  stat_value: {value: 1428, unit: "appts"},
-  stat_change: {change: "decrease", value: 26.1}
+  stat_value: { value: 1428, unit: "appts" },
+  stat_change: { change: "decrease", value: 26.1 }
 }) %>
 
 <br><br>
 
 <%= pb_rails("dashboard_value", props: {
   stat_label: "Increased Value",
-  stat_value: {value: 938, unit: "homes"},
-  stat_change: {change: "increase", value: 56.1}
+  stat_value: { value: 938, unit: "homes" },
+  stat_change: { change: "increase", value: 56.1 }
 }) %>
 
 <br><br>
 
 <%= pb_rails("dashboard_value", props: {
   stat_label: "Neutral Value",
-  stat_value: {value: 261, unit: "windows"},
-  stat_change: {value: 86}
+  stat_value: { value: 261, unit: "windows" },
+  stat_change: { value: 86 }
+}) %>
+
+<br><br>
+
+<%= pb_rails("dashboard_value", props: {
+  stat_label: "Pitch Rate",
+  stat_value: { value: 90.9, unit: "%" }
 }) %>

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -31,6 +31,15 @@ const DashboardValueDefault = (props) => {
           statValue={{ value: '261', unit: 'windows' }}
           {...props}
       />
+
+      <br />
+      <br />
+
+      <DashboardValue
+          statLabel="Pitch Rate"
+          statValue={{ value: '90.9', unit: '%' }}
+          {...props}
+      />
     </div>
   )
 }

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/_dialog.scss

@@ -8,7 +8,7 @@
 
 
 
-// Dialog Animations 
+// Dialog Animations
 
 @keyframes modalFadeIn {
 	from {
@@ -72,7 +72,7 @@
 	border: 0;
 	max-height: calc(100vh - #{$gutter * 2});
 	max-width: calc(100vw - #{$gutter * 2});
-	overflow: scroll;
+	overflow: auto;
 	animation-name: modalFadeIn;
 	animation-duration: $animation-duration;
 	outline: none;
@@ -131,4 +131,4 @@
 			opacity: $opacity_hidden;
 		}
 	}
-}
+}

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) => {

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

@@ -4,7 +4,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'
 
 import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'

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

@@ -3,7 +3,7 @@
 import React, { useContext } 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 { CloseIcon } from '../_close_icon'
 import { DialogContext } from '../_dialog_context'

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md

@@ -1,2 +1,2 @@
-When shouldCloseOnOverlayClick is explicitly set to `false`, click events on the overlay will not close the modal.
-By default, shouldCloseOnOverlayClick is set to true.
+When `shouldCloseOnOverlayClick` is explicitly set to `false`, click events on the overlay will not close the modal.
+By default, `shouldCloseOnOverlayClick` is set to true.

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 
 type DistributionBarProps = {
   className?: string,

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
 
-import { buildCss, noop } from '../utilities/props'
+import { buildCss, buildDataProps, noop } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import type { Callback } from '../types'
 
@@ -14,15 +14,17 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: array<string>,
   className?: string,
+  data?: object,
   acceptedFilesDescription?: string,
   onFilesAccepted: Callback,
 }
 
 const FileUpload = (props: FileUploadProps) => {
   const {
-    accept = ['*'],
+    accept = null,
     acceptedFilesDescription = '',
     className,
+    data = {},
     onFilesAccepted = noop,
   } = props
   const onDrop = useCallback((files) => {
@@ -34,17 +36,22 @@ const FileUpload = (props: FileUploadProps) => {
     onDrop,
   })
 
-  const acceptedFileTypes = accept.map((fileType) => {
-    if (fileType.startsWith('image/')) {
-      return fileType.replace('image/', ' ')
-    } else {
-      return fileType
-    }
-  })
+  const acceptedFileTypes = () => {
+    return accept.map((fileType) => {
+      if (fileType.startsWith('image/')) {
+        return fileType.replace('image/', ' ')
+      } else {
+        return fileType
+      }
+    })
+  }
+
+  const dataProps = buildDataProps(data)
 
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
+        {...dataProps}
         {...getRootProps()}
     >
       <Card>
@@ -53,7 +60,7 @@ const FileUpload = (props: FileUploadProps) => {
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />
-            <p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes}`}</p>
+            <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
           </If>
         </Body>
       </Card>

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import FileUpload from './_file_upload'
+
+const testid = 'fileupload-test'
+
+test('returns namespaced class name', () => {
+  render(
+    <FileUpload
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveClass('pb_file_upload_kit')
+})
+
+test('shows default drag text', () => {
+  render(
+    <FileUpload
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveTextContent('Choose a file or drag it here')
+})
+
+test('shows type-specific drag text', () => {
+  render(
+    <FileUpload
+        accept={['image/svg+xml']}
+        data={{ testid: testid }}
+    />
+  )
+
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveTextContent('Choose a file or drag it here. The accepted file types are: svg+xml')
+})

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx

@@ -3,7 +3,7 @@
 import React, { Node } from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../../utilities/globalProps.js'
+import { globalProps } from '../../utilities/globalProps'
 
 import Card from '../../pb_card/_card'
 

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
 type FlexProps = {
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx

@@ -2,7 +2,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'
 type FlexItemPropTypes = {
   children: array<React.ReactNode> | React.ReactNode,
   fixedSize: string,

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx

@@ -7,7 +7,7 @@ const FlexAlign = (props) => {
 
       <Title
           size={4}
-          text="Row"
+          text="row"
           {...props}
       />
       <br />

data/app/pb_kits/playbook/pb_flex/flex_item.rb

@@ -8,17 +8,11 @@ module Playbook
                   default: false
       prop :shrink, type: Playbook::Props::Boolean,
                     default: false
-      prop :flex, type: Playbook::Props::Enum,
-                  values: %w[0 1 2 3 4 5 6 7 8 9 10 11 12 none],
-                  default: "none"
+
       prop :overflow, type: Playbook::Props::Enum,
                       values: %w[auto hidden inherit initial scroll visible] + [nil],
                       default: nil
 
-      prop :order, type: Playbook::Props::Enum,
-                   values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
-                   default: "none"
-
       prop :align_self, type: Playbook::Props::Enum,
                         values: %w[start center end stretch] + [nil],
                         default: nil
@@ -27,7 +21,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class, display_flex_class) + overflow_class + order_class + align_self_class
+        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + overflow_class + align_self_class
       end
 
       def style_value
@@ -59,22 +53,6 @@ module Playbook
       def shrink_class
         shrink ? "shrink" : nil
       end
-
-      def flex_class
-        if flex == "none"
-          nil
-        else
-          "flex_#{flex}"
-        end
-      end
-
-      def order_class
-        if order == "none"
-          ""
-        else
-          "order_#{order}"
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_form_group/_form_group.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 FormGroupProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -41,6 +41,7 @@
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
     min-height: 45px;
+    margin-bottom: 16px;
   }
 
   & > [class^=pb_button_kit]:not(:first-child) {
@@ -48,6 +49,7 @@
     border-top-left-radius: 0;
     border-left-width: 0;
     min-height: 45px;
+    margin-bottom: 16px;
   }
 
   & > [class^=pb_date_picker_kit]:not(:last-child) {