playbook_ui 4.15.1.alpha1 → 4.18.1

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

@@ -35,41 +35,36 @@ module Playbook
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
 
-      def currency_symbol_element
-        pb_dollar_sign = Playbook::PbBody::Body.new(
+      def currency_wrapper_props
+        {
           classname: "dollar_sign",
           color: "light",
-          dark: dark
-        ) { symbol }
-
-        ApplicationController.renderer.render(
-          partial: pb_dollar_sign,
-          as: :object
-        )
+          dark: dark,
+        }
       end
 
-      def label_element
-        pb_label = Playbook::PbCaption::Caption.new(text: label)
+      def title_props
+        {
+          size: size_value,
+          text: whole_value,
+          classname: "pb_currency_value",
+          dark: dark,
+        }
+      end
 
-        ApplicationController.renderer.render(
-          partial: pb_label,
-          as: :object
-        )
+      def body_props
+        {
+          text: units_element,
+          color: "light",
+          classname: "unit",
+          dark: dark,
+        }
       end
 
-      def amount_element
-        whole_part = amount.split(".")
-        pb_title = Playbook::PbTitle::Title.new(
-          size: size_value,
-          text: whole_part.first.to_s,
-          classname: "pb_currency_value",
-          dark: dark
-        )
+    private
 
-        ApplicationController.renderer.render(
-          partial: pb_title,
-          as: :object
-        )
+      def whole_value
+        amount.split(".").first.to_s
       end
 
       def units_element
@@ -81,8 +76,6 @@ module Playbook
         end
       end
 
-    private
-
       def size_value
         case size
         when "lg"

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

@@ -1,7 +1,7 @@
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
   size: "lg",
-  dark: true
+  dark: true,
 }) %>
 
 <%= pb_rails("currency", props: {
@@ -10,7 +10,7 @@
   label: "Caption",
   size: "md",
   symbol: "€",
-  dark: true
+  dark: true,
 }) %>
 
 <%= pb_rails("currency", props: {
@@ -19,5 +19,5 @@
   label: "Caption",
   unit: "/mo",
   size: "sm",
-  dark: true
+  dark: true,
 }) %>

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

