playbook_ui 3.5.0 → 4.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0b28078834805bf57899264e987f4f63142ed9e9da7a4150e4567b46a2dfd28
-  data.tar.gz: aeb49b9e4f1170ea5ed44cbd9fbf712c17c09658feda934185eb3fd71c12ffdc
+  metadata.gz: 78848474811b6e754736b7b5592e469d4121cddf79723c10c78342e0865b06e8
+  data.tar.gz: 90fc301b3b4dd2de5b5c9b65ba942a25b573504cc8134e09b155986519629149
 SHA512:
-  metadata.gz: 35c87175dd140d1d6c86314678fa628e11f49fa4c2044771ad15db3c4d688bc4a2eff5918e59d1455f09f72fbbb6d22c85c0dc956a192d4cb94945680cea14e5
-  data.tar.gz: 20ae14c1f20d443a89f133cd7e3335c20ca9ed01677a966b06754a3e28f4eed6d924c0bd7c895379e3f7ce81c34897776e73164604005e0ef16473017c0c720b
+  metadata.gz: 46f4271397f0d4a1d80cf5e079eca0f738b7f2154198640c74b0e4d7caac81dd413cd919dca53f8d833e9cdb270f53ad85f6b14485764300289ed61480bedb08
+  data.tar.gz: 8db3a7ba3f88a00750f935de3b44ae68ab1ee8c713a8798040914dec7c8837f8b8f493edb354a96dd81c96f2475f5faa72d83b9243aeafd0cd829fdf9daa2b2b

data/app/pb_kits/playbook/_playbook.scss

@@ -39,6 +39,7 @@
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
 @import 'pb_pill/pill';
+@import 'pb_popover/popover';
 @import 'pb_progress_pills/progress_pills';
 @import 'pb_progress_simple/progress_simple';
 @import 'pb_radio/radio';
@@ -57,6 +58,6 @@
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
+@import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
-@import 'pb_typeahead/typeahead';

data/app/pb_kits/playbook/index.js

@@ -40,6 +40,7 @@ export OnlineStatus from './pb_online_status/_online_status.jsx'
 export Person from './pb_person/_person.jsx'
 export PersonContact from './pb_person_contact/_person_contact.jsx'
 export Pill from './pb_pill/_pill.jsx'
+export Popover from './pb_popover/_popover.jsx'
 export ProgressPills from './pb_progress_pills/_progress_pills.jsx'
 export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
 export Radio from './pb_radio/_radio.jsx'
@@ -67,5 +68,5 @@ export barGraphSettings from './pb_bar_graph/barGraphSettings'
 export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
-export pbChart from './plugins/pb_chart_plugin.js'
+export pbChart from './plugins/pb_chart.js'
 export PbTypeahead from './pb_typeahead'

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

@@ -0,0 +1,4 @@
+import Popover from '../pb_popover/_popover.jsx'
+
+import WebpackerReact from 'webpacker-react'
+WebpackerReact.setup({ Popover })

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

@@ -12,6 +12,7 @@ import WebpackerReact from 'webpacker-react'
 // Generated file from kit generator.
 // KIT EXAMPLES
 
+import '../pb_form/pb_form_validation'
 import * as avatar from 'pb_avatar/docs'
 import * as Badge from 'pb_badge/docs'
 import * as BarGraph from 'pb_bar_graph/docs'
@@ -51,6 +52,7 @@ import * as OnlineStatus from 'pb_online_status/docs'
 import * as Person from 'pb_person/docs'
 import * as PersonContact from 'pb_person_contact/docs'
 import * as Pill from 'pb_pill/docs'
+import * as Popover from 'pb_popover/docs'
 import * as ProgressPills from 'pb_progress_pills/docs'
 import * as ProgressSimple from 'pb_progress_simple/docs'
 import * as Radio from 'pb_radio/docs'
@@ -72,7 +74,9 @@ import * as TitleDetail from 'pb_title_detail/docs'
 import * as Toggle from 'pb_toggle/docs'
 import * as User from 'pb_user/docs'
 import * as UserBadge from 'pb_user_badge/docs'
