playbook_ui 6.0.1.pre.alpha4 → 6.1.0.pre.alpha2

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Flex, FlexItem, Gauge } from '../../'
+
+const GaugeSizing = () => (
+  <div>
+    <Flex
+        wrap
+    >
+      <FlexItem fixedSize="400px">
+        <Gauge
+            chartData={[ { name: 'Point 1', value: 100 } ]}
+            id="gauge-sizing4"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="300px">
+        <Gauge
+            chartData={[ { name: 'Point 2', value: 75 } ]}
+            id="gauge-sizing3"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="200px">
+        <Gauge
+            chartData={[ { name: 'Point 3', value: 50 } ]}
+            id="gauge-sizing2"
+        />
+      </FlexItem>
+      <FlexItem fixedSize="125px">
+        <Gauge
+            chartData={[ { name: 'Point 4', value: 25 } ]}
+            id="gauge-sizing1"
+        />
+      </FlexItem>
+    </Flex>
+  </div>
+)
+
+export default GaugeSizing

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md

@@ -0,0 +1 @@
+### Gauge resizes dynamically to fit whatever element it's placed within.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb

@@ -0,0 +1,14 @@
+<% data = [
+  {
+    name: 'Score',
+    value: 780,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-title",
+  chart_data: data,
+  min: 300,
+  max: 850,
+  title: "Credit Score",
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Score', value: 780 },
+]
+
+const GaugeTitle = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-title"
+        max={850}
+        min={300}
+        title="Credit Score"
+    />
+  </div>
+)
+
+export default GaugeTitle

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb

