playbook_ui 7.3.0.pre.alpha12 → 7.4.0.pre.test2

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md

@@ -1,8 +1,17 @@
 Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
 
-`{ label: "Foo", value: "bar" }`
+This is an example of an option: `{ label: 'Windows', value: '#FFA500' }`
+
+#### Rails: Default Options
+
+You can also pass `default_options` which will populate the initial pill selections:
+
+`default_options: [{ label: 'Windows', value: '#FFA500' }]`
 
 #### Rails: Subscribing to JS Events
 `pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
 `pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
 `pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
+
+#### Rails: Publishing JS Events
+`pb-typeahead-kit:clear` event to clear all options.

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -7,6 +7,7 @@ module Playbook
 
       prop :async, type: Playbook::Props::Boolean,
                     default: false
+      prop :default_options, type: Playbook::Props::HashArray, default: []
       prop :label
       prop :load_options
       prop :name
@@ -35,6 +36,7 @@ module Playbook
 
       def typeahead_with_pills_options
         base_options = {
+          defaultValue: default_options,
           isMulti: true,
           label: label,
           options: options,

data/app/pb_kits/playbook/vendor.js

@@ -12,9 +12,6 @@ window.datePickerHelper = datePickerHelper
 // Lazy image loading
 import 'lazysizes'
 
-import PbCollapsible from './pb_collapsible'
-PbCollapsible.start()
-
 import PbPopover from './pb_popover'
 PbPopover.start()
 

data/lib/playbook/version.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
+
 module Playbook
-  VERSION = "7.3.0.pre.alpha12"
+  VERSION = "7.4.0.pre.test2"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.3.0.pre.alpha12
+  version: 7.4.0.pre.test2
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-23 00:00:00.000000000 Z
+date: 2020-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -445,6 +445,23 @@ files:
 - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
 - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
 - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
+- app/pb_kits/playbook/pb_background/_background.html.erb
+- app/pb_kits/playbook/pb_background/_background.jsx
+- app/pb_kits/playbook/pb_background/_background.scss
+- app/pb_kits/playbook/pb_background/background.rb
+- app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_dark.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_image.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
+- app/pb_kits/playbook/pb_background/docs/_background_white.html.erb
+- app/pb_kits/playbook/pb_background/docs/_background_white.jsx
+- app/pb_kits/playbook/pb_background/docs/_description.md
+- app/pb_kits/playbook/pb_background/docs/example.yml
+- app/pb_kits/playbook/pb_background/docs/index.js
 - app/pb_kits/playbook/pb_badge/_badge.html.erb
 - app/pb_kits/playbook/pb_badge/_badge.jsx
 - app/pb_kits/playbook/pb_badge/_badge.scss
@@ -625,22 +642,6 @@ files:
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_footer.md
 - app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml
 - app/pb_kits/playbook/pb_circle_icon_button/docs/index.js
-- app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb
-- app/pb_kits/playbook/pb_collapsible/_collapsible.jsx
-- app/pb_kits/playbook/pb_collapsible/_collapsible.scss
-- app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_content.html.erb
-- app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb
-- app/pb_kits/playbook/pb_collapsible/collapsible.rb
-- app/pb_kits/playbook/pb_collapsible/collapsible_content.rb
-- app/pb_kits/playbook/pb_collapsible/collapsible_main.rb
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.html.erb
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.jsx
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
-- app/pb_kits/playbook/pb_collapsible/docs/example.yml
-- app/pb_kits/playbook/pb_collapsible/docs/index.js
-- app/pb_kits/playbook/pb_collapsible/index.js
-- app/pb_kits/playbook/pb_collapsible/useToggler.js
 - app/pb_kits/playbook/pb_contact/_contact.html.erb
 - app/pb_kits/playbook/pb_contact/_contact.jsx
 - app/pb_kits/playbook/pb_contact/_contact.scss
@@ -684,10 +685,14 @@ files:
 - app/pb_kits/playbook/pb_date/_date.jsx
 - app/pb_kits/playbook/pb_date/_date.scss
 - app/pb_kits/playbook/pb_date/date.rb
+- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
+- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_default.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.md
+- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
+- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -775,6 +780,19 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_stacked/docs/index.js
+- app/pb_kits/playbook/pb_date_time/_date_time.html.erb
+- app/pb_kits/playbook/pb_date_time/_date_time.jsx
+- app/pb_kits/playbook/pb_date_time/_date_time.scss
+- app/pb_kits/playbook/pb_date_time/date_time.rb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
+- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
+- app/pb_kits/playbook/pb_date_time/docs/_description.md
+- app/pb_kits/playbook/pb_date_time/docs/example.yml
+- app/pb_kits/playbook/pb_date_time/docs/index.js
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
@@ -1752,6 +1770,7 @@ files:
 - app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
+- app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
 - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
 - app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
@@ -1871,7 +1890,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -1886,8 +1905,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.1.4
-signing_key: 
+rubyforge_project:
+rubygems_version: 2.7.3
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb

@@ -1,9 +0,0 @@
- n<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-    <% if object.children %>
-      <%= capture(&object.children) %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx

@@ -1,134 +0,0 @@
-/* @flow */
-
-import classnames from "classnames"
-import { get } from "lodash"
-import { Flex, FlexItem } from "../"
-import React, { useState } from "react"
-import AnimateHeight from "react-animate-height"
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
-import { globalProps } from "../utilities/globalProps.js"
-
-type CollapsibleProps = {
-  children: React.ChildrenArray<React.Element<typeof Main | Content>>,
-  aria?: object,
-  className?: string,
-  data?: object,
-  id?: string,
-}
-
-type CollapsibleMainProps = {
-  children: array<React.ReactNode> | React.ReactNode,
-  className?: string,
-  padding?: string,
-}
-
-type CollapsibleContentProps = {
-  children: array<React.ReactNode> | React.ReactNode | string,
-  className?: string,
-  padding?: string,
-}
-
-const Main = (props: CollapsibleMainProps) => {
-  const { children, className, padding = "sm" } = props
-  const mainCSS = buildCss("pb_collapsible_main_kit")
-  const mainSpacing = globalProps(props, { padding })
-
-  return (
-    <div className={classnames(mainCSS, className, mainSpacing)}>
-      {children}
-    </div>
-  )
-}
-
-const Content = (props: CollapsibleContentProps) => {
-  const { children, className, padding = "md" } = props
-  const contentCSS = buildCss("pb_collapsible_content_kit")
-  const contentSpacing = globalProps(props, { padding })
-
-  return (
-    <div className={classnames(contentCSS, className, contentSpacing)}>
-      {children}
-    </div>
-  )
-}
-
-const Collapsible = (props: CollapsibleProps) => {
-  const { aria = {}, className, children = [], data = {}, id } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss("pb_collapsible"),
-    className,
-    globalProps(props)
-  )
-
-  const [height, setHeight] = useState(0)
-  const toggleExpand = () => {
-    setHeight(height === 0 ? "auto" : 0)
-  }
-
-  const collapsibleChildren =
-    typeof children === "object" && children.length ? children : [children]
-
-  console.log("CollapsibleChildren:", collapsibleChildren)
-
-  const subComponentTags = (tagName) => {
-    console.log("TagName:", tagName)
-    return collapsibleChildren
-      .filter((c) => get(c, "type.displayName") === tagName)
-      .map((child, i) => {
-        console.log("the child:", child)
-        return React.cloneElement(child, {
-          key: `${tagName.toLowerCase()}-${i}`,
-        })
-      })
-  }
-
-  const renderChevron = (height) => {
-    const direction = height === 0 ? "down" : "up"
-
-    return (
-      <div key={direction} style={{ verticalAlign: "middle" }}>
-        <i className={`far fa-chevron-${direction} fa-fw`} />
-      </div>
-    )
-  }
-
-  const renderMain = () => {
-    const mainTags = subComponentTags("Main")
-
-    return (
-      <div onClick={toggleExpand}>
-        <Flex spacing='between' vertical='center'>
-          <FlexItem>{mainTags}</FlexItem>
-          <FlexItem>{renderChevron(height)}</FlexItem>
-        </Flex>
-      </div>
-    )
-  }
-
-  const renderContent = () => {
-    const nonMainChildren = collapsibleChildren.filter(
-      (child) => get(child, "type.displayName") !== "Main"
-    )
-    console.log("NonMainChildren:", nonMainChildren)
-    return (
-      <AnimateHeight duration={500} height={height} id='bottom-section'>
-        {nonMainChildren}
-      </AnimateHeight>
-    )
-  }
-
-  return (
-    <div {...ariaProps} {...dataProps} className={classes} id={id}>
-      {renderMain()}
-      {renderContent()}
-    </div>
-  )
-}
-
-Collapsible.Main = Main
-Collapsible.Content = Content
-
-export default Collapsible

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -1,17 +0,0 @@
-
-[class^=pb_collapsible_kit] {
-
-  .toggle-content {
-    display: none;
-    height: 0;
-    padding-bottom: 0 !important;
-    padding-top: 0 !important;
-    overflow: hidden;
-    transition: height 500ms, padding 500ms ease-in-out;
-  }
-
-  .toggle-content.is-visible {
-    display: block;
-    height: auto;
-  }
-}

data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_content.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria) do %>
-  <%= capture(&object.children) %>
-<% end %>

data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb

@@ -1,16 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria) do %>
-
-    <%= pb_rails("flex", props: {vertical: "center", spacing: "between"}) do %>
-      <%= pb_rails("flex/flex_item") do %>
-        <%= capture(&object.children) %>
-      <% end %>
-      <%= pb_rails("flex/flex_item") do %>
-        <i class="far fa-chevron-down"></i>
-        <i class="far fa-chevron-up" style="display: none"></i>
-      <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible.rb

@@ -1,15 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbCollapsible
-    class Collapsible
-      include Playbook::Props
-
-      partial "pb_collapsible/collapsible"
-
-      def classname
-        generate_classname("pb_collapsible_kit")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb

@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbCollapsible
-    class CollapsibleContent
-      include Playbook::Props
-
-      partial "pb_collapsible/child_kits/collapsible_content"
-
-      def data
-        Hash(values[:data]).merge(
-          collapsible_content: true
-        )
-      end
-
-      def classname
-        generate_classname("pb_collapsible_content_kit", "toggle-content", padding, separator: " ")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb

@@ -1,24 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbCollapsible
-    class CollapsibleMain
-      include Playbook::Props
-
-      partial "pb_collapsible/child_kits/collapsible_main"
-
-      def data
-        Hash(values[:data]).merge(
-          collapsible_main: true
-        )
-      end
-
-      def classname
-        generate_classname("pb_collapsible_main_kit", padding, separator: " ")
-      end
-
-
-
-    end
-  end
-end

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("collapsible", props: { dark: true }) do %>
-  <%= pb_rails("collapsible/collapsible_main", props: { padding: "sm", name: "dark-example" }) do %>
-      <%= pb_rails("body", props: { text: "Main Section", dark: true}) %>
-  <% end %>
-  <%= pb_rails("collapsible/collapsible_content", props: { padding: "md" }) do %>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
-    <br><br>
-    Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
-  <% end %>
-<% end %>