playbook_ui 10.23.0.pre.alpha2 → 10.23.0.pre.cachetest

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

@@ -7,8 +7,6 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options
-  - button_size: Button Size
-  - button_form: Button Form Attribute
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width
@@ -17,5 +15,3 @@ examples:
   - button_block_content: Button Block Content
   - button_accessibility: Button Accessibility Options
   - button_options: Button Additional Options (onClick)
-  - button_size: Button Size
-  - button_form: Button Form Attribute

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

@@ -5,5 +5,3 @@ 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'
-export { default as ButtonForm } from './_button_form.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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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, 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 %>
+  <%= pb_rails("card/card_body", props: { padding: object.body_padding }) do %>
     <%= content %>
   <% end if content.present? %>
 <% end %>

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

@@ -36,94 +36,6 @@ 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, flex_direction, justify_content, flex_wrap, justify_self, align_items, align_content, align_self, flex, flex_grow, flex_shrink, order, separator: " ")
+        generate_classname("pb_card_body_kit", padding, 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 type CheckboxProps = {
   aria?: object,

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

@@ -14,7 +14,6 @@ type CircleChartProps = {
   children: Node,
   className?: string,
   colors: array,
-  dark?: Boolean,
   data?: Object,
   dataLabelHtml: string,
   dataLabels: boolean,
@@ -41,7 +40,6 @@ const CircleChart = (props: CircleChartProps) => {
     children,
     className,
     colors = [],
-    dark = false,
     data = {},
     dataLabelHtml = '<div>{point.name}</div>',
     dataLabels = false,
@@ -83,7 +81,6 @@ 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,7 +69,6 @@ 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 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'
+import { globalProps } from '../../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -11,7 +11,6 @@ import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
 
 type CurrencyProps = {
-  abbreviate?: boolean,
   align?: 'center' | 'left' | 'right',
   amount: string,
   aria?: object,
@@ -35,7 +34,6 @@ const sizes = {
 
 const Currency = (props: CurrencyProps) => {
   const {
-    abbreviate = false,
     align = 'left',
     aria = {},
     amount,
@@ -71,24 +69,6 @@ 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}
@@ -112,7 +92,7 @@ const Currency = (props: CurrencyProps) => {
             dark={dark}
             size={sizes[size]}
         >
-          {getAmount}
+          {`${whole}`}
         </Title>
 
         <Body
@@ -120,11 +100,10 @@ const Currency = (props: CurrencyProps) => {
             color="light"
             dark={dark}
         >
-          {getAbbreviation}
           <If condition={unit}>
             {unit}
             <Else />
-            {getDecimalValue}
+            {`.${decimal}`}
           </If>
         </Body>
       </div>

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

@@ -33,9 +33,6 @@ 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
@@ -51,7 +48,7 @@ module Playbook
       def title_props
         {
           size: size_value,
-          text: abbreviate ? abbreviated_value : whole_value,
+          text: whole_value,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -87,18 +84,12 @@ 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? && abbreviate == false
+        if unit.nil?
           decimal_part.nil? ? ".00" : ".#{decimal_part}"
         else
-          abbreviate ? "#{abbreviated_value(-1)}#{unit}" : unit
+          unit
         end
       end
 

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: "lg",
+  size: "sm",
   unit: "/mo",
   variant: "bold",
 }) %>

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

@@ -5,11 +5,9 @@ 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,4 +2,3 @@ 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_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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../../utilities/globalProps.js'
 
 // 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'
+import { globalProps } from '../../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../../utilities/globalProps.js'
 
 import { CloseIcon } from '../_close_icon'
 import { DialogContext } from '../_dialog_context'

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

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'
+import { globalProps } from '../../utilities/globalProps.js'
 
 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'
+import { globalProps } from '../utilities/globalProps.js'
 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'
+import { globalProps } from '../utilities/globalProps.js'
 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,11 +8,17 @@ 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
@@ -21,7 +27,7 @@ module Playbook
                           default: false
 
       def classname
-        generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + overflow_class + align_self_class
+        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
       end
 
       def style_value
@@ -53,6 +59,22 @@ 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'
+import { globalProps } from '../utilities/globalProps.js'
 
 type FormGroupProps = {
   aria?: object,

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

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

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx

@@ -3,8 +3,8 @@ import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
 import Icon from '../pb_icon/_icon.jsx'
-import Avatar from '../pb_avatar/_avatar'
-import { globalProps } from '../utilities/globalProps'
+import Avatar from '../pb_avatar/_avatar.jsx'
+import { globalProps } from '../utilities/globalProps.js'
 
 type FormPillProps = {
   className?: string,