playbook_ui 2.8.6 → 2.8.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76a94704ea4a1aee3b57ea302589c863ce195ef2e5a13bbf57006cdf66f43f7b
-  data.tar.gz: d59135b0711cbeee71a8499149b567eea897ae2d1e5704c9358f69d6f8b34c82
+  metadata.gz: 0a42e419ff336721df276fdf3b5b42e13645c628f60a08b07637934cc2d98974
+  data.tar.gz: 2b58fa57e6183c3a85ecd8a9b5b8f37b1eebbc948f12cf0bb96e6794f60fe44a
 SHA512:
-  metadata.gz: 53ffc31b9f170dbfcbc10d58e109f2298ba3824268ccc868714ed10249302e4e9337e1092c51ff7480f9888f521392124f9296a817e20a8199abb22fb5b316ad
-  data.tar.gz: f62eb9b6ecf504cc7896a7291c23492c6e6dd6d51ad6d6e90e905b61ee4defde8f041529911106748ab3fe4ac550cd408672dc0cc16f7e02d71f052f1b6a0892
+  metadata.gz: '04357696dbf7422c03cb9743c7f9c580bd7ceb1f9ed0ca766fdc51dac963d84c4d032d5cee74548077c3eeeb8ab4911257a59062e3a433851d8b416af9cec0fa'
+  data.tar.gz: 37d577d1189723e118498e326177ddaa7fc1d7041fa8217535bda8b10b45f564ee65eb0d0edcf7a955463f205ef4077dc90dad5b855568654fd4232028643fa5

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

@@ -1,10 +1,8 @@
 import "../../../../fonts/fontawesome.js"
 import "../../../../fonts/regular.js"
-import pbChart from "../plugins/pb_chart_plugin.js"
 import "./main.scss"
 import "./kits.js"
