playbook_ui 7.1.0 → 7.3.0.pre.alpha1

data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx

@@ -1,16 +1,19 @@
 import React, { Fragment } from 'react'
 import Time from '../_time.jsx'
 
-const TimeSizes = () => {
+const TimeSizes = (props) => {
   return (
     <Fragment>
       <Time
           date={new Date()}
+          {...props}
       />
       <br />
       <Time
           date={new Date()}
           size="md"
+          timeZone="America/New_York"
+          {...props}
       />
     </Fragment>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeStamp = () => {
+const TimeStamp = (props) => {
   return (
     <div>
       <Time
           date={new Date()}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -14,6 +15,7 @@ const TimeStamp = () => {
       <Time
           date={new Date().getTime()}
           size="sm"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Time from '../_time.jsx'
 
-const TimeTimeZone = () => {
+const TimeTimezone = (props) => {
   const zones = {
     east: 'America/New_York',
     central: 'America/Chicago',
@@ -16,6 +16,7 @@ const TimeTimeZone = () => {
           date={new Date()}
           size="md"
           timeZone={zones.east}
+          {...props}
       />
 
       <br />
@@ -24,6 +25,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.central}
+          {...props}
       />
 
       <br />
@@ -32,6 +34,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.mountain}
+          {...props}
       />
 
       <br />
@@ -40,6 +43,7 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.west}
+          {...props}
       />
 
       <br />
@@ -48,10 +52,11 @@ const TimeTimeZone = () => {
       <Time
           date={new Date()}
           timeZone={zones.asia}
+          {...props}
       />
 
     </div>
   )
 }
 
-export default TimeTimeZone
+export default TimeTimezone

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb

@@ -19,7 +19,8 @@
     name: tag(:slot, name: "name"),
     orientation: "horizontal",
     align: "left",
-    avatar_url: "placeholder"
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
     }) %>
 </template>
 
@@ -35,7 +36,7 @@
         event.detail.setResults((result.items || []).map((user) => {
           const wrapper = resultOptionTemplate.content.cloneNode(true)
           wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
-          wrapper.querySelector('img').setAttribute("src", user.avatar_url)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
           return wrapper
         }))
       })

data/app/pb_kits/playbook/props.rb

@@ -124,7 +124,7 @@ module Playbook
 
       def prop(name, type: Playbook::Props::String, **options)
         @props ||= {}
-        @props[name] = type.new(**options)
+        @props[name] = type.new(options.merge(name: name, kit: self))
 
         define_method(name) { prop(name) }
       end

data/app/pb_kits/playbook/props/base.rb

@@ -5,11 +5,13 @@ module Playbook
     class Error < StandardError; end
 
     class Base
-      attr_reader :default, :required
+      attr_reader :default, :required, :name, :kit
 
-      def initialize(default: nil, required: false)
+      def initialize(default: nil, required: false, name:, kit:)
         @default = default
         @required = required
+        @name = name
+        @kit = kit
       end
 
       def value(value)
@@ -17,10 +19,10 @@ module Playbook
       end
 
       def validate!(input_value)
-        raise(Playbook::Props::Error, "#{inspect} is a required prop and needs to be provided a value") if required && input_value.nil?
+        raise(Playbook::Props::Error, "#{kit} prop '#{name}' of type #{inspect.class} is required and needs a value") if required && input_value.nil?
 
         validate(value(input_value)) ||
-          raise(Playbook::Props::Error, "Invalid value (#{input_value.inspect}) for prop (#{inspect})")
+          raise(Playbook::Props::Error, "#{kit} has invalid value of '#{input_value.inspect}' for prop '#{name}' of type #{inspect.class}")
       end
 
       def validate(_value)

data/lib/playbook/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "7.1.0"
+  VERSION = "7.3.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.1.0
+  version: 7.3.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-09 00:00:00.000000000 Z
+date: 2020-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -530,6 +530,8 @@ files:
 - app/pb_kits/playbook/pb_caption/_caption.scss
 - app/pb_kits/playbook/pb_caption/_caption_mixin.scss
 - app/pb_kits/playbook/pb_caption/caption.rb
+- app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb
+- app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx
 - app/pb_kits/playbook/pb_caption/docs/_caption_light.html.erb
 - app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx
 - app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb
@@ -666,10 +668,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
@@ -1213,6 +1219,8 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_block_no_title_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_borderless_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_default_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_default_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_description.md
@@ -1228,6 +1236,9 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_subtle_with_icons_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_with_icons_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_with_img_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_with_img_nav.jsx
+- app/pb_kits/playbook/pb_nav/docs/_with_img_nav.md
 - app/pb_kits/playbook/pb_nav/docs/example.yml
 - app/pb_kits/playbook/pb_nav/docs/index.js
 - app/pb_kits/playbook/pb_nav/item.rb
@@ -1374,6 +1385,7 @@ files:
 - app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb
 - app/pb_kits/playbook/pb_section_separator/_section_separator.jsx
 - app/pb_kits/playbook/pb_section_separator/_section_separator.scss
+- app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss
 - app/pb_kits/playbook/pb_section_separator/docs/_description.md
 - app/pb_kits/playbook/pb_section_separator/docs/_footer.md
 - app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.html.erb
@@ -1423,6 +1435,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.jsx
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.md
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.md
@@ -1436,6 +1449,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_checkmark.jsx
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.html.erb
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_default.jsx
+- app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_options.html.erb
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.html.erb
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_single_select.jsx
 - app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml
@@ -1446,6 +1460,7 @@ files:
 - app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_default.jsx
+- app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.html.erb
 - app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_single_select.jsx
 - app/pb_kits/playbook/pb_selectable_icon/docs/example.yml
@@ -1836,24 +1851,10 @@ files:
 - app/pb_kits/playbook/vendor.js
 - fonts/fontawesome-min.js
 - fonts/regular-min.js
-- lib/generators/kit/USAGE
-- lib/generators/kit/kit_generator.rb
-- lib/generators/kit/templates/kit_example_rails.erb.tt
-- lib/generators/kit/templates/kit_example_react.erb.tt
-- lib/generators/kit/templates/kit_example_yml.erb.tt
-- lib/generators/kit/templates/kit_html.erb.tt
-- lib/generators/kit/templates/kit_js.erb.tt
-- lib/generators/kit/templates/kit_jsx.erb.tt
-- lib/generators/kit/templates/kit_ruby.erb.tt
-- lib/generators/kit/templates/kit_ruby_spec.erb.tt
-- lib/generators/kit/templates/kit_scss.erb
 - lib/playbook.rb
 - lib/playbook/engine.rb
 - lib/playbook/version.rb
 - lib/playbook_ui.rb
-- lib/tasks/changelog.rake
-- lib/tasks/pb_release.rake
-- lib/tasks/playbook_tasks.rake
 homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
@@ -1869,11 +1870,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project: 
+rubygems_version: 2.7.3
 signing_key: 
 specification_version: 4
 summary: Playbook Design System

data/lib/generators/kit/USAGE

@@ -1,5 +0,0 @@
-Description:
-    Create a new Playbook kit
-
-Example:
-    rails g kit "button"

data/lib/generators/kit/kit_generator.rb

@@ -1,95 +0,0 @@
-# frozen_string_literal: true
-
-class KitGenerator < Rails::Generators::NamedBase
-  desc "This generator creates a new Playbook Kit"
-  source_root File.expand_path("templates", __dir__)
-  class_option :props, type: :array, default: []
-
-  def create_templates
-    kit_name = name.strip.downcase
-    @kit_name_uppercase = kit_name.upcase
-    @kit_name_lowercase = kit_name
-    @kit_name_capitalize = kit_name.capitalize
-    @kit_name_underscore = kit_name.parameterize.underscore
-    @kit_name_pascal = kit_name.titleize.gsub(/\s+/, "")
-
-    kit_props = options[:props].concat(%w[id:string classname:string data:object aria:object])
-    @kit_props = kit_props.map { |hash| [hash.partition(":").first, hash.partition(":").last] }.to_h
-    @kit_props = @kit_props.sort.to_h
-    @unique_props = @kit_props.symbolize_keys.without(:id, :classname, :data, :aria)
-
-    @kit_class_init = []
-    @kit_props.each do |key, _val|
-      @kit_class_init.push("#{key.parameterize.underscore}: default_configuration".to_sym)
-    end
-
-    @kit_class_val = []
-    @kit_props.each do |key, _value|
-      @kit_class_val.push("self.configured_#{key.parameterize.underscore} = #{key.parameterize.underscore}")
-    end
-
-    full_kit_directory = "app/pb_kits/playbook/pb_#{@kit_name_underscore}"
-
-    # Check if kit already exists =======================
-    if File.directory?(full_kit_directory)
-      say_status  "#{@kit_name_capitalize} kit already exists.",
-                  "Please choose another name or manually make changes to the existing kit.",
-                  :red
-      return
-    else
-      # Add kit to Playbook menu ==========================
-      open("app/pb_kits/playbook/data/menu.yml", "a") do |f|
-        f.puts "  - #{@kit_name_underscore}"
-      end
-      say_status  "complete",
-                  "#{@kit_name_capitalize} kit added to Playbook menu.",
-                  :green
-
-      # Generate SCSS files ==============================
-      template "kit_scss.erb", "#{full_kit_directory}/_#{@kit_name_underscore}.scss"
-      open("app/pb_kits/playbook/_playbook.scss", "a") do |f|
-        f.puts "\n@" + "import " + "\'" + "pb_#{@kit_name_underscore}/#{@kit_name_underscore}" + "\';"
-      end
-      say_status  "complete",
-                  "#{@kit_name_capitalize} kit stylesheet successfully created and imported.",
-                  :green
-
-      # Ask user if Rails version should be generated ======
-      if yes?("Create RAILS #{@kit_name_underscore} kit? (y/N)")
-        @rails_kit = true
-        template "kit_ruby.erb", "#{full_kit_directory}/#{@kit_name_underscore}.rb"
-        template "kit_html.erb", "#{full_kit_directory}/_#{@kit_name_underscore}.html.erb"
-        template "kit_example_rails.erb", "#{full_kit_directory}/docs/_#{@kit_name_underscore}_default.html.erb"
-        template "kit_ruby_spec.erb", "spec/pb_kits/playbook/kits/#{@kit_name_underscore}_spec.rb"
-        say_status  "complete",
-                    "#{@kit_name_capitalize} rails kit successfully created.",
-                    :green
-      end
-
-      # Ask user if React version should be generated ======
-      if yes?("Create REACT #{@kit_name_pascal} kit? (y/N)")
-        @react_kit = true
-        template "kit_jsx.erb", "#{full_kit_directory}/_#{@kit_name_underscore}.jsx"
-        template "kit_example_react.erb", "#{full_kit_directory}/docs/_#{@kit_name_underscore}_default.jsx"
-        template "kit_js.erb", "#{full_kit_directory}/docs/index.js"
-
-        # Import kit examples  ===========================
-        append_to_file("app/pb_kits/playbook/packs/react-examples.js") do
-          "import * as #{@kit_name_pascal} from 'pb_#{@kit_name_underscore}/docs'\nWebpackerReact.setup(#{@kit_name_pascal})\n"
-        end
-        append_to_file("app/pb_kits/playbook/index.js") do
-          "\nexport #{@kit_name_pascal} from 'pb_#{@kit_name_underscore}/_#{@kit_name_underscore}.jsx'"
-        end
-
-        say_status  "complete",
-                    "#{@kit_name_capitalize} react kit successfully created.",
-                    :green
-      end
-
-      # Create kit example.yml
-      template "kit_example_yml.erb", "#{full_kit_directory}/docs/example.yml"
-
-      `rubocop --safe-auto-correct #{full_kit_directory}`
-    end
-  end
-end

data/lib/generators/kit/templates/kit_example_rails.erb.tt

@@ -1 +0,0 @@
-<%%= pb_rails("<%= @kit_name_underscore %>") %>

data/lib/generators/kit/templates/kit_example_react.erb.tt

@@ -1,10 +0,0 @@
-import React from 'react'
-import { <%= @kit_name_pascal %> } from '../../'
-
-const <%= @kit_name_pascal %>Default = () => (
-  <div>
-    <<%= @kit_name_pascal %> />
-  </div>
-)
-
-export default <%= @kit_name_pascal %>Default

data/lib/generators/kit/templates/kit_example_yml.erb.tt

@@ -1,9 +0,0 @@
-examples:
-  <% if @rails_kit %>
-  rails:
-  - <%= @kit_name_underscore %>_default: Default
-  <% end %>
-  <% if @react_kit %>
-  react:
-  - <%= @kit_name_underscore %>_default: Default
-  <% end %>

data/lib/generators/kit/templates/kit_html.erb.tt

@@ -1,7 +0,0 @@
-<%%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <span><%= @kit_name_uppercase %> CONTENT</span>
-<%% end %>

data/lib/generators/kit/templates/kit_js.erb.tt

@@ -1 +0,0 @@
-export { default as <%= @kit_name_pascal %>Default } from './_<%= @kit_name_underscore %>_default.jsx'

data/lib/generators/kit/templates/kit_jsx.erb.tt

@@ -1,68 +0,0 @@
-<%
-break_lines = lambda do |list, spaces = 2, separator = ","|
-  list.join("#{separator}\n#{" " * spaces}") + separator
-end
-
-type_name = "#{@kit_name_pascal}Props"
-
-props_types = @kit_props.map do |key, val|
-  prop_name = key == "classname" ? "className" : key.camelize(:lower)
-  prop_type = case val
-              when "enum", "one_of" then "'option_1' | 'option_2'"
-              when "boolean", "bool" then "boolean"
-              when "object", "obj" then "object"
-              else "string"
-              end
-
-  "#{prop_name}?: #{prop_type}"
-end
-puts props_types.inspect
-
-props_names = @kit_props.keys.map do |key|
-                  case key
-                  when "classname" || "className"
-                    "className" 
-                  when "aria"
-                    "aria = {}"
-                  when "data"
-                    "data = {}"
-                  else 
-                    key
-                  end
-              end
-
-%>
-
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-
-type <%= type_name %> = {
-  <%= break_lines.call(props_types) %>
-}
-
-const <%= @kit_name_pascal %> = (props: <%= type_name %>) => {
-  const {
-    <%= break_lines.call(props_names) %>
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_<%= @kit_name_underscore %>'), globalProps(props), className)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {className}
-    </div>
-  )
-}
-
-export default <%= @kit_name_pascal %>