playbook_ui 7.3.0.pre.alpha12 → 7.4.0.pre.alpha5

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb

@@ -0,0 +1,20 @@
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true
+}) %>
+<br />
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_day_of_week: true
+}) %>
+<br />
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_icon: true
+}) %>
+<br />
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    timezone: "Asia/Tokyo"
+}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import DateTime from '../_date_time.jsx'
+
+const DateTimeDefault = (props) => (
+  <div>
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        showIcon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showIcon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeDefault

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb

@@ -0,0 +1,26 @@
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true,
+    size: "sm"
+}) %>
+<br>
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    timezone: "Asia/Tokyo",
+    size: "sm"
+}) %>
+
+<br>
+<br>
+
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_icon: true,
+    show_day_of_week: true
+}) %>
+<br >
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    timezone: "Asia/Tokyo"
+}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import DateTime from '../_date_time.jsx'
+
+const DateTimeDefault = (props) => (
+  <div>
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        showIcon
+        size="sm"
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        size="sm"
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showIcon
+        size="sm"
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        size="sm"
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        showIcon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showDayOfWeek
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        showIcon
+        {...props}
+    />
+
+    <br />
+
+    <DateTime
+        datetime={new Date()}
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeDefault

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

@@ -0,0 +1 @@
+Date Time is a composite kit that leverages the [Date](/kits/date) and [Time](/kits/time) kits. The Date Time kit is affected by time zones and defaults to "America/New_York".

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

@@ -0,0 +1,11 @@
+examples:
+  
+  rails:
+  - date_time_default: Default
+  - date_time_align: Alignment
+  - date_time_size: Size
+
+  react:
+  - date_time_default: Default
+  - date_time_align: Alignment
+  - date_time_size: Size

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

@@ -0,0 +1,3 @@
+export { default as DateTimeDefault } from './_date_time_default.jsx'
+export { default as DateTimeAlign } from './_date_time_align.jsx'
+export { default as DateTimeSize } from './_date_time_size.jsx'

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

@@ -13,7 +13,7 @@ type FlexProps = {
   orientation?: "row" | "column",
   spacing?: "around" | "between" | "evenly" | "none",
   reverse?: boolean,
-  vertical?: "top" | "center" | "bottom" | "stretch",
+  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline",
   wrap?: boolean,
 }
 

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

@@ -71,6 +71,10 @@
     align-items: stretch;
   }
 
+  &[class*=align_items_baseline] {
+    align-items: baseline;
+  }
+
   // Spacing
   &[class*=spacing_around] {
     justify-content: space-around;

data/app/pb_kits/playbook/pb_flex/flex.rb

@@ -26,7 +26,7 @@ module Playbook
                      default: false
 
       prop :vertical, type: Playbook::Props::Enum,
-                      values: %w[top center bottom stretch],
+                      values: %w[top center bottom stretch baseline],
                       default: "top"
 
       prop :wrap, type: Playbook::Props::Boolean,

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

@@ -14,6 +14,7 @@
 %>
 
 <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= 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 } %>
@@ -33,10 +34,60 @@
     name: "checkbox-name",
     class: "checkbox-class" 
   %>
-  <%= form.date_picker :example_date_picker_1, props: { default_date: "blank", label: true } %>
+  <%= form.date_picker :example_date_picker_1, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
+
+<!-- form.typeahead user results example template -->
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
+    }) %>
+</template>
+
+<!-- form.typeahead JS example implementation -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample1) return;
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.children[0].dataset.user = JSON.stringify(user)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
+          return wrapper
+        }))
+      })
+  })
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExample1) return;
+
+    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
+    const selectedUserData = JSON.parse(selectedUserJSON)
+
+    // set the input field's value
+    event.target.querySelector('input[name=example_user]').value = selectedUserData.login
+
+    // log the selected option's dataset
+    console.log('The selected user data:')
+    console.dir(selectedUserData)
+
+    // do even more with the data later - TBD
+    event.target.dataset.user = selectedUserJSON
+  })
+<% end %>

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