+import PbTypeahead from 'pb_typeahead'
 
+PbTypeahead.start()
 WebpackerReact.setup(avatar)
 WebpackerReact.setup(Badge)
 WebpackerReact.setup(BarGraph)
@@ -112,6 +116,7 @@ WebpackerReact.setup(OnlineStatus)
 WebpackerReact.setup(Person)
 WebpackerReact.setup(PersonContact)
 WebpackerReact.setup(Pill)
+WebpackerReact.setup(Popover)
 WebpackerReact.setup(ProgressPills)
 WebpackerReact.setup(ProgressSimple)
 WebpackerReact.setup(Radio)
@@ -133,6 +138,3 @@ WebpackerReact.setup(TitleDetail)
 WebpackerReact.setup(Toggle)
 WebpackerReact.setup(User)
 WebpackerReact.setup(UserBadge)
-
-import PbTypeahead from 'pb_typeahead'
-PbTypeahead.start()

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

@@ -36,6 +36,7 @@ import '../kits/pb_online_status.js'
 import '../kits/pb_person.js'
 import '../kits/pb_person_contact.js'
 import '../kits/pb_pill.js'
+import '../kits/pb_popover.js'
 import '../kits/pb_progress_pills.js'
 import '../kits/pb_progress_simple.js'
 import '../kits/pb_radio.js'
@@ -57,3 +58,4 @@ import '../kits/pb_title_detail.js'
 import '../kits/pb_toggle.js'
 import '../kits/pb_user.js'
 import '../kits/pb_user_badge.js'
+

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -4,7 +4,7 @@
   margin-bottom: 20px;
   border: 1px solid $border-light;
   border-radius: 4px;
-  box-shadow: 0 4px 10px $shadow_light;
+  box-shadow: 0 4px 10px $shadow;
   background: $white;
   overflow: hidden;
 

data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss

@@ -38,7 +38,7 @@
     color: #faf6e4;
     padding: 0.5rem 1.5rem;
     margin: 1rem 0;
-    box-shadow: 0 2px 10px $shadow_light;
+    box-shadow: 0 2px 10px $shadow;
     border-radius: 0.25rem;
     overflow: hidden;
     font-size: 1rem;

data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss

@@ -67,6 +67,6 @@ ul {
   div.pb--spacing_#{$name}{
     width: #{$value};
     height: 78px;
-    background: $shadow_light;
+    background: $shadow;
   }
 }

data/app/pb_kits/playbook/pb_card/card.rb

@@ -1,10 +1,5 @@
 # frozen_string_literal: true
 
-# DEPRECATION NOTICE - DO NOT USE Shadow Shallow and Shadow Default!
-# Shadow Options: Shallow and Default targed to be removed in release v4.0.0.
-# [https://github.com/powerhome/playbook/issues/550]
-# END DEPRECATION NOTICE
-
 module Playbook
   module PbCard
     class Card
@@ -17,7 +12,7 @@ module Playbook
                      values: %w[none xs sm md lg xl],
                      default: "md"
       prop :shadow, type: Playbook::Props::Enum,
-                    values: %w[none shallow default deep deeper deepest],
+                    values: %w[none deep deeper deepest],
                     default: "none"
       prop :highlight, type: Playbook::Props::Hash,
                        default: {}

data/app/pb_kits/playbook/pb_currency/_currency.html.erb

@@ -1,13 +1,13 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname(object.kit_class)) do %>
+    class: object.classname) do %>
+
+  <%= object.label_element %>
 
-  <%= object.label %>
   <div class="pb_currency_wrapper">
-    <%= object.dollar_sign %>
-    <%= object.value %>
-    <%= object.unit %>
+    <%= object.currency_symbol_element %>
+    <%= object.amount_element %>
+    <%= object.units_element %>
   </div>
-
 <% end %>

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

@@ -1,26 +1,18 @@
 /* @flow */
 
 import React from 'react'
