playbook_ui 5.3.0.pre.alpha1 → 5.5.1

data/lib/generators/kit/kit_generator.rb

@@ -13,10 +13,10 @@ class KitGenerator < Rails::Generators::NamedBase
     @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])
+    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)
+    @unique_props = @kit_props.symbolize_keys.without(:id, :classname, :data, :aria)
 
     @kit_class_init = []
     @kit_props.each do |key, _val|
@@ -48,7 +48,7 @@ class KitGenerator < Rails::Generators::NamedBase
       # 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 "@" + "import " + "\'" + "pb_#{@kit_name_underscore}/#{@kit_name_underscore}" + "\';"
+        f.puts "\n@" + "import " + "\'" + "pb_#{@kit_name_underscore}/#{@kit_name_underscore}" + "\';"
       end
       say_status  "complete",
                   "#{@kit_name_capitalize} kit stylesheet successfully created and imported.",
@@ -77,6 +77,9 @@ class KitGenerator < Rails::Generators::NamedBase
         append_to_file("app/pb_kits/playbook/packs/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.",

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

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

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

@@ -10,6 +10,7 @@ props_types = @kit_props.map do |key, val|
   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
 
@@ -17,24 +18,51 @@ props_types = @kit_props.map do |key, val|
 end
 puts props_types.inspect
 
-props_names = @kit_props.map { |key,| key == "classname" ? "className" : key.camelize(:lower) }
+props_names = @kit_props.keys.map do |key|
+                  case key
+                  when "classname" || "className"
+                    "className" 
+                  when "aria"
+                    "aria = {}"
+                  when "data"
+                    "data = {}"
+                  else 
+                    key
+                  end
+              end
+
+%>
 
-props_and_values = props_names.map { |prop| "<p>{`#{prop}: ${#{prop}}`}</p>" }
--%>
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type <%= type_name %> = {
   <%= break_lines.call(props_types) %>
 }
 
-const <%= @kit_name_pascal %> = ({
-  <%= break_lines.call(props_names) %>
-}: <%= type_name %>) => (
-  <div>
-    <%= break_lines.call(props_and_values, 4, "") %>
-  </div>
-)
+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 %>'), className, spacing(props))
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+    </div>
+  )
+}
 
 export default <%= @kit_name_pascal %>

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "5.3.0-alpha1"
+  VERSION = "5.5.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 5.3.0.pre.alpha1
+  version: 5.5.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-07-17 00:00:00.000000000 Z
+date: 2020-07-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -574,6 +574,7 @@ files:
 - app/pb_kits/playbook/pb_checkbox/_checkbox.scss
 - app/pb_kits/playbook/pb_checkbox/checkbox.rb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.html.erb
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.html.erb
@@ -842,27 +843,6 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
 - app/pb_kits/playbook/pb_form_pill/docs/index.js
 - app/pb_kits/playbook/pb_form_pill/form_pill.rb
-- app/pb_kits/playbook/pb_gauge/_gauge.html.erb
-- app/pb_kits/playbook/pb_gauge/_gauge.jsx
-- app/pb_kits/playbook/pb_gauge/_gauge.scss
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx
-- app/pb_kits/playbook/pb_gauge/docs/example.yml
-- app/pb_kits/playbook/pb_gauge/docs/index.js
-- app/pb_kits/playbook/pb_gauge/gauge.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
@@ -1793,6 +1773,8 @@ files:
 - app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim
 - app/views/playbook/pages/utilities.html.slim
 - app/views/playbook/pages/utilities/_pb_doc_color.html.slim
+- app/views/playbook/samples/collection_detail/index.html.erb
+- app/views/playbook/samples/collection_detail/index.jsx
 - app/views/playbook/samples/dashboards/index.html.erb
 - app/views/playbook/samples/dashboards/index.jsx
 - app/views/playbook/samples/filter_table/index.html.erb
@@ -1834,9 +1816,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.7.3

data/app/pb_kits/playbook/pb_gauge/_gauge.html.erb

