playbook_ui 6.2.1 → 6.4.2

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_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.scss

@@ -18,13 +18,16 @@ $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;
-      &:hover {
-        background-color: rgba($color_value, $opacity-2);
+      @media (hover:hover) {
+        &:hover {
+          background-color: rgba($color_value, $opacity-2);
+        }
       }
       #{$selector}_text {
         color: $color_value;

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,13 +5,14 @@ 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 = {
+  aria?: object,
   className?: string,
-  data?: string,
   dark?: boolean,
+  data?: string,
   id?: string,
   text?: string,
   type: "default" | "home" | "project" | "appointment",
@@ -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

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.jsx

@@ -11,6 +11,7 @@ const HashtagDark = () => {
           url="https://google.com"
       />
       <br />
+      <br />
       <Hashtag
           dark
           text="123456"
@@ -18,6 +19,7 @@ const HashtagDark = () => {
           url="https://google.com"
       />
       <br />
+      <br />
       <Hashtag
           dark
           text="456789"
@@ -25,6 +27,7 @@ const HashtagDark = () => {
           url="https://google.com"
       />
       <br />
+      <br />
       <Hashtag
           dark
           text="654321"

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

@@ -10,18 +10,21 @@ const HashtagDefault = () => {
           url="https://google.com"
       />
       <br />
+      <br />
       <Hashtag
           text="123456"
           type="home"
           url="https://google.com"
       />
       <br />
+      <br />
       <Hashtag
           text="456789"
           type="appointment"
           url="https://google.com"
       />
       <br />
+      <br />
       <Hashtag
           text="654321"
           type="default"

data/app/pb_kits/playbook/pb_hashtag/hashtag.rb

@@ -8,14 +8,13 @@ module Playbook
       partial "pb_hashtag/hashtag"
 
       prop :text
-      prop :dark, type: Playbook::Props::Boolean, default: false
       prop :type, type: Playbook::Props::Enum,
                   values: %w[default project home appointment],
                   default: "default"
       prop :url
 
       def classname
-        generate_classname("pb_hastag_kit", dark_class)
+        generate_classname("pb_hastag_kit")
       end
 
       def hashtag_text
@@ -24,10 +23,6 @@ module Playbook
 
     private
 
-      def dark_class
-        dark ? "dark" : nil
-      end
-
       def type_text
         if type === "home"
           "H#"

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb

@@ -1 +1,3 @@
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<%= pb_rails("body", props: { dark: true }) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
-import { Icon } from '../../'
+import { Body, Icon } from '../../'
 
 const IconDefaultDark = () => {
   return (
     <div>
-      <Icon
-          fixedWidth
-          icon="user"
-      />
+      <Body dark>
+        <Icon
+            fixedWidth
+            icon="user"
+        />
+      </Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
-    id: object.id,
+    aria: object.aria,
+    class: object.classname,
     data: object.data,
-    class: object.classname) do %>
-  <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
+    id: object.id) do %>
+  <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx

@@ -5,13 +5,17 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { Icon } from '../'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type IconCircleProps = {
+  aria?: object,
   className?: string,
+  dark?: boolean,
+  data?: object,
   icon: string,
-  size?: "xs" | "sm" | "md" | "lg" | "xl",
+  id?: string,
+  size?: "base" | "xs" | "sm" | "md" | "lg" | "xl",
   variant?: | "default"
     | "royal"
     | "blue"
@@ -23,12 +27,23 @@ type IconCircleProps = {
 }
 
 const IconCircle = (props: IconCircleProps) => {
-  const { className, icon, size = 'md', variant = 'default' } = props
-  const css = buildCss('pb_icon_circle_kit', size, variant)
+  const { aria = {}, className, dark = false, data = {}, icon, id, size = 'md', variant = 'default' } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_icon_circle_kit', size, variant), globalProps(props), className)
 
   return (
-    <div className={classnames(className, css, globalProps(props))}>
-      <Icon icon={icon} />
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Icon
+          dark={dark}
+          icon={icon}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -52,7 +52,10 @@ $pb_icon_circle_sizes: (
   @each $color_name, $color_value in $colors {
     &[class*=_#{$color_name}] {
       color: $color_value;
-      background: rgba($color_value, $opacity-1);
+      background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      &.dark {
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_5);
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.html.erb

@@ -0,0 +1,42 @@
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "comment",
+  variant: "royal",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "archive",
+  variant: "blue",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "arrow-alt-right",
+  variant: "purple",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "cloud",
+  variant: "teal",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "award",
+  variant: "red",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "bolt",
+  variant: "yellow",
+  size: "sm"
+}) %>
+<%= pb_rails("icon_circle", props: {
+  dark: true,
+  icon: "calendar",
+  variant: "green",
+  size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { IconCircle } from '../../'
+
+const IconCircleColorDark = () => {
+  return (
+    <div>
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="royal"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="blue"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="purple"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="teal"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="red"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="yellow"
+      />
+      <br />
+      <IconCircle
+          dark
+          icon="rocket"
+          size="sm"
+          variant="green"
+      />
+    </div>
+  )
+}
+
+export default IconCircleColorDark