playbook_ui 7.0.1.pre.alpha10 → 7.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 564d38b6ee17565260aa12a23e6bd24ffe743ee1e76495ddb3fb6c70cce2ad52
-  data.tar.gz: 0fd88fa565499b96e2e71d8a6b04e3cc2b78f443360c1b966b3ae66a946239bf
+  metadata.gz: a2be1d3b6342ecceb4793c54fc1a73599d4fd10654f050dfb03f3add4bc47cfe
+  data.tar.gz: a7e28a3f8f6f51d3ad4eb4b317f25934de789758b69a8cae3487e9588ba2f477
 SHA512:
-  metadata.gz: 4b3421ce38f65500a9eb723786150dd104fd7971f8a6ea760250a97da387c2413e8b32ad98d1439535437b7503455810be7520b17b3f7f1237e6585da686f2cb
-  data.tar.gz: f9e4aa1f86a1d4d281a39619c353e9084a74dae22493f1b11b872e358fa19c15559b08d9ecacdf8ecba91927e493594546de96bb86925bb8bdb545abd36df578
+  metadata.gz: 5500e6d44e9b25328ea8083f76bade518d1fdef2ea08719b8d4294976a6abaaba54fa70f2979aa475efbd852cd17c32b29343b64d5c31de498072cc5975add16
+  data.tar.gz: ab284d720b728e47237108a52044786a161b1963d59b969ff5e4b0b1eeb419480ac86414b165bc9dea4afdae42d7e2414821cfcbba8366290ef3a4f04493f8cf

data/README.md

@@ -9,8 +9,7 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 ## Getting started
 