@@ -1,12 +0,0 @@
-<%= content_tag(:div, "",
-    id: object.id,
-    data: object.data,
-    class: object.classname) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -1,105 +0,0 @@
-/* @flow */
-
-import React, { useEffect, useRef } from 'react'
-import { pbChart } from '../'
-import { spacing } from '../utilities/spacing.js'
-import classnames from 'classnames'
-import Highcharts from 'highcharts'
-
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
-
-type GaugeProps = {
-  aria: Object,
-  className?: String,
-  chartData?: Array,
-  data?: Object,
-  fullCircle: Boolean,
-  height: String,
-  id?: String,
-  max: Number,
-  min: Number,
-  prefix: String,
-  showLabels: Boolean,
-  style: String,
-  suffix: String,
-  title: String,
-  tooltipHtml: String,
-}
-
-const Gauge = (props: GaugeProps) => {
-  const {
-    aria = {},
-    className,
-    chartData = [{ name: 'Name', value: 0 }],
-    data = {},
-    fullCircle = false,
-    height = null,
-    id,
-    max = 100,
-    min = 0,
-    prefix = '',
-    showLabels = false,
-    style = 'solidgauge',
-    suffix = '',
-    title = '',
-    tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-
-  const css = buildCss({
-    'pb_gauge_kit': true,
-  })
-  // Runs first time component Renders
-  useEffect(() => {
-    chartData.forEach((obj) => {
-      obj.y = obj.value
-      delete obj.value
-    })
-
-    new pbChart('.selector', {
-      id: id,
-      chartData: chartData,
-      circumference: fullCircle ? [0, 360] : [-100, 100],
-      height: height,
-      min: min,
-      max: max,
-      prefix: prefix,
-      title: title,
-      suffix: suffix,
-      showLabels: showLabels,
-      style: style,
-      tooltipHtml: tooltipHtml,
-      type: 'gauge',
-    })
-  }, [])
-
-  const componentDidMount = useRef(false)
-  // Doesn't run the first time but runs every subsequent render
-  useEffect(() => {
-    if (componentDidMount.current) {
-      Highcharts.charts.forEach((chart) => {
-        if (chart.renderTo.id === id) {
-          chart.series[0].setData([chartData[0].value])
-        }
-      })
-    } else {
-      componentDidMount.current = true
-    }
-  })
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classnames(css, className, spacing(props))}
-        id={id}
-    />
-  )
-}
-
-export default Gauge

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -1,11 +0,0 @@
-[class^=pb_gauge_kit] {
-
-  .suffix {
-    fill: $text_lt_light;
-    font: $regular $font_larger $font_family_base;
-  }
-  .prefix {
-    fill: $text_lt_light;
-    font: $regular $font_base $font_family_base;
-  }
-}

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb

@@ -1,11 +0,0 @@
-<% data = [
-  {
-    name: 'Name',
-    value: 45,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-default",
-  chart_data: data,
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const data = [
-  { name: 'Point1', value: 45 },
-]
-
-const GaugeDefault = () => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-default"
-    />
-  </div>
-)
-
-export default GaugeDefault

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb

@@ -1,14 +0,0 @@
-<% data = [
-  {
-    name: 'Capacity',
-    value: 75,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "full-circle",
-  chart_data: data,
-  full_circle: true,
-  title: "Seating Capacity",
-  suffix: "%"
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const data = [
-  { name: 'Capacity', value: 75 },
-]
-
-const GaugeFullCircle = () => (
-  <div>
-    <Gauge
-        chartData={data}
-        fullCircle
-        id="gauge-full-circle"
-        suffix="%"
-        title="Seating Capacity"
-    />
-  </div>
-)
-
-export default GaugeFullCircle

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb

@@ -1,15 +0,0 @@
-<%= pb_rails("gauge", props: {
-  id: "gauge-height-px",
-  chart_data: [{ name: "Pixel Height", value: 400 }],
-  height: '400',
-  title: "Fixed Height in Pixels",
-  suffix: "px"
-}) %>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-height-percent",
-  chart_data: [{ name: "Percentage Height", value: 45 }],
-  height: '45%',
-  title: "Height as Percentage of Width",
-  suffix: "%"
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import { Gauge } from '../../'
-
-const GaugeHeight = () => (
-  <div>
-    <Gauge
-        chartData={[ { name: 'Name', value: 400 } ]}
-        height="400"
-        id="gauge-height-px"
-        suffix="px"
-        title="Fixed Height in Pixels"
-    />
-    <Gauge
-        chartData={[ { name: 'Name', value: 45 } ]}
-        height="45%"
-        id="gauge-height-percent"
-        suffix="%"
-        title="Height as Percentage of Width"
-    />
-  </div>
-)
-
-export default GaugeHeight

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -1,25 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Gauge } from '../../'
-
-const GaugeLiveData = () => {
-  const [value, setValue] = useState(50)
-
-  const updateState = () => {
-    setValue(Math.floor(Math.random() * 100))
-  }
-
-  return (
-    <div>
-      <Button
-          onClick={updateState}
-          text="Update State"
-      />
-      <Gauge
-          chartData={[{ name: 'Name', value: value }]}
-          id="gauge-live-data"
-      />
-    </div>
-  )
-}
-
-export default GaugeLiveData