playbook_ui 6.1.0 → 7.0.0.pre.alpha2

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

@@ -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_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_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb

@@ -1,4 +1,5 @@
 <%= 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

@@ -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_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Error Message",
+  status: "error"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Items Successfully Moved",
+  status: "success"
+})%>
+
+<br><br>
+
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Scan to Assign Selected Items",
+  status: "neutral"
+})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../..'
+
+const FixedConfirmationToastDark = () => {
+  return (
+    <div>
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="error"
+            text="Error Message"
+        />
+      </div>
+
+      <br />
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="success"
+            text="Items Successfully Moved"
+        />
+      </div>
+
+      <br />
+      <br />
+
+      <div>
+        <FixedConfirmationToast
+            dark
+            status="neutral"
+            text="Scan to Assign Selected Items"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default FixedConfirmationToastDark

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  dark: true,
+  text: "Scan to Assign Selected Items.\nClick X to close at any time",
+  status: "tip",
+}) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { FixedConfirmationToast } from '../../'
+
+const FixedConfirmationToastMultiLineDark = () => {
+  return (
+    <div>
+      <FixedConfirmationToast
+          dark
+          status="tip"
+          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
+      />
+    </div>
+  )
+}
+
+export default FixedConfirmationToastMultiLineDark

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

@@ -3,9 +3,12 @@ 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,2 +1,4 @@
 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

@@ -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

@@ -24,6 +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 } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -27,6 +27,7 @@
   <%= 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.actions do |action| %>
     <%= action.submit %>

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

@@ -13,7 +13,8 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field
+    :example_collection_select_field,
+    :example_checkbox_field
 
 
     def self.model_name
@@ -49,6 +50,7 @@
   <%= 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.actions do |action| %>
     <%= action.submit %>

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

@@ -13,7 +13,8 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field
+    :example_collection_select_field,
+    :example_checkbox_field
 
 
     def self.model_name
@@ -49,6 +50,7 @@
   <%= 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.actions do |action| %>
     <%= action.submit %>

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

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

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbForm
+    module FormBuilder
+      module CheckboxField
+        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
+
+          input = super(name, **options, &block)
+
+          if props[:label]
+            @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +
+              @template.pb_rails("checkbox", props: props) do
+                input
+              end
+          else
+            @template.pb_rails("checkbox", props: props) do
+              input
+            end
+          end
+        end
+      end
+    end
+  end
+end

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.html.erb

@@ -1,10 +1,10 @@
 <%= content_tag(:span,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
+    id: object.id) do %>
 
   <%= link_to object.url do %>
-    <%= pb_rails("badge", props: { variant: "primary", text: object.hashtag_text, dark: object.dark }) %>
+    <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>
-
 <% end %>

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

@@ -5,17 +5,18 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { Badge } from '../'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type HashtagProps = {
-  className?: String,
-  data?: String,
-  dark?: Boolean,
-  id?: String,
-  text?: String,
+  aria?: object,
+  className?: string,
+  dark?: boolean,
+  data?: string,
+  id?: string,
+  text?: string,
   type: "default" | "home" | "project" | "appointment",
-  url?: String,
+  url?: string,
 }
 
 const typeMap = {
@@ -26,14 +27,27 @@ const typeMap = {
 }
 
 const Hashtag = (props: HashtagProps) => {
-  const { className, dark = false, text, type, url } = props
+  const {
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    id,
+    text,
+    type = 'default',
+    url,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_hashtag_kit'), globalProps(props), className)
+
   return (
     <span
-        className={classnames(
-        className,
-        buildCss('pb_hashtag_kit', { dark: dark }),
-        globalProps(props)
-      )}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <a href={url}>
         <Badge