-import classnames from 'classnames'
 
 import { Body, Caption, Title } from '../'
 import { buildCss } from '../utilities/props'
 
 type CurrencyProps = {
   align?: 'left' | 'center' | 'right',
-  className: String,
-  currencySymbol: String,
-  label?: String,
+  amount: string,
+  className?: string,
+  label?: string,
   separator?: '.' | ',',
   size?: 'sm' | 'lg',
-  value?: String,
-  units?: String,
-}
-
-const symbolCSS = (currencySymbol) => {
-  return classnames({
-    'dollar_sign': currencySymbol === '$',
-  })
+  symbol?: string,
 }
 
 const sizes = {
@@ -30,26 +22,43 @@ const sizes = {
 
 const Currency = ({
   align = 'left',
-  currencySymbol = '$',
+  amount,
+  className,
   label = '',
   separator = '.',
   size = 'sm',
-  units = '00',
-  value,
-}: CurrencyProps) => (
-  <div className={buildCss('pb_currency_kit', align)}>
-    <Caption>{label}</Caption>
-    <div className="pb_currency_wrapper">
-      <Body className={symbolCSS(currencySymbol)}>{currencySymbol}</Body>
-      <Title
-          className="pb_currency_value"
-          size={sizes[size]}
-      >
-        {`${value}${separator}`}
-      </Title>
-      <Body className="unit">{units}</Body>
+  symbol = '$',
+}: CurrencyProps) => {
+  const [whole, decimal = '00'] = amount.split(separator)
+
+  return (
+    <div className={buildCss('pb_currency_kit', align, className)}>
+      <Caption>{label}</Caption>
+
+      <div className="pb_currency_wrapper">
+        <Body
+            className="dollar_sign"
+            color="light"
+        >
+          {symbol}
+        </Body>
+
+        <Title
+            className="pb_currency_value"
+            size={sizes[size]}
+        >
+          {`${whole}${separator}`}
+        </Title>
+
+        <Body
+            className="unit"
+            color="light"
+        >
+          {decimal}
+        </Body>
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default Currency

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

@@ -1,40 +1,40 @@
 
-  [class^=pb_currency_kit]{
-    &[class*=_center]  {
-      & > [class^=pb_caption],
-      & > [class^=pb_title],
-      & > [class^=pb_body] {
-        text-align: center;
-      }
-      & > [class*=pb_currency_wrapper] {
-     justify-content: center;
+[class^=pb_currency_kit] {
+  &[class*=_center]  {
+    & > [class^=pb_caption],
+    & > [class^=pb_title],
+    & > [class^=pb_body] {
+      text-align: center;
+    }
+    & > [class*=pb_currency_wrapper] {
+      justify-content: center;
     }
   }
 
-    &[class*=_right]  {
-      & > [class^=pb_caption],
-      & > [class^=pb_title],
-      & > [class^=pb_body] {
-        text-align: right;
-      }
-      & > [class*=pb_currency_wrapper] {
+  &[class*=_right]  {
+    & > [class^=pb_caption],
+    & > [class^=pb_title],
+    & > [class^=pb_body] {
+      text-align: right;
+    }
+    & > [class*=pb_currency_wrapper] {
       justify-content: flex-end;
     }
   }
 }
 
-  [class^=pb_currency_wrapper] {
-    display: flex;
+[class^=pb_currency_wrapper] {
+  display: flex;
 
-    & > [class*=dollar_sign] {
-      display: flex;
-      align-items: flex-start;
-    }
-    & > [class*=unit] {
-      display: flex;
-      align-items: flex-end;
-    }
-    & > [class*=pb_currency_value] {
-      line-height: .9;
-      }
+  & > [class*=dollar_sign] {
+    display: flex;
+    align-items: flex-start;
+  }
+  & > [class*=unit] {
+    display: flex;
+    align-items: flex-end;
   }
+  & > [class*=pb_currency_value] {
+    line-height: .9;
+  }
+}

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -2,99 +2,91 @@
 
 module Playbook
   module PbCurrency
-    class Currency < Playbook::PbKit::Base
-      PROPS = %i[configured_align
-                 configured_classname
-                 configured_data
-                 configured_id
-                 configured_label
-                 configured_value
-                 configured_unit
-                 configured_dollar_sign
-                 configured_size].freeze
-
-      def initialize(align: default_configuration,
-                     classname: default_configuration,
-                     data: default_configuration,
-                     id: default_configuration,
-                     label: default_configuration,
-                     value: default_configuration,
-                     unit: default_configuration,
-                     dollar_sign: default_configuration,
-                     size: default_configuration)
-        self.configured_align = align
-        self.configured_classname = classname
-        self.configured_data = data
-        self.configured_id = id
-        self.configured_label = label
-        self.configured_value = value
-        self.configured_unit = unit
-        self.configured_dollar_sign = dollar_sign
-        self.configured_size = size
-      end
+    class Currency
+      include ActionView::Context
+      include Playbook::Props
 
-      def align
-        align_options = %w[left center right]
-        one_of_value(configured_align, align_options, "left")
-      end
+      partial "pb_currency/currency"
 
-      def dollar_sign
-        pb_dollar_sign = Playbook::PbBody::Body.new(classname: "dollar_sign", color: "light") do
-          default_value(configured_dollar_sign, "")
-        end
-        ApplicationController.renderer.render(partial: pb_dollar_sign, as: :object)
-      end
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left center right],
+                   default: "left"
 
-      def label
-        if is_set? configured_label
-          pb_label = Playbook::PbCaption::Caption.new(text: configured_label)
-          ApplicationController.renderer.render(partial: pb_label, as: :object)
-        end
-      end
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[lg sm],
+                  default: "sm"
 
-      def size
-        size_options = %w[lg sm]
-        one_of_value(configured_size, size_options, "sm")
-      end
+      prop :label, type: Playbook::Props::String,
+                   default: ""
 
-      def value_size
-        size == "lg" ? 1 : 2
+      prop :separator, type: Playbook::Props::String,
+                       default: "."
+
+      prop :symbol, type: Playbook::Props::String,
+                    default: "$"
+
+      prop :amount, type: Playbook::Props::String,
+                    required: true
+
+      def classname
+        generate_classname("pb_currency_kit", align)
       end
 
-      def value
-        if is_set? configured_value
-          pb_title = Playbook::PbTitle::Title.new(size: value_size, text: configured_value, classname: "pb_currency_value")
-          ApplicationController.renderer.render(partial: pb_title, as: :object)
-        end
+      def currency_symbol_element
+        pb_dollar_sign = Playbook::PbBody::Body.new(
+          classname: "dollar_sign",
+          color: "light"
+        ) { symbol }
+
+        ApplicationController.renderer.render(
+          partial: pb_dollar_sign,
+          as: :object
+        )
       end
 
-      def unit
-        pb_unit = Playbook::PbBody::Body.new(classname: "unit", color: "light") do
-          default_value(configured_unit, "")
-        end
-        ApplicationController.renderer.render(partial: pb_unit, as: :object)
+      def label_element
+        pb_label = Playbook::PbCaption::Caption.new(text: label)
+
+        ApplicationController.renderer.render(
+          partial: pb_label,
+          as: :object
+        )
       end
 
-      def kit_class
-        kit_options = [
-          "pb_currency_kit",
-          align,
-        ]
-        kit_options.join("_")
+      def amount_element
+        whole_part, _ = amount.split(separator)
+
+        pb_title = Playbook::PbTitle::Title.new(
+          size: size_value,
+          text: "#{whole_part}#{separator}",
+          classname: "pb_currency_value"
+        )
+
+        ApplicationController.renderer.render(
+          partial: pb_title,
+          as: :object
+        )
       end
 
-      def to_partial_path
-        "pb_currency/currency"
+      def units_element
+        _, decimal_part = amount.split(separator)
+
+        pb_unit = Playbook::PbBody::Body.new(
+          classname: "unit",
+          color: "light"
+        ) { decimal_part || "00" }
+
+        ApplicationController.renderer.render(
+          partial: pb_unit,
+          as: :object
+        )
       end
 
     private
 
-      DEFAULT = Object.new
-      private_constant :DEFAULT
-      def default_configuration
-        DEFAULT
+      def size_value
+        size == "lg" ? 1 : 2
       end
-      attr_accessor(*PROPS)
     end
   end
 end