playbook_ui 6.1.0.pre.alpha2 → 7.0.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fecf67eb41f40f4f0d7ea55a6022bec483a5aacd6d41a5c1b45a7c81412b73ab
-  data.tar.gz: f3eb88406378a85f4041fba412ffbf8da0ab01fe6bf15d56aae7db985d6115bd
+  metadata.gz: e51558a950c081ce44a82ac1efe7ca0e385df8c11635dc45ce0a40c1b7dd365b
+  data.tar.gz: e8444b9839735cd9c74c3bd9e49d8b6d43c216fadc93d5d3b7974d4ce508d721
 SHA512:
-  metadata.gz: ec43cb89ba4c4da27ee725978b8ad975e6afbef7b5c267172e64765f820d8c01b9aaf9dc09d1cde312ae190a76282ecd0213d0eef4c9efdd1e1a043b0e6e4f07
-  data.tar.gz: 79d5075f7d55aa9774bc9acd6733bdf369a90d526df9958d972d1c6ddedb8ff283cf7b5a15ab051207cbd8bdff5717ea4e48d7c3c9a1491501ab8347e8e76d88
+  metadata.gz: a888fd3eb9135290f738810becc21b2ad5a98d9451ae8ff53ae431a21e2e0e87d81e1aba0e09d618f623d62c2b3622be4ba6a2b60524d2c831d93f7b811adbc8
+  data.tar.gz: a94ff922fe5a63be7a1e13f525a02aae3975979ea2483b91dd8f0e5ea56e8a382dd029121ff017c7dc2766b3c3b69631698c0fab457059a4ecc0d6eaa8903ad5

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

data/app/helpers/playbook/pb_kit_helper.rb

@@ -15,6 +15,7 @@ module Playbook
       self.prefix_partial_path_with_controller_namespace = previous
     end
 
+    # deprecated
     def pb_react(kit, props: {}, options: {})
       ::Webpacker::React::Component.new(kit.camelize).render(props, options)
     end

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';
@@ -15,7 +16,6 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
-@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';

data/app/pb_kits/playbook/data/menu.yml

@@ -26,7 +26,6 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
-    - date_picker
     - file_upload
     - form
     - form_pill

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'
@@ -14,7 +18,6 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
-export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -92,7 +95,6 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
-export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

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

@@ -11,11 +11,11 @@ import { Image } from '../'
 
 type AvatarProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  imageUrl: String,
