playbook_ui 5.2.0.pre.alpha3 → 5.3.0.pre.alpha1

data/app/pb_kits/playbook/pb_badge/_badge.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -2,26 +2,37 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
 type BadgeProps = {
+  aria?: object,
   className?: String,
   dark?: Boolean,
+  data?: object,
   id?: String,
-  text?: String,
-  variant?: "success" | "warning" | "error" | "info" | "neutral",
   rounded?: Boolean,
+  text?: String,
+  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
 const Badge = (props: BadgeProps) => {
   const {
+    aria = {},
     className,
     dark = false,
+    data = {},
     id,
+    rounded = false,
     text,
     variant = 'neutral',
-    rounded = false,
   } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const css = classnames(
     className,
     buildCss('pb_badge_kit', variant, {
@@ -33,6 +44,8 @@ const Badge = (props: BadgeProps) => {
 
   return (
     <div
+        {...ariaProps}
+        {...dataProps}
         className={css}
         id={id}
     >

data/app/pb_kits/playbook/pb_card/_card.jsx

@@ -16,6 +16,7 @@ type CardPropTypes = {
   selected?: Boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
   dark?: Boolean,
+  borderNone?: Boolean,
 }
 
 type CardHeaderProps = {
@@ -62,9 +63,11 @@ const Card = (props: CardPropTypes) => {
     highlight = {},
     selected = false,
     shadow = 'none',
+    borderNone = false,
   } = props
   const bodyCSS = buildCss('pb_card_body_kit')
-  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, {
+  const borderCSS = borderNone == true ? 'border_none' : ''
+  const cardCss = buildCss('pb_card_kit', `shadow_${shadow}`, `${borderCSS}`, {
     dark: dark,
     selected,
     deselected: !selected,

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -16,6 +16,10 @@
     }
   }
 
+  &[class*=_border_none] {
+    border-width: 0px;
+  }
+
   [class^=pb_card_header_kit] {
     flex-grow: 0;
     flex-shrink: 0;

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

@@ -15,6 +15,8 @@ module Playbook
                        default: {}
       prop :dark, type: Playbook::Props::Boolean,
                  default: false
+      prop :border_none, type: Playbook::Props::Boolean,
+                         default: false
 
       def classname
         generate_classname("pb_card_kit",
@@ -22,7 +24,8 @@ module Playbook
                            shadow_class,
                            highlight_position_class,
                            highlight_color_class,
-                           dark_class)
+                           dark_class,
+                           border_class)
       end
 
       def body_padding
@@ -55,6 +58,10 @@ module Playbook
       def dark_class
         dark ? "dark" : nil
       end
+
+      def border_class
+        border_none == true ? "border_none" : nil
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb

@@ -0,0 +1,7 @@
+<div class="bg-light-doc-example">
+
+    <%= pb_rails("card", props: { border_none: true })  do %>
+        Card content
+    <% end %>
+    
+</div>

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Card from '../_card.jsx'
+
+const CardBorderNone = () => {
+  return (
+    <div className="bg-light-doc-example">
+
+      <Card borderNone>{'Card content'}</Card>
+
+    </div>
+  )
+}
+
+export default CardBorderNone

data/app/pb_kits/playbook/pb_card/docs/_card_border_none.md

@@ -0,0 +1 @@
+Remove card border <b>only</b> for dashboard cards.

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

@@ -9,6 +9,7 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border
   react:
   - card_light: Default
   - card_dark: Dark Cards
@@ -19,3 +20,4 @@ examples:
   - card_shadow: Shadow Size
   - card_content: Content Size
   - card_separator: Separator Card
+  - card_border_none: No Border

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

@@ -7,3 +7,4 @@ export { default as CardShadow } from './_card_shadow.jsx'
 export { default as CardContent } from './_card_content.jsx'
 export { default as CardSeparator } from './_card_separator.jsx'
 export { default as CardDark } from './_card_dark.jsx'
+export { default as CardBorderNone } from './_card_border_none.jsx'

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

@@ -124,6 +124,13 @@ const highchartsTheme = {
       fontSize: typography.text_smaller,
     },
   },
+  // specific to gauge
+  // unfilled gauge color
+  pane: {
+    background: {
+      borderColor: colors.border_light,
+    },
+  },
 
   plotOptions: {
     series: {
@@ -144,6 +151,25 @@ const highchartsTheme = {
       threshold: null,
     },
 
+    // GAUGE STYLES
+    solidgauge: {
+      borderColor: colors.primary,
+      borderWidth: 20,
+      radius: 90,
+      innerRadius: '90%',
+      dataLabels: {
+        borderWidth: 0,
+        color: colors.text_lt_default,
+        enabled: true,
+        style: {
+          fontFamily: typography.font_family_base,
+          fontWeight: typography.regular,
+          fontSize: typography.heading_2,
+        },
+        y: -26,
+      },
+    },
+
     // PIE STYLES
     pie: {
       colors: [

data/app/pb_kits/playbook/pb_filter/docs/_description.md

@@ -0,0 +1,3 @@
+**Note**
+This kit can be implemented in a variety of ways.
+To see examples of how to implement this kit in production visit the **/dev_docs/search** page in production.

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -7,7 +7,7 @@
 <% end %>
 
 <% if object.template != "sort_only"%>
-  <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom', padding: 'none'}) do %>
+  <%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
     <%= capture(&object.children) %>
   <% end %>
 <%end%>

data/app/pb_kits/playbook/pb_gauge/_gauge.html.erb

@@ -0,0 +1,12 @@
+<%= content_tag(:div, "",
+    id: object.id,
+    data: object.data,
+    class: object.classname) %>
+<% content_for :pb_js do %>
+  <%= javascript_tag do %>
+    window.addEventListener('DOMContentLoaded', function() {
+      new pbChart('.selector', <%= object.chart_options %>)
+    })
+  <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx

@@ -0,0 +1,105 @@
+/* @flow */
+
+import React, { useEffect, useRef } from 'react'
+import { pbChart } from '../'
+import { spacing } from '../utilities/spacing.js'
+import classnames from 'classnames'
+import Highcharts from 'highcharts'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type GaugeProps = {
+  aria: Object,
+  className?: String,
+  chartData?: Array,
+  data?: Object,
+  fullCircle: Boolean,
+  height: String,
+  id?: String,
+  max: Number,
+  min: Number,
+  prefix: String,
+  showLabels: Boolean,
+  style: String,
+  suffix: String,
+  title: String,
+  tooltipHtml: String,
+}
+
+const Gauge = (props: GaugeProps) => {
+  const {
+    aria = {},
+    className,
+    chartData = [{ name: 'Name', value: 0 }],
+    data = {},
+    fullCircle = false,
+    height = null,
+    id,
+    max = 100,
+    min = 0,
+    prefix = '',
+    showLabels = false,
+    style = 'solidgauge',
+    suffix = '',
+    title = '',
+    tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + '<b>{point.y}</b>',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const css = buildCss({
+    'pb_gauge_kit': true,
+  })
+  // Runs first time component Renders
+  useEffect(() => {
+    chartData.forEach((obj) => {
+      obj.y = obj.value
+      delete obj.value
+    })
+
+    new pbChart('.selector', {
+      id: id,
+      chartData: chartData,
+      circumference: fullCircle ? [0, 360] : [-100, 100],
+      height: height,
+      min: min,
+      max: max,
+      prefix: prefix,
+      title: title,
+      suffix: suffix,
+      showLabels: showLabels,
+      style: style,
+      tooltipHtml: tooltipHtml,
+      type: 'gauge',
+    })
+  }, [])
+
+  const componentDidMount = useRef(false)
+  // Doesn't run the first time but runs every subsequent render
+  useEffect(() => {
+    if (componentDidMount.current) {
+      Highcharts.charts.forEach((chart) => {
+        if (chart.renderTo.id === id) {
+          chart.series[0].setData([chartData[0].value])
+        }
+      })
+    } else {
+      componentDidMount.current = true
+    }
+  })
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className, spacing(props))}
+        id={id}
+    />
+  )
+}
+
+export default Gauge

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -0,0 +1,11 @@
+[class^=pb_gauge_kit] {
+
+  .suffix {
+    fill: $text_lt_light;
+    font: $regular $font_larger $font_family_base;
+  }
+  .prefix {
+    fill: $text_lt_light;
+    font: $regular $font_base $font_family_base;
+  }
+}

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

@@ -0,0 +1,11 @@
+<% data = [
+  {
+    name: 'Name',
+    value: 45,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-default",
+  chart_data: data,
+}) %>

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Point1', value: 45 },
+]
+
+const GaugeDefault = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        id="gauge-default"
+    />
+  </div>
+)
+
+export default GaugeDefault

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

@@ -0,0 +1,14 @@
+<% data = [
+  {
+    name: 'Capacity',
+    value: 75,
+  }
+]%>
+
+<%= pb_rails("gauge", props: {
+  id: "full-circle",
+  chart_data: data,
+  full_circle: true,
+  title: "Seating Capacity",
+  suffix: "%"
+}) %>

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const data = [
+  { name: 'Capacity', value: 75 },
+]
+
+const GaugeFullCircle = () => (
+  <div>
+    <Gauge
+        chartData={data}
+        fullCircle
+        id="gauge-full-circle"
+        suffix="%"
+        title="Seating Capacity"
+    />
+  </div>
+)
+
+export default GaugeFullCircle

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

@@ -0,0 +1,15 @@
+<%= pb_rails("gauge", props: {
+  id: "gauge-height-px",
+  chart_data: [{ name: "Pixel Height", value: 400 }],
+  height: '400',
+  title: "Fixed Height in Pixels",
+  suffix: "px"
+}) %>
+
+<%= pb_rails("gauge", props: {
+  id: "gauge-height-percent",
+  chart_data: [{ name: "Percentage Height", value: 45 }],
+  height: '45%',
+  title: "Height as Percentage of Width",
+  suffix: "%"
+}) %>

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Gauge } from '../../'
+
+const GaugeHeight = () => (
+  <div>
+    <Gauge
+        chartData={[ { name: 'Name', value: 400 } ]}
+        height="400"
+        id="gauge-height-px"
+        suffix="px"
+        title="Fixed Height in Pixels"
+    />
+    <Gauge
+        chartData={[ { name: 'Name', value: 45 } ]}
+        height="45%"
+        id="gauge-height-percent"
+        suffix="%"
+        title="Height as Percentage of Width"
+    />
+  </div>
+)
+
+export default GaugeHeight