playbook_ui 6.1.0.pre.alpha2 → 7.0.0.pre.alpha1

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

@@ -13,17 +13,17 @@ import {
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
+  id?: string,
   statChange?: {
-    change?: String,
-    value?: String | Number
+    change?: string,
+    value?: string | Number
   },
-  statLabel?: String,
+  statLabel?: string,
   statValue?: {
-    unit?: String,
-    value?: String | Number
+    unit?: string,
+    value?: string | Number
   }
 }
 

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -49,8 +49,8 @@ const LargeDate = ({ value, ...props }: DateSubcomponent) => (
 
 type PbDateProps = {
   size?: "xs" | "sm" | "lg",
-  value?: String,
-  className?: String
+  value?: string,
+  className?: string
 }
 
 const PbDate = ({ size, value, className, ...props }: PbDateProps) => {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -7,11 +7,11 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type DateRangeInlineProps = {
-  className?: String,
-  data?: String,
-  endDate?: Date,
-  id?: String,
-  startDate?: Date,
+  className?: string,
+  data?: string,
+  endDate?: date,
+  id?: string,
+  startDate?: date,
 }
 
 const dateTimestamp = (dateValue) => {

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

@@ -8,12 +8,12 @@ import { globalProps } from '../utilities/globalProps.js'
 import { Body, DateYearStacked, Flex, FlexItem, Icon } from '../'
 
 type DateRangeStackedProps = {
-  className?: String | Array<String>,
-  data?: String,
-  dark?: Boolean,
-  endDate: String,
-  id?: String,
-  startDate: String,
+  className?: string | array<string>,
+  data?: string,
+  dark?: boolean,
+  endDate: string,
+  id?: string,
+  startDate: string,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {

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

@@ -9,13 +9,13 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DateStackedProps = {
   align?: "left" | "center" | "right",
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  date: String,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  date: string,
   size?: "sm" | "md",
-  id?: String,
-  reverse?: Boolean,
+  id?: string,
+  reverse?: boolean,
 }
 
 const sizes = {

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx

@@ -5,10 +5,10 @@ import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type DateTimeStackedProps = {
-  data?: String,
-  id?: String,
-  date: Date,
-  dark: Boolean,
+  data?: string,
+  id?: string,
+  date: date,
+  dark: boolean,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps) => {

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

@@ -10,11 +10,11 @@ import { Body, Title } from '../'
 
 type DateYearStackedProps = {
   align?: "left" | "center" | "right",
-  className?: String | Array<String>,
-  dark?: Boolean,
-  data?: String,
-  date: String,
-  id?: String,
+  className?: string | array<string>,
+  dark?: boolean,
+  data?: string,
+  date: string,
+  id?: string,
 }
 
 const DateYearStacked = (props: DateYearStackedProps) => {

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.jsx

@@ -5,11 +5,11 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type DistributionBarProps = {
-  className?: String,
-  data?: String,
-  id?: String,
+  className?: string,
+  data?: string,
+  id?: string,
   size?: "lg" | "sm",
-  widths?: Array<Number>,
+  widths?: array<number>,
 }
 
 const normalizeCharacters = (widths) => {

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

@@ -11,8 +11,8 @@ import type { Callback } from '../types.js'
 import { Body, Card } from '..'
 
 type FileUploadProps = {
-  accept?: Array<String>,
-  className?: String,
+  accept?: array<string>,
+  className?: string,
   onFilesAccepted: Callback,
 }
 

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -27,10 +27,9 @@
       OpenStruct.new(name: "Georgia", value: 10),
     ]
   %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :blahblah, method: :get } }) do |form| %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
     <%= form.text_field :example_text_field, props: { label: true } %>
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-    <%= form.date_picker :example_date_picker %>
 
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>

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

@@ -13,11 +13,11 @@ const iconMap = {
 }
 
 type FixedConfirmationToastProps = {
-  className?: String,
-  data?: String,
-  id?: String,
+  className?: string,
+  data?: string,
+  id?: string,
   status?: "success" | "error" | "neutral" | "tip",
-  text: String,
+  text: string,
 }
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {

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

@@ -5,16 +5,16 @@ import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
   horizontal?: "left" | "center" | "right" | "stretch",
-  id?: String,
-  inline?: Boolean,
+  id?: string,
+  inline?: boolean,
   orientation?: "row" | "column",
   spacing?: "around" | "between" | "evenly" | "none",
-  reverse?: Boolean,
+  reverse?: boolean,
   vertical?: "top" | "center" | "bottom" | "stretch",
-  wrap?: Boolean,
+  wrap?: boolean,
 }
 
 const Flex = (props: FlexProps) => {

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

@@ -4,10 +4,10 @@ import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 type FlexItemPropTypes = {
-  children: Array<React.ReactNode> | React.ReactNode,
-  fixedSize: String,
-  grow: Boolean,
-  className: String,
+  children: array<React.ReactNode> | React.ReactNode,
+  fixedSize: string,
+  grow: boolean,
+  className: string,
 }
 
 const FlexItem = (props: FlexItemPropTypes) => {

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

@@ -13,7 +13,7 @@
   ]
 %>
 
-<%= pb_rails("form", props: { form_system_options: { scope: :scope, method: :get } }) do |form| %>
+<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.telephone_field :example_phone_field, props: { label: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -24,7 +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.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

@@ -14,7 +14,7 @@
 %>
 
 <%= pb_rails("form", props: {
-    form_system_options: { scope: :scope, method: :get },
+    form_system_options: { scope: :example, method: :get },
     validate: true
   }) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
@@ -27,7 +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.date_picker :example_date_picker2, props: { default_date: 'blank' } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -13,8 +13,7 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field,
-    :example_date_picker_field
+    :example_collection_select_field
 
 
     def self.model_name
@@ -50,7 +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.date_picker :example_date_picker_field, 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,8 +13,7 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field,
-    :example_date_picker_field
+    :example_collection_select_field
 
 
     def self.model_name
@@ -50,7 +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.date_picker :example_date_picker_field, props: { default_date: 'blank', required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

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

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

@@ -7,13 +7,13 @@ import Avatar from '../pb_avatar/_avatar.jsx'
 import { globalProps } from '../utilities/globalProps.js'
 
 type FormPillProps = {
-  className?: String,
-  id?: String,
-  text: String,
-  name: String,
+  className?: string,
+  id?: string,
+  text: string,
+  name: string,
   onClick?: EventHandler,
-  avatar?: Boolean,
-  avatarUrl?: String,
+  avatar?: boolean,
+  avatarUrl?: string,
 }
 const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -14,21 +14,21 @@ import {
 
 type GaugeProps = {
   aria: Object,
-  className?: String,
-  chartData?: Array,
+  className?: string,
+  chartData?: array,
   data?: Object,
-  disableAnimation: Boolean,
-  fullCircle: Boolean,
-  height: String,
-  id?: String,
-  max: Number,
-  min: Number,
-  prefix: String,
-  showLabels: Boolean,
-  style: String,
-  suffix: String,
-  title: String,
-  tooltipHtml: String,
+  disableAnimation: boolean,
+  fullCircle: boolean,
+  height: string,
+  id?: string,
+  max: number,
+  min: number,
+  prefix: string,
+  showLabels: boolean,
+  style: string,
+  suffix: string,
+  title: string,
+  tooltipHtml: string,
 }
 
 const Gauge = (props: GaugeProps) => {

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -9,13 +9,13 @@ import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type HashtagProps = {
-  className?: String,
-  data?: String,
-  dark?: Boolean,
-  id?: String,
-  text?: String,
+  className?: string,
+  data?: string,
+  dark?: boolean,
+  id?: string,
+  text?: string,
   type: "default" | "home" | "project" | "appointment",
-  url?: String,
+  url?: string,
 }
 
 const typeMap = {

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -6,12 +6,12 @@ import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
 
 type HighlightProps = {
-  className?: String,
-  data?: String,
-  id?: String,
+  className?: string,
+  data?: string,
+  id?: string,
   children?: React.Node,
-  text?: String,
-  highlightedText?: Array<String>,
+  text?: string,
+  highlightedText?: array<string>,
 }
 
 const Highlight = (props: HighlightProps) => {

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -8,18 +8,18 @@ import { Body, Hashtag, Title } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type HomeAddressStreetProps = {
-  address: String,
-  addressCont: String,
-  city: String,
-  className?: String,
-  dark?: Boolean,
+  address: string,
+  addressCont: string,
+  city: string,
+  className?: string,
+  dark?: boolean,
   emphasis: "street" | "city",
-  homeId: Number,
-  houseStyle: String,
-  homeUrl: String,
-  state: String,
-  zipcode: String,
-  territory: String,
+  homeId: number,
+  houseStyle: string,
+  homeUrl: string,
+  state: string,
+  zipcode: string,
+  territory: string,
 }
 
 const HomeAddressStreet = (props: HomeAddressStreetProps) => {