playbook_ui 6.8.2.pre.alpha1 → 7.0.0.pre.alpha1

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

@@ -1,17 +1,15 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencySmall = (props) => {
+const CurrencySmall = () => {
   return (
     <>
       <Currency
-          {...props}
           amount="2,000.50"
           label="Caption"
           size="sm"
       />
       <Currency
-          {...props}
           align="center"
           amount="342"
           label="Caption"
@@ -19,7 +17,6 @@ const CurrencySmall = (props) => {
           symbol="€"
       />
       <Currency
-          {...props}
           align="right"
           amount="45"
           label="Caption"

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

@@ -4,8 +4,9 @@ examples:
   - currency_small: Small
   - currency_medium: Medium
   - currency_large: Large
-
+  - currency_dark: Dark
   react:
   - currency_small: Small
   - currency_medium: Medium
   - currency_large: Large
+  - currency_dark: Dark

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

@@ -1,3 +1,4 @@
 export { default as CurrencySmall } from './_currency_small.jsx'
 export { default as CurrencyLarge } from './_currency_large.jsx'
 export { default as CurrencyMedium } from './_currency_medium.jsx'
+export { default as CurrencyDark } from './_currency_dark.jsx'

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -41,11 +41,7 @@ const DashboardValue = (props: DashboardValueProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_dashboard_value_kit', align),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_dashboard_value_kit', align), className, globalProps(props))
 
   return (
     <div

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

@@ -1,11 +1,10 @@
 import React from 'react'
 import { DashboardValue } from '../../'
 
-const DashboardValueAlign = (props) => {
+const DashboardValueAlign = () => {
   return (
     <div>
       <DashboardValue
-          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Top Title Value"
           statValue={{ value: '1,428', unit: 'appts' }}
@@ -15,7 +14,6 @@ const DashboardValueAlign = (props) => {
       <br />
 
       <DashboardValue
-          {...props}
           align="center"
           statChange={{ change: 'decrease', value: 56.1 }}
           statLabel="Top Title Value"
@@ -26,7 +24,6 @@ const DashboardValueAlign = (props) => {
       <br />
 
       <DashboardValue
-          {...props}
           align="right"
           statChange={{ change: 'decrease', value: 86 }}
           statLabel="Top Title Value"

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

@@ -1,11 +1,10 @@
 import React from 'react'
 import { DashboardValue } from '../../'
 
-const DashboardValueDefault = (props) => {
+const DashboardValueDefault = () => {
   return (
     <div>
       <DashboardValue
-          {...props}
           statChange={{ change: 'decrease', value: '26.1' }}
           statLabel="Decreased Value"
           statValue={{ value: '1,428', unit: 'appts' }}
@@ -15,7 +14,6 @@ const DashboardValueDefault = (props) => {
       <br />
 
       <DashboardValue
-          {...props}
           statChange={{ change: 'increase', value: 56.1 }}
           statLabel="Increased Value"
           statValue={{ value: '938', unit: 'homes' }}
@@ -25,7 +23,6 @@ const DashboardValueDefault = (props) => {
       <br />
 
       <DashboardValue
-          {...props}
           statChange={{ value: 86 }}
           statLabel="Neutral Value"
           statValue={{ value: '261', unit: 'windows' }}

data/app/pb_kits/playbook/pb_date/date.rb

@@ -13,7 +13,6 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[lg sm xs],
                   default: "sm"
-      prop :timezone, default: "America/New_York"
 
       def classname
         generate_classname("pb_date_kit")
@@ -34,7 +33,7 @@ module Playbook
     private
 
       def pb_date_time
-        Playbook::PbKit::PbDateTime.new(date, timezone)
+        Playbook::PbKit::PbDateTime.new(date)
       end
     end
   end

data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb

@@ -12,13 +12,6 @@
 <br>
 
 <%= pb_rails("date", props: {
-  date: DateTime.now,
-  timezone: "Asia/Tokyo"
-}) %>
-
-<br>
-
-<%= pb_rails("date", props: {
-  date: Date.new(2010, 11, 12),
+  date: "2012-08-02T15:49:29Z",
   size: "xs"
 }) %>

data/app/pb_kits/playbook/pb_date/docs/_description.md

@@ -1,3 +1 @@
 Use to display the date. Year will not display if it is the current year.
-
-`DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.

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

@@ -2,7 +2,6 @@ examples:
   
   rails:
   - date_default: Default
-  - date_timezone: Timezones
   
   
   react:

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx

@@ -18,11 +18,7 @@ type DateRangeStackedProps = {
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
   const { className, dark = false, endDate, startDate } = props
-  const css = classnames(
-    buildCss('pb_date_range_stacked'),
-    globalProps(props),
-    className
-  )
+  const css = classnames(className, buildCss('pb_date_range_stacked'), globalProps(props))
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -33,12 +33,12 @@ const DateStacked = (props: DateStackedProps) => {
     size = 'sm',
   } = props
   const classes = classnames(
+    className,
     buildCss('pb_date_stacked_kit', align, size, {
       dark: dark,
       reverse: reverse,
     }),
-    globalProps(props),
-    className
+    globalProps(props)
   )
 
   const currentYear = new Date().getFullYear().toString()

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx

@@ -5,7 +5,7 @@ const DateTimeStackedDark = () => (
   <div>
     <DateTimeStacked
         dark
-        date={new Date()}
+        date={new Date}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -3,7 +3,7 @@ import { DateTimeStacked } from '../../'
 
 const DateTimeStackedDefault = () => (
   <div>
-    <DateTimeStacked date={new Date()} />
+    <DateTimeStacked date={new Date} />
   </div>
 )
 

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -20,11 +20,7 @@ type DateYearStackedProps = {
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date } = props
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(
-    buildCss('pb_date_year_stacked', align),
-    globalProps(props),
-    className
-  )
+  const css = classnames(className, buildCss('pb_date_year_stacked', align), globalProps(props))
 
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb

@@ -1,8 +1 @@
-<%= content_tag(:figure,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-  <% object.widths_to_percentages.each do |percentage| %>
-    <div class="pb_distribution_width" style="width:<%= percentage %>%"></div>
-  <% end %>
-<% end %>
+<%= react_component('DistributionBar', object.chart_options) %>

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -13,14 +13,11 @@ module Playbook
       prop :widths, type: Playbook::Props::NumberArray,
                     default: [1]
 
-      def classname
-        generate_classname("pb_distribution_bar", size)
-      end
-
-      def widths_to_percentages
-        widths.map do |width|
-          (width.to_f * 100 / widths.sum).round(2)
-        end
+      def chart_options
+        {
+          size: size,
+          widths: widths,
+        }
       end
     end
   end

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

@@ -33,7 +33,7 @@ const FileUpload = (props: FileUploadProps) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
+        className={classnames(buildCss('pb_file_upload_kit', className), globalProps(props))}
         {...getRootProps()}
     >
       <Card>

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -49,7 +49,7 @@
     display: flex;
     flex-shrink: 1;
     flex-wrap: nowrap;
-    overflow-x: auto;
+    overflow-x: scroll;
     padding-right: 80px;
     padding-top: $space_md;
     padding-bottom: $space_md;

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb

@@ -1,5 +1,4 @@
 <%= content_tag(:div,
-    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -23,9 +23,9 @@ type FixedConfirmationToastProps = {
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const { className, status = 'neutral', text } = props
   const css = classnames(
+    className,
     `pb_fixed_confirmation_toast_kit_${status}`,
-    globalProps(props),
-    className
+    globalProps(props)
   )
   const icon = iconMap[status]
 

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

@@ -3,12 +3,9 @@ examples:
   rails:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
-  - fixed_confirmation_toast_dark: Dark
-  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
+  
   
   react:
   - fixed_confirmation_toast_default: Default
   - fixed_confirmation_toast_multi_line: Multi Line
-  - fixed_confirmation_toast_dark: Dark
-  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
   

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

@@ -1,4 +1,2 @@
 export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
 export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
-export { default as FixedConfirmationToastDark } from './_fixed_confirmation_toast_dark.jsx'
-export { default as FixedConfirmationToastMultiLineDark } from './_fixed_confirmation_toast_multi_line_dark.jsx'

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

@@ -51,8 +51,8 @@ const Flex = (props: FlexProps) => {
           reverseClass,
           wrapClass
         ),
-        globalProps(props),
-        className
+        className,
+        globalProps(props)
       )}
     >
       {children}

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

@@ -18,7 +18,7 @@ const FlexItem = (props: FlexItemPropTypes) => {
 
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), globalProps(props), className)}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), className, globalProps(props))}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -24,13 +24,6 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-  <%= form.check_box :example_checkbox,
-                     data: { field1: "value1", field2: "value2" },
-                     props: { text: "Example Checkbox", label: true },
-                     id: "checkbox-id",
-                     name: "checkbox-name",
-                     class: "checkbox-class" %>
-  <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -27,8 +27,6 @@
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb

@@ -13,9 +13,7 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field,
-    :example_checkbox_field
-    :example_date_picker_field1
+    :example_collection_select_field
 
 
     def self.model_name
@@ -51,8 +49,6 @@
   <%= form.input :example_text_area, as: :text %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
-  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
-  <%= form.date_picker :example_date_picker_field1, props: { default_date: 'blank' } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb

@@ -13,9 +13,7 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field,
-    :example_checkbox_field
-    :example_date_picker_field2
+    :example_collection_select_field
 
 
     def self.model_name
@@ -51,8 +49,6 @@
   <%= form.input :example_text_area, {as: :text, input_html: {props: {required: true}}} %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
-  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_field2, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder.rb

@@ -17,8 +17,6 @@ module Playbook
         prepend(TypeaheadField)
         prepend(SelectField)
         prepend(CollectionSelectField)
-        prepend(CheckboxField)
-        prepend(DatePickerField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

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

@@ -18,9 +18,8 @@ type FormPillProps = {
 const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props
   const css = classnames(
-    `pb_form_pill_kit_${'primary'}`,
-    globalProps(props),
-    className
+    [`pb_form_pill_kit_${'primary'}`, className],
+    globalProps(props)
   )
   return (
     <div className={css}>

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

@@ -18,16 +18,13 @@ $form_pill_colors: (
   padding: 0 $space-sm/3;
   height: $pb_form_pill_height;
   border-radius: $pb_form_pill_height/2;
-  cursor: pointer;
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: rgba($color_value, $opacity-1);
       transition: background-color 0.2s ease;
       box-shadow: none;
-      @media (hover:hover) {
-        &:hover {
-          background-color: rgba($color_value, $opacity-2);
-        }
+      &:hover {
+        background-color: rgba($color_value, $opacity-2);
       }
       #{$selector}_text {
         color: $color_value;