playbook_ui 2.9.1 → 2.9.2

data/app/pb_kits/playbook/{packs → kits}/pb_timestamp.js

@@ -1,4 +1,4 @@
-import Timestamp from "pb_timestamp/_timestamp.jsx";
+import Timestamp from "../pb_timestamp/_timestamp.jsx";
 
 import WebpackerReact from "webpacker-react";
 WebpackerReact.setup({ Timestamp });

data/app/pb_kits/playbook/{packs → kits}/pb_title.js

@@ -1,4 +1,4 @@
-import Title from "pb_title/_title.jsx";
+import Title from "../pb_title/_title.jsx";
 import WebpackerReact from "webpacker-react";
 
 WebpackerReact.setup({ Title });

data/app/pb_kits/playbook/{packs → kits}/pb_title_count.js

@@ -1,4 +1,4 @@
-import TitleCount from "pb_title_count/_title_count.jsx";
+import TitleCount from "../pb_title_count/_title_count.jsx";
 
 import WebpackerReact from "webpacker-react";
 WebpackerReact.setup({ TitleCount });

data/app/pb_kits/playbook/{packs → kits}/pb_title_detail.js

@@ -1,4 +1,4 @@
-import TitleDetail from "pb_title_detail/_title_detail.jsx";
+import TitleDetail from "../pb_title_detail/_title_detail.jsx";
 
 import WebpackerReact from "webpacker-react";
 WebpackerReact.setup({ TitleDetail });

data/app/pb_kits/playbook/{packs → kits}/pb_toggle.js

@@ -1,4 +1,4 @@
-import Toggle from "pb_toggle/_toggle.jsx";
+import Toggle from "../pb_toggle/_toggle.jsx";
 
 import WebpackerReact from "webpacker-react";
 WebpackerReact.setup({ Toggle });

data/app/pb_kits/playbook/{packs → kits}/pb_user.js

@@ -1,4 +1,4 @@
-import User from "pb_user/_user.jsx";
+import User from "../pb_user/_user.jsx";
 
 import WebpackerReact from "webpacker-react";
 WebpackerReact.setup({ User });

data/app/pb_kits/playbook/{packs → kits}/pb_user_badge.js

@@ -1,4 +1,4 @@
-import UserBadge from "pb_user_badge/_user_badge.jsx";
+import UserBadge from "../pb_user_badge/_user_badge.jsx";
 
 import WebpackerReact from "webpacker-react";
 WebpackerReact.setup({ UserBadge });

data/app/pb_kits/playbook/{packs → kits}/pb_vertical_nav.js

@@ -1,4 +1,4 @@
-import VerticalNav from "pb_vertical_nav/_vertical_nav.jsx";
+import VerticalNav from "../pb_vertical_nav/_vertical_nav.jsx";
 import WebpackerReact from "webpacker-react";
 
 WebpackerReact.setup({ VerticalNav });

data/app/pb_kits/playbook/packs/examples.js

@@ -152,3 +152,6 @@ WebpackerReact.setup (DateRangeInline);
 
 import * as DistributionBar from "pb_distribution_bar/docs";
 WebpackerReact.setup (DistributionBar);
+
+import * as Hashtag from "pb_hashtag/docs";
+WebpackerReact.setup (Hashtag);

data/app/pb_kits/playbook/packs/kits.js

