playbook_ui 3.0.1 → 3.1.0

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Caption } from "../"
+import { InputCallback } from '../types.js'
 
 type TextareaProps = {
   className?: String,
@@ -15,6 +16,7 @@ type TextareaProps = {
   name?: String,
   rows?: Number,
   dark?: Boolean,
+  onChange?: InputCallback
 }
 
 const textareaCSS =({
@@ -35,6 +37,7 @@ const Textarea = ( props: TextareaProps) => {
     dark=false,
     rows=4,
     name,
+    onChange = () => {}
   } = props
 
   const textarea_input = `${textareaCSS(props)}`
@@ -45,7 +48,14 @@ const Textarea = ( props: TextareaProps) => {
       <If condition={children}>
         {children}
       <Else/>
-        <textarea className={textarea_input} name={name} placeholder={placeholder} rows={rows} value={value} />
+        <textarea 
+          className={textarea_input} 
+          name={name} 
+          onChange={onChange} 
+          placeholder={placeholder} 
+          rows={rows} 
+          value={value} 
+        />
       </If>
     </div>
   )

data/app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss

@@ -13,6 +13,9 @@
   color: $text_color;
   background-color: $background_color;
   padding: ($space_xs + 4) $space_sm;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
   transition: $easeIn;
   outline: none;
   overflow: auto;
@@ -21,6 +24,14 @@
   transition-property: border-color, box-shadow, color, background-color;
   transition-duration: .24s;
   transition-timing-function: $bezier;
+  &[type=number] {
+    -moz-appearance:textfield;
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none; 
+      margin: 0; 
+    }
+  }
   &:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active {
     background-color: shade($background_color, 5%);
     box-shadow: none;

data/app/pb_kits/playbook/plugins/pb_chart_plugin.js

@@ -10,12 +10,12 @@ class pbChart {
     callbackRefreshAfter: () => {},
     callbackDestroyBefore: () => {},
     callbackDestroyAfter: () => {},
-    property: 'Value'
+    property: 'Value',
   }
 
   extendDefaults(defaults, options) {
-    for (let property in options) {
-      if (options.hasOwnProperty(property)) {
+    for (const property in options) {
+      if (Object.prototype.hasOwnProperty.call(options, property)) {
         defaults[property] = options[property]
       }
     }
@@ -34,23 +34,23 @@ class pbChart {
 
     Highcharts.chart(this.defaults.id, {
       title: {
-        text: this.defaults.title
+        text: this.defaults.title,
       },
       chart: {
-        type: this.defaults.type
+        type: this.defaults.type,
       },
       subtitle: {
-        text: this.defaults.subtitle
+        text: this.defaults.subtitle,
       },
       yAxis: {
         title: {
-          text: this.defaults.axisTitle
-        }
+          text: this.defaults.axisTitle,
+        },
       },
       plotOptions: {
         series: {
-          pointStart: this.defaults.pointStart
-        }
+          pointStart: this.defaults.pointStart,
+        },
       },
       series: this.defaults.chartData,
       credits: false,

data/app/pb_kits/playbook/utilities/props.js

@@ -29,7 +29,7 @@ export const noop = () => {}
  * @param {Object} aria the object containing the aria prop values.
  * @returns {Object} an object holding the HTML valid aria props and their values.
  */
-export const buildAriaProps = aria => buildPrefixedProps("aria", aria)
+export const buildAriaProps = (aria) => buildPrefixedProps('aria', aria)
 
 /**
  * Maps a given data object into HTML valid data attribtues and their values.
@@ -37,7 +37,7 @@ export const buildAriaProps = aria => buildPrefixedProps("aria", aria)
  * @param {Object} data the object containing the data prop values.
  * @returns {Object} an object holding the HTML valid data props and their values.
  */
-export const buildDataProps = data => buildPrefixedProps("data", data)
+export const buildDataProps = (data) => buildPrefixedProps('data', data)
 
 /**
  * Builds a Playbook valid root className off of the incoming css rules.

data/app/pb_kits/playbook/utilities/text.js

@@ -1,16 +1,9 @@
-function titleize(sentence) {
-    if(!sentence.split) return sentence
+import { isEmpty } from 'lodash'
 
-    const titleizedWord = function(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
-    }
+const titleizedWord = (string) => (
+  string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
+)
 
-    let result = []
-    sentence.split(' ').forEach(function(w) {
-        result.push(titleizedWord(w))
-    })
-
-    return result.join(' ')
+export const titleize = (sentence) => {
+  isEmpty(sentence) ? sentence : sentence.split(' ').map(titleizedWord).join(' ')
 }
-
-export { titleize }

data/app/pb_kits/playbook/vendor.js

@@ -1,6 +1,6 @@
 // Charts
-import pbChart from "./plugins/pb_chart_plugin"
+import pbChart from './plugins/pb_chart_plugin'
 window.pbChart = pbChart
 
 // Lazy image loading
-import "lazysizes"
+import 'lazysizes'

data/lib/generators/kit/kit_generator.rb

@@ -76,12 +76,12 @@ class KitGenerator < Rails::Generators::NamedBase
 
         # Import in all kits.js  =========================
         append_to_file("app/pb_kits/playbook/packs/kits.js") do
-          "import \"../kits/pb_#{@kit_name_underscore}.js\";\n"
+          "import '../kits/pb_#{@kit_name_underscore}.js'\n"
         end
 
         # Import kit examples  ===========================
         append_to_file("app/pb_kits/playbook/packs/examples.js") do
-          "\nimport * as #{@kit_name_pascal} from \"pb_#{@kit_name_underscore}/docs\";\nWebpackerReact.setup (#{@kit_name_pascal});\n"
+          "import * as #{@kit_name_pascal} from 'pb_#{@kit_name_underscore}/docs'\nWebpackerReact.setup(#{@kit_name_pascal})\n"
         end
 
         say_status  "complete",

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

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

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

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

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

@@ -1,21 +1,39 @@
+<%
+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"
+              else "String"
+              end
+
+  "#{prop_name}?: #{prop_type}"
+end
+puts props_types.inspect
+
+props_names = @kit_props.map { |key,| key == "classname" ? "className" : key.camelize(:lower) }
+
+props_and_values = props_names.map { |prop| "<p>{`#{prop}: ${#{prop}}`}</p>" }
+-%>
 /* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
 
 import React from 'react'
 
-/*
-// Un-comment to import kits here
-import { Body } from '../'
-*/
-
-type <%= @kit_name_pascal %>Props = {
-  <% @kit_props.each do |key,val| %><%= key == "classname" ? "className?: " : "#{key.camelize(:lower)}?: " %><% case val %><% when "enum", "one_of" %>'option_1' | 'option_2',<% when "boolean", "bool" %>Boolean,<% else %>String,<% end %>
-  <% end %>
+type <%= type_name %> = {
+  <%= break_lines.call(props_types) %>
 }
 
-const <%= @kit_name_pascal %> = ({ <%= @kit_props.map{|key,val| key == "classname" ? "className" : "#{key.camelize(:lower)}" }.join(", ") %> }: <%= @kit_name_pascal %>Props) => (
+const <%= @kit_name_pascal %> = ({
+  <%= break_lines.call(props_names) %>
+}: <%= type_name %>) => (
   <div>
-    {`kit content`}
+    <%= break_lines.call(props_and_values, 4, "") %>
   </div>
 )
 

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

@@ -1,4 +1,4 @@
-import <%= @kit_name_pascal %> from "../pb_<%= @kit_name_underscore %>/_<%= @kit_name_underscore %>.jsx";
+import <%= @kit_name_pascal %> from '../pb_<%= @kit_name_underscore %>/_<%= @kit_name_underscore %>.jsx'
 
-import WebpackerReact from "webpacker-react";
-WebpackerReact.setup({ <%= @kit_name_pascal %> });
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ <%= @kit_name_pascal %> })

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

@@ -8,5 +8,4 @@ RSpec.describe Playbook::Pb<%= @kit_name_capitalize %>::<%= @kit_name_capitalize
   it { is_expected.to define_partial }
 
   # Do not leave this file blank. Use other spec files for example tests.
-
 end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "3.0.1"
+  VERSION = "3.1.0"
 end

data/lib/tasks/pb_release.rake

@@ -3,33 +3,44 @@
 namespace :pb_release do
   desc "Update the version number in preparation to release"
   task version: :environment do
-    old_version = Playbook::VERSION
-    STDOUT.puts "What would you like the next release number to be? Currently #{old_version}"
-    new_version = STDIN.gets.chomp
+    puts "\n"
+    puts "*" * 20 + " Create New Playbook Release " + "*" * 20
+    ack = "\nFirst, before creating a new version please make sure you are familiar with SemVer guidlines: "
+    ack += "\nhttps://semver.org/#semantic-versioning-specification-semver. "
+    ack += "\n\nDoing so will ensure the proper version is selected for the release. "
+    ack += "\nSee also: https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version#determining-the-version."
+    ack += "\n\nReady to start? y/N"
+    STDOUT.puts ack
+    agreed = STDIN.gets.chomp.downcase
 
-    puts "Ok great, let's make version #{new_version}"
-    puts "\n\n"
+    if agreed == "y"
+      old_version = Playbook::VERSION
+      STDOUT.puts "What would you like the next release number to be? Currently #{old_version}"
+      new_version = STDIN.gets.chomp
+      puts "Ok great, let's make version #{new_version}"
+      puts "\n\n"
 
-    # Update package.json
-    package = File.read("package.json")
-    new_package = package.gsub(/"version": "#{old_version}",/, "\"version\": \"#{new_version}\",")
-    File.open("package.json", "w") { |file| file.puts new_package }
-    puts "Updated package.json"
+      # Update package.json
+      package = File.read("package.json")
+      new_package = package.gsub(/"version": "#{old_version}",/, "\"version\": \"#{new_version}\",")
+      File.open("package.json", "w") { |file| file.puts new_package }
+      puts "Updated package.json"
 
-    # Update version.rb
-    version_rb = File.read("lib/playbook/version.rb")
-    new_version_rb = version_rb.gsub(/VERSION = "#{old_version}".freeze/, "VERSION = \"#{new_version}\".freeze")
-    File.open("lib/playbook/version.rb", "w") { |file| file.puts new_version_rb }
-    puts "Updated lib/playbook/version.rb"
+      # Update version.rb
+      version_rb = File.read("lib/playbook/version.rb")
+      new_version_rb = version_rb.gsub(/VERSION = "#{old_version}".freeze/, "VERSION = \"#{new_version}\".freeze")
+      File.open("lib/playbook/version.rb", "w") { |file| file.puts new_version_rb }
+      puts "Updated lib/playbook/version.rb"
 
-    # Update gemfile.lock
-    gemfile = File.read("Gemfile.lock")
-    new_gemfile = gemfile.gsub(/playbook_ui \(#{Regexp.escape(old_version)}\)/, "playbook_ui (#{new_version})")
-    File.open("Gemfile.lock", "w") { |file| file.puts new_gemfile }
-    puts "Updated Gemfile.lock"
-    puts "\n\n"
+      # Update gemfile.lock
+      gemfile = File.read("Gemfile.lock")
+      new_gemfile = gemfile.gsub(/playbook_ui \(#{Regexp.escape(old_version)}\)/, "playbook_ui (#{new_version})")
+      File.open("Gemfile.lock", "w") { |file| file.puts new_gemfile }
+      puts "Updated Gemfile.lock"
+      puts "\n\n"
 
-    puts "Commit your changes and create a PR to merge to master"
+      puts "Commit your changes and create a PR to merge to master"
+    end
   end
 
   desc "Publish to RubyGems, NPM, and Create a Tag"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 3.0.1
+  version: 3.1.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-12-06 00:00:00.000000000 Z
+date: 2019-12-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -567,6 +567,8 @@ files:
 - app/pb_kits/playbook/pb_card/docs/_card_padding.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_selected.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_selected.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_separator.html.erb
+- app/pb_kits/playbook/pb_card/docs/_card_separator.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_shadow.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_shadow.jsx
 - app/pb_kits/playbook/pb_card/docs/example.yml
@@ -697,9 +699,9 @@ files:
 - app/pb_kits/playbook/pb_form/form/simple_form_form.rb
 - app/pb_kits/playbook/pb_form/form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
+- app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/simple_form_builder.rb
-- app/pb_kits/playbook/pb_form/form_builder/text_input_builder.rb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb
 - app/pb_kits/playbook/pb_hashtag/_hashtag.jsx
 - app/pb_kits/playbook/pb_hashtag/_hashtag.scss
@@ -877,10 +879,13 @@ files:
 - app/pb_kits/playbook/pb_nav/_nav.scss
 - app/pb_kits/playbook/pb_nav/_vertical_nav.scss
 - app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb
-- app/pb_kits/playbook/pb_nav/docs/_block_no_title.html.erb
+- 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/_default_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_default_nav.jsx
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb
+- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx
 - 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
@@ -911,6 +916,7 @@ files:
 - app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.jsx
 - app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.html.erb
 - app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.jsx
+- app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.html.erb
 - app/pb_kits/playbook/pb_person_contact/docs/example.yml
 - app/pb_kits/playbook/pb_person_contact/docs/index.js
 - app/pb_kits/playbook/pb_person_contact/person_contact.rb
@@ -1072,6 +1078,8 @@ files:
 - app/pb_kits/playbook/pb_text_input/_text_input.html.erb
 - app/pb_kits/playbook/pb_text_input/_text_input.jsx
 - app/pb_kits/playbook/pb_text_input/_text_input.scss
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.html.erb
+- app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx
 - app/pb_kits/playbook/pb_text_input/docs/example.yml