-1. Run `make install`
-1. Run `make start`
+1. Run `make it`
 1. Install overcommit hooks `bin/overcommit`
 1. open [http://localhost:8089](http://localhost:8089)
 
@@ -35,10 +34,9 @@ To run the tests, do `bin/test`. To launch a shell in the container run `make sh
 
 See [docs/upgrade-guide](./docs/upgrade-guide)
 
-### Nitro & Releases
+### Releases
 
-* [Integrating Playbook Kits into Nitro Components](https://github.com/powerhome/playbook/wiki/Integrating-Playbook-Kits-into-Nitro-Components)
-* [Creating Releases](https://github.com/powerhome/playbook/wiki/Releasing-a-New-Version)
+* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
 
 ### Development Environment
 
@@ -63,4 +61,4 @@ See [docs/upgrade-guide](./docs/upgrade-guide)
 5.  When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
 6.  Inside of your Playbook repository, run `yarn unlink`. 
 
-Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
+Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.

data/app/controllers/playbook/application_controller.rb

@@ -2,8 +2,6 @@
 
 module Playbook
   class ApplicationController < ActionController::Base
-    protect_from_forgery with: :exception
-   
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper
@@ -11,6 +9,5 @@ module Playbook
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
 
-  ENV["playbook"] = "true"
-    
+  
 end

data/app/helpers/playbook/pb_kit_helper.rb

@@ -22,7 +22,7 @@ module Playbook
 
   private
     def rails_props(props)
-      if cookies[:dark_mode].nil? && ENV["playbook"].nil?
+      if @playbook.nil?
         props
       else
         dark_mode_props(props)
@@ -30,7 +30,7 @@ module Playbook
     end  
 
     def react_props
-      if cookies[:dark_mode].nil? && ENV["playbook"].nil?
+      if @playbook.nil?
         false
       else
         dark_mode

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,4 @@
+@import "tokens/fonts";
 @import "pb_body/body";
 @import "pb_button/button";
 @import 'pb_button_toolbar/button_toolbar';

data/app/pb_kits/playbook/index.js

@@ -1,3 +1,7 @@
+import './_playbook.scss'
+import 'lazysizes/plugins/attrchange/ls.attrchange'
+import 'lazysizes'
+
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
@@ -9,6 +13,7 @@ export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'
 export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
+export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
@@ -80,6 +85,7 @@ export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
+export Typeahead from './pb_typeahead/_typeahead.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
 export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'

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

@@ -30,7 +30,11 @@ const Avatar = (props: AvatarProps) => {
   const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null, dark = false } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_avatar_kit', size), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_avatar_kit', size),
+    globalProps(props),
+    className
+  )
 
   const initials = name && firstTwoInitials(name)
   dataProps['data-initials'] = initials

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

@@ -32,8 +32,10 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, { rounded: rounded }), className,
-    globalProps(props))
+    buildCss('pb_badge_kit', variant, { rounded }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb

@@ -1,12 +1 @@
-<%= content_tag(:div, "",
-    aria: object.aria,
-    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 %>
+<%= react_component('BarGraph', object.chart_options) %>

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

@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(globalProps(this.props), className)}
           id={id}
       />
     )

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

@@ -32,6 +32,7 @@ module Playbook
       def chart_options
         {
           id: id,
+          className: classname,
           chartData: chart_data,
           type: chart_type,
           title: title,
@@ -44,7 +45,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }.to_json.html_safe
+        }
       end
 
       def classname

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -82,7 +82,11 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className, globalProps(props))
+  const css = classnames(
+    buttonClassName(props),
+    globalProps(props),
+    className
+  )
   const loadingIcon = (
     <div className="loading-icon">
       <Icon

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx

@@ -35,7 +35,11 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(buildCss('pb_button_toolbar_kit', orientation, { connected: connected }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_button_toolbar_kit', orientation, { connected }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -35,8 +35,8 @@ const Caption = (props: CaptionProps) => {
   const dataProps = buildDataProps(data)
   const css = classnames(
     buildCss('pb_caption_kit', size, variant),
-    className,
-    globalProps(props)
+    globalProps(props),
+    className
   )
 
   return (

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -40,8 +40,11 @@ const Checkbox = (props: CheckboxProps) => {
 
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_checkbox_kit',
-    { checked: checked, error: error }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_checkbox_kit', { checked, error }),
+    globalProps(props),
+    className
+  )
 
   return (
     <label

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -15,6 +15,8 @@ module Playbook
       prop :value
       prop :name
 
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :form_spacing, type: Playbook::Props::Boolean,
@@ -29,7 +31,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked)
+        check_box_tag(name, value, checked, input_options)
       end
 
       def checkbox_label_status

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("checkbox" , props: {
+  text: "Checkbox with Options",
+  input_options: {
+    id: "checkbox-id",
+    name: "checkbox-name",
+    value: "checkbox-value",
+    class: "checkbox-class",
+    checked: true
+  }
+}) %>

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

@@ -4,6 +4,7 @@ examples:
     - checkbox_checked: Load as checked
     - checkbox_custom: Custom Checkbox
     - checkbox_error: Default w/ Error
+    - checkbox_options: Checkbox w/ Options
 
   react:
   - checkbox_default: Default

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb

@@ -15,7 +15,7 @@
   <% end %>
 
   <% if object.children %>
-    <div class="pb_circle_chart_block">
+    <div class="pb-circle-chart-block">
       <%= capture(&object.children) %>
     </div>
   <% end %>

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -0,0 +1,130 @@
+/* @flow */
+
+import React, { useEffect, useRef } from 'react'
+import { pbChart } from '../'
+import { globalProps } from '../utilities/globalProps'
+import classnames from 'classnames'
+import Highcharts from 'highcharts'
+
+import { buildAriaProps, buildDataProps } from '../utilities/props'
+
+type CircleChartProps = {
+  aria: Object,
+  chartData?: array,
+  children: Node,
+  className?: string,
+  colors: array,
+  data?: Object,
+  dataLabelHtml: string,
+  dataLabels: boolean,
+  headerFormat: string,
+  id?: string,
+  innerSize: "sm" | "md" | "lg" | "none",
+  legend: boolean,
+  maxPointSize: number,
+  minPointSize: number,
+  rounded: boolean,
+  startAngle: number,
+  style: string,
+  title: string,
+  tooltipHtml: string,
+  useHtml: boolean,
+  zMin: number,
+}
+
+const CircleChart = (props: CircleChartProps) => {
+  const {
+    aria = {},
+    chartData = [{}],
+    children,
+    className,
+    colors = [],
+    data = {},
+    dataLabelHtml = '<div>{point.name}</div>',
+    dataLabels = false,
+    headerFormat = null,
+    id,
+    innerSize = 'md',
+    legend = false,
+    maxPointSize = null,
+    minPointSize = null,
+    rounded = false,
+    startAngle = null,
+    style = 'pie',
+    title = '',
+    tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
+      '<b>{point.y}</b>',
+    useHtml = false,
+    zMin = null,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const innerSizes = { sm: '35%', md: '50%', lg: '85%', none: '0%' }
+  const innerSizeFormat = (size) => innerSizes[size]
+  const roundedBorderWidth = rounded ? 20 : null
+  const roundedBorderColor = rounded ? null : ''
+
+  // Runs first time component Renders
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj) => {
+      obj.y = obj.value
+      delete obj.value
+      return obj
+    })
+
+    new pbChart('.selector', {
+      id,
+      colors,
+      borderColor: roundedBorderColor,
+      borderWidth: roundedBorderWidth,
+      chartData: formattedChartData,
+      title,
+      type: style,
+      showInLegend: legend,
+      dataLabelHtml,
+      dataLabels,
+      headerFormat,
+      tooltipHtml,
+      useHTML: useHtml,
+      minPointSize,
+      maxPointSize,
+      innerSize: innerSizeFormat(innerSize),
+      zMin,
+      startAngle,
+    })
+  }, [])
+
+  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) {
+          const updatedValueArray = chartData.map((obj) => {
+            return obj.value
+          })
+          chart.series[0].setData(updatedValueArray)
+        }
+      })
+    } else {
+      componentDidMount.current = true
+    }
+  }, [chartData])
+  return (
+    <div id={`wrapper-circle-chart-${id}`}>
+      <div
+          id={id}
+          {...ariaProps}
+          {...dataProps}
+          className={classnames('pb_circle_chart', globalProps(props), className)}
+      />
+      <If condition={children}>
+        <div className="pb-circle-chart-block">{children}</div>
+      </If>
+    </div>
+  )
+}
+
+export default CircleChart

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss

@@ -5,7 +5,7 @@
 
 }
 
-.pb_circle_chart_block {
+.pb-circle-chart-block {
     position:absolute;
     display: flex;
     justify-content: center;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { CircleChart, Title } from '../../'
+
+const dataWithABlock = [
+  {
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  },
+]
+
+const CircleChartBlock = () => (
+
+  <div>
+    <CircleChart
+        chartData={dataWithABlock}
+        id="chart-with-a-block"
+        innerSize="lg"
+        marginTop="xl"
+        rounded
+    >
+      <Title
+          size={1}
+          tag="div"
+      >
+        {'83'}
+      </Title>
+    </CircleChart>
+  </div>
+)
+
+export default CircleChartBlock