@@ -1,48 +1,49 @@
-import "./pb_body.js";
-import "./pb_button.js";
-import "./pb_caption.js";
-import "./pb_card.js";
-import "./pb_title.js";
-import "./pb_layout.js";
-import "./pb_vertical_nav.js";
-import "./pb_image.js";
-import "./pb_table.js";
-import "./pb_avatar.js";
-import "./pb_input.js";
-import "./pb_bar_graph.js";
-import "./pb_line_graph.js";
-import "./pb_icon.js";
-import "./pb_dashboard_value.js";
-import "./pb_time.js";
-import "./pb_pill.js";
-import "./pb_user_badge.js";
-import "./pb_date.js";
-import "./pb_title_detail.js";
-import "./pb_icon_circle.js";
-import "./pb_icon_value.js";
-import "./pb_star_rating.js";
-import "./pb_progress_simple.js";
-import "./pb_title_count.js";
-import "./pb_user.js";
-import "./pb_label_value.js";
-import "./pb_message.js";
-import "./pb_timestamp.js";
-import "./pb_online_status.js";
-import "./pb_source.js";
-import "./pb_label_pill.js";
-import "./pb_phone.js";
-import "./pb_owner_phone.js";
-import "./pb_owner.js";
-import "./pb_toggle.js";
-import "./pb_stat_value.js";
-import "./pb_stat_change.js";
-import "./pb_section_separator.js";
-import "./pb_currency.js";
-import "./pb_fixed_confirmation_toast.js";
-import "./pb_loading_inline.js";
-import "./pb_checkbox.js";
-import "./pb_home_address_street.js";
-import "./pb_badge.js";
-import "./pb_date_year_stacked.js";
-import "./pb_date_range_inline.js";
-import "./pb_distribution_bar.js";
+import "../kits/pb_body.js";
+import "../kits/pb_button.js";
+import "../kits/pb_caption.js";
+import "../kits/pb_card.js";
+import "../kits/pb_title.js";
+import "../kits/pb_layout.js";
+import "../kits/pb_vertical_nav.js";
+import "../kits/pb_image.js";
+import "../kits/pb_table.js";
+import "../kits/pb_avatar.js";
+import "../kits/pb_input.js";
+import "../kits/pb_bar_graph.js";
+import "../kits/pb_line_graph.js";
+import "../kits/pb_icon.js";
+import "../kits/pb_dashboard_value.js";
+import "../kits/pb_time.js";
+import "../kits/pb_pill.js";
+import "../kits/pb_user_badge.js";
+import "../kits/pb_date.js";
+import "../kits/pb_title_detail.js";
+import "../kits/pb_icon_circle.js";
+import "../kits/pb_icon_value.js";
+import "../kits/pb_star_rating.js";
+import "../kits/pb_progress_simple.js";
+import "../kits/pb_title_count.js";
+import "../kits/pb_user.js";
+import "../kits/pb_label_value.js";
+import "../kits/pb_message.js";
+import "../kits/pb_timestamp.js";
+import "../kits/pb_online_status.js";
+import "../kits/pb_source.js";
+import "../kits/pb_label_pill.js";
+import "../kits/pb_phone.js";
+import "../kits/pb_owner_phone.js";
+import "../kits/pb_owner.js";
+import "../kits/pb_toggle.js";
+import "../kits/pb_stat_value.js";
+import "../kits/pb_stat_change.js";
+import "../kits/pb_section_separator.js";
+import "../kits/pb_currency.js";
+import "../kits/pb_fixed_confirmation_toast.js";
+import "../kits/pb_loading_inline.js";
+import "../kits/pb_checkbox.js";
+import "../kits/pb_home_address_street.js";
+import "../kits/pb_badge.js";
+import "../kits/pb_date_year_stacked.js";
+import "../kits/pb_date_range_inline.js";
+import "../kits/pb_distribution_bar.js";
+import "../kits/pb_hashtag.js";

data/app/pb_kits/playbook/packs/site_styles/_kit_style_index.scss

@@ -47,3 +47,4 @@
 @import '../../pb_date_year_stacked/date_year_stacked';
 @import '../../pb_date_range_inline/date_range_inline';
 @import '../../pb_distribution_bar/distribution_bar';
+@import '../../pb_hashtag/hashtag';

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -5,7 +5,7 @@ import React from 'react'
 
 import classnames from 'classnames'
 import { map } from 'lodash'
