playbook_ui 7.0.0 → 7.0.1.pre.alpha1

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -15,8 +15,6 @@ module Playbook
       prop :value
       prop :name
 
-      prop :input_options, type: Playbook::Props::Hash,
-                           default: {}
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :form_spacing, type: Playbook::Props::Boolean,
@@ -31,7 +29,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked, input_options)
+        check_box_tag(name, value, checked)
       end
 
       def checkbox_label_status

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

@@ -4,7 +4,6 @@ examples:
     - checkbox_checked: Load as checked
     - checkbox_custom: Custom Checkbox
     - checkbox_error: Default w/ Error
-    - checkbox_options: Checkbox w/ Options
 
   react:
   - checkbox_default: Default

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb

@@ -15,7 +15,7 @@
   <% end %>
 
   <% if object.children %>
-    <div class="pb-circle-chart-block">
+    <div class="pb_circle_chart_block">
       <%= capture(&object.children) %>
     </div>
   <% end %>

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

@@ -5,7 +5,7 @@
 
 }
 
-.pb-circle-chart-block {
+.pb_circle_chart_block {
     position:absolute;
     display: flex;
     justify-content: center;

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

@@ -10,15 +10,4 @@ examples:
   - circle_chart_with_title: Title
   - circle_chart_inner_sizes: Inner Circle Size Options  
 
-  react:
-  - circle_chart_default: Default Style
-  - circle_chart_live_data: Live Data
-  - circle_chart_rounded: Rounded Corners
-  - circle_chart_block: Accepts Any Block
-  - circle_chart_colors: Color Overrides
-  - circle_chart_with_labels: Data Labels
-  - circle_chart_with_legend_kit: Legend
-  - circle_chart_with_title: Title
-  - circle_chart_inner_sizes: Inner Circle Size Options  
-
 

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

@@ -46,11 +46,7 @@ const CircleIconButton = (props: CircleIconButtonProps) => {
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_circle_icon_button_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_circle_icon_button_kit'), className, globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb

@@ -3,9 +3,8 @@
   icon: "search",
   link: "https://google.com"
 }) %>
-<br/>
 <%= pb_rails("circle_icon_button", props: {
-  variant: "secondary",
+  variant: "primary",
   icon: "window",
   link: "https://google.com",
   new_window: true

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -58,11 +58,7 @@ const Contact = (props: ContactProps) => {
     id } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_contact_kit'),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_contact_kit'), className, globalProps(props))
 
   return (
     <div

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

@@ -45,11 +45,7 @@ const Currency = (props: CurrencyProps) => {
   const [whole, decimal = '00'] = amount.split('.')
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_currency_kit', align, size, { dark }),
-    globalProps(props),
-    className
-  )
+  const classes = classnames(buildCss('pb_currency_kit', align, size, { dark: dark }), className, globalProps(props))
 
   return (
     <div

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_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 +1,8 @@
-<%= react_component('DistributionBar', object.chart_options) %>
+<%= 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 %>

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

@@ -22,13 +22,6 @@ module Playbook
           (width.to_f * 100 / widths.sum).round(2)
         end
       end
-
-      def chart_options
-        {
-          size: size,
-          widths: widths,
-        }
-      end
     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.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_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,16 +24,7 @@
   <%= 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 },
-    checked_value: "yes",
-    unchecked_value: "no",
-    id: "checkbox-id",
-    name: "checkbox-name",
-    class: "checkbox-class" 
-  %>
-  <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
+  <%= form.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -28,7 +28,6 @@
   <%= 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

@@ -15,7 +15,6 @@
     :example_select_field,
     :example_collection_select_field,
     :example_checkbox_field
-    :example_date_picker_field1
 
 
     def self.model_name
@@ -52,7 +51,6 @@
   <%= 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

@@ -15,7 +15,6 @@
     :example_select_field,
     :example_collection_select_field,
     :example_checkbox_field
-    :example_date_picker_field2
 
 
     def self.model_name
@@ -52,7 +51,6 @@
   <%= 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

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

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

@@ -4,18 +4,13 @@ module Playbook
   module PbForm
     module FormBuilder
       module CheckboxField
-        def check_box(name, props: {}, **options)
+        def check_box(name, props: {}, **options, &block)
           label_text = @template.label(@object_name, name) if props[:label] == true
           options[:required] = true if props[:required]
           props[:margin_bottom] = "sm"
           props[:form_spacing] = true
 
-          checked_value = options[:checked_value]
-          unchecked_value = options[:unchecked_value]
-          options.delete(:checked_value)
-          options.delete(:unchecked_value)
-
-          input = super(name, options, checked_value, unchecked_value)
+          input = super(name, **options, &block)
 
           if props[:label]
             @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +

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;