@@ -28,7 +28,7 @@
   <%= 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_picker_2, props: { default_date: 'blank', label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -52,7 +52,7 @@
   <%= 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_field_1, props: { default_date: 'blank', label: true } %>
+  <%= form.date_picker :example_date_picker_field_1, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -52,7 +52,7 @@
   <%= 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_field_2, props: { default_date: 'blank', label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_field_2, props: { label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -8,12 +8,30 @@ module Playbook
           prefix = @object_name
           html_attribute_name = "#{prefix}[#{name}]"
           html_id = "#{prefix}_#{name}"
+
           props[:label] = @template.label(@object_name, name) if props[:label] == true
+          props[:label] = "Date Picker" if props[:label].nil?
 
           props[:name] = html_attribute_name
           props[:picker_id] = html_id
 
-          @template.pb_rails("date_picker", props: props)
+          input = text_field(
+            name,
+            autocomplete: "off",
+            disabled: props[:disable_input],
+            data: props[:input_data],
+            aria: props[:input_aria],
+            props: {
+              error: props[:error],
+              label: props[:hide_label] ? nil : props[:label],
+              placeholder: props[:placeholder],
+              required: props[:required],
+            }
+          )
+
+          @template.pb_rails("date_picker", props: props) do
+            input
+          end
         end
       end
     end

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -38,7 +38,7 @@ module Playbook
       end
 
       def address_house_style
-        "#{address.titleize} #{separator} #{house_style}"
+        "#{address&.titleize} #{separator} #{house_style}"
       end
 
       def address_house_style2

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -12,6 +12,7 @@ type ProgressStepProps = {
   children?: array<React.ReactChild>,
   orientation?: "horizontal" | "vertical",
   icon?: boolean,
+  showIcon?: boolean,
   variant?: string,
   color?: string,
 }
@@ -23,9 +24,10 @@ const ProgressStep = (props: ProgressStepProps) => {
     color,
     orientation = 'horizontal',
     icon = false,
+    showIcon = false,
     variant,
   } = props
-  const iconStyle = icon === true ? 'icon' : ''
+  const iconStyle = icon === true || showIcon === true ? 'icon' : ''
   const progressStepCss = buildCss(
     'pb_progress_step_kit',
     orientation,

data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss

@@ -151,8 +151,11 @@
             .circle{
                 height: 24px;
                 width: 24px;
-                border: $primary solid 6px;
+                border: $primary solid $border_rad_light;
                 background-color: rgba($white, $opacity_8);
+                svg {
+                    color: darken($primary,25%);
+                }
             }
             &::before {
                 background-color: $primary;
@@ -249,10 +252,16 @@
     }
   }
 //End of Vertical
+  &[class*=icon]{
+    [class*=progress_step_item][class*=_complete],
+    [class*=progress_step_item][class*=_active] {
+        [class*=box] .circle svg {
+            opacity: 1;
+            
+        }
+    }
+    }
 
-  &[class*=icon] [class*=_complete] svg{
-    opacity: 1;
-  }
 
   &[class*=dark] {
     [class*=progress_step_item]{

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb

@@ -4,7 +4,7 @@
   class: object.classname) do %>
     <div class="box">
       <div class="circle">
-        <%= pb_rails("icon", props: { icon: "check", size: "xs" }) %>
+        <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
       </div>
       <div class="content">
         <%= capture(&object.children) %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx

@@ -7,14 +7,16 @@ import { Icon } from '..'
 
 type ProgressStepItemProps = {
   className?: string,
-  status?: 'complete' | 'active' | 'inactive' | 'hidden',
+  status?: "complete" | "active" | "inactive" | "hidden",
   children?: React.Node,
+  icon?: string,
 }
 
 const ProgressStepItem = ({
   className,
   status = 'inactive',
   children,
+  icon = 'check',
 }: ProgressStepItemProps) => {
   const progressStepItem = buildCss('pb_progress_step_item', status)
 
@@ -22,13 +24,9 @@ const ProgressStepItem = ({
     <li className={classnames(progressStepItem, className)}>
       <div className="box">
         <div className="circle">
-          <Icon
-              icon="check"
-          />
-        </div>
-        <div className="content">
-          {children}
+          <Icon icon={icon} />
         </div>
+        <div className="content">{children}</div>
       </div>
     </li>
   )