-import Image from "../pb_image/_image.jsx"
+import { Image } from "../"
 
 type AvatarProps = {
   className?: String,

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Avatar from "../_avatar.jsx"
+import { Avatar } from "../../"
 
 function AvatarDefault() {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Avatar from "../_avatar.jsx"
+import { Avatar } from "../../"
 
 function AvatarDefault() {
   return (

data/app/pb_kits/playbook/pb_badge/_badge.html.erb

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

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -2,64 +2,26 @@
 
 module Playbook
   module PbBadge
-    class Badge < Playbook::PbKit::Base
-      PROPS = %i[
-        configured_classname
-        configured_data
-        configured_id
-        configured_text
-        configured_variant
-        configured_rounded
-      ].freeze
+    class Badge
+      include Playbook::Props
 
-      def initialize(classname: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     text: default_configuration,
-                     variant: default_configuration,
-                     rounded: default_configuration)
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_text = text
-        self.configured_variant = variant
-        self.configured_rounded = rounded
-      end
-
-      def text
-        default_value(configured_text, "")
-      end
-
-      def rounded
-        true_value(configured_rounded, "rounded", nil)
-      end
-
-      def variant
-        variant_options = %w[success warning error info neutral primary]
-        one_of_value(configured_variant, variant_options, "neutral")
-      end
+      partial "pb_badge/badge"
 
-      def kit_class
-        kit_options = [
-          "pb_badge_kit",
-          variant,
-          rounded,
-        ]
-        kit_options.compact.join("_")
-      end
+      prop :rounded, type: Playbook::Props::Boolean, default: false
+      prop :text
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[success warning error info neutral primary],
+                     default: "neutral"
 
-      def to_partial_path
-        "pb_badge/badge"
+      def classname
+        generate_classname("pb_badge_kit", variant, rounded_class)
       end
 
     private
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def rounded_class
+        rounded ? "rounded" : nil
       end
-      attr_accessor(*PROPS)
     end
   end
 end

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.html.erb

@@ -91,7 +91,6 @@
 <div>
   <%= pb_rails("badge", props: {
     text: "+1",
-    variant: "neutral",
     rounded: true
   }) %>
 

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 
-import pbChart from "../plugins/pb_chart_plugin.js"
+import { pbChart } from "../"
 
 type BarGraphProps = {
   axisTitle: String,

data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js

@@ -1,24 +1,31 @@
-import commonSettings from "../pb_dashboard/commonSettings.js"
+import commonSettings from "../pb_dashboard/commonSettings.js";
+import typography from "../tokens/_typography.scss";
 
 const sizeColumns = function(highchart) {
-    let column = highchart.plotOptions.column
-    let series = highchart.plotOptions.series
-    
-    column.borderRadius = 0
-    column.pointPadding = 0.3
-    column.groupPadding = 0.2
+  let column = highchart.plotOptions.column;
+  let series = highchart.plotOptions.series;
 
-    series.borderWidth = 0
-    series.shadow = false
-    series.pointPadding = 0.3
-    series.groupPadding = 0.2
-    series.borderWidth = 0
-    series.shadow = false
-}
+  column.borderRadius = 0;
+  column.pointPadding = 0.3;
+  column.groupPadding = 0.2;
 
-const pbBarGraph = function(highchart) {
-  commonSettings(highchart)
-  sizeColumns(highchart)
-}
+  series.borderWidth = 0;
+  series.shadow = false;
+  series.pointPadding = 0.3;
+  series.groupPadding = 0.2;
+};
 
-export default pbBarGraph
+const styleDataLabels = highchart => {
+  let series = highchart.plotOptions.series;
+
+  series.dataLabels.style.fontFamily = typography.font_family_base;
+  series.dataLabels.style.fontSize = typography.text_small;
+};
+
+const barGraphSettings = function(highchart) {
+  commonSettings(highchart);
+  sizeColumns(highchart);
+  styleDataLabels(highchart);
+};
+
+export default barGraphSettings;

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import BarGraph from "../_bar_graph.jsx"
+import { BarGraph } from "../../"
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Body from "../_body.jsx"
+import {Body} from "../../"
 
 function BodyBlock() {
   return (

data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Body from "../_body.jsx"
+import {Body} from "../../"
 
 function BodyDark() {
   return (

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Body from "../_body.jsx"
+import {Body} from "../../"
 
 function BodyLight() {
   return (

data/app/pb_kits/playbook/pb_button/_button.html.erb

@@ -5,8 +5,11 @@
     data: object.data,
     class: object.classname(object.kit_class),
     disabled: object.disabled,
-    aria: object.aria
-  }
+    aria: object.aria,
+    type: object.type,
+    value: object.value
+  }.compact
+
   link_options = {
     href: object.link,
     target: object.new_window

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -19,6 +19,8 @@ type ButtonPropTypes = {
   size: 'large' | 'medium' | 'small',
   text?: String,
   type: 'inline' | null,
+  htmlType: String | 'button',
+  value?: String | null,
   variant: 'primary' | 'secondary' | 'link',
   wrapperClass: String,
 }
@@ -69,6 +71,8 @@ const Button = (props : ButtonPropTypes) => {
     link=null,
     newWindow=false,
     text,
+    htmlType='button',
+    value
   } = props
 
   const buttonAria  = buttonAriaProps(props)
@@ -98,7 +102,12 @@ const Button = (props : ButtonPropTypes) => {
         {content}
       </a>
     <Else/>
-      <button {...buttonAria} className={css}>
+      <button
+          {...buttonAria}
+          className={css}
+          type={htmlType}
+          value={value}
+      >
         <If condition={loading}>
             {loadingIcon}
         </If>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -15,6 +15,8 @@ module Playbook
                  configured_variant
                  configured_tag
                  configured_text
+                 configured_type
+                 configured_value
                  block].freeze
 
       def initialize(aria: default_configuration,
@@ -29,6 +31,8 @@ module Playbook
                      variant: default_configuration,
                      tag: default_configuration,
                      text: default_configuration,
+                     type: default_configuration,
+                     value: default_configuration,
                      &block)
         self.configured_aria = aria
         self.configured_classname = classname
@@ -42,6 +46,8 @@ module Playbook
         self.configured_variant = variant
         self.configured_tag = tag
         self.configured_text = text
+        self.configured_type = type
+        self.configured_value = value
         self.block = block_given? ? block : nil
       end
 
@@ -99,6 +105,14 @@ module Playbook
         default_value(configured_text, "")
       end
 
+      def type
+        default_value(configured_type, "button")
+      end
+
+      def value
+        configured_value unless configured_value == DEFAULT
+      end
+
       def yield(context:)
         !block.nil? ? context.capture(&block) : text
       end