-  name: String,
+  id?: string,
+  imageUrl: string,
+  name: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs",
   status: "away" | "offline" | "online",
 }

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -11,17 +11,17 @@ import {
 } from '../utilities/props'
 
 type AvatarActionButtonProps = {
-  action?: String,
+  action?: string,
   aria: Object,
-  className?: String,
+  className?: string,
   data?: Object,
-  id?: String,
-  imageUrl?: String,
-  linkUrl?: String,
-  name?: String,
-  onClick?: String,
-  placement?: String,
-  size?: String,
+  id?: string,
+  imageUrl?: string,
+  linkUrl?: string,
+  name?: string,
+  onClick?: string,
+  placement?: string,
+  size?: string,
 }
 
 const AvatarActionButton = ({

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

@@ -12,11 +12,11 @@ import {
 
 type BadgeProps = {
   aria?: object,
-  className?: String,
+  className?: string,
   data?: object,
-  id?: String,
-  rounded?: Boolean,
-  text?: String,
+  id?: string,
+  rounded?: boolean,
+  text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
 const Badge = (props: BadgeProps) => {

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

@@ -6,23 +6,23 @@ import { pbChart } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
 type BarGraphProps = {
-  axisTitle: String,
-  xAxisCategories: Array,
-  yAxisMin: Number,
-  yAxisMax: Number,
-  chartData: Array<{
-    name: String,
-    data: Array<Number>,
+  axisTitle: string,
+  xAxisCategories: array,
+  yAxisMin: number,
+  yAxisMax: number,
+  chartData: array<{
+    name: string,
+    data: array<number>,
   }>,
-  className?: String,
-  id: Number,
-  pointStart: Number,
-  subTitle?: String,
-  title: String,
-  type?: String,
-  legend?: Boolean,
-  toggleLegendClick?: Boolean,
-  height?: String,
+  className?: string,
+  id: number,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
 }
 
 export default class BarGraph extends React.Component<BarGraphProps> {

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

@@ -44,7 +44,7 @@ module Playbook
           legend: legend,
           toggleLegendClick: toggle_legend_click,
           height: height,
-        }.to_json.html_safe
+        }
       end
 
       def classname

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -8,17 +8,17 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type BodyProps = {
   aria?: object,
-  className?: String,
-  children?: Array<React.ReactChild>,
+  className?: string,
+  children?: array<React.ReactChild>,
   color: 'dark' | 'default' | 'light' | 'lighter' | 'light_dark' | 'lighter_dark',
-  dark?: Boolean,
+  dark?: boolean,
   data?: object,
-  highlightedText?: Array<String>,
-  highlighting?: Boolean,
-  id?: String,
+  highlightedText?: array<string>,
+  highlighting?: boolean,
+  id?: string,
   status?: 'negative' | 'neutral' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
-  text?: String,
+  text?: string,
 }
 
 const Body = (props: BodyProps) => {

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

@@ -9,26 +9,26 @@ import Icon from '../pb_icon/_icon.jsx'
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
   aria?: {
-    label: String,
+    label: string,
   },
-  children?: Array<React.ReactChild>,
-  className?: String | Array<String>,
-  disabled?: Boolean,
-  fixedWidth?: Boolean,
-  fullWidth?: Boolean,
-  icon?: String,
-  id?: String,
-  link?: String,
-  loading?: Boolean,
-  newWindow?: Boolean,
+  children?: array<React.ReactChild>,
+  className?: string | array<string>,
+  disabled?: boolean,
+  fixedWidth?: boolean,
+  fullWidth?: boolean,
+  icon?: string,
+  id?: string,
+  link?: string,
+  loading?: boolean,
+  newWindow?: boolean,
   onClick?: EventHandler,
   size: 'large' | 'medium' | 'small',
-  text?: String,
+  text?: string,
   type: 'inline' | null,
-  htmlType: String | 'button',
-  value?: String | null,
+  htmlType: string | 'button',
+  value?: string | null,
   variant: 'primary' | 'secondary' | 'link',
-  wrapperClass: String,
+  wrapperClass: string,
 }
 
 const buttonClassName = (props: ButtonPropTypes) => {

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

@@ -9,15 +9,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type ButtonToolbarProps = {
   aria?: object,
-  children?: Array<React.ReactChild>,
-  className?: String,
-  connected?: Boolean,
+  children?: array<React.ReactChild>,
+  className?: string,
+  connected?: boolean,
   data?: object,
-  id?: String,
+  id?: string,
   onClick?: EventHandler,
   orientation?: "horizontal" | "vertical",
-  text?: String,
-  variant?: String,
+  text?: string,
+  variant?: string,
 }
 
 const ButtonToolbar  = (props: ButtonToolbarProps) => {

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

@@ -7,13 +7,13 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CaptionProps = {
   aria?: object,
-  className?: String,
-  children: Array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  children: array<React.ReactNode> | React.ReactNode,
   data?: object,
-  id?: String,
+  id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
-  text?: String,
+  text?: string,
 }
 
 const Caption = (props: CaptionProps) => {

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

@@ -7,29 +7,29 @@ import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type CardPropTypes = {
-  borderNone?: Boolean,
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
+  borderNone?: boolean,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
   highlight?: {
     position?: "side" | "top",
-    color?: String,
+    color?: string,
   },
-  padding?: String,
-  selected?: Boolean,
+  padding?: string,
+  selected?: boolean,
   shadow?: "none" | "deep" | "deeper" | "deepest",
 }
 
 type CardHeaderProps = {
-  categoryColor?: Number,
-  children: Array<React.ReactNode> | React.ReactNode,
-  className?: String,
-  padding?: String,
+  categoryColor?: number,
+  children: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  padding?: string,
 }
 
 type CardBodyProps = {
-  children: Array<React.ReactNode> | React.ReactNode | String,
-  className?: String,
-  padding?: String,
+  children: array<React.ReactNode> | React.ReactNode | string,
+  className?: string,
+  padding?: string,
 }
 
 // Header component

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

@@ -9,17 +9,17 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CheckboxProps = {
   aria?: object,
-  checked?: Boolean,
-  className?: String,
-  dark?: Boolean,
+  checked?: boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  error?: Boolean,
-  id?: String,
-  name: String,
-  text: String,
-  value: String,
+  error?: boolean,
+  id?: string,
+  name: string,
+  text: string,
+  value: string,
   children: Node,
-  onChange: (Boolean) => void,
+  onChange: (boolean) => void,
 }
 
 const Checkbox = (props: CheckboxProps) => {

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -15,15 +15,15 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type CircleIconButtonProps = {
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  disabled?: Boolean,
-  icon: String,
-  id?: String,
-  link?: String,
+  disabled?: boolean,
+  icon: string,
+  id?: string,
+  link?: string,
   onClick?: Callback,
-  newWindow?: Boolean,
+  newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset',
   variant?: 'primary' | 'secondary' | 'link',
 }

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -39,12 +39,12 @@ const formatContact = (contactString, contactType) => {
 
 type ContactProps = {
   aria?: object,
-  className?: String | Array<String>,
-  contactDetail?: String,
-  contactType?: String,
-  contactValue: String,
+  className?: string | array<string>,
+  contactDetail?: string,
+  contactType?: string,
+  contactValue: string,
   data?: object,
-  id?: String,
+  id?: string,
 }
 
 const Contact = (props: ContactProps) => {

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

@@ -9,16 +9,16 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
 type CurrencyProps = {
   align?: 'center' | 'left' | 'right',
-  amount: String,
+  amount: string,
   aria?: object,
-  className?: String,
-  dark?: Boolean,
+  className?: string,
+  dark?: boolean,
   data?: object,
-  id?: String,
-  label?: String,
+  id?: string,
+  label?: string,
   size?: 'sm' | 'md' | 'lg',
-  symbol?: String,
-  unit?: String,
+  symbol?: string,
+  unit?: string,
 }
 
 const sizes = {