playbook_ui 2.9.1 → 2.9.2

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("checkbox" , props: {
+  text: "Checked Checkbox",
+  value: "checkbox-value",
+  checked: true,
+  icon: true,
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("checkbox", props: {text:"Checkbox Label" , icon:"check", dark: true}) %>
+<%= pb_rails("checkbox", props: {
+  text: "Checkbox Label" ,
+  icon: true,
+  dark: true
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import {Checkbox} from '../../'
+
+function CheckboxDark() {
+  return (
+    <div>
+      <Checkbox
+          dark
+          label='Checkbox label'
+          name='default name'
+          value='default value'
+      />
+    </div>
+  )
+}
+
+export default CheckboxDark;

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb

@@ -1 +1,6 @@
-<%= pb_rails("checkbox" , props:{ text:"Checkbox Label", value:"checkbox-value", icon:"check", name:"checkbox-name" }) %>
+<%= pb_rails("checkbox" , props: {
+  text: "Checkbox Label",
+  value: "checkbox-value",
+  icon: true,
+  name: "checkbox-name"
+}) %>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx

@@ -1,14 +1,13 @@
-import React from "react"
-import Checkbox from "../_checkbox.jsx"
+import React from 'react'
+import {Checkbox} from '../../'
 
 function CheckboxDefault() {
   return (
     <div>
       <Checkbox
-
           label='Checkbox label'
-          name="default name"
-          value="default value"
+          name='default name'
+          value='default value'
       />
     </div>
   )

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

@@ -1,8 +1,9 @@
 examples:
-
   rails:
-  - checkbox_default: Default
-  - checkbox_dark: Dark
+    - checkbox_default: Default
+    - checkbox_checked: Load as checked
+    - checkbox_dark: Dark
 
   react:
-    - checkbox_default: Default
+  - checkbox_default: Default
+  - checkbox_dark: Dark

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

@@ -1 +1,2 @@
 export {default as CheckboxDefault} from './_checkbox_default.jsx';
+export {default as CheckboxDark} from './_checkbox_dark.jsx';

data/app/pb_kits/playbook/pb_currency/_currency.jsx

@@ -3,9 +3,11 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import Body from '../pb_body/_body.jsx'
-import Caption from '../pb_caption/_caption.jsx'
-import Title from '../pb_title/_title.jsx'
+import {
+  Body,
+  Caption,
+  Title,
+} from '../'
 
 type CurrencyProps = {
   align?: 'left' | 'center' | 'right',

data/app/pb_kits/playbook/pb_currency/docs/_currency_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Currency from "../_currency.jsx"
+import {Currency} from "../../"
 
 function CurrencyDefault() {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_large.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Currency from "../_currency.jsx"
+import {Currency} from "../../"
 
 function CurrencyDefault() {
   return (

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,8 +1,8 @@
 import colors from "../tokens/_colors.scss"
 import typography from "../tokens/_typography.scss";
 
-const applyCustomColors = function(highchart) {
-  var data_colors = [
+const applyCustomSeriesColors = function(highchart) {
+  const data_colors = [
     colors.data_1,
     colors.data_2,
     colors.data_3,
@@ -13,10 +13,27 @@ const applyCustomColors = function(highchart) {
   ];
 
   highchart.series.forEach(function(item, index) {
-    var selected_color = data_colors[index % data_colors.length];
+    const selected_color = data_colors[index];
     item.color = selected_color;
+
     item.data.forEach(function(data_item) {
-      data_item.color = selected_color;
+      if(data_item.color){
+        data_item.color = selected_color;
+      }
+
+      if(!data_item.marker) return;
+
+      if(data_item.marker.lineColor){
+        data_item.marker.lineColor = selected_color;
+      }
+
+      if(data_item.marker.states.hover !== undefined){
+        data_item.marker.states.hover.lineColor = selected_color;
+      }
+      
+      if(data_item.marker.states.select.lineColor){
+        data_item.marker.states.select.lineColor = selected_color;
+      }
     });
   });
 };
@@ -75,7 +92,7 @@ const styleLegend = function(highchart) {
 
 // Exportable Global Styles Function
 const commonSettings = function(highchart) {
-  applyCustomColors(highchart);
+  applyCustomSeriesColors(highchart);
   styleAxis(highchart);
   styleChartContainer(highchart);
   styleLegend(highchart);

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -2,9 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import Body from '../pb_body/_body.jsx'
-import StatChange from '../pb_stat_change/_stat_change.jsx'
-import StatValue from '../pb_stat_value/_stat_value.jsx'
+
+import {
+  Body,
+  StatChange,
+  StatValue,
+} from '../'
 
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import DashboardValue from "../_dashboard_value.jsx"
+import {DashboardValue} from "../../"
 
 function DashboardValueAlign() {
   return (

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import DashboardValue from "../_dashboard_value.jsx"
+import {DashboardValue} from "../../"
 
 function DashboardValueDefault() {
   return (

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

@@ -1,5 +1,5 @@
 import React from "react"
-import Date from "../_date.jsx"
+import Date from "../../"
 
 function DateDefault() {
   return (

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb

@@ -1,8 +1,8 @@
 <%= content_tag(:figure,
     id: object.id,
     data: object.data,
-    class: object.classname("pb_distribution_bar_#{object.size}")) do %>
-  <% object.values.each do |value| %>
-    <div class="pb_distribution_value" style="width:<%=value%>%"></div>
+    class: object.classname) do %>
+  <% object.widths_to_percentages.each do |percentage| %>
+    <div class="pb_distribution_width" style="width:<%= percentage %>%"></div>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx

@@ -8,39 +8,37 @@ type DistributionBarProps = {
   data?: String,
   id?: String,
   size?: 'lg' | 'sm',
-  values?: Array<Number>,
+  widths?: Array<Number>,
 }
 
-const normalizeCharacters = (values) => {
-  return values.map( value => {
-    return parseInt(value.toString().replace(/[^0-9.]/gi, ''))
+const normalizeCharacters = (widths) => {
+  return widths.map(width => {
+    return parseInt(width.toString().replace(/[^0-9.]/gi, ''))
   })
 }
 
 const barValues = (normalizedValues) => {
   let arrSum = value => value.reduce((a,b) => (a + b), 0)
-  let valueSum = arrSum(normalizedValues)
+  let widthSum = arrSum(normalizedValues)
   return normalizedValues.map((value,i) => {
     return(
       <div
           key={i}
-          className={`pb_distribution_value`}
-          style={{width:`${value*100/valueSum}%`}}
+          className={`pb_distribution_width`}
+          style={{width:`${value*100/widthSum}%`}}
       />
     )
   })
 }
 
-
-
 const DistributionBar = ({
     className,
     data,
     id,
     size='lg',
-    values=[1]
+    widths=[1]
   }: DistributionBarProps) => {
-    const normalizedValues = normalizeCharacters(values)
+    const normalizedValues = normalizeCharacters(widths)
 
     return(
       <div className={`pb_distribution_bar_${size}`}>

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -5,7 +5,7 @@
   $small_bar: 8px;
   $large_bar: 36px;
   display: flex;
-  .pb_distribution_value {
+  .pb_distribution_width {
     height: 100%;
     display: inline-block;
     @for $i from 1 through length($bar_colors) {

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -2,54 +2,25 @@
 
 module Playbook
   module PbDistributionBar
-    class DistributionBar < Playbook::PbKit::Base
-      PROPS = %i[configured_classname
-                 configured_data
-                 configured_id
-                 configured_size
-                 configured_values].freeze
+    class DistributionBar
+      include Playbook::Props
 
-      def initialize(classname: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     size: default_configuration,
-                     values: default_configuration)
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_size = size
-        self.configured_values = values
-      end
-
-      def size
-        size_options = %w[lg sm]
-        one_of_value(configured_size, size_options, "lg")
-      end
-
-      def values
-        default_value(values_to_percents, [1])
-      end
+      partial "pb_distribution_bar/distribution_bar"
 
-      def to_partial_path
-        "pb_distribution_bar/distribution_bar"
-      end
-
-    private
-
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
-      end
-      attr_accessor(*PROPS)
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[lg sm],
+                  default: "lg"
+      prop :widths, type: Playbook::Props::NumberArray,
+                    default: [1]
 
-      def normalize_characters(value)
-        return value.to_s.gsub(/(\d\.\d)|[^a-zA-Z\d]/, '\\1').to_i
+      def classname
+        generate_classname("pb_distribution_bar", size)
       end
 
-      def values_to_percents
-        normalized_values = configured_values.map(&method(:normalize_characters))
-        normalized_values.map { |value| (value.to_f * 100 / normalized_values.sum ).round(2) }
+      def widths_to_percentages
+        widths.map do |width|
+          (width.to_f * 100 / widths.sum).round(2)
+        end
       end
     end
   end

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.html.erb

@@ -1,9 +1,9 @@
 <%= pb_rails("distribution_bar", props: {
-  values: [1,2,3,4,5,3,3,7]
+  widths: [1,2,3,4,5,3,3,7]
 }) %>
 
 <br><br>
 <%= pb_rails("distribution_bar", props: {
-  values: [1,2,3,4,5,3,3,7],
+  widths: [1,2,3,4,5,3,3,7],
   size: "sm"
 }) %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx

@@ -6,7 +6,7 @@ function DistributionBarDefault() {
     <React.Fragment>
       <div>
         <DistributionBar
-          values={[1,2,3,4,5,3,3,7]}
+          widths={[1,2,3,4,5,3,3,7]}
         />
       </div>
       <br/>
@@ -14,7 +14,7 @@ function DistributionBarDefault() {
       <div>
         <DistributionBar
           size='sm'
-          values={[1,2,3,4,5,3,3,7]}
+          widths={[1,2,3,4,5,3,3,7]}
         />
       </div>
     </React.Fragment>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx

@@ -3,8 +3,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import Title from "../pb_title/_title.jsx"
-import Icon from "../pb_icon/_icon.jsx"
+
+import {
+  Icon,
+  Title,
+} from '../'
 
 type FixedConfirmationToastProps = {
   className?: String,

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import FixedConfirmationToast from "../_fixed_confirmation_toast.jsx"
+import {FixedConfirmationToast} from "../../"
 
 function FixedConfirmationToastDefault() {
   return (

data/app/pb_kits/playbook/pb_hashtag/_hashtag.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+
+  <%= link_to object.url do %>
+    <%= object.hashtag %>
+  <% end %>
+
+<% end %>

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -0,0 +1,41 @@
+/* @flow */
+/* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import {Badge} from '../'
+
+type HashtagProps = {
+  className?: String,
+  data?: String,
+  id?: String,
+  text?: String,
+  type: 'default' | 'home' | 'project',
+  url?: String,
+}
+
+
+const HashType = {
+  "home": "H#",
+  "project": "P#",
+  "default": "#"
+}
+
+const Hashtag = ({
+  className,
+  data,
+  id,
+  text,
+  type,
+  url
+} : HashtagProps) => (
+
+
+
+<div className={`pb_hashtag_kit_${type}`}>
+  <a href={url}>
+    <Badge variant="primary" text={HashType[type] + text}></Badge>
+  </a>
+</div>
+)
+
+export default Hashtag