playbook_ui 4.7.1 → 4.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c975f53e3323fae0b26b29d3dc05ecb4fad31ab18dd96962b78155d6a8858650
-  data.tar.gz: ca9a7e6d1100eb07446f449e5655b676429ccde07e69aea1082cca2ceb73ce8f
+  metadata.gz: 297a7d38b579cfb332aef7728a85f5e4e7351c0e281eec399ae42c37fcdd4f7c
+  data.tar.gz: aae66abcf5cd0b2bb9c58584ffc0772e05cff4ad7eedb3fbea6a7ac49190b8dd
 SHA512:
-  metadata.gz: 9469bc2ebd6a816e0168588759e660cb7fdfba4d57419ba6075a501d51777eb4f243e5d910eb2cb0dfd5b834534abce87028a9492ba643bb4a4be4cc8c932c5b
-  data.tar.gz: f5244bac194b78ac3a1c09e2e53adc1c7cf4ab2b346c5cae5ac763e8e39f6f75addc128f76d94f49ba91bc68ed6f8c0edcc4ae0e731f54810a5d7b842a415e72
+  metadata.gz: b472c19ce31bf2570e6742e8b2c41273eb12ee3dfe56335c8fc8890f444f099a1531717f1dc0d026fb9ba8dc3b2911b5248b7d48ff4025034393160010f51fa2
+  data.tar.gz: 98c226e6ae243cdca648d844b13ab401c4b82c2702fe0e63b5d27e9e4b7be2821dd869a773f6808d4d3ba89bcf8085f6670529b36eaa75ae7b38979376000692

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