@@ -0,0 +1,29 @@
+<% data1 = [
+  {
+    name: 'Data Used',
+    value: 32,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-units1",
+  chart_data: data1,
+  title: "Data Usage",
+  suffix: "GB"
+}) %>
+
+<% data2 = [
+  {
+    name: 'Sales to Date',
+    value: 65,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-units2",
+  chart_data: data2,
+  title: "Sales Goal",
+  prefix: "$",
+  suffix: "k",
+
+}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data1 = [
+  { name: 'Data Used', value: 32 },
+]
+const data2 = [
+  { name: 'Sales to Date', value: 65 },
+]
+
+const GaugeUnits = () => (
+  <div>
+    <Gauge
+        chartData={data1}
+        id="gauge-units1"
+        suffix="GB"
+        title="Data Usage"
+    />
+    <Gauge
+        chartData={data2}
+        id="gauge-units2"
+        prefix="$"
+        suffix="k"
+        title="Sales Goal"
+    />
+  </div>
+)
+
+export default GaugeUnits

data/app/pb_kits/playbook/pb_gauge/docs/example.yml

@@ -0,0 +1,24 @@
+examples:
+  
+  rails:
+  - gauge_default: Default
+  - gauge_disable_animation: Disable Animation
+  - gauge_title: Title
+  - gauge_units: Units
+  - gauge_full_circle: Full Circle
+  - gauge_min_max: Min Max Labels
+  - gauge_sizing: Sizing
+  - gauge_height: Height
+  
+  
+  react:
+  - gauge_default: Default
+  - gauge_disable_animation: Disable Animation
+  - gauge_title: Title 
+  - gauge_units: Units
+  - gauge_full_circle: Full Circle
+  - gauge_min_max: Min Max Labels
+  - gauge_sizing: Sizing
+  - gauge_height: Height
+  - gauge_live_data: Live Data
+  

data/app/pb_kits/playbook/pb_gauge/docs/index.js

@@ -0,0 +1,9 @@
+export { default as GaugeDefault } from './_gauge_default.jsx'
+export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
+export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
+export { default as GaugeHeight } from './_gauge_height.jsx'
+export { default as GaugeMinMax } from './_gauge_min_max.jsx'
+export { default as GaugeSizing } from './_gauge_sizing.jsx'
+export { default as GaugeTitle } from './_gauge_title.jsx'
+export { default as GaugeUnits } from './_gauge_units.jsx'
+export { default as GaugeLiveData } from './_gauge_live_data.jsx'

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbGauge
+    class Gauge
+      include Playbook::Props
+
+      partial "pb_gauge/gauge"
+
+      prop :chart_data, type: Playbook::Props::Array,
+                        default: [{ name: "Name", value: 0 }]
+      prop :style, type: Playbook::Props::Enum,
+                   values: %w[solidgauge],
+                   default: "solidgauge"
+      prop :title, type: Playbook::Props::String, default: ""
+      prop :prefix, type: Playbook::Props::String, default: ""
+      prop :suffix, type: Playbook::Props::String, default: ""
+      prop :height, type: Playbook::Props::String, default: nil
+      prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
+                                      {point.name}: ' + '<b>{point.y}
+                                    </b>'
+      prop :full_circle, type: Playbook::Props::Boolean, default: false
+      prop :show_labels, type: Playbook::Props::Boolean, default: false
+      prop :disable_animation, type: Playbook::Props::Boolean, default: false
+      prop :min, type: Playbook::Props::Numeric, default: 0
+      prop :max, type: Playbook::Props::Numeric, default: 100
+
+      def chart_data_formatted
+        chart_data.map { |hash| hash[:y] = hash.delete :value }
+        chart_data
+      end
+
+      def chart_options
+        {
+          id: id,
+          chartData: chart_data_formatted,
+          circumference: full_circle ? [0, 360] : [-100, 100],
+          disableAnimation: disable_animation,
+          height: height,
+          min: min,
+          max: max,
+          title: title,
+          suffix: suffix,
+          prefix: prefix,
+          showLabels: show_labels,
+          style: style,
+          tooltipHtml: tooltip_html,
+          type: "gauge",
+        }.to_json.html_safe
+      end
+
+      def classname
+        generate_classname("pb_gauge_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { Badge } from '../'
 import { buildCss } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type HashtagProps = {
   className?: String,
@@ -32,7 +32,7 @@ const Hashtag = (props: HashtagProps) => {
         className={classnames(
         className,
         buildCss('pb_hashtag_kit', { dark: dark }),
-        spacing(props)
+        globalProps(props)
       )}
     >
       <a href={url}>

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -3,7 +3,7 @@
 import Highlighter from 'react-highlight-words'
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type HighlightProps = {
   className?: String,
@@ -27,7 +27,7 @@ const Highlight = (props: HighlightProps) => {
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={classnames(className, spacing(props))}
+        highlightClassName={classnames(className, globalProps(props))}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 
 import { joinPresent, titleize } from '../utilities/text'
 import { Body, Hashtag, Title } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type HomeAddressStreetProps = {
   address: String,
@@ -45,7 +45,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
         'pb_home_address_street': !dark,
         'pb_home_address_street_dark': dark,
       },
-      spacing(props)
+      globalProps(props)
     )
   return (
     <div className={classes(className, dark)}>

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type IconProps = {
   aria?: Object,
@@ -72,7 +72,7 @@ const Icon = (props: IconProps) => {
       [`fa-pull-${pull}`]: pull,
       [`fa-rotate-${rotation}`]: rotation,
     },
-    spacing(props)
+    globalProps(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 
 import { Icon } from '../'
 import { buildCss } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type IconCircleProps = {
   className?: string,
@@ -27,7 +27,7 @@ const IconCircle = (props: IconCircleProps) => {
   const css = buildCss('pb_icon_circle_kit', size, variant)
 
   return (
-    <div className={classnames(className, css, spacing(props))}>
+    <div className={classnames(className, css, globalProps(props))}>
       <Icon icon={icon} />
     </div>
   )

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx

@@ -6,7 +6,7 @@ import { Body, Icon } from '../'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",
@@ -36,7 +36,7 @@ const IconValue = (props: IconValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(className, pbCss, spacing(props))}
+        className={classnames(className, pbCss, globalProps(props))}
         id={id}
     >
       <Body color="light">

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -2,8 +2,8 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
 
 type ImageProps = {
   alt?: String,
@@ -25,7 +25,7 @@ const Image = (props: ImageProps) => {
   } = props
 
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, spacing(props))
+  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, globalProps(props))
   const dataProps = buildDataProps(data)
 
   return (

data/app/pb_kits/playbook/pb_kit/dateTime.js

@@ -74,7 +74,11 @@ export default class DateTime {
   }
 
   toTime() {
-    return this.value.strftime('%I:%M')
+    const time = this.value.strftime('%I:%M')
+
+    // strftime adds a leading 0 on single hour times. ie 08:31.
+    // this removes that 0 to match the rails kit.
+    return time.charAt() === '0' ? time.slice(1) : time
   }
 
   toTimezone() {

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
@@ -30,7 +30,7 @@ const LabelPill = (props: LabelPillProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = classnames(['pb_label_pill_kit', className], spacing(props))
+  const css = classnames(['pb_label_pill_kit', className], globalProps(props))
 
   return (
     <div

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx

@@ -4,8 +4,8 @@ import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
 import { Body, Caption, Flex, Icon, Title } from '../'
-import { spacing } from '../utilities/spacing.js'
 
 type LabelValueProps = {
   aria?: object,
@@ -53,7 +53,7 @@ const LabelValue = (props: LabelValueProps) => {
   const themeStyle = dark === true ? '_dark' : ''
   const css = classnames(
     ['pb_label_value_kit' + themeStyle, className],
-    spacing(props)
+    globalProps(props)
   )
 
   return (

data/app/pb_kits/playbook/pb_layout/_layout.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 
 type LayoutPropTypes = {
   aria?: object,
@@ -46,7 +46,7 @@ type LayoutFooterProps = {
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', className, spacing(props))}>
+    <div className={classnames('layout_sidebar', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -56,7 +56,7 @@ const Side = (props: LayoutSideProps) => {
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_body', className, spacing(props))}>
+    <div className={classnames('layout_body', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -66,7 +66,7 @@ const Body = (props: LayoutBodyProps) => {
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_header', className, spacing(props))}>
+    <div className={classnames('layout_header', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -76,7 +76,7 @@ const Header = (props: LayoutHeaderProps) => {
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_footer', className, spacing(props))}>
+    <div className={classnames('layout_footer', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -148,7 +148,7 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
-        spacing(props)
+        globalProps(props)
       )}
     >
       {subComponentTags('Side')}