@@ -3,11 +3,10 @@ import { Currency } from '../../'
 
 const CurrencyDark = () => {
   return (
-    <div>
+    <>
       <Currency
           amount="2,000.50"
           dark
-          label="Caption"
           size="lg"
       />
       <Currency
@@ -26,7 +25,7 @@ const CurrencyDark = () => {
           size="sm"
           unit="/mo"
       />
-    </div>
+    </>
   )
 }
 

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

@@ -3,10 +3,9 @@ import { Currency } from '../../'
 
 const CurrencyLarge = () => {
   return (
-    <div>
+    <>
       <Currency
           amount="2,000.50"
-          label="Caption"
           size="lg"
       />
       <Currency
@@ -23,7 +22,7 @@ const CurrencyLarge = () => {
           size="lg"
           unit="/mo"
       />
-    </div>
+    </>
   )
 }
 

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

@@ -3,7 +3,7 @@ import { Currency } from '../../'
 
 const CurrencyMedium = () => {
   return (
-    <div>
+    <>
       <Currency
           amount="2,000.50"
           label="Caption"
@@ -23,7 +23,7 @@ const CurrencyMedium = () => {
           size="md"
           unit="/mo"
       />
-    </div>
+    </>
   )
 }
 

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

@@ -1,7 +1,7 @@
 <%= pb_rails("currency", props: {
   label: "Caption",
   amount: "2,000.50",
-  size: "sm",  
+  size: "sm",
 }) %>
 
 <%= pb_rails("currency", props: {

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

@@ -3,24 +3,27 @@ import { Currency } from '../../'
 
 const CurrencySmall = () => {
   return (
-    <div>
+    <>
       <Currency
           amount="2,000.50"
           label="Caption"
+          size="sm"
       />
       <Currency
           align="center"
           amount="342"
           label="Caption"
+          size="sm"
           symbol="€"
       />
       <Currency
           align="right"
           amount="45"
           label="Caption"
+          size="sm"
           unit="/mo"
       />
-    </div>
+    </>
   )
 }
 

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

@@ -4,6 +4,9 @@ import typography from '../tokens/_typography.scss'
 import Highcharts from 'highcharts'
 
 const highchartsTheme = {
+  lang: {
+    thousandsSep: ',',
+  },
   colors: [
     colors.data_1,
     colors.data_2,
@@ -19,7 +22,6 @@ const highchartsTheme = {
     plotBackgroundColor: null,
     plotShadow: false,
     plotBorderWidth: 0,
-
   },
   title: {
     style: {
@@ -141,6 +143,29 @@ const highchartsTheme = {
       },
       threshold: null,
     },
+
+    // PIE STYLES
+    pie: {
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+      ],
+      dataLabels: {
+        style: {
+          fontFamily: typography.font_family_base,
+          fontSize: typography.text_smaller,
+          color: colors.text_lt_light,
+          fontWeight: typography.regular,
+        },
+      },
+    },
+
+    // LINE CHART STYLES
     line: {
       dataLabels: {
         color: '#CCC',

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

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
+import { spacing } from '../utilities/spacing.js'
 import {
   Body,
   StatChange,
@@ -44,7 +44,7 @@ const DashboardValue = (props: DashboardValueProps) => {
 
   return (
     <div
-        className={classnames(dashboardValueCSS(props), className)}
+        className={classnames(dashboardValueCSS(props), className, spacing(props))}
         id={id}
     >
       <If condition={statLabel}>

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -3,6 +3,8 @@
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
 import { Icon } from '../'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 const defaultDateString = (value: DateTime) => {
   const weekday = value.toWeekday().toUpperCase()
@@ -20,15 +22,17 @@ const largeDateString = (value: DateTime) => {
 }
 
 type DateSubcomponent = {
-  value: DateTime
+  value: DateTime,
 }
 
-const ExtraSmallDate = ({ value }: DateSubcomponent) => (
-  <h3 className="pb_title_kit_4">{defaultDateString(value)}</h3>
+const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_4', spacing(props))}>
+    {defaultDateString(value)}
+  </h3>
 )
 
-const SmallDate = ({ value }: DateSubcomponent) => (
-  <h3 className="pb_title_kit_4">
+const SmallDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_4', spacing(props))}>
     <Icon
         fixedWidth
         icon="calendar"
@@ -37,24 +41,44 @@ const SmallDate = ({ value }: DateSubcomponent) => (
   </h3>
 )
 
-const LargeDate = ({ value }: DateSubcomponent) => (
-  <h3 className="pb_title_kit_3">{largeDateString(value)}</h3>
+const LargeDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_3', spacing(props))}>
+    {largeDateString(value)}
+  </h3>
 )
 
 type PbDateProps = {
-  size?: 'xs' | 'sm' | 'lg',
+  size?: "xs" | "sm" | "lg",
   value?: String,
+  className?: String
 }
 
-const PbDate = ({
-  size,
-  value,
-}: PbDateProps) => {
+const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
   const date = new DateTime({ value: value })
 
-  if (size == 'xs') return <ExtraSmallDate value={date} />
-  if (size == 'lg') return <LargeDate value={date} />
-  return <SmallDate value={date} />
+  if (size == 'xs')
+    return (
+      <ExtraSmallDate
+          {...props}
+          className={className}
+          value={date}
+      />
+    )
+  if (size == 'lg')
+    return (
+      <LargeDate
+          {...props}
+          className={className}
+          value={date}
+      />
+    )
+  return (
+    <SmallDate
+        {...props}
+        className={className}
+        value={date}
+    />
+  )
 }
 
 export default PbDate

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

@@ -11,7 +11,9 @@ const DateDefault = () => {
 
       <br />
 
-      <Date value="17 Mar 69" />
+      <Date
+          value="17 Mar 69"
+      />
 
       <br />
 

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -2,18 +2,16 @@
 
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-
-import {
-  Body,
-  Icon,
-} from '../'
+import { Body, Icon } from '../'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type DateRangeInlineProps = {
   className?: String,
   data?: String,
   endDate?: Date,
   id?: String,
-  startDate?: Date
+  startDate?: Date,
 }
 
 const dateTimestamp = (dateValue) => {
@@ -26,36 +24,44 @@ const dateTimeIso = (dateValue) => {
   return date.toIso()
 }
 
-const DateRangeInline = ({
-  endDate,
-  startDate,
-}: DateRangeInlineProps) => (
-  <div>
-    <Body
-        color="light"
-        tag="span"
-    >
-      <Icon
-          fixedWidth
-          icon="calendar-alt"
-      />
-    </Body>
-    <Body tag="span">
-      <time dateTime={dateTimeIso(startDate)}>{` ${dateTimestamp(startDate)} `}</time>
-    </Body>
-    <Body
-        color="light"
-        tag="span"
-    >
-      <Icon
-          fixedWidth
-          icon="long-arrow-right"
-      />
-    </Body>
-    <Body tag="span">
-      <time dateTime={dateTimeIso(endDate)}>{` ${dateTimestamp(endDate)} `}</time>
-    </Body>
-  </div>
-)
+const DateRangeInline = (props: DateRangeInlineProps) => {
+  const { endDate, startDate } = props
+  return (
+    <div className={classnames('pb_date_range_inline', spacing(props))}>
+      <Body
+          color="light"
+          tag="span"
+      >
+        <Icon
+            fixedWidth
+            icon="calendar-alt"
+        />
+      </Body>
+      <Body tag="span">
+        <time dateTime={dateTimeIso(startDate)}>
+          {` ${dateTimestamp(
+          startDate
+        )} `}
+        </time>
+      </Body>
+      <Body
+          color="light"
+          tag="span"
+      >
+        <Icon
+            fixedWidth
+            icon="long-arrow-right"
+        />
+      </Body>
+      <Body tag="span">
+        <time dateTime={dateTimeIso(endDate)}>
+          {` ${dateTimestamp(
+          endDate
+        )} `}
+        </time>
+      </Body>
+    </div>
+  )
+}
 
 export default DateRangeInline