-
-window.pbChart = pbChart
+import "../vendor.js"
 
 // Move to separate file
 $(document).on("click", "[data-toggle]", function(e) {

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

@@ -113,3 +113,15 @@ WebpackerReact.setup (Owner);
 
 import * as Toggle from "pb_toggle/docs";
 WebpackerReact.setup (Toggle);
+
+import * as StatValue from "pb_stat_value/docs";
+WebpackerReact.setup (StatValue);
+
+import * as StatChange from "pb_stat_change/docs";
+WebpackerReact.setup (StatChange);
+
+import * as SectionSeparator from "pb_section_separator/docs";
+WebpackerReact.setup (SectionSeparator);
+
+import * as Currency from "pb_currency/docs";
+WebpackerReact.setup (Currency);

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

@@ -33,3 +33,7 @@ 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";

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

@@ -0,0 +1,4 @@
+import Currency from "pb_currency/_currency.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Currency });

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

@@ -1,6 +1,5 @@
 import Image from "pb_image/_image.jsx";
 import WebpackerReact from "webpacker-react";
-import "lazysizes";
 
 
 WebpackerReact.setup({ Image });

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

@@ -0,0 +1,4 @@
+import SectionSeparator from "pb_section_separator/_section_separator.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ SectionSeparator });

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

@@ -0,0 +1,4 @@
+import StatChange from "pb_stat_change/_stat_change.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ StatChange });

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

@@ -0,0 +1,4 @@
+import StatValue from "pb_stat_value/_stat_value.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ StatValue });

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

@@ -35,3 +35,7 @@
 @import '../../pb_owner_phone/owner_phone';
 @import '../../pb_owner/owner';
 @import '../../pb_toggle/toggle';
+@import '../../pb_stat_value/stat_value';
+@import '../../pb_stat_change/stat_change';
+@import '../../pb_section_separator/section_separator';
+@import '../../pb_currency/currency';

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

@@ -1,26 +1,25 @@
-import React from 'react';
-import PropTypes from "prop-types";
-import classnames from 'classnames';
-import { map } from 'lodash';
-import Image from "../pb_image/_image.jsx";
-
-const propTypes = {
-  className: PropTypes.string,
-  name: PropTypes.string,
-  size: PropTypes.string,
-  url: PropTypes.string
-};
-
-const defaultProps = {
-  name: null,
-  size: "base"
-};
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+
+import classnames from 'classnames'
+import { map } from 'lodash'
+import Image from "../pb_image/_image.jsx"
+
+type AvatarProps = {
+  className?: String,
+  name: String,
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  status: 'online' | 'away',
+  url: String,
+}
 
 const initials = function(name) {
   if (name) {
     return map(name.split(/\s/), name => name[0]).join('').substring(0,2)
   }
-};
+}
 
 const image = function(url, name) {
   if (url) {
@@ -30,16 +29,28 @@ const image = function(url, name) {
       />
     )
   }
-};
+}
+
+const PbStatus = ({ size, status } : { size: String, status: String }) => (
+  <div className={`pb_online_status_kit_${status} size_${size}`}/>
+)
+
+class Avatar extends React.Component<AvatarProps> {
+  static defaultProps = {
+    name: null,
+    size: 'md'
+  }
+  
+  props: AvatarProps
 
-class Avatar extends React.Component {
   render() {
     const {
       className,
       name,
       size,
+      status,
       url
-    } = this.props;
+    } = this.props
 
     const css = classnames([
       `pb_avatar_kit`,
@@ -51,13 +62,19 @@ class Avatar extends React.Component {
       <div className={css}
           data-initials={initials(name)}
       >
-        {image(url, name)}
+        <div 
+            className="avatar_wrapper"
+            data-initials={initials(name)}
+        >
+          {image(url, name)}
+        </div>
+        <PbStatus 
+            size={size}
+            status={status}
+        />
       </div>
     )
   }
 }
 
-Avatar.propTypes = propTypes;
-Avatar.defaultProps = defaultProps;
-
-export default Avatar;
+export default Avatar

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

@@ -4,11 +4,40 @@ import Avatar from "../_avatar.jsx"
 function AvatarDefault() {
   return (
     <div>
-      <Avatar name="Terry Johnson" size="xs" url="https://randomuser.me/api/portraits/men/44.jpg" />
-      <Avatar name="Terry Johnson" size="sm" url="https://randomuser.me/api/portraits/men/44.jpg" />
-      <Avatar name="Terry Johnson" size="md" url="https://randomuser.me/api/portraits/men/44.jpg" />
-      <Avatar name="Terry Johnson" size="lg" url="https://randomuser.me/api/portraits/men/44.jpg" />
-      <Avatar name="Terry Johnson" size="xl" url="https://randomuser.me/api/portraits/men/44.jpg" />
+      <Avatar
+          name="Terry Johnson"
+          size="xs"
+          status="online"
+          url="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+      <br/>
+      <Avatar
+          name="Terry Johnson"
+          size="sm"
+          status="online"
+          url="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+      <br/>
+      <Avatar
+          name="Terry Johnson"
+          size="md"
+          status="away"
+          url="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+      <br/>
+      <Avatar
+          name="Terry Johnson"
+          size="lg"
+          status="offline"
+          url="https://randomuser.me/api/portraits/men/44.jpg"
+      />
+      <br/>
+      <Avatar
+          name="Terry Johnson"
+          size="xl"
+          status="offline"
+          url="https://randomuser.me/api/portraits/men/44.jpg"
+      />
     </div>
   )
 }

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

@@ -44,7 +44,7 @@ module Playbook
       end
 
       def yield(context:)
-        if !block.nil?
+        unless block.nil?
           pb_card_body = Playbook::PbCard::CardBody.new(padding: configured_padding) do
             context.capture(&block)
           end

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string
+};
+
+class Currency extends React.Component {
+  render() {
+    return (
+      <div className="pb_currency">
+        <span>{`CURRENCY CONTENT`}</span>
+      </div>
+    )
+  }
+}
+
+Currency.propTypes = propTypes;
+
+export default Currency;

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

@@ -0,0 +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*=_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*=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

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+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
+
+      def align
+        align_options = %w[left center right]
+        one_of_value(configured_align, align_options, "left")
+      end
+
+      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
+
+      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
+
+      def size
+        size_options = %w[lg sm]
+        one_of_value(configured_size, size_options, "sm")
+      end
+
+      def value_size
+        size == "lg" ? 1 : 2
+      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
+      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)
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_currency_kit",
+          align,
+        ]
+        kit_options.join("_")
+      end
+
+      def to_partial_path
+        "pb_currency/currency"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+import React from "react"
+import Currency from "../_currency.jsx"
+
+function CurrencyDefault() {
+  return (
+    <div>
+      <Currency />
+    </div>
+  )
+}
+
+export default CurrencyDefault;