@@ -6,6 +6,9 @@ import { pbChart } from '../'
 
 type BarGraphProps = {
   axisTitle: String,
+  xAxisCategories: Array,
+  yAxisMin: Number,
+  yAxisMax: Number,
   chartData: Array<{
     name: String,
     data: Array<Number>,
@@ -27,6 +30,9 @@ export default class BarGraph extends React.Component<BarGraphProps> {
   componentDidMount() {
     const {
       axisTitle,
+      xAxisCategories,
+      yAxisMin,
+      yAxisMax,
       className,
       chartData,
       id,
@@ -44,6 +50,9 @@ export default class BarGraph extends React.Component<BarGraphProps> {
       subtitle: subTitle,
       type,
       title: title,
+      xAxisCategories: xAxisCategories,
+      yAxisMin: yAxisMin,
+      yAxisMax: yAxisMax,
     })
   }
 

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -15,6 +15,11 @@ module Playbook
       prop :point_start, type: Playbook::Props::Numeric
       prop :subtitle
       prop :title
+      prop :x_axis_categories, type: Playbook::Props::Array,
+                                default:[]
+      prop :y_axis_min, type: Playbook::Props::Numeric
+      prop :y_axis_max, type: Playbook::Props::Numeric
+
 
       def chart_type
         orientation == "horizontal" ? "bar" : "column"
@@ -29,6 +34,9 @@ module Playbook
           subtitle: subtitle,
           axisTitle: axis_title,
           pointStart: point_start,
+          xAxisCategories: x_axis_categories,
+          yAxisMin: y_axis_min,
+          yAxisMax: y_axis_max,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb

@@ -1,25 +1,26 @@
 <% data = [{
     name: 'Installation',
-    data: [154175]
+    data: [1475,200,3000,654,656]
 }, {
     name: 'Manufacturing',
-    data: [40434]
+    data: [4434,524,2320,440,500]
 }, {
     name: 'Sales & Distribution',
-    data: [39387]
+    data: [3387,743,1344,434,440,]
 }, {
     name: 'Project Development',
-    data: [34227]
+    data: [3227,878,999,780,1000]
 }, {
     name: 'Other',
-    data: [18111]
+    data: [1111,677,3245,500,200]
 }] %>
 
 <%= pb_rails("bar_graph", props: {
     axis_title: 'Number of Employees',
     chart_data: data,
     id: "bar-test",
-    point_start: 2012,
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
     subtitle: 'Source: thesolarfoundation.com',
     title: 'Solar Employment Growth by Sector, 2010-2016'
 }) %>

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

@@ -3,19 +3,19 @@ import { BarGraph } from '../../'
 
 const chartData = [{
   name: 'Installation',
-  data: [154175],
+  data: [1475, 200, 3000, 654, 656],
 }, {
   name: 'Manufacturing',
-  data: [40434],
+  data: [4434, 524, 2320, 440, 500],
 }, {
   name: 'Sales & Distribution',
-  data: [39387],
+  data: [3387, 743, 1344, 434, 440],
 }, {
   name: 'Project Development',
-  data: [34227],
+  data: [3227, 878, 999, 780, 1000],
 }, {
   name: 'Other',
-  data: [18111],
+  data: [1111, 677, 3245, 500, 200],
 }]
 
 const BarGraphDefault = () => (
@@ -24,9 +24,10 @@ const BarGraphDefault = () => (
         axisTitle="Number of Employees"
         chartData={chartData}
         id="bar-test"
-        pointStart={2012}
         subTitle="Source: thesolarfoundation.com"
         title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
     />
   </div>
 )

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

@@ -11,7 +11,8 @@
     <%= pb_rails("body", props: {
       text: object.units_element,
       color: "light",
-      classname: "unit"
+      classname: "unit",
+      dark: object.dark
     }) %>
   </div>
 <% end %>

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

@@ -11,13 +11,15 @@ type CurrencyProps = {
   unit: string,
   className?: string,
   label?: string,
-  size?: 'sm' | 'lg',
+  size?: 'sm' | 'md' | 'lg',
   symbol?: string,
+  dark?: boolean,
 }
 
 const sizes = {
   lg: 1,
-  sm: 2,
+  md: 3,
+  sm: 4,
 }
 
 const Currency = ({
@@ -28,23 +30,27 @@ const Currency = ({
   label = '',
   size = 'sm',
   symbol = '$',
+  dark = false,
 }: CurrencyProps) => {
   const [whole, decimal = '00'] = amount.split('.')
 
   return (
-    <div className={buildCss('pb_currency_kit', align, className)}>
+    <div className={buildCss('pb_currency_kit', align, className, { dark: dark }, size)}>
       <Caption>{label}</Caption>
 
       <div className="pb_currency_wrapper">
         <Body
             className="dollar_sign"
             color="light"
+            dark={dark}
+
         >
           {symbol}
         </Body>
 
         <Title
             className="pb_currency_value"
+            dark={dark}
             size={sizes[size]}
         >
           {`${whole}`}
@@ -53,6 +59,8 @@ const Currency = ({
         <Body
             className="unit"
             color="light"
+            dark={dark}
+
         >
           <If condition={unit}>
             {unit}

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

@@ -11,7 +11,7 @@
     }
   }
 
-  &[class*=_right]  {
+  &[class*=_right] {
     & > [class^=pb_caption],
     & > [class^=pb_title],
     & > [class^=pb_body] {
@@ -21,20 +21,34 @@
       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*=dollar_sign] {
-    display: flex;
-    align-items: flex-start;
+  &[class*=_lg] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
+    line-height: .9;
+    padding-left: $space_xs - 7px;
+    padding-right: $space_xs - 7px;
   }
-  & > [class*=unit] {
-    display: flex;
-    align-items: flex-end;
+
+  &[class*=_md] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
+    line-height: 1.2;
+    padding-left: $space_xs - 7px;
+    padding-right: $space_xs - 7px;
   }
-  & > [class*=pb_currency_value] {
-    line-height: .9;
+  
+  &[class*=_sm] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
+    line-height: 1.4;
+    padding-left: $space_xs - 7px;
+    padding-right: $space_xs - 7px;
   }
 }

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

@@ -13,8 +13,8 @@ module Playbook
                    default: "left"
 
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[lg sm],
-                  default: "sm"
+                  values: %w[lg md sm],
+                  default: "md"
 
       prop :label, type: Playbook::Props::String,
                    default: ""
@@ -28,14 +28,18 @@ module Playbook
       prop :unit, type: Playbook::Props::String,
                   required: false
 
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
       def classname
-        generate_classname("pb_currency_kit", align)
+        generate_classname("pb_currency_kit", align, size, dark_class)
       end
 
       def currency_symbol_element
         pb_dollar_sign = Playbook::PbBody::Body.new(
           classname: "dollar_sign",
-          color: "light"
+          color: "light",
+          dark: dark
         ) { symbol }
 
         ApplicationController.renderer.render(
@@ -58,7 +62,8 @@ module Playbook
         pb_title = Playbook::PbTitle::Title.new(
           size: size_value,
           text: whole_part.first.to_s,
-          classname: "pb_currency_value"
+          classname: "pb_currency_value",
+          dark: dark
         )
 
         ApplicationController.renderer.render(
@@ -79,7 +84,18 @@ module Playbook
     private
 
       def size_value
-        size == "lg" ? 1 : 2
+        case size
+        when "lg"
+          1
+        when "md"
+          3
+        else
+          4
+        end
+      end
+
+      def dark_class
+        dark ? "dark" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_currency/docs/_currency_dark.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("currency", props: {
+  amount: "2,000.50",
+  size: "lg",
+  dark: true
+}) %>
+
+<%= pb_rails("currency", props: {
+  align: "center",
+  amount: "342",
+  label: "Caption",
+  size: "md",
+  symbol: "€",
+  dark: true
+}) %>
+
+<%= pb_rails("currency", props: {
+  align: "right",
+  amount: "45",
+  label: "Caption",
+  unit: "/mo",
+  size: "sm",
+  dark: true
+}) %>

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

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Currency } from '../../'
+
+const CurrencyDark = () => {
+  return (
+    <div>
+      <Currency
+          amount="2,000.50"
+          dark
+          label="Caption"
+          size="lg"
+      />
+      <Currency
+          align="center"
+          amount="342"
+          dark
+          label="Caption"
+          size="md"
+          symbol="€"
+      />
+      <Currency
+          align="right"
+          amount="45"
+          dark
+          label="Caption"
+          size="sm"
+          unit="/mo"
+      />
+    </div>
+  )
+}
+
+export default CurrencyDark

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Currency } from '../../'
 
-const CurrencyDefault = () => {
+const CurrencyLarge = () => {
   return (
     <div>
       <Currency
@@ -27,4 +27,4 @@ const CurrencyDefault = () => {
   )
 }
 
-export default CurrencyDefault
+export default CurrencyLarge

data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("currency", props: {
+  label: "Caption",
+  amount: "2,000.50",
+  size: "md",
+}) %>
+
+<%= pb_rails("currency", props: {
+  align: "center",
+  amount: "342",
+  label: "Caption",
+  size: "md",
+  symbol: "€",
+}) %>
+
+<%= pb_rails("currency", props: {
+  align: "right",
+  amount: "45",
+  label: "Caption",
+  unit: "/mo",
+  size: "md",
+}) %>

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Currency } from '../../'
+
+const CurrencyMedium = () => {
+  return (
+    <div>
+      <Currency
+          amount="2,000.50"
+          label="Caption"
+          size="md"
+      />
+      <Currency
+          align="center"
+          amount="342"
+          label="Caption"
+          size="md"
+          symbol="€"
+      />
+      <Currency
+          align="right"
+          amount="45"
+          label="Caption"
+          size="md"
+          unit="/mo"
+      />
+    </div>
+  )
+}
+
+export default CurrencyMedium