playbook_ui 7.4.0.pre.alpha5 → 7.4.0.pre.alpha6

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

@@ -1,32 +1,2 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
-
-[class^=pb_date_kit] {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    > div, .pb_icon_kit_container {
-        margin-right: 4px !important;
-    }
-
-    &[class*=_center] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        margin-right: 4px !important;
-    }
-
-    &[class*=_right] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
-        margin-left: 4px !important;
-    }
-    &.dark {
-        [class^=pb_title_kit] {
-            color: $text_dk_default !important;
-        }
-    }
-}

data/app/pb_kits/playbook/pb_date/date.rb

@@ -10,36 +10,25 @@ module Playbook
       partial "pb_date/date"
 
       prop :date, required: true
-      prop :alignment, type: Playbook::Props::Enum,
-                       values: %w[left center right],
-                       default: "left"
-      prop :show_icon, type: Playbook::Props::Boolean,
-                       default: false
-      prop :show_day_of_week, type: Playbook::Props::Boolean,
-                              default: false
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[lg md sm xs],
-                  default: "md"
+                  values: %w[lg sm xs],
+                  default: "sm"
       prop :timezone, default: "America/New_York"
 
       def classname
-        generate_classname("pb_date_kit", alignment)
+        generate_classname("pb_date_kit")
       end
 
-      def day_of_week
-        pb_date_time.to_day_of_week
+      def xs_date
+        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
-      def day
-        pb_date_time.to_day
+      def lg_date
+        "#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
       end
 
-      def month
-        pb_date_time.to_month.capitalize
-      end
-
-      def year
-        pb_date_time.to_year
+      def sm_date
+        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
     private

data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb

@@ -1,39 +1,24 @@
 <%= pb_rails("date", props: {
   date: Date.today,
-  size: "sm"
+  size: "lg"
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
-  size: "sm"
+  date: DateTime.now
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2017-12-02T15:49:29Z",
-  show_day_of_week: true,
-  size: "sm"
-}) %>
-
-<br>
-<br>
-
-<%= pb_rails("date", props: {
-  date: Date.today,
-}) %>
-
-<br>
-
-<%= pb_rails("date", props: {
-  date: "2012-08-02T15:49:29Z",
+  date: DateTime.now,
+  timezone: "Asia/Tokyo"
 }) %>
 
 <br>
 
 <%= pb_rails("date", props: {
-  date: "2017-12-02T15:49:29Z",
-  show_day_of_week: true
+  date: Date.new(2010, 11, 12),
+  size: "xs"
 }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,59 +1,28 @@
 import React from 'react'
-import { Date as FormattedDate } from '../../'
+import { Date } from '../../'
 
-const DateDefault = (props) => {
+const DateDefault = () => {
   return (
-    <>
-      <FormattedDate
-          size="sm"
-          value={new Date()}
-          {...props}
+    <div>
+      <Date
+          size="lg"
+          value="1995-12-25"
       />
 
       <br />
 
-      <FormattedDate
-          size="sm"
-          value="2012-08-03"
-          {...props}
+      <Date
+          value="17 Mar 69"
       />
 
       <br />
 
-      <FormattedDate
-          showDayOfWeek
-          size="sm"
-          value="2017-12-03"
-          {...props}
+      <Date
+          size="xs"
+          value="2020-04-20T04:20:00.000Z"
       />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          value={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          value="2012-08-03"
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          showDayOfWeek
-          value="2017-12-03"
-          {...props}
-      />
-    </>
+    </div>
   )
 }
 
 export default DateDefault
-
-// *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
-// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'

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

@@ -2,13 +2,9 @@ examples:
   
   rails:
   - date_default: Default
-  - date_variants: Variants
-  - date_alignment: Alignment
   - date_timezone: Timezones
   
   
   react:
   - date_default: Default
-  - date_variants: Variants
-  - date_alignment: Alignment
   

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

@@ -1,3 +1 @@
 export { default as DateDefault } from './_date_default.jsx'
-export { default as DateVariants } from './_date_variants.jsx'
-export { default as DateAlignment } from './_date_alignment.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb

@@ -3,25 +3,20 @@
     class: object.classname + object.error_class,
     data: object.data,
     id: object.id) do %>
-      <% if object.children %>
-        <div class="input_wrapper">
-          <%= capture(&object.children) %>
-      <% else %>
-        <div class="input_wrapper">
-          <%= pb_rails("text_input", props: {
-            aria: object.input_aria,
-            autocomplete: false,
-            dark: object.dark,
-            data: object.input_data,
-            disabled: object.disable_input,
-            error: object.error,
-            id: object.picker_id,
-            label: object.hide_label ? nil : object.label,
-            name: object.name,
-            placeholder: object.placeholder,
-            required: object.required,
-          }) %>
-        <% end %>
+      <div class="input_wrapper">
+        <%= pb_rails("text_input", props: {
+          aria: object.input_aria,
+          autocomplete: false,
+          dark: object.dark,
+          data: object.input_data,
+          disabled: object.disable_input,
+          error: object.error,
+          id: object.picker_id,
+          label: object.hide_label ? nil : object.label,
+          name: object.name,
+          placeholder: object.placeholder,
+          required: object.required
+        }) %>
         <% if !object.hide_icon %>
           <div
               class="<%= object.icon_wrapper_class %>"

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" | "baseline",
+  vertical?: "top" | "center" | "bottom" | "stretch",
   wrap?: boolean,
 }
 

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

@@ -71,10 +71,6 @@
     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 baseline],
+                      values: %w[top center bottom stretch],
                       default: "top"
 
       prop :wrap, type: Playbook::Props::Boolean,

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

@@ -14,7 +14,6 @@
 %>
 
 <%= 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 } %>
@@ -34,60 +33,10 @@
     name: "checkbox-name",
     class: "checkbox-class" 
   %>
-  <%= form.date_picker :example_date_picker_1, props: { label: true } %>
+  <%= form.date_picker :example_date_picker_1, props: { default_date: "blank", 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: { label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', 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: { label: true } %>
+  <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', 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: { label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -8,30 +8,12 @@ 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
 
-          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
+          @template.pb_rails("date_picker", props: props)
         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_list/_list.jsx

@@ -17,7 +17,9 @@ type ListProps = {
   ordered: boolean,
   role?: string,
   tabIndex?: string,
+  text?: string,
   size?: string,
+  variant?: string,
   xpadding: boolean,
 }
 
@@ -36,6 +38,8 @@ const List = (props: ListProps) => {
     size = '',
     tabIndex,
     xpadding = false,
+    variant,
+    text,
   } = props
 
   const layoutClass = {
@@ -44,6 +48,9 @@ const List = (props: ListProps) => {
     default: '',
   }
 
+  const childrenWithProps = React.Children.map(children, (child) => {
+    return React.cloneElement(child, { text, variant })
+  })
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(
@@ -70,7 +77,7 @@ const List = (props: ListProps) => {
             role={role}
             tabIndex={tabIndex}
         >
-          {children}
+          {childrenWithProps}
         </ol>
         <Else />
         <ul
@@ -81,7 +88,7 @@ const List = (props: ListProps) => {
             role={role}
             tabIndex={tabIndex}
         >
-          {children}
+          {childrenWithProps}
         </ul>
       </If>
     </div>